@extends('layouts.app')

@section('content')

{{-- SUCCESS TOAST --}}
@if(session('success'))
    <div id="successToast" class="app-toast app-toast--success">
        <i class="fa fa-check-circle"></i> {{ session('success') }}
    </div>
@endif

<div class="d-flex flex-column flex-column-fluid">

    {{-- ── TOOLBAR ── --}}
    <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
        <div id="kt_app_toolbar_container" 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">Agency Profile</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">Agency Profile</li>
                </ul>
            </div>
        </div>
    </div>

    {{-- ── CONTENT ── --}}
    <div id="kt_app_content" class="app-content flex-column-fluid">
        <div id="kt_app_content_container" class="app-container container-fluid">

            {{-- Agency Header --}}
            <div class="card mb-2 mb-xxl-8">
                <div class="card-body pt-9 pb-0">
                    @include('admin.agency.agency_header')
                </div>
            </div>

            <div class="row g-5 g-xxl-8">
                <div class="col-xl-12">

                    <div class="card border-0 shadow-sm">

                        {{-- ── CARD HEADER ── --}}
                        <div class="card-header d-flex justify-content-between align-items-center py-4 flex-wrap gap-3"
                             style="background: linear-gradient(135deg, #1565C0, #1976D2); border-radius: 12px 12px 0 0;">
                            <h5 class="mb-0 text-white fw-bold">
                                <i class="fa fa-users me-2"></i> User Management
                            </h5>
                            <button type="button" class="btn btn-light btn-sm rounded-pill px-4 fw-bold"
                                    data-bs-toggle="modal" data-bs-target="#kt_modal_add_user">
                                <i class="fa fa-plus me-1"></i> Add User
                            </button>
                        </div>

                        {{-- ── TABLE ── --}}
                        <div class="card-body p-0">
                            <table class="table table-hover align-middle mb-0">
                                <thead style="background:#f8f9fc;">
                                    <tr>
                                        <th class="px-4 py-3">User</th>
                                        <th class="py-3"></th>
                                        <th class="py-3">Role</th>
                                        <th class="py-3">Two-step</th>
                                        <th class="py-3">Joined Date</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($users as $user)
                                    <tr>
                                        <td class="px-4">
                                            <div class="d-flex align-items-center gap-3">
                                                <div class="symbol symbol-circle symbol-50px overflow-hidden">
                                                    @if($user->user_image)
                                                        <img src="{{ asset('storage/users/' . $user->user_image) }}" alt="{{ $user->name }}" width="44" height="44" style="border-radius:50%; object-fit:cover;" />
                                                    @else
                                                        <img src="{{ asset('ajyad_assets') }}/media/avatars/300-1.jpg" alt="{{ $user->name }}" width="44" height="44" style="border-radius:50%; object-fit:cover;" />
                                                    @endif
                                                </div>
                                                <div>
                                                    <div class="fw-bold text-gray-800">{{ $user->name }}</div>
                                                    <div class="small text-muted">{{ $user->email }}</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="text-end">
                                            <a href="#" class="fs-7" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                                                <i class="bi bi-three-dots-vertical"></i>
                                                <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-200px py-4" data-kt-menu="true">
                                                    <div class="menu-item px-3">
                                                        <a href="javascript:void(0);" class="menu-link px-3 text-hover-info user-edit-btn" data-user="{{ $user->id }}" data-agency="{{ $agency->uuid }}">
                                                            <i class="bi bi-pencil-square"></i> &nbsp; Edit
                                                        </a>
                                                    </div>
                                                    <div class="menu-item px-3">
                                                        <a href="javascript:void(0);" class="menu-link px-3 text-hover-primary user-password-btn" data-user="{{ $user->id }}" data-agency="{{ $agency->uuid }}" data-user_name="{{ $user->name }}">
                                                            <i class="ki-duotone ki-key"><span class="path1"></span><span class="path2"></span></i>
                                                            &nbsp; Reset Password
                                                        </a>
                                                    </div>
                                                    <div class="menu-item px-3">
                                                        <a href="javascript:void(0);" class="menu-link px-3 text-hover-primary two-factor-btn" data-user="{{ $user->id }}" data-agency="{{ $agency->uuid }}" data-user_name="{{ $user->name }}">
                                                            <i class="ki-duotone ki-lock-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>
                                            </a>
                                        </td>
                                        <td>
                                            <span class="dest-badge">{{ ucfirst($user->role->role_name) }}</span>
                                        </td>
                                        <td>
                                            @if($user->mfa)
                                                @if($user->mfa->enabled)
                                                    <span class="status-badge status-badge--success">Enabled</span>
                                                @else
                                                    <span class="status-badge status-badge--danger">Disabled</span>
                                                @endif
                                            @endif
                                        </td>
                                        <td>{{ $user->created_at->format('d M Y H:i') }}</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                    </div>
                </div>
            </div>

        </div>
    </div>
