@php
    $Authuser = Auth::user();
    // Check edit permission
    $canUserEdit = $Authuser && (
        ($module_type === 'admin' && $Authuser->hasPermission('admin.users.edit')) ||
        ($module_type === 'vendor' && $Authuser->hasPermission('vendor.users.edit')) ||
        ($module_type === 'customer' && $Authuser->hasPermission('customer.users.edit'))
    );
    // Check delete permission
    $canUserDelete = $Authuser && (
        ($module_type === 'admin' && $Authuser->hasPermission('admin.users.destroy')) ||
        ($module_type === 'vendor' && $Authuser->hasPermission('vendor.users.destroy')) ||
        ($module_type === 'customer' && $Authuser->hasPermission('customer.users.destroy'))
    );
@endphp
<div class="card">
    <div class="card-header border-l-warning" style="padding: 4px 21px;">
        <h6 class="mb-0 text-capitalize">User Detail</h6>
        <div class="d-flex gap-2">
            @if ($canUserEdit)
                <a onclick="EditUser({{ $user->id }})" class="text-primary cursor-pointer" id="btnSettings" title="Edit">
                    <i class="las la-edit" style="font-size: 20px;"></i>
                </a>
            @endif
            @if ($canUserDelete)
                <a onclick="showDeleteModal({{ $user->id }}, '{{ $user->username }}')" class="text-danger cursor-pointer"
                    id="btnProfile" title="Delete">
                    <i class="las la-trash" style="font-size: 20px;"></i>
                </a>
            @endif
        </div>
    </div>
    <div class="card-body">
        <div id="Edit_loader" class="c-preloader text-center p-3" style="display: none;">
            <i class="las la-spinner la-spin la-3x"></i>
        </div>
        <div class="row">
            <div class="col-md-6 mb-3">
                <div class="form-group row">
                    <label class="col-12 col-sm-4 align-self-center col-form-label">First Name</label>
                    <div class="col-12 col-sm-8">
                        <input type="text" placeholder="First Name" readonly class="form-control toggle-readonly"
                            value="{{ $user->first_name }}">
                    </div>
                </div>
            </div>
            <div class="col-md-6 mb-3">
                <div class="form-group row">
                    <label class="col-12 col-sm-4 align-self-center col-form-label">Last Name</label>
                    <div class="col-12 col-sm-8">
                        <input type="text" placeholder="Last Name" readonly class="form-control toggle-readonly"
                            value="{{ $user->last_name ?? '' }}">
                    </div>
                </div>
            </div>
            @if ($module_type !== 'vendor')
            <div class="col-md-6 mb-3">
                <div class="form-group row">
                    <label class="col-12 col-sm-4 align-self-center col-form-label">Username</label>
                    <div class="col-12 col-sm-8">
                        <input type="text" placeholder="Username" readonly class="form-control toggle-readonly"
                            value="{{ $user->username }}">
                    </div>
                </div>
            </div>
            @endif
            <div class="col-md-6 mb-3">
                <div class="form-group row">
                    <label class="col-12 col-sm-4 align-self-center col-form-label">Email Address</label>
                    <div class="col-12 col-sm-8">
                        <input type="text" placeholder="Email Address" class="form-control toggle-readonly" readonly
                            value="{{ $user->email }}">
                    </div>
                </div>
            </div>
            <div class="col-md-6 mb-3">
                <div class="form-group row">
                    <label class="col-12 col-sm-4 align-self-center col-form-label">Phone Number</label>
                    <div class="col-12 col-sm-8">
                        <input type="number" placeholder="Phone Number" readonly class="form-control toggle-readonly"
                            value="{{ $user->phone ?? '' }}">
                    </div>
                </div>
            </div>
            <div class="col-md-6 mb-3">
                <div class="form-group row">
                    <label class="col-12 col-sm-4 align-self-center col-form-label">User Type</label>
                    <div class="col-12 col-sm-8">
                        <input type="text" placeholder="User Type" readonly class="form-control toggle-readonly"
                            value="{{ $module_type }}">
                    </div>
                </div>
            </div>
            @if ($module_type !== 'admin')
            <div class="col-md-6 mb-3">
                <div class="form-group row">
                    <label class="col-12 col-sm-4 align-self-center col-form-label">Company Name</label>
                    <div class="col-12 col-sm-8">
                        <input type="text" placeholder="Company Name" readonly class="form-control toggle-readonly"
                            value="{{ $user->company_name }}">
                    </div>
                </div>
            </div>
            <div class="col-md-6 mb-3">
                    <div class="form-group row">
                        <label class="col-12 col-sm-4 align-self-center col-form-label">Website</label>
                        <div class="col-12 col-sm-8">
                            <input type="text" placeholder="Website" readonly class="form-control toggle-readonly"
                                value="{{ $user->company_website }}">
                        </div>
                    </div>
                </div>
            @endif
            @if ($module_type !== 'vendor' && $module_type !== 'admin') 
            <div class="col-md-6 mb-3">
                <div class="form-group row">
                    <label class="col-12 col-sm-4 align-self-center col-form-label">Customer Type</label>
                    <div class="col-12 col-sm-8">
                        <input type="text" placeholder="Customer Type" readonly class="form-control toggle-readonly"
                            value="{{ $user->customer_type_name }}">
                    </div>
                </div>
            </div>
            @if ($user->customer_type != 0)
                <div class="col-md-6 mb-3">
                    <div class="form-group row">
                        <label class="col-12 col-sm-4 align-self-center col-form-label">Product Discount</label>
                        <div class="col-12 col-sm-8">
                            <input type="text" placeholder="Product Discount" readonly class="form-control toggle-readonly"
                                value="{{ $user->default_discount ?? '-' }}">
                        </div>
                    </div>
                </div>
                <div class="col-md-6 mb-3">
                    <div class="form-group row">
                        <label class="col-12 col-sm-4 align-self-center col-form-label">Credit Limit</label>
                        <div class="col-12 col-sm-8">
                            <input type="text" placeholder="Credit Limit" readonly class="form-control toggle-readonly"
                                value="{{ number_format($user->credit_limit ?? 0, 2) }}">
                        </div>
                    </div>
                </div>
            @endif
            @endif
            <div class="col-md-6 mb-3">
                <div class="form-group row">
                    <label class="col-12 col-sm-4 align-self-center col-form-label">Address</label>
                    <div class="col-12 col-sm-8">
                        @php
                        $addressParts = [];
                        if($user->company_address) $addressParts[] = $user->company_address;
                        if($user->address) $addressParts[] = $user->address;
                        if($user->city && $user->city != '0') $addressParts[] = ($user->cityRelation->name ?? $user->city);
                        if($user->state && $user->state != '0') $addressParts[] = ($user->stateRelation->name ?? $user->state);
                        if($user->country && $user->country != '0') $addressParts[] = ($user->countryRelation->name ?? $user->country);
                        if($user->zip_code) $addressParts[] = $user->zip_code;
                        @endphp
                        <textarea id="address" name="address" rows="2" cols="0" readonly class="form-control toggle-readonly">{{ implode(', ', $addressParts) }}</textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@if ($module_type !== 'admin' && $module_type !== 'vendor')
    <div class="card card-default mt-4">
        <div class="card-header border-l-warning" style="padding: 4px 21px;">
            <h6 class="mb-0 text-capitalize">Company Detail</h6>
        </div>
        <div class="card-body">
            <div id="Edit_loader" class="c-preloader text-center p-3" style="display: none;">
                <i class="las la-spinner la-spin la-3x"></i>
            </div>
            <div class="row">
                <div class="col-md-6 mb-3">
                    <div class="form-group row">
                        <label class="col-12 col-sm-4 align-self-center col-form-label">Company Name</label>
                        <div class="col-12 col-sm-8">
                            <input type="text" placeholder="Company Name" readonly class="form-control toggle-readonly"
                                value="{{ $user->company_name }}">
                        </div>
                    </div>
                </div>
                <div class="col-md-6 mb-3">
                    <div class="form-group row">
                        <label class="col-12 col-sm-4 align-self-center col-form-label">Company Address</label>
                        <div class="col-12 col-sm-8">
                            <input type="text" placeholder="Company Address" readonly class="form-control toggle-readonly"
                                value="{{ $user->company_address ?? '' }}">
                        </div>
                    </div>
                </div>
                <div class="col-md-6 mb-3">
                    <div class="form-group row">
                        <label class="col-12 col-sm-4 align-self-center col-form-label">Company Phone No</label>
                        <div class="col-12 col-sm-8">
                            <input type="text" placeholder="Company Phone No" readonly class="form-control toggle-readonly"
                                value="{{ $user->company_phone_no }}">
                        </div>
                    </div>
                </div>
                <div class="col-md-6 mb-3">
                    <div class="form-group row">
                        <label class="col-12 col-sm-4 align-self-center col-form-label">Company Email</label>
                        <div class="col-12 col-sm-8">
                            <input type="text" placeholder="Company Email" class="form-control toggle-readonly" readonly
                                value="{{ $user->company_email }}">
                        </div>
                    </div>
                </div>
                <div class="col-md-6 mb-3">
                    <div class="form-group row">
                        <label class="col-12 col-sm-4 align-self-center col-form-label">Company Website</label>
                        <div class="col-12 col-sm-8">
                            <input type="text" placeholder="Company Website" readonly class="form-control toggle-readonly"
                                value="{{ $user->company_website }}">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endif
{{-- ==== CONTACTS CARD ==== --}}
@php
    $Authuser = Auth::user();
    // Check Create permission
    $canContactCreate = $Authuser && (
        ($module_type === 'admin' && $Authuser->hasPermission('admin.users.contacts.create')) ||
        ($module_type === 'vendor' && $Authuser->hasPermission('vendor.users.contacts.create')) ||
        ($module_type === 'customer' && $Authuser->hasPermission('customer.users.contacts.create'))
    );
