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

<div class="page-header">
    <div class="add-item d-flex">
        <div class="page-title">
            <h4>Liste des ravitaillements</h4>
            <h6>Gérer tous les ravitaillements</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-ravitaillement">
            <i data-feather="plus-circle" class="me-2"></i>Enregistrer un ravitaillement
        </a>
    </div>
</div>

<div class="card table-list-card">
    <div class="card-body">
        @if(count($ravitaillements) > 0)
            
            <div class="table-responsive ravitaillement-list">
                <table class="table datanew">
                    <thead>
                        <tr>
                            <th>Date</th>
                            <th>Matricule véhicule</th>
                            <th>Chauffeur</th>
                            <th>Destination</th>
                            <th>Montant Total</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($ravitaillements as $ravitaillement)
                            <tr>
                                <td>{{ $ravitaillement->date}}</td>
                                <td>{{ $ravitaillement->matricule_vehicule }}</td>
                                <td>{{ $ravitaillement->nom_chauffeur}} <br>
                                    <p>{{ $ravitaillement->contact_chauffeur}}</p>
                                </td>
                                <td>{{ $ravitaillement->destination }}</td>
                                <td>{{ number_format($ravitaillement->montant_total, 0, ' ') }} FCFA</td>
                                <td>
                                    <span class="badge {{ $ravitaillement->status ? 'badge-linesuccess' : 'badge-linedanger' }}">
                                        {{ $ravitaillement->status }}
                                    </span>
                                </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-{{ $ravitaillement->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('ravitaillements.edit', $ravitaillement->id) }}" >
                                            <i data-feather="edit" class="feather-edit"></i>
                                        </a>
                                        <!--
                                            <a class="p-2" href="#" onclick="confirmDeletion(event, {{ $ravitaillement->id }})">
                                                <i data-feather="trash-2" class="feather-trash-2"></i>
                                            </a>
                                            <form id="delete-ravitaillement-{{ $ravitaillement->id }}" action="{{ route('ravitaillements.destroy', $ravitaillement->id) }}" method="POST" class="d-none">
                                                @csrf
                                                @method('DELETE')
                                            </form>
                                        -->
                                    </div>
                                </td>
                                
                            </tr>
                           
                        @empty
                            <tr>
                                <td colspan="9" class="text-center">Aucun achat trouvé.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        @else
        <p class="text-center text-danger">Pas encore d'achat</p>
        @endif
    </div>
</div>

@include('ravitaillements.partials.add')


@foreach($ravitaillements as $ravitaillement)
<!-- Modal Print Receipt -->
<div class="modal fade modal-default" id="print-recu-{{ $ravitaillement->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-{{ $ravitaillement->id }}">
                <div class="bg-white p-6 max-w-md mx-auto rounded-lg shadow-xl">
                    <div id="receipt-for-print-{{ $ravitaillement->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 ravitaillement</p>
                            <p class="text-sm">{{ $ravitaillement->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>{{ $ravitaillement->reference }}</span>
                            </div>
                            <div class="d-flex justify-content-between">
                                <span>Gestionnaire:</span>
                                <span>{{ $ravitaillement->user->nom }} {{ $ravitaillement->user->prenom }}</span>
                            </div>
                        </div>
                        <hr class="my-2" style="color: black">
                        <div class="my-4">
                            <h3 class="font-bold mb-2">Désignations:</h3>
                            @foreach($ravitaillement->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($ravitaillement->montant_total, 0, ' ', ' ') }} FCFA</span>
                            </div>
                            <div class="d-flex justify-content-between">
                                <span>Montant reçu:</span>
                                <span>{{ number_format($ravitaillement->montant_paiement, 0, ' ', ' ') }} FCFA</span>
                            </div>
                            <div class="d-flex justify-content-between">
                                <span>Rendue:</span>
                                <span>{{ number_format(abs($ravitaillement->montant_due), 0, ' ', ' ') }} FCFA</span>
                            </div>
                            
                        </div>
                        <div class="border-top pt-2">
                            <div class="d-flex justify-content-between">
                                <span>Destination:</span>
                                <span>{{ $ravitaillement->destination }}</span>
                            </div>
                            <div class="d-flex justify-content-between">
                                <span>Matricule véhicule:</span>
                                <span>{{ $ravitaillement->matricule_vehicule }}</span>
                            </div>
                            <div class="d-flex justify-content-between">
                                <span>Nom chauffeur:</span>
                                <span>{{ $ravitaillement->nom_chauffeur }}</span>
                            </div>
                            <div class="d-flex justify-content-between">
                                <span>Contact Chauffeur:</span>
                                <span>{{ $ravitaillement->contact_chauffeur }}</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({{ $ravitaillement->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>
    function confirmDeletion(event, ravitaillementId) {
        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-ravitaillement-${ravitaillementId}`).submit();
            }
        });
    }
</script>
<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>
    function captureReceipt(ravitaillementId) {
        const { jsPDF } = window.jspdf;
        const receiptElement = document.getElementById(`receipt-for-print-${ravitaillementId}`);
    
        if (!receiptElement) {
            console.error("Élément du reçu non trouvé !");
            return;
        }
    
        html2canvas(receiptElement, { scale: 2 }).then(canvas => {
            const imgData = canvas.toDataURL("image/png");
            const pdf = new jsPDF("p", "mm", [80, 250]);
    
            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 !");
            }
        }).catch(error => {
            console.error("Erreur lors de la génération du PDF :", error);
        });
    }
    </script>
@endsection