</div>


{{-- ── ADD USER MODAL ── --}}
<div class="modal fade" id="kt_modal_add_user" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered mw-750px">
        <div class="modal-content border-0 shadow-lg" style="border-radius:16px; overflow:hidden;">
            <div class="modal-header border-0 py-4 px-4 text-white"
                 style="background: linear-gradient(135deg, #1565C0, #1976D2);">
                <h5 class="modal-title fw-bold mb-0">
                    <i class="fa fa-user-plus me-2"></i> Add User
                </h5>
                <div class="btn btn-sm btn-icon btn-active-color-primary ms-auto" data-bs-dismiss="modal">
                    <i class="ki-duotone ki-cross fs-1 text-white"><span class="path1"></span><span class="path2"></span></i>
                </div>
            </div>
            <div class="modal-body p-4">
                <form id="kt_modal_add_user_form" class="form" action="{{ route('admin.agency.user.store', ['agency' => $agency->uuid]) }}" method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="fv-row mb-5">
                        <label class="d-block fw-semibold fs-6 mb-3">Upload User Image</label>
                        <style>.image-input-placeholder { background-image: url('assets/media/svg/files/blank-image.svg'); } [data-bs-theme="dark"] .image-input-placeholder { background-image: url('assets/media/svg/files/blank-image-dark.svg'); }</style>
                        <div class="image-input image-input-outline image-input-placeholder" data-kt-image-input="true">
                            <div class="image-input-wrapper w-125px h-125px" style="background-image: url(assets/media/avatars/300-6.jpg);"></div>
                            <label class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="change" data-bs-toggle="tooltip" title="Change User Image">
                                <i class="ki-duotone ki-pencil fs-7"><span class="path1"></span><span class="path2"></span></i>
                                <input type="file" name="user_image" accept=".png, .jpg, .jpeg" />
                                <input type="hidden" name="avatar_remove" />
                            </label>
                            <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="cancel" data-bs-toggle="tooltip" title="Cancel User Image">
                                <i class="ki-duotone ki-cross fs-2"><span class="path1"></span><span class="path2"></span></i>
                            </span>
                            <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="remove" data-bs-toggle="tooltip" title="Remove User Image">
                                <i class="ki-duotone ki-cross fs-2"><span class="path1"></span><span class="path2"></span></i>
                            </span>
                        </div>
                        <div class="form-text">Allowed file types: png, jpg, jpeg.</div>
                    </div>
                    <div class="row mb-4">
                        <div class="col-md-6 mb-4">
                            <label class="form-label fw-semibold">Full Name <span class="text-danger">*</span></label>
                            <input type="text" name="name" class="form-control" placeholder="User Full Name"/>
                        </div>
                        <div class="col-md-6 mb-4">
                            <label class="form-label fw-semibold">Email <span class="text-danger">*</span></label>
                            <input type="email" name="email" class="form-control" placeholder="User Email" />
                        </div>
                        <div class="col-md-6 mb-4">
                            <label class="form-label fw-semibold">Password <span class="text-danger">*</span></label>
                            <div class="d-flex gap-2 mb-2">
                                <button type="button" class="btn btn-outline btn-outline-dashed btn-outline-primary btn-sm" id="generateAddUserPassword">
                                    <i class="fa fa-key me-1"></i> Auto Generate Password
                                </button>
                            </div>
                            <input type="text" name="password" id="add_user_password" class="form-control" placeholder="Enter Password">
                        </div>
                        <div class="col-md-6 mb-4">
                            <label class="form-label fw-semibold">Confirm Password <span class="text-danger">*</span></label>
                            <input type="password" name="password_confirmation" class="form-control" placeholder="Confirm Password">
                        </div>
                    </div>
                    <div class="detail-section-label mb-3">🔐 Multifactor Authentication</div>
                    <p class="text-muted small mb-3"><i class="bi bi-info-circle me-1"></i> If enabled, user will be forced to setup Google Authenticator on first login.</p>
                    <div class="col-md-6 mb-4">
                        <label class="form-label fw-semibold">Google Authenticator App</label>
                        <select name="google_auth" class="form-control">
                            <option value="1" selected>Enable</option>
                            <option value="0">Disable</option>
                        </select>
                    </div>
                    <div class="text-end pt-3">
                        <button type="button" class="btn btn-outline-secondary rounded-pill px-4 me-2" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary rounded-pill px-4">
                            <i class="fa fa-check me-2"></i> Submit
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


