@extends('layouts.app')

@section('content')
<div class="page-header">
    <div class="d-flex justify-content-between align-items-center w-100">
        <div>
            <h4>Liste des retours de commande</h4>
            <h6>Gérer tous les retours de commande</h6>
        </div>
        <div>
            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#add-retour">
                <i data-feather="plus-circle" class="me-2"></i> Nouveau retour
            </button>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <div class="mb-3">
            <div class="row">
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="filter-date">Filtrer par date</label>
                        <input type="date" id="filter-date" class="form-control">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="filter-status">Statut</label>
                        <select id="filter-status" class="form-control">
                            <option value="">Tous</option>
                            <option value="terminé">Terminé</option>
                            <option value="en cours">En cours</option>
                            <option value="annulé">Annulé</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="filter-reference">Référence</label>
                        <input type="text" id="filter-reference" class="form-control" placeholder="Rechercher...">
                    </div>
                </div>
            </div>
        </div>

        <div id="sales-table-container">
            @include('sales.partials.sales-returns-table', ['sales' => $sales])
        </div>
    </div>
</div>

<!-- Modal détail retour (sera chargé dynamiquement) -->
<div class="modal fade" id="view-return-details" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="width: 90mm; margin: auto;">
            <div class="modal-body" id="return-details-content">
                <!-- Le contenu sera chargé dynamiquement -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="print-receipt">Imprimer le reçu</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal de retour -->
<div class="modal fade" id="add-retour">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5>Enregistrer un retour</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="form-retour">
                    @csrf
                    <div class="mb-3">
                        <label for="search">Rechercher une commande</label>
                        <div class="input-group">
                            <input type="text" id="search" class="form-control" placeholder="Entrer la référence ou le nom du client">
                            <button type="button" id="clear-search" class="btn btn-outline-secondary">
                                <i data-feather="x"></i>
                            </button>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>Référence</th>
                                    <th>Produit</th>
                                    <th>Quantité</th>
                                    <th>Montant payé</th>
                                    <th>Montant total</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody id="commande-list"></tbody>
                        </table>
                    </div>
                </form>
                <div id="selected-items-container" class="mt-3 d-none">
                    <h6>Produits à retourner</h6>
                    <form id="return-items-form">
                        <table class="table" id="selected-items-table">
                            <thead>
                                <tr>
                                    <th>Produit</th>
                                    <th>Qté disponible</th>
                                    <th>Qté à retourner</th>
                                    <th>Motif</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody id="selected-items-list"></tbody>
                        </table>
                        <div class="form-group">
                            <label for="return-note">Note de retour</label>
                            <textarea id="return-note" class="form-control" rows="2" placeholder="Raison du retour..."></textarea>
                        </div>
                        <div class="d-flex justify-content-end mt-3">
                            <button type="button" class="btn btn-primary" id="submit-return">Enregistrer le retour</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="{{ asset('assets/js/jquery-3.7.1.min.js') }}"></script>
