@extends('layouts.dashboard')

@section('content')
<div class="container">
    <h2>OCR avec Tesseract</h2>
    
    <input type="file" id="fileInput">
    <button onclick="uploadFile()">Télécharger</button>
    
    <div id="preview">
        <img id="uploadedImage" src="" style="max-width: 100%; display: none;">
    </div>

    <canvas id="cropCanvas"></canvas>
    
    <form id="ocrForm">
        <input type="hidden" id="filename">
        <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">
        
        <button type="button" onclick="processOCR()">Lancer OCR</button>
    </form>
    
    <textarea id="ocrResult" rows="5" cols="50" placeholder="Résultat OCR ici..."></textarea>
</div>

<script>
    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 => {
            document.getElementById('uploadedImage').src = data.path;
            document.getElementById('uploadedImage').style.display = 'block';
            document.getElementById('filename').value = data.filename;
        });
    }

    function processOCR() {
        let formData = new FormData();
        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);
        
        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;
        });
    }
</script>
@endsection