@extends('layouts.app')

@section('content')
<div class="page-header">
    <div class="add-item d-flex">
        <div class="page-title">
            <h4>Liste des retours</h4>
            <h6>Gérer tous les retours de commande
                @if(Auth::user()->role->name == 'Administrateur' && session('active_store_name'))
                    - {{ session('active_store_name') }}
                @endif
            </h6>
        </div>
    </div>
    <ul class="table-top-head">
        <li>
            <a href="javascript:void(0);" onclick="location.reload();" data-bs-toggle="tooltip" title="Rafraîchir">
                <i data-feather="rotate-ccw"></i>
            </a>
        </li>
    </ul>
    @if(Auth::user()->role->name !== 'Gestionnaire')
    <div class="page-btn">
        <a href="#" class="btn btn-added" data-bs-toggle="modal" data-bs-target="#add-retour">
            <i data-feather="plus-circle" class="me-2"></i>Nouveau retour
        </a>
    </div>
    @endif
</div>

<div class="card table-list-card">
    <div class="card-body">
        <div class="table-top mb-3">
            <form id="filter-form" class="row g-3 align-items-end w-100">
                <div class="col-md-3">
                    <label class="form-label" for="status-filter">Statut</label>
                    <select id="status-filter" name="status" class="form-control">
                        <option value="">Tous</option>
                        <option value="en attente de retour">En attente de retour</option>
                        <option value="retourné">Retourné</option>
                        <option value="annulé">Annulé</option>
                        <option value="livraison annulée">Livraison annulée</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label" for="date-filter">Date</label>
                    <input type="date" id="date-filter" name="date" class="form-control">
                </div>
                <div class="col-md-3">
                    <label class="form-label" for="reference-filter">Référence</label>
                    <input type="text" id="reference-filter" name="reference" class="form-control" placeholder="N° facture…">
                </div>
                <div class="col-md-3 d-flex gap-2">
                    <button type="submit" class="btn btn-primary">
                        <i data-feather="filter" class="me-1" style="width:16px;height:16px;"></i>Filtrer
                    </button>
                    <button type="button" id="filter-reset" class="btn btn-light">
                        <i data-feather="rotate-ccw" class="me-1" style="width:16px;height:16px;"></i>Réinit.
                    </button>
                </div>
            </form>
        </div>

        @if($sales->isNotEmpty())
            <div class="table-responsive sale-list">
                <table class="table returns-table">
                    <thead>
                        <tr>
                            <th>Réf</th>
                            <th>Canal</th>
                            <th>Date</th>
                            <th>Client</th>
                            <th>Montant Total</th>
                            <th>Statut</th>
                            <th>Créé par</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody id="returns-table">
                        @foreach($sales as $sale)
                            @include('sales.partials.return-row', ['sale' => $sale])
                        @endforeach
                    </tbody>
                </table>
            </div>
            @if ($sales->hasPages())
                <div class="d-flex justify-content-end mt-3">
                    {{ $sales->links('pagination::bootstrap-4') }}
                </div>
            @endif
        @else
            @include('partials.empty-state', [
                'icon' => 'rotate-ccw',
                'title' => 'Aucun retour enregistré',
                'description' => 'Les demandes de retour apparaîtront ici.',
                'actionModal' => Auth::user()->role->name !== 'Gestionnaire' ? '#add-retour' : null,
                'actionLabel' => Auth::user()->role->name !== 'Gestionnaire' ? 'Nouveau retour' : null,
            ])
        @endif
    </div>
</div>

<style>
    [id^="receipt-for-print-"] {
        font-size: 15px;
        line-height: 1.45;
    }
    [id^="receipt-for-print-"] .text-sm {
        font-size: 14px !important;
    }
    [id^="receipt-for-print-"] h2,
    [id^="receipt-for-print-"] .text-2xl {
        font-size: 20px !important;
    }
    [id^="receipt-for-print-"] h3 {
        font-size: 17px !important;
    }
