@extends('layouts.details')

@section('content')
<div class="container mx-auto">
    <h1 class="text-2xl font-bold my-4">Ajout d'un enregistrement (Documents)</h1>

    <form action="{{ route('document.store') }}" method="POST" enctype="multipart/form-data">
        @csrf

        <!-- DOSSIER -->
        <div class="mb-4">
            <label for="dossier_id" class="block text-sm font-medium text-gray-700">DOSSIER</label>
            <select name="dossier_id" id="dossier_id" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md" required>
                <option value="">Sélectionnez un dossier</option>
                @foreach ($dossiers as $dossier)
                    <option value="{{ $dossier->id }}" @if(old('dossier_id') == $dossier->id) selected @endif>{{ $dossier->description }}</option>
                @endforeach
            </select>
        </div>

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

        <!-- DESCRIPTION -->
        <div class="mb-4">
            <label for="description" class="block text-sm font-medium text-gray-700">DESCRIPTION</label>
            <input type="text" name="description" id="description" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md" required>
        </div>

        <!-- FICHIER -->
        <div class="mb-4">
            <label for="fichier" class="block text-sm font-medium text-gray-700">FICHIER</label>
            <input type="file" name="fichier" id="fichier" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md" required>
        </div>

        <!-- SECTION MÉTADONNÉES -->
        <div id="section-metadonnees" class="hidden mt-6 p-4 border rounded-lg shadow-md bg-gray-100">
            <h2 class="text-lg font-semibold mb-4">Métadonnées</h2>
            <div id="metadonnees-container">
                <!-- Contenu généré dynamiquement -->
            </div>
        </div>

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

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

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

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

<script src="https://cdn.jsdelivr.net/npm/tesseract.js/dist/tesseract.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const typedocSelect = document.getElementById('typedoc_id');
        const fichierInput = document.getElementById('fichier');
        const dossierInput = document.getElementById('dossier_id');
        const sectionMetadonnees = document.getElementById('section-metadonnees');
        const metadonneesContainer = document.getElementById('metadonnees-container');

        typedocSelect.addEventListener('change', function () {
            const typedocId = typedocSelect.value;

            if (!typedocId) {
                sectionMetadonnees.classList.add('hidden');
                metadonneesContainer.innerHTML = '';
                return;
            }
            fetch(`/pleniged/public/document/metadonnees/${typedocId}`)
                .then(response => response.json())
                .then(data => {
                    metadonneesContainer.innerHTML = '';
                    if (!data || data.length === 0) {
                        alert('Aucune métadonnée configurée pour ce type de document');
                        sectionMetadonnees.classList.add('hidden');
                        return;
                    }

                    data.forEach(meta => {
                        if (!meta.id) {
                            alert("ID manquant pour une métadonnée :"+ meta.id);
                            console.error("ID manquant pour une métadonnée :", meta);
                            return;
                        }
                        const div = document.createElement('div');
                        div.classList.add('mb-4', 'p-2', 'border', 'rounded-md', 'bg-white');
                        
                        // Ajout des champs pour Label, Valeur et Commentaires
                        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[${meta.id}]" id="valeur-${meta.id}" 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[${meta.id}]" id="metacomment-${meta.id}" 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>
                            </div>
                        `;
                        metadonneesContainer.appendChild(div);
                    });

                    sectionMetadonnees.classList.remove('hidden');
                });

        });

        fichierInput.addEventListener('change', function () {
            const file = fichierInput.files[0];
            if (!file) return
            const dossier_id = dossierInput.value; 
            const typedocId = typedocSelect.value;

            // Créer un FormData pour envoyer le fichier
            const formData = new FormData();
            formData.append('filename', file);

    
            // Pour chaque champ de métadonnée avec une classe ocr-field
            document.querySelectorAll('.ocr-field').forEach(input => {
                // Récupérer les coordonnées de l'élément
                const coords = JSON.parse(input.dataset.coords);

                // Appeler la méthode OCR pour chaque zone spécifiée
                processOCR('abbyy', coords.ocr_x, coords.ocr_y, coords.ocr_width, coords.ocr_height, dossier_id, typedocId)
                    .then(text => {
                        // Mettre à jour le champ de texte avec le texte OCR extrait
                        input.value = text.trim();
                    });
            });
        });

        async function processOCR(engine, x, y, width, height, dossier_id, typedocId) {
            const fileInput = document.getElementById('fichier').files[0];
        
            if (!fileInput) {
                alert("Veuillez sélectionner un document.");
                return '';
            }
        
            // Créez un objet FormData et ajoutez le fichier ainsi que les autres paramètres
            const formData = new FormData();
            formData.append('fichier', fileInput);
            formData.append('x', x);
            formData.append('y', y);
            formData.append('width', width);
            formData.append('height', height);
            formData.append('engine', engine);
            formData.append('typedossier_id', null);
            formData.append('dossier_id', dossier_id);
            formData.append('reference', null);
            formData.append('typedocId', typedocId);
        
            try {
                // Envoi de la requête à la route document.process avec les paramètres nécessaires
                const response = await fetch("{{ route('document.process') }}", {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}' // Assurez-vous que la CSRF token est envoyée
                    }
                });
        
                // Log de la réponse pour déboguer
                console.log('Réponse OCR :', response);
        
                if (!response.ok) {
                    throw new Error('Erreur réseau lors du traitement OCR.');
                }
        
                const data = await response.json();
        
                if (data && data.text) {
                    //alert('OCR effectué : ' + data.text);
                    return data.text;
                } else {
                    alert('Aucun texte trouvé dans la zone spécifiée.');
                    return 'Aucun texte trouvé dans la zone spécifiée.';
                }
            } catch (error) {
                console.error('Erreur OCR:', error);
                alert("Une erreur s'est produite lors du traitement OCR : " + error.message);
                return 'Aucun résultat OCR.';
            }
        }

    });
</script>