@extends('layouts.details')

@section('content')
<div class="container mx-auto">
    <h1 class="text-2xl font-bold my-4">Téléversement Automatique</h1>
    
    <form action="{{ route('dossier.store_auto') }}" method="POST" enctype="multipart/form-data">
        @csrf
        
       <input type="hidden" name="dossier_id" id="dossier_id" value="{{ $dossierId }}">
        <input type="hidden" name="ocr-engine" id="ocr-engine" value="abbyy">

        <!-- SECTION DOSSIER -->
        <h2 class="text-lg font-semibold mb-4">Informations sur le Dossier</h2>
        <div class="mb-4">
            <label for="typedossier_id" class="block text-sm font-medium text-gray-700">Type de Dossier</label>
            <select name="typedossier_id" id="typedossier_id" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md">
                <option value="" selected>-- Aucun parent --</option>
                @foreach ($typedossiers as $typedossier)
                    <option value="{{ $typedossier->id }}" data-description="{{ $typedossier->description }}">
                        {{ str_repeat('—', $typedossier->depth) . ' ' . $typedossier->description }}
                    </option>
                @endforeach
            </select>
        </div>

        <div class="mb-4">
            <label for="reference" class="block text-sm font-medium text-gray-700">Référence</label>
            <input type="text" name="reference" id="reference" value="AUTOLOAD" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md" required>
        </div>

        <div class="mb-4">
            <label for="descriptionDossier" class="block text-sm font-medium text-gray-700">Description Dossier</label>
            <input type="text" name="descriptionDossier" id="descriptionDossier" value="{{ old('descriptionDossier') }}" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md" required>
        </div>

        <div class="mb-4">
            <label for="date_ouverture" class="block text-sm font-medium text-gray-700">Date d'Ouverture</label>
            <input type="date" name="date_ouverture" id="date_ouverture" value="{{ old('date_ouverture') }}" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md" required>
        </div>

        <div class="mb-4">
            <label for="date_cloture" class="block text-sm font-medium text-gray-700">DATE CLOTURE</label>
            <input type="date" name="date_cloture" id="date_cloture" value="{{ old('date_cloture') }}" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md">
        </div>

        <div class="mb-4">
            <label for="commentairesDossier" class="block text-sm font-medium text-gray-700">Commentaires Dossier</label>
            <input type="text" name="commentairesDossier" id="commentairesDossier" value="VIDEOCODAGE" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md">
        </div>

        <div class="mb-4">
            <label for="enabled_flag" class="block text-sm font-medium text-gray-700">Statut</label>
            <select name="enabled_flag" id="enabled_flag" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md">
                <option value="1">Actif</option>
                <option value="0">Inactif</option>
            </select>
        </div>

        <!-- SECTION DOCUMENTS -->
        <h2 class="text-lg font-semibold mt-8 mb-4">Documents</h2>
        <div id="documents-container">
            <!-- Un bloc de document initial -->
            
        </div>

        <div class="mt-4">
            <button type="button" id="add-document" class="bg-green-500 text-white px-4 py-2 rounded-md">+ Ajouter un Document</button>
        </div>

        <!-- BOUTONS -->
        <div class="mt-6">
            <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-md">Soumettre</button>
            <a href="{{ route('dossier.index') }}" class="bg-gray-500 text-white px-4 py-2 rounded-md ml-2">Annuler</a>
        </div>
    </form>
</div>
@endsection

