@extends('layouts.app')
@section('content')

<div class="page-header">
    <div class="add-item d-flex">
        <div class="page-title">
            <h4>Liste des achats</h4>
            <h6>Gérer tous les achats</h6>
        </div>
    </div>
    <ul class="table-top-head">
        <li>
            <a href="javascript:void(0);" onclick="location.reload();" data-bs-toggle="tooltip" title="Refresh">
                <i data-feather="rotate-ccw"></i>
            </a>
        </li>
    </ul>
    <div class="page-btn">
        <a href="#" class="btn btn-added" data-bs-toggle="modal" data-bs-target="#add-commande">
            <i data-feather="plus-circle" class="me-2"></i>Enregistrer une commande
        </a>
    </div>
</div>

<div class="card table-list-card">
    <div class="card-body">
        @if (session('error'))
            <div class="alert alert-danger mt-3">
                {{ session('error') }}
            </div>
        @endif
        @if (session('success'))
            <div class="alert alert-success mt-3">
                {{ session('success') }}
            </div>
        @endif
        @if(count($purchases) > 0)
            <div class="table-responsive purchase-list">
                <table class="table datanew">
                    <thead>
                        <tr>
                            <th>Ref</th>
                            <th>Date</th>
                            <th>Magasin</th>
                            <th>Montant Total</th>
                            <th>Créé par</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($purchases as $purchase)
                            <tr>
                                <td>{{ $purchase->reference }}</td>
                                <td>{{ $purchase->created_at->translatedFormat('d M Y') }}</td>
                                <td>{{ $purchase->magasin->name ?? 'N/A' }}</td>
                                <td>{{ number_format($purchase->montant_total, 0, ' ', ' ') }} FCFA</td>
                                <td>{{ $purchase->user->nom . ' ' . $purchase->user->prenom }}</td>
                                <td class="action-table-data">
                                    <div class="edit-delete-action">
                                        <a class="me-2" href="#" data-bs-toggle="modal" data-bs-target="#print-recu-{{ $purchase->id }}">
                                            <i data-feather="printer" class="feather-rotate-ccw h-12 w-12"></i>
                                        </a>
                                        <a class="me-2 edit-icon p-2" href="{{ route('purchases.edit', $purchase->id) }}">
                                            <i data-feather="edit"></i>
                                        </a>
                                        <a class="me-2 p-2 confirm-text" href="javascript:void(0);" onclick="confirmDeletion(event, {{ $purchase->id }})">
                                            <i data-feather="trash-2"></i>
                                        </a>
                                        <form id="delete-purchase-{{ $purchase->id }}" action="{{ route('purchases.destroy', $purchase->id) }}" method="POST" class="d-none">
                                            @csrf
                                            @method('DELETE')
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="text-center">Aucune commande trouvée.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
                    <!-- Pagination Personnalisée -->
    @if ($purchases->hasPages())
    <div class="d-flex justify-content-end">
        {{ $purchases->appends(request()->query())->links('pagination::bootstrap-4') }}
    </div>
     @endif
        
            </div>
        @else
            @include('partials.empty-state', [
                'icon' => 'shopping-bag',
                'title' => 'Aucune commande pour le moment',
                'description' => 'Les commandes fournisseurs enregistrées apparaîtront ici.',
                'actionModal' => '#add-commande',
                'actionLabel' => 'Nouvelle commande',
            ])
        @endif
    </div>
</div>

@include('purchases.partials.add')

@foreach($purchases as $purchase)
<!-- Modal Print Receipt -->
<div class="modal fade modal-default" id="print-recu-{{ $purchase->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-{{ $purchase->id }}">
                <div class="bg-white p-6 max-w-md mx-auto rounded-lg shadow-xl">
                    <div id="receipt-for-print-{{ $purchase->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">BADIE SERVICES</h2>
                            <p class="text-sm mb-0">Tel: +225 XX XX XX XX</p>
                            <p class="text-sm">Côte d'Ivoire, Daloa</p>
                            <hr class="my-2" style="color: black">
                            <p class="text-sm mb-0">Reçu de Commande</p>
                            <p class="text-sm">{{ $purchase->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>{{ $purchase->reference }}</span>
                            </div>
                            <div class="d-flex justify-content-between">
                                <span>Gestionnaire:</span>
                                <span>{{ $purchase->user->nom }} {{ $purchase->user->prenom }}</span>
                            </div>
                            <div class="d-flex justify-content-between">
                                <span>Magasin:</span>
                                <span>{{ $purchase->magasin->name ?? 'N/A' }}</span>
                            </div>
                        </div>
                        <hr class="my-2" style="color: black">
                        <div class="my-4">
                            <h3 class="font-bold mb-2">Désignations:</h3>
                            @foreach($purchase->details as $item)
                            <div class="border-bottom py-1">
                                <div class="d-flex justify-content-between">
                                    <span>{{ $item->product->name ?? 'Produit supprimé' }}@if($item->variant_label) — {{ $item->variant_label }}@endif ({{ $item->product->barcode ?? 'N/A' }})</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($purchase->montant_total, 0, ' ', ' ') }} FCFA</span>
                            </div>
                        </div>
                        
                        <div class="text-center mt-4 text-sm">
                            <p>Merci pour votre confiance!</p>
                            <p>À bientôt</p>
                        </div>
                    </div>

                    <div class="d-flex justify-content-center gap-3 mt-4">
                        <button onclick="captureReceipt({{ $purchase->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

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    $(document).ready(function() {
        if (typeof feather !== 'undefined') {
            feather.replace();
        }
    });

    function confirmDeletion(event, purchaseId) {
        event.preventDefault();
        Swal.fire({
            title: "Êtes-vous sûr ?",
            text: "Cette action est irréversible !",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#d33",
            cancelButtonColor: "#3085d6",
            confirmButtonText: "Oui, supprimer !",
            cancelButtonText: "Annuler"
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById(`delete-purchase-${purchaseId}`).submit();
            }
        });
    }

    function captureReceipt(purchaseId) {
        const { jsPDF } = window.jspdf;
        const receiptElement = document.getElementById(`receipt-for-print-${purchaseId}`);
    
        if (!receiptElement) {
            console.error("Élément du reçu non trouvé !");
            Swal.fire({
                icon: 'error',
                title: 'Erreur',
                text: 'Impossible de générer le reçu. Veuillez réessayer.',
            });
            return;
        }
    
        html2canvas(receiptElement, { scale: 2 }).then(canvas => {
            const imgData = canvas.toDataURL("image/png");
            const pdf = new jsPDF("p", "mm", [80, canvas.height / 2 + 20]);
    
            pdf.addImage(imgData, "PNG", 0, 0, 80, 0);

            const pdfBlob = pdf.output("blob");
            const pdfUrl = URL.createObjectURL(pdfBlob);
            const printWindow = window.open(pdfUrl);
    
            if (printWindow) {
                printWindow.onload = function () {
                    printWindow.print();
                };
            } else {
                console.error("Erreur lors de l'ouverture de la fenêtre d'impression !");
                Swal.fire({
                    icon: 'error',
                    title: 'Erreur',
                    text: 'Impossible d\'ouvrir la fenêtre d\'impression.',
                });
            }
        }).catch(error => {
            console.error("Erreur lors de la génération du PDF :", error);
            Swal.fire({
                icon: 'error',
                title: 'Erreur',
                text: 'Une erreur est survenue lors de la génération du reçu.',
            });
        });
    }
</script>
@endsection