@endphp
<div class="card card-default mt-4">
    <div class="card-header justify-content-between align-items-center border-l-warning" style="padding: 4px 21px;">
        <h6 class="mb-0 text-capitalize">Contact Details</h6>
        @if ($canContactCreate)
            <a onclick="openaddcontactModal()"" id=" btnProfile" title="Add Contact" class="cursor-pointer text-black">
                <i class="fas fa-plus" style="font-size: 17px;"></i>
            </a>
        @endif
    </div>
    <div class="card-body" style="padding: 0px 25px 20px;">
        {{-- FILTER FORM --}}
        <form id="contact_filter_form" method="GET">
            @csrf
            <input type="hidden" name="user_id" value="{{ $user->id }}">
            <input type="hidden" name="type" value="{{ $module_type }}">
            <div class="card-header card-header-border-bottom d-flex justify-content-between align-items-center">
                <div class="d-flex align-items-center flex-nowrap gap-2">
                    <label for="contact_entries" class="text-muted fw-bold mb-0">Show</label>
                    <select id="contact_entries" name="entries" class="form-select form-select-sm custom-select">
                        @foreach([5, 10, 20, 30, 75, 'all'] as $v)
                            <option value="{{ $v }}" {{ request('entries', 5) == $v ? 'selected' : '' }}>
                                {{ $v == 'all' ? 'All' : $v }}
                            </option>
                        @endforeach
                    </select>
                    <span class="text-muted fw-bold mb-0">entries</span>
                </div>
                <div class="col-md-4">
                    <input type="text" class="form-control form-control-sm" id="contact_search" name="search"
                        value="{{ request('search') }}" placeholder="Search & Enter">
                </div>
            </div>
        </form>
        {{-- TABLE CONTAINER (AJAX) --}}
        <div id="contacts_table_container">
            {!! $contactsHtml !!}
        </div>
    </div>
</div>
{{-- ==== ADD / EDIT CONTACT MODAL ==== --}}
<div class="modal fade" id="addDistContactModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <header class="modal-header">
                <h5 class="modal-title" id="addDistContactModalLabel">Create New User</h5>
                <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close">X</button>
            </header>
            <form id="contactcontactForm">
                @csrf
                <input type="hidden" name="distibutor_id" value="{{ $user->id }}">
                <input type="hidden" name="type" value="{{ $module_type }}">
                <input type="hidden" name="contact_id" id="contact_id" value="0">
                <div class="modal-body">
                    <div class="row mb-3">
                        <label class="col-md-3 col-form-label">First Name</label>
                        <div class="col-md-9">
                            <input type="text" class="form-control" name="c_first_name" id="c_first_name"
                                placeholder="Enter First Name" required>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label class="col-md-3 col-form-label">Last Name</label>
                        <div class="col-md-9">
                            <input type="text" class="form-control" name="c_last_name" id="c_last_name"
                                placeholder="Enter Last Name" required>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label class="col-md-3 col-form-label">Phone</label>
                        <div class="col-md-9">
                            <input type="number" class="form-control" name="c_phone_number" id="c_phone_number"
                                placeholder="Enter Phone Number" required>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label class="col-md-3 col-form-label">Email</label>
                        <div class="col-md-9">
                            <input type="email" class="form-control" name="c_contact_email" id="c_contact_email"
                                placeholder="Enter Email" required>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" onclick="saveorupdateContact()">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>
{{-- ==== NOTES CARD ==== --}}
@php
    $Authuser = Auth::user();
    // Check Create permission
    $canNotesCreate = $Authuser && (
        ($module_type === 'admin' && $Authuser->hasPermission('admin.users.notes.create')) ||
        ($module_type === 'vendor' && $Authuser->hasPermission('vendor.users.notes.create')) ||
        ($module_type === 'customer' && $Authuser->hasPermission('customer.users.notes.create'))
    );
