{# templates/setup/initial_config.html.twig #}
{% extends 'entreprise/entreprise_base.html.twig' %}

{% block title %}Configuration initiale{% 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>
        .ts-wrapper.form-select { padding: 0 !important; border: none !important; }
        .ts-control { 
            min-height: 38px !important; 
            border-radius: 4px 0 0 4px !important;
            background-color: #ffffff !important;
            display: flex !important;
            align-items: center !important;
        }
        .input-group > .ts-wrapper { flex: unset !important; width: 110px !important; }
        .btn-reset-phone {
            border: 1px solid #dee2e6;
            background-color: #f8f9fa;
            color: #6c757d;
        }
         .ts-dropdown { width: 280px !important; }
        .btn-reset-phone:hover { background-color: #fff1f0; color: #dc3545; border-color: #dc3545; }
        .is-invalid-custom { border: 1px solid #dc3545 !important; border-radius: 4px !important; }
        .x-small { font-size: 0.75rem; }
    </style>
{% endblock %}

{% block body %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-10">
            
            <div class="text-center mb-4">
                <h1 class="h2 fw-bold">Presque terminé !</h1>
                <p class="text-muted">Plus qu'une étape pour activer votre accès complet.</p>
            </div>

            <div class="progress mb-4" style="height: 25px; border-radius: 12px;">
                <div id="setup-progress" 
                     class="progress-bar progress-bar-striped progress-bar-animated bg-success" 
                     role="progressbar" 
                     style="width: 80%; transition: width 1s ease-in-out;" 
                     aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
                    80% complété
                </div>
            </div>

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

            <div class="card shadow-sm border-0">
                <div class="card-header bg-primary text-white py-3">
                    <h5 class="card-title mb-0 text-center">
                        <i class="fas fa-rocket me-2"></i> Configuration de votre espace
                    </h5>
                </div>
                
                <div class="card-body p-4 p-md-5">
                    {{ form_start(form, {'attr': {'id': 'first-update-form', 'novalidate': 'novalidate'}}) }}
                        
                        {# --- SECTION 1 : UTILISATEUR --- #}
                        <h5 class="card-title text-primary mb-3">
                            <i class="fas fa-user-circle me-2"></i> Vos informations personnelles
                        </h5>
                        
                        <div class="bg-light p-3 rounded mb-4 border">
                            <div class="row g-3">
                                <div class="col-md-2">{{ form_row(form.civilite) }}</div>
                                <div class="col-md-5">{{ form_row(form.nom) }}</div>
                                <div class="col-md-5">{{ form_row(form.prenom) }}</div>
                                
                                <div class="col-12">
                                    <label class="form-label fw-bold small text-muted text-uppercase">Mobile Personnel</label>
                                    <div class="input-group">
                                        {{ form_widget(form.indicatif_perso, {'attr': {'class': 'tom-select-country'}}) }}
                                        {{ form_widget(form.telephone_local, {'attr': {'class': 'form-control fw-bold', 'placeholder': 'Numéro mobile...'}}) }}
                                        <button class="btn btn-reset-phone btn-clear-phone" type="button" title="Effacer"><i class="fas fa-eraser"></i></button>
                                    </div>
                                    <div class="phone-error-msg text-danger x-small mt-1 d-none">Erreur de saisie</div>
                                </div>
                            </div>
                        </div>

                        {# --- SECTION 2 : ENTREPRISE --- #}
                        <h5 class="card-title text-primary mb-3 mt-4">
                            <i class="fas fa-building me-2"></i> 
                            {{ (form.entreprise.vars.data.typeCompte == 'PARTICULIER') ? 'Vos informations de bailleur' : "Informations sur l'entreprise / agence" }}
                        </h5>
                        
                        <div class="bg-light p-3 rounded mb-4 border">
                            <div class="row g-3">
                                <div class="col-12">
                                    {{ form_row(form.entreprise.raisonSociale) }}
                                </div>
                                <div class="col-md-6">
                                    {{ form_row(form.entreprise.email) }}
                                </div>
                                <div class="col-md-6">
                                    {{ form_row(form.entreprise.devise) }}
                                </div>

                                <div class="col-12">
                                    <label class="form-label fw-bold small text-muted text-uppercase">Téléphone Standard (Bureau)</label>
                                    <div class="input-group">
                                        {{ form_widget(form.entreprise.indicatif_choix, {'attr': {'class': 'tom-select-country'}}) }}
                                        {{ form_widget(form.entreprise.telephone_local, {'attr': {'class': 'form-control fw-bold', 'placeholder': 'Numéro bureau...'}}) }}
                                        <button class="btn btn-reset-phone btn-clear-phone" type="button" title="Effacer"><i class="fas fa-eraser"></i></button>
                                    </div>
                                    <div class="phone-error-msg text-danger x-small mt-1 d-none">Erreur de saisie</div>
                                </div>

                                <div class="col-12">
                                    {{ form_row(form.entreprise.situationGeographique) }}
                                </div>

                                <div class="col-12 mt-3">
                                    <label class="form-label fw-bold"><i class="fas fa-image me-2"></i>Logo ou Photo (Optionnel)</label>
                                    <div class="row align-items-center bg-white p-3 rounded border mx-0">
                                        <div class="col-auto">
                                            <div id="logo-preview-container" class="bg-light rounded d-flex align-items-center justify-content-center border" style="width: 80px; height: 80px; overflow: hidden;">
                                                {# Gestion de l'affichage si le logo existe déjà #}
                                                {% if form.entreprise.vars.data and form.entreprise.vars.data.logo %}
                                                    <img src="{{ asset('uploads/logos/' ~ form.entreprise.vars.data.logo) }}" class="img-fluid" id="logo-preview">
                                                {% else %}
                                                    <i class="fas fa-camera fa-2x text-muted" id="logo-icon"></i>
                                                    <img src="" class="img-fluid d-none" id="logo-preview">
                                                {% endif %}
                                            </div>
                                        </div>
                                        <div class="col">
                                            {# ATTENTION : On utilise 'logo' ici car c'est le nom dans votre formulaire #}
                                            {{ form_widget(form.entreprise.logo, { 'attr': {'onchange': 'previewImage(this)'} }) }}
                                            {{ form_errors(form.entreprise.logo) }}
                                            <div class="form-text x-small">Format JPG/PNG, Max 2Mo.</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="d-grid gap-2 mt-5">
                            <button type="submit" class="btn btn-success btn-lg shadow-sm py-3 fw-bold" id="submit-btn">
                                <i class="fas fa-check-circle me-2"></i> Finaliser ma configuration
                            </button>
                        </div>

                    {{ form_end(form) }}
                </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() {
        const form = document.getElementById('first-update-form');
        const submitBtn = document.getElementById('submit-btn');

        // --- 1. INITIALISATION TOMSELECT ---
        document.querySelectorAll('.tom-select-country').forEach(el => {
            const ts = new TomSelect(el, {
                create: false,
                placeholder: 'Pays',
                allowEmptyOption: true,
                render: {
                    item: (data, escape) => {
                        if (data.value === '') return '<div class="text-muted">Pays</div>';
                        const match = data.text.match(/.*(\+[\d]+)/);
                        const emoji = data.text.split(' ')[0];
                        return `<div>${emoji} ${match ? match[1] : ''}</div>`;
                    }
                }
            });

            const container = el.closest('.col-12') || el.closest('.col-md-5').parentElement;
            const localInput = container.querySelector('input[type="tel"]');
            const clearBtn = container.querySelector('.btn-clear-phone');

            if(clearBtn) {
                clearBtn.addEventListener('click', () => {
                    ts.clear();
                    localInput.value = '';
                    validatePhoneField(container);
                    checkGlobalValidity();
                });
            }

            ts.on('change', () => {
                validatePhoneField(container);
                checkGlobalValidity();
            });
            
            if(localInput) {
                localInput.addEventListener('input', () => {
                    validatePhoneField(container);
                    checkGlobalValidity();
                });
            }
        });

        // --- 2. VALIDATION TÉLÉPHONE ---
        function validatePhoneField(container) {
            const tsElement = container.querySelector('.tom-select-country');
            const phoneInput = container.querySelector('input[type="tel"]');
            if (!tsElement || !phoneInput) return true;

            const indicatif = tsElement.tomselect.getValue();
            const phone = phoneInput.value.trim();
            const errorMsg = container.querySelector('.phone-error-msg');
            const tsControl = container.querySelector('.ts-control');
            
            let isValid = true;
            let text = "";

            // Logique : soit les deux sont vides, soit les deux sont remplis correctement
            if ((indicatif && !phone) || (!indicatif && phone)) {
                isValid = false;
                text = "L'indicateur et le numéro sont requis ensemble.";
            } else if (phone && !/^\d+$/.test(phone.replace(/\s+/g, ''))) {
                isValid = false;
                text = "Chiffres uniquement.";
            }

            if (!isValid) {
                tsControl?.classList.add('is-invalid-custom');
                phoneInput.classList.add('is-invalid');
                if(errorMsg) {
                    errorMsg.innerHTML = `<i class="fas fa-exclamation-triangle"></i> ${text}`;
                    errorMsg.classList.remove('d-none');
                }
            } else {
                tsControl?.classList.remove('is-invalid-custom');
                phoneInput.classList.remove('is-invalid');
                if(errorMsg) errorMsg.classList.add('d-none');
            }
            return isValid;
        }

        // --- 3. VALIDATION GLOBALE ET BOUTON ---
        function checkGlobalValidity() {
            // A. Vérifie la validité HTML5 (champs required, email, etc.)
            const isHtmlValid = form.checkValidity();

            // B. Vérifie vos validations personnalisées (téléphones)
            let arePhonesValid = true;
            document.querySelectorAll('.tom-select-country').forEach(el => {
                const container = el.closest('.col-12') || el.closest('.col-md-5').parentElement;
                if (!validatePhoneField(container)) arePhonesValid = false;
            });

            // Active ou désactive le bouton
            submitBtn.disabled = !(isHtmlValid && arePhonesValid);
        }

        // Écouter tous les changements dans le formulaire
        form.addEventListener('input', checkGlobalValidity);
        form.addEventListener('change', checkGlobalValidity);

        // Lancer une vérification initiale au chargement
        checkGlobalValidity();

        // --- 4. GESTION DU LOGO ---
        window.previewImage = function(input) {
            const file = input.files[0];
            const preview = document.getElementById('logo-preview');
            const icon = document.getElementById('logo-icon');
            if (file) {
                const reader = new FileReader();
                reader.onload = e => {
                    preview.src = e.target.result;
                    preview.classList.remove('d-none');
                    if(icon) icon.classList.add('d-none');
                    checkGlobalValidity();
                }
                reader.readAsDataURL(file);
            }
        };

        // --- 5. SOUMISSION FINALE ---
        form.addEventListener('submit', function(e) {
            if (submitBtn.disabled) {
                e.preventDefault();
                return;
            }
            
            const progress = document.getElementById('setup-progress');
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm"></span> Traitement...';
            progress.style.width = '100%';
            progress.innerHTML = 'Enregistrement...';
        });
    });
    </script>
{% endblock %}