{% extends 'base.html.twig' %}
{% set navbar_is_transparent = false %}
{% block title %}Déposer une annonce{% endblock %}

{% form_theme form 'bootstrap_5_layout.html.twig' %}

{% block body %}
    <section class="container-lg px-4 py-5 pt-lg-5 mt-5" id="classified-new" aria-labelledby="classified-new-title">
        <nav aria-label="Fil d’Ariane" class="mb-3">
            <ol class="breadcrumb bg-transparent px-0 mb-0">
                <li class="breadcrumb-item"><a href="{{ path('app_home') }}" class="text-decoration-none">Accueil</a></li>
                <li class="breadcrumb-item"><a href="{{ path('account_ad_index') }}" class="text-decoration-none">Mes annonces</a></li>
                <li class="breadcrumb-item active" aria-current="page">Déposer</li>
            </ol>
        </nav>

        <header class="mb-4">
            <h1 id="classified-new-title" class="display-6 fw-bold mb-1">Déposer une nouvelle annonce</h1>
            <p class="text-muted mb-0">Remplissez les informations principales. Votre annonce sera publiée après validation.</p>
        </header>

        <div class="row g-4">
            <div class="col-lg-8">
                <div class="card shadow-sm border-0">
                    <div class="card-header bg-white py-3">
                        <strong>Informations de l’annonce</strong>
                    </div>
                    <div class="card-body">
                        {{ form_start(form, { attr: { class: 'needs-validation', novalidate: 'novalidate' } }) }}

                        <div class="mb-3">
                            {{ form_label(form.title, null, { label_attr: { class: 'form-label fw-semibold' } }) }}
                            {{ form_widget(form.title, { attr: { class: 'form-control form-control-lg', placeholder: 'Ex. Annexe rigide 2,40 m quasi neuve' } }) }}
                            <div class="form-text">Un titre clair et précis attire plus de visiteurs.</div>
                        </div>

                        <div class="mb-3">
                            {{ form_label(form.description, null, { label_attr: { class: 'form-label fw-semibold' } }) }}
                            {{ form_widget(form.description, { attr: { class: 'form-control', rows: 7, placeholder: 'État, dimensions, accessoires inclus, historique, etc.' } }) }}
                        </div>

                        <div class="row g-3">
                            <div class="col-md-6">
                                {{ form_label(form.price, null, { label_attr: { class: 'form-label fw-semibold' } }) }}
                                {{ form_widget(form.price, { attr: { class: 'form-control', inputmode: 'decimal', placeholder: 'Ex. 250' } }) }}
                                <div class="form-text">Laissez vide si vous souhaitez mettre « À discuter ».</div>
                            </div>
                            <div class="col-md-6">
                                {{ form_label(form.condition, null, { label_attr: { class: 'form-label fw-semibold' } }) }}
                                {{ form_widget(form.condition, { attr: { class: 'form-select' } }) }}
                            </div>
                        </div>

                        <div class="mt-3">
                            {{ form_label(form.location, null, { label_attr: { class: 'form-label fw-semibold' } }) }}
                            {{ form_widget(form.location, { attr: { class: 'form-control', placeholder: 'Ex. Arzal, Camoël, La Roche-Bernard…' } }) }}
                        </div>

                        {# ====== FOTOS (CollectionType) ====== #}
                        {% if form.photos is defined %}
                            <hr class="my-4">
                            <h2 class="h5 mb-3">Photos</h2>

                            <div id="photos-collection"
                                 data-prototype="{{ form_widget(form.photos.vars.prototype)|e('html_attr') }}"
                                 data-index="{{ form.photos|length }}">
                                {% for photoForm in form.photos %}
                                    <div class="photo-item border rounded p-3 mb-3 position-relative">
                                        <div class="mb-2">
                                            {{ form_row(photoForm.imageFile) }}
                                        </div>

                                        <button type="button" class="btn btn-outline-danger btn-sm remove-photo position-absolute"
                                                style="top:.5rem;right:.5rem;">
                                            <i class="bi bi-x-lg"></i>
                                        </button>
                                    </div>
                                {% endfor %}
                            </div>

                            <button type="button" id="add-photo" class="btn btn-outline-primary">
                                <i class="bi bi-plus-lg me-1"></i> Ajouter une photo
                            </button>
                        {% endif %}

                        <div class="d-flex gap-2 mt-4">
                            <button class="btn btn-primary px-4">
                                <i class="bi bi-check2-circle me-1"></i> Envoyer
                            </button>
                            <a href="{{ path('account_ad_index') }}" class="btn btn-outline-secondary">Annuler</a>
                        </div>

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

            <div class="col-lg-4">
                <div class="card shadow-sm border-0">
                    <div class="card-header bg-white py-3">
                        <strong>Conseils utiles</strong>
                    </div>
                    <div class="card-body">
                        <ul class="mb-0 ps-3">
                            <li>Ajoutez des détails concrets : année, état, accessoires, facture.</li>
                            <li>Indiquez un prix réaliste en € pour accélérer la vente.</li>
                            <li>Précisez la localisation pour faciliter la remise en main propre.</li>
                            <li>Des photos nettes augmentent les contacts.</li>
                        </ul>
                        <hr>
                        <p class="small text-muted mb-0">
                            Après envoi, votre annonce passe en <em>modération</em>.
                            Vous pourrez l’éditer depuis <strong>Mon compte &gt; Mes annonces</strong>.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <style>
        #classified-new .card-header { border-bottom: 1px solid rgba(0,0,0,.05); }
        .photo-item { background: #fff; }
        .photo-item .form-label { font-weight: 600; }
        .photo-item .vich-image a { display: none; }
    </style>

    {% block javascripts %}
        {{ parent() }}
        <script>
            window.addEventListener('DOMContentLoaded', function () {
                const container = document.getElementById('photos-collection');
                const addBtn = document.getElementById('add-photo');
                if (!container || !addBtn) return;

                const prototypeHtml = container.getAttribute('data-prototype');
                if (!prototypeHtml) { console.warn('[Photos] data-prototype manquant.'); return; }

                function addForm() {
                    let index = parseInt(container.getAttribute('data-index') || '0', 10);
                    const html = prototypeHtml.replace(/__name__/g, index);
                    container.setAttribute('data-index', (index + 1).toString());

                    const wrap = document.createElement('div');
                    wrap.className = 'photo-item border rounded p-3 mb-3 position-relative';
                    wrap.innerHTML = html;

                    const remove = document.createElement('button');
                    remove.type = 'button';
                    remove.className = 'btn btn-outline-danger btn-sm remove-photo position-absolute';
                    remove.style.top = '.5rem';
                    remove.style.right = '.5rem';
                    remove.innerHTML = '<i class="bi bi-x-lg"></i>';
                    remove.addEventListener('click', () => wrap.remove());

                    wrap.appendChild(remove);
                    container.appendChild(wrap);
                }

                addBtn.addEventListener('click', addForm);
            });
        </script>
    {% endblock %}
{% endblock %}