{{-- resources/views/user_mangement/usersview.blade.php --}}
@extends('layouts.app')

@section('content')
<div class="d-flex flex-column flex-column-fluid">

    <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
        <div class="app-container container-fluid d-flex flex-stack">
            <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">
                    Account Overview
                </h1>
                <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                    <li class="breadcrumb-item text-muted">
                        <a href="{{ route('dashboard') }}" class="text-muted text-hover-primary">Home</a>
                    </li>
                    <li class="breadcrumb-item"><span class="bullet bg-gray-500 w-5px h-2px"></span></li>
                    <li class="breadcrumb-item text-muted">Account</li>
                </ul>
            </div>
        </div>
    </div>

    <div id="kt_app_content" class="app-content flex-column-fluid">
        <div class="app-container container-fluid">

            {{-- Flash Toast --}}
            @if(session('profile_success') || session('address_success') || session('security_success') || session('success'))
                <div id="flashToast" class="position-fixed top-0 end-0 p-3" style="z-index: 9999;">
                    <div class="toast show align-items-center text-white bg-success border-0 shadow" role="alert">
                        <div class="d-flex">
                            <div class="toast-body">
                                <i class="bi bi-check-circle me-2"></i>
                                {{ session('profile_success') ?? session('address_success') ?? session('security_success') ?? session('success') }}
                            </div>
                            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
                        </div>
                    </div>
                </div>
            @endif

            {{-- Profile Header Card --}}
            <div class="card mb-5 mb-xl-10">
                <div class="card-body pt-9 pb-0">
                    <div class="d-flex flex-wrap flex-sm-nowrap">

                        {{-- Avatar --}}
                        <div class="me-7 mb-4">
                            <div class="symbol symbol-100px symbol-lg-160px symbol-fixed position-relative">
                                <img
                                    src="{{ !empty($user->user_image)
                                        ? asset('storage/logos/' . $user->user_image)
                                        : 'https://cdn-icons-png.flaticon.com/512/149/149071.png' }}"
                                    alt="avatar"
                                    style="width:100px;height:100px;object-fit:cover;border-radius:8px;"
                                    onerror="this.src='https://cdn-icons-png.flaticon.com/512/149/149071.png';">
                                <div class="position-absolute translate-middle bottom-0 start-100 mb-6 bg-success rounded-circle border border-4 border-body h-20px w-20px"></div>
                            </div>
                        </div>

                        {{-- Info --}}
                        <div class="flex-grow-1">
                            <div class="d-flex justify-content-between align-items-start flex-wrap mb-2">
                                <div class="d-flex flex-column">
                                    <div class="d-flex align-items-center mb-2">
                                        <span class="text-gray-900 fs-2 fw-bold me-2">{{ $user->name }}</span>
                                        <i class="ki-duotone ki-verify fs-1 text-primary">
                                            <span class="path1"></span><span class="path2"></span>
                                        </i>
                                    </div>
                                    <div class="d-flex flex-wrap fw-semibold fs-6 mb-4 pe-2">
                                        <span class="d-flex align-items-center text-gray-500 me-5 mb-2">
                                            <i class="ki-duotone ki-profile-circle fs-4 me-1">
                                                <span class="path1"></span><span class="path2"></span><span class="path3"></span>
                                            </i>
                                            {{ $user->role?->role_name ?? 'N/A' }}
                                        </span>
                                        <span class="d-flex align-items-center text-gray-500 me-5 mb-2">
                                            <i class="ki-duotone ki-building fs-4 me-1">
                                                <span class="path1"></span><span class="path2"></span>
                                            </i>
                                            {{ $user->branch?->branch_name ?? 'N/A' }}
                                        </span>
                                        <span class="d-flex align-items-center text-gray-500 mb-2">
                                            <i class="ki-duotone ki-sms fs-4 me-1">
                                                <span class="path1"></span><span class="path2"></span>
                                            </i>
                                            {{ $user->email }}
                                        </span>
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex flex-wrap flex-stack">
                                <div class="d-flex flex-column flex-grow-1 pe-8">
                                    <div class="d-flex flex-wrap">
                                        <div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3">
                                            <div class="d-flex align-items-center">
                                                <i class="ki-duotone ki-briefcase fs-3 text-primary me-2"><span class="path1"></span><span class="path2"></span></i>
                                                <div class="fs-2 fw-bold">128</div>
                                            </div>
                                            <div class="fw-semibold fs-6 text-gray-500">Bookings Handled</div>
                                        </div>
                                        <div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3">
                                            <div class="d-flex align-items-center">
                                                <i class="ki-duotone ki-calendar fs-3 text-warning me-2"><span class="path1"></span><span class="path2"></span></i>
                                                <div class="fs-2 fw-bold">45</div>
                                            </div>
                                            <div class="fw-semibold fs-6 text-gray-500">Upcoming Tours</div>
                                        </div>
                                        <div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3">
                                            <div class="d-flex align-items-center">
                                                <i class="ki-duotone ki-message fs-3 text-info me-2"><span class="path1"></span><span class="path2"></span></i>
                                                <div class="fs-2 fw-bold">92%</div>
                                            </div>
                                            <div class="fw-semibold fs-6 text-gray-500">Positive Feedback</div>
                                        </div>
                                    </div>
                                </div>

                                <div class="d-flex align-items-center w-200px w-sm-300px flex-column mt-3">
                                    <div class="d-flex justify-content-between w-100 mt-auto mb-2">
                                        <span class="fw-semibold fs-6 text-gray-500">Profile Completion</span>
                                        <span class="fw-bold fs-6">{{ $completion }}%</span>
                                    </div>
                                    <div class="h-5px mx-3 w-100 bg-light mb-3">
                                        <div class="bg-success rounded h-5px" role="progressbar" style="width: {{ $completion }}%;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Tab Nav --}}
                    @php $activeTab = $activeTab ?? 'profile'; @endphp
                    <ul class="nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bold" id="profileViewTabs" role="tablist">
                        <li class="nav-item mt-2" role="presentation">
                            <a class="nav-link text-active-primary ms-0 me-10 py-5 {{ $activeTab === 'profile' ? 'active' : '' }}"
                               data-bs-toggle="tab" href="#pv_profile" role="tab">
                                <i class="bi bi-person-circle me-1"></i> Profile Settings
                            </a>
                        </li>
                        <li class="nav-item mt-2" role="presentation">
                            <a class="nav-link text-active-primary ms-0 me-10 py-5 {{ $activeTab === 'security' ? 'active' : '' }}"
                               data-bs-toggle="tab" href="#pv_security" role="tab">
                                <i class="bi bi-shield-lock me-1"></i> Security
                            </a>
                        </li>
                      
                    </ul>
                </div>
            </div>

            {{-- Tab Content --}}
            <div class="tab-content">

                {{-- ══════════════════════════════════════════════════════════
                     TAB 1 : Profile Settings
                ══════════════════════════════════════════════════════════ --}}
                <div class="tab-pane fade {{ $activeTab === 'profile' ? 'show active' : '' }}" id="pv_profile" role="tabpanel">
                    <div class="card mb-5 mb-xl-10">
                        <div class="card-header cursor-pointer">
                            <div class="card-title m-0">
                                <h3 class="fw-bold m-0">Profile Details</h3>
                            </div>

                            {{-- ── Role-aware Edit Profile button ── --}}
                          @if(auth()->user()->role?->role_name === 'admin')
                            <a href="{{ route('admin.user.form', ['id' => $user->id]) }}" class="btn btn-primary">
                                Edit Profile
                            </a>
                        @else
                            <a href="{{ route('profile.edit') }}" class="btn btn-primary">
                                Edit Profile
                            </a>
                        @endif
                        </div>
                        <div class="card-body p-9">
                            <div class="row mb-7">
                                <label class="col-lg-4 fw-semibold text-muted">User Name</label>
                                <div class="col-lg-8"><span class="fw-bold fs-6 text-gray-800">{{ $user->name ?? 'N/A' }}</span></div>
                            </div>
                            <div class="row mb-7">
                                <label class="col-lg-4 fw-semibold text-muted">Email</label>
                                <div class="col-lg-8"><span class="fw-bold fs-6 text-gray-800">{{ $user->email ?? 'N/A' }}</span></div>
                            </div>
                            <div class="row mb-7">
                                <label class="col-lg-4 fw-semibold text-muted">Company</label>
                                <div class="col-lg-8"><span class="fw-semibold fs-6 text-gray-800">{{ $user->company?->name ?? 'N/A' }}</span></div>
                            </div>
                            <div class="row mb-7">
                                <label class="col-lg-4 fw-semibold text-muted">Contact Phone</label>
                                <div class="col-lg-8 d-flex align-items-center">
                                    <span class="fw-bold fs-6 text-gray-800 me-2">{{ $user->profile->phone ?? 'N/A' }}</span>
                                    @if(!empty($user->profile->phone))
                                        <span class="badge badge-light-success">Verified</span>
                                    @endif
                                </div>
                            </div>
                            <div class="row mb-7">
                                <label class="col-lg-4 fw-semibold text-muted">Address</label>
                                <div class="col-lg-8"><span class="fw-semibold fs-6 text-gray-800">{{ $user->profile->address ?? 'N/A' }}</span></div>
                            </div>
                            <div class="row mb-7">
                                <label class="col-lg-4 fw-semibold text-muted">Country</label>
                                <div class="col-lg-8"><span class="fw-semibold fs-6 text-gray-800">{{ $user->profile->country ?? 'N/A' }}</span></div>
                            </div>
                            <div class="row mb-7">
                                <label class="col-lg-4 fw-semibold text-muted">State</label>
                                <div class="col-lg-8"><span class="fw-semibold fs-6 text-gray-800">{{ $user->profile->state ?? 'N/A' }}</span></div>
                            </div>
                            <div class="row mb-7">
                                <label class="col-lg-4 fw-semibold text-muted">City</label>
                                <div class="col-lg-8"><span class="fw-semibold fs-6 text-gray-800">{{ $user->profile->city ?? 'N/A' }}</span></div>
                            </div>
                            <div class="row mb-7">
                                <label class="col-lg-4 fw-semibold text-muted">Postal Code</label>
                                <div class="col-lg-8"><span class="fw-semibold fs-6 text-gray-800">{{ $user->profile->postal_code ?? 'N/A' }}</span></div>
                            </div>
                            <div class="row mb-7">
                                <label class="col-lg-4 fw-semibold text-muted">Branch Name</label>
                                <div class="col-lg-8"><span class="fw-semibold fs-6 text-gray-800">{{ $user->branch?->branch_name ?? 'N/A' }}</span></div>
                            </div>
                            <div class="row mb-7">
                                <label class="col-lg-4 fw-semibold text-muted">Department</label>
                                <div class="col-lg-8"><span class="fw-bold fs-6 text-gray-800">{{ $user->department?->dep_name ?? 'N/A' }}</span></div>
                            </div>
                            <div class="row mb-7">
                                <label class="col-lg-4 fw-semibold text-muted">Role</label>
                                <div class="col-lg-8"><span class="fw-bold fs-6 text-gray-800">{{ $user->role?->role_name ?? 'N/A' }}</span></div>
                            </div>
                            <div class="row mb-7">
                                <label class="col-lg-4 fw-semibold text-muted">Currency</label>
                                <div class="col-lg-8">
                                    <span class="fw-bold fs-6 text-gray-800">
                                        {{ $user->currency?->currency_name ?? 'N/A' }}
                                        @if($user->currency) ({{ $user->currency->c_shortname }}) @endif
                                    </span>
                                </div>
                            </div>

                            {{-- Admin-only fields --}}
                            @if(auth()->user()->role?->role_name === 'admin')
                            <div class="row mb-7">
                                <label class="col-lg-4 fw-semibold text-muted">Markup Percentage</label>
                                <div class="col-lg-8"><span class="fw-bold fs-6 text-gray-800">{{ $user->markup ?? 'N/A' }}</span></div>
                            </div>
                            <div class="row mb-0">
                                <label class="col-lg-4 fw-semibold text-muted">Credit Limit</label>
                                <div class="col-lg-8"><span class="fw-bold fs-6 text-gray-800">{{ $user->credit_limit ?? 'N/A' }}</span></div>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>

                {{-- ══════════════════════════════════════════════════════════
                     TAB 2 : Security
                ══════════════════════════════════════════════════════════ --}}
                <div class="tab-pane fade {{ $activeTab === 'security' ? 'show active' : '' }}" id="pv_security" role="tabpanel">

                    {{-- Change Password Card --}}
                    <div class="card mb-5 mb-xl-10">
                        <div class="card-body px-6 py-8">
                            <div class="d-flex align-items-center justify-content-between py-4 border-bottom">
                                <div>
                                    <p class="fw-bold text-gray-800 mb-1">Password</p>
                                    <p class="text-muted small mb-0">
                                        Last Changed: {{ $user->updated_at ? $user->updated_at->format('d M Y, h:i A') : 'N/A' }}
                                    </p>
                                </div>
                                <button type="button" class="btn btn-danger btn-sm px-4"
                                        data-bs-toggle="modal" data-bs-target="#changePasswordModal">
                                    Change
                                </button>
                            </div>
                        </div>
                    </div>

                    {{-- MFA Card --}}
                    <div class="card mt-5">
                        <div class="card-body px-6 py-6">
                            <div class="d-flex align-items-center justify-content-between py-3">
                                <div class="d-flex align-items-center gap-3">
                                    <i class="ki-duotone ki-lock-2 fs-2x text-primary">
                                        <span class="path1"></span><span class="path2"></span>
                                        <span class="path3"></span><span class="path4"></span><span class="path5"></span>
                                    </i>
                                    <div>
                                        <p class="fw-bold text-gray-800 mb-0">Two-Factor Authentication</p>
                                        <p class="text-muted small mb-0">
                                            Secure your account with Google Authenticator &nbsp;
                                            @if($user->mfa && $user->mfa->enabled)
                                                <span class="badge badge-light-success">Enabled</span>
                                            @else
                                                <span class="badge badge-light-danger">Disabled</span>
                                            @endif
                                        </p>
                                    </div>
                                </div>
                                <a href="javascript:void(0);" class="menu-link px-3 text-hover-primary admin-two-factor-btn">
                                    <i class="ki-duotone ki-lock-2 fs-2">
                                        <span class="path1"></span><span class="path2"></span>
                                        <span class="path3"></span><span class="path4"></span><span class="path5"></span>
                                    </i>
                                    &nbsp; Manage Two-Factor
                                </a>
                            </div>
                        </div>
                    </div>

                    {{-- Two Factor Drawer --}}
                    <div id="admin_two_factor_drawer" class="bg-body"
                        data-kt-drawer="true"
                        data-kt-drawer-activate="true"
                        data-kt-drawer-overlay="true"
                        data-kt-drawer-width="{default:'450px', md:'500px'}"
                        data-kt-drawer-direction="end"
                        data-kt-drawer-close="#admin_two_factor_close">
                        <div class="card w-100 border-0 rounded-0">
                            <div class="card-header pe-5">
                                <div class="card-title">
                                    <h4 class="fw-bold">Two Factor Authentication</h4>
                                </div>
                                <div class="card-toolbar">
                                    <button class="btn btn-sm btn-icon btn-active-color-danger" id="admin_two_factor_close"> ✕ </button>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="mb-6 bg-light-primary p-4 rounded">
                                    User Name : <strong class="text-primary">{{ $user->name }}</strong>
                                </div>
                                <form id="adminTwoFactorForm" method="POST" action="{{ route('profile.twofactor') }}">
                                    @csrf
                                    <div class="form-check mb-3">
                                        <input class="form-check-input" type="radio" name="two_factor_action" value="enable" id="adminMfaEnable">
                                        <label class="form-check-label" for="adminMfaEnable">Enable — Require Google Authenticator</label>
                                    </div>
                                    <div class="form-check mb-3">
                                        <input class="form-check-input" type="radio" name="two_factor_action" value="disable" id="adminMfaDisable">
                                        <label class="form-check-label" for="adminMfaDisable">Disable — Allow login without 2FA</label>
                                    </div>
                                    <div class="form-check mb-5">
                                        <input class="form-check-input" type="radio" name="two_factor_action" value="reset" id="adminMfaReset">
                                        <label class="form-check-label text-danger" for="adminMfaReset">Reset — Reset Google Authenticator keys</label>
                                    </div>
                                    <button type="submit" class="btn btn-primary w-100">Update 2FA Settings</button>
                                </form>
                            </div>
                        </div>
                    </div>

                </div>

                {{-- ══════════════════════════════════════════════════════════
                     TAB 3 : Site Settings  (Admin only)
                ══════════════════════════════════════════════════════════ --}}
                @if(auth()->user()->role?->role_name === 'admin')
                <div class="tab-pane fade {{ $activeTab === 'site_settings' ? 'show active' : '' }}" id="pv_site_settings" role="tabpanel">
                    <div class="card mb-5 mb-xl-10">
                        <div class="card-header border-bottom px-6 pt-6 pb-4">
                            <h5 class="card-title fw-bold text-gray-800 mb-0">Site Settings</h5>
                        </div>
                        <div class="card-body px-6 py-8">

                            @if($errors->any() && $activeTab === 'site_settings')
                                <div class="alert alert-danger alert-dismissible fade show mb-5">
                                    <ul class="mb-0">
                                        @foreach($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                </div>
                            @endif

                            @php $setting = \App\Models\SiteSetting::first(); @endphp

                            <form method="POST" action="{{ route('myprofile') }}" enctype="multipart/form-data">
                                @csrf
                                <div class="row g-4 mb-6">

                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold required">Site Title</label>
                                        <input type="text" name="title" class="form-control"
                                               value="{{ old('title', $setting->title ?? '') }}" required>
                                    </div>

                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold">Site Name</label>
                                        <input type="text" name="site_name" class="form-control"
                                               value="{{ old('site_name', $setting->site_name ?? '') }}">
                                    </div>

                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold">Logo</label>
                                        @if(!empty($setting->logo))
                                            <div class="mb-2">
                                                <img src="{{ asset('uploads/site/' . $setting->logo) }}"
                                                     alt="logo" style="height:50px;object-fit:contain;">
                                            </div>
                                        @endif
                                        <input type="file" name="logo" class="form-control" accept="image/png,image/jpeg">
                                        <small class="text-muted">Allowed: JPG, PNG</small>
                                    </div>

                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold">Favicon</label>
                                        @if(!empty($setting->favicon))
                                            <div class="mb-2">
                                                <img src="{{ asset('uploads/site/' . $setting->favicon) }}"
                                                     alt="favicon" style="height:32px;object-fit:contain;">
                                            </div>
                                        @endif
                                        <input type="file" name="favicon" class="form-control"
                                               accept="image/png,image/x-icon,image/vnd.microsoft.icon">
                                        <small class="text-muted">Allowed: PNG, ICO</small>
                                    </div>

                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold">Contact Number</label>
                                        <input type="text" name="contact_number" class="form-control"
                                               value="{{ old('contact_number', $setting->contact_number ?? '') }}">
                                    </div>

                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold">Email</label>
                                        <input type="email" name="email" class="form-control"
                                               value="{{ old('email', $setting->email ?? '') }}">
                                    </div>

                                    <div class="col-md-12">
                                        <label class="form-label fw-semibold">Address</label>
                                        <textarea name="address" class="form-control" rows="3">{{ old('address', $setting->address ?? '') }}</textarea>
                                    </div>

                                    <hr>
                                    <h5 class="fw-bold text-primary">Social Media</h5>

                                    <div class="col-md-6">
                                        <label>Facebook</label>
                                        <input type="url" name="facebook" class="form-control"
                                               value="{{ old('facebook', $setting->facebook ?? '') }}">
                                    </div>
                                    <div class="col-md-6">
                                        <label>Twitter</label>
                                        <input type="url" name="twitter" class="form-control"
                                               value="{{ old('twitter', $setting->twitter ?? '') }}">
                                    </div>
                                    <div class="col-md-6">
                                        <label>Instagram</label>
                                        <input type="url" name="instagram" class="form-control"
                                               value="{{ old('instagram', $setting->instagram ?? '') }}">
                                    </div>
                                    <div class="col-md-6">
                                        <label>LinkedIn</label>
                                        <input type="url" name="linkedin" class="form-control"
                                               value="{{ old('linkedin', $setting->linkedin ?? '') }}">
                                    </div>
                                    <div class="col-md-6">
                                        <label>Pinterest</label>
                                        <input type="url" name="pinterest" class="form-control"
                                               value="{{ old('pinterest', $setting->pinterest ?? '') }}">
                                    </div>

                                    <hr>
                                    <h5 class="fw-bold text-primary">SEO Information</h5>

                                    <div class="col-md-12">
                                        <label>Meta Title</label>
                                        <input type="text" name="meta_title" class="form-control"
                                               value="{{ old('meta_title', $setting->meta_title ?? '') }}">
                                    </div>
                                    <div class="col-md-12">
                                        <label>Meta Keywords</label>
                                        <textarea name="meta_keywords" class="form-control">{{ old('meta_keywords', $setting->meta_keywords ?? '') }}</textarea>
                                    </div>
                                    <div class="col-md-12">
                                        <label>Meta Description</label>
                                        <textarea name="meta_description" class="form-control">{{ old('meta_description', $setting->meta_description ?? '') }}</textarea>
                                    </div>

                                </div>

                                <div class="d-flex justify-content-end border-top pt-5">
                                    <button type="submit" class="btn btn-danger px-6">
                                        <i class="bi bi-save me-1"></i> Update Settings
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                @endif

            </div>{{-- end tab-content --}}
        </div>
    </div>
</div>

{{-- ══════════════════════════════════════════════════════════════════════
     Change Password Modal
══════════════════════════════════════════════════════════════════════ --}}
<div class="modal fade" id="changePasswordModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" style="max-width:460px;">
        <div class="modal-content">
            <div class="modal-header border-bottom pb-4">
                <h5 class="modal-title fw-bold">Change Password</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ route('profile.password') }}">
                @csrf
                <div class="modal-body py-6 px-6">
                    @if($errors->hasAny(['current_password', 'password']))
                        <div class="alert alert-danger alert-dismissible fade show mb-4">
                            <ul class="mb-0">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif
                    <div class="mb-4">
                        <label class="form-label fw-semibold">Current Password <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text bg-light border-end-0"><i class="bi bi-lock text-muted"></i></span>
                            <input type="password" id="currentPwd" name="current_password"
                                   class="form-control border-start-0 ps-0 @error('current_password') is-invalid @enderror">
                            <button type="button" class="input-group-text bg-light border-start-0" onclick="togglePwd('currentPwd', this)">
                                <i class="bi bi-eye-slash text-muted"></i>
                            </button>
                        </div>
                        @error('current_password')
                            <div class="text-danger small mt-1">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Autogenerate password -->
                    <div class="text-end mb-3">
                        <button type="button" class="btn btn-sm btn-outline-primary" id="autoGeneratePassword">
                            Auto Generate Password
                        </button>
                    </div>
                    <div class="mb-4">
                        <label class="form-label fw-semibold">New Password <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text bg-light border-end-0"><i class="bi bi-lock text-muted"></i></span>
                            <input type="password" id="newPwd" name="password"
                                   class="form-control border-start-0 ps-0 @error('password') is-invalid @enderror">
                            <button type="button" class="input-group-text bg-light border-start-0" onclick="togglePwd('newPwd', this)">
                                <i class="bi bi-eye-slash text-muted"></i>
                            </button>
                        </div>
                        @error('password')
                            <div class="text-danger small mt-1">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="mb-2">
                        <label class="form-label fw-semibold">Confirm Password <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text bg-light border-end-0"><i class="bi bi-lock text-muted"></i></span>
                            <input type="password" id="confirmPwd" name="password_confirmation"
                                   class="form-control border-start-0 ps-0">
                            <button type="button" class="input-group-text bg-light border-start-0" onclick="togglePwd('confirmPwd', this)">
                                <i class="bi bi-eye-slash text-muted"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-top pt-4">
                    <button type="button" class="btn btn-outline-secondary px-5" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-danger px-5">Update Password</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
