{{-- Component Value Recommendation --}}
<style>
.value-recommendation {
    position: relative;
    width: 100%;
    display: block;
}

/* Pastikan input dalam input-group tidak hilang */
.input-group .value-recommendation {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    display: flex;
    align-items: stretch;
}

.input-group .value-recommendation .form-control {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    margin-bottom: 0;
    border-radius: 0.375rem;
}

/* Border radius untuk input dalam input-group */
.input-group .value-recommendation:not(:first-child) .form-control {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group .value-recommendation:not(:last-child) .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Perbaikan khusus untuk material search input di sebelah kanan button */
.input-group .material-search-recommendation {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Perbaikan khusus untuk alt bom input yang berada di tengah (antara 2 button) */
.input-group .alt-bom-input-recommendation {
    border-radius: 0 !important;
}

/* Pastikan input dalam input-group tidak memiliki border radius yang salah */
.input-group .value-recommendation .form-control,
.input-group .material-search-recommendation,
.input-group .alt-bom-input-recommendation {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Untuk input yang berada di tengah input-group (antara 2 elemen) */
.input-group .input-group-text + .value-recommendation .form-control,
.input-group .input-group-text + .alt-bom-input-recommendation {
    border-radius: 0 !important;
}

/* Untuk input dalam input-group dengan recommendation active */
.input-group .value-recommendation input.recommendation-active:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group .value-recommendation input.recommendation-active:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Spesifik untuk material dan alt-bom input yang active */
.input-group .material-search-recommendation.recommendation-active,
.input-group .alt-bom-input-recommendation.recommendation-active {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group .alt-bom-input-recommendation.recommendation-active {
    border-radius: 0 !important;
}

.recommendation-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 0.375rem 0.375rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    max-height: 200px;
    overflow-y: auto;
    z-index: 1050;
    display: none;
    margin-top: 0;
}

/* Pastikan dropdown berada di posisi yang tepat dalam input-group */
.input-group .value-recommendation .recommendation-dropdown {
    left: 0;
    right: 0;
}

.recommendation-item {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid #f8f9fa;
    transition: background-color 0.15s ease-in-out;
    font-size: 0.875rem;
}

.recommendation-item:hover {
    background-color: #f8f9fa;
}

.recommendation-item:last-child {
    border-bottom: none;
}

.recommendation-item.selected {
    background-color: #e7f3ff;
    color: #0d6efd;
}

.recommendation-item .value-text {
    font-weight: 500;
    color: #495057;
}

.recommendation-item .description-text {
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

.recommendation-loading {
    padding: 0.75rem;
    text-align: center;
    color: #6c757d;
    font-style: italic;
}

.recommendation-no-data {
    padding: 0.75rem;
    text-align: center;
    color: #6c757d;
    font-style: italic;
}

/* Scroll styling */
.recommendation-dropdown::-webkit-scrollbar {
    width: 6px;
}

.recommendation-dropdown::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.recommendation-dropdown::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.recommendation-dropdown::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Animation */
.recommendation-dropdown.show {
    display: block;
    animation: fadeInDown 0.2s ease-out;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Input focus styling when recommendation is active */
.value-recommendation input.recommendation-active {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: #0d6efd;
}

/* Untuk input dalam input-group dengan recommendation active */
.input-group .value-recommendation input.recommendation-active:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group .value-recommendation input.recommendation-active:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Spesifik untuk material dan alt-bom input yang active */
.input-group .material-search-recommendation.recommendation-active,
.input-group .alt-bom-input-recommendation.recommendation-active {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group .alt-bom-input-recommendation.recommendation-active {
    border-radius: 0 !important;
}

/* Responsive */
@media (max-width: 576px) {
    .recommendation-dropdown {
        max-height: 150px;
    }
    
    .recommendation-item {
        padding: 0.4rem 0.6rem;
    }
}

/* Reset dan proteksi */
.value-recommendation * {
    box-sizing: border-box;
}

.recommendation-dropdown {
    position: absolute !important;
    z-index: 1050 !important;
}

/* Pastikan input tidak ter-override - HANYA untuk Material FG/SFG dan Alt BOM */
.value-recommendation .form-control:not(.form-control-sm) {
    display: block !important;
    width: 100% !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #212529 !important;
    background-color: #fff !important;
    background-image: none !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 0.375rem !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

/* Jangan override form-control-sm (untuk Comp Material Code) */
.value-recommendation .form-control.form-control-sm {
    /* Biarkan Bootstrap styling form-control-sm yang berlaku */
    display: block !important;
    width: 100% !important;
    color: #212529 !important;
    background-color: #fff !important;
    background-image: none !important;
    border: 1px solid #dee2e6 !important;
}
</style>

<script>
// Value Recommendation Component JavaScript
class ValueRecommendation {
    constructor(options) {
        this.inputSelector = options.inputSelector;
        this.apiUrl = options.apiUrl;
        this.type = options.type; // 'material' or 'altbom'
        this.onSelect = options.onSelect || function() {};
        this.minLength = options.minLength || 1;
        this.debounceTime = options.debounceTime || 200;
        
        this.init();
    }
    
    init() {
        setTimeout(() => {
            const inputs = document.querySelectorAll(this.inputSelector);
            
            inputs.forEach((input, index) => {
                this.setupInput(input);
            });
        }, 100);
    }
    
    setupInput(input) {
        if (!input) return;
        if (input._vrInitialized) return;
        input._vrInitialized = true;

        // Nonaktifkan autocomplete browser
        input.setAttribute('autocomplete', 'off');
        input.setAttribute('autocapitalize', 'off');
        input.setAttribute('autocorrect', 'off');
        input.setAttribute('spellcheck', 'false');
        
        const inputGroup = input.closest('.input-group');
        let wrapper;
        
        if (inputGroup) {
            wrapper = input.parentNode.querySelector('.value-recommendation');
            if (!wrapper) {
                wrapper = document.createElement('div');
                wrapper.className = 'value-recommendation';
                wrapper.style.position = 'relative';
                wrapper.style.flex = '1 1 auto';
                wrapper.style.width = '1%';
                wrapper.style.minWidth = '0';
                
                input.parentNode.insertBefore(wrapper, input);
                wrapper.appendChild(input);
            }
        } else {
            wrapper = input.closest('.value-recommendation');
            if (!wrapper) {
                wrapper = this.createWrapper(input);
            }
        }
        
        let dropdown = wrapper.querySelector('.recommendation-dropdown');
        if (!dropdown) {
            dropdown = this.createDropdown();
            wrapper.appendChild(dropdown);
        }
        
        if (!wrapper.contains(input)) {
            wrapper.appendChild(input);
        }
        
        let debounceTimer;
        let selectedIndex = -1;
        input._isSelecting = false;
        input._recAbortController = null;

        // Prevent input blur when clicking inside the dropdown
        dropdown.addEventListener('mousedown', (e) => {
            e.preventDefault();
        });
        
        input.addEventListener('input', (e) => {
            if (input._isSelecting || (e.detail && e.detail.fromRecommendation) || !e.isTrusted) {
                return;
            }

            clearTimeout(debounceTimer);
            const value = e.target.value.trim();
            
            if (value.length >= this.minLength) {
                debounceTimer = setTimeout(() => {
                    if (!input._isSelecting) {
                        this.fetchRecommendations(value, dropdown, input);
                    }
                }, this.debounceTime);
            } else {
                this.hideDropdown(dropdown, input);
            }
        });
        
        // Keyboard navigation
        input.addEventListener('keydown', (e) => {
            const items = dropdown.querySelectorAll('.recommendation-item');
            
            if (items.length === 0 || !dropdown.classList.contains('show')) return;
            
            switch (e.key) {
                case 'ArrowDown':
                    e.preventDefault();
                    selectedIndex = Math.min(selectedIndex + 1, items.length - 1);
                    this.updateSelection(items, selectedIndex);
                    break;
                    
                case 'ArrowUp':
                    e.preventDefault();
                    selectedIndex = Math.max(selectedIndex - 1, -1);
                    this.updateSelection(items, selectedIndex);
                    break;
                    
                case 'Enter':
                    if (selectedIndex >= 0 && items[selectedIndex]) {
                        e.preventDefault();
                        items[selectedIndex].click();
                    }
                    break;
                    
                case 'Escape':
                    this.hideDropdown(dropdown, input);
                    selectedIndex = -1;
                    break;
            }
        });
        
        // Hide dropdown when clicking outside
        document.addEventListener('click', (e) => {
            if (!wrapper.contains(e.target) && !e.target.closest('.comp-material-check-btn')) {
                this.hideDropdown(dropdown, input);
                selectedIndex = -1;
            }
        });
        
        // Focus and blur events
        input.addEventListener('focus', () => {
            if (input._isSelecting) return;
            const value = input.value.trim();
            if (value.length >= this.minLength) {
                this.fetchRecommendations(value, dropdown, input);
            }
        });
        
        input.addEventListener('blur', () => {
            // Delay hiding to allow click on dropdown items
            setTimeout(() => {
                if (!wrapper.querySelector('.recommendation-dropdown:hover')) {
                    this.hideDropdown(dropdown, input);
                    selectedIndex = -1;
                }
            }, 150);
        });
    }
    
    createWrapper(input) {
        const wrapper = document.createElement('div');
        wrapper.className = 'value-recommendation';
        
        const parent = input.parentNode;
        parent.insertBefore(wrapper, input);
        wrapper.appendChild(input);
        
        return wrapper;
    }
    
    createDropdown() {
        const dropdown = document.createElement('div');
        dropdown.className = 'recommendation-dropdown';
        return dropdown;
    }
    
    fetchRecommendations(query, dropdown, input) {
        if (input._isSelecting) return;

        if (input._recAbortController) {
            input._recAbortController.abort();
        }
        const abortController = new AbortController();
        input._recAbortController = abortController;

        this.showLoading(dropdown, input);

        let action = 'get_recommendations';
        if (this.type === 'altbom') {
            action = 'get_altbom_recommendations';
        } else if (this.type === 'compmaterial') {
            action = 'get_comp_recommendations';
        }
        
        const url = `${this.apiUrl}?action=${action}&type=${this.type}&q=${encodeURIComponent(query)}`;

        fetch(url, {
            method: 'GET',
            signal: abortController.signal,
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
            }
        })
        .then(response => {
            return response.json();
        })
        .then(data => {
            if (input._isSelecting) return;
            this.renderRecommendations(data, dropdown, input, query);
        })
        .catch(error => {
            if (error.name === 'AbortError') return;
            console.error('[ValueRecommendation] Error fetching recommendations:', error);
            if (!input._isSelecting) {
                this.showError(dropdown, input);
            }
        });
    }
    
    showLoading(dropdown, input) {
        dropdown.innerHTML = '<div class="recommendation-loading">Mencari rekomendasi...</div>';
        this.showDropdown(dropdown, input);
    }
    
    showError(dropdown, input) {
        dropdown.innerHTML = '<div class="recommendation-no-data">Error mengambil data</div>';
        this.showDropdown(dropdown, input);
    }
    
    renderRecommendations(data, dropdown, input, query) {
        if (input._isSelecting) return;

        if (!data || data.length === 0) {
            dropdown.innerHTML = '<div class="recommendation-no-data">Tidak ada rekomendasi</div>';
            this.showDropdown(dropdown, input);
            return;
        }
        
        // Prioritaskan yang exact match dari awal
        const sortedData = this.smartSort(data, query);
        
        let html = '';
        sortedData.forEach((item, index) => {
            let value, description;
            
            if (this.type === 'material') {
                value = item.material_fg_sfg;
                description = item.product;
            } else if (this.type === 'altbom') {
                value = item.alt_bom_text;
                description = '';
            } else if (this.type === 'compmaterial') {
                value = item.kode_baru_fg;
                description = item.description;
            }
            
            // Highlight matching text
            const highlightedValue = this.highlightText(value, query);
            
            html += `
                <div class="recommendation-item" data-value="${value}" data-index="${index}">
                    <div class="value-text">${highlightedValue}</div>
                    ${description ? `<div class="description-text">${description}</div>` : ''}
                </div>
            `;
        });
        
        dropdown.innerHTML = html;
        
        // Add click event listeners
        dropdown.querySelectorAll('.recommendation-item').forEach(item => {
            item.addEventListener('click', (e) => {
                e.stopPropagation();
                e.preventDefault();

                input._isSelecting = true;
                if (input._recAbortController) {
                    input._recAbortController.abort();
                    input._recAbortController = null;
                }

                const value = item.getAttribute('data-value');
                input.value = value;
                this.hideDropdown(dropdown, input);
                this.onSelect(value, input);
                
                // Trigger input & change events for external listeners
                input.dispatchEvent(new CustomEvent('input', { bubbles: true, detail: { fromRecommendation: true } }));
                input.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { fromRecommendation: true } }));

                setTimeout(() => {
                    input._isSelecting = false;
                }, 300);
            });
        });
        
        this.showDropdown(dropdown, input);
    }
    
    /**
     * SMART SORTING: Prioritaskan hasil berdasarkan relevansi
     * Prioritas 1: Exact match dari awal (starts with)
     * Prioritas 2: Contains query di tengah
     * Prioritas 3: Contains sebagian karakter
     */
    smartSort(data, query) {
        const queryLower = query.toLowerCase();
        
        // Kategorikan data berdasarkan relevansi
        const exactMatch = [];      // Mulai dengan query exact
        const startsWithPartial = []; // Mulai dengan sebagian query
        const containsQuery = [];    // Mengandung query di tengah
        const containsChars = [];    // Mengandung karakter query
        
        data.forEach(item => {
            let value;
            
            // Get value berdasarkan type
            if (this.type === 'material') {
                value = item.material_fg_sfg || '';
            } else if (this.type === 'altbom') {
                value = item.alt_bom_text || '';
            } else if (this.type === 'compmaterial') {
                value = item.kode_baru_fg || '';
            } else {
                value = '';
            }
            
            const valueLower = value.toLowerCase();
            
            // Prioritas 1: Exact match dari awal (7P0RA00-000W10 starts with 7P0RA00-000W10)
            if (valueLower.startsWith(queryLower)) {
                exactMatch.push(item);
            }
            // Prioritas 2: Starts with sebagian query (7P0RA00-000W10-... starts with 7P0RA)
            else if (queryLower.length > 3 && valueLower.startsWith(queryLower.substring(0, Math.floor(queryLower.length / 2)))) {
                startsWithPartial.push(item);
            }
            // Prioritas 3: Contains query di tengah
            else if (valueLower.includes(queryLower)) {
                containsQuery.push(item);
            }
            // Prioritas 4: Contains sebagian besar karakter dari query
            else {
                const matchCount = this.countMatchingChars(valueLower, queryLower);
                const matchRatio = matchCount / queryLower.length;
                
                // Hanya masukkan jika match ratio > 50%
                if (matchRatio > 0.5) {
                    item._matchScore = matchCount; // Tambahkan score untuk sorting
                    containsChars.push(item);
                }
            }
        });
        
        // Sort containsChars by match score (descending)
        containsChars.sort((a, b) => (b._matchScore || 0) - (a._matchScore || 0));
        
        // Gabungkan dengan urutan prioritas
        return [
            ...exactMatch,           // Prioritas tertinggi
            ...startsWithPartial,    // Prioritas tinggi
            ...containsQuery,        // Prioritas sedang
            ...containsChars         // Prioritas rendah
        ];
    }
    
    /**
     * Hitung berapa banyak karakter dari query yang ada di value
     */
    countMatchingChars(value, query) {
        let count = 0;
        const queryChars = query.split('');
        
        queryChars.forEach(char => {
            if (value.includes(char)) {
                count++;
            }
        });
        
        return count;
    }
    
    highlightText(text, query) {
        if (!query) return text;

        const textLower = text.toLowerCase();
        const queryLower = query.toLowerCase();
        
        // SMART HIGHLIGHT: Highlight exact match atau sequential characters
        
        // Cek apakah ada exact match substring
        const exactIndex = textLower.indexOf(queryLower);
        if (exactIndex !== -1) {
            // Highlight exact match
            const before = text.substring(0, exactIndex);
            const match = text.substring(exactIndex, exactIndex + query.length);
            const after = text.substring(exactIndex + query.length);
            return `${before}<mark style="background-color: #fff3cd; padding: 0; font-weight: 600;">${match}</mark>${after}`;
        }
        
        // Jika tidak ada exact match, highlight karakter yang match
        let highlighted = '';
        const queryChars = queryLower.split('');
        let queryIndex = 0;
        
        for (let i = 0; i < text.length; i++) {
            const c = text[i];
            const cLower = c.toLowerCase();
            
            // Highlight hanya jika sequential match dengan query
            if (queryIndex < queryChars.length && cLower === queryChars[queryIndex]) {
                highlighted += `<mark style="background-color: #fff3cd; padding: 0;">${c}</mark>`;
                queryIndex++;
            } else {
                highlighted += c;
            }
        }
        
        return highlighted;
    }
    
    updateSelection(items, selectedIndex) {
        items.forEach((item, index) => {
            item.classList.toggle('selected', index === selectedIndex);
        });
        
        if (selectedIndex >= 0) {
            items[selectedIndex].scrollIntoView({ block: 'nearest' });
        }
    }
    
    showDropdown(dropdown, input) {
        if (input && input._isSelecting) return;
        dropdown.classList.add('show');
        input.classList.add('recommendation-active');
    }
    
    hideDropdown(dropdown, input) {
        dropdown.classList.remove('show');
        input.classList.remove('recommendation-active');
        dropdown.innerHTML = '';
    }
}

// Export for use in other files
window.ValueRecommendation = ValueRecommendation;
</script>