@extends('layouts.app')

@section('title', 'Nouvelle vente - Bar & Maquis')

@section('content')
<div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-lg shadow p-6">
        <div class="mb-6">
            <h1 class="text-2xl font-bold text-gray-900">Nouvelle vente</h1>
            <p class="text-gray-600">Enregistrer une nouvelle vente</p>
        </div>

        <form action="{{ route('sales.store') }}" method="POST" id="saleForm">
            @csrf
            
            <!-- Sélection des produits -->
            <div class="mb-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Produits</h3>
                
                <div id="productsContainer">
                    <div class="product-row grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Produit</label>
                            <select name="items[0][product_id]" class="product-select w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required>
                                <option value="">Sélectionner un produit</option>
                                @foreach($products as $product)
                                    <option value="{{ $product->id }}" data-price="{{ $product->price }}" data-cost-price="{{ $product->cost_price }}" data-stock="{{ $product->stock_quantity }}">
                                        {{ $product->name }} - {{ number_format($product->price, 0, ',', ' ') }} FCFA (Stock: {{ $product->stock_quantity }})
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Quantité</label>
                            <input type="number" name="items[0][quantity]" class="quantity-input w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500" min="1" required>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Prix unitaire</label>
                            <input type="number" class="unit-price w-full border border-gray-300 rounded-lg px-3 py-2 bg-gray-100" readonly>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Total</label>
                            <input type="number" class="total-price w-full border border-gray-300 rounded-lg px-3 py-2 bg-gray-100" readonly>
                        </div>
                    </div>
                </div>
                
                <button type="button" id="addProduct" class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition">
                    + Ajouter un produit
                </button>
            </div>

            <!-- Résumé de la vente -->
            <div class="bg-gray-50 rounded-lg p-4 mb-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Résumé de la vente</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <p class="text-sm text-gray-600">Total HT</p>
                        <p class="text-2xl font-bold text-gray-900" id="totalAmount">0 FCFA</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-600">Profit estimé</p>
                        <p class="text-2xl font-bold text-green-600" id="totalProfit">0 FCFA</p>
                    </div>
                </div>
            </div>

            <!-- Informations de paiement -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="payment_method" class="block text-sm font-medium text-gray-700 mb-2">Méthode de paiement *</label>
                    <select name="payment_method" id="payment_method" required
                            class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <option value="cash">Espèces</option>
                        <option value="card">Carte bancaire</option>
                        <option value="mobile_money">Mobile Money</option>
                    </select>
                </div>

                <div>
                    <label for="customer_name" class="block text-sm font-medium text-gray-700 mb-2">Nom du client</label>
                    <input type="text" name="customer_name" id="customer_name" value="{{ old('customer_name') }}"
                           class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
            </div>

            <div class="mt-6">
                <label for="notes" class="block text-sm font-medium text-gray-700 mb-2">Notes</label>
                <textarea name="notes" id="notes" rows="3"
                          class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">{{ old('notes') }}</textarea>
            </div>

            <div class="mt-6 flex justify-end space-x-3">
                <a href="{{ route('sales.index') }}" 
                   class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition">
                    Annuler
                </a>
                <button type="submit" 
                        class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition">
                    Enregistrer la vente
                </button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
let productRowCount = 1;

document.getElementById('addProduct').addEventListener('click', function() {
    const container = document.getElementById('productsContainer');
    const newRow = document.querySelector('.product-row').cloneNode(true);
    
    // Mettre à jour les noms des champs
    newRow.querySelectorAll('select, input').forEach(input => {
        const name = input.getAttribute('name');
        if (name) {
            input.setAttribute('name', name.replace('[0]', `[${productRowCount}]`));
        }
        input.value = '';
    });
    
    // Ajouter bouton supprimer
    const removeBtn = document.createElement('button');
    removeBtn.type = 'button';
    removeBtn.className = 'bg-red-600 text-white px-2 py-1 rounded text-sm hover:bg-red-700 transition';
    removeBtn.textContent = 'Supprimer';
    removeBtn.onclick = function() {
        newRow.remove();
        calculateTotals();
    };
    newRow.appendChild(removeBtn);
    
    container.appendChild(newRow);
    productRowCount++;
    
    // Ajouter les event listeners
    addProductRowListeners(newRow);
});

function addProductRowListeners(row) {
    const productSelect = row.querySelector('.product-select');
    const quantityInput = row.querySelector('.quantity-input');
    const unitPriceInput = row.querySelector('.unit-price');
    const totalPriceInput = row.querySelector('.total-price');
    
    productSelect.addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        const price = selectedOption.dataset.price || 0;
        unitPriceInput.value = price;
        calculateRowTotal(row);
        calculateTotals();
    });
    
    quantityInput.addEventListener('input', function() {
        calculateRowTotal(row);
        calculateTotals();
    });
}

function calculateRowTotal(row) {
    const quantity = parseFloat(row.querySelector('.quantity-input').value) || 0;
    const unitPrice = parseFloat(row.querySelector('.unit-price').value) || 0;
    const total = quantity * unitPrice;
    row.querySelector('.total-price').value = total.toFixed(2);
}

function calculateTotals() {
    let totalAmount = 0;
    let totalProfit = 0;
    
    document.querySelectorAll('.product-row').forEach(row => {
        const productSelect = row.querySelector('.product-select');
        const quantity = parseFloat(row.querySelector('.quantity-input').value) || 0;
        const selectedOption = productSelect.options[productSelect.selectedIndex];
        
        if (selectedOption.value) {
            const price = parseFloat(selectedOption.dataset.price) || 0;
            const costPrice = parseFloat(selectedOption.dataset.costPrice) || 0; // Utiliser le vrai prix d'achat
            
            totalAmount += quantity * price;
            totalProfit += quantity * (price - costPrice);
        }
    });
    
    document.getElementById('totalAmount').textContent = totalAmount.toFixed(0) + ' FCFA';
    document.getElementById('totalProfit').textContent = totalProfit.toFixed(0) + ' FCFA';
}

// Ajouter les listeners pour la première ligne
document.addEventListener('DOMContentLoaded', function() {
    addProductRowListeners(document.querySelector('.product-row'));
});
</script>
@endpush
@endsection