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

{% set hub_title = 'Fournisseurs' %}
{% set hub_breadcrumbs = [
    { label: 'Fournisseurs' }
] %}

{% block title %}Fournisseurs — Mercuriale.io{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('css/admin-dashboard.css') }}">
    <link rel="stylesheet" href="{{ asset('css/contact-fournisseur.css') }}">
{% endblock %}

{% block hub_content %}
<div class="dashboard-hub">
    <h1 class="dashboard-hub__title">Fournisseurs</h1>
    <p class="dashboard-hub__date">{{ current_date() }}</p>

    <div class="m-tile-grid">
        {# Row 1 #}
        {% include 'components/_dashboard_tile.html.twig' with {
            label: 'Statistiques', icon: 'fa-chart-pie',
            color: 'forest', disabled: true
        } only %}

        {% include 'components/_dashboard_tile.html.twig' with {
            label: 'Factures', icon: 'fa-file-invoice',
            url: path('app_factures_hub'), color: 'gold'
        } only %}

        {% include 'components/_dashboard_tile.html.twig' with {
            label: 'Liste fournisseurs', icon: 'fa-handshake',
            url: path('app_fournisseurs_liste'), color: 'navy',
            badge_count: fournisseur_count
        } only %}

        {# Row 2 #}
        {% include 'components/_dashboard_tile.html.twig' with {
            label: 'Contrats', icon: 'fa-file-signature',
            color: 'purple', disabled: true
        } only %}

        <a href="#" class="m-tile m-tile--green" onclick="event.preventDefault(); document.getElementById('siren-modal').style.display='flex'">
            <div class="m-tile__icon-wrap">
                <i class="fas fa-plus-circle m-tile__icon" aria-hidden="true"></i>
            </div>
            <span class="m-tile__label">Nouveau fournisseur</span>
        </a>

        {% include 'components/_dashboard_tile.html.twig' with {
            label: 'Contacts', icon: 'fa-address-book',
            url: path('app_fournisseurs_contacts'), color: 'cyan',
            badge_count: contact_count
        } only %}
    </div>
</div>

{# Modal SIREN — 2 étapes #}
<div id="siren-modal" class="email-modal" style="display:none">
    <div class="email-modal__backdrop" onclick="closeSirenModal()"></div>
    <div class="email-modal__content">
        {# Step 1: SIREN input #}
        <div id="siren-step-1">
            <div class="email-modal__header">
                <h3 class="email-modal__title"><i class="fas fa-search"></i> Recherche SIREN</h3>
                <button type="button" class="email-modal__close" onclick="closeSirenModal()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="email-modal__form">
                <div class="contact-form-inline__field">
                    <label class="contact-form-inline__label">SIREN (9 chiffres) ou SIRET (14 chiffres)</label>
                    <input type="text" id="siren-input" class="contact-form-inline__input"
                           placeholder="Ex: 123456789" inputmode="numeric" maxlength="14"
                           autocomplete="off">
                    <div id="siren-error" class="fournisseur-create__flash fournisseur-create__flash--error" style="display:none"></div>
                </div>
                <div class="contact-form-inline__actions">
                    <button type="button" class="contact-form-inline__btn contact-form-inline__btn--save" onclick="searchSiren()">
                        <i class="fas fa-search"></i> Rechercher
                    </button>
                    <a href="{{ path('app_fournisseur_create') }}" class="contact-form-inline__btn contact-form-inline__btn--cancel">
                        <i class="fas fa-edit"></i> Saisie manuelle
                    </a>
                </div>
            </div>
        </div>

        {# Step 2: Confirmation #}
        <div id="siren-step-2" style="display:none">
            <div class="email-modal__header">
                <h3 class="email-modal__title"><i class="fas fa-building"></i> Confirmer le fournisseur</h3>
                <button type="button" class="email-modal__close" onclick="closeSirenModal()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="siren-result">
                <div class="siren-result__grid">
                    <div class="siren-result__item">
                        <span class="siren-result__label">Raison sociale</span>
                        <span class="siren-result__value" id="siren-r-nom"></span>
                    </div>
                    <div class="siren-result__item">
                        <span class="siren-result__label">SIREN</span>
                        <span class="siren-result__value" id="siren-r-siren"></span>
                    </div>
                    <div class="siren-result__item">
                        <span class="siren-result__label">SIRET</span>
                        <span class="siren-result__value" id="siren-r-siret"></span>
                    </div>
                    <div class="siren-result__item">
                        <span class="siren-result__label">Adresse</span>
                        <span class="siren-result__value" id="siren-r-adresse"></span>
                    </div>
                    <div class="siren-result__item">
                        <span class="siren-result__label">TVA Intracom.</span>
                        <span class="siren-result__value" id="siren-r-tva"></span>
                    </div>
                    <div class="siren-result__item">
                        <span class="siren-result__label">Code NAF</span>
                        <span class="siren-result__value" id="siren-r-naf"></span>
                    </div>
                </div>
            </div>
            <form method="post" action="{{ path('app_fournisseur_create') }}">
                <input type="hidden" name="fournisseur_create[nom]" id="siren-f-nom">
                <input type="hidden" name="fournisseur_create[code]" value="">
                <input type="hidden" name="fournisseur_create[siret]" id="siren-f-siret">
                <input type="hidden" name="fournisseur_create[adresse]" id="siren-f-adresse">
                <input type="hidden" name="fournisseur_create[codePostal]" id="siren-f-cp">
                <input type="hidden" name="fournisseur_create[ville]" id="siren-f-ville">
                <input type="hidden" name="fournisseur_create[telephone]" value="">
                <input type="hidden" name="fournisseur_create[email]" value="">
                <input type="hidden" name="fournisseur_create[_token]" value="{{ csrf_token('fournisseur_create') }}">
                <div class="contact-form-inline__actions">
                    <button type="submit" class="contact-form-inline__btn contact-form-inline__btn--save">
                        <i class="fas fa-check"></i> Creer ce fournisseur
                    </button>
                    <button type="button" class="contact-form-inline__btn contact-form-inline__btn--cancel" onclick="backToStep1()">
                        <i class="fas fa-arrow-left"></i> Retour
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {% set lookup_url = path('app_fournisseur_siren_lookup') %}
    <script>
        var sirenLookupUrl = '{{ lookup_url }}';

        function closeSirenModal() {
            document.getElementById('siren-modal').style.display = 'none';
            backToStep1();
        }

        function backToStep1() {
            document.getElementById('siren-step-1').style.display = '';
            document.getElementById('siren-step-2').style.display = 'none';
            document.getElementById('siren-error').style.display = 'none';
        }

        function searchSiren() {
            var input = document.getElementById('siren-input');
            var value = input.value.replace(/\s/g, '');
            var errorEl = document.getElementById('siren-error');

            if (!/^\d{9}(\d{5})?$/.test(value)) {
                errorEl.textContent = 'Format invalide. Saisissez 9 chiffres (SIREN) ou 14 chiffres (SIRET).';
                errorEl.style.display = 'flex';
                return;
            }

            errorEl.style.display = 'none';
            input.disabled = true;

            fetch(sirenLookupUrl + '?q=' + encodeURIComponent(value))
                .then(function(r) {
                    if (!r.ok) return r.json().then(function(d) { throw new Error(d.error || 'Erreur'); });
                    return r.json();
                })
                .then(function(data) {
                    document.getElementById('siren-r-nom').textContent = data.nom_complet || '—';
                    document.getElementById('siren-r-siren').textContent = data.siren || '—';
                    document.getElementById('siren-r-siret').textContent = data.siret || '—';
                    document.getElementById('siren-r-adresse').textContent =
                        [data.adresse, data.code_postal, data.ville].filter(Boolean).join(', ') || '—';
                    document.getElementById('siren-r-tva').textContent = data.tva_intracom || '—';
                    document.getElementById('siren-r-naf').textContent = data.code_naf || '—';

                    document.getElementById('siren-f-nom').value = data.nom_complet || '';
                    document.getElementById('siren-f-siret').value = data.siret || '';
                    document.getElementById('siren-f-adresse').value = data.adresse || '';
                    document.getElementById('siren-f-cp').value = data.code_postal || '';
                    document.getElementById('siren-f-ville').value = data.ville || '';

                    document.getElementById('siren-step-1').style.display = 'none';
                    document.getElementById('siren-step-2').style.display = '';
                })
                .catch(function(err) {
                    errorEl.textContent = err.message;
                    errorEl.style.display = 'flex';
                })
                .finally(function() {
                    input.disabled = false;
                });
        }

        document.getElementById('siren-input').addEventListener('keydown', function(e) {
            if (e.key === 'Enter') { e.preventDefault(); searchSiren(); }
        });
    </script>
{% endblock %}