@extends('layouts.app')

@section('content')
<div class="d-flex flex-column flex-column-fluid">
    <!--begin::Toolbar-->
    <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
        <!--begin::Toolbar container-->
        <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
            <!--begin::Page title-->
            <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                <!--begin::Title-->
                <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">Agency Profile</h1>
                <!--end::Title-->
                <!--begin::Breadcrumb-->
                <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                    <!--begin::Item-->
                    <li class="breadcrumb-item text-muted">
                        <a href="{{ route('dashboard') }}" class="text-muted text-hover-primary">Home</a>
                    </li>
                    <!--end::Item-->
                    <!--begin::Item-->
                    <li class="breadcrumb-item">
                        <span class="bullet bg-gray-500 w-5px h-2px"></span>
                    </li>
                    <!--end::Item-->
                    <!--begin::Item-->
                    <li class="breadcrumb-item text-muted">Agency Profile</li>
                    <!--end::Item-->
                </ul>
                <!--end::Breadcrumb-->
            </div>
            <!--end::Page title-->
            
        </div>
        <!--end::Toolbar container-->
    </div>
    <!--end::Toolbar-->
    <!--begin::Content-->
    <div id="kt_app_content" class="app-content flex-column-fluid">
        <!--begin::Content container-->
        <div id="kt_app_content_container" class="app-container container-xxl">
            <!--begin::Navbar-->
            <div class="card mb-2 mb-xxl-8">
                <div class="card-body pt-9 pb-0">
                    @include('agent.header')
                </div>
            </div>
            <!--end::Navbar-->
            <!--begin::Row-->
            <div class="row g-5 g-xxl-8">
                <!--begin::Col-->
                <div class="col-xl-12">
                    <div class="card">
                        <!--begin::Card header-->
                        <div class="card-header border-bottom border-gray-200">
                            <!--begin::Title-->
                            <div class="card-title">
                                <h3 class="fw-bold m-0">User Management </h3>
                            </div>
                            <!--end::Title-->
                            <div class="card-toolbar">
                                <!--begin::Toolbar-->
                                <div class="d-flex justify-content-end" data-kt-user-table-toolbar="base">
                                    
                                    <!--begin::Add user-->
                                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_add_user">
                                    <i class="ki-duotone ki-plus fs-2"></i>Add User</button>
                                    <!--end::Add user-->
                                </div>
                            </div>
                        </div>
                        <!--end::Card header-->
                            @if(session()->has('success'))
                            <div class="alert alert-dismissible bg-light-success d-flex flex-column flex-sm-row p-5 mb-10">
                                <i class="ki-duotone ki-notification-bing fs-2hx text-success me-4 mb-5 mb-sm-0"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>
                                <div class="d-flex flex-column pe-0 pe-sm-10">
                                    <span>{{ session()->get('success') }}</span>
                                </div>
                                <button type="button" class="position-absolute position-sm-relative m-2 m-sm-0 top-0 end-0 btn btn-icon ms-sm-auto" data-bs-dismiss="alert">
                                    <i class="ki-duotone ki-cross fs-1 text-success"><span class="path1"></span><span class="path2"></span></i>
                                </button>
                            </div>
                            <!--end::Alert-->
                            @endif
                            @if(session()->has('error'))
                            <div class="alert alert-dismissible bg-light-danger d-flex flex-column flex-sm-row p-5 mb-10">
                                <i class="ki-duotone ki-notification-bing fs-2hx text-danger me-4 mb-5 mb-sm-0"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>
                                <div class="d-flex flex-column pe-0 pe-sm-10">
                                    <span>{{ session()->get('error') }}</span>
                                </div>
                                <button type="button" class="position-absolute position-sm-relative m-2 m-sm-0 top-0 end-0 btn btn-icon ms-sm-auto" data-bs-dismiss="alert">
                                    <i class="ki-duotone ki-cross fs-1 text-danger"><span class="path1"></span><span class="path2"></span></i>
                                </button>
                            </div>
                            <!--end::Alert-->
                            @endif
                        <!--begin::Table-->
                        <table class="table table-row-bordered align-middle gy-4 gs-9">
                            <thead class="border-bottom border-gray-200 fs-6 text-gray-600 fw-bold bg-light bg-opacity-75">
                                <tr class="text-start fs-7 text-uppercase">
                                    
                                    <th class="min-w-250px">User</th>
                                    <th></th>
                                    <th class="min-w-125px">Role</th>
                                    <th class="min-w-125px">Two-step</th>
                                    <th class="min-w-125px">Joined Date</th>
                                </tr>
                            </thead>
                            <tbody class="fw-semibold text-gray-600">
                                @foreach($users as $user)
                                <tr>
                                    <td class="d-flex align-items-center">
                                        <div class="symbol symbol-circle symbol-50px overflow-hidden me-3">
                                            <a href="#">
                                                <div class="symbol-label">
                                                    @if($user->user_image)
                                                    <img src="{{ asset('storage/users/' . $user->user_image) }}" alt="Emma Smith" class="w-100" />
                                                    @else
                                                    <img src="{{asset('ajyad_assets')}}/media/avatars/300-1.jpg" alt="Emma Smith" class="w-100" />
                                                     @endif
                                                </div>
                                            </a>
                                        </div>
                                        <div class="d-flex flex-column">
                                            <span class="text-gray-800 text-hover-primary mb-1">{{ $user->name }}</span>
                                            <span>{{ $user->email }}</span>
                                        </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="#" class="menu-link px-3 text-hover-info user-edit-btn" id="user_edit_side_modal" data-user="{{ $user->id }}" data-agency="{{ $agency->uuid }}"><i class="bi bi-pencil-square"></i> &nbsp; Edit</a> -->
                                                <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>
                                    </td>
                                    <td>
                                        {{ ucfirst($user->role->role_name)  }}
                                    </td>
                                    <td>
                                        @if($user->mfa)
                                            @if($user->mfa->enabled)
                                            <div class="badge badge-light-success fw-bold">Enabled</div>
                                            @else
                                            <div class="badge badge-light-danger fw-bold">Disabled</div>
                                            @endif
                                        @endif
                                    </td>
                                    <td>
                                        {{ $user->created_at->format('d M Y H:i') }}
                                    </td>
                                    
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                        <!--end::Table-->
                    </div>
                </div>
                <!--end::Col-->
             
            </div>
            <!--end::Row-->
        </div>
        <!--end::Content container-->
    </div>
    <!--end::Content-->
