@extends('layouts.app')

@section('title', 'Vendor 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; }
    /* 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; }

    /* Vendor-specific form validation styles */
    .is-invalid {
        border-color: #dc3545 !important;
        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
    }

    .is-valid {
        border-color: #198754 !important;
        box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25) !important;
    }

    .invalid-feedback {
        display: block;
        width: 100%;
        margin-top: 0.25rem;
        font-size: 0.875rem;
        color: #dc3545;
        animation: fadeIn 0.3s ease;
    }

    .valid-feedback {
        display: block;
        width: 100%;
        margin-top: 0.25rem;
        font-size: 0.875rem;
        color: #198754;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-5px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* Form loading state */
    .form-submitting {
        pointer-events: none;
        opacity: 0.7;
    }

    .form-submitting .btn::after {
        content: "";
        position: absolute;
        width: 16px;
        height: 16px;
        margin: auto;
        border: 2px solid transparent;
        border-top-color: #ffffff;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    /* Offcanvas width */
    #vendorOffcanvas { width: clamp(900px, 72vw, 1280px) !important; max-width: 100vw; }
    @media (max-width: 768px) { #vendorOffcanvas { width: 100vw !important; } }
    @media (min-width: 1400px) { #vendorOffcanvas { width: 50% !important; } }

    /* Disable native tab interactions; controlled by JS */
    #vendorOffcanvas .theme-wizard.custom-wizard-override .nav-link { pointer-events: none !important; }
    #vendorOffcanvas .theme-wizard .tab-content { max-height: calc(100vh - 250px); overflow-y: auto; }

    /* Hide bulk actions initially until rows are selected */
    #table-vendors-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">Vendor Masters</h6>
                </div>
                <div class="col-auto d-flex align-items-center gap-2">
                    <div class="me-2" id="table-vendors-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-vendors-replace-element">
                        @can('masters-business-partners-vendor-masters.create')
                        <button class="btn btn-falcon-default btn-sm" type="button" id="newVendorButton">
                            <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="#vendorFilters">
                            <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-vendor-masters.export')
                        <button class="btn btn-falcon-default btn-sm me-2" type="button" id="exportVendors">
                            <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="vendorFilters">
            <div class="card-body border-top p-2">
                <div class="row g-3">
                    <div class="col-2 col-md-2 col-lg-2">
                        <input class="form-control form-control-sm" id="filterVendorCode" 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="filterVendorName" 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="filterVendorType">
                            <option value="">All Types</option>
                            <option value="Material Supplier">Material Supplier</option>
                            <option value="Hardware Supplier">Hardware Supplier</option>
                            <option value="Equipment Supplier">Equipment Supplier</option>
                            <option value="Service Provider">Service Provider</option>
                            <option value="Contractor">Contractor</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="applyVendorFilters">Apply</button>
                        <button class="btn btn-outline-secondary btn-sm" type="button" id="clearVendorFilters">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-vendors-select" type="checkbox" />
                                    </div>
                                </th>
                                <th class="text-900 sort pe-1 align-middle" scope="col" data-sort="vendor_code" style="width: 12%;">VENDOR CODE</th>
                                <th class="text-900 sort pe-1 align-middle" scope="col" data-sort="vendor_name" style="width: 18%;">VENDOR NAME</th>
                                {{-- <th class="text-900 sort pe-1 align-middle" scope="col" data-sort="contact_person" style="width: 12%;">CONTACT PERSON</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="vendor_type" style="width: 10%;">TYPE</th>
                                {{-- <th class="text-900 sort pe-1 align-middle" scope="col" data-sort="payment_terms" style="width: 8%;">PAYMENT TERMS</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-vendor-masters.update','masters-business-partners-vendor-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="vendorTableBody"></tbody>
                    </table>
                </div>
            </div>
        </div>
   </div>

    <!-- Vendor Offcanvas (Wizard) -->
    <div class="offcanvas offcanvas-end" id="vendorOffcanvas" tabindex="-1" aria-labelledby="vendorOffcanvasLabel" data-bs-scroll="true" data-bs-backdrop="true" >
        <div class="offcanvas-header bg-light">
            <h5 class="offcanvas-title" id="vendorOffcanvasLabel">
                <i class="fas fa-store me-2"></i><span id="vendorOffcanvasTitle">Add New Vendor</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="#vendor-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">Vendor</span></a></li>
                        <li class="nav-item"><a class="nav-link fw-semi-bold" href="#vendor-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="#vendor-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="#vendor-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: Vendor Basic Info -->
                        <div class="tab-pane active px-sm-3 px-md-5" role="tabpanel" aria-labelledby="vendor-tab1" id="vendor-tab1">
                            <form novalidate="novalidate" data-wizard-form="1" id="vendorBasicForm">
                                @csrf
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label class="form-label" for="v_company_id">Company <span class="text-danger">*</span></label>
                                        <select class="form-select form-select-sm" id="v_company_id" name="company_id"></select>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label" for="v_vendor_code">Vendor Code <span class="text-danger">*</span></label>
                                        <input class="form-control form-control-sm" type="text" id="v_vendor_code" name="vendor_code" placeholder="e.g., VEND001" required>
                                    </div>
                                </div>
                                <div class="row g-3 mt-0">
                                    <div class="col-md-6">
                                        <label class="form-label" for="v_vendor_name">Vendor Name <span class="text-danger">*</span></label>
                                        <input class="form-control form-control-sm" type="text" id="v_vendor_name" name="vendor_name" placeholder="Vendor Pvt Ltd" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label" for="v_vendor_type">Vendor Type</label>
                                        <select class="form-select form-select-sm" id="v_vendor_type" name="vendor_type">
                                            <option value="">Select Type</option>
                                            <option value="Material Supplier">Material Supplier</option>
                                            <option value="Hardware Supplier">Hardware Supplier</option>
                                            <option value="Equipment Supplier">Equipment Supplier</option>
                                            <option value="Service Provider">Service Provider</option>
                                            <option value="Contractor">Contractor</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row g-3 mt-0">
                                    <div class="col-md-6">
                                        <label class="form-label" for="v_payment_terms">Payment Terms</label>
                                        <select class="form-select form-select-sm" id="v_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="v_status">Status</label>
                                        <select class="form-select form-select-sm" id="v_status" name="status">
                                            <option value="Active">Active</option>
                                            <option value="Inactive">Inactive</option>
                                        </select>
                                    </div>
                                </div>
                            </form>
                        </div>

                        <!-- Step 2: Addresses, GSTINs, Contacts -->
                        <div class="tab-pane px-sm-3 px-md-5" role="tabpanel" aria-labelledby="vendor-tab2" id="vendor-tab2">
                            <form data-wizard-form="2" id="vendorPartyForm">
                <!-- GSTINs Editor (with Registered Address inside each item) -->
                                <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="addGstinRow"><i class="fas fa-plus me-1"></i>Add GSTIN</button>
                                    </div>

                                    <div class="card-body">
                                        <!-- GST Sections Wrapper -->
                                        <div id="gstSectionsWrapper">
                                            <!-- Single GSTIN Editor (hidden by default) -->
                                            <div id="gstinEditor" 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="gst_exempt">
                                                            <label class="form-check-label" for="gst_exempt">Don't Have GSTIN</label>
                                                          </div>
                                                        </label>
                                                        <input type="text" class="form-control form-control-sm" id="ge_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="ge_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="ge_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="ge_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="ge_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="ge_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="ge_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="ge_country" placeholder="e.g., India">
                                                    </div>


                                                    <!-- Contact person fields -->
                                                    <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="ge_contact_name">
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label class="form-label">Designation</label>
                                                        <input type="text" class="form-control form-control-sm" id="ge_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="ge_contact_phone">
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label class="form-label">Email</label>
                                                        <input type="email" class="form-control form-control-sm" id="ge_contact_email">
                                                    </div>
                                                  <div class="col-md-6">
                                                        <label class="form-label">Status</label>
                                                        <select class="form-select form-select-sm" id="ge_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="ge_is_default">
                                                            <label class="form-check-label" for="ge_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="ge_is_active" checked>
                                                            <label class="form-check-label" for="ge_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="ge_cancel">Cancel</button>
                                                        <button type="button" class="btn btn-sm btn-primary" id="ge_save">Save</button>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Compact GSTINs list -->
                                            <div id="gstinsContainer"><div class="text-muted">No GSTINs added yet.</div></div>
                                        </div>
                                    </div>

                                </div>

                                <!-- Contacts removed -->
                            </form>
                        </div>

                        <!-- Step 3: Summary -->
                        <div class="tab-pane px-sm-3 px-md-5" role="tabpanel" aria-labelledby="vendor-tab3" id="vendor-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 vendor details before submitting</p>
                                    </div>
                                </div>
                            </div>
                            <div id="vendorSummary"></div>
                        </div>

                        <!-- Step 4: Done -->
                        <div class="tab-pane text-center px-sm-3 px-md-5" role="tabpanel" aria-labelledby="vendor-tab4" id="vendor-tab4">
                            <div class="py-4">
                                <div id="vendorSuccessState" 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">Vendor Saved!</h4>
                                                <p class="completion-subtitle text-muted mb-4">Your vendor has been saved successfully</p>
                                                <div class="success-actions">
                                                    <button class="btn btn-primary btn-lg professional-btn" type="button" id="closeVendorWizardBtn">
                                                        <span class="fas fa-list me-2"></span>Back to list
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="vendorErrorState" 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="vendorErrorMessage" 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="vendorRetryBtn">
                                                        <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="vendor-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="vendor-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="vendor-wizard-submit-item">
                                <button class="btn btn-success px-5 px-sm-6" type="button" id="vendor-wizard-submit-btn">
                                    <span class="fas fa-save me-2"></span>Save Vendor
                                </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>
<!-- Vendor Wizard Controller & Logic -->
<script src="{{ asset('assets/js/custom/business_partners/vendor_wizard_controller.js') }}"></script>
<script src="{{ asset('assets/js/custom/business_partners/vendor_wizard.js') }}"></script>
@endpush