<script>
document.addEventListener('DOMContentLoaded', function () {
    let documentIndex = 0;
    let typedocId = null;
    
    const typedossierElement = document.getElementById('typedossier_id');
    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

    // Bouton d'ajout de document
    const addDocumentButton = document.getElementById('add-document');
    const documentsContainer = document.getElementById('documents-container');

    if (typedossierElement) {
        typedossierElement.addEventListener('change', function() {
            addDocumentButton.click();
            const typedossierId = this.value;
            let selectedOption = this.options[this.selectedIndex];
            let description = selectedOption.getAttribute('data-description');
            let today = new Date().toISOString().split('T')[0];
            document.getElementById('descriptionDossier').value = description + " du " + today;
            document.getElementById('date_ouverture').value = today;
        });
    }
    
    // Ajout d'un document au clic
    addDocumentButton.addEventListener('click', async () => {
        const newDocumentIndex = documentIndex++;  
        const typedossierId = document.getElementById('typedossier_id').value;

        try {
            let response = await fetch(`/pleniged/public/dossier/getTypedocs/${typedossierId}`, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken
                }
            });
            
            let textResponse = await response.text(); // Récupère la réponse brute sous forme de texte
            //alert(`Réponse brute du serveur : ${textResponse}`);
            
            let data;
            try {
                data = JSON.parse(textResponse);
            } catch (error) {
                alert('Erreur de parsing JSON : ' + error.message);
                return;
            }
            
            //alert(`Données JSON parsées : ${JSON.stringify(data)}`);


            if (data) {
                addDocumentButton.dataset.typedocs = JSON.stringify(data);
                const availableTypedocs = JSON.parse(addDocumentButton.dataset.typedocs || '{}');
                
                //alert(`📡 Affichage des availableTypedocs de types de documents : ${JSON.stringify(availableTypedocs)}`);
                const newDocument = document.createElement('div');
                newDocument.id = `document_${newDocumentIndex}`;
                newDocument.classList.add('document-block');
                newDocument.innerHTML = `
                    <h2 class="text-lg font-semibold mt-8 mb-4">Groupe de Documents N° ${newDocumentIndex + 1}</h2>
                    <div class="mb-4">
                        <label for="typedoc_id_${newDocumentIndex}" class="block text-sm font-medium text-gray-700">TYPE DOCUMENT</label>
                        <select name="typedoc_id[${newDocumentIndex}]" id="typedoc_id_${newDocumentIndex}" 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>
                            ${Object.entries(availableTypedocs).map(([description, id]) => `
                                <option value="${id}" data-typedocdesc="${description}">${description}</option>`).join('')}
                        </select>
                    </div>
                    <div class="mb-4">
                        <label for="meta_reference_${newDocumentIndex}" class="block text-sm font-medium text-gray-700">Meta Référence</label>
                        <input type="text" name="meta_reference[${newDocumentIndex}]" id="meta_reference_${newDocumentIndex}" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md" value="CHEQUE.NO" required>
                    </div>
                    <div class="mb-4">
                        <button type="button" 
                                name="button_vidcod_[${newDocumentIndex}]" 
                                id="button_vidcod_${newDocumentIndex}" 
                                class="bg-blue-500 text-white px-4 py-2 rounded-md w-full" 
                                data-index="${newDocumentIndex}">
                            Lancer Vidéocodage
                        </button>
                    </div>
                    <div id="image_metadata_container_${newDocumentIndex}" class="hidden">
                        <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_${newDocumentIndex}"></div>
                            <div id="metadata_container_${newDocumentIndex}"></div>
                        </div>
                    </div>
                    <button type="button" class="del-document" data-index="${newDocumentIndex}">🗑 Supprimer Document</button>
                `;
        
                // Ajouter le nouveau document au conteneur
                documentsContainer.appendChild(newDocument);
            } else {
                alert('Erreur lors du chargement des types de documents : Status=' + data.status);
            }
        } catch (error) {
            alert('Erreur réseau ou JSON invalide : ' + error.message);
        }
    });

    documentsContainer.addEventListener('click', (event) => {
        // Suppression dynamique de documents
        if (event.target.classList.contains('del-document')) {
            const documentIndexToDelete = event.target.getAttribute('data-index');
            document.getElementById(`document_${documentIndexToDelete}`).remove();

            // Réindexer les documents restants
            let allDocuments = documentsContainer.querySelectorAll('.document-block');
            documentIndex = 0;  // Réinitialiser l'index de base

            allDocuments.forEach((document, index) => {
                document.id = `document_${index}`;  // Mettre à jour l'id
                document.querySelectorAll('select, input').forEach(input => {
                    let name = input.name;
                    name = name.replace(/\[\d+\]/, `[${index}]`);  // Mettre à jour l'attribut 'name'
                    input.name = name;
                    input.id = input.id.replace(/\_\d+$/, `_${index}`);  // Mettre à jour l'attribut 'id'
                });
            });

            // Mettre à jour l'index pour le prochain ajout
            documentIndex = allDocuments.length;
        }
        // Vérifier si c'est un bouton "Lancer Vidéocodage"
        if (event.target && event.target.id.startsWith('button_vidcod_')) {
            const button = event.target;
            processVideocodage(button); // Appeler la fonction processVideocodage
        }
    });


    // Fonction de traitement Vidéocodage
    async function processVideocodage(button) {
        const index = button.getAttribute('data-index');
        
        // Ajoutez ici votre logique pour traiter le document via OCR...
        if(!index){
            index = documentIndex;
        }

        // Le code de votre fonction processVideocodage reste inchangé ici
        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;
    
        if (!typedocId || !metaReference) {
            alert('Veuillez remplir toutes les informations requises (Type de Dossier, Type de Document, etc.).');
            return;
        }
    
        let selectedDoc = typedocElement.options[typedocElement.selectedIndex];
    
        if (selectedDoc) {
            let typedocDesc = selectedDoc.getAttribute('data-typedocdesc') || 'Non spécifié';
    
            alert(`Traitement du Groupe de Documents de Type ${typedocDesc} (N° ${index + 1}) en cours. Veuillez patienter quelques secondes...`);
        } else {
            alert(`Aucune option sélectionnée dans Type de Documents #typedoc_id_${index}`);
        }

        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();
            //alert(`📡 Traitement terminé. Données Reçues : ${JSON.stringify(data)}`);

            if (data.status === 'success') {
                let metadataContainer = document.getElementById(`image_metadata_container_${index}`);
                if (metadataContainer) {
                    metadataContainer.classList.remove('hidden');
                } else {
                    alert(`Le conteneur pour le document ${index+1} n'a pas été trouvé.`);
                }
                metadataContainer.classList.remove('hidden');
                let ocrFiles = Array.isArray(data.ocr) ? data.ocr : Object.values(data.ocr);
                //alert(`📡 Données ocrFiles : ${JSON.stringify(ocrFiles)}`);
                
                let documentsHtml = "";
                ocrFiles.forEach(doc => {
                    let title = `${doc.meta_criteria} ${doc.meta_value}`;
                    documentsHtml += `
                        <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, '_');
                        documentsHtml += `
                            <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>
                        `;
                    });
    
                    documentsHtml += `
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>`;
                });
                
                metadataContainer.innerHTML = documentsHtml;
                //alert(`📡 Données documentsHtml : ${JSON.stringify(documentsHtml)}`);
                alert('✔ Traitement terminé avec succès');
            } else {
                alert('Erreur lors du traitement : ' + data.status);
            }
        } catch (error) {
            alert('Erreur lors du traitement OCR : '+error.message);
        }
    }
});
</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>