@extends('layouts.details')

@section('content')
<div id="global-container" class="container mx-auto px-4">
    <div class="title-container">
        <h1 style="color: white !important;">📁 CONSULTATION DE DOSSIER PLENIGED</h1>
        <p class="subtitle">Référence : <strong>{{ $dossier->reference }}</strong></p>
    </div>
    <!--center><h2><b>CONSULTATION DU DOSSIER :</b> {{ $dossier->reference }}</h2></center-->
    <h3><b>Date Ouverture :</b> {{ $dossier->date_ouverture }} | <b>Date Clôture :</b> {{ $dossier->date_cloture ?: 'Dossier en cours' }}</h3>
    <h3><b>Description :</b> {{ $dossier->descriptionDossier }}</h3>
    <h4><i><b>Commentaires Spécifiques :</b> {{ $dossier->commentairesDossier ?: 'R.A.S.' }}</i></h4>

    <div class="mt-4">
        <button id="download-pdf" class="bg-blue-500 text-white px-4 py-2 rounded-md">📄 Télécharger en PDF</button>
        <a href="{{ route('dossier.index') }}" class="bg-gray-500 text-white px-4 py-2 rounded-md ml-2">Annuler</a>
    </div>   

    <div class="mt-4">
        <div id="documents-container"></div>
    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        let dossierId = `{{ $dossier->id }}`;
        
        fetch(`/pleniged/public/dossier/${dossierId}/documents`)
            .then(response => response.json())
            .then(data => {
                let documentsHtml = "";

                data.documents.forEach(doc => {
                    let title = `TYPE DE DOCUMENT : ${doc.description}`;

                    let documentHtml = `
                        <div class="document-block">
                            <h3>${title}</h3>
                            <div class="document-content">
                                <div class="image-section">
                                    <img src="${doc.fichier}" alt="Document">
                                </div>
                                <div class="metadata-section">
                                    <table>
                                        <thead>
                                            <tr>
                                                <th>CRITERE</th>
                                                <th>VALEUR</th>
                                                <th>COMMENTAIRES</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                    `;

                    doc.metadata.forEach(meta => {
                        documentHtml += `
                            <tr>
                                <td>${meta.nom}</td>
                                <td>${meta.valeur}</td>
                                <td>${meta.commentaire ?? ''}</td>
                            </tr>
                        `;
                    });

                    documentHtml += `
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    `;

                    documentsHtml += documentHtml;
                });

                document.getElementById("documents-container").innerHTML = documentsHtml;
            })
            .catch(error => {
                alert("Erreur lors du chargement des documents : " + error.message);
            });
    });
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.min.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        document.getElementById("download-pdf").addEventListener("click", function () {
            let dossierRef = "{{ $dossier->reference }}";
            
            // Sélection de l'élément à exporter
            let element = document.querySelector("#global-container");
            
            // Configuration de html2pdf
            let opt = {
                margin: 10,
                filename: `PLENIGED_DossierRef_${dossierRef}.pdf`,
                image: { type: 'jpeg', quality: 0.98 },
                html2canvas: { scale: 2 },
                jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
            };

            // Génération et téléchargement du PDF
            html2pdf().from(element).set(opt).save();
        });
    });
</script>

<style>
    .document-block {
        border: 2px solid #ccc;
        padding: 10px;
        margin-bottom: 20px;
        border-radius: 8px;
        background: #f9f9f9;
    }

    .document-content {
        display: flex;
        align-items: flex-start;
        gap: 20px;
    }

    .image-section img {
        max-width: 100%;
        border: 1px solid #ddd;
        border-radius: 5px;
    }

    .metadata-section table {
        width: 100%;
        border-collapse: collapse;
    }

    .metadata-section th, .metadata-section td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
    }

    .metadata-section th {
        background: #f1f1f1;
    }
</style>

@if(session('success'))
    <div class="bg-green-100 text-green-800 p-4 rounded-md mb-4">
        {{ session('success') }}
    </div>
@endif
@endsection