{% extends 'base.html.twig' %}

{% block title %}Nouveau mouvement -
	{{ parent() }}
{% endblock %}

{% block body %}
	<div class="row justify-content-center">
		<div class="col-md-8">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title mb-0">
						<i class="fas fa-exchange-alt me-2"></i>Nouveau mouvement de stock
					</h4>
				</div>
				<div class="card-body">
					{{ form_start(form) }}
					<div class="row">
						<div class="col-md-8 mb-3">
							<div class="row">
								<div class="col-8">
									{{ form_row(form.dateHeure) }}
								</div>
								<div class="col-4 d-flex align-items-end">
									<div class="btn-group btn-group-sm w-100" role="group">
										<button type="button" class="btn btn-outline-secondary heure-rapide" data-offset="0" title="Maintenant">
											<i class="fas fa-clock me-1"></i>Maintenant
										</button>
										<button type="button" class="btn btn-outline-secondary heure-rapide" data-offset="-60" title="Il y a 1h">
											-1h
										</button>
									</div>
								</div>
							</div>
						</div>
						<div class="col-md-4 mb-3">
							{{ form_row(form.type) }}
						</div>
					</div>

					<div class="row">
						<div class="col-md-8 mb-3">
							<div class="produit-search-container">
								{{ form_label(form.produit) }}
								<div class="position-relative">
									<input type="text" 
										   id="produit-search" 
										   class="form-control mb-2" 
										   placeholder="Rechercher un produit par référence ou description..."
										   autocomplete="off">
									<div id="search-results" class="search-results d-none position-absolute w-100 bg-white border rounded shadow-sm" style="z-index: 1000; max-height: 200px; overflow-y: auto;"></div>
								</div>
								{{ form_widget(form.produit, {'attr': {'style': 'display: none;'}}) }}
								<div id="selected-product" class="selected-product mt-2 d-none">
									<div class="alert alert-info">
										<i class="fas fa-box me-2"></i>
										<span id="selected-product-text"></span>
										<button type="button" class="btn btn-sm btn-outline-secondary float-end" id="clear-selection">
											<i class="fas fa-times"></i>
										</button>
									</div>
								</div>
								{{ form_help(form.produit) }}
							</div>
						</div>
						<div class="col-md-4 mb-3">
							{{ form_row(form.quantite) }}
						</div>
					</div>

					<div class="mb-3">
						{{ form_row(form.commentaire) }}
					</div>

					<div class="d-flex justify-content-between">
						<a href="{{ path('app_stock_journal') }}" class="btn btn-secondary">
							<i class="fas fa-arrow-left me-2"></i>Retour
						</a>
						<button type="submit" class="btn btn-primary">
							<i class="fas fa-save me-2"></i>Enregistrer le mouvement
						</button>
					</div>
					{{ form_end(form) }}
				</div>
			</div>
		</div>
	</div>
{% endblock %}

