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

{% set labelType = (entreprise.typeCompte == 'ENTREPRISE') ? 'Entreprise / Agence' : 'Bailleur' %}

{% block title %}Profil {{ labelType }} | {{ entreprise.raisonSociale }}{% 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>
        /* --- STYLES TÉLÉPHONE & TOM SELECT --- */
        .ts-wrapper.form-select { padding: 0 !important; border: none !important; }
        .ts-control { 
            min-height: 45px !important; /* Adapté à la taille du formulaire entreprise */
            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; }

        .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; }
        .is-invalid-custom { border: 1px solid #dc3545 !important; border-radius: 4px !important; }
        
        /* --- STYLES GÉNÉRAUX --- */
        .border-dashed { border-style: dashed !important; border-width: 2px !important; border-color: #dee2e6 !important; }
        #logo-preview-container { transition: all 0.3s ease; }
        #logo-preview-container:hover { border-color: #198754 !important; background-color: #fcfcfc !important; }
        .bg-soft-success { background-color: rgba(25, 135, 84, 0.08); }
        .bg-soft-primary { background-color: rgba(13, 110, 253, 0.08); }
        .x-small { font-size: 0.75rem; }
    </style>
{% endblock %}

{% block body %}
<div class="container-fluid py-4 px-md-4">

    {# --- EN-TÊTE AVEC FIL D'ARIANE --- #}
    <div class="mb-4">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-2">
                <li class="breadcrumb-item small"><a href="{{ path('app_entreprise_dashboard') }}" class="text-decoration-none text-muted">Dashboard</a></li>
                <li class="breadcrumb-item small active text-primary fw-bold" aria-current="page">Paramètres {{ labelType }}</li>
            </ol>
        </nav>
        <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
            <div>
                <h3 class="page-header page-header-top mb-1">
                    <i class="fas {{ (entreprise.typeCompte == 'ENTREPRISE') ? 'fa-building' : 'fa-user-tie' }} text-success me-2"></i>
                    Profil {{ labelType }}
                </h3>
                <p class="text-muted small mb-0">Gérez l'identité visuelle et les coordonnées officielles de votre structure.</p>
            </div>
        </div>
    </div>

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

    {# FORMULAIRE PRINCIPAL #}
    {{ form_start(form, {'attr': {'id': 'entreprise-profile-form', 'novalidate': 'novalidate'}}) }}
    
    <div class="row g-4">
        {# --- COLONNE GAUCHE : FORMULAIRE DÉTAILLÉ --- #}
        <div class="col-12 col-lg-8">
            <div class="card card-detail shadow-sm mb-4">
                <div class="card-header bg-white py-3 border-bottom">
                    <h6 class="fw-bold mb-0 text-uppercase small text-muted">Informations Officielles</h6>
                </div>
                <div class="card-body p-4">
                    <div class="row g-4">
                        {# Raison Sociale #}
                        <div class="col-12">
                            <label class="form-label fw-bold small text-muted text-uppercase">Raison Sociale / Dénomination</label>
                            {{ form_widget(form.raisonSociale, {'attr': {'class': 'form-control form-control-lg fw-bold border-2'}}) }}
                            {{ form_errors(form.raisonSociale) }}
                        </div>

                        {# Email #}
                        <div class="col-md-6">
                            <label class="form-label fw-bold small text-muted text-uppercase">Email de contact</label>
                            <div class="input-group">
                                <span class="input-group-text bg-light text-muted"><i class="fas fa-envelope"></i></span>
                                {{ form_widget(form.email, {'attr': {'class': 'form-control'}}) }}
                            </div>
                            {{ form_errors(form.email) }}
                        </div>

                        {# Devise #}
                        <div class="col-md-6">
                            <label class="form-label fw-bold small text-muted text-uppercase">Devise de gestion</label>
                            <div class="input-group">
                                <span class="input-group-text bg-light text-muted"><i class="fas fa-coins"></i></span>
                                {{ form_widget(form.devise, {'attr': {'class': 'form-select'}}) }}
                            </div>
                            {{ form_errors(form.devise) }}
                        </div>

                        {# --- BLOC TÉLÉPHONE (Gestion Unifiée) --- #}
                        <div class="col-12">
                            <label class="form-label fw-bold small text-muted text-uppercase">Numéro de téléphone officiel</label>
                            <div class="input-group">
                                {{ form_widget(form.indicatif_choix, {
                                    '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>

                        {# Situation Géo #}
                        <div class="col-12">
                            <label class="form-label fw-bold small text-muted text-uppercase">Siège social / Adresse complète</label>
                            <div class="input-group">
                                <span class="input-group-text bg-light text-muted"><i class="fas fa-map-marker-alt"></i></span>
                                {{ form_widget(form.situationGeographique, {'attr': {'class': 'form-control'}}) }}
                            </div>
                            {{ form_errors(form.situationGeographique) }}
                        </div>
                    </div>
                </div>
                <div class="card-footer bg-light-subtle py-3 text-end">
                    <button type="submit" class="btn btn-success px-4 shadow-sm fw-bold" id="submit-btn">
                        <i class="fas fa-save me-2"></i> Mettre à jour le profil
                    </button>
                </div>
            </div>
        </div>

        {# --- COLONNE DROITE : LOGO & SOLDE --- #}
        <div class="col-12 col-lg-4">
            {# Bloc Logo #}
            <div class="card card-detail shadow-sm mb-4">
                <div class="card-header bg-white py-3 border-bottom d-flex justify-content-between align-items-center">
                    <h6 class="fw-bold mb-0 text-uppercase small text-muted">Identité Visuelle</h6>
                    {% if entreprise.logo %}
                        <button type="button" class="btn btn-xs btn-outline-danger" 
                                onclick="if(confirm('Supprimer définitivement ce logo ?')) document.getElementById('delete-logo-form').submit();">
                            <i class="fas fa-trash-alt"></i>
                        </button>
                    {% endif %}
                </div>
                <div class="card-body p-4 text-center">
                    <div id="logo-preview-container" class="mx-auto mb-4 rounded border border-dashed d-flex align-items-center justify-content-center bg-white shadow-sm" style="width: 150px; height: 150px; overflow: hidden; border-width: 2px !important;">
                        {% if entreprise.logo %}
                            <img src="{{ asset('uploads/logos/' ~ entreprise.logo) }}" id="logo-preview" class="img-fluid p-2" style="max-height: 100%; object-fit: contain;">
                        {% else %}
                            <i class="fas fa-camera fa-3x text-light-emphasis" id="logo-placeholder"></i>
                            <img src="" id="logo-preview" class="img-fluid d-none p-2" style="max-height: 100%; object-fit: contain;">
                        {% endif %}
                    </div>
                    
                    <div class="text-start">
                        <label class="form-label small fw-bold text-muted">Changer le logo</label>
                        {{ form_widget(form.logoFile, {'attr': {'class': 'form-control form-control-sm', 'onchange': 'previewImage(this)'}}) }}
                        <div class="form-text x-small text-muted mt-2">
                            Il apparaîtra sur vos reçus, factures et baux.
                        </div>
                    </div>
                </div>
            </div>

            {# Statut Financier #}
            <div class="card border-0 shadow-sm bg-soft-success mb-4" style="border-radius: 10px;">
                <div class="card-body p-4">
                    <h6 class="text-success fw-bold mb-3 small text-uppercase">
                        <i class="fas fa-wallet me-2"></i> État du compte
                    </h6>
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span class="text-muted small">Solde disponible :</span>
                        <span class="fs-5 fw-bold text-dark">
                            {{ entreprise.soldeCredit|number_format(0, '.', ' ') }} 
                            <small class="text-muted">{{ entreprise.devise ? entreprise.devise.codeIso : '---' }}</small>
                        </span>
                    </div>
                    <div class="d-flex justify-content-between align-items-center">
                        <span class="text-muted small">Type d'abonnement :</span>
                        <span class="badge bg-success shadow-sm">{{ entreprise.typeCompte }}</span>
                    </div>
                </div>
            </div>

            {# Aide #}
            <div class="card border-0 shadow-sm bg-soft-primary" style="border-radius: 10px;">
                <div class="card-body p-4">
                    <h6 class="text-primary fw-bold mb-2 small text-uppercase">Besoin d'aide ?</h6>
                    <p class="text-muted x-small mb-0">
                        Pour changer votre type de compte ou demander une augmentation de quota, veuillez contacter notre support technique.
                    </p>
                </div>
            </div>
        </div>
    </div>
    
    {{ form_rest(form) }}
    {{ form_end(form) }}
</div>

{# Formulaire caché pour la suppression du logo #}
{% if entreprise.logo %}
    <form id="delete-logo-form" method="post" action="{{ path('app_entreprise_logo_delete') }}" style="display:none;">
        <input type="hidden" name="_token" value="{{ csrf_token('delete_logo' ~ entreprise.id) }}">
    </form>
{% endif %}
{% 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>
    function previewImage(input) {
        if (input.files && input.files[0]) {
            const reader = new FileReader();
            reader.onload = function(e) {
                const preview = document.getElementById('logo-preview');
                const placeholder = document.getElementById('logo-placeholder');
                preview.src = e.target.result;
                preview.classList.remove('d-none');
                if (placeholder) placeholder.classList.add('d-none');
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

    document.addEventListener("DOMContentLoaded", function() {
        // 1. Initialisation TomSelect
        const countrySelect = new TomSelect(".tom-select-country", {
            create: false,
            maxOptions: 500,
            allowEmptyOption: true,
            placeholder: 'Pays',
            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('submit-btn');

        // 2. 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');
                const tsControl = document.querySelector('.ts-control');
                if(tsControl) tsControl.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');
                const tsControl = document.querySelector('.ts-control');
                if(tsControl) tsControl.classList.remove('is-invalid-custom');
                errorMsg.classList.add('d-none');
                btnSave.disabled = false;
                btnSave.classList.remove('opacity-50');
            }

            return isPhoneValid;
        }

        // 3. Action bouton "Effacer"
        document.getElementById('btn-clear-phone').addEventListener('click', function() {
            countrySelect.clear();
            countrySelect.refreshOptions(false); 
            inputPhone.value = '';
            validateForm();
        });

        // 4. Restriction et Écouteurs
        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();

        // 5. Animation Submit
        document.getElementById('entreprise-profile-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>Mise à jour...';
        });
    });
    </script>
{% endblock %}