</div>

<!--begin::Modal Add Agent staff-->
<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">
            <div class="modal-header">
                <h2>Add User</h2>
                <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                    <i class="ki-duotone ki-cross fs-1">
                        <span class="path1"></span>
                        <span class="path2"></span>
                    </i>
                </div>
            </div>
            <div class="modal-body scroll-y mx-5 mx-xl-5 my-7">
                <form id="kt_modal_add_user_form" class="form" action="{{ route('agent.agency.user.store', ['agency' => $agency->uuid, 'user' => $user->id]) }}" method="post" enctype="multipart/form-data">
                    @csrf
                    
                    <div class="fv-row mb-7">
                        <label class="d-block fw-semibold fs-6 mb-5">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-7">
                        <div class="col-md-6 mb-4">
                            <label class="required fw-semibold fs-6 mb-2">Full Name</label>
                            <input type="text" name="name" class="form-control form-control-solid mb-3 mb-lg-0" placeholder="User Full Name"/>
                        </div>
                        <div class="col-md-6 mb-4">
                            <label class="required fw-semibold fs-6 mb-2">Email</label>
                            <input type="email" name="email" class="form-control form-control-solid mb-3 mb-lg-0" placeholder="User Email" />
                        </div>
                        <div class="col-md-6 mb-4">
                            <label for="password" class="form-label">Password <span class="text-danger">*</span></label>
                            <input type="password" name="password" class="form-control form-control-solid mb-3 mb-lg-0" placeholder="Enter Password">
                            @if($errors->has('password'))
                            <div class="text-danger">{{ $errors->first('password') }}</div>
                            @endif
                        </div>
                        <div class="col-md-6 mb-4">
                            <label for="password" class="form-label">Confirm Password <span class="text-danger">*</span></label>
                            <input type="password" name="password_confirmation" class="form-control form-control-solid mb-3 mb-lg-0" placeholder="Confirm Password">
                            @if($errors->has('password_confirmation'))
                            <div class="text-danger">{{ $errors->first('password_confirmation') }}</div>
                            @endif
                        </div>
                    </div>
                    <div class="row mb-3">
                        <h4 class="mb-4 text-info"><i class="bi bi-shield-lock me-2 text-info"></i>Multifactor Authentication</h4>
                        <p><i class="bi bi-info-circle"></i> <small class="text-muted"> If enabled, user will be forced to setup Google Authenticator on first login.</small></p>
                        <div class="col-6 mb-4">
                            <label for="" class="form-label">Google Authenticator App</label>
                            <select name="google_auth" id="" class="form-control">
                                <option value="1" selected>Enable</option>
                                <option value="0">Disable</option>
                            </select>
                        </div>
                        
                    </div>
                    <div class="text-center pt-10">
                        <button type="submit" class="btn btn-primary"> Submit </button>
                    </div>
                </form>
                <!--end::Form-->
            </div>
            <!--end::Modal body-->
        </div>
        <!--end::Modal content-->
    </div>
    <!--end::Modal dialog-->
</div>
<!--end::Modal Add Agent staff-->
<!-- Begin::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">
                <div class="d-flex justify-content-center flex-column me-3">
                    <a href="#" class="fs-4 fw-bold text-gray-900 text-hover-primary me-1 mb-2 lh-1">Update User</a>
                    
                </div>
            </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>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>Name</label>
                    <input type="text" id="edit_name" name="name" class="form-control">
                </div>

                <div class="mb-3">
                    <label>Email</label>
                    <input type="email" id="edit_email" name="email" class="form-control">
                </div>
                <button class="btn btn-primary">Update</button>
            </form>
        </div>
       
    </div>
