@extends('layouts.app')

@section('title', 'Customer Masters')

@push('styles')
<link href="{{ asset('assets/css/tables-standard.css') }}" rel="stylesheet">

<style>
    /* Sticky table header styles */
    .table-header-wrapper { position: relative; z-index: 10; }
    /* .table-body-wrapper { position: relative; } */
    /* Ensure row action dropdowns aren't clipped by scroll container */
    .table-body-wrapper .dropdown-menu { z-index: 1080; }
    .table-body-wrapper.showing-dropdown { overflow: visible !important; }
    .table-header-wrapper table, .table-body-wrapper table { table-layout: fixed; width: 100%; min-width: 900px; }
    .table-responsive { overflow-x: auto; }
    @media (max-width: 1200px) { .hide-on-md { display: none; } }
    @media (max-width: 768px) {
        .hide-on-sm { display: none; }
        .table-header-wrapper table, .table-body-wrapper table { min-width: 600px; }
        .table-sm { font-size: 0.75rem; }
    }
    @media (max-width: 576px) { .hide-on-xs { display: none; } .table-header-wrapper table, .table-body-wrapper table { min-width: 400px; } }
    .table-body-wrapper::-webkit-scrollbar { width: 8px; }
    .table-body-wrapper::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
    .table-body-wrapper::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; }
    .table-body-wrapper::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }
    .table th, .table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0.25rem 0.3rem; }
    .data-table-row-action { text-align: center; }
    .dropdown-toggle::after { display: none; }
    .table tbody .dropdown-menu { min-width: 100px; font-size: 0.8rem; border: 1px solid #dee2e6; border-radius: 0.375rem; box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075); }
    .table tbody .btn-link { color: #6c757d; text-decoration: none; border: none; background: none; padding: 0.25rem; }
    .table tbody .btn-link:hover { color: #495057; background-color: #f8f9fa; border-radius: 0.25rem; }
    /* Offcanvas width */
    #customerOffcanvas { width: clamp(900px, 72vw, 1280px) !important; max-width: 100vw; }
    @media (max-width: 768px) { #customerOffcanvas { width: 100vw !important; } }
    @media (min-width: 1400px) { #customerOffcanvas { width: 1200px !important; } }
    /* Disable native tab interactions; controlled by JS */
    #customerOffcanvas .theme-wizard.custom-wizard-override .nav-link { pointer-events: none !important; }
    #customerOffcanvas .theme-wizard .tab-content { max-height: calc(100vh - 250px); overflow-y: auto; }
    /* Hide bulk actions initially until rows are selected */
    #table-customers-actions { display: none; }
</style>
@endpush

@section('content')
    <!-- Main Table Card -->
    <div class="card">
        <div class="card-header py-2">
            <div class="row flex-between-center">
                <div class="col-auto d-flex align-items-center">
                     <h6 class="mb-0">Customer Masters</h6>
                </div>
                <div class="col-auto d-flex align-items-center gap-2">
                    <div class="me-2" id="table-customers-actions">
                        <div class="d-flex">
                            <select class="form-select form-select-sm" aria-label="Bulk actions">
                                <option selected="">Bulk actions</option>
                                <option value="activate">Activate</option>
                                <option value="deactivate">Deactivate</option>
                                <option value="delete">Delete</option>
                                <option value="export">Export Selected</option>
                            </select>
                            <button class="btn btn-falcon-default btn-sm ms-2" type="button">Apply</button>
                        </div>
                    </div>

                    <div id="table-customers-replace-element">
                        @can('masters-business-partners-customer-masters.create')
                        <button class="btn btn-falcon-default btn-sm" type="button" id="newCustomerButton">
                            <span class="fas fa-plus" data-fa-transform="shrink-3 down-2"></span>
                            <span class="d-none d-sm-inline-block ms-1">New</span>
                        </button>
                        @endcan
                        <button class="btn btn-falcon-default btn-sm mx-2" type="button" data-bs-toggle="collapse" data-bs-target="#customerFilters">
                            <span class="fas fa-filter" data-fa-transform="shrink-3 down-2"></span>
                            <span class="d-none d-sm-inline-block ms-1">Filter</span>
                        </button>
                        @can('masters-business-partners-customer-masters.export')
                        <button class="btn btn-falcon-default btn-sm me-2" type="button" id="exportCustomers">
                            <span class="fas fa-external-link-alt" data-fa-transform="shrink-3 down-2"></span>
                            <span class="d-none d-sm-inline-block ms-1">Export</span>
                        </button>
                        @endcan
                    </div>
                </div>
            </div>
        </div>

        <!-- Advanced Filters (Collapsible) -->
        <div class="collapse p-0" id="customerFilters">
            <div class="card-body p-2 border-top">
                <div class="row g-3">
                    <div class="col-2 col-md-2 col-lg-2">
                        <input class="form-control form-control-sm" id="filterCustomerCode" type="text" placeholder="Search by Code">
                    </div>
                    <div class="col-2 col-md-2 col-lg-2">
                        <input class="form-control form-control-sm" id="filterCustomerName" type="text" placeholder="Search by Name">
                    </div>
                    <div class="col-2 col-md-2 col-lg-2">
                        <select class="form-select form-select-sm" id="filterCustomerType">
                            <option value="">All Types</option>
                            <option value="Distributor">Distributor</option>
                            <option value="Retailer">Retailer</option>
                            <option value="Wholesaler">Wholesaler</option>
                            <option value="End Customer">End Customer</option>
                            <option value="Corporate">Corporate</option>
                        </select>
                    </div>
                    <div class="col-2 col-md-2 col-lg-2">
                        <input class="form-control form-control-sm" id="filterCity" type="text" placeholder="Search by City">
                    </div>
                    <div class="col-2 col-md-2 col-lg-2">
                        <select class="form-select form-select-sm" id="filterStatus">
                            <option value="">All Status</option>
                            <option value="Active">Active</option>
                            <option value="Inactive">Inactive</option>
                        </select>
                    </div>
                    <div class="col-2 col-md-2 col-lg-2 d-flex align-items-end">
                        <button class="btn btn-primary btn-sm me-2" type="button" id="applyCustomerFilters">Apply</button>
                        <button class="btn btn-outline-secondary btn-sm" type="button" id="clearCustomerFilters">Clear</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="card-body p-0">
            <div class="table-responsive">
                <!-- Fixed Header -->
                <div class="table-header-wrapper">
                    <table class="table table-sm table-striped fs-10 mb-0">
                        <thead class="bg-200 text-900 sticky-top" style="position: sticky; top: 0; z-index: 10;">
                            <tr class="text-nowrap">
                                <th class="text-center" style="width: 5%;">
                                    <div class="form-check  mb-0 d-flex align-items-center">
                                        <input class="form-check-input" id="checkbox-bulk-customers-select" type="checkbox" />
                                    </div>
                                </th>
                                <th class="text-900 sort pe-1 align-middle" scope="col" data-sort="customer_code" style="width: 12%;">CUSTOMER CODE</th>
                                <th class="text-900 sort pe-1 align-middle" scope="col" data-sort="customer_name" style="width: 18%;">CUSTOMER NAME</th>
                                <th class="text-900 sort pe-1 align-middle" scope="col" data-sort="email" style="width: 15%;">EMAIL</th>
                                <th class="text-900 sort pe-1 align-middle hide-on-md" scope="col" data-sort="phone" style="width: 10%;">PHONE</th>
                                <th class="text-900 sort pe-1 align-middle" scope="col" data-sort="city" style="width: 10%;">CITY</th>
                                <th class="text-900 sort pe-1 align-middle hide-on-sm" scope="col" data-sort="state" style="width: 10%;">STATE</th>
                                <th class="text-900 sort pe-1 align-middle" scope="col" data-sort="customer_type" style="width: 10%;">TYPE</th>
                                <th class="text-900 sort pe-1 align-middle" scope="col" data-sort="status" style="width: 8%;">STATUS</th>
                                <th class="text-900 sort pe-1 align-middle hide-on-sm" scope="col" data-sort="created_at" style="width: 10%;">CREATED AT</th>
                                @canany(['masters-business-partners-customer-masters.update','masters-business-partners-customer-masters.delete'])
                                <th class="text-900 no-sort pe-1 align-middle text-center" style="width: 7%;">ACTION</th>
                                @endcanany
                            </tr>
                        </thead>
                    </table>
                </div>

                <!-- Scrollable Body -->
                <div class="table-body-wrapper scrollbar js-vh-table" style="overflow: auto; border-top: none;">
                    <table class="table table-sm table-striped fs-10 mb-0">
                        <colgroup>
                            <col style="width: 5%;">
                            <col style="width: 12%;">
                            <col style="width: 18%;">
                            <col style="width: 15%;">
                            <col style="width: 10%;">
                            <col style="width: 10%;">
                            <col style="width: 10%;">
                            <col style="width: 10%;">
                            <col style="width: 8%;">
                            <col style="width: 10%;">
                            <col style="width: 7%;">
                        </colgroup>
                        <tbody id="customerTableBody"></tbody>
                    </table>
                </div>
            </div>
        </div>
   </div>

    <!-- Customer Offcanvas (Wizard) -->
    <div class="offcanvas offcanvas-end" id="customerOffcanvas" tabindex="-1" aria-labelledby="customerOffcanvasLabel" data-bs-scroll="true" data-bs-backdrop="true">
        <div class="offcanvas-header bg-light">
            <h5 class="offcanvas-title" id="customerOffcanvasLabel">
                <i class="fas fa-users me-2"></i><span id="customerOffcanvasTitle">Add New Customer</span>
            </h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body p-0">
            <div class="card theme-wizard h-100 border-0">
                <div class="card-header bg-body-tertiary pt-3 pb-2">
                    <ul class="nav justify-content-between nav-wizard">
                        <li class="nav-item"><a class="nav-link active fw-semi-bold" href="#customer-tab1" data-bs-toggle="tab" data-wizard-step="1"><span class="nav-item-circle-parent"><span class="nav-item-circle"><span class="fas fa-id-card"></span></span></span><span class="d-none d-md-block mt-1 fs-10">Customer</span></a></li>
                        <li class="nav-item"><a class="nav-link fw-semi-bold" href="#customer-tab2" data-bs-toggle="tab" data-wizard-step="2"><span class="nav-item-circle-parent"><span class="nav-item-circle"><span class="fas fa-layer-group"></span></span></span><span class="d-none d-md-block mt-1 fs-10">Addresses/GSTIN</span></a></li>
                        <li class="nav-item"><a class="nav-link fw-semi-bold" href="#customer-tab3" data-bs-toggle="tab" data-wizard-step="3"><span class="nav-item-circle-parent"><span class="nav-item-circle"><span class="fas fa-clipboard-check"></span></span></span><span class="d-none d-md-block mt-1 fs-10">Summary</span></a></li>
                        <li class="nav-item"><a class="nav-link fw-semi-bold" href="#customer-tab4" data-bs-toggle="tab" data-wizard-step="4"><span class="nav-item-circle-parent"><span class="nav-item-circle"><span class="fas fa-thumbs-up"></span></span></span><span class="d-none d-md-block mt-1 fs-10">Done</span></a></li>
                    </ul>
                </div>
                <div class="card-body py-4">
                    <div class="tab-content">
                        <!-- Step 1: Customer Basic Info -->
                        <div class="tab-pane active px-sm-3 px-md-5" role="tabpanel" aria-labelledby="customer-tab1" id="customer-tab1">
                           <div class="card">
                            <div class="card-body">
                            <form novalidate="novalidate" data-wizard-form="1" id="customerBasicForm">
                                @csrf
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label class="form-label" for="c_company_id">Company <span class="text-danger">*</span></label>
                                        <select class="form-select form-select-sm" id="c_company_id" name="company_id"></select>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label" for="c_customer_code">Customer Code <span class="text-danger">*</span></label>
                                        <input class="form-control form-control-sm" type="text" id="c_customer_code" name="customer_code" placeholder="e.g., CUST001" required>
                                    </div>
                                </div>
                                <div class="row g-3 mt-0">
                                    <div class="col-md-6">
                                        <label class="form-label" for="c_customer_name">Customer Name <span class="text-danger">*</span></label>
                                        <input class="form-control form-control-sm" type="text" id="c_customer_name" name="customer_name" placeholder="Customer Pvt Ltd" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label" for="c_customer_type">Customer Type</label>
                                        <select class="form-select form-select-sm" id="c_customer_type" name="customer_type">
                                            <option value="">Select Type</option>
                                            <option value="Distributor">Distributor</option>
                                            <option value="Retailer">Retailer</option>
                                            <option value="Wholesaler">Wholesaler</option>
                                            <option value="End Customer">End Customer</option>
                                            <option value="Corporate">Corporate</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row g-3 mt-0">
                                    <div class="col-md-6">
                                        <label class="form-label" for="c_payment_terms">Payment Terms</label>
                                        <select class="form-select form-select-sm" id="c_payment_terms" name="payment_terms">
                                            <option value="">Select Terms</option>
                                            <option value="15 Days">15 Days</option>
                                            <option value="30 Days">30 Days</option>
                                            <option value="45 Days">45 Days</option>
                                            <option value="60 Days">60 Days</option>
                                            <option value="Cash on Delivery">Cash on Delivery</option>
                                        </select>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label" for="c_credit_limit">Credit Limit</label>
                                        <input class="form-control form-control-sm" type="number" id="c_credit_limit" name="credit_limit" placeholder="e.g., 500000" step="0.01">
                                    </div>
                                </div>
                                <div class="row g-3 mt-0">
                                    <div class="col-md-6">
                                        <label class="form-label" for="c_status">Status</label>
                                        <select class="form-select form-select-sm" id="c_status" name="status">
                                            <option value="Active">Active</option>
                                            <option value="Inactive">Inactive</option>
                                        </select>
                                    </div>
                                </div>
                            </form>
                        </div>
                      </div>
                    </div>
                        <!-- Step 2: Addresses, GSTINs, Contacts -->
                        <div class="tab-pane px-sm-3 px-md-5" role="tabpanel" aria-labelledby="customer-tab2" id="customer-tab2">
                            <form data-wizard-form="2" id="customerPartyForm">
                                <div class="card mb-3">
                                    <div class="card-header d-flex flex-wrap justify-content-between align-items-center ">
                                        <h6 class="mb-0"><i class="fas fa-file-invoice me-2"></i>GSTINs/Address</h6>
                                        <button type="button" class="btn btn-sm btn-outline-primary" id="addCustomerGstinRow"><i class="fas fa-plus me-1"></i>Add GSTIN</button>
                                    </div>

                                    <div class="card-body">
                                        <div id="customerGstSectionsWrapper">
                                            <div id="customerGstinEditor" class="border rounded p-2 mb-2 d-none">
                                                <div class="row ">
                                                    <div class="col-md-6">
                                                        <label class="form-label d-flex justify-content-between p-0"><span>GSTIN Number <span class="text-danger">*</span></span>
                                                            <div class="form-check p-0 m-0">
                                                                <input class="form-check-input" type="checkbox" id="customer_gst_exempt">
                                                                <label class="form-check-label" for="customer_gst_exempt">Don't Have GSTIN</label>
                                                            </div>
                                                        </label>
                                                        <input type="text" class="form-control form-control-sm" id="ce_gstin_number" maxlength="15" placeholder="15 chars">
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label class="form-label">Trade Name <span class="text-danger">*</span></label>
                                                        <input type="text" class="form-control form-control-sm" id="ce_trade_name">
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label class="form-label">Address Line 1 <span class="text-danger">*</span></label>
                                                        <input type="text" class="form-control form-control-sm" id="ce_addr_line1">
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label class="form-label">Address Line 2</label>
                                                        <input type="text" class="form-control form-control-sm" id="ce_addr_line2">
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label class="form-label">State <span class="text-danger">*</span></label>
                                                        <select class="form-select form-select-sm" id="ce_state_id"></select>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label class="form-label">City <span class="text-danger">*</span></label>
                                                        <input type="text" class="form-control form-control-sm" id="ce_city">
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label class="form-label">Pincode <span class="text-danger">*</span></label>
                                                        <input type="text" class="form-control form-control-sm" id="ce_pincode" maxlength="6">
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label class="form-label">Country</label>
                                                        <input type="text" class="form-control form-control-sm" id="ce_country" placeholder="e.g., India">
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label class="form-label">Contact Person <span class="text-danger">*</span></label>
                                                        <input type="text" class="form-control form-control-sm" id="ce_contact_name">
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label class="form-label">Designation</label>
                                                        <input type="text" class="form-control form-control-sm" id="ce_contact_designation">
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label class="form-label">Phone <span class="text-danger">*</span></label>
                                                        <input type="text" class="form-control form-control-sm" id="ce_contact_phone">
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label class="form-label">Email</label>
                                                        <input type="email" class="form-control form-control-sm" id="ce_contact_email">
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label class="form-label">Status</label>
                                                        <select class="form-select form-select-sm" id="ce_status">
                                                            <option value="ACTIVE">ACTIVE</option>
                                                            <option value="INACTIVE">INACTIVE</option>
                                                            <option value="CANCELLED">CANCELLED</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-md-2 d-flex align-items-end mt-2">
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="checkbox" id="ce_is_default">
                                                            <label class="form-check-label" for="ce_is_default">Default</label>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-2 d-flex align-items-end mt-2">
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="checkbox" id="ce_is_active" checked>
                                                            <label class="form-check-label" for="ce_is_active">Active</label>
                                                        </div>
                                                    </div>
                                                    <div class="col-12 d-flex justify-content-end gap-2 mt-2">
                                                        <button type="button" class="btn btn-sm btn-secondary" id="ce_cancel">Cancel</button>
                                                        <button type="button" class="btn btn-sm btn-primary" id="ce_save">Save</button>
                                                    </div>
                                                </div>
                                            </div>
                                            <div id="customerGstinsContainer"><div class="text-muted text-center">No Addresses/GSTIN added yet.</div></div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>

                        <!-- Step 3: Summary -->
                        <div class="tab-pane px-sm-3 px-md-5" role="tabpanel" aria-labelledby="customer-tab3" id="customer-tab3">
                            <div class="mb-3">
                                <div class="d-flex align-items-center mb-2">
                                    <span class="fas fa-clipboard-check text-primary me-2 fs-1"></span>
                                    <div>
                                        <h5 class="mb-1 text-900">Review & Confirm</h5>
                                        <p class="mb-0 text-muted fs-9">Verify customer details before submitting</p>
                                    </div>
                                </div>
                            </div>
                            <div id="customerSummary"></div>
                        </div>

                        <!-- Step 4: Done -->
                        <div class="tab-pane text-center px-sm-3 px-md-5" role="tabpanel" aria-labelledby="customer-tab4" id="customer-tab4">
                            <div class="py-4">
                                <div id="customerSuccessState" class="d-none">
                                    <div class="completion-card success-card">
                                        <div class="completion-card-body">
                                            <div class="success-animation mb-4">
                                                <div class="success-circle">
                                                    <div class="success-inner">
                                                        <span class="fas fa-check text-white fs-2"></span>
                                                    </div>
                                                    <div class="success-ripple"></div>
                                                    <div class="success-ripple-2"></div>
                                                </div>
                                            </div>
                                            <div class="completion-content">
                                                <h4 class="completion-title text-900 mb-2">Customer Saved!</h4>
                                                <p class="completion-subtitle text-muted mb-4">Your customer has been saved successfully</p>
                                                <div class="success-actions">
                                                    <button class="btn btn-primary btn-lg professional-btn" type="button" id="closeCustomerWizardBtn">
                                                        <span class="fas fa-list me-2"></span>Back to list
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="customerErrorState" class="d-none">
                                    <div class="completion-card error-card">
                                        <div class="completion-card-body">
                                            <div class="error-animation mb-4">
                                                <div class="error-circle">
                                                    <div class="error-inner">
                                                        <span class="fas fa-exclamation-triangle text-white fs-2"></span>
                                                    </div>
                                                    <div class="error-pulse"></div>
                                                </div>
                                            </div>
                                            <div class="completion-content">
                                                <h4 class="completion-title text-900 mb-2">Unable to Save</h4>
                                                <p class="completion-subtitle text-muted mb-4">We encountered some issues</p>
                                                <div class="error-details-card">
                                                    <div class="error-details-header">
                                                        <span class="fas fa-exclamation-circle text-danger me-2"></span>
                                                        <span class="fw-semi-bold text-900">Errors</span>
                                                    </div>
                                                    <div id="customerErrorMessage" class="error-message-content">An unknown error occurred.</div>
                                                </div>
                                                <div class="error-actions">
                                                    <button class="btn btn-outline-secondary btn-lg professional-btn me-3" type="button" id="customerRetryBtn">
                                                        <span class="fas fa-arrow-left me-2"></span>Go Back & Fix
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer bg-body-tertiary">
                    <div class="px-sm-3 px-md-5">
                        <ul class="pager wizard list-inline mb-0">
                            <li class="previous d-none">
                                <button class="btn btn-link ps-0" type="button" id="customer-wizard-prev-btn"><span class="fas fa-chevron-left me-2" data-fa-transform="shrink-3"></span>Prev</button>
                            </li>
                            <li class="next">
                                <button class="btn btn-primary px-5 px-sm-6" type="button" id="customer-wizard-next-btn">Next<span class="fas fa-chevron-right ms-2" data-fa-transform="shrink-3"> </span></button>
                            </li>
                            <li class="submit d-none" id="customer-wizard-submit-item">
                                <button class="btn btn-success px-5 px-sm-6" type="button" id="customer-wizard-submit-btn">
                                    <span class="fas fa-save me-2"></span>Save Customer
                                </button>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
<script>
    // Expose page capability flags and current company to JS
    @php
        $pageCaps = isset($caps) && is_array($caps) ? $caps : [
            'view' => false,
            'create' => false,
            'update' => false,
            'delete' => false,
            'export' => false,
            'toggle' => false,
        ];
        $__currentCompanyId = session('company_id');
    @endphp
    window.pageCaps = @json($pageCaps);
    window.currentCompanyId = @json($__currentCompanyId);
</script>

<!-- Shared States loader -->
<script src="{{ asset('assets/js/common/states.js') }}"></script>
<!-- Session Manager -->
<script src="{{ asset('assets/js/utils/session-manager.js') }}"></script>
<!-- Customer Master List -->
<script src="{{ asset('assets/js/custom/business_partners/customer_masters.js') }}"></script>
<script>
// Prevent dropdown clipping inside scrollable table body
document.addEventListener('shown.bs.dropdown', function (e) {
    const wrapper = document.querySelector('.table-body-wrapper');
    if (wrapper && wrapper.contains(e.target)) wrapper.classList.add('showing-dropdown');
});
document.addEventListener('hidden.bs.dropdown', function (e) {
    const wrapper = document.querySelector('.table-body-wrapper');
    if (wrapper && wrapper.contains(e.target)) wrapper.classList.remove('showing-dropdown');
});
</script>

<!-- Customer Wizard Controller & Logic -->
<script src="{{ asset('assets/js/custom/business_partners/customer_wizard_controller.js') }}"></script>
<script src="{{ asset('assets/js/custom/business_partners/customer_wizard.js') }}"></script>
@endpush