@extends('layouts.app')
@section('title', 'Bangladesh Unbound - Profile')
@section('page-title', 'My Profile')
@section('breadcrumb')
<!-- Breadcrumb Navigation -->
<nav class="breadcrumb-container" aria-label="breadcrumb" class="mb-4">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="{{ route('admin.dashboard') }}">
                <img src="{{ asset('backend/img/ico/ico-dashboard.svg') }}" alt="Dashboard" class="breadcrumb-icon">
                Dashboard
            </a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">
            <img src="{{ asset('backend/img/ico/ico-profile.svg') }}" alt="Profile" class="breadcrumb-icon">
            My Profile
        </li>
    </ol>
</nav>
@endsection
@section('content')
<!-- Profile Header -->
<div class="profile-header">
    <div class="profile-avatar-section">
        <div class="profile-avatar-container">
            @if ($user->profile_photo_path)
            <img src="{{ $user->profile_photo_path }}" alt="Profile Picture" class="profile-avatar-large"
                id="userProfileImg">
            @else
            <img src="{{ asset('backend/img/avatar.jpg') }}" alt="Profile Picture" class="profile-avatar-large">
            @endif
            @can('profile-update-photo')
            <button class="btn btn-change-photo" data-bs-toggle="modal" data-bs-target="#changePhotoModal">
                <img src="{{ asset('backend/img/ico/ico-status.svg') }}" alt="Change"> Change Photo
            </button>
            @endcan
        </div>
    </div>
    <div class="profile-info-section">
        <h2 class="profile-name">{{ $user->first_name }} {{ $user->last_name }}</h2>
        <p class="profile-email">{{ $user->email }}</p>
        <p class="profile-member-since">
            @foreach ($user->roles as $role)
            {{ formatRoleName($role->name) }}@if (!$loop->last)
            ,
            @endif
            @endforeach
        </p>
        @if(!auth()->user()->hasrole('tour_guide'))
        <div class="profile-stats">
            <div class="stat-item">
                <span class="stat-number">{{ $user->totalTeams() }}</span>
                <span class="stat-label">Total Team</span>
            </div>
            <div class="stat-item">
                <span class="stat-number">{{ $user?->totalGuides() }}</span>
                <span class="stat-label">Total Guides</span>
            </div>
            <div class="stat-item">
                <span class="stat-number">{{ $user?->totalCustomers() }}</span>
                <span class="stat-label">Total Customers</span>
            </div>
        </div>
        @endif
        @if(auth()->user()->hasrole('tour_guide'))
        <div class="profile-stats">
            <div class="stat-item">
                <span class="stat-number">{{ $upcomingTours }}</span>
                <span class="stat-label">Upcoming Tours</span>
            </div>
            <div class="stat-item">
                <span class="stat-number">{{ $completedTours }}</span>
                <span class="stat-label">Completed Tours</span>
            </div>
        </div>
        @endif
    </div>
</div>

