@extends('layouts.app')

@section('content')
        
<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>


<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet">
        <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" class="row" style="padding: 40px;">
                        <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>
                        @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 class="col-12 mt-4 d-flex flex-column align-items-center gap-3">
                            <button type="button" class="btn btn-success toggle-edit-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">
    <!-- Porte -->
    <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"/>
    <!-- Flèche sortie -->
    <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">
    <!-- Porte -->
    <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"/>
    <!-- Flèche sortie -->
    <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)
    {{-- CIN --}}
    <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)
    {{-- Passeport --}}
    <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)
    {{-- Numéro fiscal --}}
    <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>
@endif


                            <div class="col-md-6 mb-3">
                                <label class="form-label">{{ __('site.contact_phone') }}</label>
                                <input 
                                    type="tel"
                                    name="tel"
                                    class="form-control"
                                    value="{{ $user->tel }}"
                                    minlength="8"
                                    maxlength="12"
                                    pattern="[0-9]{8,12}"
                                    
                                >
                            </div>


                            <div class="col-12 mb-3">
                                <label class="form-label">{{ __('site.contact_address') }}</label>
                                <input 
                                    name="adresse"
                                    class="form-control"
                                    rows="1"
                                    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 (insert right after the password input) -->
<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>

<!-- Optional: phone inline 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" style="display:inline !important;"><i class="fa fa-save me-2"></i> {{ __('site.profile_save_button') }}</button>
                                <button type="button" class="btn btn-secondary ms-2 toggle-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($) {
    function toggleEditMode() {
        $('#profile-info, #profile-edit').toggleClass('d-none');
    }

    $(document).on('click', '.toggle-edit-btn', function(e) {
        e.preventDefault();
        toggleEditMode();
    });

    $('#profile-edit').on('submit', function(e) {
        e.preventDefault();
        const form = $(this);
        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 || '{{ __('site.profile_update_success') }}'}
                    </div>`;
                form.prepend(successMsg);
                setTimeout(() => window.location.reload(), 1000);
            },
            error: function(xhr) {
                let errorHtml = '<ul class="mb-0 list-unstyled">';
                if (xhr.status === 422) {
                    const errors = xhr.responseJSON.errors;
                    for (let field in errors) errorHtml += `<li>${errors[field][0]}</li>`;
                    errorHtml += '</ul>';
                    form.prepend(`<div class="alert alert-danger mb-4 text-right">${errorHtml}</div>`);
                } else {
                    form.prepend(`
                        <div class="alert alert-danger mb-4 text-right">
                            <ul class="mb-0 list-unstyled">
                                <li>{{ __('site.profile_update_error') }}</li>
                            </ul>
                        </div>
                    `);
                }
            }
        });
    });
});
</script>
-->

<script>
jQuery(document).ready(function($) {

    // 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'))
    };

    /* Inject CSS for rule colors (guarantees green/red regardless of existing CSS) */
    (function injectRuleStyles(){
        const css = `
            /* rule states */
            .pw-rule-valid { color: #28a745 !important; }    /* green */
            .pw-rule-invalid { color: #dc3545 !important; }  /* red */
            /* subtle default so items aren't grey due to other styles */
            #passwordRules li { color: #6c757d; } /* fallback grey */
        `;
        const s = document.createElement('style');
        s.type = 'text/css';
        s.appendChild(document.createTextNode(css));
        document.head.appendChild(s);
    })();

    function toggleEditMode() {
        $('#profile-info, #profile-edit').toggleClass('d-none');
    }

    $(document).on('click', '.toggle-edit-btn', function(e) {
        e.preventDefault();
        toggleEditMode();
    });

    /* =========================
       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();
    });

    /* =========================
       Elements (using edit_ ids)
       ========================= */
    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)
        };
    }

    /**
     * updateRulesUI(state)
     * - state: {len, upper, lower, digit, special} booleans
     * This function sets text (with ✔/✖) and applies CSS classes:
     *  - pw-rule-valid (green)
     *  - pw-rule-invalid (red)
     */
	     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'))
    };
	
    function updateRulesUI(state) {
        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');

        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 (live)
       ========================= */
    $('#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) {
            // mark all invalid so user sees red items until they type
            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 with confirmation logic
       ========================= */
    $('#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('صيغة كلمة المرور غير صحيحة. يجب أن تحتوي على 8 أحرف على الأقل، حرف كبير، حرف صغير، رقم ورمز خاص.');
                }
                form.prepend(
                    '<div class="alert alert-danger mb-4 client-password-error">' +
                    'صيغة كلمة المرور غير صحيحة. يجب أن تحتوي على 8 أحرف على الأقل، حرف كبير، حرف صغير، رقم ورمز خاص.' +
                    '</div>'
                );
                if (pwdInput) pwdInput.focus();
                // show rules and mark states correctly
                updateRulesUI(validatePasswordRules(pwd));
                return;
            }

            if (pwd !== conf) {
                if (confInput && typeof confInput.setCustomValidity === 'function') {
                    confInput.setCustomValidity('تأكيد كلمة المرور غير مطابق.');
                }
                form.prepend(
                    '<div class="alert alert-danger mb-4 client-password-error">' +
                    'تأكيد كلمة المرور غير مطابق.' +
                    '</div>'
                );
                if (confInput) confInput.focus();
                if (passwordConfirmationError) passwordConfirmationError.style.display = 'block';
                updateRulesUI(validatePasswordRules(pwd));
                return;
            }
        }

        // phone check (if present)
        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('رقم الهاتف يجب أن يحتوي على 8 أرقام.');
                }
                telInput.focus();
                return;
            } else {
                if (telError) telError.style.display = 'none';
            }
        }

        // proceed with 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 (safer)
       ========================= */
    if (serverErrors && typeof serverErrors === 'object') {
        // password server error
        if (serverErrors.password && serverErrors.password.length) {
            if (passwordRules) {
                passwordRules.style.display = 'block';
                // mark all invalid initially
                updateRulesUI({len:false,upper:false,lower:false,digit:false,special:false});
            }
        }

        // confirmation server error
        if (serverErrors.password_confirmation && serverErrors.password_confirmation.length) {
            if (passwordConfirmationError) passwordConfirmationError.style.display = 'block';
        }

        // tel server error
        if (serverErrors.tel && serverErrors.tel.length) {
            if (telError) telError.style.display = 'block';
        }
    }

});
</script>


@endsection