{% extends '@App/app.html.twig' %}

{% block title %}Mon profil{% endblock %}

{% block page_header %}{% endblock %}

{% block content %}
    {% set tab = active_tab|default('profile') %}
    {% set avatar_image = account_user.image|default('') %}
    {% set avatar_src = avatar_image ? (avatar_image starts with 'http://' or avatar_image starts with 'https://' or avatar_image starts with '/' ? avatar_image : asset(avatar_image)) : asset('vendor/matdash/images/profile/user-1.jpg') %}
    {% set full_name = (account_user.prenom|default('') ~ ' ' ~ account_user.nom|default(''))|trim %}

    <style>
        .account-page{background:#f4f8fc;border-radius:24px;padding:24px}
        .account-hero{background:#fff;border-radius:18px 18px 0 0;padding:28px;text-align:center}
        .account-tabs{background:#c9d8df;border-radius:0 0 14px 14px;display:flex;gap:0;overflow:hidden}
        .account-tab{border:0;border-right:1px solid rgba(6,72,111,.14);color:#607483;display:flex;align-items:center;gap:10px;font-size:1.05rem;padding:22px 28px;text-decoration:none}
        .account-tab.active{background:rgba(255,255,255,.18);box-shadow:inset 0 -3px 0 #06486f;color:#06486f}
        .account-card{background:#fff;border:1px solid #dfe8ef;border-radius:14px;box-shadow:0 2px 7px rgba(6,72,111,.04);padding:32px}
        .account-avatar{width:190px;height:190px;border-radius:50%;object-fit:cover;background:#eff5f8}
        .account-muted{color:#9aa8b5}
        .account-form-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:18px;align-items:center}
        .account-pref-row{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:24px;align-items:center;padding:18px 0}
        .account-pref-icon{width:56px;height:56px;border-radius:10px;background:#f0f4f8;display:flex;align-items:center;justify-content:center;font-size:1.65rem;color:#111827}
        .account-switches{display:flex;align-items:center;gap:42px;white-space:nowrap}
        .account-password-help{color:#5e7284;font-size:.92rem;line-height:1.45}
        .account-password-toggle{width:72px}
        .account-password-toggle iconify-icon{font-size:1.55rem}
        .account-signature-preview{align-items:center;background:#f7fafc;border:1px dashed #c8d7e3;border-radius:12px;display:flex;justify-content:center;min-height:160px;padding:18px}
        .account-signature-preview img{max-height:130px;max-width:100%;object-fit:contain}
        .account-signature-canvas-box{background:#fff;border:1px solid #d9e3ec;border-radius:12px;height:260px;overflow:hidden}
        .account-signature-canvas{display:block;height:100%;touch-action:none;width:100%}
        @media (max-width: 991.98px){
            .account-page{padding:16px}
            .account-tabs{display:block}
            .account-tab{width:100%;border-right:0}
            .account-form-grid{grid-template-columns:1fr}
            .account-pref-row{grid-template-columns:56px minmax(0,1fr)}
            .account-switches{grid-column:1 / -1;justify-content:flex-start;gap:24px;flex-wrap:wrap}
        }
    </style>

    <section class="account-page">
        <header class="account-hero">
            <h1 class="h4 mb-1">{{ full_name ?: account_user.email }}</h1>
            <div class="account-muted fs-5">{{ account_user.fonction|default('Utilisateur') }}</div>
        </header>

        <nav class="account-tabs mb-4" aria-label="Navigation profil">
            <a class="account-tab {{ tab == 'profile' ? 'active' : '' }}" href="{{ path('app_account', {tab: 'profile'}) }}">
                <iconify-icon icon="solar:user-circle-line-duotone"></iconify-icon>
                <span>Profil</span>
            </a>
            <a class="account-tab {{ tab == 'preferences' ? 'active' : '' }}" href="{{ path('app_account', {tab: 'preferences'}) }}">
                <iconify-icon icon="solar:bell-bing-line-duotone"></iconify-icon>
                <span>Préférences & Notifications</span>
            </a>
        </nav>

        {% if tab == 'preferences' %}
            <form class="account-card" method="post" action="{{ path('app_account_preferences_update') }}" data-controller="autosubmit">
                <input type="hidden" name="_token" value="{{ csrf_token('account_preferences') }}">
                <h2 class="h4 mb-2">Préférences de notification</h2>
                <p class="account-muted fs-5 mb-4">Sélectionnez les notifications que vous souhaitez recevoir sur l'application et/ou par email.</p>

                <div class="account-pref-row">
                    <div class="account-pref-icon"><iconify-icon icon="solar:calendar-line-duotone"></iconify-icon></div>
                    <div>
                        <h3 class="h5 mb-2">Événement</h3>
                        <div class="account-muted fs-5">Être averti lorsqu'un événement est ajouté, modifié ou annulé</div>
                    </div>
                    <div class="account-switches">
                        <label class="form-check form-switch m-0 d-flex align-items-center gap-2">
                            <input class="form-check-input" type="checkbox" name="event_email_enabled" value="1" data-action="change->autosubmit#submit" {{ preferences.eventEmailEnabled ? 'checked' : '' }}>
                            <span class="account-muted fs-5">Par email</span>
                        </label>
                        <label class="form-check form-switch m-0 d-flex align-items-center gap-2">
                            <input class="form-check-input" type="checkbox" name="event_notification_enabled" value="1" data-action="change->autosubmit#submit" {{ preferences.eventNotificationEnabled ? 'checked' : '' }}>
                            <span class="account-muted fs-5">Par notification</span>
                        </label>
                    </div>
                </div>

                <div class="account-pref-row">
                    <div class="account-pref-icon"><iconify-icon icon="solar:gallery-line-duotone"></iconify-icon></div>
                    <div>
                        <h3 class="h5 mb-2">Galerie photo</h3>
                        <div class="account-muted fs-5">Être averti lorsqu'une nouvelle galerie photo est publiée</div>
                    </div>
                    <div class="account-switches">
                        <label class="form-check form-switch m-0 d-flex align-items-center gap-2">
                            <input class="form-check-input" type="checkbox" name="gallery_email_enabled" value="1" data-action="change->autosubmit#submit" {{ preferences.galleryEmailEnabled ? 'checked' : '' }}>
                            <span class="account-muted fs-5">Par email</span>
                        </label>
                        <label class="form-check form-switch m-0 d-flex align-items-center gap-2">
                            <input class="form-check-input" type="checkbox" name="gallery_notification_enabled" value="1" data-action="change->autosubmit#submit" {{ preferences.galleryNotificationEnabled ? 'checked' : '' }}>
                            <span class="account-muted fs-5">Par notification</span>
                        </label>
                    </div>
                </div>

                <h2 class="h4 mt-4 mb-3">Préférences de messagerie</h2>

                <div class="account-pref-row">
                    <div class="account-pref-icon"><iconify-icon icon="solar:chat-round-line-duotone"></iconify-icon></div>
                    <div>
                        <h3 class="h5 mb-2">Visibilité</h3>
                        <div class="account-muted fs-5">Être visible dans la liste des destinataires lors de la création d'une nouvelle conversation</div>
                    </div>
                    <div class="account-switches">
                        <label class="form-check form-switch m-0 d-flex align-items-center gap-2">
                            <input class="form-check-input" type="checkbox" name="messaging_visible" value="1" data-action="change->autosubmit#submit" {{ preferences.messagingVisible ? 'checked' : '' }}>
                            <span class="account-muted fs-5">Visible</span>
                        </label>
                    </div>
                </div>

                <div class="account-pref-row">
                    <div class="account-pref-icon"><iconify-icon icon="solar:chat-round-dots-line-duotone"></iconify-icon></div>
                    <div>
                        <h3 class="h5 mb-2">Email</h3>
                        <div class="account-muted fs-5">Être notifié par email et recevoir une copie des messages par email</div>
                    </div>
                    <div class="account-switches">
                        <label class="form-check form-switch m-0 d-flex align-items-center gap-2">
                            <input class="form-check-input" type="checkbox" name="messaging_email_enabled" value="1" data-action="change->autosubmit#submit" {{ preferences.messagingEmailEnabled ? 'checked' : '' }}>
                            <span class="account-muted fs-5">Email</span>
                        </label>
                    </div>
                </div>
            </form>
        {% else %}
            <div class="row g-4 mb-4">
                <div class="col-12 col-xl-6">
                    <form class="account-card h-100" method="post" action="{{ path('app_account_avatar_update') }}" enctype="multipart/form-data" data-turbo="false">
                        <input type="hidden" name="_token" value="{{ csrf_token('account_avatar') }}">
                        <h2 class="h4 mb-2">Image de profil</h2>
                        <p class="account-muted fs-5 mb-5">Changez votre photo de profil à partir d'ici</p>
                        <div class="text-center">
                            <img class="account-avatar mb-4" src="{{ avatar_src }}" alt="Image de profil">
                            <div>
                                <label class="btn btn-primary px-4 mb-2">
                                    Télécharger
                                    <input class="d-none" type="file" name="avatar" accept=".jpg,.jpeg,.png,.gif" onchange="this.form.requestSubmit()">
                                </label>
                            </div>
                            <div class="account-muted fs-5">Autorisé JPG, GIF ou PNG. Taille Maxi 3Mo</div>
                        </div>
                    </form>
                </div>

                <div class="col-12 col-xl-6">
                    <form class="account-card h-100" method="post" action="{{ path('app_account_password_update') }}" data-turbo="false">
                        <input type="hidden" name="_token" value="{{ csrf_token('account_password') }}">
                        <h2 class="h4 mb-2">Mot de passe</h2>
                        <p class="account-muted fs-5 mb-4">Pour changer votre mot de passe, veuillez confirmer ici</p>

                        <div class="account-form-grid mb-4">
                            <label class="form-label text-xl-end fw-semibold mb-0">Email</label>
                            <input class="form-control form-control-lg bg-light" type="email" value="{{ account_user.email }}" disabled>
                        </div>

                        <hr class="my-4">

                        <div class="account-form-grid mb-3" data-controller="password-visibility">
                            <label class="form-label text-xl-end fw-semibold mb-0" for="account_password">Mot de passe</label>
                            <div>
                                <div class="input-group input-group-lg">
                                    <input id="account_password" class="form-control" type="password" name="password" autocomplete="new-password" required data-password-visibility-target="input">
                                    <button class="btn btn-light border account-password-toggle" type="button" data-action="password-visibility#toggle" aria-label="Afficher le mot de passe">
                                        <iconify-icon icon="solar:eye-line-duotone" data-password-visibility-target="icon"></iconify-icon>
                                    </button>
                                </div>
                                <div class="account-password-help mt-3">
                                    Minimum<br>
                                    - 8 caractères<br>
                                    - 1 minuscule et 1 majuscule<br>
                                    - 1 chiffre<br>
                                    - 1 caractère spécial parmi # % ! &amp; $
                                </div>
                            </div>
                        </div>

                        <hr class="my-4">

                        <div class="account-form-grid mb-4" data-controller="password-visibility">
                            <label class="form-label text-xl-end fw-semibold mb-0" for="account_password_confirmation">Confirmation du<br>mot de passe</label>
                            <div class="input-group input-group-lg">
                                <input id="account_password_confirmation" class="form-control" type="password" name="password_confirmation" autocomplete="new-password" required data-password-visibility-target="input">
                                <button class="btn btn-light border account-password-toggle" type="button" data-action="password-visibility#toggle" aria-label="Afficher la confirmation">
                                    <iconify-icon icon="solar:eye-line-duotone" data-password-visibility-target="icon"></iconify-icon>
                                </button>
                            </div>
                        </div>

                        <hr class="my-4">

                        <div class="text-end">
                            <button class="btn btn-primary px-4" type="submit">Enregistrer</button>
                        </div>
                    </form>
                </div>
            </div>

            <div class="account-card mb-4">
                <div class="d-flex flex-column flex-xl-row justify-content-between gap-4">
                    <div>
                        <h2 class="h4 mb-2">Signature</h2>
                        <p class="account-muted mb-4">Gérez votre signature personnelle utilisée pour les conventions.</p>
                        <div class="account-signature-preview mb-3">
                            {% if account_user.signaturePath %}
                                <img src="{{ path('app_account_signature_preview', {id: account_user.id}) }}?v={{ account_user.signatureUploadedAt ? account_user.signatureUploadedAt|date('U') : '1' }}" alt="Signature actuelle">
                            {% else %}
                                <span class="account-muted">Aucune signature enregistrée</span>
                            {% endif %}
                        </div>
                        {% if account_user.signatureUploadedAt %}
                            <div class="account-muted">Dernière mise à jour : {{ account_user.signatureUploadedAt|date('d/m/Y H:i') }}</div>
                        {% endif %}
                    </div>

                    <div class="d-flex flex-column gap-3" style="min-width:280px">
                        <form method="post" action="{{ path('app_account_signature_upload') }}" enctype="multipart/form-data" data-turbo="false">
                            <input type="hidden" name="_token" value="{{ csrf_token('account_signature') }}">
                            <label class="btn btn-primary w-100 mb-0">
                                Télécharger une signature
                                <input class="d-none" type="file" name="signature" accept="image/png" onchange="this.form.requestSubmit()">
                            </label>
                            <div class="account-muted mt-2 small">PNG uniquement, 2 Mo maximum.</div>
                        </form>

                        <button class="btn btn-outline-primary w-100" type="button" data-bs-toggle="modal" data-bs-target="#accountSignatureDrawModal">Dessiner ma signature</button>

                        {% if account_user.signaturePath %}
                            <form method="post" action="{{ path('app_account_signature_delete') }}" data-controller="confirm" data-confirm-message-value="Supprimer votre signature ?">
                                <input type="hidden" name="_token" value="{{ csrf_token('account_signature_delete') }}">
                                <button class="btn btn-outline-danger w-100" type="submit">Supprimer la signature</button>
                            </form>
                        {% endif %}

                        <form method="post" action="{{ path('app_account_signature_auto_toggle') }}" data-controller="autosubmit">
                            <input type="hidden" name="_token" value="{{ csrf_token('account_signature_auto') }}">
                            <label class="form-check form-switch d-flex align-items-center gap-2">
                                <input class="form-check-input" type="checkbox" name="signature_auto_enabled" value="1" data-action="change->autosubmit#submit" {{ account_user.signatureAutoEnabled ? 'checked' : '' }} {{ not account_user.signaturePath ? 'disabled' : '' }}>
                                <span>Autoriser l’utilisation automatique de ma signature dans les conventions</span>
                            </label>
                        </form>
                    </div>
                </div>
            </div>

            <div class="account-card mb-4">
                <div class="d-flex flex-column flex-xl-row justify-content-between gap-4">
                    <div>
                        <h2 class="h4 mb-2">Conditions Générales d'Utilisation</h2>
                        <p class="account-muted mb-4">Historique de votre acceptation des CGU.</p>

                        <div class="row g-3">
                            <div class="col-md-4">
                                <div class="bg-light rounded-2 p-3 h-100">
                                    <div class="account-muted small mb-1">Version acceptée</div>
                                    <div class="fw-semibold">{{ cgu_acceptance.version|default('Non acceptée') }}</div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="bg-light rounded-2 p-3 h-100">
                                    <div class="account-muted small mb-1">Date d'acceptation</div>
                                    <div class="fw-semibold">
                                        {% if cgu_acceptance.acceptedAt|default(null) %}
                                            {{ cgu_acceptance.acceptedAt|date('d/m/Y H:i') }}
                                        {% else %}
                                            -
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="bg-light rounded-2 p-3 h-100">
                                    <div class="account-muted small mb-1">Adresse IP</div>
                                    <div class="fw-semibold">{{ cgu_acceptance.ip|default('-') }}</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="d-flex flex-column gap-2 justify-content-start" style="min-width:240px">
                        <span class="badge bg-light-primary text-primary align-self-start">Version courante : {{ cgu_version }}</span>
                        {% if cgu_pdf_available %}
                            <a class="btn btn-outline-primary" href="{{ path('app_account_cgu_download') }}">
                                <i class="ti ti-download me-1"></i> Télécharger les CGU
                            </a>
                        {% else %}
                            <button class="btn btn-outline-secondary" type="button" disabled>PDF indisponible</button>
                        {% endif %}
                    </div>
                </div>
            </div>

            <form class="account-card" method="post" action="{{ path('app_account_profile_update') }}" data-turbo="false">
                <input type="hidden" name="_token" value="{{ csrf_token('account_profile') }}">
                <h2 class="h4 mb-2">Informations personnelles</h2>
                <p class="account-muted mb-5">Pour modifier vos informations personnelles, modifiez-les et enregistrez-les ici</p>

                <div class="account-form-grid mb-3">
                    <label class="form-label text-xl-end fw-semibold" for="account_prenom">Prénom</label>
                    <input id="account_prenom" class="form-control" name="prenom" value="{{ account_user.prenom }}" required>
                </div>
                <div class="account-form-grid mb-3">
                    <label class="form-label text-xl-end fw-semibold" for="account_nom">Nom</label>
                    <input id="account_nom" class="form-control" name="nom" value="{{ account_user.nom }}" required>
                </div>
                <div class="account-form-grid mb-4">
                    <label class="form-label text-xl-end fw-semibold" for="account_telephone">Téléphone</label>
                    <input id="account_telephone" class="form-control" name="telephone" value="{{ account_user.telephone|default('') }}">
                </div>

                <div class="bg-light p-4 rounded-2 mb-4">
                    <h3 class="h5 mb-4">Adresse</h3>
                    <div class="account-form-grid mb-3">
                        <label class="form-label text-xl-end fw-semibold" for="account_adresse">Adresse</label>
                        <input id="account_adresse" class="form-control" name="adresse" value="{{ account_user.adresse|default('') }}">
                    </div>
                    <div class="account-form-grid mb-3">
                        <label class="form-label text-xl-end fw-semibold" for="account_code_postal">Code postal</label>
                        <input id="account_code_postal" class="form-control" name="code_postal" inputmode="numeric" value="{{ account_user.codePostal|default('') }}">
                    </div>
                    <div class="account-form-grid mb-3">
                        <label class="form-label text-xl-end fw-semibold" for="account_ville">Ville</label>
                        <input id="account_ville" class="form-control" name="ville" value="{{ account_user.ville|default('') }}">
                    </div>
                    <div class="account-form-grid">
                        <label class="form-label text-xl-end fw-semibold" for="account_pays">Pays</label>
                        <select id="account_pays" class="form-select" name="pays">
                            {% set country = account_user.pays|default('France') %}
                            {% for option in ['France', 'Belgique', 'Suisse', 'Luxembourg', 'Allemagne', 'Espagne', 'Italie', 'Autre'] %}
                                <option value="{{ option }}" {{ country == option ? 'selected' : '' }}>{{ option }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>

                <div class="text-end">
                    <button class="btn btn-primary px-4" type="submit">Enregistrer</button>
                </div>
            </form>

            <div class="modal fade" id="accountSignatureDrawModal" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-lg modal-dialog-centered">
                    <form class="modal-content" method="post" action="{{ path('app_account_signature_draw') }}" data-controller="account-signature" data-action="signature-pad:changed->account-signature#signatureChanged submit->account-signature#beforeSubmit">
                        <input type="hidden" name="_token" value="{{ csrf_token('account_signature') }}">
                        <input type="hidden" name="signature_data" data-account-signature-target="input">
                        <div class="modal-header border-0">
                            <h5 class="modal-title">Dessiner ma signature</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
                        </div>
                        <div class="modal-body" data-controller="signature-pad" data-signature-pad-script-src-value="{{ asset('vendor/matdash/libs/signaturepad/signaturepad.js') }}">
                            <div class="account-signature-canvas-box">
                                <canvas class="account-signature-canvas" data-signature-pad-target="canvas"></canvas>
                            </div>
                            <button type="button" class="btn btn-outline-secondary btn-sm mt-3" data-action="signature-pad#clear">Effacer</button>
                        </div>
                        <div class="modal-footer border-0">
                            <button class="btn btn-primary" type="submit" data-account-signature-target="submit" disabled>Enregistrer</button>
                            <button class="btn btn-light" type="button" data-bs-dismiss="modal">Fermer</button>
                        </div>
                    </form>
                </div>
            </div>
        {% endif %}
    </section>
{% endblock %}