@endphp
<div class="card card-default mt-4">
    <div class="card-header justify-content-between align-items-center border-l-warning" style="padding: 4px 21px;">
        <h6 class="mb-0 text-capitalize">Notes Details</h6>
        @if ($canNotesCreate)
            <a onclick="openAddNoteModal()" title="Add Note" class="cursor-pointer text-black">
                <i class="fas fa-plus" style="font-size: 17px;"></i>
            </a>
        @endif
    </div>
    <div class="card-body" style="padding: 0px 25px 20px;">
        <form id="notes_filter_form" method="GET">
            @csrf
            <input type="hidden" name="user_id" value="{{ $user->id }}">
            <input type="hidden" name="type" value="{{ $module_type }}">
            <div class="card-header card-header-border-bottom d-flex justify-content-between align-items-center">
                <div class="d-flex align-items-center flex-nowrap gap-2">
                    <label class="text-muted fw-bold mb-0">Show</label>
                    <select id="notes_entries" name="entries" class="form-select form-select-sm custom-select">
                        @foreach([5, 10, 20, 30, 75, 'all'] as $v)
                            <option value="{{ $v }}" {{ request('entries', 5) == $v ? 'selected' : '' }}>
                                {{ $v == 'all' ? 'All' : $v }}
                            </option>
                        @endforeach
                    </select>
                    <span class="text-muted fw-bold mb-0">entries</span>
                </div>
                <div class="col-md-4">
                    <input type="text" class="form-control form-control-sm" id="notes_search" name="search"
                        value="{{ request('search') }}" placeholder="Search notes...">
                </div>
            </div>
        </form>
        <div id="notes_table_container">
            {{-- Loaded via AJAX --}}
        </div>
    </div>
</div>
{{-- ==== ADD / EDIT NOTE MODAL ==== --}}
<div class="modal fade" id="addNoteModal" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addNoteModalLabel">Add Note</h5>
                <button class="btn-close" data-bs-dismiss="modal">X</button>
            </div>
            <form id="noteForm">
                @csrf
                <input type="hidden" name="notes_id" id="notes_id" value="0">
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Note</label>
                        <textarea class="form-control" name="note_desc" id="note_desc" rows="4"
                            placeholder="Enter note..." required></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" onclick="saveNote()">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>
{{-- ==== DELETE NOTE MODAL ==== --}}
<div class="modal fade" id="deleteNoteModal" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Delete Note</h5>
                <button class="btn-close" data-bs-dismiss="modal">X</button>
            </div>
            <div class="modal-body">
                <p>Delete note: <strong><span id="deleteNoteText"></span></strong>?</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button class="btn btn-danger" id="confirmDeleteNoteBtn">Delete</button>
            </div>
        </div>
    </div>
</div>
{{-- ==== ADDRESS CARD ==== --}}
@php
    $Authuser = Auth::user();
    // Check Create permission
    $canAddressCreate = $Authuser && (
        ($module_type === 'admin' && $Authuser->hasPermission('admin.users.address.create')) ||
        ($module_type === 'vendor' && $Authuser->hasPermission('vendor.users.address.create')) ||
        ($module_type === 'customer' && $Authuser->hasPermission('customer.users.address.create'))
    );
@endphp
<div class="card card-default mt-4">
    <div class="card-header justify-content-between align-items-center border-l-warning" style="padding: 4px 21px;">
        <h6 class="mb-0 text-capitalize">Address Details</h6>
        @if ($canAddressCreate)
            <a onclick="openAddAddressModal()" title="Add Address" class="cursor-pointer text-black">
                <i class="fas fa-plus" style="font-size: 17px;"></i>
            </a>
        @endif
    </div>
    <div class="card-body" style="padding: 0px 25px 20px;">
        <form id="address_filter_form" method="GET">
            @csrf
            <input type="hidden" name="user_id" value="{{ $user->id }}">
            <input type="hidden" name="type" value="{{ $module_type }}">
            <div class="card-header card-header-border-bottom d-flex justify-content-between align-items-center">
                <div class="d-flex align-items-center flex-nowrap gap-2">
                    <label class="text-muted fw-bold mb-0">Show</label>
                    <select id="address_entries" name="entries" class="form-select form-select-sm custom-select">
                        @foreach([5, 10, 20, 30, 75, 'all'] as $v)
                            <option value="{{ $v }}" {{ request('entries', 5) == $v ? 'selected' : '' }}>
                                {{ $v == 'all' ? 'All' : $v }}
                            </option>
                        @endforeach
                    </select>
                    <span class="text-muted fw-bold mb-0">entries</span>
                </div>
                <div class="col-md-4">
                    <input type="text" class="form-control form-control-sm" id="address_search" name="search"
                        value="{{ request('search') }}" placeholder="Search address...">
                </div>
            </div>
        </form>
        <div id="address_table_container">
            {{-- Loaded via AJAX --}}
        </div>
    </div>
</div>
{{-- ==== ADD / EDIT ADDRESS MODAL ==== --}}
<div class="modal modal-blur fade" id="addAddressModal" tabindex="-1" aria-labelledby="addAddressLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <header class="modal-header">
                <h5 class="modal-title" id="addAddressLabel">Create new address</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">X</button>
            </header>
            <div class="modal-body">
                <input type="hidden" id="address_id" value="0">
                <div class="row">
                    <div class="col-md-6 mb-3 position-relative">
                        <label class="form-label">Name</label>
                        <input type="text" name="address_full_name" class="form-control" placeholder="Enter Name">
                    </div>
                    <div class="col-md-6 mb-3 position-relative">
                        <label class="form-label">Phone</label>
                        <input type="number" name="address_phone" class="form-control" placeholder="Enter Phone">
                    </div>
                    <div class="col-md-6 mb-3 position-relative">
                        <label class="form-label required">Address</label>
                        <input type="text" name="address_line" class="form-control" placeholder="Enter Address">
                    </div>
                    <div class="col-md-6 mb-3 position-relative">
                        <label class="form-label">Email</label>
                        <input type="email" name="address_email" class="form-control" placeholder="Enter Email">
                    </div>
                    <div class="col-6 mb-3 position-relative">
                        <label class="form-label">Country</label>
                        @if ($module_type === 'vendor')
                            <input type="text" name="address_country" id="address_country" class="form-control" placeholder="Enter Country">
                        @else
                            <select class="form-select" id="address_country" style="width: 100%;" >
                                <option value="">Select country...</option>
                            </select>
                        @endif
                    </div>
                    <div class="col-md-6 mb-3 position-relative">
                        <label class="form-label">State</label>
                        @if ($module_type === 'vendor')
                            <input type="text" name="address_state" id="address_state" class="form-control" placeholder="Enter State">
                        @else
                            <select class="form-select" id="address_state" style="width: 100%;">
                                <option value="">Select state...</option>
                            </select>
                        @endif
                    </div>
                    <div class="col-md-6 mb-3 position-relative">
                        <label class="form-label">City</label>
                        @if ($module_type === 'vendor')
                            <input type="text" name="address_city" id="address_city" class="form-control" placeholder="Enter City">
                        @else
                            <select class="form-select" id="address_city" style="width: 100%;">
                                <option value="">Select city...</option>
                            </select>
                        @endif
                    </div>
                    <div class="col-md-6 mb-3 position-relative">
                            <label for="zip_code" class="form-label">Zip Code</label>
                            <input type="number" class="form-control" name="zip_code" id="zip_code" placeholder="Zip Code">
                    </div>
                    <div class="col-md-6 mb-3 position-relative">
                        <label class="form-check">
                            <input type="checkbox" id="is_default" name="is_default" class="form-check-input" value="1">
                            <span class="form-check-label">
                                Use this address as default.
                            </span>
                        </label>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="savenewAddress">Save</button>
            </div>
        </div>
    </div>