</style>
@foreach($sales as $sale)
    <!-- Modal Print Receipt -->
    <div class="modal fade modal-default" id="print-receipt-{{ $sale->id }}" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content" style="width: 90mm; margin: auto;">
                <div class="modal-body" id="receipt-content-{{ $sale->id }}">
                    <div class="bg-white p-6 max-w-md mx-auto rounded-lg shadow-xl">
                        <div id="receipt-for-print-{{ $sale->id }}" class="bg-white p-4" style="width: 80mm; margin: auto;">
                            <div class="text-center mb-4">
                                <h2 class="text-2xl font-bold mb-1">{{ $settings->entreprise }}</h2>
                                <p class="text-sm mb-0">Tel: {{ $settings->no_telephone . ' / '. $settings->no_telephone2 }}</p>
                                <p class="text-sm">{{ $settings->adresse }}</p>
                                <hr class="my-2" style="color: black">
                                <p class="text-sm mb-0">{{ ($sale->type ?? 'boutique') === 'livraison' ? 'Bon de livraison' : 'Reçu de vente' }}</p>
                                <p class="text-sm">{{ $sale->created_at->translatedFormat('d/m/Y à H:i:s') }}</p>
                                <hr class="my-2" style="color: black">
                            </div>

                            <div class="border-t border-b py-2 my-2">
                                <div class="d-flex justify-content-between">
                                    <span>N° Facture:</span>
                                    <span>{{ $sale->reference }}</span>
                                </div>
                                <div class="d-flex justify-content-between">
                                    <span>Caissier:</span>
                                    <span>{{ $sale->user->nom }} {{ $sale->user->prenom }}</span>
                                </div>
                                @php
                                    $receiptClient = $sale->nomCl ?: ($sale->client?->full_name ?? null);
                                @endphp
                                @if($receiptClient)
                                <div class="d-flex justify-content-between">
                                    <span>Client:</span>
                                    <span>{{ $receiptClient }}</span>
                                </div>
                                @endif
                                @if($sale->telephone_client)
                                <div class="d-flex justify-content-between">
                                    <span>Téléphone:</span>
                                    <span>{{ $sale->telephone_client }}</span>
                                </div>
                                @endif
                                @if($sale->adresse_livraison)
                                <div class="d-flex justify-content-between">
                                    <span>Adresse:</span>
                                    <span>{{ $sale->adresse_livraison }}</span>
                                </div>
                                @endif
                            </div>
                            <hr class="my-2" style="color: black">
                            <div class="my-4">
                                <h3 class="font-bold mb-2">Désignations:</h3>
                                @foreach($sale->details as $item)
                                <div class="border-bottom py-1">
                                    <div class="d-flex justify-content-between">
                                        <span>{{ $item->product->name ?? ' '}}{{ $item->variant_label ? ' - ' . $item->variant_label : '' }}</span>
                                        <span>{{ $item->quantity }}X</span>
                                    </div>
                                    <div class="d-flex justify-content-between text-sm">
                                        <span>PU: {{ number_format($item->price, 0, ' ', ' ') }} FCFA</span>
                                        <span>{{ number_format($item->quantity * $item->price, 0, ' ', ' ') }} FCFA</span>
                                    </div>
                                </div>
                                @endforeach
                            </div>

                            <div class="border-top pt-2">
                                @include('sales.partials.receipt-articles-delivery-lines', ['sale' => $sale])
                                <div class="d-flex justify-content-between font-bold">
                                    <span>TOTAL:</span>
                                    <span>{{ number_format($sale->montant_total, 0, ' ', ' ') }} FCFA</span>
                                </div>
                                <div class="d-flex justify-content-between">
                                    <span>Montant reçu:</span>
                                    <span>{{ number_format($sale->montant_paiement, 0, ' ', ' ') }} FCFA</span>
                                </div>
                                <div class="d-flex justify-content-between">
                                    <span>Rendue:</span>
                                    <span>{{ number_format(abs($sale->montant_due), 0, ' ', ' ') }} FCFA</span>
                                </div>
                                <div class="d-flex justify-content-between">
                                    <span>Moyen paiement:</span>
                                    <span>Espèce</span>
                                </div>
                            </div>

                            <div class="text-center mt-4 text-sm">
                                <p>{{ $settings->message }}</p>
                                <p>À bientôt</p>
                            </div>
                        </div>

                        <div class="d-flex justify-content-center gap-3 mt-4">
                            <button onclick="captureReceipt({{ $sale->id }})" class="btn btn-primary">
                                Imprimer le reçu
                            </button>
                            <button class="btn btn-secondary" data-bs-dismiss="modal">
                                Fermer
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endforeach

<!-- 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>
                        <input type="text" id="search" class="form-control" placeholder="Entrer la référence (minimum 3 caractères)">
                    </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>
        </div>
    </div>
</div>

