@extends('layouts.app')

@section('content')
{{-- Supprimer le doublon - garder un seul lien Bootstrap Icons --}}
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet">

@php
    // Récupérer la langue courante
    $currentLocale = app()->getLocale();
@endphp

<div class="projects-container p-relative pt-30 pb-125">
    <img class="it-about-shape-1" src="assets/img/shape/about-1-1.png" alt="">
    <div class="container">
        <nav class="breadcrumb-nav" aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item">
                    <a href="{{ route('dashboard') }}">
                        <i class="bi bi-house-fill"></i>
                        <span>{{ __('site.breadcrumb.home') }}</span>
                    </a>
                </li>
                <li class="breadcrumb-item active" aria-current="page">{{ __('site.breadcrumb.mypersonalinfos') }}</li>
            </ol>
        </nav>
        
        <div class="row">
            <div class="col-xl-12">
                <div class="it-section-title-box text-center mb-30" style="padding-top:20px;">
                    <span class="it-section-subtitle">{{ __('site.profile_section_subtitle') }}</span>
                    <h4 class="it-section-title mb-0">{{ __('site.profile_section_title') }}</h4>
                </div>
            </div>
        </div>

        <div class="row justify-content-center">
            <div class="projects-grid">

                {{-- Messages de succès et erreurs --}}
                @if(session('success'))
                    <div class="alert alert-success mb-4">{{ session('success') }}</div>
                @endif

                @if($errors->any())
                    <div class="alert alert-danger mb-4">
                        <ul class="mb-0 list-unstyled">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                {{-- Affichage des informations --}}
                <div class="project-card" id="profile-info" style="padding: 40px;">
                    <div class="row">
                        <div class="col-md-6 mb-3"><strong>{{ __('site.full_name_label') }} :</strong> {{ $user->nom_prenom }}</div>
                        <div class="col-md-6 mb-3"><strong>{{ __('site.email_label') }} :</strong> {{ $user->email }}</div>

                        @if($user->id_type_identite == 1) {{-- Personne physique --}}
                            <div class="col-md-6 mb-3"><strong>{{ __('site.cin_label') }} :</strong> {{ $user->cin }}</div>
                            <div class="col-md-6 mb-3"><strong>{{ __('site.cin_issue_date_label') }} :</strong> {{ $user->date_delivrance_cin ? \Carbon\Carbon::parse($user->date_delivrance_cin)->format('d-m-Y') : __('site.not_specified') }}</div>
                            <div class="col-md-6 mb-3"><strong>{{ __('site.cin_issue_place_label') }} :</strong> {{ $user->lieu_delivrance_cin ?? __('site.not_specified') }}</div>
                        @elseif($user->id_type_identite == 2) {{-- Personne physique étrangère --}}
                            <div class="col-md-6 mb-3"><strong>{{ __('site.passport_label') }} :</strong> {{ $user->passport ?? __('site.not_specified') }}</div>
                        @elseif($user->id_type_identite == 3) {{-- Personne morale --}}
                            <div class="col-md-6 mb-3"><strong>{{ __('site.num_fiscal_label') }} :</strong> {{ $user->num_fiscal ?? __('site.not_specified') }}</div>
                            
                            {{-- Affichage de la nature de structure selon la langue --}}
                            <div class="col-md-6 mb-3">
                                <strong>{{ __('site.structure_nature_label') }} :</strong> 
                                @if($user->natureStructure)
                                    @php
                                        $natureField = 'nature_' . $currentLocale;
                                        $natureValue = $user->natureStructure->$natureField ?? $user->natureStructure->nature_fr;
                                    @endphp
                                    {{ $natureValue }}
                                @else
                                    <span class="text-muted">{{ __('site.not_specified') }}</span>
                                @endif
                            </div>
                        @endif

                        <div class="col-md-6 mb-3"><strong>{{ __('site.contact_phone') }} :</strong> {{ $user->tel ?? __('site.not_specified') }}</div>
                        <div class="col-12 mb-3"><strong>{{ __('site.contact_address') }} :</strong> {{ $user->adresse ?? __('site.not_specified') }}</div>
                        <div class="col-md-6 mb-3"><strong>{{ __('site.date_naissance_label') }} :</strong> {{ $user->date_naissance ? \Carbon\Carbon::parse($user->date_naissance)->format('d-m-Y') : __('site.not_specified') }}</div>
                        <div class="col-md-6 mb-3"><strong>{{ __('site.lieu_naissance_label') }} :</strong> {{ $user->lieu_naissance ?? __('site.not_specified') }}</div>
                    </div>

                    <div class="col-12 mt-4 d-flex flex-column align-items-center gap-3">
                        <button type="button" class="btn btn-success" id="edit-profile-btn">
                            <i class="fa fa-edit me-2"></i> {{ __('site.profile_edit_button') }}
                        </button>
                        
                        <form id="logoutForm" action="{{ route('logout') }}" method="POST" style="display: none;">@csrf</form>
                        
                        <a href="#" class="it-btn-orange d-inline-block mt-3 mt-md-0" onclick="event.preventDefault(); document.getElementById('logoutForm').submit();">
                            <span>
                                <span class="text-1"> {{ __('site.Sign_Out') }}</span>
                                <span class="text-2"> {{ __('site.Sign_Out') }}</span>
                            </span>
                            <i>
                                <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M1.5 1.5H6.5V3H3V10H6.5V11.5H1.5C0.95 11.5 0.5 11.05 0.5 10.5V2.5C0.5 1.95 0.95 1.5 1.5 1.5Z" fill="white"/>
                                    <path d="M8.2 4.2L11 6.5L8.2 8.8V7.3H4.5V5.7H8.2V4.2Z" fill="white"/>
                                </svg>
                                <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M1.5 1.5H6.5V3H3V10H6.5V11.5H1.5C0.95 11.5 0.5 11.05 0.5 10.5V2.5C0.5 1.95 0.95 1.5 1.5 1.5Z" fill="white"/>
                                    <path d="M8.2 4.2L11 6.5L8.2 8.8V7.3H4.5V5.7H8.2V4.2Z" fill="white"/>
                                </svg>
                            </i>
                        </a>
                    </div>
                </div>

                {{-- Formulaire de modification --}}
                <form id="profile-edit" action="{{ route('profile.update') }}" method="POST" class="d-none">
                    @csrf
                    @method('PUT')
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">{{ __('site.full_name_label') }}</label>
                            <input type="text" maxlength="100" pattern="^[\p{L}\s]+$" name="nom_prenom" class="form-control" value="{{ $user->nom_prenom }}" required>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label">{{ __('site.email_label') }}</label>
                            <input type="email" name="email" maxlength="100" class="form-control" value="{{ $user->email }}" required>
                        </div>

                        @if($user->id_type_identite == 1)
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{{ __('site.cin_label') }}</label>
                                <input type="text" name="cin" pattern="[0-9]{8}" maxlength="8" minlength="8" class="form-control" value="{{ $user->cin }}">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{{ __('site.cin_issue_date_label') }}</label>
                                <input type="date" max="{{ date('Y-m-d') }}" name="date_delivrance_cin" class="form-control" value="{{ $user->date_delivrance_cin }}">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{{ __('site.cin_issue_place_label') }}</label>
                                <input type="text" maxlength="100" name="lieu_delivrance_cin" class="form-control" value="{{ $user->lieu_delivrance_cin }}">
                            </div>
                        @elseif($user->id_type_identite == 2)
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{{ __('site.passport_label') }}</label>
                                <input type="text" name="passport" maxlength="12" class="form-control" value="{{ $user->passport }}">
                            </div>
                        @elseif($user->id_type_identite == 3)
                            @php
                                $naturesStructure = \App\Models\NatureStructure::all();
                            @endphp
                            
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{{ __('site.num_fiscal_label') }}</label>
                                <input type="text" name="num_fiscal" maxlength="17" class="form-control" value="{{ $user->num_fiscal }}">
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{{ __('site.structure_nature_label') }} <span class="text-danger">*</span></label>
                                
                                @if($naturesStructure && $naturesStructure->count() > 0)
                                    <select name="id_structure" class="form-control form-select" required>
                                        <option value="">{{ __('site.select_structure_nature') }}</option>
                                        
                                        @foreach($naturesStructure as $nature)
                                            @php
                                                // Déterminer le champ à afficher selon la langue
                                                $natureDisplay = $nature->{'nature_' . $currentLocale} ?? $nature->nature_fr;
                                            @endphp
                                            <option value="{{ $nature->id }}" {{ $user->id_structure == $nature->id ? 'selected' : '' }}>
                                                {{ $natureDisplay }}
                                            </option>
                                        @endforeach
                                    </select>
                                @else
                                    <div class="alert alert-warning py-1 px-2 mb-0 small">
                                        {{ __('Aucune nature disponible') }}
                                    </div>
                                @endif
                            </div>
                        @endif

                        {{-- Champ téléphone corrigé --}}
                        <div class="col-md-6 mb-3">
                            <label class="form-label">{{ __('site.contact_phone') }}</label>
                            <input type="text" name="tel" id="tel" class="form-control" value="{{ $user->tel }}" minlength="8" maxlength="8" pattern="\d{8}" inputmode="numeric" oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                            <small class="text-muted">8 {{ __('site.numbers_required') }}</small>
                        </div>

                        <div class="col-12 mb-3">
                            <label class="form-label">{{ __('site.contact_address') }}</label>
                            <input name="adresse" class="form-control" maxlength="100" value="{{ $user->adresse }}" oninput="document.getElementById('countAdresse').innerText = this.value.length">
                            <small class="text-muted">
                                <span id="countAdresse">{{ strlen($user->adresse ?? '') }}</span>/100
                            </small>
                        </div>
                        
                        @php
                            $maxDate = \Carbon\Carbon::now()->subYears(18)->format('Y-m-d');
                        @endphp

                        <div class="col-md-6 mb-3">
                            <label class="form-label">{{ __('site.date_naissance_label') }}</label>
                            <input type="date" name="date_naissance" class="form-control" value="{{ $user->date_naissance }}" max="{{ $maxDate }}" required>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label">{{ __('site.lieu_naissance_label') }}</label>
                            <input type="text" name="lieu_naissance" class="form-control" value="{{ $user->lieu_naissance }}" maxlength="50">
                        </div>

                        <!-- New password -->
                        <div class="col-md-6 mb-3">
                            <label class="form-label">{{ __('site.new_password_label') }}</label>
                            <div class="position-relative">
                                <input type="password" name="password" id="edit_password" class="form-control" autocomplete="off" minlength="8" maxlength="150" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).{8,}" placeholder="{{ __('site.new_password_placeholder') }}">
                                <button type="button" class="btn btn-sm" id="toggleEditPwd" style="position:absolute; left:8px; top:50%; transform:translateY(-50%); background:transparent; border:0;">
                                    <i class="bi bi-eye" id="toggleEditPwdIcon"></i>
                                </button>
                            </div>
                        </div>

                        <!-- Confirm password -->
                        <div class="col-md-6 mb-3">
                            <label class="form-label">{{ __('site.confirm_password_label') }}</label>
                            <div class="position-relative">
                                <input type="password" name="password_confirmation" id="edit_password_confirmation" class="form-control" minlength="8" maxlength="150" placeholder="{{ __('site.confirm_password_placeholder') }}">
                                <button type="button" class="btn btn-sm" id="toggleEditPwdConf" style="position:absolute; left:8px; top:50%; transform:translateY(-50%); background:transparent; border:0;">
                                    <i class="bi bi-eye" id="toggleEditPwdConfIcon"></i>
                                </button>
                            </div>
                        </div>

                        <!-- Password rules/help -->
                        <div id="passwordRules" class="mb-2 p-2 border rounded" style="display:none; background:#fff;">
                            <ul class="mb-0 list-unstyled small">
                                <li id="pr_len">{{ __('site.pw_rule_len') }}</li>
                                <li id="pr_upper">{{ __('site.pw_rule_upper') }}</li>
                                <li id="pr_lower">{{ __('site.pw_rule_lower') }}</li>
                                <li id="pr_digit">{{ __('site.pw_rule_digit') }}</li>
                                <li id="pr_special">{{ __('site.pw_rule_special') }}</li>
                            </ul>
                        </div>

                        <!-- Password confirmation error -->
                        <div id="passwordConfirmationError" class="alert alert-danger mb-2" style="display:none;">
                            {{ __('site.pw_confirm_error') }}
                        </div>

                        <!-- Phone error -->
                        <div id="telError" class="alert alert-danger mb-2" style="display:none;">
                            {{ __('site.tel_error') }}
                        </div>

                        <div class="col-12 mt-4 text-center">
                            <button type="submit" class="btn btn-orange"><i class="fa fa-save me-2"></i> {{ __('site.profile_save_button') }}</button>
                            <button type="button" class="btn btn-secondary ms-2" id="cancel-edit-btn"><i class="fa fa-times me-2"></i> {{ __('site.profile_cancel_button') }}</button>
                        </div>
                    </div>
                </form>

            </div>
        </div>

    </div>