</div>
{{-- ====================== Delete Address Modal ====================== --}}
<div class="modal fade" id="deleteAddressModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content">
            <div class="modal-status bg-danger"></div>
            <div class="modal-body text-center py-4">
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                <div class="mb-2">
                    <svg class="icon icon-lg text-danger" xmlns="http://www.w3.org/2000/svg" width="48" height="48"
                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <path d="M18 6L6 18"></path>
                        <path d="M6 6l12 12"></path>
                    </svg>
                </div>
                <h3>Delete Address?</h3>
                <div class="text-muted">
                    Permanently delete <strong id="deleteAddressText"></strong>?<br>
                    <small class="text-danger">This cannot be undone.</small>
                </div>
            </div>
            <div class="modal-footer">
                <div class="w-100">
                    <div class="row">
                        <div class="col">
                            <button type="button" class="w-100 btn btn-danger" id="confirmDeleteAddressBtn">
                                Yes, Delete
                            </button>
                        </div>
                        <div class="col">
                            <button type="button" class="w-100 btn btn-secondary" data-bs-dismiss="modal">
                                Cancel
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{{-- ====================== Set Default Modal ====================== --}}
<div class="modal fade" id="setDefaultAddressModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content">
            <div class="modal-status bg-success"></div>
            <div class="modal-body text-center py-4">
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                <div class="mb-2">
                    <svg class="icon icon-lg text-success" xmlns="http://www.w3.org/2000/svg" width="48" height="48"
                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <path d="M20 6L9 17l-5-5"></path>
                    </svg>
                </div>
                <h3>Set Default?</h3>
                <div class="text-muted">
                    Make <strong id="defaultAddressText"></strong> the default address?<br>
                    <small class="text-success">Future orders will use this.</small>
                </div>
            </div>
            <div class="modal-footer">
                <div class="w-100">
                    <div class="row">
                        <div class="col">
                            <button type="button" class="w-100 btn btn-success" id="confirmSetDefaultBtn">
                                Yes, Set Default
                            </button>
                        </div>
                        <div class="col">
                            <button type="button" class="w-100 btn btn-secondary" data-bs-dismiss="modal">
                                Cancel
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@php
    $Authuser = Auth::user();
    $module_type = $type ?? $module_type; // from parent view
    $user = $user ?? $user;

    $canCreateDoc = $Authuser && (
        ($module_type === 'admin' && $Authuser->hasPermission('admin.users.documents.create')) ||
        ($module_type === 'vendor' && $Authuser->hasPermission('vendor.users.documents.create')) ||
        ($module_type === 'customer' && $Authuser->hasPermission('customer.users.documents.create'))
    );
@endphp

    <div class="card card-default mt-4">
        <div class="card-header justify-content-between align-items-center border-l-warning" style="padding: 4px 21px;">
            <h6 class="mb-0 text-capitalize">Documents Details</h6>
            @if ($canCreateDoc)
                <a onclick="openAddDocumentsModal()" title="Add Document" class="cursor-pointer text-black">
                    <i class="fas fa-plus" style="font-size: 17px;"></i>
                </a>
            @endif
        </div>

        <div class="card-body" style="padding: 0px 25px 20px;">
            <form id="documents_filter_form" method="GET">
                @csrf
                <input type="hidden" name="type" value="{{ $module_type }}">
                <input type="hidden" name="user_id" value="{{ $user->id }}">

                <div class="card-header card-header-border-bottom d-flex justify-content-between align-items-center">
                    <div class="d-flex align-items-center flex-nowrap gap-2">
                        <label class="text-muted fw-bold mb-0">Show</label>
                        <select id="documents_entries" name="entries" class="form-select form-select-sm">
                            @foreach([5, 10, 20, 30, 75, 'all'] as $v)
                                <option value="{{ $v }}" {{ request('entries', 5) == $v ? 'selected' : '' }}>
                                    {{ $v === 'all' ? 'All' : $v }}
                                </option>
                            @endforeach
                        </select>
                        <span class="text-muted fw-bold mb-0">entries</span>
                    </div>
                    <div class="col-md-4">
                        <input type="text" class="form-control form-control-sm" id="documents_search" name="search"
                            value="{{ request('search') }}" placeholder="Search documents...">
                    </div>

                </div>
            </form>

            <div id="documents_table_container">
                {{-- Loaded via AJAX --}}
            </div>
        </div>
    </div>

{{-- ADD / EDIT MODAL --}}
<div class="modal fade" id="addDocumentsModal" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addDocumentsModalLabel">Add Document</h5>
                <button class="btn-close" data-bs-dismiss="modal">X</button>
            </div>
            <form id="documentsForm" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="document_id" id="document_id" value="0">
                <input type="hidden" name="type" value="{{ $module_type }}">
                <input type="hidden" name="user_id" value="{{ $user->id }}">
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Document Type <span class="text-danger">*</span></label>
                        <select class="form-select" name="document_type_id" id="documents_type" required></select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Upload File <span class="text-danger">*</span></label>
                        <input type="file" class="form-control" name="document_file" id="document_file"
                            accept="image/*,application/pdf" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" onclick="saveDocument()">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- DELETE MODAL --}}
<div class="modal fade" id="deleteDocumentModal" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Delete Document</h5>
                <button class="btn-close" data-bs-dismiss="modal">X</button>
            </div>
            <div class="modal-body">
                <p>Delete document: <strong><span id="deleteDocumentText"></span></strong>?</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button class="btn btn-danger" id="confirmDeleteDocumentBtn">Delete</button>
            </div>
        </div>
    </div>