{% block javascripts %}
<style>
.search-results {
    border-top: none !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

.search-result-item {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s;
}

.search-result-item:hover, .search-result-item.active {
    background-color: #f8f9fa;
}

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

.search-result-reference {
    font-weight: bold;
    color: #007bff;
}

.search-result-description {
    color: #6c757d;
    font-size: 0.9em;
}

.selected-product .alert {
    margin-bottom: 0;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('produit-search');
    const searchResults = document.getElementById('search-results');
    const selectedProduct = document.getElementById('selected-product');
    const selectedProductText = document.getElementById('selected-product-text');
    const clearButton = document.getElementById('clear-selection');
    const produitSelect = document.querySelector('select[name="mouvement_stock[produit]"]');
    
    // Récupérer tous les produits du select original
    const allProducts = Array.from(produitSelect.options)
        .filter(option => option.value !== '')
        .map(option => ({
            value: option.value,
            text: option.text,
            reference: option.text.split(' - ')[0],
            description: option.text.split(' - ')[1] || ''
        }));
    
    let searchTimeout;
    
    // Fonction de recherche
    function searchProducts(query) {
        if (!query || query.length < 2) {
            hideResults();
            return;
        }
        
        const filteredProducts = allProducts.filter(product => {
            const searchTerm = query.toLowerCase();
            return product.reference.toLowerCase().includes(searchTerm) ||
                   product.description.toLowerCase().includes(searchTerm);
        });
        
        displayResults(filteredProducts);
    }
    
    // Afficher les résultats
    function displayResults(products) {
        if (products.length === 0) {
            searchResults.innerHTML = '<div class="search-result-item text-muted">Aucun produit trouvé</div>';
        } else {
            searchResults.innerHTML = products.map(product => `
                <div class="search-result-item" data-value="${product.value}">
                    <div class="search-result-reference">${product.reference}</div>
                    <div class="search-result-description">${product.description}</div>
                </div>
            `).join('');
        }
        
        searchResults.classList.remove('d-none');
    }
    
    // Masquer les résultats
    function hideResults() {
        searchResults.classList.add('d-none');
    }
    
    // Sélectionner un produit
    function selectProduct(productValue, productText) {
        produitSelect.value = productValue;
        selectedProductText.textContent = productText;
        selectedProduct.classList.remove('d-none');
        searchInput.value = '';
        hideResults();
    }
    
    // Effacer la sélection
    function clearSelection() {
        produitSelect.value = '';
        selectedProduct.classList.add('d-none');
        searchInput.focus();
    }
    
    // Événements
    searchInput.addEventListener('input', function() {
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(() => {
            searchProducts(this.value);
        }, 300);
    });
    
    searchInput.addEventListener('focus', function() {
        if (this.value.length >= 2) {
            searchProducts(this.value);
        }
    });
    
    // Clic sur un résultat
    searchResults.addEventListener('click', function(e) {
        const item = e.target.closest('.search-result-item');
        if (item && item.dataset.value) {
            const productValue = item.dataset.value;
            const productText = allProducts.find(p => p.value === productValue).text;
            selectProduct(productValue, productText);
        }
    });
    
    // Effacer la sélection
    clearButton.addEventListener('click', clearSelection);
    
    // Masquer les résultats si clic ailleurs
    document.addEventListener('click', function(e) {
        if (!e.target.closest('.produit-search-container')) {
            hideResults();
        }
    });
    
    // Gestion du clavier
    searchInput.addEventListener('keydown', function(e) {
        const items = searchResults.querySelectorAll('.search-result-item');
        const activeItem = searchResults.querySelector('.search-result-item.active');
        
        if (e.key === 'ArrowDown') {
            e.preventDefault();
            if (activeItem) {
                activeItem.classList.remove('active');
                const next = activeItem.nextElementSibling;
                if (next) next.classList.add('active');
                else items[0]?.classList.add('active');
            } else {
                items[0]?.classList.add('active');
            }
        } else if (e.key === 'ArrowUp') {
            e.preventDefault();
            if (activeItem) {
                activeItem.classList.remove('active');
                const prev = activeItem.previousElementSibling;
                if (prev) prev.classList.add('active');
                else items[items.length - 1]?.classList.add('active');
            } else {
                items[items.length - 1]?.classList.add('active');
            }
        } else if (e.key === 'Enter') {
            e.preventDefault();
            if (activeItem && activeItem.dataset.value) {
                const productValue = activeItem.dataset.value;
                const productText = allProducts.find(p => p.value === productValue).text;
                selectProduct(productValue, productText);
            }
        } else if (e.key === 'Escape') {
            hideResults();
        }
    });
    
    // Vérifier s'il y a déjà une sélection (pour édition)
    if (produitSelect.value) {
        const selectedOption = produitSelect.options[produitSelect.selectedIndex];
        if (selectedOption) {
            selectProduct(selectedOption.value, selectedOption.text);
        }
    }
});

// Gestion des boutons d'heure rapide
document.addEventListener('DOMContentLoaded', function() {
    const heureButtons = document.querySelectorAll('.heure-rapide');
    const dateTimeInput = document.querySelector('input[name="mouvement_stock[dateHeure]"]');
    
    heureButtons.forEach(button => {
        button.addEventListener('click', function() {
            const offset = parseInt(this.dataset.offset);
            
            // Créer une date pour le fuseau horaire de Ouagadougou (GMT+0)
            // Note: Le Burkina Faso utilise GMT+0 toute l'année
            const now = new Date();
            now.setMinutes(now.getMinutes() + offset);
            
            // Format ISO pour l'input datetime-local (heure locale de Ouagadougou)
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0');
            const day = String(now.getDate()).padStart(2, '0');
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            
            dateTimeInput.value = `${year}-${month}-${day}T${hours}:${minutes}`;
        });
    });
});
</script>
{% endblock %}