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

{% block commercial_title %}Modifier {{ client.nom }}{% endblock %}

{% block commercial_content %}
{% set sirene_updated = sirene_updated|default(false) %}
<div class="clientsphere-page clientsphere-new"
     data-controller="commercial-client-form"
     data-commercial-client-form-contact-enabled-value="false">
    <header class="clientsphere-new-header">
        <div class="clientsphere-title">
            <a class="clientsphere-new-back" href="{{ path('commercial_client_show', {id: client.id}) }}" aria-label="Retour à la fiche client"><i class="ti ti-arrow-left"></i></a>
            <span class="clientsphere-title-icon"><i class="ti ti-building-pencil"></i></span>
            <div>
                <h1>Modifier le client</h1>
                <p>Mettez à jour les informations de {{ client.nom }}.</p>
            </div>
        </div>
        <span class="clientsphere-new-draft"><i></i> Modifications en cours</span>
    </header>

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

    <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 un SIRET pour actualiser les champs du formulaire avant l’enregistrement.</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_client_sirene_prefill', {id: client.id}) }}" class="clientsphere-sirene-search">
                <input type="hidden" name="_token" value="{{ csrf_token('commercial_client_sirene_prefill_' ~ client.id) }}">
                <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_updated %}<i class="ti ti-circle-check clientsphere-field-check"></i>{% endif %}
                        </div>
                        <small><i class="ti ti-shield-check"></i> La recherche modifie uniquement le formulaire. Cliquez ensuite sur Enregistrer.</small>
                    </div>
                    <button class="clientsphere-btn clientsphere-btn-primary clientsphere-sirene-submit" type="submit"><i class="ti ti-refresh"></i> Mettre à jour avec SIRENE</button>
                </div>
                {% if sirene_updated %}
                    <div class="clientsphere-sirene-success">
                        <span><i class="ti ti-check"></i></span>
                        <div><strong>Données SIRENE récupérées.</strong><p>Les champs ci-dessous ont été actualisés. Vérifiez-les avant d’enregistrer.</p></div>
                        <em>SIRENE <i class="ti ti-check"></i></em>
                    </div>
                {% endif %}
            </form>
        </div>
    </section>

    <div class="clientsphere-new-layout">
        <div class="clientsphere-new-main">
            <form id="client-edit-form"
                  method="post"
                  action="{{ path('commercial_client_edit', {id: client.id}) }}"
                  enctype="multipart/form-data"
                  class="clientsphere-new-form">
                <input type="hidden" name="_token" value="{{ csrf_token('commercial_client_edit_' ~ client.id) }}">
                <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>Informations légales et coordonnées de l’entreprise.</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>

                        <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 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 %}
                            </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" 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>
                            </div>
                            <div class="clientsphere-new-field">
                                <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><a href="{{ path('commercial_client_category_index') }}" target="_blank"><i class="ti ti-tags"></i> Gérer les catégories</a></small>
                            </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" 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 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 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 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 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 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" 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>Conservez le logo actuel ou sélectionnez une nouvelle image.</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">{% if data.logo %}<img src="{{ asset(data.logo) }}" alt="Logo {{ data.nom }}">{% else %}<i class="ti ti-building"></i>{% endif %}</span>
                            <span><strong>{{ data.logo ? 'Remplacer le logo actuel' : '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-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é client</h2><span class="is-verified"><i class="ti ti-circle-check-filled"></i> Enregistré</span></div>
                <div class="clientsphere-summary-body"><dl>
                    <div><dt>Raison sociale</dt><dd data-commercial-client-form-target="summaryCompany">{{ data.nom ?: '—' }}</dd></div>
                    <div><dt>Forme juridique</dt><dd data-commercial-client-form-target="summaryLegalForm">{{ data.formeJuridiqueLabel ?: '—' }}</dd></div>
                    <div class="is-two"><span><dt>SIRET</dt><dd class="font-monospace" data-commercial-client-form-target="summarySiret">{{ data.siret ?: '—' }}</dd></span><span><dt>SIREN</dt><dd class="font-monospace" data-commercial-client-form-target="summarySiren">{{ data.siren ?: '—' }}</dd></span></div>
                    <div><dt>Code NAF</dt><dd class="is-brand font-monospace" data-commercial-client-form-target="summaryNaf">{{ data.codeNaf ?: '—' }}</dd></div>
                    <div class="is-separated"><dt>Adresse complète</dt><dd data-commercial-client-form-target="summaryAddress">{{ data.adresse ?: '—' }}{% if data.codePostal or data.ville %}<br>{{ data.codePostal }} {{ data.ville }}{% endif %}{% if data.departement %}<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 autre client possède peut-être le même SIREN ou le même nom.</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>Vous pouvez actualiser les données légales depuis SIRENE directement sur la fiche du client.</p></div></div>
        </aside>
    </div>

    <div class="clientsphere-new-actions">
        <p><i class="ti ti-info-circle-filled"></i> Client rattaché à <strong>{{ company ? company.nom : 'la société active' }}</strong></p>
        <div><a href="{{ path('commercial_client_show', {id: client.id}) }}" class="clientsphere-btn clientsphere-btn-secondary"><i class="ti ti-x"></i> Annuler</a><button type="submit" form="client-edit-form" class="clientsphere-btn clientsphere-btn-primary"><i class="ti ti-device-floppy"></i> Enregistrer</button></div>
    </div>
</div>
{% endblock %}