<!-- Profile Content -->
<div class="row">
    <!-- Personal Information -->
    <div class="col-md-8">
        <form method="POST" class="profile-form" id="updateUserForm">
            @csrf
            @method('PUT')

            <div class="profile-section">
                <h3 class="section-title">
                    <img src="{{ asset('backend/img/ico/ico-profile.svg') }}" alt="Personal" class="section-icon">
                    Personal Information
                </h3>

                @if (session('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
                </div>
                @endif

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="first_name" class="form-label">First Name *</label>
                            <input type="text" class="form-control @error('first_name') is-invalid @enderror"
                                id="first_name" name="first_name" value="{{ old('first_name', $user->first_name) }}"
                                required>
                            @error('first_name')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="last_name" class="form-label">Last Name *</label>
                            <input type="text" class="form-control @error('last_name') is-invalid @enderror"
                                id="last_name" name="last_name" value="{{ old('last_name', $user->last_name) }}"
                                required>
                            @error('last_name')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="email" class="form-label">Email Address *</label>
                            <input type="email" class="form-control @error('email') is-invalid @enderror" id="email"
                                name="email" value="{{ old('email', $user->email) }}" style="background-color: #f5f5f5;"
                                required readonly>
                            @error('email')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="phone" class="form-label">Phone Number</label>
                            <input type="tel" class="form-control @error('phone') is-invalid @enderror" id="phone"
                                name="phone" value="{{ old('phone', $user->phone) }}">
                            @error('phone')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="date_of_birth" class="form-label">Date of Birth</label>
                            <input type="date" class="form-control @error('date_of_birth') is-invalid @enderror"
                                id="date_of_birth" name="date_of_birth"
                                value="{{ old('date_of_birth', optional(optional($user->userDetails)->date_of_birth)->format('Y-m-d')) }}">
                            @error('date_of_birth')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="nationality" class="form-label">Nationality</label>
                            <input type="text" class="form-control @error('nationality') is-invalid @enderror"
                                id="nationality" name="nationality"
                                value="{{ old('nationality', optional($user->userDetails)->nationality) }}">
                            @error('nationality')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="address" class="form-label">Address</label>
                    <textarea class="form-control @error('address') is-invalid @enderror" id="address" name="address"
                        rows="3">{{ old('address', optional($user->userDetails)->address) }}</textarea>
                    @error('address')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                {{-- <div class="row">
                    <div class="col-md-4">
                        <label for="country">Country</label>
                        <select id="country_id" class="form-control">
                            <option value="">Select Country</option>
                            @foreach ($countries as $country)
                            <option value="{{ $country->id }}">{{ $country->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="city_id" class="form-label">City</label>
                            <select class="form-control @error('city_id') is-invalid @enderror" id="city_id"
                                name="city_id">
                                <option value="">Select City</option>
                            </select>
                            @error('city_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="area_id" class="form-label">Area</label>
                            <select class="form-control @error('area_id') is-invalid @enderror" id="area_id"
                                name="area_id">
                                <option value="">Select Area</option>
                            </select>
                            @error('area_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div> --}}
            </div>

            <!-- Emergency Contact -->
            <div class="profile-section">
                <h3 class="section-title">
                    <img src="{{ asset('backend/img/ico/ico-status.svg') }}" alt="Emergency" class="section-icon">
                    Emergency Contact
                </h3>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="emergency_name" class="form-label">Contact Name</label>
                            <input type="text" class="form-control @error('emergency_name') is-invalid @enderror"
                                id="emergency_name" name="emergency_name"
                                value="{{ old('emergency_name', optional($user->userDetails)->emergency_name) }}">
                            @error('emergency_name')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="emergency_relation" class="form-label">Relationship</label>
                            <input type="text" class="form-control @error('emergency_relation') is-invalid @enderror"
                                id="emergency_relation" name="emergency_relation"
                                value="{{ old('emergency_relation', optional($user->userDetails)->emergency_relation) }}">
                            @error('emergency_relation')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="emergency_phone" class="form-label">Phone Number</label>
                            <input type="tel" class="form-control @error('emergency_phone') is-invalid @enderror"
                                id="emergency_phone" name="emergency_phone"
                                value="{{ old('emergency_phone', optional($user->userDetails)->emergency_phone) }}">
                            @error('emergency_phone')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="emergency_email" class="form-label">Email Address</label>
                            <input type="email" class="form-control @error('emergency_email') is-invalid @enderror"
                                id="emergency_email" name="emergency_email"
                                value="{{ old('emergency_email', optional($user->userDetails)->emergency_email) }}">
                            @error('emergency_email')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="profile-actions">
                @can('profile-edit')
                <button type="submit" class="btn btn-save-profile" id="updateUser">
                    <img src="{{ asset('backend/img/ico/ico-status.svg') }}" alt="Save"> Save Changes
                </button>
                @endcan

                @can('profile-export')
                <a href="{{ route('admin.profile.download') }}" type="button" class="btn btn-save-profile">
                    <i class="bi bi-download"></i> Download Profile
                </a>
                @endcan
                <button type="reset" class="btn btn-cancel-profile">
                    Cancel
                </button>
            </div>
        </form>
    </div>

    <!-- Account Settings Sidebar -->
    <div class="col-md-4">
        <div class="profile-sidebar">
            <!-- Account Security -->
            <div class="sidebar-section">
                <h4 class="sidebar-title">
                    <img src="{{ asset('backend/img/ico/ico-payment.svg') }}" alt="Security" class="sidebar-icon">
                    Account Security
                </h4>
                <div class="sidebar-content">
                    @can('profile-update-password')
                    <div class="security-item">
                        <span class="security-label">Change Your Password</span>
                        <button class="btn btn-change-password" data-bs-toggle="modal"
                            data-bs-target="#changePasswordModal">Change</button>
                    </div>
                    @endcan
                    {{-- <div class="mt-3 security-item">
                        <span class="security-label">Two-Factor Authentication</span>
                        <span id="twoFactorStatus"
                            class="badge {{ $user->two_factor_secret ? 'bg-success' : 'bg-secondary' }}"
                            data-bs-toggle="modal" data-bs-target="#twoFactorModal">
                            {{ $user->two_factor_secret ? 'Enabled' : 'Disabled' }}
                        </span>
                    </div> --}}

                    @can('profile-delete-account')
                    <div class="mt-3 security-item">
                        <span class="security-label">Delete Account</span>
                        <button class="text-center btn btn-delete-account" data-bs-toggle="modal"
                            data-bs-target="#deleteAccountModal">Delete</button>
                    </div>
                    @endcan
                    <div>
                        <span class="stat-label fw-bold">{{ $user->last_login_at ? $user->last_login_at->format('M j, Y
                            g:i A') : 'Never' }}</span>
                        <span class="stat-label">Last Login</span>
                    </div>
                </div>
            </div>

            <!-- Notification Settings -->
            <div class="sidebar-section">
                <h4 class="sidebar-title">
                    <img src="{{ asset('backend/img/ico/ico-status.svg') }}" alt="Notifications" class="sidebar-icon">
                    Notifications
                </h4>
                <form method="POST" action="#" id="notificationForm">
                    @csrf
                    <div class="sidebar-content">
                        <div class="notification-item">
                            <label class="notification-label">
                                <input type="checkbox" name="email_notifications" value="1" id="email_notifications" {{
                                    old('email_notifications', optional($user->userDetails)->email_notifications) ?
                                'checked' : '' }}>
                                Email Notifications
                            </label>
                        </div>
                        <div class="notification-item">
                            <label class="notification-label">
                                <input type="checkbox" name="marketing_updates" value="1" id="marketing_updates" {{
                                    old('marketing_updates', optional($user->userDetails)->marketing_updates) ?
                                'checked' : '' }}>
                                Marketing Updates
                            </label>
                        </div>
                        <div class="notification-label">
                            <label class="subscribe-newsletter">
                                <input type="checkbox" name="subscribe_newsletter" value="1" id="subscribe-newsletter"
                                    {{ old('subscribe_newsletter', $user->subscribe_newsletter) ? 'checked' : '' }}
                                >
                                Subscribe to Newsletter
                            </label>

                        </div>
                        {{-- <div class="notification-item">
                            <label class="notification-label">
                                <input type="checkbox" name="subscribe_newsletter" {{ old('subscribe_newsletter',
                                    $user->subscribe_newsletter) ? 'checked' : '' }}>
                                Newsletter Subscription
                            </label>
                        </div> --}}
                        @can('profile-manage-notifications')
                        <button type="submit" class="mt-2 btn btn-sm btn-primary" id="updateNotifications">Save
                            Preferences</button>
                        @endcan
                    </div>
                </form>
            </div>

            @if (!auth()->user()->hasRole('tour_guide'))
            <!-- Account Status -->
            <div class="sidebar-section">
                <h4 class="sidebar-title">
                    <img src="{{ asset('backend/img/ico/ico-status.svg') }}" alt="Status" class="sidebar-icon">
                    Account Status
                </h4>
                <div class="sidebar-content">
                    <div class="status-item">
                        <span class="status-label">Email Verification</span>
                        @if ($user->hasVerifiedEmail())
                        <span class="badge bg-success">Verified</span>
                        @else
                        <span class="badge bg-warning">Pending</span>
                        @endif
                    </div>
                    <div class="mt-2 status-item">
                        <span class="status-label">Account Status</span>
                        @if ($user->is_active)
                        <span class="badge bg-success">Active</span>
                        @else
                        <span class="badge bg-danger">Inactive</span>
                        @endif
                    </div>
                    <div class="mt-2 status-item">
                        <span class="status-label">Terms Accepted</span>
                        @if ($user->terms_accepted_at)
                        <span class="badge bg-success">{{ $user->terms_accepted_at->format('M j, Y') }}</span>
                        @else
                        <span class="badge bg-warning">Pending</span>
                        @endif
                    </div>
                </div>
            </div>
            @endif
        </div>
    </div>
</div>

<!-- Change Photo Modal -->
<div class="modal fade" id="changePhotoModal" tabindex="-1" aria-labelledby="changePhotoModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="changePhotoForm" enctype="multipart/form-data">
                @csrf
                <div class="modal-header">
                    <h5 class="text-white modal-title" id="changePhotoModalLabel">Change Profile Photo</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="profile_photo" class="form-label">Select New Photo</label>
                        <input type="file" class="form-control" id="profile_photo" name="profile_photo_path"
                            accept="image/*">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary" id="uploadPhotoButton">
                        Upload Photo
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>


<!-- Change Photo Modal -->
<div class="modal fade" id="changePhotoModal" tabindex="-1" aria-labelledby="changePhotoModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" action="{{ route('admin.profile.photo', $user->id) }}" enctype="multipart/form-data">
                @csrf
                <div class="modal-header">
                    <h5 class="text-white modal-title" id="changePhotoModalLabel">Change Profile Photo</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="profile_photo" class="form-label">Select New Photo</label>
                        <input type="file" class="form-control" id="profile_photo" name="profile_photo"
                            accept="image/*">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Upload Photo</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Change Password Modal -->
<div class="modal fade" id="changePasswordModal" tabindex="-1" aria-labelledby="changePasswordModalLabel"
    aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST">
                @csrf
                <div class="modal-header">
                    <h5 class="text-white modal-title" id="changePasswordModalLabel">Change Password</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-2 form-group">
                        <label for="current_password" class="form-label">Current Password</label>
                        <input type="password" class="form-control" id="current_password" name="current_password"
                            required>
                    </div>
                    <div class="mb-2 form-group">
                        <label for="new_password" class="form-label">New Password</label>
                        <input type="password" class="form-control" id="new_password" name="new_password" required>
                    </div>
                    <div class="mb-2 form-group">
                        <label for="new_password_confirmation" class="form-label">Confirm New Password</label>
                        <input type="password" class="form-control" id="new_password_confirmation"
                            name="new_password_confirmation" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Change Password</button>
                </div>
            </form>
        </div>
    </div>
</div>

@if (auth()->user()?->trashed())
<div class="modal fade show" id="restoreAccountModal" style="display:block;" aria-modal="true" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" action="{{ route('admin.users.restore') }}">
                @csrf
                <div class="modal-header">
                    <h5 class="text-white modal-title">Account Scheduled for Deletion</h5>
                </div>
                <div class="modal-body">
                    <p>Your account is scheduled for permanent deletion in 30 days.</p>
                    <p>You can restore it now to keep your data.</p>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success">Restore Account</button>
                    <a href="{{ route('logout') }}" class="btn btn-secondary">Logout</a>
                </div>
            </form>
        </div>
    </div>
</div>
@endif

<!-- Delete Account Modal (Soft Delete) -->
<div class="modal fade" id="deleteAccountModal" tabindex="-1" aria-labelledby="deleteAccountModalLabel"
    aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST">
                @csrf
                @method('DELETE')
                <div class="modal-header">
                    <h5 class="text-white modal-title" id="deleteAccountModalLabel">Delete Account</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p class="text-warning">
                        ⚠️ Are you sure you want to <strong>delete your account?</strong>.
                    </p>
                    {{-- <p class="text-warning">
                        ⚠️ This account will be <strong>temporarily deleted</strong> and scheduled for permanent
                        deletion in <strong>30 days</strong>.
                    </p>
                    <p>You can restore it anytime within this period.</p> --}}
                    <div class="form-group">
                        <label for="confirm_password" class="form-label">Confirm Password</label>
                        <input type="password" name="confirm_password" id="confirm_password" class="form-control"
                            required placeholder="Enter your password">
                    </div>
                </div>
                <div class="modal-footer">
                    {{-- <button type="submit" class="btn btn-danger">Schedule Deletion</button> --}}
                    <button type="submit" class="btn btn-danger">Delete</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                </div>
            </form>
        </div>
    </div>
</div>


<!-- Two-Factor Authentication Modal -->
<div class="modal fade" id="twoFactorModal" tabindex="-1" aria-labelledby="twoFactorModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="text-white modal-title" id="twoFactorModalLabel">Two-Factor Authentication</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="twoFactorMessage">
                @if ($user->two_factor_secret)
                <p class="text-success">✅ Two-Factor Authentication is currently <strong>enabled</strong>.</p>
                <p>If you disable it, your account will rely only on your password for login.</p>
                @else
                <p class="text-danger">⚠️ Two-Factor Authentication is currently <strong>disabled</strong>.</p>
                <p>Enabling it will add an extra layer of security to your account.</p>
                @endif
            </div>
            <div class="modal-footer">
                <button type="submit" id="toggleTwoFactor"
                    class="btn {{ $user->two_factor_secret ? 'btn-danger' : 'btn-primary' }}"
                    data-action="{{ $user->two_factor_secret ? 'disable' : 'enable' }}">
                    {{ $user->two_factor_secret ? 'Disable 2FA' : 'Enable 2FA' }}
                </button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {

            document.getElementById('toggleTwoFactor').addEventListener('click', function() {
                let action = this.getAttribute('data-action');
                let userId = "{{ $user->id }}";

                this.innerHTML =
                    '<span class="spinner-border spinner-border-sm me-2"></span> Processing...';
                this.disabled = true;

                axios.post(`{{ route('admin.profile.twofactor.toggle', $user->id) }}`, {
                        action: action,
                        _token: "{{ csrf_token() }}"
                    })
                    .then(response => {
                        if (response.data.success) {

                            let statusBadge = document.getElementById('twoFactorStatus');
                            let btn = document.getElementById('toggleTwoFactor');
                            let msg = document.getElementById('twoFactorMessage');

                            if (response.data.two_factor_secret) {
                                statusBadge.classList.remove('bg-secondary');
                                statusBadge.classList.add('bg-success');
                                statusBadge.innerText = "Enabled";

                                btn.classList.remove('btn-primary');
                                btn.classList.add('btn-danger');
                                btn.innerText = "Disable 2FA";
                                btn.setAttribute('data-action', 'disable');

                                msg.innerHTML =
                                    `<p class="text-success">✅ Two-Factor Authentication is currently <strong>enabled</strong>.</p>
                                     <p>If you disable it, your account will rely only on your password for login.</p>`;
                            } else {
                                statusBadge.classList.remove('bg-success');
                                statusBadge.classList.add('bg-secondary');
                                statusBadge.innerText = "Disabled";

                                btn.classList.remove('btn-danger');
                                btn.classList.add('btn-primary');
                                btn.innerText = "Enable 2FA";
                                btn.setAttribute('data-action', 'enable');

                                msg.innerHTML = `<p class="text-danger">⚠️ Two-Factor Authentication is currently <strong>disabled</strong>.</p>
                                     <p>Enabling it will add an extra layer of security to your account.</p>`;
                            }

                            setTimeout(() => {
                                let modal = bootstrap.Modal.getInstance(document.getElementById(
                                    'twoFactorModal'));
                                modal.hide();
                            }, 800);
                        }
                    })
                    .catch(error => {
                        alert("Something went wrong! " + error.response?.data?.message ?? error
                            .message);
                    })
                    .finally(() => {
                        this.disabled = false;
                        this.innerText = action === "enable" ? "Enable 2FA" : "Disable 2FA";
                    });
            });

            const notificationForm = document.getElementById('notificationForm');
            const saveBtn = document.getElementById('updateNotifications');
            const updateNotificationsUrl = "{{ route('admin.profile.notifications', $user->id) }}";

            notificationForm.addEventListener('submit', function(e) {
                e.preventDefault();

                const originalText = saveBtn.innerHTML;
                saveBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Saving...';
                saveBtn.disabled = true;

                const formData = new FormData(notificationForm);
                formData.append('_method', 'PUT');

                axios.post(updateNotificationsUrl, formData)
                    .then(response => {
                        if (response.data.success) {
                            toastr.success(response.data.message || "Preferences saved successfully!");
                        } else {
                            toastr.error(response.data.message || "Failed to save preferences.");
                        }
                    })
                    .catch(error => {
                        toastr.error(error.response?.data?.message ||
                            "An error occurred while saving preferences.");
                    })
                    .finally(() => {
                        saveBtn.innerHTML = originalText;
                        saveBtn.disabled = false;
                    });
            });



            // updateUserForm
            const updateUserForm = document.getElementById("updateUserForm");
            updateUserForm.addEventListener("submit", function(e) {
                e.preventDefault();
                clearErrors();

                const formData = new FormData(updateUserForm);

                const originalText = updateUserForm.querySelector("button[type='submit']").innerHTML;
                updateUserForm.querySelector("button[type='submit']").innerHTML =
                    '<span class="spinner-border spinner-border-sm me-2"></span> Processing...';
                updateUserForm.querySelector("button[type='submit']").disabled = true;

                const updateUserFormUrl = `{{ route('admin.users.update', $user->id) }}`;

                axios.post(updateUserFormUrl, formData)
                    .then(response => {
                        if (response.data.success) {
                            toastr.success(response.data.message || "Profile updated successfully!");
                            setTimeout(() => {
                                window.location.reload();
                            }, 1000);
                        } else {
                            toastr.error(response.data.message || "Failed to update profile.");
                        }
                    })
                    .catch(error => {
                        toastr.error(error.response?.data?.message || "Failed to update profile.");
                    })
                    .finally(() => {
                        updateUserForm.querySelector("button[type='submit']").innerHTML = originalText;
                        updateUserForm.querySelector("button[type='submit']").disabled = false;
                    });
            });

            const deleteAccountModal = document.getElementById("deleteAccountModal");
            const deleteForm = deleteAccountModal.querySelector("form");
            const deleteBtn = deleteForm.querySelector("button[type='submit']");
            const passwordInput = document.getElementById("confirm_password");

            const deleteUserUrl = "{{ route('admin.users.destroy', $user->id) }}";

            deleteForm.addEventListener("submit", function(e) {
                e.preventDefault();
                clearErrors();

                const password = passwordInput.value.trim();
                if (!password) {
                    showError(passwordInput, "Password is required.");
                    return;
                }

                const originalText = deleteBtn.innerHTML;
                deleteBtn.innerHTML =
                    '<span class="spinner-border spinner-border-sm me-2"></span> Processing...';
                deleteBtn.disabled = true;

                axios.delete(deleteUserUrl, {
                        data: {
                            confirm_password: password
                        }
                    })
                    .then(response => {
                        if (response.data.success) {
                            toastr.success(response.data.message || "Account scheduled for deletion!");
                            setTimeout(() => {
                                window.location.reload();
                            }, 1000);
                        } else {
                            toastr.error(response.data.message || "Failed to delete account.");
                        }
                    })
                    .catch(error => {
                        if (error.response?.data?.errors?.confirm_password) {
                            showError(passwordInput, error.response.data.errors.confirm_password[0]);
                        } else if (error.response?.data?.message) {
                            toastr.error(error.response.data.message);
                        } else {
                            toastr.error("Something went wrong!");
                        }
                    })
                    .finally(() => {
                        deleteBtn.innerHTML = originalText;
                        deleteBtn.disabled = false;
                    });
            });

            function clearErrors() {
                deleteForm.querySelectorAll('.error-message').forEach(el => el.remove());
            }

            function showError(input, message) {
                if (!input) return;
                let errorEl = input.parentElement.querySelector('.error-message');
                if (!errorEl) {
                    errorEl = document.createElement('div');
                    errorEl.classList.add('error-message', 'text-danger', 'mt-1');
                    input.parentElement.appendChild(errorEl);
                }
                errorEl.textContent = message;
            }




            const changePasswordModal = document.getElementById("changePasswordModal");
            const changePasswordForm = changePasswordModal.querySelector("form");
            const submitBtn = changePasswordForm.querySelector("button[type='submit']");

            changePasswordForm.addEventListener("submit", function(e) {
                e.preventDefault();

                changePasswordForm.querySelectorAll('.error-message').forEach(el => el.remove());

                const originalText = submitBtn.innerHTML;
                submitBtn.innerHTML =
                    '<span class="spinner-border spinner-border-sm me-2"></span> Changing...';
                submitBtn.disabled = true;

                const formData = new FormData(changePasswordForm);
                formData.append('_method', 'PUT');

                const cngPwdUrl = `{{ route('admin.profile.update-password', $user->id) }}`;

                axios.post(cngPwdUrl, formData)
                    .then(response => {
                        if (response.data.success) {
                            toastr.success(response.data.message || 'Password changed successfully!');
                            // Close modal after short delay
                            setTimeout(() => {
                                const modalInstance = bootstrap.Modal.getInstance(
                                    changePasswordModal);
                                modalInstance.hide();
                                changePasswordForm.reset();
                            }, 1000);
                        } else {
                            toastr.error(response.data.message || 'Failed to change password.');
                        }
                    })
                    .catch(error => {
                        if (error.response?.data?.errors) {
                            const errors = error.response.data.errors;
                            Object.keys(errors).forEach(field => {
                                const input = changePasswordForm.querySelector(
                                    `[name="${field}"]`);
                                showError(input, errors[field][0]);
                            });
                        } else {
                            toastr.error(error.response?.data?.message || error.message ||
                                'Failed to change password.');
                        }
                    })
                    .finally(() => {
                        submitBtn.innerHTML = originalText;
                        submitBtn.disabled = false;
                    });
            });

            function showError(input, message) {
                if (!input) return;
                let errorEl = input.parentElement.querySelector('.error-message');
                if (!errorEl) {
                    errorEl = document.createElement('div');
                    errorEl.classList.add('error-message', 'text-danger', 'mt-1');
                    input.parentElement.appendChild(errorEl);
                }
                errorEl.textContent = message;
            }

            // change photo
            document.getElementById('changePhotoForm').addEventListener('submit', function(e) {
                e.preventDefault();

                let formData = new FormData(this);
                formData.append('_method', 'PUT');
                let uploadBtn = document.getElementById('uploadPhotoButton');
                let userId = "{{ $user->id }}";
                const photoUrl = `{{ route('admin.profile.photo', $user->id) }}`;

                uploadBtn.disabled = true;
                uploadBtn.innerHTML = `<span class="spinner-border spinner-border-sm"></span> Uploading...`;

                axios.post(photoUrl, formData, {
                        headers: {
                            'Content-Type': 'multipart/form-data'
                        }
                    })
                    .then(response => {

                        toastr.success("Profile photo updated successfully!");

                        let modal = bootstrap.Modal.getInstance(document.getElementById(
                            'changePhotoModal'));
                        modal.hide();

                        console.log(response.data.data.profile_photo_path);

                        if (response.data.data.profile_photo_path) {
                            document.getElementById('userProfileImg').src = response.data.data.profile_photo_path;
                        }else{
                            window.location.reload();
                        }
                    })
                    .catch(error => {
                        toastr.error(error.response?.data?.message || "Upload failed!");
                    })
                    .finally(() => {
                        uploadBtn.disabled = false;
                        uploadBtn.innerHTML = `Upload Photo`;
                    });
            });




            // const countrySelect = document.getElementById('country_id');
            // const citySelect = document.getElementById('city_id');
            // const areaSelect = document.getElementById('area_id');

            // if (countrySelect) {
            //     countrySelect.addEventListener('change', function() {
            //         const countryId = this.value;
            //         citySelect.innerHTML = '<option value="">Select City</option>';
            //         areaSelect.innerHTML = '<option value="">Select Area</option>';

            //         if (countryId) {
            //             axios.get(`{{ url('admin/cities/all') }}?country_id=${countryId}`)
            //                 .then(response => {
            //                     if (response.data && Array.isArray(response.data.data)) {
            //                         response.data.data.forEach(city => {
            //                             const option = document.createElement('option');
            //                             option.value = city.id;
            //                             option.textContent = city.name;
            //                             citySelect.appendChild(option);
            //                         });
            //                     }
            //                 })
            //                 .catch(error => {
            //                     console.error('Error fetching cities:', error);
            //                 });

            //         }
            //     });
            // }

            // if (citySelect) {
            //     citySelect.addEventListener('change', function() {
            //         const cityId = this.value;

            //         areaSelect.innerHTML = '<option value="">Select Area</option>';

            //         if (cityId) {
            //             axios.get(`{{ url('admin/areas/all') }}?city_id=${cityId}`)
            //                 .then(response => {
            //                     if (response.data && Array.isArray(response.data.data)) {
            //                         response.data.data.forEach(area => {
            //                             const option = document.createElement('option');
            //                             option.value = area.id;
            //                             option.textContent = area.name;
            //                             areaSelect.appendChild(option);
            //                         });
            //                     }
            //                 })
            //                 .catch(error => {
            //                     console.error('Error fetching areas:', error);
            //                 });
            //         }
            //     });
            // }
        });
</script>
@endpush