@extends('layouts.details')

@section('content')
<div class="container">
    <h2>OCR avec Tesseract</h2>
    
    <input type="file" id="fileInput">
    <button type="button" onclick="uploadFile()">Télécharger</button>
    
    <div id="preview">
        <div id="image-container" style="position: relative;">
            <img id="uploadedImage" src="" style="max-width: 100%; display: none;">
            <canvas id="selectionCanvas" style="position: absolute; top: 0; left: 0; pointer-events: all;"></canvas>
        </div>
    
        <form id="ocrForm">
            <label>Nom de la zone :</label>
            <input type="text" id="zoneName">
    
            <input type="hidden" id="x">
            <input type="hidden" id="y">
            <input type="hidden" id="width">
            <input type="hidden" id="height">
            <input type="hidden" id="filename">
    
        </form>
    
        <div id="croppedArea">
            <h4>Zone découpée :</h4>
            <canvas id="croppedCanvas" style="max-width: 100%;"></canvas>
            <div id="coordinates">
                <p><strong>Coordonnées de la zone :</strong></p>
                <p id="coordX">x: </p>
                <p id="coordY">y: </p>
                <p id="coordWidth">Largeur: </p>
                <p id="coordHeight">Hauteur: </p>
            </div>
        </div>
    
        <button type="button" onclick="processOCR('tesseract')">Lancer Tesseract</button>
        <button type="button" onclick="processOCR('abbyy')">Lancer ABBYY</button>
        <br>
        <textarea id="ocrResult" rows="5" cols="50" placeholder="Résultat OCR ici..."></textarea>

    </div>
</div>

<script>
    let isSelecting = false;
    let startX, startY, currentX, currentY;
    let canvas = document.getElementById("selectionCanvas");
    let ctx = canvas.getContext("2d");
    let imgElement = document.getElementById("uploadedImage");

    // Fonction d'upload d'un fichier
    function uploadFile() {
        let fileInput = document.getElementById('fileInput').files[0];
        let formData = new FormData();
        formData.append('file', fileInput);
    
        fetch("{{ route('ocr.upload') }}", {
            method: 'POST',
            body: formData,
            headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'}
        })
        .then(response => response.json())
        .then(data => {
            let uploadedImage = document.getElementById('uploadedImage');
            uploadedImage.src = data.path;
            uploadedImage.style.display = 'block';
            document.getElementById('uploadedImage').value = data.filename;
            document.getElementById('filename').value = data.filename;
            //alert('Uploaded uploadedImage : '+document.getElementById('uploadedImage').value);
            //alert('Uploaded filename : '+document.getElementById('filename').value);
            uploadedImage.onload = function() {
                canvas.width = uploadedImage.width;
                canvas.height = uploadedImage.height;
            };
        })
        .catch(error => console.error('Erreur upload:', error));
    }

    // Démarrer la sélection (clic gauche)
    canvas.addEventListener("mousedown", function(event) {
        isSelecting = true;
        startX = event.offsetX;
        startY = event.offsetY;
        ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear previous selection
    });

    // Déplacer pour ajuster la sélection
    canvas.addEventListener("mousemove", function(event) {
        if (isSelecting) {
            currentX = event.offsetX;
            currentY = event.offsetY;
            ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear previous selection
            ctx.strokeStyle = "red";
            ctx.lineWidth = 2;
            ctx.setLineDash([6]);
            ctx.strokeRect(startX, startY, currentX - startX, currentY - startY);
        }
    });

    // Terminer la sélection (relâcher clic gauche)
    canvas.addEventListener("mouseup", function(event) {
        isSelecting = false;
        let x = Math.min(startX, currentX);
        let y = Math.min(startY, currentY);
        let width = Math.abs(currentX - startX);
        let height = Math.abs(currentY - startY);

        // Mettre les coordonnées dans les champs cachés
        document.getElementById('x').value = x;
        document.getElementById('y').value = y;
        document.getElementById('width').value = width;
        document.getElementById('height').value = height;

        // Afficher la zone découpée
        showCroppedArea(x, y, width, height);
    });

    // Afficher la zone découpée
    function showCroppedArea(x, y, width, height) {
        let croppedCanvas = document.getElementById("croppedCanvas");
        let croppedCtx = croppedCanvas.getContext("2d");

        croppedCanvas.width = width;
        croppedCanvas.height = height;

        croppedCtx.drawImage(imgElement, x, y, width, height, 0, 0, width, height);

        document.getElementById("coordX").textContent = "x: " + x;
        document.getElementById("coordY").textContent = "y: " + y;
        document.getElementById("coordWidth").textContent = "Largeur: " + width;
        document.getElementById("coordHeight").textContent = "Hauteur: " + height;
    }

    // Lancer l'OCR et afficher le résultat
    function processOCR(engine) {
        let formData = new FormData();
        //alert('uploadedImage : '+document.getElementById('uploadedImage').value);
        //alert('filename : '+document.getElementById('filename').value);
        //formData.append('filename', document.getElementById('uploadedImage').dataset.filename); // Vérifie bien que dataset.filename existe
        formData.append('filename', document.getElementById('filename').value);
        formData.append('x', document.getElementById('x').value);
        formData.append('y', document.getElementById('y').value);
        formData.append('width', document.getElementById('width').value);
        formData.append('height', document.getElementById('height').value);
        formData.append('engine', engine); // Indique si on utilise ABBYY ou Tesseract
    
        fetch("{{ route('ocr.process') }}", {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        })
        .then(response => response.json())
        .then(data => {
            document.getElementById('ocrResult').value = data.text;
        })
        .catch(error => console.error('Erreur OCR:', error));
    }
  
</script>
@endsection