</div>
<!-- End::Edit User Drawer-->
<!-- begin::Password Reset 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-10 bg-light-primary p-5">
                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-2">
                    <button type="button" class="btn btn-outline btn-outline-dashed btn-outline-primary btn-sm btn-active-light-primary mb-3" id="generatePassword">
                        Auto Generate Password
                    </button>
                </div>
                
                <div class="mb-3">
                    <label>New Password</label>
                    <input type="text" name="password" id="new_password" class="form-control">
                </div>

                <div class="mb-3">
                    <label>Confirm Password</label>
                    <input type="password" name="password_confirmation" class="form-control">
                </div>
                <button type="submit" class="btn btn-primary w-100">
                    Update Password
                </button>
            </form>
        </div>
    </div>
</div>
<!-- End::Password Reset Drawer -->
<!-- begin::Two Factor Authentication 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-10 bg-light-primary p-5">
                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 w-100">
                    Update 2FA Settings
                </button>
            </form>
        </div>
    </div>
</div>
<!-- End::Two Factor Authentication Drawer -->
@endsection
@section('scripts')
<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) {

            let isValid = true;

            // Remove old errors
            $('.field-error').remove();
            $('.form-control').removeClass('is-invalid');

            // Get values
            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();

            // Email regex (simple & reliable)
            let emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

            // ---- Name ----
            if (name === '') {
                showError('name', 'Full name is required');
                isValid = false;
            }

            // ---- Email ----
            if (email === '') {
                showError('email', 'Email is required');
                isValid = false;
            } else if (!emailRegex.test(email)) {
                showError('email', 'Enter a valid email address');
                isValid = false;
            }

            // ---- Password ----
            if (password === '') {
                showError('password', 'Password is required');
                isValid = false;
            }

            // ---- Confirm Password ----
            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) {
                e.preventDefault();
                return false;
            }
        });

        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();
    // Close the dropdown menu manually
    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('agent.agency.user.edit') }}",
        type: "GET",
        data: { user: userId, agency: agencyId },
        success: function (res) {
            console.log(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);

    // Clear previous errors
    $('.field-error').remove();
    $('.form-control').removeClass('is-invalid');

    $.ajax({
        url: "{{ route('agent.agency.user.update') }}",
        type: "POST",
        data: formData,
        contentType: false,
        processData: false,
        success: function(res){
            Swal.fire({
                icon: 'success',
                title: 'Success!',
                text: res.message,
            }).then(() => {
                location.reload();
            });
            editUserDrawer.hide();
        },
        error: function(xhr){
            if(xhr.status === 422){
                let errors = xhr.responseJSON.errors;
                $.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>');
                });
            } else {
                alert('Something went wrong. Please try again.');
            }
        }
    });
});
</script>
<script>
    let resetPasswordDrawer;

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

    // Open drawer
    $(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();
    });

    // Generate password
    $('#generatePassword').on('click', function () {
        $.get("{{ route('password.generate') }}", function (res) {
            $('#new_password').val(res.password);
            $('[name="password_confirmation"]').val(res.password);
        });
    });

    // Submit reset
    $('#resetPasswordForm').on('submit', function (e) {
        e.preventDefault();

        let agencyUuid = $('#reset_agency_uuid').val();
        let userId = $('#reset_user_id').val();
        let formData = new FormData(this);

        $('.field-error').remove();
        $('.form-control').removeClass('is-invalid');
        $.ajax({
            url: "{{ route('agent.agency.user.resetPassword') }}",
            type: "POST",
            data: formData,
            contentType: false,
            processData: false,

            success: function (res) {
                alert(res.message);
                resetPasswordDrawer.hide();
                location.reload();
            },

            error: function (xhr) {
                if (xhr.status === 422) {
                    $.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>');
                    });
                } else {
                    alert('Something went wrong');
                }
            }
        });
    });

</script>
<script>
    let twoFactorDrawer;

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

    // Open drawer
    $(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();
    });

    // Submit Form
    $('#twoFactorForm').on('submit', function (e) {

        e.preventDefault();

        let agencyUuid = $('#two_factor_agency_uuid').val();
        let userId     = $('#two_factor_user_id').val();
        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('agent.agency.user.twoFactor') }}",
            type: "POST",
            data: formData,
            contentType: false,
            processData: false,

            success: function (res) {
                alert(res.message);
                twoFactorDrawer.hide();
                location.reload();   // Refresh to show updated badge
            },

            error: function (xhr) {

                if (xhr.status === 422) {
                    $.each(xhr.responseJSON.errors, function (key, val) {
                        $('input[name="' + key + '"]')
                            .last()
                            .after('<div class="text-danger mt-2 field-error">' + val[0] + '</div>');
                    });
                } else {
                    alert('Something went wrong');
                }
            }
        });

    });

</script>


@if(session('success'))
<script>
    $(document).ready(function () {
        $('#kt_modal_add_user').modal('hide');
        $('#kt_modal_edit_user').modal('hide');
        $('.modal-backdrop').remove();
        $('body').removeClass('modal-open');
    });
</script>
@endif

@endsection