function togglePwd(inputId, btn) {
    const input = document.getElementById(inputId);
    const icon  = btn.querySelector('i');
    if (input.type === 'password') {
        input.type = 'text';
        icon.classList.replace('bi-eye-slash', 'bi-eye');
    } else {
        input.type = 'password';
        icon.classList.replace('bi-eye', 'bi-eye-slash');
    }
}

document.addEventListener('DOMContentLoaded', function () {

    // Auto-hide flash toast after 3 s
    const flashToast = document.getElementById('flashToast');
    if (flashToast) {
        setTimeout(() => {
            flashToast.style.transition = 'opacity 0.5s';
            flashToast.style.opacity   = '0';
            setTimeout(() => flashToast.remove(), 500);
        }, 3000);
    }

    // Re-open password modal if validation failed
    @if($errors->hasAny(['current_password', 'password']))
        var modal = new bootstrap.Modal(document.getElementById('changePasswordModal'));
        modal.show();
    @endif

    // Tab map
    const tabMap = {
        'profile':       '[href="#pv_profile"]',
        'security':      '[href="#pv_security"]',
        'site_settings': '[href="#pv_site_settings"]',
    };

    // Keep tab active from session (after redirect)
    const sessionTab = "{{ session('active_tab', 'profile') }}";
    if (tabMap[sessionTab]) {
        const el = document.querySelector(tabMap[sessionTab]);
        if (el) new bootstrap.Tab(el).show();
    }

    // Keep tab active from URL query param  e.g. ?tab=security
    const urlParams = new URLSearchParams(window.location.search);
    const tabParam  = urlParams.get('tab');
    if (tabParam && tabMap[tabParam]) {
        const el = document.querySelector(tabMap[tabParam]);
        if (el) new bootstrap.Tab(el).show();
    }

    // Init tooltips
    document.querySelectorAll('[data-bs-toggle="tooltip"]')
            .forEach(el => new bootstrap.Tooltip(el));

    // Two-Factor Drawer
    let adminTwoFactorDrawer;

    KTUtil.onDOMContentLoaded(function () {
        const el = document.querySelector('#admin_two_factor_drawer');
        if (el) {
            adminTwoFactorDrawer = KTDrawer.getInstance(el) || new KTDrawer(el);
        }
    });

    $(document).on('click', '.admin-two-factor-btn', function (e) {
        e.preventDefault();
        $('input[name="two_factor_action"]').prop('checked', false);
        if (adminTwoFactorDrawer) adminTwoFactorDrawer.show();
    });

});

// Auto Generate Password
$('#autoGeneratePassword').on('click', function () {

    $.get("{{ route('password.generate') }}", function (res) {

        $('#newPwd').val(res.password);
        $('#confirmPwd').val(res.password);

    });

});
</script>
@endsection