@extends('layouts.master')

@section('title')
    {{ __('Profile Settings') }}
@endsection

@section('css')
    <meta name="turbo-cache-control" content="no-cache">
    <link href="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />

    <style>
        .profile-settings-page {
            font-family: inherit;

            --profile-card-bg: var(--vz-card-bg, var(--bs-card-bg, #ffffff));
            --profile-body-bg: var(--vz-body-bg, var(--bs-body-bg, #ffffff));
            --profile-text: var(--vz-body-color, var(--bs-body-color, #212529));
            --profile-heading: var(--vz-heading-color, var(--bs-heading-color, #343a40));
            --profile-muted: var(--vz-secondary-color, #878a99);
            --profile-border: var(--vz-border-color, var(--bs-border-color, #e9ebec));
            --profile-soft-border: rgba(135, 138, 153, 0.18);
            --profile-input-bg: var(--vz-input-bg, var(--bs-body-bg, #ffffff));
            --profile-input-text: var(--vz-body-color, var(--bs-body-color, #212529));
            --profile-input-border: var(--vz-input-border, var(--bs-border-color, #ced4da));
            --profile-input-focus: var(--vz-primary, #405189);
            --profile-avatar-bg: var(--vz-light, #f3f3f9);
            --profile-icon-bg: var(--vz-card-bg, #ffffff);
            --profile-shadow: 0 1px 2px rgba(56, 65, 74, 0.15);
        }

        html[data-bs-theme="dark"] .profile-settings-page,
        html[data-layout-mode="dark"] .profile-settings-page,
        body[data-bs-theme="dark"] .profile-settings-page,
        body[data-layout-mode="dark"] .profile-settings-page,
        [data-bs-theme="dark"] .profile-settings-page,
        [data-layout-mode="dark"] .profile-settings-page {
            --profile-card-bg: #2b343e;
            --profile-body-bg: #252c34;
            --profile-text: #e6ebf2;
            --profile-heading: #ffffff;
            --profile-muted: #bdc7d4;
            --profile-border: #465361;
            --profile-soft-border: rgba(195, 204, 215, 0.18);
            --profile-input-bg: #333d48;
            --profile-input-text: #f4f7fb;
            --profile-input-border: #52606e;
            --profile-input-focus: #9b8cf7;
            --profile-avatar-bg: #35404b;
            --profile-icon-bg: #3a4652;
            --profile-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
        }

        .profile-settings-page .card {
            border: 1px solid var(--profile-border);
            box-shadow: var(--profile-shadow);
            border-radius: 10px;
            background: var(--profile-card-bg);
            color: var(--profile-text);
        }

        html[data-bs-theme="dark"] .profile-settings-page .card,
        html[data-layout-mode="dark"] .profile-settings-page .card {
            background-color: var(--profile-card-bg) !important;
            border-color: var(--profile-border) !important;
        }

        .profile-summary-card {
            overflow: hidden;
        }

        .profile-settings-section-card {
            overflow: hidden;
            border-radius: 10px;
        }

        .profile-settings-section-card > .card-body {
            border-radius: inherit;
        }

        .profile-summary-top {
            background: var(--profile-card-bg);
            padding: 30px 24px 26px;
            text-align: center;
            border-bottom: 1px solid var(--profile-soft-border);
        }

        .profile-avatar-wrap {
            position: relative;
            width: 104px;
            height: 104px;
            margin: 0 auto 18px;
        }

        .profile-avatar-img {
            width: 104px;
            height: 104px;
            object-fit: cover;
            border-radius: 50%;
            border: 1px solid var(--profile-border);
            background: var(--profile-avatar-bg);
        }

        .profile-avatar-empty {
            width: 104px;
            height: 104px;
            border-radius: 50%;
            border: 1px solid var(--profile-border);
            background: var(--profile-avatar-bg);
            color: var(--profile-muted);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 34px;
            font-weight: 600;
            line-height: 1;
            text-transform: uppercase;
        }

        .profile-avatar-edit {
            position: absolute;
            right: 4px;
            bottom: 5px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: var(--profile-icon-bg);
            border: 1px solid var(--profile-border);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .profile-avatar-edit i {
            font-size: 15px;
            color: var(--profile-muted);
        }

        .profile-avatar-menu-toggle {
            border: 0;
            background: transparent;
            padding: 0;
            width: 104px;
            height: 104px;
            border-radius: 50%;
            display: block;
        }

        .profile-avatar-menu-toggle:focus-visible {
            outline: 2px solid var(--profile-input-focus);
            outline-offset: 3px;
        }

        .profile-avatar-dropdown {
            min-width: 180px;
        }

        .profile-summary-name {
            min-height: 28px;
            font-size: 20px;
            font-weight: 600;
            color: var(--profile-heading);
            margin-bottom: 4px;
        }

        .profile-summary-role {
            color: var(--profile-muted);
            font-size: 14px;
            margin-bottom: 0;
        }

        .profile-summary-body {
            padding: 24px 28px 30px;
            background: var(--profile-card-bg);
        }

        .summary-row {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 18px;
            padding: 15px 0;
            border-bottom: 1px solid var(--profile-soft-border);
        }

        .summary-row:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .summary-label {
            min-width: 130px;
            font-size: 14px;
            font-weight: 600;
            color: var(--profile-heading);
        }

        .summary-value {
            flex: 1;
            text-align: right;
            font-size: 14px;
            color: var(--profile-muted);
            word-break: break-word;
        }

        .settings-card-header {
            margin-bottom: 20px;
        }

        .settings-card-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 6px;
            color: var(--profile-heading);
        }

        .settings-card-subtitle {
            color: var(--profile-muted);
            margin-bottom: 0;
            font-size: 13px;
        }

        .form-label {
            font-size: 13px;
            font-weight: 500;
            color: var(--profile-text);
            margin-bottom: 7px;
        }

        .form-control {
            border-radius: 4px;
            min-height: 38px;
            border-color: var(--profile-input-border);
            box-shadow: none !important;
            font-size: 13px;
            padding: 0.47rem 0.75rem;
            background-color: var(--profile-input-bg);
            color: var(--profile-input-text);
            background-image: none !important;
        }

        .form-control::placeholder {
            color: var(--profile-muted);
            opacity: 0.8;
        }

        .form-control:focus {
            border-color: var(--profile-input-focus);
            background-color: var(--profile-input-bg);
            color: var(--profile-input-text);
            box-shadow: 0 0 0 0.2rem rgba(139, 124, 246, 0.16) !important;
        }

        .form-control.is-invalid {
            border-color: #f06548 !important;
            background-image: none !important;
            padding-right: 0.75rem !important;
        }

        .password-field .form-control.is-invalid {
            padding-right: 42px !important;
        }

        .field-error-text {
            display: block;
            margin-top: 6px;
            font-size: 12px;
            color: #f06548;
        }

        .password-field {
            position: relative;
        }

        .password-field .form-control {
            padding-right: 42px;
        }

        .password-toggle-icon {
            position: absolute;
            top: 50%;
            right: 13px;
            transform: translateY(-50%);
            border: none;
            background: transparent;
            padding: 0;
            margin: 0;
            color: var(--profile-muted);
            font-size: 18px;
            line-height: 1;
            cursor: pointer;
            z-index: 3;
        }

        .password-toggle-icon:hover {
            color: var(--profile-heading);
        }

        .password-toggle-icon:focus {
            outline: none;
        }

        .save-profile-btn {
            min-width: 130px;
            height: 38px;
            border-radius: 4px;
            font-size: 13px;
            font-weight: 500;
        }

        .card-body.p-4 {
            padding: 1.25rem !important;
            background: var(--profile-card-bg);
            color: var(--profile-text);
        }

        html[data-bs-theme="dark"] .profile-settings-page .card-body.p-4,
        html[data-layout-mode="dark"] .profile-settings-page .card-body.p-4,
        html[data-bs-theme="dark"] .profile-settings-page .profile-summary-top,
        html[data-layout-mode="dark"] .profile-settings-page .profile-summary-top,
        html[data-bs-theme="dark"] .profile-settings-page .profile-summary-body,
        html[data-layout-mode="dark"] .profile-settings-page .profile-summary-body {
            background-color: var(--profile-card-bg) !important;
            color: var(--profile-text) !important;
        }

        html[data-bs-theme="dark"] .profile-settings-page .form-label,
        html[data-layout-mode="dark"] .profile-settings-page .form-label,
        html[data-bs-theme="dark"] .profile-settings-page .summary-label,
        html[data-layout-mode="dark"] .profile-settings-page .summary-label {
            color: var(--profile-heading) !important;
        }

        html[data-bs-theme="dark"] .profile-settings-page .settings-card-subtitle,
        html[data-layout-mode="dark"] .profile-settings-page .settings-card-subtitle,
        html[data-bs-theme="dark"] .profile-settings-page .profile-summary-role,
        html[data-layout-mode="dark"] .profile-settings-page .profile-summary-role,
        html[data-bs-theme="dark"] .profile-settings-page .summary-value,
        html[data-layout-mode="dark"] .profile-settings-page .summary-value {
            color: var(--profile-muted) !important;
        }

        html[data-bs-theme="dark"] .profile-settings-page .form-control,
        html[data-layout-mode="dark"] .profile-settings-page .form-control {
            background-color: var(--profile-input-bg) !important;
            border-color: var(--profile-input-border) !important;
            color: var(--profile-input-text) !important;
        }

        html[data-bs-theme="dark"] .profile-settings-page .form-control:focus,
        html[data-layout-mode="dark"] .profile-settings-page .form-control:focus {
            border-color: var(--profile-input-focus) !important;
            background-color: #394551 !important;
        }

        .swal2-container.swal2-backdrop-show,
        .swal2-container.swal2-shown {
            background: rgba(0, 0, 0, 0.5) !important;
        }

        .swal2-popup {
            background: #ffffff !important;
            color: #212529 !important;
            border: 1px solid #e9ebec;
        }

        .swal2-title {
            color: #343a40 !important;
        }

        .swal2-html-container {
            color: #212529 !important;
        }

        .swal2-container {
            z-index: 99999 !important;
        }

        html[data-bs-theme="dark"] .swal2-popup,
        html[data-layout-mode="dark"] .swal2-popup {
            background: #2b343e !important;
            color: #e6ebf2 !important;
            border-color: #465361 !important;
        }

        html[data-bs-theme="dark"] .swal2-title,
        html[data-layout-mode="dark"] .swal2-title {
            color: #ffffff !important;
        }

        html[data-bs-theme="dark"] .swal2-html-container,
        html[data-layout-mode="dark"] .swal2-html-container {
            color: #e6ebf2 !important;
        }
        @media (max-width: 991.98px) {
            .summary-row {
                flex-direction: column;
                gap: 5px;
            }

            .summary-value {
                text-align: left;
            }
        }
    </style>
@endsection

@section('content')
    @php
        $currentUser = $user ?? Auth::user();

        $displayRole = __(\App\Support\WorkflowPermission::roleLabelForAdmin((string) ($currentUser->role ?? 'user')));

        $rawOrganizationName = trim((string) ($currentUser->organization_name ?? ''));
        $displayOrganization = '';

        if ($rawOrganizationName !== '') {
            $locale = strtolower((string) app()->getLocale());
            $organizationRecord = \App\Models\Organization::where('name', $rawOrganizationName)->first();

            if ($organizationRecord) {
                $displayOrganization = $locale === 'kh' && trim((string) ($organizationRecord->name_kh ?? '')) !== ''
                    ? $organizationRecord->name_kh
                    : (trim((string) ($organizationRecord->name_en ?? '')) !== '' ? $organizationRecord->name_en : $rawOrganizationName);
            } else {
                $displayOrganization = $rawOrganizationName;
            }
        }

        $avatarUrl = $currentUser->avatarUrl();

        $displayFirstName = trim((string) ($currentUser->first_name ?? ''));
        $displayLastName = trim((string) ($currentUser->last_name ?? ''));
        $displayName = trim($displayFirstName . ' ' . $displayLastName);
        $displayInitial = mb_strtoupper(mb_substr($displayName !== '' ? $displayName : (string) ($currentUser->name ?? 'U'), 0, 1));
    @endphp

    <div class="profile-settings-page">
        <div class="row">
            <div class="col-12">
                <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                    <h4 class="mb-sm-0">{{ __('Profile Settings') }}</h4>
                </div>
            </div>
        </div>

        <form
            method="POST"
            action="{{ route('profile.settings.update') }}"
            enctype="multipart/form-data"
            autocomplete="off"
            id="profileSettingsForm"
            novalidate
        >
            @csrf

            <div class="row g-4">
                <div class="col-xl-4 col-lg-5">
                    <div class="card profile-summary-card">
                        <div class="profile-summary-top">
                            <div class="profile-avatar-wrap dropdown">
                                <button
                                    type="button"
                                    class="profile-avatar-menu-toggle"
                                    data-bs-toggle="dropdown"
                                    aria-expanded="false"
                                    aria-label="{{ __('Profile image options') }}"
                                >
                                    <img
                                        src="{{ $avatarUrl ?: '' }}"
                                        alt="{{ __('Profile Avatar') }}"
                                        class="profile-avatar-img {{ $avatarUrl ? '' : 'd-none' }}"
                                        id="profileAvatarPreview"
                                    >
                                    <span class="profile-avatar-empty {{ $avatarUrl ? 'd-none' : '' }}" id="profileAvatarEmpty">
                                        {{ $displayInitial }}
                                    </span>

                                    <span class="profile-avatar-edit">
                                        <i class="ri-camera-line"></i>
                                    </span>
                                </button>
                                <div class="dropdown-menu dropdown-menu-end profile-avatar-dropdown">
                                    <button type="button" class="dropdown-item" id="uploadProfileButton">
                                        <i class="ri-upload-cloud-2-line me-2"></i>{{ __('Upload Profile') }}
                                    </button>
                                    <button type="button" class="dropdown-item text-danger" id="removeProfileButton">
                                        <i class="ri-delete-bin-line me-2"></i>{{ __('Remove Profile') }}
                                    </button>
                                </div>
                            </div>

                            <div class="profile-summary-name">
                                {{ $displayName }}
                            </div>

                            <p class="profile-summary-role">
                                {{ $displayRole }}
                            </p>
                        </div>

                        <div class="profile-summary-body">
                            <div class="summary-row">
                                <div class="summary-label">{{ __('Email') }}</div>
                                <div class="summary-value">{{ $currentUser->email ?: '-' }}</div>
                            </div>

                            <div class="summary-row">
                                <div class="summary-label">{{ __('Role') }}</div>
                                <div class="summary-value">{{ $displayRole ?: '-' }}</div>
                            </div>

                            <div class="summary-row">
                                <div class="summary-label">{{ __('Organization') }}</div>
                                <div class="summary-value">{{ $displayOrganization !== '' ? $displayOrganization : '-' }}</div>
                            </div>

                            <div class="summary-row">
                                <div class="summary-label">{{ __('Created At') }}</div>
                                <div class="summary-value">{{ optional($currentUser->created_at)->format('Y-m-d H:i') ?: '-' }}</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-8 col-lg-7">
                    <div class="card profile-settings-section-card mb-4">
                        <div class="card-body p-4">
                            <div class="settings-card-header">
                                <h5 class="settings-card-title">{{ __('Edit Profile') }}</h5>
                                <p class="settings-card-subtitle">{{ __('Update your profile image and personal information.') }}</p>
                            </div>

                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label for="first_name" class="form-label">{{ __('First Name') }}</label>
                                    <input
                                        type="text"
                                        id="first_name"
                                        name="first_name"
                                        class="form-control @error('first_name') is-invalid @enderror"
                                        value="{{ (string) ($currentUser->first_name ?? '') }}"
                                        placeholder="{{ __('Enter first name') }}"
                                        autocomplete="off"
                                    >

                                    @error('first_name')
                                        <span class="field-error-text">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="col-md-6">
                                    <label for="last_name" class="form-label">{{ __('Last Name') }}</label>
                                    <input
                                        type="text"
                                        id="last_name"
                                        name="last_name"
                                        class="form-control @error('last_name') is-invalid @enderror"
                                        value="{{ (string) ($currentUser->last_name ?? '') }}"
                                        placeholder="{{ __('Enter last name') }}"
                                        autocomplete="off"
                                    >

                                    @error('last_name')
                                        <span class="field-error-text">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="col-md-12">
                                    <label for="email" class="form-label">{{ __('Email') }}</label>
                                    <input
                                        type="email"
                                        id="email"
                                        name="email"
                                        class="form-control @error('email') is-invalid @enderror"
                                        value="{{ (string) ($currentUser->email ?? '') }}"
                                        placeholder="{{ __('Enter email address') }}"
                                        autocomplete="off"
                                    >

                                    @error('email')
                                        <span class="field-error-text">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="col-12 d-none">
                                    <input type="hidden" id="remove_avatar" name="remove_avatar" value="0">
                                    <input
                                        type="file"
                                        id="avatar"
                                        name="avatar"
                                        accept="image/png,image/jpeg,image/jpg"
                                        class="@error('avatar') is-invalid @enderror"
                                    >
                                </div>

                                @error('avatar')
                                    <div class="col-12">
                                        <span class="field-error-text">{{ $message }}</span>
                                    </div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="card profile-settings-section-card">
                        <div class="card-body p-4">
                            <div class="settings-card-header">
                                <h5 class="settings-card-title">{{ __('Update Password') }}</h5>
                                <p class="settings-card-subtitle">{{ __('Leave the password fields blank if you do not want to change your password.') }}</p>
                            </div>

                            <div class="row g-3">
                                <div class="col-md-12">
                                    <label for="current_password" class="form-label">{{ __('Current Password') }}</label>

                                    <div class="password-field">
                                        <input
                                            type="password"
                                            id="current_password"
                                            name="current_password"
                                            class="form-control @error('current_password') is-invalid @enderror"
                                            value=""
                                            placeholder="{{ __('Enter current password') }}"
                                            autocomplete="new-password"
                                            data-clear-on-load="true"
                                        >

                                        <button type="button" class="password-toggle-icon" data-target="current_password" aria-label="{{ __('Show or hide password') }}">
                                            <i class="ri-eye-off-line"></i>
                                        </button>
                                    </div>

                                    @error('current_password')
                                        <span class="field-error-text">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="col-md-6">
                                    <label for="password" class="form-label">{{ __('New Password') }}</label>

                                    <div class="password-field">
                                        <input
                                            type="password"
                                            id="password"
                                            name="password"
                                            class="form-control @error('password') is-invalid @enderror"
                                            value=""
                                            placeholder="{{ __('Enter new password') }}"
                                            autocomplete="new-password"
                                            data-clear-on-load="true"
                                        >

                                        <button type="button" class="password-toggle-icon" data-target="password" aria-label="{{ __('Show or hide password') }}">
                                            <i class="ri-eye-off-line"></i>
                                        </button>
                                    </div>

                                    @error('password')
                                        <span class="field-error-text">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="col-md-6">
                                    <label for="password_confirmation" class="form-label">{{ __('Confirm New Password') }}</label>

                                    <div class="password-field">
                                        <input
                                            type="password"
                                            id="password_confirmation"
                                            name="password_confirmation"
                                            class="form-control @error('password_confirmation') is-invalid @enderror"
                                            value=""
                                            placeholder="{{ __('Confirm new password') }}"
                                            autocomplete="new-password"
                                            data-clear-on-load="true"
                                        >

                                        <button type="button" class="password-toggle-icon" data-target="password_confirmation" aria-label="{{ __('Show or hide password') }}">
                                            <i class="ri-eye-off-line"></i>
                                        </button>
                                    </div>

                                    @error('password_confirmation')
                                        <span class="field-error-text">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="d-flex justify-content-end mt-4">
                        <button type="submit" class="btn btn-primary save-profile-btn">
                            {{ __('Save') }}
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@section('script')
    <script src="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.js') }}" data-turbo-eval="false"></script>

    <script>
        (function initializeProfileSettings() {
            @if(session('status') || session('success'))
                if (typeof Swal !== 'undefined') {
                    Swal.fire({
                        title: '{{ __("Saved") }}',
                        text: @json((string) (session('status') ?: session('success'))),
                        icon: 'success',
                        confirmButtonText: '{{ __("OK") }}',
                        customClass: {
                            confirmButton: 'btn btn-primary w-xs mt-2'
                        },
                        buttonsStyling: false
                    });
                }
            @endif

            @if(session('password_status'))
                if (typeof Swal !== 'undefined') {
                    Swal.fire({
                        title: '{{ __("Saved") }}',
                        text: @json((string) session('password_status')),
                        icon: 'success',
                        confirmButtonText: '{{ __("OK") }}',
                        customClass: {
                            confirmButton: 'btn btn-primary w-xs mt-2'
                        },
                        buttonsStyling: false
                    });
                }
            @endif

            var profileSettingsForm = document.getElementById('profileSettingsForm');
            var profileInitialState = '';
            var allowProfileNavigation = false;

            function getProfileFormState() {
                if (!profileSettingsForm) {
                    return '';
                }

                return JSON.stringify(Array.prototype.slice.call(profileSettingsForm.elements).map(function (field) {
                    if (!field.name || field.disabled || ['button', 'submit', 'reset'].indexOf(field.type) !== -1) {
                        return null;
                    }

                    if (field.type === 'file') {
                        return {
                            name: field.name,
                            files: Array.prototype.slice.call(field.files || []).map(function (file) {
                                return [file.name, file.size, file.lastModified];
                            })
                        };
                    }

                    if (field.type === 'checkbox' || field.type === 'radio') {
                        return { name: field.name, value: field.value, checked: field.checked };
                    }

                    return { name: field.name, value: field.value };
                }).filter(function (field) {
                    return field !== null;
                }));
            }

            function hasUnsavedProfileChanges() {
                return !!profileSettingsForm && getProfileFormState() !== profileInitialState;
            }

            function confirmLeaveProfile(onConfirm) {
                var warningText = @json(__('You have unsaved changes. Leave without saving?'));

                if (typeof Swal !== 'undefined') {
                    Swal.fire({
                        title: @json(__('Unsaved Changes')),
                        text: warningText,
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: @json(__('Leave Without Saving')),
                        cancelButtonText: @json(__('Stay')),
                        customClass: {
                            confirmButton: 'btn btn-primary w-xs me-2 mt-2',
                            cancelButton: 'btn btn-light w-xs mt-2'
                        },
                        buttonsStyling: false
                    }).then(function (result) {
                        if ((result.isConfirmed || result.value) && typeof onConfirm === 'function') {
                            onConfirm();
                        }
                    });
                    return;
                }

                if (window.confirm(warningText) && typeof onConfirm === 'function') {
                    onConfirm();
                }
            }

            profileInitialState = getProfileFormState();

            function getFieldInput(fieldName) {
                if (!profileSettingsForm) {
                    return null;
                }

                return profileSettingsForm.querySelector('[name="' + fieldName + '"]');
            }

            function getErrorTarget(input) {
                if (!input) {
                    return null;
                }

                var passwordWrapper = input.closest('.password-field');

                if (passwordWrapper) {
                    return passwordWrapper;
                }

                return input;
            }

            function removeFormErrors() {
                if (!profileSettingsForm) {
                    return;
                }

                profileSettingsForm.querySelectorAll('.js-profile-form-error').forEach(function (error) {
                    error.remove();
                });

                profileSettingsForm.querySelectorAll('.is-invalid').forEach(function (input) {
                    input.classList.remove('is-invalid');
                });

                var generalError = document.getElementById('profileFormGeneralError');

                if (generalError) {
                    generalError.remove();
                }
            }

            function showGeneralFormError(message) {
                if (!profileSettingsForm) {
                    return;
                }

                var existingError = document.getElementById('profileFormGeneralError');

                if (existingError) {
                    existingError.remove();
                }

                var errorBox = document.createElement('div');
                errorBox.id = 'profileFormGeneralError';
                errorBox.className = 'alert alert-danger mb-4';
                errorBox.textContent = message || '{{ __("Please check the form and try again.") }}';

                var firstCard = profileSettingsForm.querySelector('.card');

                if (firstCard) {
                    firstCard.parentNode.insertBefore(errorBox, firstCard);
                } else {
                    profileSettingsForm.prepend(errorBox);
                }
            }

            function showFieldError(fieldName, message) {
                var input = getFieldInput(fieldName);

                if (!input) {
                    showGeneralFormError(message);
                    return;
                }

                input.classList.add('is-invalid');

                var target = getErrorTarget(input);

                if (!target) {
                    showGeneralFormError(message);
                    return;
                }

                var errorText = document.createElement('span');
                errorText.className = 'field-error-text js-profile-form-error';
                errorText.textContent = message || '{{ __("This field is invalid.") }}';

                target.insertAdjacentElement('afterend', errorText);
            }

            function showValidationErrors(payload) {
                removeFormErrors();

                var hasFieldErrors = false;

                if (payload && payload.errors && typeof payload.errors === 'object') {
                    Object.keys(payload.errors).forEach(function (fieldName) {
                        var messages = payload.errors[fieldName];

                        if (Array.isArray(messages) && messages.length > 0) {
                            hasFieldErrors = true;
                            showFieldError(fieldName, messages[0]);
                        }
                    });
                }

                if (!hasFieldErrors) {
                    showGeneralFormError(
                        payload && payload.message
                            ? payload.message
                            : '{{ __("Unable to save profile. Please check the form and try again.") }}'
                    );
                }

                var firstError = profileSettingsForm
                    ? profileSettingsForm.querySelector('.is-invalid, #profileFormGeneralError, .js-profile-form-error')
                    : null;

                if (firstError) {
                    firstError.scrollIntoView({
                        behavior: 'smooth',
                        block: 'center'
                    });
                }
            }

            function showLocalFieldError(fieldName, message) {
                removeSingleFieldError(fieldName);
                showFieldError(fieldName, message);
            }

            function removeSingleFieldError(fieldName) {
                var input = getFieldInput(fieldName);

                if (!input) {
                    return;
                }

                input.classList.remove('is-invalid');

                var target = getErrorTarget(input);

                if (!target) {
                    return;
                }

                var next = target.nextElementSibling;

                if (next && next.classList.contains('js-profile-form-error')) {
                    next.remove();
                }
            }

            if (profileSettingsForm) {
                profileSettingsForm.addEventListener('submit', function (event) {
                    event.preventDefault();

                    removeFormErrors();

                    var submitBtn = profileSettingsForm.querySelector('button[type="submit"]');

                    if (submitBtn) {
                        submitBtn.disabled = true;
                    }

                    fetch(profileSettingsForm.action, {
                        method: 'POST',
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json'
                        },
                        body: new FormData(profileSettingsForm)
                    })
                    .then(function (response) {
                        return response.json().catch(function () {
                            return {};
                        }).then(function (payload) {
                            if (!response.ok) {
                                showValidationErrors(payload);
                                return Promise.reject({
                                    handled: true
                                });
                            }

                            return payload;
                        });
                    })
                    .then(function (payload) {
                        allowProfileNavigation = true;
                        profileInitialState = getProfileFormState();

                        if (typeof Swal !== 'undefined') {
                            return Swal.fire({
                                title: '{{ __("Saved") }}',
                                text: payload.message || '{{ __("Profile updated successfully.") }}',
                                icon: 'success',
                                confirmButtonText: '{{ __("OK") }}',
                                customClass: {
                                    confirmButton: 'btn btn-primary w-xs mt-2'
                                },
                                buttonsStyling: false
                            }).then(function () {
                                window.location.reload();
                            });
                        }

                        window.location.reload();
                    })
                    .catch(function (error) {
                        if (error && error.handled) {
                            return;
                        }

                        showValidationErrors({
                            message: '{{ __("Unable to save profile. Please try again.") }}'
                        });
                    })
                    .finally(function () {
                        if (submitBtn) {
                            submitBtn.disabled = false;
                        }
                    });
                });

                profileSettingsForm.querySelectorAll('input, select, textarea').forEach(function (input) {
                    input.addEventListener('input', function () {
                        removeSingleFieldError(input.name);
                    });

                    input.addEventListener('change', function () {
                        removeSingleFieldError(input.name);
                    });
                });
            }

            document.addEventListener('click', function (event) {
                // Turbo keeps document listeners alive after replacing the page.
                // Ignore this listener once its profile form is no longer mounted.
                if (!profileSettingsForm
                    || !document.documentElement.contains(profileSettingsForm)
                    || event.defaultPrevented
                    || allowProfileNavigation
                    || !hasUnsavedProfileChanges()) {
                    return;
                }

                if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
                    return;
                }

                var anchor = event.target instanceof Element ? event.target.closest('a[href]') : null;
                if (!anchor || (anchor.getAttribute('target') || '').toLowerCase() === '_blank' || anchor.hasAttribute('download')) {
                    return;
                }

                var href = (anchor.getAttribute('href') || '').trim();
                if (!href || href === '#' || href.indexOf('javascript:') === 0) {
                    return;
                }

                var targetUrl;
                try {
                    targetUrl = new URL(anchor.href, window.location.href);
                } catch (error) {
                    return;
                }

                if (targetUrl.href === window.location.href) {
                    return;
                }

                event.preventDefault();
                confirmLeaveProfile(function () {
                    allowProfileNavigation = true;

                    if (anchor.getAttribute('data-turbo') !== 'false'
                        && targetUrl.origin === window.location.origin
                        && typeof window.navigateDashboardContent === 'function') {
                        window.navigateDashboardContent(targetUrl.href);
                        return;
                    }

                    window.location.assign(targetUrl.href);
                });
            }, true);

            document.addEventListener('turbo:before-visit', function (event) {
                if (!profileSettingsForm
                    || !document.documentElement.contains(profileSettingsForm)
                    || event.defaultPrevented
                    || allowProfileNavigation
                    || !hasUnsavedProfileChanges()) {
                    return;
                }

                var targetUrl = event.detail && event.detail.url
                    ? String(event.detail.url)
                    : '';

                if (!targetUrl || targetUrl === window.location.href) {
                    return;
                }

                event.preventDefault();
                event.stopImmediatePropagation();

                confirmLeaveProfile(function () {
                    allowProfileNavigation = true;

                    if (window.Turbo && typeof window.Turbo.visit === 'function') {
                        window.Turbo.visit(targetUrl, { action: 'advance' });
                        return;
                    }

                    window.location.assign(targetUrl);
                });
            }, true);

            window.addEventListener('beforeunload', function (event) {
                if (!profileSettingsForm
                    || !document.documentElement.contains(profileSettingsForm)
                    || allowProfileNavigation
                    || !hasUnsavedProfileChanges()) {
                    return;
                }

                event.preventDefault();
                event.returnValue = '';
            });

            var avatarInput = document.getElementById('avatar');
            var avatarPreview = document.getElementById('profileAvatarPreview');
            var avatarEmpty = document.getElementById('profileAvatarEmpty');
            var removeAvatarInput = document.getElementById('remove_avatar');
            var uploadProfileButton = document.getElementById('uploadProfileButton');
            var removeProfileButton = document.getElementById('removeProfileButton');

            if (uploadProfileButton && avatarInput) {
                uploadProfileButton.addEventListener('click', function () {
                    avatarInput.click();
                });
            }

            if (removeProfileButton && avatarInput && avatarPreview) {
                removeProfileButton.addEventListener('click', function () {
                    removeSingleFieldError('avatar');

                    avatarInput.value = '';

                    if (removeAvatarInput) {
                        removeAvatarInput.value = '1';
                    }

                    avatarPreview.src = '';
                    avatarPreview.classList.add('d-none');

                    if (avatarEmpty) {
                        avatarEmpty.classList.remove('d-none');
                    }
                });
            }

            if (avatarInput && avatarPreview) {
                avatarInput.addEventListener('change', function () {
                    removeSingleFieldError('avatar');

                    if (!avatarInput.files || !avatarInput.files[0]) {
                        return;
                    }

                    var file = avatarInput.files[0];

                    if (file.size > 2 * 1024 * 1024) {
                        showLocalFieldError('avatar', '{{ __("File size must not exceed 2MB.") }}');
                        avatarInput.value = '';
                        return;
                    }

                    var allowedTypes = ['image/jpeg', 'image/png', 'image/jpg'];

                    if (allowedTypes.indexOf(file.type) === -1) {
                        showLocalFieldError('avatar', '{{ __("Only JPG and PNG images are allowed.") }}');
                        avatarInput.value = '';
                        return;
                    }

                    var reader = new FileReader();

                    reader.onload = function (e) {
                        if (e.target && e.target.result) {
                            if (removeAvatarInput) {
                                removeAvatarInput.value = '0';
                            }

                            avatarPreview.src = e.target.result;
                            avatarPreview.classList.remove('d-none');

                            if (avatarEmpty) {
                                avatarEmpty.classList.add('d-none');
                            }
                        }
                    };

                    reader.readAsDataURL(file);
                });
            }

            profileSettingsForm.querySelectorAll('input[data-clear-on-load="true"]').forEach(function (input) {
                input.value = '';
                input.setAttribute('value', '');
            });
            profileInitialState = getProfileFormState();

            setTimeout(function () {
                if (!profileSettingsForm || !document.documentElement.contains(profileSettingsForm)) {
                    return;
                }

                profileSettingsForm.querySelectorAll('input[data-clear-on-load="true"]').forEach(function (input) {
                    input.value = '';
                    input.setAttribute('value', '');
                });
                profileInitialState = getProfileFormState();
            }, 250);

            profileSettingsForm.querySelectorAll('.password-toggle-icon').forEach(function (toggle) {
                toggle.addEventListener('click', function () {
                    var targetId = toggle.getAttribute('data-target');
                    var input = document.getElementById(targetId);
                    var icon = toggle.querySelector('i');

                    if (!input || !icon) {
                        return;
                    }

                    if (input.type === 'password') {
                        input.type = 'text';
                        icon.classList.remove('ri-eye-off-line');
                        icon.classList.add('ri-eye-line');
                    } else {
                        input.type = 'password';
                        icon.classList.remove('ri-eye-line');
                        icon.classList.add('ri-eye-off-line');
                    }
                });
            });
        })();
    </script>
@endsection