@extends('layouts.app')

@section('title', 'OCR - Scanner un Bon de Livraison - Print Manager')

@section('content')
    <div class="card">
        <div class="card-header bg-secondary text-white d-flex justify-content-between align-items-center">
            <h1 class="mb-0">Scanner un Bon de Livraison (OCR)</h1>
            <a href="{{ route('bons-livraison.index') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> Retour
            </a>
        </div>
        <div class="card-body">
            @if(session('error'))
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <i class="fas fa-exclamation-circle me-2"></i>
                    {{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            <form action="{{ route('bons-livraison.ocr-parse') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <div class="row mb-3">
                    <div class="col-md-12">
                        <label for="pdf" class="form-label">PDF ou image scanné</label>
                        <input type="file" class="form-control @error('pdf') is-invalid @enderror" id="pdf" name="pdf" accept=".pdf,.png,.jpg,.jpeg" required>
                        @error('pdf')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <div class="form-text">Formats acceptés : PDF, PNG, JPG (max 10 Mo)</div>
                    </div>
                </div>

                <button type="submit" class="btn btn-primary" data-loading="1">
                    <i class="fas fa-search me-1"></i> Analyser avec OCR
                </button>
                <div id="ocrSpinner" class="d-none mt-2">
                    <i class="fas fa-hourglass-half fa-spin me-1"></i> Analyse en cours...
                </div>
            </form>
            @push('scripts')
            <script>
            document.getElementById('pdf').addEventListener('change', function() {
                const btn = document.querySelector('button[data-loading]');
                btn.disabled = false;
            });
            document.querySelector('form').addEventListener('submit', function() {
                const btn = document.querySelector('button[data-loading]');
                btn.disabled = true;
                btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Analyse...';
                document.getElementById('ocrSpinner').classList.remove('d-none');
            });
            </script>
            @endpush
        </div>
    </div>
@endsection