{# templates/entreprise/profil/user_profile.html.twig #}
{% extends 'entreprise/entreprise_base.html.twig' %}

{% block title %}Mon Profil | {{ app.user.prenom }} {{ app.user.nom }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.bootstrap5.min.css" rel="stylesheet">
    <style>
        .bg-soft-success { background-color: rgba(13, 110, 253, 0.1); }
        .bg-soft-warning { background-color: rgba(255, 193, 7, 0.05); }
        .bg-soft-info { background-color: rgba(13, 202, 240, 0.08); }
        .x-small { font-size: 0.75rem; }
        
        .avatar-container { position: absolute; bottom: -50px; left: 0; right: 0; }
        .card-detail { border-radius: 12px; }

        /* --- AJUSTEMENTS TÉLÉPHONE & TOM SELECT --- */
        .ts-wrapper.form-select { padding: 0 !important; border: none !important; }
        .ts-control { 
            min-height: 38px !important; 
            border-radius: 0 !important;
            background-color: #f8f9fa !important;
            display: flex !important;
            align-items: center !important;
        }
        .input-group > .ts-wrapper { flex: unset !important; width: 110px !important; }
        .ts-dropdown { width: 280px !important; }

        /* Style pour le bouton reset */
        .btn-reset-phone {
            border: 1px solid #dee2e6;
            background-color: #f8f9fa;
            color: #6c757d;
            transition: all 0.2s;
        }
        .btn-reset-phone:hover { background-color: #fff1f0; color: #dc3545; border-color: #dc3545; }
        
        /* Validation visuelle */
        .is-invalid-custom { border: 1px solid #dc3545 !important; border-radius: 4px !important; }
    </style>
{% endblock %}

{% block body %}
<div class="container-fluid py-4 px-md-4">
    
    <div class="d-flex justify-content-between align-items-center mb-5">
        <div>
            <h3 class="page-header page-header-top mb-1">
                <i class="fas fa-user-circle text-success me-2"></i>Mon Profil
            </h3>
            <p class="text-muted mb-0 small fw-semibold">Paramètres du compte utilisateur</p>
        </div>
        <div class="d-none d-md-block text-end">
            <span class="badge bg-soft-success text-success rounded-pill px-3 py-2">
                <i class="fas fa-user-shield me-1"></i> Administrateur
            </span>
        </div>
    </div>

    {% include 'flash_messages.html.twig' %}

    <div class="row g-4">
        {# --- COLONNE PRINCIPALE (FORMULAIRE) --- #}
        <div class="col-lg-8">
            <div class="card card-detail shadow-sm border-0 mb-4">
                <div class="card-header bg-white py-3 border-bottom">
                    <h6 class="fw-bold mb-0 text-muted small text-uppercase">
                        <i class="fas fa-id-card me-2 text-success"></i>Informations Personnelles
                    </h6>
                </div>
                <div class="card-body p-4">
                    {{ form_start(form, {'attr': {'id': 'profile-update-form', 'novalidate': 'novalidate'}}) }}
                        
                        <div class="row g-3">
                            <div class="col-md-3">
                                <label class="form-label fw-bold small text-muted text-uppercase">Civilité</label>
                                {{ form_widget(form.civilite) }}
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold small text-muted text-uppercase">Nom</label>
                                {{ form_widget(form.nom, {'attr': {'class': 'form-control fw-bold'}}) }}
                            </div>
                            <div class="col-md-5">
                                <label class="form-label fw-bold small text-muted text-uppercase">Prénom</label>
                                {{ form_widget(form.prenom, {'attr': {'class': 'form-control fw-bold'}}) }}
                            </div>

                            {# --- BLOC TÉLÉPHONE AVEC ACTION SUPPRIMER --- #}
                            <div class="col-12 mt-4">
                                <label class="form-label fw-bold small text-muted text-uppercase">Numéro de téléphone mobile</label>
                                <div class="input-group">
                                    {{ form_widget(form.indicatif_perso, {
                                        'attr': {'class': 'tom-select-country shadow-none', 'placeholder': 'Pays'}
                                    }) }}
                                    
                                    {{ form_widget(form.telephone_local, {
                                        'attr': {
                                            'class': 'form-control fw-bold shadow-none border-start-0',
                                            'placeholder': 'Numéro...',
                                            'style': 'border-top-left-radius: 0; border-bottom-left-radius: 0;'
                                        }
                                    }) }}

                                    <button class="btn btn-reset-phone" type="button" id="btn-clear-phone" title="Effacer le numéro">
                                        <i class="fas fa-eraser"></i>
                                    </button>
                                </div>
                                <div id="phone-error-msg" class="text-danger x-small mt-1 d-none">
                                    <i class="fas fa-exclamation-triangle me-1"></i> L'indicateur et le numéro doivent être saisis ensemble.
                                </div>
                            </div>
                        </div>

                        <hr class="my-5 opacity-10">

                        <h6 class="fw-bold mb-4 text-muted small text-uppercase">
                            <i class="fas fa-shield-alt me-2 text-success"></i>Accès & Sécurité
                        </h6>

                        <div class="row g-4">
                            <div class="col-12">
                                <label class="form-label fw-bold small text-muted text-uppercase">Adresse Email</label>
                                <div class="input-group shadow-none">
                                    <span class="input-group-text bg-light border-end-0 text-muted small"><i class="fas fa-at"></i></span>
                                    {{ form_widget(form.email, {'attr': {'class': 'form-control border-start-0 bg-light-subtle', 'readonly': 'readonly'}}) }}
                                </div>
                            </div>
                            <div class="col-12 mt-4">
                                <div class="bg-soft-warning p-4 rounded-3 border-start border-warning border-4">
                                    <label class="form-label fw-bold text-dark mb-1">Changer le mot de passe</label>
                                    <p class="text-muted x-small mb-3">Laissez vide pour conserver l'actuel.</p>
                                    <div class="input-group shadow-none">
                                        <span class="input-group-text bg-white border-end-0 text-muted"><i class="fas fa-key"></i></span>
                                        {{ form_widget(form.plainPassword, {
    'attr': {
        'class': 'form-control border-start-0',
        'autocomplete': 'new-password',
        'value': '' 
    }
}) }}
                                    </div>
                                    {{ form_errors(form.plainPassword) }}
                                </div>
                            </div>
                        </div>

                        <div class="mt-5 border-top pt-4 text-center">
                            <button class="btn btn-success btn-lg px-5 shadow fw-bold" type="submit" id="btn-save">
                                <i class="fas fa-save me-2"></i>Enregistrer
                            </button>
                        </div>
                    {{ form_end(form) }}
                </div>
            </div>
        </div>

        {# --- COLONNE LATÉRALE (RÉCAPITULATIF) --- #}
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm overflow-hidden mb-4">
                <div class="bg-success py-5 text-center position-relative">
                    <div class="avatar-container">
                        <div class="bg-white rounded-circle d-inline-flex align-items-center justify-content-center shadow-lg border border-3 border-success" style="width: 100px; height: 100px;">
                            <span class="h1 mb-0 text-success fw-bold">{{ app.user.prenom|first|upper }}{{ app.user.nom|first|upper }}</span>
                        </div>
                    </div>
                </div>
                <div class="card-body text-center pt-5 pb-4">
                    <h5 class="fw-bold mb-1">{{ app.user.prenom }} {{ app.user.nom }}</h5>
                    <p class="text-muted small mb-3">{{ app.user.email }}</p>
                    <hr class="w-25 mx-auto opacity-10">
                    <p class="x-small text-muted mb-0">
                        Compte actif depuis le <br>
                        <span class="fw-bold">{{ app.user.createdAt|date('d F Y') }}</span>
                    </p>
                </div>
                <div class="card-footer bg-light py-3 border-0">
                    <div class="row text-center g-0">
                        <div class="col border-end">
                            <div class="fw-bold text-dark small">Dernière MAJ</div>
                            <div class="x-small text-muted text-uppercase">Aujourd'hui</div>
                        </div>
                        <div class="col">
                            <div class="fw-bold text-dark small">Rôle</div>
                            <div class="x-small text-muted text-uppercase">Admin</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="card border-0 shadow-sm bg-soft-info p-4">
                <div class="d-flex align-items-start">
                    <i class="fas fa-lightbulb text-info me-3 mt-1"></i>
                    <div>
                        <h6 class="fw-bold text-info mb-1 small text-uppercase">Astuce Sécurité</h6>
                        <p class="x-small text-muted mb-0">Utilisez un mélange de lettres, chiffres et caractères spéciaux.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
    <script>
    document.addEventListener("DOMContentLoaded", function() {
        // 1. Initialisation TomSelect avec gestion explicite du placeholder
        const countrySelect = new TomSelect(".tom-select-country", {
            create: false,
            maxOptions: 500,
            allowEmptyOption: true,
            placeholder: 'Pays', // Force l'affichage du placeholder
            render: {
                item: function(data, escape) {
                    if (data.value === '') {
                        return '<div class="text-muted">Pays</div>';
                    }
                    const label = data.text;
                    const match = label.match(/.*(\+[\d]+)/);
                    const emoji = label.split(' ')[0];
                    const indicatif = match ? match[1] : '';
                    return '<div>' + emoji + ' ' + indicatif + '</div>';
                }
            }
        });

        const inputPhone = document.querySelector('input[name*="[telephone_local]"]');
        const errorMsg = document.getElementById('phone-error-msg');
        const btnSave = document.getElementById('btn-save');
        const inputPass = document.querySelector('input[name*="[plainPassword]"]');

        // 2. Sécurité : vider le pass au chargement
        if(inputPass) inputPass.value = '';

        /**
         * 3. Fonction de validation
         */
        function validateForm() {
            const indicatifValue = countrySelect.getValue();
            const phoneValue = inputPhone.value.trim();
            const cleanPhone = phoneValue.replace(/\s+/g, '');
            
            const hasIndicatif = indicatifValue !== "";
            const hasPhone = cleanPhone !== "";
            const onlyDigits = /^\d+$/.test(cleanPhone);
            const isLongEnough = cleanPhone.length >= 6;

            let errorText = "";
            let isPhoneValid = true;

            if ((hasIndicatif && !hasPhone) || (!hasIndicatif && hasPhone)) {
                errorText = "L'indicateur et le numéro doivent être saisis ensemble.";
                isPhoneValid = false;
            } else if (hasPhone && !onlyDigits) {
                errorText = "Le numéro ne doit contenir que des chiffres.";
                isPhoneValid = false;
            } else if (hasPhone && !isLongEnough) {
                errorText = "Le numéro doit comporter au moins 6 chiffres.";
                isPhoneValid = false;
            }

            // UI Feedback
            if (!isPhoneValid) {
                inputPhone.classList.add('is-invalid');
                document.querySelector('.ts-control').classList.add('is-invalid-custom');
                errorMsg.innerHTML = `<i class="fas fa-exclamation-triangle me-1"></i> ${errorText}`;
                errorMsg.classList.remove('d-none');
                btnSave.disabled = true;
                btnSave.classList.add('opacity-50');
            } else {
                inputPhone.classList.remove('is-invalid');
                document.querySelector('.ts-control').classList.remove('is-invalid-custom');
                errorMsg.classList.add('d-none');
                btnSave.disabled = false;
                btnSave.classList.remove('opacity-50');
            }

            return isPhoneValid;
        }

        // 4. Action bouton "Effacer"
        document.getElementById('btn-clear-phone').addEventListener('click', function() {
            countrySelect.clear();
            // Force le rafraîchissement visuel du placeholder
            countrySelect.refreshOptions(false); 
            inputPhone.value = '';
            validateForm();
        });

        // 5. Restriction saisie
        inputPhone.addEventListener('keypress', function(e) {
            if (!/[\d]/.test(String.fromCharCode(e.which))) {
                e.preventDefault();
            }
        });

        countrySelect.on('change', validateForm);
        inputPhone.addEventListener('input', validateForm);

        // Validation initiale
        validateForm();

        // 8. Animation Submit
        document.getElementById('profile-update-form').addEventListener('submit', function(e) {
            if (!validateForm()) {
                e.preventDefault();
                return false;
            }
            btnSave.disabled = true;
            btnSave.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Enregistrement...';
        });
    });
    </script>
{% endblock %}