<script src="{{ asset('assets/js/jquery-3.7.1.min.js') }}"></script>
<script>
    $(document).ready(function () {
        let debounceTimer;

        // Recherche des ventes
        $('#search').on('keyup', function () {
            clearTimeout(debounceTimer);
            debounceTimer = setTimeout(fetchSales, 500);
        });

        function fetchSales() {
            let query = $('#search').val().trim();

            if (query.length < 3) {
                $('#commande-list').empty();
                return;
            }

            $.ajax({
                url: "{{ route('sales.search.sales') }}",
                type: 'GET',
                data: { query: query },
                dataType: 'json',
                success: function (response) {
                    $('#commande-list').empty();

                    if (!response.length) {
                        $('#commande-list').append('<tr><td colspan="6" class="text-center text-muted">Aucune vente trouvée</td></tr>');
                        return;
                    }

                    let salesMap = {};
                    response.forEach(sale => {
                        if (!salesMap[sale.reference]) {
                            salesMap[sale.reference] = { ...sale, totalQuantity: 0 };
                        }
                        sale.details.forEach(detail => {
                            salesMap[sale.reference].totalQuantity += detail.quantity;
                        });
                    });

                    Object.values(salesMap).forEach(sale => {
                        let productName = 'N/A';
                        if (sale.details && sale.details.length > 0 && sale.details[0].product) {
                            productName = sale.details[0].product.name;
                        }

                        $('#commande-list').append(`
                            <tr>
                                <td>${sale.reference || 'N/A'}</td>
                                <td>${productName}</td>
                                <td>${sale.totalQuantity || 0}</td>
                                <td>${sale.montant_paiement || 0} FCFA</td>
                                <td>${sale.montant_total || 0} FCFA</td>
                                <td>
                                    <button type="button" class="btn btn-primary btn-sm return-btn" data-sale-id="${sale.id}">
                                        Retourner
                                    </button>
                                </td>
                            </tr>
                        `);
                    });
                },
                error: function (xhr) {
                    console.error('Erreur de recherche:', xhr);
                    Swal.fire("Erreur", "Une erreur s'est produite lors de la recherche.", "error");
                }
            });
        }

        // Gestionnaire d'événement pour le bouton "Retourner"
        $(document).on('click', '.return-btn', function (e) {
            e.preventDefault();
            e.stopPropagation();

            let saleId = $(this).data('sale-id');
            let button = $(this);

            button.prop('disabled', true);

            Swal.fire({
                title: 'Confirmer le retour',
                text: "Êtes-vous sûr de vouloir demander le retour de cette vente ?",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#E8187A',
                cancelButtonColor: '#7A6070',
                confirmButtonText: 'Oui, demander',
                cancelButtonText: 'Annuler'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('sales.retour') }}",
                        type: "POST",
                        headers: { 
                            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content") 
                        },
                        data: { 
                            sale_id: saleId
                        },
                        success: function (response) {
                            Swal.fire({
                                title: "Succès",
                                text: "Demande de retour enregistrée avec succès !",
                                icon: "success",
                                confirmButtonText: "OK"
                            }).then(() => {
                                $('#add-retour').modal('hide');
                                location.reload();
                            });
                        },
                        error: function (xhr) {
                            let errorMsg = xhr.responseJSON?.error || "Une erreur est survenue";
                            Swal.fire("Erreur", errorMsg, "error");
                            button.prop('disabled', false);
                        }
                    });
                } else {
                    button.prop('disabled', false);
                }
            });
        });

        // Gestion du filtre
        function applyReturnsFilter() {
            $.ajax({
                url: "{{ route('sales.filter.returns') }}",
                type: 'GET',
                data: {
                    status: $('#status-filter').val(),
                    date: $('#date-filter').val(),
                    reference: $('#reference-filter').val()
                },
                success: function (data) {
                    $('#returns-table').html(data);
                    if (typeof feather !== 'undefined') {
                        feather.replace();
                    }
                },
                error: function () {
                    Swal.fire("Erreur", "Une erreur s'est produite lors du filtrage.", "error");
                }
            });
        }

        $('#filter-form').on('submit', function (e) {
            e.preventDefault();
            applyReturnsFilter();
        });

        $('#filter-reset').on('click', function () {
            $('#status-filter').val('');
            $('#date-filter').val('');
            $('#reference-filter').val('');
            applyReturnsFilter();
        });
    });
</script>

<script src="{{ asset('assets/js/receipt-print.js') }}"></script>

@endsection