{{-- ── EDIT USER DRAWER ── --}}
<div id="edit_user" class="bg-body" data-kt-drawer="true" data-kt-drawer-activate="true" data-kt-drawer-overlay="true" data-kt-drawer-width="{default:'300px', 'md': '500px'}" data-kt-drawer-direction="end" data-kt-drawer-close="#user_edit_close">
    <div class="card w-100 border-0 rounded-0">
        <div class="card-header pe-5">
            <div class="card-title">
                <a href="#" class="fs-4 fw-bold text-gray-900 text-hover-primary me-1 mb-2 lh-1">Update User</a>
            </div>
            <div class="card-toolbar">
                <button class="btn btn-sm btn-icon btn-active-color-danger" id="user_edit_close">✕</button>
            </div>
        </div>
        <div class="card-body" id="kt_drawer_edit_user_body">
            <form id="editUserForm">
                @csrf
                <img id="user_image_preview" alt="User Image" class="mb-3" width="150" height="150" style="border-radius:10px;"/>
                <div class="mb-3">
                    <label class="form-label fw-semibold">Image</label>
                    <input type="file" name="user_image" class="form-control">
                </div>
                <input type="hidden" id="edit_user_id" name="user_id">
                <div class="mb-3">
                    <label class="form-label fw-semibold">Name</label>
                    <input type="text" id="edit_name" name="name" class="form-control">
                </div>
                <div class="mb-3">
                    <label class="form-label fw-semibold">Email</label>
                    <input type="email" id="edit_email" name="email" class="form-control">
                </div>
                <button class="btn btn-primary rounded-pill px-4 w-100">
                    <i class="fa fa-check me-2"></i> Update
                </button>
            </form>
        </div>
    </div>
</div>


{{-- ── RESET PASSWORD DRAWER ── --}}
<div id="reset_password_drawer" class="bg-body" data-kt-drawer="true" data-kt-drawer-activate="true" data-kt-drawer-overlay="true" data-kt-drawer-width="{default:'300px', md:'450px'}" data-kt-drawer-direction="end" data-kt-drawer-close="#reset_password_close">
    <div class="card w-100 border-0 rounded-0">
        <div class="card-header pe-5">
            <div class="card-title">
                <h4 class="fw-bold">Reset Password</h4>
            </div>
            <div class="card-toolbar">
                <button class="btn btn-sm btn-icon btn-active-color-danger" id="reset_password_close">✕</button>
            </div>
        </div>
        <div class="card-body">
            <div class="mb-4 bg-light-primary p-4 rounded">
                User Name: <strong id="reset_user_name" class="text-primary"></strong>
            </div>
            <form id="resetPasswordForm">
                @csrf
                <input type="hidden" name="user_id" id="reset_user_id">
                <input type="hidden" name="agency_uuid" id="reset_agency_uuid">
                <div class="text-end mb-3">
                    <button type="button" class="btn btn-outline btn-outline-dashed btn-outline-primary btn-sm" id="generatePassword">
                        Auto Generate Password
                    </button>
                </div>
                <div class="mb-3">
                    <label class="form-label fw-semibold">New Password</label>
                    <input type="text" name="password" id="new_password" class="form-control">
                </div>
                <div class="mb-3">
                    <label class="form-label fw-semibold">Confirm Password</label>
                    <input type="password" name="password_confirmation" class="form-control">
                </div>
                <button type="submit" class="btn btn-primary rounded-pill w-100">
                    <i class="fa fa-key me-2"></i> Update Password
                </button>
            </form>
        </div>
    </div>
