{% extends '@Commercial/commercial/layout.html.twig' %}

{% block commercial_title %}{{ title|default('Nouveau prospect') }}{% endblock %}

{% block commercial_content %}
    {% set selected_type = form_data.type|default(prospect.type ?: 'Entreprise') %}
    {% set selected_owner = form_data.prospectOwner|default(default_owner ? default_owner.id : '') %}
    {% set selected_legal_form = form_data.formeJuridique|default(prospect.formeJuridique ? prospect.formeJuridique.id : '') %}
    {% set selected_category = form_data.category|default(prospect.categorie ? prospect.categorie.id : '') %}
    {% set prospect_name = form_data.nom|default(prospect.nom ?: '') %}
    {% set prospect_email = form_data.email|default(prospect.email ?: '') %}
    {% set prospect_phone = form_data.telephone|default(prospect.telephone ?: '') %}
    {% set prospect_city = form_data.ville|default(prospect.ville ?: '') %}
    {% set prospect_status = form_data.prospectStatus|default(prospect.prospectStatus ?: 'new') %}
    {% set contact_enabled = contact_enabled|default(false) %}
    {% set contact_data = contact_data|default(null) %}
    {% set contact_errors = contact_errors|default({}) %}
    {% set editing = prospect.id is not null %}
    {% set page_title = title|default(editing ? 'Modifier le prospect' : 'Nouveau prospect') %}
    {% set lookup_url = lookup_url|default(path('commercial_prospect_sirene_lookup')) %}
    {% set cancel_url = cancel_url|default(editing ? path('commercial_prospect_show',{idtoken:prospect.idtoken}) : path('commercial_prospect_index')) %}

    <div class="prospect-create"
         data-controller="prospect-form"
         data-prospect-form-lookup-url-value="{{ lookup_url }}"
         data-prospect-form-contact-email-check-url-value="{{ path('commercial_prospect_contact_email_check') }}"
         data-prospect-form-draft-key-value="prospect-form-{{ company.id }}-{{ editing ? prospect.idtoken : 'new' }}">
        <nav class="prospect-create__breadcrumb" aria-label="Fil d’Ariane">
            <a href="{{ path('commercial_dashboard_index') }}">Commercial</a>
            <i class="ti ti-chevron-right"></i>
            <a href="{{ path('commercial_prospect_index') }}">Prospects</a>
            <i class="ti ti-chevron-right"></i>
            <span>{{ editing ? 'Modifier' : 'Nouveau' }}</span>
        </nav>

        <header class="prospect-create__heading">
            <div>
                <div class="prospect-create__title">
                    <span class="prospect-create__title-icon"><i class="ti ti-user-plus"></i></span>
                    <h1>{{ page_title }}</h1>
                </div>
                <p>{{ editing ? 'Mettez à jour les informations commerciales de ce prospect.' : 'Remplissez les informations pour créer un nouveau prospect dans '~company.nom|default('votre société')~'.' }}</p>
            </div>
            <ol class="prospect-create__steps" aria-label="Étapes du formulaire">
                <li class="is-active" data-prospect-form-target="stepType"><span>1</span>Type</li>
                <li data-prospect-form-target="stepInfo"><span>2</span>Infos</li>
                <li data-prospect-form-target="stepTracking"><span>3</span>Suivi</li>
            </ol>
        </header>

        {% if errors is not empty %}
            <div class="alert alert-danger">Certains champs doivent être corrigés avant de créer le prospect.</div>
        {% endif %}

        <form method="post"
              class="prospect-create__form"
              data-prospect-form-target="form"
              data-action="input->prospect-form#update change->prospect-form#update submit->prospect-form#beforeSubmit">
            <input type="hidden" name="_token" value="{{ csrf_token(csrf_id) }}">
            <input type="hidden" name="submit_action" value="create" data-prospect-form-target="submitAction">
            <input type="hidden" name="pays" value="{{ form_data.pays|default(prospect.pays ?: 'France') }}">

            <div class="prospect-create__grid">
                <main class="prospect-create__main">
                    <section class="prospect-create-card">
                        <header class="prospect-create-card__header is-violet">
                            <span class="prospect-create-card__icon"><i class="ti ti-tag"></i></span>
                            <div><h2>Type de prospect</h2><p>Sélectionnez le type de prospect à créer</p></div>
                        </header>
                        <div class="prospect-create-card__body">
                            <div class="prospect-type-grid">
                                <label class="prospect-type-option">
                                    <input type="radio" name="type" value="Entreprise" {{ selected_type == 'Entreprise' ? 'checked' }} data-action="change->prospect-form#changeType">
                                    <span class="prospect-type-option__box">
                                        <i class="prospect-type-option__dot"></i>
                                        <span class="prospect-type-option__icon is-company"><i class="ti ti-building"></i></span>
                                        <span><strong>Entreprise</strong><small>Société, startup, association. Recherche SIRENE disponible.</small></span>
                                    </span>
                                </label>
                                <label class="prospect-type-option">
                                    <input type="radio" name="type" value="Particulier" {{ selected_type == 'Particulier' ? 'checked' }} data-action="change->prospect-form#changeType">
                                    <span class="prospect-type-option__box">
                                        <i class="prospect-type-option__dot"></i>
                                        <span class="prospect-type-option__icon is-person"><i class="ti ti-user"></i></span>
                                        <span><strong>Particulier</strong><small>Personne physique. Saisie manuelle uniquement.</small></span>
                                    </span>
                                </label>
                            </div>
                        </div>
                    </section>

                    <section class="prospect-create-card" data-prospect-form-target="sireneSection">
                        <header class="prospect-create-card__header">
                            <span class="prospect-create-card__icon is-blue"><i class="ti ti-database-search"></i></span>
                            <div><h2>Recherche SIRENE</h2><p>Pré-remplissage automatique des données légales</p></div>
                            <span class="prospect-create-card__api"><i class="ti ti-database"></i> API SIRENE</span>
                        </header>
                        <div class="prospect-create-card__body">
                            <p class="prospect-create__hint"><i class="ti ti-info-circle"></i> Saisissez le SIRET pour pré-remplir les informations de l’entreprise.</p>
                            <div class="prospect-sirene-search">
                                <label>
                                    <i class="ti ti-barcode"></i>
                                    <input type="text"
                                           inputmode="numeric"
                                           maxlength="18"
                                           placeholder="Ex : 80295478500018"
                                           data-prospect-form-target="searchSiret"
                                           data-action="input->prospect-form#maskSiret">
                                </label>
                                <button type="button" data-prospect-form-target="searchButton" data-action="prospect-form#search">
                                    <i class="ti ti-search"></i> Rechercher avec SIRENE
                                </button>
                            </div>
                            <p class="prospect-create__warning"><i class="ti ti-alert-triangle-filled"></i> La recherche ne crée pas automatiquement le prospect. Vous devrez valider les informations.</p>
                            <div class="prospect-sirene-error d-none" data-prospect-form-target="error"></div>
                            <div class="prospect-sirene-success d-none" data-prospect-form-target="feedback">
                                <span><i class="ti ti-check"></i></span>
                                <div><strong data-prospect-form-target="feedbackTitle">Entreprise trouvée</strong><small>Vérifiez les informations pré-remplies ci-dessous avant d’enregistrer le prospect.</small></div>
                                <button type="button" data-action="prospect-form#dismissFeedback" aria-label="Masquer"><i class="ti ti-x"></i></button>
                            </div>
                        </div>
                    </section>

                    {% if not editing %}
                    <section class="prospect-create-card">
                        <header class="prospect-create-card__header is-green">
                            <span class="prospect-create-card__icon"><i class="ti ti-user-star"></i></span>
                            <div><h2>Contact principal</h2><p>Créez un utilisateur et rattachez-le automatiquement au prospect.</p></div>
                            <label class="prospect-contact-toggle">
                                <input type="checkbox"
                                       name="contact[enabled]"
                                       value="1"
                                       {{ contact_enabled ? 'checked' }}
                                       data-prospect-form-target="contactToggle"
                                       data-action="change->prospect-form#toggleContact change->prospect-form#update">
                                <span></span>
                                Ajouter un contact
                            </label>
                        </header>
                        <div class="prospect-create-card__body prospect-contact-fields {{ not contact_enabled ? 'is-disabled' }}"
                             data-prospect-form-target="contactFields">
                            <input type="hidden" name="contact[principal]" value="1">
                            <input type="hidden" name="contact[actif]" value="1">
                            <div class="prospect-fields">
                                <label><span>Prénom <b>*</b></span>
                                    <input name="contact[prenom]"
                                           value="{{ contact_data ? contact_data.prenom : '' }}"
                                           class="{{ contact_errors.prenom|default ? 'is-invalid' }}"
                                           autocomplete="given-name"
                                           data-prospect-form-target="contactInput"
                                           data-action="input->prospect-form#update">
                                    {% if contact_errors.prenom|default %}<small class="field-error">{{ contact_errors.prenom }}</small>{% endif %}
                                </label>
                                <label><span>Nom <b>*</b></span>
                                    <input name="contact[nom]"
                                           value="{{ contact_data ? contact_data.nom : '' }}"
                                           class="{{ contact_errors.nom|default ? 'is-invalid' }}"
                                           autocomplete="family-name"
                                           data-prospect-form-target="contactInput"
                                           data-action="input->prospect-form#update">
                                    {% if contact_errors.nom|default %}<small class="field-error">{{ contact_errors.nom }}</small>{% endif %}
                                </label>
                                <label><span>Email du contact <b>*</b></span>
                                    <div class="prospect-input-icon">
                                        <i class="ti ti-mail"></i>
                                        <input type="email"
                                               name="contact[email]"
                                               value="{{ contact_data ? contact_data.email : '' }}"
                                               class="{{ contact_errors.email|default ? 'is-invalid' }}"
                                               placeholder="prenom.nom@entreprise.fr"
                                               autocomplete="email"
                                               data-prospect-form-target="contactInput contactEmail"
                                               data-action="input->prospect-form#resetContactEmailCheck blur->prospect-form#checkContactEmail">
                                    </div>
                                    {% if contact_errors.email|default %}
                                        <small class="field-error" data-prospect-form-target="contactEmailFeedback">{{ contact_errors.email }}</small>
                                    {% else %}
                                        <small class="prospect-contact-email-feedback" data-prospect-form-target="contactEmailFeedback">L’adresse sera vérifiée dans la base utilisateurs.</small>
                                    {% endif %}
                                </label>
                                <label><span>Téléphone</span>
                                    <div class="prospect-input-icon"><i class="ti ti-phone"></i><input name="contact[telephone]" value="{{ contact_data ? contact_data.telephone : '' }}" inputmode="tel" autocomplete="tel" data-prospect-form-target="contactInput"></div>
                                </label>
                                <label class="is-full"><span>Fonction</span>
                                    <input name="contact[fonction]" value="{{ contact_data ? contact_data.fonction : '' }}" placeholder="Direction générale, responsable achats…" data-prospect-form-target="contactInput">
                                </label>
                            </div>
                        </div>
                    </section>
                    {% endif %}

                    <section class="prospect-create-card">
                        <header class="prospect-create-card__header is-violet">
                            <span class="prospect-create-card__icon"><i class="ti ti-building"></i></span>
                            <div><h2>Informations du prospect</h2><p>Données légales et coordonnées</p></div>
                            <span class="prospect-create-card__prefilled d-none" data-prospect-form-target="prefilledBadge"><i class="ti ti-wand"></i> Pré-rempli</span>
                        </header>
                        <div class="prospect-create-card__body">
                            <div class="prospect-form-section" data-prospect-form-target="legalSection">
                                <h3><i class="ti ti-scale"></i> Identité légale</h3>
                                <div class="prospect-fields">
                                    <label class="is-full"><span data-prospect-form-target="nameLabel">Raison sociale</span> <b>*</b>
                                        <input class="{{ errors.nom|default ? 'is-invalid' }}"
                                               name="nom"
                                               value="{{ prospect_name }}"
                                               placeholder="Nom officiel de l’entreprise"
                                               data-prospect-form-target="name summarySource"
                                               required>
                                        {% if errors.nom|default %}<small class="field-error">{{ errors.nom }}</small>{% else %}<small>Nom officiel du prospect</small>{% endif %}
                                    </label>
                                    <label data-prospect-form-target="companyOnly"><span>Forme juridique</span>
                                        <select name="formeJuridique" data-prospect-form-target="legalForm">
                                            <option value="">Sélectionner</option>
                                            {% for legal_form in legal_forms %}
                                                <option value="{{ legal_form.id }}" data-code="{{ legal_form.code }}" {{ selected_legal_form == legal_form.id ~ '' ? 'selected' }}>{{ legal_form.nom }}</option>
                                            {% endfor %}
                                        </select>
                                    </label>
                                    <label data-prospect-form-target="companyOnly"><span>Code NAF</span>
                                        <input name="codeNaf" value="{{ form_data.codeNaf|default(prospect.codeNaf ?: '') }}" placeholder="Ex : 7410Z" data-prospect-form-target="codeNaf">
                                    </label>
                                    <label data-prospect-form-target="companyOnly"><span>SIRET <b>*</b></span>
                                        <input name="siret"
                                               value="{{ form_data.siret|default(prospect.siret ?: '') }}"
                                               inputmode="numeric"
                                               maxlength="18"
                                               data-prospect-form-target="siret"
                                               data-action="input->prospect-form#syncSiret"
                                               {{ selected_type == 'Entreprise' ? 'required' }}>
                                        {% if errors.siret|default %}<small class="field-error">{{ errors.siret }}</small>{% endif %}
                                        <small class="prospect-field-verified d-none" data-prospect-form-target="verifiedSiret"><i class="ti ti-check"></i> SIRET vérifié via SIRENE</small>
                                    </label>
                                    <label data-prospect-form-target="companyOnly"><span>SIREN</span>
                                        <input name="siren" value="{{ form_data.siren|default(prospect.siren ?: '') }}" data-prospect-form-target="siren">
                                    </label>
                                </div>
                            </div>

                            <div class="prospect-form-section">
                                <h3><i class="ti ti-map-pin"></i> Adresse</h3>
                                <div class="prospect-fields">
                                    <label class="is-full"><span>Adresse</span>
                                        <input name="adresse" value="{{ form_data.adresse|default(prospect.adresse ?: '') }}" data-prospect-form-target="address">
                                    </label>
                                    <label><span>Code postal</span>
                                        <input name="codePostal" value="{{ form_data.codePostal|default(prospect.codePostal ?: '') }}" data-prospect-form-target="postalCode">
                                    </label>
                                    <label><span>Ville</span>
                                        <input name="ville" value="{{ prospect_city }}" data-prospect-form-target="city">
                                    </label>
                                </div>
                            </div>

                            <div class="prospect-form-section">
                                <h3><i class="ti ti-address-book"></i> Coordonnées de contact</h3>
                                <div class="prospect-fields">
                                    <label><span>Email <b>*</b></span>
                                        <div class="prospect-input-icon"><i class="ti ti-mail"></i><input type="email" name="email" value="{{ prospect_email }}" placeholder="contact@entreprise.fr" data-prospect-form-target="email" required></div>
                                        {% if errors.email|default %}<small class="field-error">{{ errors.email }}</small>{% endif %}
                                    </label>
                                    <label><span>Téléphone</span>
                                        <div class="prospect-input-icon"><i class="ti ti-phone"></i><input name="telephone" value="{{ prospect_phone }}" placeholder="+33 4 XX XX XX XX" data-prospect-form-target="phone"></div>
                                    </label>
                                    <label class="is-full"><span>Site web</span>
                                        <div class="prospect-input-icon"><i class="ti ti-world"></i><input name="siteWeb" value="{{ form_data.siteWeb|default(prospect.siteWeb not in ['', '-'] ? prospect.siteWeb : '') }}" placeholder="https://www.entreprise.fr"></div>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </section>

                    <section class="prospect-create-card">
                        <header class="prospect-create-card__header is-amber">
                            <span class="prospect-create-card__icon"><i class="ti ti-chart-line"></i></span>
                            <div><h2>Suivi commercial</h2><p>Paramètres de suivi et affectation</p></div>
                        </header>
                        <div class="prospect-create-card__body">
                            <div class="prospect-fields">
                                <label><span>Source</span>
                                    <select name="prospectSource">
                                        <option value="">Sélectionner une source</option>
                                        {% for source in sources %}<option value="{{ source }}" {{ form_data.prospectSource|default(prospect.prospectSource) == source ? 'selected' }}>{{ source }}</option>{% endfor %}
                                    </select>
                                </label>
                                <label><span>Catégorie</span>
                                    <select name="category" data-prospect-form-target="category">
                                        <option value="">Sans catégorie</option>
                                        {% for category in categories %}
                                            <option value="{{ category.id }}" {{ selected_category == category.id ~ '' ? 'selected' }}>{{ category.nom }}</option>
                                        {% endfor %}
                                    </select>
                                    <small><a href="{{ path('commercial_client_category_index') }}" target="_blank"><i class="ti ti-plus"></i> Gérer les catégories</a></small>
                                </label>
                                <label><span>Responsable commercial <b>*</b></span>
                                    <select name="prospectOwner" data-prospect-form-target="owner" required>
                                        {% for owner in owners %}
                                            <option value="{{ owner.id }}" {{ selected_owner == owner.id ~ '' ? 'selected' }}>{{ (owner.prenom ~ ' ' ~ owner.nom)|trim }}</option>
                                        {% else %}
                                            {% if default_owner %}<option value="{{ default_owner.id }}">{{ (default_owner.prenom ~ ' ' ~ default_owner.nom)|trim }}</option>{% endif %}
                                        {% endfor %}
                                    </select>
                                </label>
                                <label><span>Statut initial</span>
                                    <select name="prospectStatus" data-prospect-form-target="status">
                                        {% for value,label in statuses|default({new:'Nouveau',contacted:'Contacté',qualified:'Qualifié',quote:'Devis envoyé',negotiation:'Négociation'}) %}
                                            <option value="{{ value }}" {{ prospect_status == value ? 'selected' }}>{{ label }}</option>
                                        {% endfor %}
                                    </select>
                                    <small>Le statut « Nouveau » est recommandé par défaut</small>
                                </label>
                                <label><span>Valeur estimée (€)</span>
                                    <div class="prospect-input-icon"><i class="ti ti-currency-euro"></i><input name="prospectEstimatedValue" inputmode="decimal" value="{{ form_data.prospectEstimatedValue|default(prospect.prospectEstimatedValue ?: '') }}" placeholder="0,00"></div>
                                    {% if errors.prospectEstimatedValue|default %}<small class="field-error">{{ errors.prospectEstimatedValue }}</small>{% endif %}
                                </label>
                                <label class="is-full"><span>Notes commerciales</span>
                                    <textarea name="notesCommerciales" rows="5" placeholder="Contexte, besoins exprimés, points importants à retenir…">{{ form_data.notesCommerciales|default(prospect.notesCommerciales ?: '') }}</textarea>
                                </label>
                            </div>
                        </div>
                    </section>
                </main>

                <aside class="prospect-create-summary">
                    <section class="prospect-create-card">
                        <header class="prospect-create-card__header is-violet">
                            <span class="prospect-create-card__icon"><i class="ti ti-clipboard-text"></i></span>
                            <div><h2>Résumé</h2><p>{{ editing ? 'Aperçu des modifications' : 'Aperçu avant création' }}</p></div>
                        </header>
                        <div class="prospect-create-summary__body">
                            <div class="prospect-summary-company">
                                <span data-prospect-form-target="summaryIcon"><i class="ti ti-building"></i></span>
                                <div><strong data-prospect-form-target="summaryName">{{ prospect_name ?: 'Nouveau prospect' }}</strong><small><span data-prospect-form-target="summaryType">Entreprise</span> · <span data-prospect-form-target="summaryCity">{{ prospect_city ?: 'Ville non renseignée' }}</span></small></div>
                            </div>
                            <dl class="prospect-summary-list">
                                <div><dt><i class="ti ti-tag"></i> Type</dt><dd class="is-type" data-prospect-form-target="summaryTypeBadge"><i class="ti ti-building"></i> Entreprise</dd></div>
                                <div><dt><i class="ti ti-tags"></i> Catégorie</dt><dd data-prospect-form-target="summaryCategory">{{ prospect.categorie ? prospect.categorie.nom : '—' }}</dd></div>
                                <div><dt><i class="ti ti-mail"></i> Email</dt><dd data-prospect-form-target="summaryEmail">{{ prospect_email ?: '—' }}</dd></div>
                                <div><dt><i class="ti ti-phone"></i> Tél.</dt><dd data-prospect-form-target="summaryPhone">{{ prospect_phone ?: '—' }}</dd></div>
                                <div><dt><i class="ti ti-circle-half-2"></i> Statut</dt><dd class="is-status" data-prospect-form-target="summaryStatus">Nouveau</dd></div>
                                <div><dt><i class="ti ti-user"></i> Responsable</dt><dd data-prospect-form-target="summaryOwner">{{ default_owner ? (default_owner.prenom ~ ' ' ~ default_owner.nom)|trim : '—' }}</dd></div>
                            </dl>
                            <div class="prospect-summary-siret d-none" data-prospect-form-target="summarySiret"><i class="ti ti-database"></i> SIRET vérifié : <strong></strong></div>
                        </div>
                        <div class="prospect-summary-rules">
                            <h3><i class="ti ti-info-circle"></i> Règles applicables</h3>
                            <p class="is-blue"><i class="ti ti-file-description"></i> Le prospect pourra recevoir un devis.</p>
                            <p class="is-amber"><i class="ti ti-file-invoice"></i> Une facture nécessitera une conversion en client.</p>
                            <p class="is-green"><i class="ti ti-refresh"></i> Un devis accepté convertira automatiquement le prospect en client.</p>
                        </div>
                    </section>
                </aside>
            </div>

            <footer class="prospect-create-actions">
                <p><i class="ti ti-shield-check"></i> Les données sont sauvegardées automatiquement pour la session en cours.</p>
                <div>
                    <a href="{{ cancel_url }}" class="prospect-action-cancel" data-action="prospect-form#clearDraft"><i class="ti ti-x"></i> Annuler</a>
                    <button type="button" class="prospect-action-quote" data-action="prospect-form#submitQuote"><i class="ti ti-file-description"></i> Enregistrer et créer un devis</button>
                    <button type="submit" class="prospect-action-submit"><i class="ti {{ editing ? 'ti-device-floppy' : 'ti-user-plus' }}"></i> {{ editing ? 'Enregistrer les modifications' : 'Créer le prospect' }}</button>
                </div>
            </footer>
        </form>
    </div>
{% endblock %}