{% extends 'admin/layout.html.twig' %}
{% block title %}{{ prospection.id ? 'Modifier' : 'Nouvelle' }} prospection — WTL{% endblock %}
{% block admin_body %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1 class="h2 mb-1">{{ prospection.id ? 'Modifier la prospection' : 'Nouvelle prospection' }}</h1>
        <p class="text-secondary mb-0">Les champs marqués d’un <span class="text-danger">*</span> sont obligatoires.</p>
    </div>
    <a href="{{ prospection.id ? path('admin_prospection_show',{id:prospection.id}) : path('admin_prospection_index') }}" class="btn btn-outline-secondary">Retour</a>
</div>
<div class="card"><div class="card-body p-4 p-xl-5">
{% if wizard %}
<div class="wizard-nav d-flex justify-content-between mb-5 border-bottom pb-4">
    <div class="active" data-step-nav="0"><span class="step-dot">1</span><span class="d-none d-md-inline ms-2">Lieu</span></div>
    <div data-step-nav="1"><span class="step-dot">2</span><span class="d-none d-md-inline ms-2">Contact</span></div>
    <div data-step-nav="2"><span class="step-dot">3</span><span class="d-none d-md-inline ms-2">Suivi</span></div>
</div>
{% endif %}
{{ form_start(form, {'attr': {'id':'prospection-form'}}) }}
{% set sections = wizard
    ? [['venueEntity','priority'],['targetContact','initialChannel','firstContactDate'],['status','followUp1CustomDate','followUp2CustomDate','postponeUntil','futureRecontactDate','proposedFee','travelFee','hatPlanned','mealPlanned','accommodationPlanned','hospitalityType','audioSent','pressKitSent','notes']]
    : [['venueEntity','priority','targetContact','initialChannel','firstContactDate','status','followUp1CustomDate','followUp2CustomDate','postponeUntil','futureRecontactDate','proposedFee','travelFee','hatPlanned','mealPlanned','accommodationPlanned','hospitalityType','audioSent','pressKitSent','notes']] %}
{% for fields in sections %}
<section class="wizard-step {{ loop.first ? 'active' : '' }}" data-step="{{ loop.index0 }}"><div class="row g-3">
    {% for field in fields %}
        {% set full = field == 'notes' %}
        {% set checkbox = field in ['hatPlanned','mealPlanned','accommodationPlanned','audioSent','pressKitSent'] %}
        <div class="{{ full ? 'col-12' : (checkbox ? 'col-12 col-md-4 d-flex align-items-end pb-2' : 'col-12 col-md-6') }}">
            {% if field == 'proposedFee' %}
                <div id="proposed-fee-wrap" class="rounded p-2 budget-indicator-neutral">
                    {{ form_row(attribute(form,field)) }}
                    <div id="budget-comparison" class="small fw-semibold d-none"></div>
                </div>
            {% else %}
                {{ form_row(attribute(form,field)) }}
            {% endif %}
            {% if field == 'venueEntity' %}
                <div class="form-text">Lieu introuvable ? <a href="{{ path('admin_venue_new') }}" target="_blank">Créer un nouveau lieu</a>, puis recharge cette page.</div>
                <div id="venue-summary" class="border rounded bg-light p-3 mt-3 small d-none">
                    <div class="fw-semibold mb-1" id="venue-summary-legal"></div>
                    <div id="venue-summary-address"></div>
                    <div class="text-secondary mt-1"><span id="venue-summary-siret"></span><span id="venue-summary-vat" class="ms-2"></span><span id="venue-summary-email" class="ms-2"></span></div>
                    <div id="venue-summary-budget" class="mt-2 fw-semibold"></div>
                </div>
            {% endif %}
        </div>
    {% endfor %}
</div></section>
{% endfor %}
{{ form_rest(form) }}
<div class="d-flex justify-content-between border-top pt-4 mt-4">
    <button type="button" class="btn btn-outline-secondary d-none" id="wizard-prev">Précédent</button>
    <div class="ms-auto d-flex gap-2"><button type="button" class="btn btn-dark {{ wizard ? '' : 'd-none' }}" id="wizard-next">Suivant</button><button class="btn btn-dark {{ wizard ? 'd-none' : '' }}" id="wizard-submit">Enregistrer</button></div>
</div>
{{ form_end(form) }}
</div></div>
{% endblock %}
{% block javascripts %}{{ parent() }}
{% if wizard %}<script src="{{ asset('js/wizard.js') }}"></script>{% endif %}
<script>
(() => {
    const venue = document.getElementById('prospection_venueEntity');
    const contact = document.getElementById('prospection_targetContact');
    const fee = document.getElementById('prospection_proposedFee');
    const box = document.getElementById('venue-summary');
    if (!venue || !contact) return;

    const selectedContact = contact.value;
    const updateBudget = () => {
        const option = venue.selectedOptions[0];
        const budget = Number(option?.dataset.budget || 0);
        const wrap = document.getElementById('proposed-fee-wrap');
        const message = document.getElementById('budget-comparison');
        if (!wrap || !message || !budget) {
            wrap?.classList.remove('budget-ok','budget-warning','budget-danger');
            message?.classList.add('d-none');
            return;
        }
        const value = Number(fee?.value || 0);
        wrap.classList.remove('budget-ok','budget-warning','budget-danger');
        if (!value) { message.classList.add('d-none'); return; }
        if (value <= budget) wrap.classList.add('budget-ok');
        else if (value <= budget + 100) wrap.classList.add('budget-warning');
        else wrap.classList.add('budget-danger');
        message.classList.remove('d-none');
        const diff = value - budget;
        message.textContent = value <= budget
            ? `Tarif inférieur ou égal au budget indicatif (${budget.toLocaleString('fr-FR')} €).`
            : `Tarif supérieur au budget indicatif de ${diff.toLocaleString('fr-FR')} € (budget ≈ ${budget.toLocaleString('fr-FR')} €).`;
    };

    const updateSummary = () => {
        const o = venue.selectedOptions[0];
        if (box && o?.value) {
            box.classList.remove('d-none');
            document.getElementById('venue-summary-legal').textContent = o.dataset.legal || o.textContent;
            document.getElementById('venue-summary-address').textContent = o.dataset.address || '';
            document.getElementById('venue-summary-siret').textContent = o.dataset.siret ? 'SIRET : ' + o.dataset.siret : '';
            document.getElementById('venue-summary-vat').textContent = o.dataset.vat ? 'TVA : ' + o.dataset.vat : '';
            document.getElementById('venue-summary-email').textContent = o.dataset.billingEmail ? 'Facturation : ' + o.dataset.billingEmail : '';
            document.getElementById('venue-summary-budget').textContent = o.dataset.budget ? 'Budget approximatif : ' + Number(o.dataset.budget).toLocaleString('fr-FR',{minimumFractionDigits:2}) + ' € HT' : '';
        } else box?.classList.add('d-none');
        updateBudget();
    };

    let contactsRequest = 0;
    const contactsUrlTemplate = `{{ path('admin_venue_contacts_json', {id: 999999999}) }}`;

    const loadContacts = async (keepValue = null) => {
        const venueId = venue.value;
        const requestId = ++contactsRequest;
        contact.innerHTML = '<option value="">' + (venueId ? 'Chargement…' : '— Sélectionnez d’abord un lieu —') + '</option>';
        if (!venueId) return;

        try {
            const url = contactsUrlTemplate.replace('999999999', encodeURIComponent(venueId));
            const response = await fetch(url, {headers:{'X-Requested-With':'XMLHttpRequest'}});
            if (!response.ok) throw new Error(`HTTP ${response.status}`);
            const rows = await response.json();
            if (requestId !== contactsRequest) return;

            contact.innerHTML = '<option value="">— Contact du lieu —</option>';
            let primaryId = null;
            rows.forEach(row => {
                const selected = keepValue !== null && String(row.id) === String(keepValue);
                const option = new Option(row.text, row.id, false, selected);
                if (row.primary) {
                    option.dataset.primary = '1';
                    if (primaryId === null) primaryId = row.id;
                }
                contact.add(option);
            });

            if (!keepValue && primaryId !== null) contact.value = String(primaryId);
        } catch (e) {
            if (requestId !== contactsRequest) return;
            contact.innerHTML = '<option value="">Impossible de charger les contacts</option>';
            console.error('Chargement des contacts du lieu impossible', e);
        }
    };

    const refreshVenue = () => { updateSummary(); loadContacts(); };
    venue.addEventListener('change', refreshVenue);
    if (window.jQuery) {
        window.jQuery(venue).on('select2:select select2:clear', refreshVenue);
    }

    document.getElementById('wizard-next')?.addEventListener('click', () => {
        const activeStep = document.querySelector('.wizard-step.active');
        if (activeStep?.dataset.step === '0' && venue.value) {
            loadContacts(contact.value || selectedContact || null);
        }
    });

    fee?.addEventListener('input', updateBudget);
    updateSummary();
    if (venue.value) loadContacts(selectedContact);
})();
</script>
{% endblock %}