@extends('layouts.details')

@section('content')
<div id="document_{{ $index }}" class="document-block">
    <h2 class="text-lg font-semibold mt-8 mb-4">Document N° {{ $index+1 }}</h2>

    <!-- Sélection du type de document -->
    <div class="mb-4">
        <label for="typedoc_id_{{ $index }}" class="block text-sm font-medium text-gray-700">TYPE DOCUMENT</label>
        <select name="typedoc_id[{{ $index }}]" id="typedoc_id_{{ $index }}" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md select-one" required>
            <option value="">Sélectionnez un type de document</option>
            @foreach ($typedocuments as $document)
                <option value="{{ $document->id }}" @if(old('typedoc_id.' . $index, $typedoc_id ?? '') == $document->id) selected @endif>
                    {{ $document->description }}
                </option>
            @endforeach
        </select>
    </div>

    <!-- Meta Référence -->
    <div class="mb-4">
        <label for="meta_reference_{{ $index }}" class="block text-sm font-medium text-gray-700">Meta Référence</label>
        <input type="text" name="meta_reference[{{ $index }}]" id="meta_reference_{{ $index }}" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md" value="CHEQUE.NO" required>
    </div>

    <!-- Bouton Vidéocodage -->
    <div class="mb-4">
        <button type="button" class="bg-blue-500 text-white px-4 py-2 rounded-md w-full" onclick="processVideocodage({{ $index }})">
            Lancer Vidéocodage
        </button>
    </div>

    <!-- Container pour afficher les images et métadonnées après traitement -->
    <div id="image_metadata_container_{{ $index }}" class="hidden mt-6 p-4 border rounded-lg shadow-md bg-gray-100">
        <h2 class="text-lg font-semibold mb-4">Images & Métadonnées non trouvées</h2>
        <div class="grid grid-cols-2 gap-4">
            <div id="images_container_{{ $index }}"></div>
            <div id="metadata_container_{{ $index }}"></div>
        </div>
    </div>

    <!-- Bouton pour supprimer un document -->
    <button type="button" class="del-document" data-index="{{ $index }}">🗑 Supprimer Document</button>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
    window.processVideocodage = async function(index) {

        // Vérifier si le token CSRF est bien présent
        const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
        if (!csrfToken) {
            alert('CSRF token manquant');
            return;
        }

        const typedocElement = document.getElementById(`typedoc_id_${index}`);
        if (!typedocElement) {
            alert(`élément typedoc_id_${index} introuvable`);
            return;
        }
        
        const typedocId = typedocElement.value;
        
        const metaReferenceElement = document.getElementById(`meta_reference_${index}`);
        if (!metaReferenceElement) {
            alert(`élément meta_reference_${index} introuvable`);
            return;
        }

        const metaReference = metaReferenceElement.value;
        //alert('DEBUG typedocId=' + typedocId + '; metaRef=' + metaReference);

        if (!typedocId || !metaReference) {
            alert('Veuillez remplir toutes les informations.');
            return;
        }

        let formData = new FormData();
        formData.append('typedoc_id', typedocId);
        formData.append('meta_reference', metaReference);
        formData.append('_token', csrfToken);

        try {
            let response = await fetch('/pleniged/public/document/processMany', {
                method: 'POST',
                body: formData,
                headers: { 'X-CSRF-TOKEN': csrfToken }
            });
            
            let data = await response.json();
            
            // Vérification que data.ocr est un tableau, sinon on le transforme en tableau
            let ocrFiles = Array.isArray(data.ocr) ? data.ocr : Object.values(data.ocr);
            
            if (data.status === 'success') {
                document.getElementById(`image_metadata_container_${index}`).classList.remove('hidden');
                alert(`📡 Données OCR : ${JSON.stringify(data.ocr)}`);
            
                let documentsHtml = "";

                ocrFiles.forEach(doc => {
                    let title = `${doc.meta_criteria} ${doc.meta_value}`;

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

                    doc.tags.forEach(meta => {
                        let critere = meta.CRITERE.toLowerCase().replace(/\./g, '_');
                        documentHtml += `
                            <tr>
                                <td>${meta.CRITERE}</td>
                                <td><input type="text" name="meta_${critere}_{{ $index }}]" id="meta_${critere}_{{ $index }}" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md" value="${meta.VALEUR}"></td>
                                <td></td>
                            </tr>
                        `;
                    });

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

                    documentsHtml += documentHtml;
                });
            
                document.getElementById(`image_metadata_container_${index}`).innerHTML = documentsHtml;
                alert('✔ Traitement terminé avec succès');
            } else {
                alert('Erreur lors du traitement : ' + data.status);
            }



        } catch (error) {
            alert('Erreur dans le processMany : ' + error.message);
            console.error('Erreur:', error);
        }
    }
    // Ajoutez ici la gestion dynamique des événements pour le formulaire chargé via fetch
    const documentsContainer = document.getElementById('documents-container');

    // Attacher l'événement à tout document ajouté dynamiquement
    documentsContainer.addEventListener('change', (event) => {
        if (event.target && event.target.id.startsWith('typedoc_id_')) {
            const index = event.target.id.split('_')[1];
            const metaReferenceElement = document.getElementById(`meta_reference_${index}`);
            if (metaReferenceElement) {
                metaReferenceElement.parentElement.classList.remove('hidden');
            }
        }
    });

});
</script>
@endsection

<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>