{% extends 'admin/hub/layout.html.twig' %}

{% set hub_title = 'Bons de livraison' %}
{% set hub_breadcrumbs = [
    { label: 'Bons de livraison', url: path('app_bl_hub') },
    { label: 'Upload BL' }
] %}

{% block title %}Upload Bon de Livraison - Mercuriale.io{% endblock %}

{% block hub_content %}
<div class="hub-content hub-content--narrow">
    <h1 class="hub-title"><i class="fas fa-receipt"></i> Nouveaux bons de livraison</h1>

    {# Card #}
    <div class="hub-section">
        <div class="bg-white rounded-2xl shadow-lg overflow-hidden">
            <div class="p-6 md:p-8">
                {{ form_start(form, {'attr': {
                    'id': 'upload-form',
                    'novalidate': 'novalidate',
                    'data-turbo': 'false',
                    'data-controller': 'file-upload',
                    'data-file-upload-max-size-value': '20971520',
                    'data-file-upload-max-files-value': '10',
                    'data-file-upload-allowed-types-value': '["image/jpeg", "image/png", "image/heic", "image/heif", "application/pdf"]',
                    'data-file-upload-allowed-extensions-value': '[]',
                    'data-file-upload-mode-value': 'multi',
                    'data-file-upload-loading-text-value': 'Analyse en cours...',
                    'data-action': 'submit->file-upload#submit'
                }}) }}

                    {# Etablissement select #}
                    <div class="mb-6">
                        <label class="block font-semibold text-gray-700 mb-2">
                            <i class="fas fa-building mr-2"></i>Etablissement
                        </label>
                        {{ form_widget(form.etablissement, {'attr': {
                            'class': 'w-full px-4 py-3 text-base border-2 border-gray-200 rounded-xl bg-white focus:outline-none focus:border-coral focus:ring-4 focus:ring-coral/10 transition-all'
                        }}) }}
                        {{ form_errors(form.etablissement) }}
                    </div>

                    {# Drop zone #}
                    <div class="mb-4">
                        <label class="block font-semibold text-gray-700 mb-2">
                            <i class="fas fa-camera mr-2"></i>Photos des bons de livraison
                        </label>

                        <div data-file-upload-target="dropZone" class="border-2 border-dashed border-gray-300 rounded-2xl p-8 md:p-12 text-center cursor-pointer bg-gray-50 transition-all duration-300 hover:border-coral hover:bg-coral/10">
                            <div class="w-20 h-20 mx-auto mb-6 bg-gradient-to-br from-navy to-navy-light rounded-full flex items-center justify-center transition-transform duration-300 hover:scale-110">
                                <i class="fas fa-cloud-upload-alt text-3xl text-white"></i>
                            </div>
                            <h3 class="text-xl font-semibold text-gray-900 mb-2">Glissez vos photos ici</h3>
                            <p class="text-gray-500 mb-6">ou cliquez pour parcourir (jusqu'a 10 fichiers)</p>
                            <button type="button" data-action="file-upload#browse" class="inline-flex items-center gap-2 px-6 py-3 bg-white border-2 border-coral text-coral font-semibold rounded-xl cursor-pointer transition-all hover:bg-coral hover:text-white">
                                <i class="fas fa-folder-open"></i>
                                Choisir des fichiers
                            </button>
                            <div class="mt-6 px-4 py-3 bg-cream-dark rounded-lg text-sm text-gray-500">
                                <i class="fas fa-info-circle mr-1 text-gold"></i>
                                JPEG, PNG, HEIC ou PDF — Maximum 20 Mo par fichier
                            </div>
                        </div>

                        {{ form_widget(form.files, {'attr': {'class': 'hidden', 'data-file-upload-target': 'input'}}) }}
                        {{ form_errors(form.files) }}
                    </div>

                    {# Preview section #}
                    <div data-file-upload-target="preview" class="hidden mt-6 p-6 bg-gray-50 rounded-2xl animate-fade-in">
                        <div class="flex items-center justify-between mb-4">
                            <div class="font-semibold text-navy">
                                <i class="fas fa-images mr-2"></i>
                                <span data-file-upload-target="filesCount">0</span> fichier(s) selectionne(s)
                            </div>
                            <button type="button" data-action="file-upload#clearAll" class="inline-flex items-center px-3 py-1.5 text-sm bg-white border border-gray-300 text-gray-700 rounded-lg hover:bg-red-50 hover:border-red-200 hover:text-red-600 transition-all">
                                <i class="fas fa-trash-alt mr-2"></i>
                                Tout supprimer
                            </button>
                        </div>
                        <div data-file-upload-target="filesList" class="flex flex-col gap-3"></div>
                    </div>

                    {# Submit button #}
                    <button type="submit" data-file-upload-target="submit" disabled class="btn btn--primary btn--lg btn--full mt-6">
                        <i class="fas fa-magic"></i>
                        Analyser et extraire les donnees
                    </button>

                {{ form_end(form) }}
            </div>
        </div>
    </div>
</div>

<script type="module">
    import { loadReferentiels } from '{{ asset('js/referentielsLoader.js') }}';

    // Charger les référentiels au chargement de la page
    document.addEventListener('turbo:load', async () => {
        await loadReferentiels();
    });
</script>
{% endblock %}