@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>
        @if(Auth::user()->role->name !== 'Gestionnaire')
        <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>
        @endif
    </div>
</div>

<div class="card">
    <div class="card-body">
        <!-- Filtre de statut -->
        <div class="mb-3">
            <form id="filter-form" class="d-flex gap-3">
                <div class="form-group">
                    <label for="status-filter">Filtrer par 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>
                    </select>
                </div>
                <div class="form-group">
                    <label for="date-filter">Date</label>
                    <input type="date" id="date-filter" name="date" class="form-control">
                </div>
                <div class="form-group">
                    <label for="reference-filter">Référence</label>
                    <input type="text" id="reference-filter" name="reference" class="form-control" placeholder="Entrer la référence">
                </div>
                <div class="form-group align-self-end">
                    <button type="submit" class="btn btn-primary">Filtrer</button>
                </div>
            </form>
        </div>

        @if($sales->isNotEmpty())
        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>Réf</th>
                        <th>Date</th>
                        <th>Montant Total</th>
                        <th>Statut</th>
                        <th>Créé par</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody id="returns-table">
                    @foreach($sales as $sale)
                    <tr>
                        <td>{{ $sale->reference }}</td>
                        <td>{{ $sale->created_at->translatedFormat('d M Y') }}</td>
                        <td>{{ number_format($sale->montant_total, 0, ' ', ' ') }} FCFA</td>
                        <td>
                            <span class="badge 
                                {{ $sale->status == 'retourné' ? 'badge-success' : 
                                   ($sale->status == 'en attente de retour' ? 'badge-warning' : 
                                   ($sale->status == 'annulé' ? 'badge-danger' : '')) }}">
                                {{ ucfirst($sale->status) }}
                            </span>
                        </td>
                        <td>{{ $sale->user->nom . ' ' . $sale->user->prenom }}</td>
                        <td>
                            <a href="#" class="btn btn-info btn-sm" data-bs-toggle="modal" data-bs-target="#print-receipt-{{ $sale->id }}">
                                <i data-feather="eye"></i> Voir
                            </a>
                            @if(Auth::user()->role->name == 'Gestionnaire' && $sale->status == 'en attente de retour')
                                <a href="javascript:void(0);" onclick="event.preventDefault(); document.getElementById('confirm-return-{{ $sale->id }}').submit();" class="btn btn-success btn-sm approve-return-btn">
                                    <i data-feather="check" class="icon-sm"></i> Approuver
                                </a>
                                <a href="javascript:void(0);" onclick="event.preventDefault(); document.getElementById('cancel-return-{{ $sale->id }}').submit();" class="btn btn-danger btn-sm cancel-return-btn">
                                    <i data-feather="x" class="icon-sm"></i> Annuler
                                </a>
                                <form id="confirm-return-{{ $sale->id }}" action="{{ route('sales.approve.return', $sale->id) }}" method="POST" class="d-none">
                                    @csrf
                                    @method('POST')
                                </form>
                                <form id="cancel-return-{{ $sale->id }}" action="{{ route('sales.cancel.return', $sale->id) }}" method="POST" class="d-none">
                                    @csrf
                                    @method('POST')
                                </form>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        {{ $sales->links() }}
        @else
        <p class="text-center text-danger">Aucun retour enregistré</p>
        @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">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>
                                @if($sale->nomCl)
                                <div class="d-flex justify-content-between">
                                    <span>Client:</span>
                                    <span>{{ $sale->nomCl }}</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 ?? ' '}}</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">
                                <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-danger 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: '#3085d6',
                cancelButtonColor: '#d33',
                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
        $('#filter-form').on('submit', function (e) {
            e.preventDefault();
            let status = $('#status-filter').val();
            let date = $('#date-filter').val();
            let reference = $('#reference-filter').val();

            $.ajax({
                url: "{{ route('sales.filter.returns') }}",
                type: 'GET',
                data: {
                    status: status,
                    date: date,
                    reference: reference
                },
                success: function (data) {
                    $('#returns-table').html($(data).find('#returns-table').html());
                },
                error: function (xhr) {
                    Swal.fire("Erreur", "Une erreur s'est produite lors du filtrage.", "error");
                }
            });
        });
    });
</script>

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

@endsection