</div>

@endsection

@section('scripts')
<script>
jQuery(document).ready(function($) {
    // Afficher le formulaire d'édition
    $('#edit-profile-btn').on('click', function() {
        $('#profile-info').addClass('d-none');
        $('#profile-edit').removeClass('d-none');
    });
    
    // Cacher le formulaire d'édition (bouton Annuler)
    $('#cancel-edit-btn').on('click', function(e) {
        e.preventDefault();
        $('#profile-info').removeClass('d-none');
        $('#profile-edit').addClass('d-none');
    });

    // server-provided data (safe JSON)
    const serverErrors = @json($errors->toArray());
    const serverTexts = {
        profile_update_success: @json(__('site.profile_update_success')),
        profile_update_error: @json(__('site.profile_update_error'))
    };

    const translations = {
        pw_rule_len: @json(__('site.pw_rule_len')),
        pw_rule_upper: @json(__('site.pw_rule_upper')),
        pw_rule_lower: @json(__('site.pw_rule_lower')),
        pw_rule_digit: @json(__('site.pw_rule_digit')),
        pw_rule_special: @json(__('site.pw_rule_special')),
        pw_invalid_format: @json(__('site.pw_invalid_format')),
        pw_confirm_error: @json(__('site.pw_confirm_error')),
        tel_error: @json(__('site.tel_error')),
        profile_update_success: @json(__('site.profile_update_success')),
        profile_update_error: @json(__('site.profile_update_error'))
    };

    /* Inject CSS for rule colors */
    (function injectRuleStyles(){
        const css = `
            .pw-rule-valid { color: #28a745 !important; }
            .pw-rule-invalid { color: #dc3545 !important; }
            #passwordRules li { color: #6c757d; }
        `;
        const s = document.createElement('style');
        s.type = 'text/css';
        s.appendChild(document.createTextNode(css));
        document.head.appendChild(s);
    })();

    /* Password visibility toggles */
    $('#toggleEditPwd').on('click', function(e){
        e.preventDefault();
        const input = $('#edit_password');
        const icon = $('#toggleEditPwdIcon');

        if (input.attr('type') === 'password') {
            input.attr('type','text');
            icon.removeClass('bi-eye').addClass('bi-eye-slash');
        } else {
            input.attr('type','password');
            icon.removeClass('bi-eye-slash').addClass('bi-eye');
        }
        input.focus();
    });

    $('#toggleEditPwdConf').on('click', function(e){
        e.preventDefault();
        const input = $('#edit_password_confirmation');
        const icon = $('#toggleEditPwdConfIcon');

        if (input.attr('type') === 'password') {
            input.attr('type','text');
            icon.removeClass('bi-eye').addClass('bi-eye-slash');
        } else {
            input.attr('type','password');
            icon.removeClass('bi-eye-slash').addClass('bi-eye');
        }
        input.focus();
    });

    /* Password validation */
    const pwdInput  = document.getElementById('edit_password');
    const confInput = document.getElementById('edit_password_confirmation');

    const passwordRules = document.getElementById('passwordRules');
    const pr_len = document.getElementById('pr_len');
    const pr_upper = document.getElementById('pr_upper');
    const pr_lower = document.getElementById('pr_lower');
    const pr_digit = document.getElementById('pr_digit');
    const pr_special = document.getElementById('pr_special');

    const passwordConfirmationError = document.getElementById('passwordConfirmationError');
    const telInput = document.getElementById('tel');
    const telError = document.getElementById('telError');

    /* Password rule helpers */
    const re_len = /.{8,}/;
    const re_upper = /[A-Z]/;
    const re_lower = /[a-z]/;
    const re_digit = /[0-9]/;
    const re_special = /[\W_]/;

    function validatePasswordRules(pwd) {
        return {
            len: re_len.test(pwd),
            upper: re_upper.test(pwd),
            lower: re_lower.test(pwd),
            digit: re_digit.test(pwd),
            special: re_special.test(pwd)
        };
    }

    function updateRulesUI(state) {
        if (!passwordRules) return;
        passwordRules.style.display = 'block';

        if (pr_len) {
            pr_len.classList.remove('pw-rule-valid','pw-rule-invalid');
            pr_len.classList.add(state.len ? 'pw-rule-valid' : 'pw-rule-invalid');
            pr_len.textContent = (state.len ? '✔ ' : '✖ ') + translations.pw_rule_len;
        }
        if (pr_upper) {
            pr_upper.classList.remove('pw-rule-valid','pw-rule-invalid');
            pr_upper.classList.add(state.upper ? 'pw-rule-valid' : 'pw-rule-invalid');
            pr_upper.textContent = (state.upper ? '✔ ' : '✖ ') + translations.pw_rule_upper;
        }
        if (pr_lower) {
            pr_lower.classList.remove('pw-rule-valid','pw-rule-invalid');
            pr_lower.classList.add(state.lower ? 'pw-rule-valid' : 'pw-rule-invalid');
            pr_lower.textContent = (state.lower ? '✔ ' : '✖ ') + translations.pw_rule_lower;
        }
        if (pr_digit) {
            pr_digit.classList.remove('pw-rule-valid','pw-rule-invalid');
            pr_digit.classList.add(state.digit ? 'pw-rule-valid' : 'pw-rule-invalid');
            pr_digit.textContent = (state.digit ? '✔ ' : '✖ ') + translations.pw_rule_digit;
        }
        if (pr_special) {
            pr_special.classList.remove('pw-rule-valid','pw-rule-invalid');
            pr_special.classList.add(state.special ? 'pw-rule-valid' : 'pw-rule-invalid');
            pr_special.textContent = (state.special ? '✔ ' : '✖ ') + translations.pw_rule_special;
        }
    }

    /* Input interactions */
    $('#edit_password').on('input', function() {
        $('.client-password-error').remove();
        if (typeof this.setCustomValidity === 'function') this.setCustomValidity('');

        const pwd = this.value || '';
        if (pwd.length === 0) {
            if (passwordRules) passwordRules.style.display = 'none';
        } else {
            const state = validatePasswordRules(pwd);
            updateRulesUI(state);
        }
        if (passwordConfirmationError) passwordConfirmationError.style.display = 'none';
    });

    $('#edit_password').on('focus', function() {
        const pwd = this.value || '';
        if (pwd.length === 0 && passwordRules) {
            updateRulesUI({len:false, upper:false, lower:false, digit:false, special:false});
            passwordRules.style.display = 'block';
        }
    });

    $('#edit_password').on('blur', function() {
        if ((this.value || '').length === 0 && passwordRules) {
            passwordRules.style.display = 'none';
        }
    });

    $('#edit_password_confirmation').on('input', function() {
        $('.client-password-error').remove();
        if (typeof this.setCustomValidity === 'function') this.setCustomValidity('');
        if (passwordConfirmationError) passwordConfirmationError.style.display = 'none';
    });

    /* Form submit */
    $('#profile-edit').on('submit', function(e) {
        e.preventDefault();

        const form = $(this);
        form.find('.client-password-error').remove();

        const pwd = pwdInput ? (pwdInput.value || '').trim() : '';
        const conf = confInput ? (confInput.value || '').trim() : '';

        if (pwd.length > 0) {
            const pwdRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).{8,}$/;

            if (!pwdRegex.test(pwd)) {
                if (pwdInput && typeof pwdInput.setCustomValidity === 'function') {
                    pwdInput.setCustomValidity(translations.pw_invalid_format);
                }
                form.prepend(
                    '<div class="alert alert-danger mb-4 client-password-error">' +
                    translations.pw_invalid_format +
                    '</div>'
                );
                if (pwdInput) pwdInput.focus();
                updateRulesUI(validatePasswordRules(pwd));
                return;
            }

            if (pwd !== conf) {
                if (confInput && typeof confInput.setCustomValidity === 'function') {
                    confInput.setCustomValidity(translations.pw_confirm_error);
                }
                form.prepend(
                    '<div class="alert alert-danger mb-4 client-password-error">' +
                    translations.pw_confirm_error +
                    '</div>'
                );
                if (confInput) confInput.focus();
                if (passwordConfirmationError) passwordConfirmationError.style.display = 'block';
                updateRulesUI(validatePasswordRules(pwd));
                return;
            }
        }

        // Phone check
        if (telInput) {
            const telVal = (telInput.value || '').trim();
            if (telVal.length > 0 && telVal.length !== 8) {
                if (telError) telError.style.display = 'block';
                if (typeof telInput.setCustomValidity === 'function') {
                    telInput.setCustomValidity(translations.tel_error);
                }
                telInput.focus();
                return;
            } else {
                if (telError) telError.style.display = 'none';
            }
        }

        // AJAX submit
        const formData = form.serialize();

        $.ajax({
            url: form.attr('action'),
            method: 'POST',
            data: formData,
            success: function(response) {
                const successMsg = '' +
                    '<div class="alert alert-success mb-4 text-right">' +
                        (response.message || serverTexts.profile_update_success) +
                    '</div>';
                form.prepend(successMsg);
                setTimeout(() => window.location.reload(), 1000);
            },
            error: function(xhr) {
                form.find('.server-error-block').remove();

                if (xhr.status === 422 && xhr.responseJSON && xhr.responseJSON.errors) {
                    const errors = xhr.responseJSON.errors;
                    let errorHtml = '<ul class="mb-0 list-unstyled">';
                    for (let field in errors) errorHtml += `<li>${errors[field][0]}</li>`;
                    errorHtml += '</ul>';
                    form.prepend(
                        `<div class="alert alert-danger mb-4 text-right server-error-block">${errorHtml}</div>`
                    );
                } else {
                    let serverMsg = (xhr.responseJSON && xhr.responseJSON.message)
                        ? xhr.responseJSON.message
                        : serverTexts.profile_update_error;

                    form.prepend(`
                        <div class="alert alert-danger mb-4 text-right server-error-block">
                            <ul class="mb-0 list-unstyled">
                                <li>${serverMsg}</li>
                            </ul>
                        </div>
                    `);
                    console.error('Profile update failed', xhr);
                }
            }
        });
    });

    // Show panels when server returned errors
    if (serverErrors && typeof serverErrors === 'object') {
        if (serverErrors.password && serverErrors.password.length) {
            if (passwordRules) {
                passwordRules.style.display = 'block';
                updateRulesUI({len:false, upper:false, lower:false, digit:false, special:false});
            }
        }
        if (serverErrors.password_confirmation && serverErrors.password_confirmation.length) {
            if (passwordConfirmationError) passwordConfirmationError.style.display = 'block';
        }
        if (serverErrors.tel && serverErrors.tel.length) {
            if (telError) telError.style.display = 'block';
        }
    }

    // Debug - Afficher la valeur du téléphone dans la console
    console.log('Valeur du téléphone:', telInput ? telInput.value : 'non trouvé');
    console.log('Longueur:', telInput ? telInput.value.length : 0);
});
</script>
@endsection