@extends('layouts.app')

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

@section('content')
    <div class="card">
        <div class="card-header bg-dark text-white d-flex justify-content-between align-items-center">
            <h1 class="mb-0">Scanner un Bon de Commande (OCR)</h1>
            <a href="{{ route('commandes.index') }}" class="btn btn-outline-light">
                <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('commandes.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>
        </div>
    </div>
@endsection

@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