</div>
<!-- ===================== JAVASCRIPT ===================== -->
<script>
    var Countrylist = '{{ route('admin.users.countries.list', ['type' => $module_type]) }}';
    var Statelist = '{{ route('admin.users.states.list', ['type' => $module_type]) }}';
    var Citylist = '{{ route('admin.users.cities.list', ['type' => $module_type]) }}';
    /* --------------------------------------------------------------
       RELOAD CONTACTS LIST (AJAX)
       -------------------------------------------------------------- */
    function reloadContactsList() {
        const $form = $('#contact_filter_form');
        const url = '{{ route('admin.users.contacts.table', ['type' => $module_type, 'id' => $user->id]) }}';
        $.ajax({
            url: url,
            type: 'GET',
            data: $form.serialize(),
            beforeSend: () => $('#contacts_table_container')
                .html('<div class="text-center p-4"><i class="las la-spinner la-spin la-3x"></i></div>'),
            success: res => {
                if (res.html) $('#contacts_table_container').html(res.html);
            },
            error: () => Botble.showError('Failed to load contacts.')
        });
    }
    /* ---- Entries change ------------------------------------------------ */
    $('#contact_entries').on('change', () => $('#contact_filter_form').submit());
    /* ---- Search on ENTER ----------------------------------------------- */
    $('#contact_search').on('keydown', e => {
        if (e.key === 'Enter') { e.preventDefault(); $('#contact_filter_form').submit(); }
    });
    /* ---- Form submit (AJAX) -------------------------------------------- */
    $('#contact_filter_form').on('submit', e => {
        e.preventDefault();
        reloadContactsList();
    });
    /* ---- Pagination (delegated) ---------------------------------------- */
    $(document).on('click', '#contacts_table_container .pagination a', function (e) {
        e.preventDefault();
        $.get(this.href, $('#contact_filter_form').serialize())
            .done(res => { if (res.html) $('#contacts_table_container').html(res.html); })
            .fail(() => Botble.showError('Failed to load page.'));
    });
    /* --------------------------------------------------------------
       SAVE / UPDATE CONTACT
       -------------------------------------------------------------- */
    function saveorupdateContact() {
        const $form = $('#contactcontactForm');
        // $('.text-danger').remove();
        // client-side validation
        let ok = true;
        if (!$.trim($('#c_first_name').val())) { $('#c_first_name').after('<small class="text-danger">Required</small>'); ok = false; }
        if (!$.trim($('#c_last_name').val())) { $('#c_last_name').after('<small class="text-danger">Required</small>'); ok = false; }
        if (!/^\d{10}$/.test($('#c_phone_number').val())) { $('#c_phone_number').after('<small class="text-danger">10 digits</small>'); ok = false; }
        if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test($('#c_contact_email').val())) { $('#c_contact_email').after('<small class="text-danger">Valid email</small>'); ok = false; }
        if (!ok) return;
        $.ajax({
            url: '{{ route('admin.users.contact.save', ['type' => $module_type]) }}',
            method: 'POST',
            data: $form.serialize(),
            success: res => {
                if (res.success) {
                    $('#addDistContactModal').modal('hide');
                    reloadContactsList();
                    Botble.showSuccess(res.msg || res.message || 'Contact saved successfully.');
                } else {
                    Botble.showError(res.msg || res.message || 'Failed to save contact.');
                }
            },
            error: () => Botble.showError('Server error')
        });
    }
    /* --------------------------------------------------------------
       EDIT CONTACT
       -------------------------------------------------------------- */
    function editDistContactdetail(contactId, name) {
        $('#addDistContactModalLabel').html('Edit ' + name);
        let url = '{{ route("admin.users.contact.edit", ["type" => $module_type, "id" => ":id"]) }}';
        url = url.replace(':id', contactId);
        $.get(url)
            .done(res => {
                if (res.success) {
                    $('#contact_id').val(res.data.id);
                    $('#c_first_name').val(res.data.first_name);
                    $('#c_last_name').val(res.data.last_name);
                    $('#c_phone_number').val(res.data.phone);
                    $('#c_contact_email').val(res.data.email);
                    $('#addDistContactModal').modal('show');
                } else {
                    Botble.showError(res.msg || res.message || 'Failed to load contact.');
                }
            })
            .fail(() => Botble.showError('Network error'));
    }
    /* --------------------------------------------------------------
       OPEN ADD MODAL
       -------------------------------------------------------------- */
    function openaddcontactModal() {
        $('#addDistContactModalLabel').html('Add Contact');
        $('#contact_id').val('0');
        $('#contactcontactForm')[0].reset();
        // $('.text-danger').remove();
        $('#addDistContactModal').modal('show');
    }
    /* --------------------------------------------------------------
    DELETE CONTACT (FIXED – single API call)
    -------------------------------------------------------------- */

    // 1. Open modal and set id+name
    function openDeleteContactModal(id, name) {
        $('#deleteContactName').text(name);
        $('#confirmDeleteContactBtn').attr('data-contact-id', id);

        const modal = new bootstrap.Modal(document.getElementById('deleteContactModal'));
        modal.show();
    }

    // 2. Bind delete click only ONCE
    $(document)
        .off('click', '#confirmDeleteContactBtn')   // ← IMPORTANT FIX
        .on('click', '#confirmDeleteContactBtn', function () {

            const id = $(this).data('contact-id');
            const name = $('#deleteContactName').text();

            // Hide modal cleanly
            const modalInstance = bootstrap.Modal.getInstance(document.getElementById('deleteContactModal'));
            if (modalInstance) modalInstance.hide();

            deleteContact(id, name);
        });

    /* --------------------------------------------------------------
    Actual AJAX delete
    -------------------------------------------------------------- */
    function deleteContact(id, name) {

        let url = '{{ route("admin.users.contact.delete", ["type" => $module_type, "id" => ":id"]) }}';
        url = url.replace(':id', id);

        $.ajax({
            url: url,
            method: 'DELETE',
            data: { _token: '{{ csrf_token() }}', id: id },

            beforeSend: () => {
                $('#confirmDeleteContactBtn')
                    .prop('disabled', true)
                    .text('Deleting...');
            },

            success: res => {
                if (res.success) {
                    reloadContactsList();
                    Botble.showSuccess(res.msg || res.message || 'Contact deleted successfully.');
                } else {
                    Botble.showError(res.msg || res.message || 'Delete failed.');
                }
            },

            error: () => Botble.showError('Delete failed.'),

            complete: () => {
                $('#confirmDeleteContactBtn')
                    .prop('disabled', false)
                    .text('Delete');
            }
        });
    }

    /* --------------------------------------------------------------
   RELOAD NOTES LIST (AJAX)
   -------------------------------------------------------------- */
    function reloadNotesList() {
        const $form = $('#notes_filter_form');
        const url = '{{ route('admin.users.notes.table', ['type' => $module_type, 'id' => $user->id]) }}';
        $.ajax({
            url: url,
            type: 'GET',
            data: $form.serialize(),
            beforeSend: () => $('#notes_table_container')
                .html('<div class="text-center p-4"><i class="las la-spinner la-spin la-3x"></i></div>'),
            success: res => $('#notes_table_container').html(res.html),
            error: () => Botble.showError('Failed to load notes.')
        });
    }
    /* ---- Entries & Search ---- */
    $('#notes_entries').on('change', () => reloadNotesList());
    $('#notes_search').on('keydown', e => { if (e.key === 'Enter') { e.preventDefault(); reloadNotesList(); } });
    $('#notes_filter_form').on('submit', e => { e.preventDefault(); reloadNotesList(); });
    /* ---- Pagination ---- */
    $(document).on('click', '#notes_table_container .pagination a', function (e) {
        e.preventDefault();
        $.get(this.href, $('#notes_filter_form').serialize())
            .done(res => $('#notes_table_container').html(res.html))
            .fail(() => Botble.showError('Failed to load page.'));
    });
    /* --------------------------------------------------------------
       OPEN ADD MODAL
       -------------------------------------------------------------- */
    function openAddNoteModal() {
        $('#addNoteModalLabel').text('Add Note');
        $('#notes_id').val('0');
        $('#noteForm')[0].reset();
        $('#addNoteModal').modal('show');
    }
    /* --------------------------------------------------------------
       SAVE NOTE
       -------------------------------------------------------------- */
    function saveNote() {
        const $form = $('#noteForm');
        if (!$.trim($('#note_desc').val())) {
            Botble.showError('Note is required.');
            return;
        }
        $.ajax({
            url: '{{ route('admin.users.notes.save', ['type' => $module_type, 'id' => $user->id]) }}',
            method: 'POST',
            data: $form.serialize(),
            success: res => {
                if (res.success) {
                    $('#addNoteModal').modal('hide');
                    reloadNotesList();
                    Botble.showSuccess(res.message);
                } else {
                    Botble.showError(res.message);
                }
            },
            error: () => Botble.showError('Server error')
        });
    }
    /* --------------------------------------------------------------
       EDIT NOTE
       -------------------------------------------------------------- */
    function editNote(noteId) {
        const url = '{{ route("admin.users.notes.edit", ["type" => $module_type, "id" => $user->id, "note_id" => ":id"]) }}'.replace(':id', noteId);
        $.get(url).done(res => {
            if (res.success) {
                $('#addNoteModalLabel').text('Edit Note');
                $('#notes_id').val(res.data.id);
                $('#note_desc').val(res.data.notes);
                $('#addNoteModal').modal('show');
            }
        });
    }
    /* --------------------------------------------------------------
    DELETE NOTE (FIXED)
    -------------------------------------------------------------- */
    function openDeleteNoteModal(id, text) {
        $('#deleteNoteText').text(text);

        const $btn = $('#confirmDeleteNoteBtn');
        $btn.data('note-id', id);   // store fresh note ID

        $('#deleteNoteModal').modal('show');
    }

    /* Bind only once */
    $(document)
        .off('click', '#confirmDeleteNoteBtn')   // ← FIX
        .on('click', '#confirmDeleteNoteBtn', function () {

            const id = $(this).data('note-id');

            if (!id || isNaN(id) || id <= 0) {
                Botble.showError('Invalid note ID. Please refresh and try again.');
                return;
            }

            const url = '{{ route("admin.users.notes.delete", ["type" => $module_type, "id" => $user->id, "note_id" => ":id"]) }}'
                .replace(':id', id);

            $.ajax({
                url,
                type: 'DELETE',
                data: { _token: '{{ csrf_token() }}' },

                beforeSend: () => {
                    $('#confirmDeleteNoteBtn')
                        .prop('disabled', true)
                        .text('Deleting...');
                },

                success: res => {
                    $('#deleteNoteModal').modal('hide');

                    if (res.success) {
                        reloadNotesList();
                        Botble.showSuccess(res.message);
                    } else {
                        Botble.showError(res.message);
                    }
                },

                error: () => Botble.showError('Failed to delete the note. Please try again.'),

                complete: () => {
                    $('#confirmDeleteNoteBtn')
                        .prop('disabled', false)
                        .text('Yes, Delete')
                        .removeData('note-id');   // clear old ID
                }
            });
        });

    // Load notes on page load
    $(document).ready(() => reloadNotesList());
    // --------------------------------------------------------------
    //  Base URLs (generated once with Blade – no JS string mess)
    // --------------------------------------------------------------
    // --------------------------------------------------------------
    //  Base URLs – generated **once** with Blade (no JS string mess)
    // --------------------------------------------------------------
    window.routes = {
        setDefaultAddress: '{{ route('admin.users.addresses.set.default', ['type' => $module_type, 'id' => $user->id, 'address_id' => ':id']) }}',
        deleteAddress: '{{ route('admin.users.addresses.delete', ['type' => $module_type, 'id' => $user->id, 'address_id' => ':id']) }}'
    };
    window.addressToSetDefault = window.addressToSetDefault || null;
    window.addressToDelete = window.addressToDelete || null;


    // --------------------------------------------------------------
    //  SET DEFAULT MODAL
    // --------------------------------------------------------------
    function openSetDefaultModal(id, address) {
        window.addressToSetDefault = id;
        document.getElementById('defaultAddressText').textContent = address;
        new bootstrap.Modal(document.getElementById('setDefaultAddressModal')).show();
    }

    document.getElementById('confirmSetDefaultBtn').addEventListener('click', function () {
        const url = window.routes.setDefaultAddress.replace(':id', window.addressToSetDefault);

        fetch(url, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            }
        })
            .then(r => r.json())
            .then(data => {
                if (data.success) {
                    $('#setDefaultAddressModal').modal('hide');
                    reloadAddressesList();
                } else {
                    alert(data.message || 'Failed to set default address.');
                }
            })
            .catch(() => alert('Network error – please try again.'));
    });

    // --------------------------------------------------------------
    //  DELETE MODAL
    // --------------------------------------------------------------
    function openDeleteAddressModal(id, address) {
        addressToDelete = id;
        document.getElementById('deleteAddressText').textContent = address;
        new bootstrap.Modal(document.getElementById('deleteAddressModal')).show();
    }

    document.getElementById('confirmDeleteAddressBtn').addEventListener('click', function () {
        const url = window.routes.deleteAddress.replace(':id', window.addressToDelete);

        fetch(url, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Accept': 'application/json'
            }
        })
            .then(r => r.json())
            .then(data => {
                if (data.success) {
                    $('#deleteAddressModal').modal('hide');
                    reloadAddressesList();
                } else {
                    alert(data.message || 'Failed to delete address.');
                }
            })
            .catch(() => alert('Network error – please try again.'));
    });
    /* --------------------------------------------------------------
       RELOAD ADDRESSES LIST (AJAX)
       -------------------------------------------------------------- */
    function reloadAddressesList() {
        const $form = $('#address_filter_form');
        const url = '{{ route('admin.users.addresses.table', ['type' => $module_type, 'id' => $user->id]) }}';
        $.ajax({
            url: url,
            type: 'GET',
            data: $form.serialize(),
            beforeSend: () => $('#address_table_container')
                .html('<div class="text-center p-4"><i class="las la-spinner la-spin la-3x"></i></div>'),
            success: res => {
                if (res.html) $('#address_table_container').html(res.html);
            },
            error: () => Botble.showError('Failed to load addresses.')
        });
    }
    /* ---- Entries change ------------------------------------------------ */
    $('#address_entries').on('change', () => $('#address_filter_form').submit());
    /* ---- Search on ENTER ----------------------------------------------- */
    $('#address_search').on('keydown', e => {
        if (e.key === 'Enter') { e.preventDefault(); $('#address_filter_form').submit(); }
    });
    /* ---- Form submit (AJAX) -------------------------------------------- */
    $('#address_filter_form').on('submit', e => {
        e.preventDefault();
        reloadAddressesList();
    });
    /* ---- Pagination (delegated) ---------------------------------------- */
    $(document).on('click', '#address_table_container .pagination a', function (e) {
        e.preventDefault();
        $.get(this.href, $('#address_filter_form').serialize())
            .done(res => { if (res.html) $('#address_table_container').html(res.html); })
            .fail(() => Botble.showError('Failed to load page.'));
    });
    /* --------------------------------------------------------------
       OPEN ADD ADDRESS MODAL
       -------------------------------------------------------------- */
    function openAddAddressModal() {
        $('#addAddressLabel').text('Create new address');
        $('#address_id').val(0);
        $('input[name=address_full_name]').val('');
        $('input[name=address_phone]').val('');
        $('input[name=address_email]').val('');
        $('input[name=address_line]').val('');
        $('input[name=zip_code]').val('');
        $('#is_default').prop('checked', false);
        @if ($module_type === 'vendor')
            $('#address_country').val('');
            $('#address_state').val('');
            $('#address_city').val('');
        @else
            $('#address_country').val(null).trigger('change');
            $('#address_state').val(null).trigger('change');
            $('#address_city').val(null).trigger('change');
        @endif
        $('#addAddressModal').modal('show');
    }
    /* --------------------------------------------------------------
       EDIT ADDRESS
       -------------------------------------------------------------- */
    function editAddress(addressId) {
        $('#addAddressLabel').text('Edit address');
        const url = '{{ route("admin.users.addresses.edit", ["type" => $module_type, "id" => $user->id, "address_id" => ":id"]) }}'.replace(':id', addressId);

        $.get(url).done(res => {
            if (res.success) {
                const data = res.data;

                // Reset all fields
                $('#address_id').val(data.id);
                $('input[name=address_full_name]').val(data.name);
                $('input[name=address_phone]').val(data.phone);
                $('input[name=address_email]').val(data.email);
                $('input[name=address_line]').val(data.address);
                $('input[name=zip_code]').val(data.zip_code);
                if (data.is_default === 1)
                    $('#is_default').prop('checked', true);
                else {
                    $('#is_default').prop('checked', false);
                }

                // For vendors, use text fields; for others, use dropdowns
                @if ($module_type === 'vendor')
                    // Set text field values for vendors
                    $('#address_country').val(data.country_name || '');
                    $('#address_state').val(data.state_name || '');
                    $('#address_city').val(data.city_name || '');
                @else
                    // Clear all dropdowns
                    $('#address_country').empty().append('<option value="">Select country...</option>');
                    $('#address_state').empty().append('<option value="">Select state...</option>');
                    $('#address_city').empty().append('<option value="">Select city...</option>');

                    // Step 1: Set Country (using Select2 API)
                    const countryOption = new Option(data.country_name, data.country, true, true);
                    $('#address_country').append(countryOption).trigger('change');

                    // Step 2: Load States for the selected country
                    loadStates(data.country).then(() => {
                        // Step 3: Set State after states are loaded
                        const stateOption = new Option(data.state_name, data.state, true, true);
                        $('#address_state').append(stateOption).trigger('change');

                        // Step 4: Load Cities for the selected state
                        return loadCities(data.state, data.country);
                    }).then(() => {
                        // Step 5: Set City after cities are loaded
                        const cityOption = new Option(data.city_name, data.city, true, true);
                        $('#address_city').append(cityOption).trigger('change');
                    });
                @endif

                // Show modal
                $('#addAddressModal').modal('show');
            } else {
                Botble.showError('Failed to load address.');
            }
        }).fail(() => Botble.showError('Network error'));
    }
    /* --------------------------------------------------------------
       SAVE / UPDATE ADDRESS
       -------------------------------------------------------------- */
    $('#savenewAddress').on('click', function () {
        // Client-side validation (add more as needed)
        // if (!$('input[name=address_full_name]').val()) return Botble.showError('Name required');
        // if (!$('input[name=address_phone]').val()) return Botble.showError('Phone required');
        if (!$('input[name=address_line]').val()) return Botble.showError('Address required');
        // For vendors, get text values; for others, get dropdown IDs
        const countryVal = $('#address_country').is('input') ? $('#address_country').val() : $('#address_country').val();
        const stateVal = $('#address_state').is('input') ? $('#address_state').val() : $('#address_state').val();
        const cityVal = $('#address_city').is('input') ? $('#address_city').val() : $('#address_city').val();
        // if (!countryVal) return Botble.showError('Country required');
        // if (!stateVal) return Botble.showError('State required');
        // if (!cityVal) return Botble.showError('City required');
        // if(!$('input[name=zip_code').val()) return Botble.showError('Zipcode required');
        const formData = {
            address_id: $('#address_id').val(),
            address_full_name: $('input[name=address_full_name]').val(),
            address_phone: $('input[name=address_phone]').val(),
            address_email: $('input[name=address_email]').val(),
            address_line: $('input[name=address_line]').val(),
            address_country: countryVal,
            address_state: stateVal,
            address_city: cityVal,
            zip_code: $('input[name=zip_code').val(),
            is_default: $('#is_default').is(':checked') ? 1 : 0,
            _token: '{{ csrf_token() }}'
        };
        $.ajax({
            url: '{{ route('admin.users.addresses.save', ['type' => $module_type, 'id' => $user->id]) }}',
            method: 'POST',
            data: formData,
            success: res => {
                if (res.success) {
                    $('#addAddressModal').modal('hide');
                    reloadAddressesList();
                    Botble.showSuccess(res.message);
                } else {
                    Botble.showError(res.message || 'Failed to save address.');
                }
            },
            error: () => Botble.showError('Server error')
        });
    });
    /* --------------------------------------------------------------
       INITIALIZE SELECT2 FOR COUNTRY/STATE/CITY
       -------------------------------------------------------------- */
    $(document).ready(function () {
        // Initialize Select2 for country dropdown
        $('#documents_type').select2({
            dropdownParent: $('#addDocumentsModal'),
            placeholder: 'Select Documents Type...',
            allowClear: true,
            ajax: {
                url: '{{ route("admin.users.documents.type.list", ["type" => $module_type]) }}',
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                        q: params.term || ''
                    };
                },
                processResults: function (data) {
                    return {
                        results: data.data.map(function (country) {
                            return {
                                id: country.id,
                                text: country.name
                            };
                        })
                    };
                },
                cache: true
            }
        });
        @if ($module_type !== 'vendor')
            // Only initialize select2 for non-vendors
            $('#address_country').select2({
                dropdownParent: $('#addAddressModal'),
                placeholder: 'Select country...',
                allowClear: true,
                ajax: {
                    url: Countrylist,
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return {
                            q: params.term || ''
                        };
                    },
                    processResults: function (data) {
                        return {
                            results: data.data.map(function (country) {
                                return {
                                    id: country.id,
                                    text: country.name
                                };
                            })
                        };
                    },
                    cache: true
                }
            });
            // Initialize Select2 for state dropdown
            $('#address_state').select2({
                dropdownParent: $('#addAddressModal'),
                placeholder: 'Select state...'
            });
            // Initialize Select2 for city dropdown
            $('#address_city').select2({
                dropdownParent: $('#addAddressModal'),
                placeholder: 'Select city...'
            });
            // Country change event
            $('#address_country').on('change', function () {
                var countryId = $(this).val();
                loadStates(countryId);
                $('#address_city').empty().append('<option value="">Select city...</option>');
            });
            $('#address_state').on('change', function () {
                var stateId = $(this).val();
                var countryId = $('#address_country').val();
                loadCities(stateId, countryId);
            });
        @endif
    });
    function loadStates(countryId) {
        return new Promise((resolve) => {
            if (!countryId) {
                $('#address_state').empty().append('<option value="">Select state...</option>');
                resolve();
                return;
            }

            $.ajax({
                url: Statelist,
                method: 'GET',
                data: { country_id: countryId },
                success: function (response) {
                    $('#address_state').empty().append('<option value="">Select state...</option>');
                    if (response.data && response.data.length > 0) {
                        $.each(response.data, function (index, state) {
                            $('#address_state').append(`<option value="${state.id}">${state.name}</option>`);
                        });
                    }
                    resolve();
                },
                error: () => {
                    $('#address_state').empty().append('<option value="">Error loading states</option>');
                    resolve();
                }
            });
        });
    }

    function loadCities(stateId, countryId) {
        return new Promise((resolve) => {
            if (!stateId) {
                $('#address_city').empty().append('<option value="">Select city...</option>');
                resolve();
                return;
            }

            $.ajax({
                url: Citylist,
                method: 'GET',
                data: { state_id: stateId, country_id: countryId },
                success: function (response) {
                    $('#address_city').empty().append('<option value="">Select city...</option>');
                    if (response.data && response.data.length > 0) {
                        $.each(response.data, function (index, city) {
                            $('#address_city').append(`<option value="${city.id}">${city.name}</option>`);
                        });
                    }
                    resolve();
                },
                error: () => {
                    $('#address_city').empty().append('<option value="">Error loading cities</option>');
                    resolve();
                }
            });
        });
    }
    // Load addresses on page load
    $(document).ready(() => reloadAddressesList());
    // -----------------------------------------------------------------
    function reloadDocumentsList() {
        const $f = $('#documents_filter_form');
        const url = '{{ route("admin.users.documents.table", ["type" => $module_type ?? "admin", "id" => $user->id ?? 0]) }}';
        $.ajax({
            url, type: 'GET', data: $f.serialize(),
            beforeSend: () => $('#documents_table_container').html('<div class="text-center p-4"><i class="las la-spinner la-spin la-3x"></i></div>'),
            success: r => r.html && $('#documents_table_container').html(r.html),
            error: () => Botble?.showError?.('Failed to load documents.')
        });
    }

    $('#documents_entries').on('change', () => $f.submit());
    $('#documents_search').on('keydown', e => e.key === 'Enter' && (e.preventDefault(), $f.submit()));
    $('#documents_filter_form').on('submit', e => (e.preventDefault(), reloadDocumentsList()));

    $(document).on('click', '#documents_table_container .pagination a', function (e) {
        e.preventDefault();
        $.get(this.href, $('#documents_filter_form').serialize())
            .done(r => r.html && $('#documents_table_container').html(r.html))
            .fail(() => Botble?.showError?.('Failed to load page.'));
    });

    // -----------------------------------------------------------------
    window.openAddDocumentsModal = function () {
        $('#addDocumentsModalLabel').text('Add Document');
        $('#document_id').val(0);
        $('#documentsForm')[0].reset();
        $('#documents_type').val(null).trigger('change');
        $('#addDocumentsModal').modal('show');
    };

    window.saveDocument = function () {
        if (!$('#documents_type').val()) return Botble?.showError?.('Document type required');
        if (!$('#document_file').val()) return Botble?.showError?.('Select a file');

        const fd = new FormData($('#documentsForm')[0]);
        $.ajax({
            url: '{{ route("admin.users.documents.save", ["type" => $module_type ?? "admin", "id" => $user->id ?? 0]) }}',
            method: 'POST', data: fd, processData: false, contentType: false,
            success: r => {
                if (r.success) { $('#addDocumentsModal').modal('hide'); reloadDocumentsList(); Botble?.showSuccess?.(r.message); }
                else Botble?.showError?.(r.message);
            },
            error: function (xhr) {
                if (xhr.status === 422 && xhr.responseJSON?.message) {
                    Botble.showError(xhr.responseJSON.message);
                } else {
                    Botble.showError('Server error');
                }
            }
        });
    };

    // -----------------------------------------------------------------
    window.openDeleteDocumentModal = function (id, name) {
        $('#deleteDocumentText').text(name);
        $('#confirmDeleteDocumentBtn').data('document-id', id);
        $('#deleteDocumentModal').modal('show');
    };

    // Bind ONLY once
    $(document).off('click', '#confirmDeleteDocumentBtn').on('click', '#confirmDeleteDocumentBtn', function (e) {
        e.preventDefault();

        const btn = $(this);
        const id = btn.data('document-id');

        const url = '{{ route("admin.users.documents.delete", ["type" => $module_type ?? "admin", "id" => $user->id ?? 0, "document_id" => ":id"]) }}'
            .replace(':id', id);

        $.ajax({
            url,
            type: 'DELETE',
            data: { _token: '{{ csrf_token() }}' },
            beforeSend: () => btn.prop('disabled', true).text('Deleting...'),
            success: r => {
                $('#deleteDocumentModal').modal('hide');
                if (r.success) {
                    reloadDocumentsList();
                    Botble?.showSuccess?.(r.message);
                } else {
                    Botble?.showError?.(r.message);
                }
            },
            error: () => Botble?.showError?.('Failed to delete'),
            complete: () => btn.prop('disabled', false).text('Delete')
        });
    });

    $(document).ready(() => reloadDocumentsList());

</script>