@extends('layouts.details')

@section('content')
<div class="container mx-auto">
    <h1 class="text-2xl font-bold my-4">Téléversement Manuel</h1>

    <form action="{{ route('dossier.store_man') }}" 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 }}">
                        {{ 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="{{ old('reference') }}" 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="{{ old('commentairesDossier') }}" 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 -->
            @include('pages.document.form_partial', ['index' => 0])
        </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

<style>
    .error-message {
        color: red;
        font-weight: bold;
    }
</style>

@if ($errors->any())
    <div class="mt-4">
        <ul>
            @foreach ($errors->all() as $error)
                <li class="error-message">{{ 'Error : '.$error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<script>
document.addEventListener('DOMContentLoaded', function () {
    let documentIndex = 1;
    
    // Ajouter un nouveau document
    document.getElementById('add-document').addEventListener('click', () => {
        fetch(`/pleniged/public/document/partial/${documentIndex}`)
            .then(response => response.text())
            .then(html => {
                let newDocument = document.createElement('div');
                newDocument.dataset.index = documentIndex;
                newDocument.innerHTML = html;

                document.getElementById('documents-container').appendChild(newDocument);
                documentIndex++;
            })
            .catch(error => console.error('❌ Erreur lors du chargement du formulaire:', error));
    });
    
    // Supprimer un document
    document.getElementById('documents-container').addEventListener('click', (event) => {
        if (event.target.classList.contains('del-document')) {
            let documentBlock = event.target.closest('.document-block'); // Trouver le bloc parent
            if (documentBlock) {
                documentBlock.remove(); // Supprimer l'élément
                
                // Mettre à jour les index des documents restants
                updateDocumentIndexes();
            }
        }
    });
    
    // Fonction pour mettre à jour les index après suppression
    function updateDocumentIndexes() {
        let documentBlocks = document.querySelectorAll('.document-block');
        documentBlocks.forEach((block, newIndex) => {
            block.id = `document_${newIndex}`;
            let delButton = block.querySelector('.del-document');
            if (delButton) {
                delButton.dataset.index = newIndex; // Mettre à jour le data-index du bouton supprimer
            }
        });
    
        // Mettre à jour documentIndex pour le prochain ajout
        documentIndex = documentBlocks.length;
    }

    // Écouteur des changements sur les champs dynamiques
    document.getElementById('documents-container').addEventListener('change', async (e) => {
        const target = e.target;
        //alert(`🎯 Événement déclenché - tagName: ${target.tagName}, type: ${target.type}`);

        const parentBlock = target.closest('.document-block');
        
        if (!parentBlock) {
            alert("❌ Erreur : Impossible de trouver le conteneur du document");
            return;
        }

        // Extraction de l'index à partir de l'ID du conteneur
        const match = parentBlock.id.match(/document_(\d+)/);
        const index = match ? match[1] : null;

        if (!index) {
            alert("❌ Erreur : Impossible de récupérer l'index du document");
            return;
        }

        //alert(`📌 Index du document trouvé : ${index}`);

        // Gestion du changement de type de document
        if (target.classList.contains('select-one')) {
            //alert(`📑 Type de document sélectionné : ${target.value}`);
            await handleTypeDocChange(target.value, index);
        }
        
        // Gestion du changement de fichier
        if (target.classList.contains('file-input') && target.files.length > 0) {
            //alert('📂 Fichier sélectionné, lancement de l’OCR...');
            await handleFileChange(target.files[0], index);
        }

    });

    // Fonction pour charger les métadonnées d'un type de document
    async function handleTypeDocChange(typedocId, index) {
        //alert(`📌 Vérification du typedocId pour le document ${index}: ${typedocId}`);
        
        if (!typedocId) {
            alert(`❌ Aucune valeur de typedocId pour le document ${index}`);
            
            // Masquer la section des métadonnées si le type de document n'est pas sélectionné
            const sectionMetadonnees = document.getElementById(`metadonnees-container_${index}`);
            sectionMetadonnees.classList.add('hidden'); // Masque la section
            sectionMetadonnees.innerHTML = ''; // Vide les métadonnées
            return;
        }
    
        try {
            //alert(`📡 Appel API pour récupérer les métadonnées du type de document ${typedocId}`);
            
            // Appel pour récupérer les métadonnées du type de document
            const response = await fetch(`/pleniged/public/document/metadonnees/${typedocId}`);
            //alert(`📡 Réponse de l'API reçue : ${response.status}`);
    
            // Vérification si la réponse est valide
            if (!response.ok) {
                alert('❌ Erreur dans la réponse de l\'API');
                throw new Error('Erreur lors du chargement des métadonnées');
            }
    
            // Traitement des données
            const data = await response.json();
            //alert(`📡 Données récupérées : ${JSON.stringify(data)}`);
    
            // Récupérer le conteneur des métadonnées pour cet index
            const metadonneesContainer = document.getElementById(`metadonnees-container_${index}`);
            const sectionMetadonnees = document.getElementById(`section-metadonnees_${index}`);
    
            // Si aucune métadonnée n'est trouvée
            if (!data || data.length === 0) {
                alert('⚠️ Aucune métadonnée configurée pour ce type de document');
                sectionMetadonnees.classList.add('hidden'); // Masquer la section
                return;
            }
    
            // Afficher la section des métadonnées si des données sont présentes
            sectionMetadonnees.classList.remove('hidden');
            //alert(`✅ Métadonnées disponibles pour le type de document ${typedocId}`);
    
            // Vider les anciennes métadonnées
            metadonneesContainer.innerHTML = '';
    
            // Parcourir et ajouter chaque métadonnée
            data.forEach(meta => {
                //alert(`🔎 Traitement de la métadonnée ID: ${meta.id}`);
    
                if (!meta.id) {
                    alert(`❌ ID manquant pour la métadonnée : ${JSON.stringify(meta)}`);
                    console.error("ID manquant pour une métadonnée :", meta);
                    return;
                }
    
                // Créer un div pour chaque métadonnée
                const div = document.createElement('div');
                div.classList.add('mb-4', 'p-2', 'border', 'rounded-md', 'bg-white');
                
                // Ajouter le HTML pour le label, valeur, commentaires, et coordonnées OCR
                div.innerHTML = `
                    <label class="block text-sm font-medium text-gray-700">Label :</label>
                    <input type="text" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md" value="${meta.description}" readonly>
                    
                    <label class="block text-sm font-medium text-gray-700 mt-2">Valeur :</label>
                    <input type="text" name="valeurs_${index}[${meta.id}]" id="valeur-${meta.id}-${index}" class="ocr-field mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md" data-coords='${JSON.stringify(meta)}'>
                    
                    <label class="block text-sm font-medium text-gray-700 mt-2">Commentaires :</label>
                    <input type="text" name="metacomments_${index}[${meta.id}]" id="metacomment-${meta.id}-${index}" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md">
                    
                    <!-- Afficher les coordonnées de la zone OCR -->
                    <div class="mt-2">
                        <label class="text-sm font-medium text-gray-600">Coordonnées (OCR) :</label>
                        <p class="text-sm text-gray-500">
                            X: ${meta.ocr_x}, Y: ${meta.ocr_y}, Width: ${meta.ocr_width}, Height: ${meta.ocr_height}
                        </p>
                        <!-- Champs cachés pour X, Y, Width, Height -->
                        <div class="mt-2">
                            <input type="hidden" name="coords[${meta.id}][x]" id="x-coord-${meta.id}-${index}" value="${meta.ocr_x}">
                        </div>
                
                        <div class="mt-2">
                            <input type="hidden" name="coords[${meta.id}][y]" id="y-coord-${meta.id}-${index}" value="${meta.ocr_y}">
                        </div>
                
                        <div class="mt-2">
                            <input type="hidden" name="coords[${meta.id}][width]" id="width-coord-${meta.id}-${index}" value="${meta.ocr_width}">
                        </div>
                
                        <div class="mt-2">
                            <input type="hidden" name="coords[${meta.id}][height]" id="height-coord-${meta.id}-${index}" value="${meta.ocr_height}">
                        </div>
                    </div>
                `;
                
                // Ajouter le div dans le conteneur
                metadonneesContainer.appendChild(div);
                //alert(`✅ Métadonnée ID: ${meta.id} ajoutée au conteneur`);
            });
        } catch (error) {
            alert(`❌ Erreur lors du chargement des métadonnées : ${error.message}`);
            console.error('Erreur dans le traitement des métadonnées :', error);
        }
    }
    
    // Gestion du fichier et OCR
    async function handleFileChange(file, index) {
        if (!file) {
            alert("❌ Aucun fichier sélectionné !");
            return;
        }

        //alert(`📂 Fichier sélectionné : ${file.name}`);
        
        const engine = document.getElementById('ocr-engine').value;
        const dossier_id = document.getElementById('dossier_id').value;
        const typedossier_id = document.getElementById('typedossier_id').value;
        const reference = document.getElementById('reference').value;
        const typedocId = document.getElementById(`typedoc_id_${index}`).value;

        if (!typedossier_id || !reference || !typedocId) {
            alert("❌ Données manquantes : Veuillez renseigner tous les champs requis.");
            return;
        }

        try {
            const responseMeta = await fetch(`/pleniged/public/document/metadonnees/${typedocId}`);
            if (!responseMeta.ok) throw new Error("Erreur lors du chargement des métadonnées");
            const dataMeta = await responseMeta.json();

            for (const meta of dataMeta) {
                const x = document.getElementById(`x-coord-${meta.id}-${index}`).value;
                const y = document.getElementById(`y-coord-${meta.id}-${index}`).value;
                const width = document.getElementById(`width-coord-${meta.id}-${index}`).value;
                const height = document.getElementById(`height-coord-${meta.id}-${index}`).value;

                const formData = new FormData();
                formData.append('fichier', file);
                formData.append('x', x);
                formData.append('y', y);
                formData.append('width', width);
                formData.append('height', height);
                formData.append('engine', engine);
                formData.append('typedossier_id', typedossier_id);
                formData.append('dossier_id', dossier_id);
                formData.append('reference', reference);
                formData.append('typedocId', typedocId);

                const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
                if (!csrfToken) {
                    alert("❌ CSRF token manquant !");
                    return;
                }

                try {
                    const response = await fetch('/pleniged/public/document/process', {
                        method: 'POST',
                        body: formData,
                        headers: { 'X-CSRF-TOKEN': csrfToken }
                    });

                    const textResponse = await response.text();
                    console.log("Réponse brute du serveur :", textResponse);

                    const data = JSON.parse(textResponse);
                    if (data && data.text) {
                        const valeurElement = document.getElementById(`valeur-${meta.id}-${index}`);
                        const commentElement = document.getElementById(`metacomment-${meta.id}-${index}`);
                        
                        if (valeurElement && !valeurElement.value) valeurElement.value = data.text;
                        if (commentElement && !commentElement.value) commentElement.value = '';
                    } else {
                        alert("📡 Aucun texte trouvé dans la zone OCR spécifiée");
                    }
                } catch (error) {
                    alert(`❌ Erreur OCR : ${error.message}`);
                    console.error("Erreur OCR :", error);
                }
            }
        } catch (error) {
            alert(`❌ Erreur récupération métadonnées : ${error.message}`);
            console.error("Erreur récupération métadonnées :", error);
        }
    }
});
</script>