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

{% block commercial_title %}Nouveau client entreprise{% endblock %}

{% block commercial_content %}
{% set active_company = company|default(admin_societe_context()) %}
{% set sirene_filled = data.siret|default('') and data.nom|default('') %}
{% set contact_enabled = contact_enabled|default(false) %}

<div class="clientsphere-page clientsphere-new"
     data-controller="commercial-client-form"
     data-commercial-client-form-contact-enabled-value="{{ contact_enabled ? 'true' : 'false' }}">
    <header class="clientsphere-new-header">
        <div class="clientsphere-title">
            <a class="clientsphere-new-back" href="{{ path('commercial_client_index') }}" aria-label="Retour aux clients">
                <i class="ti ti-arrow-left"></i>
            </a>
            <span class="clientsphere-title-icon"><i class="ti ti-building-plus"></i></span>
            <div>
                <h1>Nouveau client entreprise</h1>
                <p>Recherchez l’entreprise via SIRENE, vérifiez les données et enregistrez le client.</p>
            </div>
        </div>
        <span class="clientsphere-new-draft"><i></i> Brouillon en cours</span>
    </header>

    {% if errors._global is defined %}
        <div class="alert alert-danger">{{ errors._global }}</div>
    {% endif %}

    <div class="clientsphere-new-layout">
        <div class="clientsphere-new-main">
            <section class="clientsphere-new-card">
                <div class="clientsphere-new-card-header">
                    <span class="clientsphere-new-section-icon is-brand"><i class="ti ti-map-search"></i></span>
                    <div>
                        <h2>Recherche SIRENE</h2>
                        <p>Saisissez le SIRET de l’entreprise pour pré-remplir les informations légales.</p>
                    </div>
                    <span class="clientsphere-new-api"><i class="ti ti-database"></i> API SIRENE</span>
                </div>
                <div class="clientsphere-new-card-body">
                    <form method="post" action="{{ path('commercial_sirene_search') }}" class="clientsphere-sirene-search">
                        <input type="hidden" name="_token" value="{{ csrf_token('sirene_lookup') }}">
                        <div class="clientsphere-sirene-row">
                            <div class="clientsphere-new-field">
                                <label for="sirene_siret">Numéro SIRET <b>*</b></label>
                                <div class="clientsphere-new-input-icon">
                                    <i class="ti ti-barcode"></i>
                                    <input id="sirene_siret"
                                           type="text"
                                           name="sirene[siret]"
                                           value="{{ data.siret|default('') }}"
                                           class="form-control font-monospace"
                                           inputmode="numeric"
                                           minlength="14"
                                           maxlength="17"
                                           placeholder="Ex. 123 456 789 00012"
                                           data-mask="siret"
                                           data-action="input->commercial-client-form#mask"
                                           required>
                                    {% if sirene_filled %}<i class="ti ti-circle-check clientsphere-field-check"></i>{% endif %}
                                </div>
                                <small><i class="ti ti-shield-check"></i> La recherche ne crée pas le client automatiquement.</small>
                            </div>
                            <button class="clientsphere-btn clientsphere-btn-primary clientsphere-sirene-submit" type="submit">
                                <i class="ti ti-satellite"></i> Rechercher avec SIRENE
                            </button>
                        </div>
                        {% if sirene_filled %}
                            <div class="clientsphere-sirene-success">
                                <span><i class="ti ti-check"></i></span>
                                <div>
                                    <strong>Entreprise trouvée.</strong>
                                    <p>Vérifiez les informations ci-dessous avant d’enregistrer. Les champs ont été pré-remplis automatiquement.</p>
                                </div>
                                <em>SIRENE <i class="ti ti-check"></i></em>
                            </div>
                        {% endif %}
                    </form>
                </div>
            </section>

            <form id="client-create-form"
                  method="post"
                  action="{{ path('commercial_client_new') }}"
                  enctype="multipart/form-data"
                  class="clientsphere-new-form">
                <input type="hidden" name="_token" value="{{ csrf_token('commercial_client_new') }}">
                <input type="hidden" name="client[ignoreDuplicate]" value="0" data-commercial-client-form-target="ignoreDuplicate">

                <section class="clientsphere-new-card">
                    <div class="clientsphere-new-card-header">
                        <span class="clientsphere-new-section-icon is-blue"><i class="ti ti-building"></i></span>
                        <div>
                            <h2>Informations client</h2>
                            <p>Complétez ou modifiez les informations pré-remplies.</p>
                        </div>
                        <span class="clientsphere-required"><b>*</b> Champs obligatoires</span>
                    </div>
                    <div class="clientsphere-new-card-body">
                        <div class="clientsphere-new-fields">
                            <div class="clientsphere-new-field">
                                <label for="client_type">Type de client <b>*</b></label>
                                <select id="client_type" name="client[type]" class="form-select{% if errors.type is defined %} is-invalid{% endif %}">
                                    {% for value, label in types %}
                                        <option value="{{ value }}" {% if data.type == value %}selected{% endif %}>{{ label }}</option>
                                    {% endfor %}
                                </select>
                                {% if errors.type is defined %}<div class="invalid-feedback">{{ errors.type }}</div>{% endif %}
                            </div>
                            <div class="clientsphere-new-field">
                                <label for="client_actif">Statut</label>
                                <label class="clientsphere-status">
                                    <input id="client_actif" type="checkbox" name="client[actif]" value="1" {% if data.actif %}checked{% endif %}>
                                    <span class="clientsphere-status-switch"></span>
                                    <strong data-commercial-client-form-target="statusLabel">{{ data.actif ? 'Client actif' : 'Client inactif' }}</strong>
                                </label>
                            </div>
                            <div class="clientsphere-new-field is-full">
                                <label for="client_category">Catégorie commerciale</label>
                                <select id="client_category" name="client[categoryId]" class="form-select">
                                    <option value="">— Sans catégorie —</option>
                                    {% for category in categories %}<option value="{{ category.id }}" {{ data.categoryId == category.id ? 'selected' }}>{{ category.nom }}</option>{% endfor %}
                                </select>
                                <small><i class="ti ti-tags"></i> Classement commun aux prospects et aux clients. <a href="{{ path('commercial_client_category_index') }}" target="_blank">Gérer les catégories</a></small>
                            </div>
                        </div>

                        <div class="clientsphere-new-divider"><span>Identité légale</span></div>
                        <div class="clientsphere-new-fields">
                            <div class="clientsphere-new-field is-full">
                                <label for="client_nom">Raison sociale <b>*</b></label>
                                <input id="client_nom"
                                       type="text"
                                       name="client[nom]"
                                       value="{{ data.nom }}"
                                       class="form-control{% if sirene_filled %} is-sirene{% endif %}{% if errors.nom is defined %} is-invalid{% endif %}"
                                       data-commercial-client-form-target="companyName"
                                       data-action="input->commercial-client-form#refreshSummary"
                                       required>
                                {% if errors.nom is defined %}<div class="invalid-feedback">{{ errors.nom }}</div>{% endif %}
                                {% if sirene_filled %}<small class="clientsphere-prefilled"><i class="ti ti-circle-check-filled"></i> Pré-rempli depuis SIRENE</small>{% endif %}
                            </div>
                            <div class="clientsphere-new-field">
                                <label for="client_forme_juridique">Forme juridique</label>
                                <select id="client_forme_juridique"
                                        name="client[formeJuridiqueId]"
                                        class="form-select{% if sirene_filled and data.formeJuridiqueId %} is-sirene{% endif %}"
                                        data-commercial-client-form-target="legalForm"
                                        data-action="change->commercial-client-form#refreshSummary">
                                    <option value="">— Sélectionner —</option>
                                    {% for legal_form in legal_forms %}
                                        <option value="{{ legal_form.id }}" {% if data.formeJuridiqueId == legal_form.id %}selected{% endif %}>
                                            {{ legal_form.nom }} ({{ legal_form.code }}) — {{ legal_form.categorie }}
                                        </option>
                                    {% endfor %}
                                </select>
                                {% if data.formeJuridiqueLabel|default('') and not data.formeJuridiqueId %}
                                    <small class="text-warning">
                                        Forme SIRENE non associée au référentiel : {{ data.formeJuridiqueLabel }}
                                    </small>
                                {% endif %}
                            </div>
                            <div class="clientsphere-new-field">
                                <label for="client_code_naf">Code NAF</label>
                                <input id="client_code_naf"
                                       type="text"
                                       name="client[codeNaf]"
                                       value="{{ data.codeNaf|default('') }}"
                                       class="form-control font-monospace{% if sirene_filled %} is-sirene{% endif %}"
                                       maxlength="6"
                                       placeholder="Ex. 62.02A"
                                       data-mask="naf"
                                       data-commercial-client-form-target="naf"
                                       data-action="input->commercial-client-form#mask input->commercial-client-form#refreshSummary">
                            </div>
                            <div class="clientsphere-new-field">
                                <label for="client_siret">SIRET <b>*</b></label>
                                <input id="client_siret"
                                       type="text"
                                       name="client[siret]"
                                       value="{{ data.siret }}"
                                       class="form-control font-monospace{% if sirene_filled %} is-sirene{% endif %}{% if errors.siret is defined %} is-invalid{% endif %}"
                                       inputmode="numeric"
                                       maxlength="17"
                                       placeholder="Ex. 123 456 789 00012"
                                       data-mask="siret"
                                       data-commercial-client-form-target="siret"
                                       data-action="input->commercial-client-form#mask input->commercial-client-form#refreshSummary"
                                       required>
                                {% if errors.siret is defined %}<div class="invalid-feedback">{{ errors.siret }}</div>{% endif %}
                            </div>
                            <div class="clientsphere-new-field">
                                <label for="client_siren">SIREN <b>*</b></label>
                                <input id="client_siren"
                                       type="text"
                                       name="client[siren]"
                                       value="{{ data.siren }}"
                                       class="form-control font-monospace{% if sirene_filled %} is-sirene{% endif %}{% if errors.siren is defined %} is-invalid{% endif %}"
                                       inputmode="numeric"
                                       maxlength="11"
                                       placeholder="Ex. 123 456 789"
                                       data-mask="siren"
                                       data-commercial-client-form-target="siren"
                                       data-action="input->commercial-client-form#mask input->commercial-client-form#refreshSummary"
                                       required>
                                {% if errors.siren is defined %}<div class="invalid-feedback">{{ errors.siren }}</div>{% endif %}
                            </div>
                        </div>

                        <div class="clientsphere-new-divider"><span>Adresse</span></div>
                        <div class="clientsphere-new-fields">
                            <div class="clientsphere-new-field is-full">
                                <label for="client_adresse">Adresse <b>*</b></label>
                                <input id="client_adresse"
                                       type="text"
                                       name="client[adresse]"
                                       value="{{ data.adresse }}"
                                       class="form-control{% if sirene_filled %} is-sirene{% endif %}{% if errors.adresse is defined %} is-invalid{% endif %}"
                                       data-commercial-client-form-target="address"
                                       data-action="input->commercial-client-form#refreshSummary"
                                       required>
                                {% if errors.adresse is defined %}<div class="invalid-feedback">{{ errors.adresse }}</div>{% endif %}
                            </div>
                            <div class="clientsphere-new-field">
                                <label for="client_code_postal">Code postal <b>*</b></label>
                                <input id="client_code_postal"
                                       type="text"
                                       name="client[codePostal]"
                                       value="{{ data.codePostal }}"
                                       class="form-control{% if sirene_filled %} is-sirene{% endif %}{% if errors.codePostal is defined %} is-invalid{% endif %}"
                                       inputmode="numeric"
                                       maxlength="5"
                                       placeholder="Ex. 75001"
                                       data-mask="postal-code"
                                       data-commercial-client-form-target="postalCode"
                                       data-action="input->commercial-client-form#mask input->commercial-client-form#refreshSummary">
                                {% if errors.codePostal is defined %}<div class="invalid-feedback">{{ errors.codePostal }}</div>{% endif %}
                            </div>
                            <div class="clientsphere-new-field">
                                <label for="client_ville">Ville <b>*</b></label>
                                <input id="client_ville"
                                       type="text"
                                       name="client[ville]"
                                       value="{{ data.ville }}"
                                       class="form-control{% if sirene_filled %} is-sirene{% endif %}{% if errors.ville is defined %} is-invalid{% endif %}"
                                       data-commercial-client-form-target="city"
                                       data-action="input->commercial-client-form#refreshSummary"
                                       required>
                                {% if errors.ville is defined %}<div class="invalid-feedback">{{ errors.ville }}</div>{% endif %}
                            </div>
                            <div class="clientsphere-new-field">
                                <label for="client_departement">Département</label>
                                <input id="client_departement"
                                       type="text"
                                       name="client[departement]"
                                       value="{{ data.departement|default('') }}"
                                       class="form-control{% if sirene_filled %} is-sirene{% endif %}"
                                       data-commercial-client-form-target="department"
                                       data-action="input->commercial-client-form#refreshSummary">
                            </div>
                            <div class="clientsphere-new-field">
                                <label for="client_pays">Pays</label>
                                <input id="client_pays" type="text" value="France" class="form-control" disabled>
                            </div>
                        </div>

                        <div class="clientsphere-new-divider"><span>Contact de l’entreprise</span></div>
                        <div class="clientsphere-new-fields">
                            <div class="clientsphere-new-field">
                                <label for="client_email">Email</label>
                                <div class="clientsphere-new-input-icon">
                                    <i class="ti ti-mail"></i>
                                    <input id="client_email" type="email" name="client[email]" value="{{ data.email }}" class="form-control{% if errors.email is defined %} is-invalid{% endif %}" placeholder="contact@entreprise.fr">
                                </div>
                                {% if errors.email is defined %}<div class="invalid-feedback d-block">{{ errors.email }}</div>{% endif %}
                            </div>
                            <div class="clientsphere-new-field">
                                <label for="client_telephone">Téléphone</label>
                                <div class="clientsphere-new-input-icon">
                                    <i class="ti ti-phone"></i>
                                    <input id="client_telephone" type="text" name="client[telephone]" value="{{ data.telephone }}" class="form-control" inputmode="tel" maxlength="14" placeholder="Ex. 01 23 45 67 89" data-mask="phone" data-action="input->commercial-client-form#mask">
                                </div>
                            </div>
                            <div class="clientsphere-new-field is-full">
                                <label for="client_site_web">Site internet</label>
                                <div class="clientsphere-new-input-icon">
                                    <i class="ti ti-world-www"></i>
                                    <input id="client_site_web"
                                           type="url"
                                           name="client[siteWeb]"
                                           value="{{ data.siteWeb }}"
                                           class="form-control{% if errors.siteWeb is defined %} is-invalid{% endif %}"
                                           maxlength="255"
                                           placeholder="Ex. https://www.entreprise.fr">
                                </div>
                                {% if errors.siteWeb is defined %}<div class="invalid-feedback d-block">{{ errors.siteWeb }}</div>{% endif %}
                            </div>
                        </div>
                    </div>
                </section>

                <section class="clientsphere-new-card">
                    <div class="clientsphere-new-card-header">
                        <span class="clientsphere-new-section-icon is-violet"><i class="ti ti-photo-plus"></i></span>
                        <div>
                            <h2>Logo du client</h2>
                            <p>Ajoutez une image qui permettra d’identifier rapidement le client.</p>
                        </div>
                    </div>
                    <div class="clientsphere-new-card-body">
                        <label class="clientsphere-logo-drop{% if errors.logo is defined %} is-invalid{% endif %}" for="client_logo">
                            <span class="clientsphere-logo-preview" data-commercial-client-form-target="logoPreview">
                                <i class="ti ti-building"></i>
                            </span>
                            <span>
                                <strong>Déposez le logo ici ou parcourez vos fichiers</strong>
                                <small>JPG, PNG ou WebP — 3 Mo maximum.</small>
                            </span>
                            <span class="clientsphere-btn clientsphere-btn-secondary">Choisir un fichier</span>
                            <input id="client_logo"
                                   type="file"
                                   name="client[logo]"
                                   accept="image/jpeg,image/png,image/webp"
                                   data-action="change->commercial-client-form#previewLogo">
                        </label>
                        {% if errors.logo is defined %}<div class="clientsphere-upload-error">{{ errors.logo }}</div>{% endif %}
                    </div>
                </section>

                <section class="clientsphere-new-card">
                    <div class="clientsphere-new-card-header">
                        <span class="clientsphere-new-section-icon is-teal"><i class="ti ti-user-star"></i></span>
                        <div>
                            <h2>Contact principal</h2>
                            <p>Créez dès maintenant le contact référent rattaché à ce client.</p>
                        </div>
                        <label class="clientsphere-contact-toggle">
                            <input type="checkbox"
                                   name="contact[enabled]"
                                   value="1"
                                   {% if contact_enabled %}checked{% endif %}
                                   data-commercial-client-form-target="contactToggle"
                                   data-action="change->commercial-client-form#toggleContact">
                            <span></span>
                            Ajouter le contact
                        </label>
                    </div>
                    <div class="clientsphere-new-card-body clientsphere-contact-fields{% if not contact_enabled %} is-disabled{% endif %}" data-commercial-client-form-target="contactFields">
                        <input type="hidden" name="contact[principal]" value="1">
                        <input type="hidden" name="contact[actif]" value="1">
                        <div class="clientsphere-new-fields">
                            <div class="clientsphere-new-field">
                                <label for="contact_prenom">Prénom <b>*</b></label>
                                <input id="contact_prenom" type="text" name="contact[prenom]" value="{{ contact_data.prenom|default('') }}" class="form-control{% if contact_errors.prenom is defined %} is-invalid{% endif %}" data-commercial-client-form-target="contactInput">
                                {% if contact_errors.prenom is defined %}<div class="invalid-feedback">{{ contact_errors.prenom }}</div>{% endif %}
                            </div>
                            <div class="clientsphere-new-field">
                                <label for="contact_nom">Nom <b>*</b></label>
                                <input id="contact_nom" type="text" name="contact[nom]" value="{{ contact_data.nom|default('') }}" class="form-control{% if contact_errors.nom is defined %} is-invalid{% endif %}" data-commercial-client-form-target="contactInput">
                                {% if contact_errors.nom is defined %}<div class="invalid-feedback">{{ contact_errors.nom }}</div>{% endif %}
                            </div>
                            <div class="clientsphere-new-field">
                                <label for="contact_email">Email</label>
                                <input id="contact_email" type="email" name="contact[email]" value="{{ contact_data.email|default('') }}" class="form-control{% if contact_errors.email is defined %} is-invalid{% endif %}" placeholder="prenom.nom@entreprise.fr" data-commercial-client-form-target="contactInput">
                                {% if contact_errors.email is defined %}<div class="invalid-feedback">{{ contact_errors.email }}</div>{% endif %}
                            </div>
                            <div class="clientsphere-new-field">
                                <label for="contact_telephone">Téléphone</label>
                                <input id="contact_telephone" type="text" name="contact[telephone]" value="{{ contact_data.telephone|default('') }}" class="form-control" inputmode="tel" maxlength="14" placeholder="Ex. 01 23 45 67 89" data-mask="phone" data-action="input->commercial-client-form#mask" data-commercial-client-form-target="contactInput">
                            </div>
                            <div class="clientsphere-new-field is-full">
                                <label for="contact_fonction">Fonction</label>
                                <input id="contact_fonction" type="text" name="contact[fonction]" value="{{ contact_data.fonction|default('') }}" class="form-control" placeholder="Ex. Direction générale, responsable achats…" data-commercial-client-form-target="contactInput">
                            </div>
                        </div>
                    </div>
                </section>

                <section class="clientsphere-new-card">
                    <div class="clientsphere-new-card-header">
                        <span class="clientsphere-new-section-icon is-amber"><i class="ti ti-note"></i></span>
                        <div>
                            <h2>Notes commerciales</h2>
                            <p>Informations internes visibles uniquement par votre équipe.</p>
                        </div>
                    </div>
                    <div class="clientsphere-new-card-body">
                        <div class="clientsphere-new-field">
                            <label for="client_notes">Notes internes</label>
                            <textarea id="client_notes" name="client[notesCommerciales]" class="form-control" rows="4" placeholder="Contexte commercial, historique de prospection, points d’attention spécifiques…">{{ data.notesCommerciales|default('') }}</textarea>
                            <small><i class="ti ti-lock"></i> Ces notes ne sont pas visibles par le client.</small>
                        </div>
                    </div>
                </section>
            </form>
        </div>

        <aside class="clientsphere-new-aside">
            <section class="clientsphere-new-card clientsphere-summary">
                <div class="clientsphere-new-card-header">
                    <i class="ti ti-file-description"></i>
                    <h2>Résumé SIRENE</h2>
                    <span class="{{ sirene_filled ? 'is-verified' : '' }}"><i class="ti ti-circle-check-filled"></i> {{ sirene_filled ? 'Vérifié' : 'À compléter' }}</span>
                </div>
                <div class="clientsphere-summary-body">
                    <dl>
                        <div>
                            <dt>Raison sociale</dt>
                            <dd data-commercial-client-form-target="summaryCompany">{{ data.nom|default('—') ?: '—' }}</dd>
                        </div>
                        <div>
                            <dt>Forme juridique</dt>
                            <dd data-commercial-client-form-target="summaryLegalForm">{{ data.formeJuridiqueLabel|default('—') ?: '—' }}</dd>
                        </div>
                        <div class="is-two">
                            <span><dt>SIRET</dt><dd class="font-monospace" data-commercial-client-form-target="summarySiret">{{ data.siret|default('—') ?: '—' }}</dd></span>
                            <span><dt>SIREN</dt><dd class="font-monospace" data-commercial-client-form-target="summarySiren">{{ data.siren|default('—') ?: '—' }}</dd></span>
                        </div>
                        <div>
                            <dt>Code NAF</dt>
                            <dd class="is-brand font-monospace" data-commercial-client-form-target="summaryNaf">{{ data.codeNaf|default('—') ?: '—' }}</dd>
                        </div>
                        <div class="is-separated">
                            <dt>Adresse complète</dt>
                            <dd data-commercial-client-form-target="summaryAddress">
                                {{ data.adresse|default('') ?: '—' }}{% if data.codePostal|default('') or data.ville|default('') %}<br>{{ data.codePostal }} {{ data.ville }}{% endif %}{% if data.departement|default('') %}<br>{{ data.departement }}{% endif %}
                            </dd>
                        </div>
                    </dl>
                </div>
            </section>

            {% if duplicate %}
                <section class="clientsphere-new-card clientsphere-duplicate" data-commercial-client-form-target="duplicateCard">
                    <div class="clientsphere-new-card-header">
                        <span class="clientsphere-new-section-icon is-amber"><i class="ti ti-alert-triangle"></i></span>
                        <h2>Doublon potentiel</h2>
                    </div>
                    <div class="clientsphere-duplicate-body">
                        <p><i class="ti ti-alert-circle-filled"></i> Un client avec le même SIREN ou le même nom existe peut-être.</p>
                        <div class="clientsphere-duplicate-client">
                            <span><i class="ti ti-building"></i></span>
                            <strong>{{ duplicate.nom }}</strong>
                            <small>{{ duplicate.siren ? 'SIREN ' ~ duplicate.siren : duplicate.ville }}</small>
                        </div>
                        <a href="{{ path('commercial_client_show', {id: duplicate.id}) }}"><i class="ti ti-external-link"></i> Voir le client existant</a>
                        <button type="button" class="clientsphere-btn clientsphere-btn-secondary w-100" data-action="commercial-client-form#ignoreDuplicate">
                            <i class="ti ti-player-skip-forward"></i> Continuer quand même
                        </button>
                    </div>
                </section>
            {% endif %}

            <div class="clientsphere-new-tip">
                <i class="ti ti-bulb"></i>
                <div>
                    <strong>Bon à savoir</strong>
                    <p>Les champs surlignés en vert ont été pré-remplis depuis la base SIRENE officielle. Vous pouvez les modifier librement.</p>
                </div>
            </div>
        </aside>
    </div>

    <div class="clientsphere-new-actions">
        <p><i class="ti ti-info-circle-filled"></i> Le client sera rattaché à <strong>{{ active_company ? active_company.nom : 'la société active' }}</strong></p>
        <div>
            <a href="{{ path('commercial_client_index') }}" class="clientsphere-btn clientsphere-btn-secondary"><i class="ti ti-x"></i> Annuler</a>
            <button type="submit" form="client-create-form" class="clientsphere-btn clientsphere-btn-primary"><i class="ti ti-circle-plus"></i> Créer le client</button>
        </div>
    </div>
</div>
{% endblock %}