</div>


{{-- ── TWO FACTOR DRAWER ── --}}
<div id="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="#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="two_factor_close">✕</button>
            </div>
        </div>
        <div class="card-body">
            <div class="mb-4 bg-light-primary p-4 rounded">
                User Name: <strong id="two_factor_user_name" class="text-primary"></strong>
            </div>
            <form id="twoFactorForm">
                @csrf
                <input type="hidden" name="user_id" id="two_factor_user_id">
                <input type="hidden" name="agency_uuid" id="two_factor_agency_uuid">
                <div class="form-check mb-3">
                    <input class="form-check-input" type="radio" name="two_factor_action" value="enable" id="twoFactorEnable">
                    <label class="form-check-label" for="twoFactorEnable">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="twoFactorDisable">
                    <label class="form-check-label" for="twoFactorDisable">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="twoFactorReset">
                    <label class="form-check-label text-danger" for="twoFactorReset">Reset — Reset Google Authenticator keys</label>
                </div>
                <button type="submit" class="btn btn-primary rounded-pill w-100">
                    <i class="fa fa-shield me-2"></i> Update 2FA Settings
                </button>
            </form>
        </div>
    </div>
</div>


<style>
.detail-section-label {
    font-size:11px; font-weight:700; text-transform:uppercase;
    letter-spacing:1.5px; color:#888; margin-bottom:4px;
}
.dest-badge {
    display:inline-block; background:#e8f5e9; color:#2e7d32;
    padding:3px 10px; border-radius:20px; font-size:12px; font-weight:600;
}
.status-badge {
    display:inline-block; padding:3px 12px;
    border-radius:20px; font-size:12px; font-weight:600;
}
.status-badge--success { background:#e8f5e9; color:#2e7d32; }
.status-badge--danger  { background:#ffebee; color:#c62828; }

/* ── Toast (same pattern as site-settings template) ── */
.app-toast {
    position: fixed; bottom: 30px; left: 30px;
    color: #fff;
    padding: 12px 20px; border-radius: 6px;
    font-size: 14px; font-weight: 500;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 9999; display: flex; align-items: center; gap: 8px;
    animation: fadeInUp 0.3s ease;
}
.app-toast--success { background-color: #155724; }
.app-toast--error   { background-color: #c62828; }
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
</style>


@endsection

@section('scripts')
<script>
    // ── Reusable toast helper (mirrors site-settings #successToast behaviour) ──
    function showAppToast(message, type) {
        $('.app-toast').remove();
        let cls = type === 'error' ? 'app-toast--error' : 'app-toast--success';
        let icon = type === 'error' ? 'fa-exclamation-circle' : 'fa-check-circle';
        let $toast = $('<div id="successToast" class="app-toast ' + cls + '"><i class="fa ' + icon + '"></i> ' + message + '</div>');
        $('body').append($toast);
        setTimeout(function () {
            $toast.css('transition', 'opacity 0.5s ease').css('opacity', 0);
            setTimeout(function () { $toast.remove(); }, 500);
        }, 3000);
    }
</script>
<script>
    $('#country_id').on('change', function(){
        var country_id = $(this).val();
        $.ajax({
            url: "{{ url('getPhoneCode') }}/"+country_id,
            type: 'GET', dataType: 'JSON',
            success: function(data){
                if(data != ''){
                    $('#phone_code').text(data['phone_code']);
                    $('#phoneCodeInputVal').val(data['phone_code']);
                }
            }
        });
    });
    $(document).ready(function () {
        $('#kt_modal_add_user_form').on('submit', function (e) {
            e.preventDefault();

            let isValid = true;
            $('.field-error').remove();
            $('.form-control').removeClass('is-invalid');

            let name     = $('input[name="name"]').val().trim();
            let email    = $('input[name="email"]').val().trim();
            let password = $('input[name="password"]').val();
            let confirm  = $('input[name="password_confirmation"]').val();
            let emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

            if (name === '') { showError('name', 'Full name is required'); isValid = false; }
            if (email === '') { showError('email', 'Email is required'); isValid = false; }
            else if (!emailRegex.test(email)) { showError('email', 'Enter a valid email address'); isValid = false; }
            if (password === '') { showError('password', 'Password is required'); isValid = false; }
            if (confirm === '') { showError('password_confirmation', 'Confirm password is required'); isValid = false; }
            else if (password !== confirm) { showError('password_confirmation', 'Passwords do not match'); isValid = false; }

            if (!isValid) { return false; }

            let formData = new FormData(this);

            $.ajax({
                url: $(this).attr('action'),
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                success: function (res) {
                    $('#kt_modal_add_user').modal('hide');
                    $('.modal-backdrop').remove();
                    $('body').removeClass('modal-open');
                    showAppToast(res.message || 'User created successfully', 'success');
                    setTimeout(function () { location.reload(); }, 1200);
                },
                error: function (xhr) {
                    if (xhr.status === 422) {
                        let errors = xhr.responseJSON.errors;
                        let firstMessage = '';
                        $.each(errors, function (key, val) {
                            let input = $('[name="' + key + '"]');
                            input.addClass('is-invalid');
                            input.after('<div class="text-danger mt-1 field-error">' + val[0] + '</div>');
                            if (!firstMessage) firstMessage = val[0];
                        });
                        showAppToast(firstMessage || 'Please check the form for errors', 'error');
                    } else {
                        showAppToast('Something went wrong. Please try again.', 'error');
                    }
                }
            });
        });
        function showError(fieldName, message) {
            let input = $('input[name="' + fieldName + '"]');
            input.addClass('is-invalid');
            input.after('<div class="text-danger mt-1 field-error">' + message + '</div>');
        }
    });
</script>
<script>
KTUtil.onDOMContentLoaded(function () {
    const drawerEl = document.querySelector('#edit_user');
    editUserDrawer = KTDrawer.getInstance(drawerEl);
    if (!editUserDrawer) { editUserDrawer = new KTDrawer(drawerEl); }
});
$(document).on('click', '.user-edit-btn', function (e) {
    e.preventDefault(); e.stopPropagation();
    let menuEl = this.closest('[data-kt-menu]');
    if (menuEl) { KTMenu.getInstance(menuEl)?.hide(); }
    let userId   = $(this).data('user');
    let agencyId = $(this).data('agency');
    editUserDrawer.show();
    $('#editUserForm')[0].reset();
    $('#user_image_preview').attr('src', '');
    $.ajax({
        url: "{{ route('admin.agency.user.edit') }}",
        type: "GET",
        data: { user: userId, agency: agencyId },
        success: function (res) {
            $('#edit_user_id').val(res.id);
            $('#edit_name').val(res.name);
            $('#edit_email').val(res.email);
            if (res.image) {
                $('#user_image_preview').attr("src", "{{ asset('storage/users') }}/" + res.image);
            } else {
                $('#user_image_preview').attr("src", "{{asset('ajyad_assets')}}/media/avatars/300-1.jpg");
            }
        }
    });
});
$('#editUserForm').on('submit', function(e){
    e.preventDefault();
    let formData = new FormData(this);
    $('.field-error').remove();
    $('.form-control').removeClass('is-invalid');
    $.ajax({
        url: "{{ route('admin.agency.user.update') }}",
        type: "POST", data: formData, contentType: false, processData: false,
        success: function(res){
            editUserDrawer.hide();
            showAppToast(res.message || 'User updated successfully', 'success');
            setTimeout(function () { location.reload(); }, 1200);
        },
        error: function(xhr){
            if(xhr.status === 422){
                let errors = xhr.responseJSON.errors;
                let firstMessage = '';
                $.each(errors, function(key, val){
                    let input = $('[name="'+key+'"]');
                    input.addClass('is-invalid');
                    input.after('<div class="text-danger mt-1 field-error">'+val[0]+'</div>');
                    if (!firstMessage) firstMessage = val[0];
                });
                showAppToast(firstMessage || 'Please check the form for errors', 'error');
            } else {
                showAppToast('Something went wrong. Please try again.', 'error');
            }
        }
    });
});
</script>
<script>
    let resetPasswordDrawer;
    KTUtil.onDOMContentLoaded(function () {
        const el = document.querySelector('#reset_password_drawer');
        resetPasswordDrawer = KTDrawer.getInstance(el) || new KTDrawer(el);
    });
    $(document).on('click', '.user-password-btn', function () {
        $('#resetPasswordForm')[0].reset();
        $('.field-error').remove();
        $('.form-control').removeClass('is-invalid');
        $('#reset_user_id').val($(this).data('user'));
        $('#reset_user_name').text($(this).data('user_name'));
        $('#reset_agency_uuid').val($(this).data('agency'));
        resetPasswordDrawer.show();
    });
    $('#generatePassword').on('click', function () {
        $.get("{{ route('password.generate') }}", function (res) {
            $('#new_password').val(res.password);
            $('[name="password_confirmation"]').val(res.password);
        });
    });
    $('#generateAddUserPassword').on('click', function () {
        $.get("{{ route('password.generate') }}", function (res) {
            $('#add_user_password').val(res.password);
            $('[name="password_confirmation"]').val(res.password);
            // Switch to text type so user can see the generated password
            $('#add_user_password').attr('type', 'text');
        });
    });
    $('#resetPasswordForm').on('submit', function (e) {
        e.preventDefault();
        let formData = new FormData(this);
        $('.field-error').remove();
        $('.form-control').removeClass('is-invalid');
        $.ajax({
            url: "{{ route('admin.agency.user.resetPassword') }}",
            type: "POST", data: formData, contentType: false, processData: false,
            success: function (res) {
                resetPasswordDrawer.hide();
                showAppToast(res.message || 'Password updated successfully', 'success');
                setTimeout(function () { location.reload(); }, 1200);
            },
            error: function (xhr) {
                if (xhr.status === 422) {
                    let firstMessage = '';
                    $.each(xhr.responseJSON.errors, function (key, val) {
                        let input = $('[name="' + key + '"]');
                        input.addClass('is-invalid');
                        input.after('<div class="text-danger mt-1 field-error">' + val[0] + '</div>');
                        if (!firstMessage) firstMessage = val[0];
                    });
                    showAppToast(firstMessage || 'Please check the form for errors', 'error');
                } else {
                    showAppToast('Something went wrong', 'error');
                }
            }
        });
    });
</script>
<script>
    let twoFactorDrawer;
    KTUtil.onDOMContentLoaded(function () {
        const el = document.querySelector('#two_factor_drawer');
        twoFactorDrawer = KTDrawer.getInstance(el) || new KTDrawer(el);
    });
    $(document).on('click', '.two-factor-btn', function () {
        $('#twoFactorForm')[0].reset();
        $('.field-error').remove();
        $('.form-control').removeClass('is-invalid');
        $('#two_factor_user_id').val($(this).data('user'));
        $('#two_factor_user_name').text($(this).data('user_name'));
        $('#two_factor_agency_uuid').val($(this).data('agency'));
        twoFactorDrawer.show();
    });
    $('#twoFactorForm').on('submit', function (e) {
        e.preventDefault();
        let action   = $('input[name="two_factor_action"]:checked').val();
        let formData = new FormData(this);
        $('.field-error').remove();
        $('.form-check-input').removeClass('is-invalid');
        if (!action) {
            $('input[name="two_factor_action"]').last().after('<div class="text-danger mt-2 field-error">Please select an option</div>');
            return;
        }
        $.ajax({
            url: "{{ route('admin.agency.user.twoFactor') }}",
            type: "POST", data: formData, contentType: false, processData: false,
            success: function (res) {
                twoFactorDrawer.hide();
                showAppToast(res.message || 'Two-Factor settings updated successfully', 'success');
                setTimeout(function () { location.reload(); }, 1200);
            },
            error: function (xhr) {
                if (xhr.status === 422) {
                    let firstMessage = '';
                    $.each(xhr.responseJSON.errors, function (key, val) {
                        $('input[name="' + key + '"]').last().after('<div class="text-danger mt-2 field-error">' + val[0] + '</div>');
                        if (!firstMessage) firstMessage = val[0];
                    });
                    showAppToast(firstMessage || 'Please check the form for errors', 'error');
                } else {
                    showAppToast('Something went wrong', 'error');
                }
            }
        });
    });
</script>

{{-- Auto-dismiss server-flashed success toast (mirrors site-settings template) --}}
<script>
    setTimeout(function () {
        var t = document.getElementById('successToast');
        if (t) {
            t.style.transition = 'opacity 0.5s ease';
            t.style.opacity = '0';
            setTimeout(function () { t.remove(); }, 500);
        }
    }, 3000);
</script>

@endsection