<script src="{{ asset('assets/js/html2canvas.min.js') }}"></script>
<script>
    $(document).ready(function () {
        // Initialisation des icônes Feather
        if (typeof feather !== 'undefined') {
            feather.replace();
        }

        // Variables globales
        let currentSaleId = null;
        let saleDetails = {};
        let selectedItems = {};

        // Gestion de la recherche
        let debounceTimer;
        $('#search').on('keyup', function () {
            clearTimeout(debounceTimer);
            debounceTimer = setTimeout(fetchSales, 500);
        });

        // Effacer la recherche
        $('#clear-search').on('click', function() {
            $('#search').val('');
            $('#commande-list').empty();
            resetReturnForm();
        });

        // Gestion des filtres
        $('#filter-date, #filter-status, #filter-reference').on('change keyup', function() {
            applyFilters();
        });

        function applyFilters() {
            const date = $('#filter-date').val();
            const status = $('#filter-status').val();
            const reference = $('#filter-reference').val();

            $.ajax({
                url: "{{ route('sales.filter.returns') }}",
                type: 'GET',
                data: { date, status, reference },
                success: function(response) {
                    $('#sales-table-container').html(response);
                    if (typeof feather !== 'undefined') {
                        feather.replace();
                    }
                },
                error: function() {
                    showErrorMessage("Erreur lors du filtrage des retours");
                }
            });
        }

        function fetchSales() {
            let query = $('#search').val().trim();
            if (query.length < 3) {
                $('#commande-list').empty();
                resetReturnForm();
                return;
            }

            $.ajax({
                url: "{{ route('sales.search.sales') }}",
                type: 'GET',
                data: { query },
                dataType: 'json',
                success: function (response) {
                    $('#commande-list').empty();
                    if (!response.length) {
                        $('#commande-list').append('<tr><td colspan="6" class="text-center">Aucune vente trouvée</td></tr>');
                        return;
                    }

                    response.forEach(sale => {
                        // Stocker les détails pour un usage ultérieur
                        saleDetails[sale.id] = sale;
                        
                        const productsInfo = sale.details.map(d => d.product?.name || 'Produit inconnu').join(', ');
                        const totalQuantity = sale.details.reduce((sum, d) => sum + d.quantity, 0);
                        
                        $('#commande-list').append(`
                            <tr>
                                <td>${sale.reference || 'N/A'}</td>
                                <td>${productsInfo}</td>
                                <td>${totalQuantity || 0}</td>
                                <td>${formatCurrency(sale.montant_paiement)} FCFA</td>
                                <td>${formatCurrency(sale.montant_total)} FCFA</td>
                                <td>
                                    <button class="btn btn-info btn-sm view-details-btn" data-sale-id="${sale.id}">
                                        <i data-feather="eye" class="icon-sm"></i> Détails
                                    </button>
                                </td>
                            </tr>
                        `);
                    });
                    
                    // Réinitialiser les icônes Feather
                    if (typeof feather !== 'undefined') {
                        feather.replace();
                    }
                },
                error: function (xhr) {
                    showErrorMessage("Une erreur s'est produite lors de la recherche.");
                }
            });
        }

        // Afficher les détails de la vente pour le retour
        $(document).on('click', '.view-details-btn', function () {
            const saleId = $(this).data('sale-id');
            currentSaleId = saleId;
            
            if (saleDetails[saleId]) {
                showSaleItemsForReturn(saleDetails[saleId]);
            } else {
                // Récupérer les détails si non disponibles
                $.ajax({
                    url: "{{ route('sales.get.details') }}",
                    type: 'GET',
                    data: { sale_id: saleId },
                    dataType: 'json',
                    success: function(sale) {
                        saleDetails[saleId] = sale;
                        showSaleItemsForReturn(sale);
                    },
                    error: function() {
                        showErrorMessage("Impossible de récupérer les détails de la vente");
                    }
                });
            }
        });

        function showSaleItemsForReturn(sale) {
            $('#selected-items-list').empty();
            selectedItems = {};
            
            if (!sale.details || !sale.details.length) {
                showErrorMessage("Cette vente ne contient aucun produit");
                return;
            }
            
            sale.details.forEach(detail => {
                const productName = detail.product?.name || 'Produit inconnu';
                const detailId = detail.id;
                
                $('#selected-items-list').append(`
                    <tr data-detail-id="${detailId}">
                        <td>${productName}</td>
                        <td>${detail.quantity}</td>
                        <td>
                            <input type="number" class="form-control return-quantity" 
                                min="1" max="${detail.quantity}" value="1">
                        </td>
                        <td>
                            <select class="form-control return-reason">
                                <option value="defectueux">Produit défectueux</option>
                                <option value="incompatible">Incompatible</option>
                                <option value="commande_erronee">Erreur de commande</option>
                                <option value="autre">Autre</option>
                            </select>
                        </td>
                        <td>
                            <button type="button" class="btn btn-outline-primary btn-sm add-item" data-detail-id="${detailId}">
                                <i data-feather="plus"></i> Ajouter
                            </button>
                        </td>
                    </tr>
                `);
            });
            
            $('#selected-items-container').removeClass('d-none');
            
            // Réinitialiser les icônes Feather
            if (typeof feather !== 'undefined') {
                feather.replace();
            }
        }

        // Ajouter un produit au retour
        $(document).on('click', '.add-item', function() {
            const detailId = $(this).data('detail-id');
            const row = $(`tr[data-detail-id="${detailId}"]`);
            const quantity = parseInt(row.find('.return-quantity').val());
            const reason = row.find('.return-reason').val();
            const maxQuantity = parseInt(row.find('.return-quantity').attr('max'));
            
            if (isNaN(quantity) || quantity < 1 || quantity > maxQuantity) {
                showErrorMessage(`Veuillez entrer une quantité valide (entre 1 et ${maxQuantity})`);
                return;
            }
            
            // Ajouter à la liste des produits sélectionnés
            selectedItems[detailId] = {
                detailId: detailId,
                quantity: quantity,
                reason: reason
            };
            
            // Modifier le bouton
            $(this).removeClass('btn-outline-primary add-item').addClass('btn-outline-danger remove-item')
                .html('<i data-feather="trash-2"></i> Retirer');
            
            // Désactiver les champs
            row.find('.return-quantity, .return-reason').prop('disabled', true);
            
            // Réinitialiser les icônes Feather
            if (typeof feather !== 'undefined') {
                feather.replace();
            }
        });
        
        // Retirer un produit du retour
        $(document).on('click', '.remove-item', function() {
            const detailId = $(this).data('detail-id');
            const row = $(`tr[data-detail-id="${detailId}"]`);
            
            // Supprimer de la liste des produits sélectionnés
            delete selectedItems[detailId];
            
            // Modifier le bouton
            $(this).removeClass('btn-outline-danger remove-item').addClass('btn-outline-primary add-item')
                .html('<i data-feather="plus"></i> Ajouter');
            
            // Réactiver les champs
            row.find('.return-quantity, .return-reason').prop('disabled', false);
            
            // Réinitialiser les icônes Feather
            if (typeof feather !== 'undefined') {
                feather.replace();
            }
        });

        // Soumettre le retour
        $('#submit-return').on('click', function() {
            const selectedItemsArray = Object.values(selectedItems);
            
            if (selectedItemsArray.length === 0) {
                showErrorMessage("Veuillez sélectionner au moins un produit à retourner");
                return;
            }
            
            const returnData = {
                sale_id: currentSaleId,
                note: $('#return-note').val(),
                items: selectedItemsArray,
                _token: $('input[name="_token"]').val()
            };
            
            $.ajax({
                url: "{{ route('sales.store.retour') }}",
                type: "POST",
                data: returnData,
                dataType: 'json',
                beforeSend: function() {
                    $('#submit-return').prop('disabled', true).html('<i class="spinner-border spinner-border-sm"></i> Traitement...');
                },
                success: function(response) {
                    showSuccessMessage("Retour enregistré avec succès");
                    resetReturnForm();
                    $('#add-retour').modal('hide');
                    
                    // Rafraîchir la liste des retours
                    setTimeout(() => {
                        location.reload();
                    }, 1500);
                },
                error: function(xhr) {
                    let errorMsg = xhr.responseJSON?.error || "Une erreur est survenue lors de l'enregistrement du retour";
                    showErrorMessage(errorMsg);
                    $('#submit-return').prop('disabled', false).html('Enregistrer le retour');
                }
            });
        });

        // Afficher le détail d'un retour
        $(document).on('click', '.view-return-btn', function() {
            const returnId = $(this).data('return-id');
            
            $.ajax({
                url: "{{ route('sales.return.detail') }}",
                type: 'GET',
                data: { return_id: returnId },
                beforeSend: function() {
                    $('#return-details-content').html('<div class="text-center"><div class="spinner-border"></div></div>');
                    $('#view-return-details').modal('show');
                },
                success: function(response) {
                    $('#return-details-content').html(response);
                },
                error: function() {
                    $('#return-details-content').html('<div class="alert alert-danger">Impossible de charger les détails du retour</div>');
                }
            });
        });

        // Impression du reçu
        $('#print-receipt').on('click', function() {
            const content = document.getElementById('return-receipt-content');
            if (!content) return;
            
            const printWindow = window.open('', '_blank');
            printWindow.document.write(`
                <html>
                <head>
                    <title>Reçu de retour</title>
                    <style>
                        @page { size: 80mm auto; margin: 0; }
                        body { font-family: Arial, sans-serif; margin: 0; padding: 10px; font-size: 14px; }
                        .receipt { width: 80mm; margin: 0 auto; font-size: 14px; line-height: 1.45; }
                        .text-center { text-align: center; }
                        .my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
                        .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
                        .d-flex { display: flex; }
                        .justify-content-between { justify-content: space-between; }
                        .border-bottom { border-bottom: 1px solid #ddd; }
                        .border-top { border-top: 1px solid #ddd; }
                        .font-bold { font-weight: bold; }
                        .text-sm { font-size: 13px; }
                        h2 { font-size: 18px; }
                        h3 { font-size: 16px; }
                        hr { border: none; border-top: 1px solid #000; }
                        @media print {
                            html, body {
                                width: 80mm;
                                height: auto;
                                margin: 0;
                                padding: 4mm 3mm;
                            }
                        }
                    </style>
                </head>
                <body>
                    <div class="receipt">
                        ${content.innerHTML}
                    </div>
                    <script>
                        window.onload = function() { window.print(); setTimeout(function() { window.close(); }, 500); }
                    </script>
                </body>
                </html>
            `);
            printWindow.document.close();
        });

        // Fonctions utilitaires
        function resetReturnForm() {
            $('#selected-items-container').addClass('d-none');
            $('#selected-items-list').empty();
            $('#return-note').val('');
            currentSaleId = null;
            selectedItems = {};
        }

        function formatCurrency(value) {
            if (isNaN(value)) return '0';
            return new Intl.NumberFormat('fr-FR').format(value);
        }

        function showSuccessMessage(message) {
            Swal.fire({
                title: "Succès",
                text: message,
                icon: "success",
                confirmButtonText: "OK"
            });
        }

        function showErrorMessage(message) {
            Swal.fire({
                title: "Erreur",
                text: message,
                icon: "error",
                confirmButtonText: "OK"
            });
        }
    });
</script>
@endsection