@extends('layouts.app')

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

@section('content')


    <!-- Main Table Card -->
    <div class="card mb-3" id="companiesTable">
        <div class="card-header">
            <div class="row flex-between-center">
                <div class="col-4 col-sm-auto d-flex align-items-center pe-0">
                    <h5 class="fs-9 mb-0 text-nowrap py-2 py-xl-0">Company Masters</h5>
                </div>
                <div class="col-8 col-sm-auto text-end ps-2">
                    <div class="d-none" id="table-companies-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-companies-replace-element">
                        @can('masters-organization-company-masters.create')
                        <button class="btn btn-falcon-default btn-sm" type="button"  data-bs-toggle="offcanvas" data-bs-target="#addCompanyOffcanvas" aria-controls="addCompanyOffcanvas">
                            <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
                         <!-- @can('masters-organization-company-masters.import')
                        <button class="btn btn-falcon-default btn-sm" type="button" data-bs-toggle="modal" data-bs-target="#importCompanyModal">
                            <span class="fas fa-upload" data-fa-transform="shrink-3 down-2"></span>
                            <span class="d-none d-sm-inline-block ms-1">Import</span>
                        </button>
                        @endcan-->
                        <button class="btn btn-falcon-default btn-sm mx-2" type="button" data-bs-toggle="collapse" data-bs-target="#companyFilters">
                            <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-organization-company-masters.export')
                        <button class="btn btn-falcon-default btn-sm" type="button" id="exportCompanies">
                            <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" id="companyFilters">
            <div class="card-body border-top fs-10">
                 <div class="row g-2 align-items-end">
                    <div class="col-md-2 col-lg-1">
                        <select class="form-select form-select-sm" id="statusFilter">
                            <option value="">All Status</option>
                            <option value="Active">Active</option>
                            <option value="Inactive">Inactive</option>
                        </select>
                    </div>
                    <div class="col-md-4 col-lg-3">
                        <select class="form-select form-select-sm" id="stateFilter">
                            <option value="">All States</option>
                            <!-- States will be loaded dynamically -->
                        </select>
                    </div>
                     <div class="col-md-3 col-lg-2">
                        <input class="form-control form-control-sm datetimepicker" id="createdDateFilter" type="text" placeholder="Created Date" data-options='{}' />
                    </div>
                    <div class="col-md-3 col-lg-2 d-flex align-items-center">
                        <button class="btn btn-primary btn-sm me-2" type="button" id="applyFilters"><i class="fas fa-search"></i> Apply</button>
                        <button class="btn btn-outline-secondary btn-sm" type="button" id="clearFilters"> <i class="fas fa-times"></i> Clear</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Results Count & Active Filters Summary -->
        <div class="card-body border-top py-2 d-flex justify-content-between align-items-center flex-wrap gap-2" id="filterSummaryBar">
            <div id="resultsCount" class="text-muted small d-none">Showing <span id="resultsCountNumber">0</span> result(s)</div>
            <div id="activeFilterChips" class="d-flex flex-wrap gap-2"></div>
        </div>

        <div class="card-body p-0">
            <div class="table-responsive scrollbar">
                <div class="table-body-wrapper js-vh-table" style="overflow:auto;">
                <table class="table table-sm table-striped fs-10 mb-0 overflow-hidden">
                    <thead class="bg-200">
                        <tr>
                            <th>
                                <div class="form-check fs-9 mb-0 d-flex align-items-center">
                                    <input class="form-check-input" id="checkbox-bulk-companies-select" type="checkbox"/>
                                </div>
                            </th>
                            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="company_code">Company Code</th>
                            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="company_name">Company Name</th>
                            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="short_name">Short Name</th>
                            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="city">City</th>
                            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="state">State</th>
                            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="phone">Phone</th>
                            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="status">Status</th>
                            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="created_at">Created</th>
                            <th class="align-middle no-sort"></th>
                        </tr>
                    </thead>
                    <tbody id="table-companies-body">
                    <!-- Hidden template row to satisfy List.js initialization -->
                    <tr class="d-none list-template">
                        <td></td>
                        <td class="company_code"></td>
                        <td class="company_name"></td>
                        <td class="short_name"></td>
                        <td class="city"></td>
                        <td class="state"></td>
                        <td class="phone"></td>
                        <td class="status"></td>
                        <td class="created_at"></td>
                        <td></td>
                    </tr>

                    </tbody>
                </table>
                <div id="companiesEmptyOverlay" class="table-empty-overlay d-none" style="z-index:2;">
                    <div class="overlay-loading text-center w-100">
                        <i class="fas fa-spinner fa-spin fa-2x text-primary"></i>
                        <div class="text-muted small mt-2">Loading companies...</div>
                    </div>
                    <div class="overlay-empty text-center w-100 d-none">
                        <i class="fas fa-inbox fa-2x mb-2 text-muted"></i>
                        <div class="fs-7">No companies found</div>
                        <small class="text-muted">Try adjusting your filters</small>
                    </div>
                </div>
                </div>
            </div>
        </div>


    </div>
    <!-- Company Details Offcanvas (Read-only) -->
    <div class="offcanvas offcanvas-end" tabindex="-1" id="companyDetailsOffcanvas" aria-labelledby="companyDetailsLabel">
        <div class="offcanvas-header bg-light">
            <h5 class="offcanvas-title" id="companyDetailsLabel"><i class="fas fa-eye me-2"></i>Company Details</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <div id="companyDetailsContent">
                <div class="text-center my-5" id="companyDetailsLoading">
                    <div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div>
                </div>
                <div id="companyDetailsInner" class="d-none">
                    <div class="card mb-3">
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <div class="avatar avatar-3xl me-3"><div class="avatar-name rounded-circle bg-soft-primary text-primary"><span id="detailAvatar">CM</span></div></div>
                                <div>
                                    <h5 class="mb-1" id="detailCompanyName">-</h5>
                                    <div class="text-muted"><span class="me-2">Code:</span><span id="detailCompanyCode" class="badge bg-soft-secondary text-secondary">-</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="card h-100">
                                <div class="card-header py-2"><h6 class="mb-0">General</h6></div>
                                <div class="card-body py-2">
                                    <table class="table table-sm table-borderless mb-0">
                                        <tbody>
                                            <tr>
                                                <td class="text-muted pe-3" style="width: 40%">PAN</td>
                                                <td class="font-monospace" id="detailPAN">-</td>
                                            </tr>
                                            <tr>
                                                <td class="text-muted pe-3">CIN</td>
                                                <td class="font-monospace" id="detailCIN">-</td>
                                            </tr>
                                            <tr>
                                                <td class="text-muted pe-3">TAN</td>
                                                <td class="font-monospace" id="detailTAN">-</td>
                                            </tr>
                                            <tr>
                                                <td class="text-muted pe-3">Base Currency</td>
                                                <td id="detailCurrency">-</td>
                                            </tr>
                                            <tr>
                                                <td class="text-muted pe-3">FY Start</td>
                                                <td id="detailFYStart">-</td>
                                            </tr>
                                            <tr>
                                                <td class="text-muted pe-3">Status</td>
                                                <td id="detailStatus">-</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card h-100">
                                <div class="card-header py-2"><h6 class="mb-0">Contacts</h6></div>
                                <div class="card-body py-2">
                                    <table class="table table-sm table-borderless mb-0">
                                        <tbody>
                                            <tr>
                                                <td class="text-muted pe-3" style="width: 40%">Phone</td>
                                                <td id="detailPhone">-</td>
                                            </tr>
                                            <tr>
                                                <td class="text-muted pe-3">Email</td>
                                                <td id="detailEmail">-</td>
                                            </tr>
                                            <tr>
                                                <td class="text-muted pe-3">Website</td>
                                                <td><a href="#" target="_blank" id="detailWebsite">-</a></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card mt-3">
                        <div class="card-header py-2 d-flex align-items-center justify-content-between">
                            <h6 class="mb-0">GST Registrations</h6>
                            <span class="badge badge-subtle-primary" id="detailGstCount">0</span>
                        </div>
                        <div class="card-body" id="detailGstList">
                            <div class="text-muted">No GST registrations</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Add Company Offcanvas -->
    <div class="offcanvas offcanvas-end" id="addCompanyOffcanvas" tabindex="-1" aria-labelledby="addCompanyOffcanvasLabel" data-bs-scroll="true" data-bs-backdrop="true">
        <div class="offcanvas-header bg-light">
            <h5 class="offcanvas-title" id="addCompanyOffcanvasLabel">
                <i class="fas fa-building me-2"></i>Add New Company
            </h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body p-0">
            <!-- Falcon Theme Wizard -->
             <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="#company-tab1" data-bs-toggle="tab" data-wizard-step="1"><span class="nav-item-circle-parent"><span class="nav-item-circle"><span class="fas fa-building"></span></span></span><span class="d-none d-md-block mt-1 fs-10">Company</span></a></li>
                    <li class="nav-item"><a class="nav-link fw-semi-bold" href="#company-tab2" data-bs-toggle="tab" data-wizard-step="2"><span class="nav-item-circle-parent"><span class="nav-item-circle"><span class="fas fa-file-invoice"></span></span></span><span class="d-none d-md-block mt-1 fs-10">GST</span></a></li>
                    <li class="nav-item"><a class="nav-link fw-semi-bold" href="#company-tab3" data-bs-toggle="tab" data-wizard-step="3"><span class="nav-item-circle-parent"><span class="nav-item-circle"><span class="fas fa-file-alt"></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="#company-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">
                    <div class="tab-pane active px-sm-3 px-md-5" role="tabpanel" aria-labelledby="company-tab1" id="company-tab1">
                       <form novalidate="novalidate" data-wizard-form="1">
                                @csrf

                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label class="form-label" for="company_code">Company Code <span class="text-danger">*</span></label>
<input class="form-control" type="text" name="company_code" placeholder="e.g., COMP001" required="required" id="company_code" value="COMP001" />
                                        <div class="invalid-feedback">Please enter company code</div>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label" for="company_name">Company Name <span class="text-danger">*</span></label>
<input class="form-control" type="text" name="company_name" placeholder="e.g., Tech Solutions Pvt Ltd" required="required" id="company_name" value="SOD Manufacturing Ltd" />
                                        <div class="invalid-feedback">Please enter company name</div>
                                    </div>
                                </div>
                                <div class="row g-3">
                                    <div class="col-md-4">
                                        <label class="form-label" for="pan">PAN Number <span class="text-danger">*</span></label>
<input class="form-control" type="text" name="pan" placeholder="e.g., ABCDE1234F" required="required" id="pan" maxlength="10" style="text-transform: uppercase;" value="ABCDE1234F" />
                                        <div class="invalid-feedback">Please enter valid PAN (format: ABCDE1234F)</div>
                                        <div class="form-text">10-digit PAN number</div>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label" for="cin">CIN Number <span class="text-danger">*</span></label>
<input class="form-control" type="text" name="cin" placeholder="e.g., U74999DL2019PTC123456" required="required" id="cin" maxlength="21" style="text-transform: uppercase;" value="U74999DL2019PTC123456" />
                                        <div class="invalid-feedback">Please enter valid CIN (21 characters)</div>
                                        <div class="form-text">Corporate Identity Number</div>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label" for="tan">TAN Number <span class="text-danger">*</span></label>
<input class="form-control" type="text" name="tan" placeholder="e.g., ABCD12345E" required="required" id="tan" maxlength="10" style="text-transform: uppercase;" value="ABCD12345E" />
                                        <div class="invalid-feedback">Please enter valid TAN (format: ABCD12345E)</div>
                                        <div class="form-text">Tax Deduction Account Number</div>
                                    </div>
                                </div>
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label class="form-label" for="phone">Phone Number <span class="text-danger">*</span></label>
<input class="form-control" type="tel" name="phone" placeholder="e.g., +91 9876543210" required="required" id="phone" value="9876543210" />
                                        <div class="invalid-feedback">Please enter valid phone number (10-15 digits)</div>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label" for="email">Email Address <span class="text-danger">*</span></label>
<input class="form-control" type="email" name="email" placeholder="e.g., info@company.com" required="required" id="email" value="info@sodmfg.com" />
                                        <div class="invalid-feedback">Please enter valid email address</div>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="website">Website URL</label>
<input class="form-control" type="url" name="website" placeholder="e.g., https://www.company.com" id="website" value="https://www.sodmfg.com" />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="logo_url">Logo URL</label>
<input class="form-control" type="url" name="logo_url" placeholder="e.g., https://company.com/logo.png" id="logo_url" value="https://www.sodmfg.com/logo.png" />
                                    <div class="form-text">URL to company logo image</div>
                                </div>
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label class="form-label" for="financial_year_start">Financial Year Start <span class="text-danger">*</span></label>
<select class="form-select" name="financial_year_start" required="required" id="financial_year_start">
                                            <option value="">Select Month</option>
                                            <option value="01">January</option>
                                            <option value="02">February</option>
                                            <option value="03">March</option>
<option value="04" selected>April</option>
                                            <option value="05">May</option>
                                            <option value="06">June</option>
                                            <option value="07">July</option>
                                            <option value="08">August</option>
                                            <option value="09">September</option>
                                            <option value="10">October</option>
                                            <option value="11">November</option>
                                            <option value="12">December</option>
                                        </select>
                                        <div class="invalid-feedback">Please select financial year start month</div>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label" for="base_currency">Base Currency <span class="text-danger">*</span></label>
<select class="form-select" name="base_currency" required="required" id="base_currency">
                                            <option value="">Select Currency</option>
<option value="INR" selected>Indian Rupee (INR)</option>
                                            <option value="USD">US Dollar (USD)</option>
                                            <option value="EUR">Euro (EUR)</option>
                                            <option value="GBP">British Pound (GBP)</option>
                                            <option value="AED">UAE Dirham (AED)</option>
                                            <option value="SGD">Singapore Dollar (SGD)</option>
                                        </select>
                                        <div class="invalid-feedback">Please select base currency</div>
                                    </div>
                                </div>
                                <div class="form-check mt-3">
                                    <input class="form-check-input" type="checkbox" name="is_main_company" value="1" id="is_main_company" />
                                    <label class="form-check-label" for="is_main_company">
                                        Mark as main company
                                    </label>
                                    <div class="form-text">Check this if this is your primary/main company</div>
                                </div>

                                <!-- Director Information -->
                                <div class="row mt-4">
                                    <div class="col-12">
                                        <h6 class="text-primary mb-3">
                                            <i class="fas fa-user-tie me-2"></i>Director Information
                                        </h6>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label" for="director_1">Director 1 <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" name="director_1" id="director_1"
                                               maxlength="100" placeholder="Enter first director name" required>
                                        <div class="invalid-feedback">Please enter first director name</div>
                                        <div class="form-text">Required - Name of first director</div>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label" for="director_2">Director 2 <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" name="director_2" id="director_2"
                                               maxlength="100" placeholder="Enter second director name" required>
                                        <div class="invalid-feedback">Please enter second director name</div>
                                        <div class="form-text">Required - Name of second director</div>
                                    </div>
                                </div>
                            </form>
                    </div>
                    <div class="tab-pane px-sm-3 px-md-5" role="tabpanel" aria-labelledby="company-tab2" id="company-tab2">
                     <form data-wizard-form="2">

                                <div id="gstRegistrations">
                                    <!-- GST Registration Template -->
                                    <div class="gst-registration card mb-3">

                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <label class="form-label" for="gstin_number_1">GSTIN Number <span class="text-danger">*</span></label>
                                                    <input type="text" class="form-control gstin-number" name="gstin_numbers[]" placeholder="e.g., 22AAAAA0000A1Z5" required id="gstin_number_1">
                                                    <div class="invalid-feedback">Please enter GSTIN number</div>
                                                </div>
                                                <div class="col-md-6">
                                                    <label class="form-label" for="business_type_1">Business Type <span class="text-danger">*</span></label>
                                                    <select class="form-select business-type" name="business_types[]" required id="business_type_1">
                                                        <option value="">Select Business Type</option>
                                                        <option value="Regular">Regular</option>
                                                        <option value="Composition">Composition</option>
                                                        <option value="Casual">Casual</option>
                                                        <option value="SEZ">SEZ</option>
                                                        <option value="Input Service Distributor">Input Service Distributor</option>
                                                        <option value="UN Body">UN Body</option>
                                                        <option value="Embassy">Embassy</option>
                                                        <option value="Others">Others</option>
                                                    </select>
                                                    <div class="invalid-feedback">Please select business type</div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <label class="form-label" for="registration_date_1">Registration Date</label>
                                                    <input type="date" class="form-control registration-date" name="registration_dates[]" id="registration_date_1">
                                                </div>
                                                <div class="col-md-6">
                                                    <label class="form-label" for="address_line1_1">Address Line 1 <span class="text-danger">*</span></label>
                                                    <input type="text" class="form-control address-line1" name="address_line1[]" placeholder="Building/Plot No., Street" required id="address_line1_1">
                                                    <div class="invalid-feedback">Please enter address line 1</div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <label class="form-label" for="address_line2_1">Address Line 2</label>
                                                    <input type="text" class="form-control address-line2" name="address_line2[]" placeholder="Area, Landmark" id="address_line2_1">
                                                </div>
                                                <div class="col-md-6">
                                                    <label class="form-label" for="city_1">City <span class="text-danger">*</span></label>
                                                    <input type="text" class="form-control city" name="cities[]" placeholder="City" required id="city_1">
                                                    <div class="invalid-feedback">Please enter city</div>
                                                </div>

                                            </div>
                                            <div class="row">
                                                  <div class="col-md-6">
                                                    <label class="form-label" for="state_1">State <span class="text-danger">*</span></label>
                                                    <select class="form-select state" name="states[]" required id="state_1">
                                                        <option value="">Select State</option>
                                                        <option value="Andhra Pradesh">Andhra Pradesh</option>
                                                        <option value="Arunachal Pradesh">Arunachal Pradesh</option>
                                                        <option value="Assam">Assam</option>
                                                        <option value="Bihar">Bihar</option>
                                                        <option value="Chhattisgarh">Chhattisgarh</option>
                                                        <option value="Goa">Goa</option>
                                                        <option value="Gujarat">Gujarat</option>
                                                        <option value="Haryana">Haryana</option>
                                                        <option value="Himachal Pradesh">Himachal Pradesh</option>
                                                        <option value="Jharkhand">Jharkhand</option>
                                                        <option value="Karnataka">Karnataka</option>
                                                        <option value="Kerala">Kerala</option>
                                                        <option value="Madhya Pradesh">Madhya Pradesh</option>
                                                        <option value="Maharashtra">Maharashtra</option>
                                                        <option value="Manipur">Manipur</option>
                                                        <option value="Meghalaya">Meghalaya</option>
                                                        <option value="Mizoram">Mizoram</option>
                                                        <option value="Nagaland">Nagaland</option>
                                                        <option value="Odisha">Odisha</option>
                                                        <option value="Punjab">Punjab</option>
                                                        <option value="Rajasthan">Rajasthan</option>
                                                        <option value="Sikkim">Sikkim</option>
                                                        <option value="Tamil Nadu">Tamil Nadu</option>
                                                        <option value="Telangana">Telangana</option>
                                                        <option value="Tripura">Tripura</option>
                                                        <option value="Uttar Pradesh">Uttar Pradesh</option>
                                                        <option value="Uttarakhand">Uttarakhand</option>
                                                        <option value="West Bengal">West Bengal</option>
                                                        <option value="Andaman and Nicobar Islands">Andaman and Nicobar Islands</option>
                                                        <option value="Chandigarh">Chandigarh</option>
                                                        <option value="Dadra and Nagar Haveli and Daman and Diu">Dadra and Nagar Haveli and Daman and Diu</option>
                                                        <option value="Delhi">Delhi</option>
                                                        <option value="Jammu and Kashmir">Jammu and Kashmir</option>
                                                        <option value="Ladakh">Ladakh</option>
                                                        <option value="Lakshadweep">Lakshadweep</option>
                                                        <option value="Puducherry">Puducherry</option>
                                                    </select>
                                                    <div class="invalid-feedback">Please select state</div>
                                                </div>
                                                <div class="col-md-6">
                                                    <label class="form-label" for="pincode_1">Pincode <span class="text-danger">*</span></label>
                                                    <input type="text" class="form-control pincode" name="pincodes[]" placeholder="000000" pattern="[0-9]{6}" maxlength="6" required id="pincode_1">
                                                    <div class="invalid-feedback">Please enter valid 6-digit pincode</div>
                                                </div>
                                                <div class="col-md-6">
                                                    <label class="form-label" for="filing_frequency_1">Filing Frequency <span class="text-danger">*</span></label>
                                                    <select class="form-select filing-frequency" name="filing_frequencies[]" required id="filing_frequency_1">
                                                        <option value="">Select Filing Frequency</option>
                                                        <option value="MONTHLY" selected>Monthly</option>
                                                        <option value="QUARTERLY">Quarterly</option>
                                                    </select>
                                                    <div class="invalid-feedback">Please select filing frequency</div>
                                                </div>

                                                <div class="col-md-6 mt-3">
                                                    <div class="form-check">
                                                        <input class="form-check-input is-primary-gstin" type="checkbox" name="is_primary_gstin[]" value="1" id="is_primary_gstin_1">
                                                        <label class="form-check-label" for="is_primary_gstin_1">
                                                            Mark as primary GSTIN
                                                        </label>
                                                        <div class="form-text">Check this if this is your primary GST registration</div>
                                                    </div>
                                                </div>
                                            </div>



                                            <!-- Add GST Registration Button inside form -->
                                            <div class=" mt-3 d-flex justify-content-between">
                                                <div class="">
                                                    <button type="button" class="btn btn-outline-secondary ms-2" onclick="clearGSTForm()">
                                                        <i class="fas fa-eraser me-2"></i>Clear Form
                                                    </button>
                                                     <button type="button" class="btn btn-outline-danger ms-2" onclick="hideGSTFormFields()">
                                                        <i class="fas fa-times me-2"></i>Close
                                                    </button>
                                                </div>
                                                <div class="">
                                                      <button type="button" class="btn btn-success" id="gstFormSubmitBtn" onclick="addGSTRegistration()">
                                                        <i class="fas fa-check me-2"></i>Add This GST Registration
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="text-center">
                                    <button type="button" class="btn btn-outline-primary" onclick="showGSTFormToAdd()">
                                        <i class="fas fa-plus me-2"></i>Add GST Registration
                                    </button>
                                </div>

                                <!-- GST Registrations List -->
                                <div id="gstRegistrationsList" class="mt-4" style="display: none;">
                                    <h6 class="mb-2"><i class="fas fa-list me-2"></i>Added GST Registrations</h6>
                                    <div id="gstListContainer" class="border rounded p-3 bg-light">
                                        <!-- GST list items will be added here -->
                                    </div>
                                    <div class="text-muted small mt-2" id="primaryGstHint">
                                        <i class="fas fa-info-circle me-1"></i>Please select one Primary GSTIN before continuing.
                                    </div>
                                </div>

                                <div class="alert alert-info mt-3">
                                    <i class="fas fa-info-circle me-2"></i>
                                    <strong>Note:</strong> You can add multiple GST registrations for different states where your company operates.
                                </div>
                            </form>
                    </div>
                    <div class="tab-pane px-sm-3 px-md-5" role="tabpanel" aria-labelledby="company-tab3" id="company-tab3">
                        <div class="mb-4">
                            <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">Please verify all information before submitting your company registration</p>
                                </div>
                            </div>
                        </div>

                        <!-- Company Summary -->
                        <div class="card mb-3 border-0 shadow-sm">
                            <div class="card-header bg-light border-bottom-0 py-3">
                                <div class="d-flex align-items-center">
                                    <span class="fas fa-building text-primary me-2"></span>
                                    <h6 class="mb-0 text-900">Company Information</h6>
                                </div>
                            </div>
                            <div class="card-body py-3">
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <div class="d-flex flex-column">
                                            <small class="text-muted text-uppercase fw-semi-bold mb-1">Company Name</small>
                                            <span class="fs-9 text-900" id="summaryCompanyName">-</span>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="d-flex flex-column">
                                            <small class="text-muted text-uppercase fw-semi-bold mb-1">Company Code</small>
                                            <span class="fs-9 text-900" id="summaryCompanyCode">-</span>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="d-flex flex-column">
                                            <small class="text-muted text-uppercase fw-semi-bold mb-1">PAN Number</small>
                                            <span class="fs-9 text-900 font-monospace" id="summaryPAN">-</span>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="d-flex flex-column">
                                            <small class="text-muted text-uppercase fw-semi-bold mb-1">Base Currency</small>
                                            <span class="fs-9 text-900" id="summaryBaseCurrency">-</span>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="d-flex flex-column">
                                            <small class="text-muted text-uppercase fw-semi-bold mb-1">Email Address</small>
                                            <span class="fs-9 text-900" id="summaryEmail">-</span>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="d-flex flex-column">
                                            <small class="text-muted text-uppercase fw-semi-bold mb-1">Phone Number</small>
                                            <span class="fs-9 text-900" id="summaryPhone">-</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- GST Summary -->
                        <div class="card mb-4 border-0 shadow-sm">
                            <div class="card-header bg-light border-bottom-0 py-3">
                                <div class="d-flex align-items-center justify-content-between">
                                    <div class="d-flex align-items-center">
                                        <span class="fas fa-file-invoice text-primary me-2"></span>
                                        <h6 class="mb-0 text-900">GST Registrations</h6>
                                    </div>
                                    <span class="badge badge-subtle-primary" id="gstCountBadge">0</span>
                                </div>
                            </div>
                            <div class="card-body py-3" id="gstSummary">
                                <div class="text-center py-4">
                                    <span class="fas fa-inbox text-muted fs-3 mb-2 d-block"></span>
                                    <p class="text-muted fs-9 mb-0">No GST registrations added</p>
                                </div>
                            </div>
                        </div>



                        <div class="alert alert-warning border-0 shadow-sm">
                            <div class="d-flex align-items-start">
                                <span class="fas fa-exclamation-triangle text-warning me-3 mt-1"></span>
                                <div>
                                    <h6 class="mb-1 text-900">Important Notice</h6>
                                    <p class="mb-0 fs-9">Once you submit this form, the company will be created with all the provided information. Please ensure all details are accurate before proceeding.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane text-center px-sm-3 px-md-5" role="tabpanel" aria-labelledby="company-tab4" id="company-tab4">
                        <div class="py-4">
                            <!-- Loading State -->
                            <div id="loadingState" class="d-none">
                                <div class="completion-card">
                                    <div class="completion-card-body">
                                        <div class="loading-animation mb-4">
                                            <div class="loading-circle">
                                                <div class="loading-inner">
                                                    <span class="fas fa-cog fa-spin text-primary fs-2"></span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="completion-content">
                                            <h4 class="completion-title text-900 mb-2">Creating Your Company</h4>
                                            <p class="completion-subtitle text-muted mb-4">Please wait while we set up your company profile and GST registrations...</p>

                                            <div class="progress-container">
                                                <div class="progress professional-progress mb-2">
                                                    <div class="progress-bar progress-bar-striped progress-bar-animated bg-gradient-primary"
                                                         role="progressbar" style="width: 100%"></div>
                                                </div>
                                                <small class="text-muted">Processing your request...</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Success State -->
                            <div id="successState" 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">Company Created Successfully!</h4>
                                            <p class="completion-subtitle text-muted mb-4">Your company has been registered and is ready to use</p>

                                            <div class="success-details-card">
                                                <div class="success-details-header">
                                                    <span class="fas fa-building text-primary me-2"></span>
                                                    <span class="fw-semi-bold text-900">Company Details</span>
                                                </div>
                                                <div class="success-details-grid">
                                                    <div class="detail-item">
                                                        <div class="detail-label">Company Name</div>
                                                        <div class="detail-value" id="createdCompanyName">-</div>
                                                    </div>
                                                    <div class="detail-item">
                                                        <div class="detail-label">Company Code</div>
                                                        <div class="detail-value code-value" id="createdCompanyCode">-</div>
                                                    </div>
                                                    <div class="detail-item">
                                                        <div class="detail-label">Created On</div>
                                                        <div class="detail-value" id="createdAt">-</div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="success-actions">
                                                <button class="btn btn-primary btn-lg professional-btn" type="button" onclick="closeOffcanvasAndReload()">
                                                    <span class="fas fa-list me-2"></span>View Companies List
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Error State -->
                            <div id="errorState" 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 Create Company</h4>
                                            <p class="completion-subtitle text-muted mb-4">We encountered some issues that need to be resolved</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">Issues Found</span>
                                                </div>
                                                <div class="error-message-container">
                                                    <div id="errorMessage" class="error-message-content">An unknown error occurred.</div>
                                                </div>
                                            </div>

                                            <div class="error-actions">
                                                <button class="btn btn-outline-secondary btn-lg professional-btn me-3" type="button" onclick="retrySubmission()">
                                                    <span class="fas fa-arrow-left me-2"></span>Go Back & Fix
                                                </button>
                                                <button class="btn btn-danger btn-lg professional-btn" type="button" onclick="retrySubmission()">
                                                    <span class="fas fa-redo me-2"></span>Try Again
                                                </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="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="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="wizard-submit-item">
                        <button class="btn btn-success px-5 px-sm-6" type="button" id="wizard-submit-btn">
                            <span class="fas fa-save me-2"></span>Create Company
                        </button>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
        </div>
    </div>

    <!-- Import Company Modal -->
    <div class="modal fade" id="importCompanyModal" tabindex="-1" aria-labelledby="importCompanyModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-light">
                    <h5 class="modal-title" id="importCompanyModalLabel">
                        <i class="fas fa-upload me-2 text-primary"></i>Import Company Masters
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- Import Instructions -->
                    <div class="alert alert-info border-0 mb-3">
                        <div class="d-flex align-items-start">
                            <i class="fas fa-info-circle me-2 mt-1"></i>
                            <div>
                                <h6 class="mb-1">Import Guidelines</h6>
                                <ul class="mb-0 ps-3 small">
                                    <li>Download the template file below</li>
                                    <li>Fill in company details following the format</li>
                                    <li>Each company can have multiple GSTIN entries</li>
                                    <li>Supported formats: <strong>.xlsx, .csv</strong></li>
                                    <li>Maximum file size: <strong>5MB</strong></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!-- Download Template -->
                    <div class="mb-3">
                        <label class="form-label fw-semi-bold">Step 1: Download Template</label>
                        <div class="d-grid">
                            <a href="{{ route('organization.company-masters.import-template') }}" class="btn btn-outline-primary" id="downloadTemplateBtn">
                                <i class="fas fa-download me-2"></i>Download Excel Template
                            </a>
                        </div>
                    </div>

                    <!-- File Upload -->
                    <div class="mb-3">
                        <label class="form-label fw-semi-bold">Step 2: Upload Filled Template</label>
                        <div class="dropzone-container border rounded p-4 text-center" id="importDropzone">
                            <input type="file" id="importFileInput" accept=".xlsx,.csv" class="d-none">
                            <div class="dropzone-placeholder" id="dropzonePlaceholder">
                                <i class="fas fa-cloud-upload-alt text-muted fs-1 mb-2 d-block"></i>
                                <p class="text-muted mb-2">Drag & drop your file here or</p>
                                <button type="button" class="btn btn-sm btn-outline-secondary" onclick="$('#importFileInput').click()">
                                    <i class="fas fa-folder-open me-1"></i>Browse Files
                                </button>
                                <p class="text-muted small mb-0 mt-2">Supported: .xlsx, .csv (Max 5MB)</p>
                            </div>
                            <div class="dropzone-preview d-none" id="dropzonePreview">
                                <div class="d-flex align-items-center justify-content-between bg-light p-3 rounded">
                                    <div class="d-flex align-items-center">
                                        <i class="fas fa-file-excel text-success fs-2 me-3"></i>
                                        <div>
                                            <div class="fw-semi-bold" id="fileNameDisplay">filename.xlsx</div>
                                            <small class="text-muted" id="fileSizeDisplay">0 KB</small>
                                        </div>
                                    </div>
                                    <button type="button" class="btn btn-sm btn-link text-danger" onclick="clearImportFile()">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="invalid-feedback" id="importFileError"></div>
                    </div>

                    <!-- Import Options -->
                    <div class="mb-3">
                        <label class="form-label fw-semi-bold">Import Options</label>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="skipDuplicates" checked>
                            <label class="form-check-label" for="skipDuplicates">
                                Skip duplicate company codes (existing records won't be updated)
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="validateOnly">
                            <label class="form-check-label" for="validateOnly">
                                Validate only (don't save to database)
                            </label>
                        </div>
                    </div>

                    <!-- Import Progress (hidden by default) -->
                    <div class="d-none" id="importProgress">
                        <div class="mb-2">
                            <div class="d-flex justify-content-between align-items-center mb-1">
                                <span class="small fw-semi-bold">Importing...</span>
                                <span class="small text-muted" id="importProgressText">0%</span>
                            </div>
                            <div class="progress" style="height: 8px;">
                                <div class="progress-bar progress-bar-striped progress-bar-animated"
                                     role="progressbar" id="importProgressBar" style="width: 0%"></div>
                            </div>
                        </div>
                    </div>

                    <!-- Import Results (hidden by default) -->
                    <div class="d-none" id="importResults">
                        <div class="alert border-0 mb-0" id="importResultsContent">
                            <!-- Results will be populated here -->
                        </div>
                    </div>
                </div>
                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i>Cancel
                    </button>
                    <button type="button" class="btn btn-primary" id="startImportBtn" disabled>
                        <i class="fas fa-upload me-1"></i>Start Import
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <link href="{{ asset('vendors/flatpickr/flatpickr.min.css') }}" rel="stylesheet">
    <style>
        /* Single Centered Container Loader Standard */
        .table-body-wrapper {
            position: relative;
        }

        .table-empty-overlay {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
            color: #6c757d;
            background-color: rgba(255, 255, 255, 0.95);
        }

           /* Custom Offcanvas Styles for Company Form */
        #companyDetailsOffcanvas {
            /* Prefer Bootstrap variable if respected */
            --bs-offcanvas-width: clamp(700px, 72vw, 1080px);
            /* Hard override in case theme sets fixed width and ignores var */
            width: clamp(700px, 72vw, 1080px) !important;
            max-width: 100vw;
        }

        /* Custom Offcanvas Styles for Company Form */
        #addCompanyOffcanvas {
            /* Prefer Bootstrap variable if respected */
            --bs-offcanvas-width: clamp(900px, 72vw, 1280px);
            /* Hard override in case theme sets fixed width and ignores var */
            width: clamp(900px, 72vw, 1280px) !important;
            max-width: 100vw;
        }

            /* Truncate long import file names without breaking layout */
            #dropzonePreview .fw-semi-bold#fileNameDisplay {
                display: inline-block;
                max-width: 360px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                vertical-align: bottom;
            }

        /* Polished header */
        #addCompanyOffcanvas .offcanvas-header {
            background: linear-gradient(180deg, var(--bs-body-bg), #f8f9fb 100%) !important;
            border-bottom: 1px solid var(--bs-border-color);
        }

        .offcanvas-footer {
            background-color: var(--bs-gray-100);
            border-top: 1px solid var(--bs-border-color);
            margin-top: auto;
        }

        .offcanvas-body {
            padding: 1.5rem;
        }

        .offcanvas-header {
            padding: 1rem 1.5rem;
            border-bottom: 1px solid var(--bs-border-color);
        }

        /* Make form fields more compact for the narrow offcanvas */
        #addCompanyOffcanvas .form-control,
        #addCompanyOffcanvas .form-select {
            font-size: 0.875rem;
        }

        #addCompanyOffcanvas .form-label {
            font-size: 0.8125rem;
            font-weight: 600;
            margin-bottom: 0.375rem;
        }

        #addCompanyOffcanvas h6 {
            font-size: 0.9375rem;
            color: var(--bs-gray-700);
            border-bottom: 1px solid var(--bs-border-color);
            padding-bottom: 0.5rem;
        }

        /* Responsive adjustments */
    @media (max-width: 768px) {
        #addCompanyOffcanvas {
            --bs-offcanvas-width: 100vw;
            width: 100vw !important;
        }
    }
    @media (min-width: 1400px) {
        #addCompanyOffcanvas {
            --bs-offcanvas-width: 1200px;
            width: 1200px !important;
        }
    }

        /* Make wizard layout flexible with scrollable content */
        #addCompanyOffcanvas .theme-wizard {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        #addCompanyOffcanvas .card-header {
            flex-shrink: 0;
        }

        #addCompanyOffcanvas .card-body {
            flex: 1;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        #addCompanyOffcanvas .tab-content {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            max-height: calc(100vh - 250px); /* Adjust based on header and footer height */
        }

        #addCompanyOffcanvas .card-footer {
            flex-shrink: 0;
        }

        /* Smooth scrolling for tab content */
        #addCompanyOffcanvas .tab-content {
            scroll-behavior: smooth;
        }

        /* Custom scrollbar for better appearance */
        #addCompanyOffcanvas .tab-content::-webkit-scrollbar {
            width: 6px;
        }

        #addCompanyOffcanvas .tab-content::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 3px;
        }

        #addCompanyOffcanvas .tab-content::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 3px;
        }

        #addCompanyOffcanvas .tab-content::-webkit-scrollbar-thumb:hover {
            background: #a1a1a1;
        }

        /* GST Registration List Styles */
        .gst-list-item {
            transition: all 0.3s ease;
            border-left: 4px solid var(--bs-primary);
        }

        .gst-list-item:hover {
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            transform: translateY(-2px);
        }

        .gst-list-item .badge {
            min-width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
        }

        .gst-list-item .text-sm {
            font-size: 0.875rem;
        }

        .gst-list-item .btn-group .btn {
            padding: 0.25rem 0.5rem;
            font-size: 0.75rem;
        }

        #gstRegistrationsList {
            animation: slideDown 0.3s ease-out;
        }

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

        /* Empty state for GST list */
        .gst-list-empty {
            text-align: center;
            padding: 2rem;
            color: var(--bs-gray-600);
        }

        /* Primary GST indicator */
        .gst-list-item .badge.bg-success {
            font-size: 0.6875rem;
        }

        /* Responsive adjustments for GST list */
        @media (max-width: 768px) {
            .gst-list-item .col-md-8,
            .gst-list-item .col-md-4 {
                flex: 0 0 100%;
                max-width: 100%;
            }

            .gst-list-item .col-md-4 {
                margin-top: 1rem;
                text-align: left !important;
            }
        }

        /* WIZARD OVERRIDE STYLES - Keep theme UI but disable interactions */
        .custom-wizard-override .nav-link {
            pointer-events: none !important;
            cursor: default !important;
        }

        /* Allow active nav-link to look normal */
        .custom-wizard-override .nav-link.active {
            pointer-events: none !important;
        }

        /* Ensure tab content works properly with theme styles */
        .theme-wizard.custom-wizard-override .tab-pane {
            display: none;
        }

        .theme-wizard.custom-wizard-override .tab-pane.active {
            display: block !important;
        }

        /* Fix Next button alignment - ensure it stays on right when Previous is hidden */
        .pager.wizard .previous.d-none + .next {
            margin-left: auto !important;
        }

        /* Professional Summary & Status Styles */
        .summary-card {
            border: 1px solid var(--bs-border-color);
            border-radius: 0.75rem;
            transition: all 0.2s ease;
        }

        .summary-card:hover {
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08);
            border-color: var(--bs-primary);
        }

        .status-icon-wrapper {
            width: 4rem;
            height: 4rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            position: relative;
        }

        .status-icon-wrapper::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background: currentColor;
            opacity: 0.1;
        }

        .professional-badge {
            font-size: 0.6875rem;
            font-weight: 600;
            letter-spacing: 0.025em;
            padding: 0.375rem 0.75rem;
            border-radius: 0.5rem;
        }

        .info-label {
            font-size: 0.6875rem;
            font-weight: 600;
            letter-spacing: 0.05em;
            color: var(--bs-gray-500);
            margin-bottom: 0.25rem;
            text-transform: uppercase;
        }

        .info-value {
            font-size: 0.875rem;
            font-weight: 500;
            color: var(--bs-gray-900);
            line-height: 1.4;
        }

        .gst-registration-card {
            background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
            border: 1px solid var(--bs-border-color);
            border-radius: 0.75rem;
            transition: all 0.2s ease;
        }

        .gst-registration-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.08);
        }

        .step-indicator {
            background: linear-gradient(135deg, #0066cc 0%, #004499 100%);
            color: #ffffff;
            border-radius: 50%;
            width: 2rem;
            height: 2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            font-weight: 700;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            border: 2px solid #ffffff;
        }

        /* Professional Step 4 Completion UI Styles */
        .completion-card {
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
            border: 1px solid var(--bs-border-color);
            border-radius: 1rem;
            box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.08);
            overflow: hidden;
            max-width: 600px;
            margin: 0 auto;
        }

        .completion-card-body {
            padding: 3rem 2rem;
            text-align: center;
        }

        .completion-title {
            font-size: 1.5rem;
            font-weight: 700;
            letter-spacing: -0.025em;
        }

        .completion-subtitle {
            font-size: 1rem;
            line-height: 1.5;
        }

        /* Loading Animation Styles */
        .loading-animation {
            position: relative;
            display: inline-block;
        }

        .loading-circle {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            animation: loadingPulse 2s ease-in-out infinite;
        }

        .loading-inner {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        @keyframes loadingPulse {
            0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.4); }
            50% { transform: scale(1.05); box-shadow: 0 0 0 20px rgba(33, 150, 243, 0); }
        }

        .professional-progress {
            height: 8px;
            border-radius: 4px;
            background-color: var(--bs-gray-200);
            overflow: hidden;
        }

        .bg-gradient-primary {
            background: linear-gradient(90deg, #2196f3 0%, #21cbf3 100%) !important;
        }

        /* Success Animation Styles */
        .success-card {
            background: linear-gradient(135deg, #f3e5f5 0%, #ffffff 100%);
            border-color: var(--bs-success);
        }

        .success-animation {
            position: relative;
            display: inline-block;
        }

        .success-circle {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            animation: successZoom 0.6s ease-out;
            box-shadow: 0 8px 24px rgba(76, 175, 80, 0.3);
        }

        .success-inner {
            animation: successCheckmark 0.8s ease-out 0.2s both;
        }

        .success-ripple,
        .success-ripple-2 {
            position: absolute;
            border: 2px solid #4caf50;
            border-radius: 50%;
            animation: successRipple 1.5s ease-out infinite;
        }

        .success-ripple-2 {
            animation-delay: 0.5s;
        }

        @keyframes successZoom {
            0% { transform: scale(0); opacity: 0; }
            50% { transform: scale(1.1); opacity: 1; }
            100% { transform: scale(1); opacity: 1; }
        }

        @keyframes successCheckmark {
            0% { transform: scale(0) rotate(-45deg); opacity: 0; }
            100% { transform: scale(1) rotate(0deg); opacity: 1; }
        }

        @keyframes successRipple {
            0% { transform: scale(1); opacity: 0.8; }
            100% { transform: scale(2); opacity: 0; }
        }

        /* Error Animation Styles */
        .error-card {
            background: linear-gradient(135deg, #ffebee 0%, #ffffff 100%);
            border-color: var(--bs-danger);
        }

        .error-animation {
            position: relative;
            display: inline-block;
        }

        .error-circle {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            animation: errorShake 0.6s ease-out;
            box-shadow: 0 8px 24px rgba(244, 67, 54, 0.3);
        }

        .error-pulse {
            position: absolute;
            border: 2px solid #f44336;
            border-radius: 50%;
            animation: errorPulse 2s ease-in-out infinite;
        }

        @keyframes errorShake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-5px); }
            75% { transform: translateX(5px); }
        }

        @keyframes errorPulse {
            0% { transform: scale(1); opacity: 0.8; }
            100% { transform: scale(1.5); opacity: 0; }
        }

        /* Details Card Styles */
        .success-details-card,
        .error-details-card {
            background: #ffffff;
            border: 1px solid var(--bs-border-color);
            border-radius: 0.75rem;
            padding: 1.5rem;
            margin: 2rem 0;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        .success-details-header,
        .error-details-header {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid var(--bs-border-color);
        }

        .success-details-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
        }

        .detail-item {
            text-align: left;
        }

        .detail-label {
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            color: var(--bs-gray-600);
            margin-bottom: 0.25rem;
            letter-spacing: 0.05em;
        }

        .detail-value {
            font-size: 1rem;
            font-weight: 600;
            color: var(--bs-gray-900);
            line-height: 1.4;
        }

        .primary-value {
            color: var(--bs-primary);
            font-weight: 700;
        }

        .code-value {
            font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
            background: var(--bs-gray-100);
            padding: 0.25rem 0.5rem;
            border-radius: 0.25rem;
            font-size: 0.875rem;
        }

        /* Error Message Styles */
        .error-message-container {
            text-align: left;
            background: #fafafa;
            border-radius: 0.5rem;
            padding: 1rem;
            border-left: 4px solid var(--bs-danger);
        }

        .error-message-content {
            font-size: 0.9rem;
            line-height: 1.6;
            color: var(--bs-gray-800);
        }

        .error-message-content ul {
            margin: 0;
            padding-left: 1.25rem;
        }

        .error-message-content li {
            margin-bottom: 0.5rem;
            color: var(--bs-gray-700);
        }

        /* Professional Button Styles */
        .professional-btn {
            border-radius: 0.5rem;
            font-weight: 600;
            letter-spacing: 0.025em;
            padding: 0.75rem 2rem;
            transition: all 0.2s ease;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .professional-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }

        .professional-btn:active {
            transform: translateY(0);
        }

        /* Action Containers */
        .success-actions,
        .error-actions {
            margin-top: 2rem;
        }

        .progress-container {
            max-width: 300px;
            margin: 0 auto;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .completion-card-body {
                padding: 2rem 1rem;
            }

            .completion-title {
                font-size: 1.25rem;
            }

            .success-details-grid {
                grid-template-columns: 1fr;
            }

            .error-actions .professional-btn {
                width: 100%;
                margin-bottom: 0.5rem;
            }
        }

        /* Import Modal Styles */
        .dropzone-container {
            background: #fafbfc;
            border: 2px dashed #d1d5db !important;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .dropzone-container:hover {
            border-color: var(--bs-primary) !important;
            background: #f0f7ff;
        }

        .dropzone-container.dragover {
            border-color: var(--bs-primary) !important;
            background: #e6f2ff;
            transform: scale(1.02);
        }

        #importCompanyModal .modal-body {
            max-height: calc(100vh - 200px);
            overflow-y: auto;
        }

        /* Sort icon styling for table headers */
        #companiesTable .sort[data-sort] {
            cursor: pointer;
            white-space: nowrap;
            position: relative;
        }
        #companiesTable .sort[data-sort]::after {
            content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgNyA5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNi41MjU1NiAzLjVDNi45NDkzNyAzLjUgNy4xNjEyOCAzLjA2MjUgNi44NTUxOSAyLjc5MTY3TDMuODQxNCAwLjEyNUMzLjY1MzA0IC0wLjA0MTY2NjcgMy4zNDY5NiAtMC4wNDE2NjY3IDMuMTU4NTkgMC4xMjVMMC4xNDQ4MDkgMi43OTE2N0MtMC4xNjEyNzkgMy4wNjI1IDAuMDUwNjI3OSAzLjUgMC40NzQ0NDEgMy41SDYuNTI1NTZaIiBmaWxsPSIjQjZDMkQyIi8+CjxwYXRoIGQ9Ik0wLjQ3NDQ0MiA1LjVDMC4wNTA2MjgyIDUuNSAtMC4xNjEyNzkgNS45Mzc1IDAuMTQ0ODA5IDYuMjA4MzNMMy4xNTg1OSA4Ljg3NUMzLjM0Njk2IDkuMDQxNjcgMy42NTMwNCA5LjA0MTY3IDMuODQxNDEgOC44NzVMNi44NTUxOSA2LjIwODMzQzcuMTYxMjggNS45Mzc1IDYuOTQ5MzcgNS41IDYuNTI1NTYgNS41TDAuNDc0NDQyIDUuNVoiIGZpbGw9IiNCNkMyRDIiLz4KPC9zdmc+Cg==");
            margin-left: 0.25rem;
            display: inline-block;
            vertical-align: middle;
        }
        #companiesTable .sort[data-sort].asc::after {
            content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSI0IiB2aWV3Qm94PSIwIDAgNyA0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMC40NzQ0NDIgMC41MDAwMDFDMC4wNTA2MjgyIDAuNTAwMDAxIC0wLjE2MTI3OSAwLjkzNzUgMC4xNDQ4MDkgMS4yMDgzM0wzLjE1ODU5IDMuODc1QzMuMzQ2OTYgNC4wNDE2NyAzLjY1MzA0IDQuMDQxNjcgMy44NDE0MSAzLjg3NUw2Ljg1NTE5IDEuMjA4MzNDNy4xNjEyOCAwLjkzNzUwMSA2Ljk0OTM3IDAuNTAwMDAxIDYuNTI1NTYgMC41MDAwMDFMMC40NzQ0NDIgMC41MDAwMDFaIiBmaWxsPSIjQjZDMkQyIi8+Cjwvc3ZnPgo=") !important;
            margin-top: -1px !important;
        }
        #companiesTable .sort[data-sort].desc::after {
            content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSI0IiB2aWV3Qm94PSIwIDAgNyA0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNi41MjU1NiAzLjVDNi45NDkzNyAzLjUgNy4xNjEyOCAzLjA2MjUgNi44NTUxOSAyLjc5MTY3TDMuODQxNCAwLjEyNUMzLjY1MzA0IC0wLjA0MTY2NjcgMy4zNDY5NiAtMC4wNDE2NjY3IDMuMTU4NTkgMC4xMjVMMC4xNDQ4MDkgMi43OTE2N0MtMC4xNjEyNzkgMy4wNjI1IDAuMDUwNjI3OSAzLjUgMC40NzQ0NDEgMy41SDYuNTI1NTZaIiBmaWxsPSIjQjZDMkQyIi8+Cjwvc3ZnPgo=") !important;
            margin-top: -1px !important;
        }
    </style>
@endpush

@push('scripts')
<script>
    // Expose page capabilities for JS gating
    @php
        $caps = isset($caps) ? $caps : [
            'view' => auth()->user()?->can('masters-organization-company-masters.view') ?? false,
            'create' => auth()->user()?->can('masters-organization-company-masters.create') ?? false,
            'update' => auth()->user()?->can('masters-organization-company-masters.update') ?? false,
            'delete' => auth()->user()?->can('masters-organization-company-masters.delete') ?? false,
            'toggle' => auth()->user()?->can('masters-organization-company-masters.update') ?? false,
            'export' => auth()->user()?->can('masters-organization-company-masters.export') ?? false,
        ];
    @endphp
    window.pageCaps = @json($caps);
</script>

<script>
    document.addEventListener('DOMContentLoaded', function(){
        // Single Centered Container Loader Standard (Company Masters)
        const wrapper = document.querySelector('#companiesTable .table-body-wrapper');
        const tbody = document.getElementById('table-companies-body');
        const overlay = document.getElementById('companiesEmptyOverlay');
        const loadingEl = overlay?.querySelector('.overlay-loading');
        const emptyEl = overlay?.querySelector('.overlay-empty');

        const MIN_SPINNER_MS = 200;
        const DEBOUNCE_MS = 60;
        let loadingSince = 0;
        let debounceTimer = null;

        // Global Footer Pagination: responsive list height (no fixed calc hacks)
        const applyVh = () => {
            if (window.VhTableHeight && typeof window.VhTableHeight.apply === 'function') {
                window.VhTableHeight.apply({ containerSelector: '#companiesTable .js-vh-table', gapPx: 4, minHeightPx: 160 });
            }
        };
        applyVh();

        if (wrapper && overlay) {
            wrapper.dataset.state = 'loading';
            overlay.classList.remove('d-none');
            loadingEl?.classList.remove('d-none');
            emptyEl?.classList.add('d-none');
            loadingSince = Date.now();
        }

        function hasRenderableData(){
            if (!tbody) return false;
            if (tbody.querySelector('[data-row="data"]')) return true;
            return Array.from(tbody.rows).some(r => {
                if (r.classList.contains('list-template')) return false;
                if (r.classList.contains('d-none')) return false;
                if (r.id && /no\w*data/i.test(r.id)) return false;
                return Array.from(r.cells).some(td => (td.textContent || '').trim().length > 0);
            });
        }

        function syncOverlay(){
            if (!tbody || !overlay || !wrapper) return;
            const hasData = hasRenderableData();
            if (hasData) {
                const elapsed = Date.now() - loadingSince;
                const hide = () => {
                    wrapper.dataset.state = 'data';
                    overlay.classList.add('d-none');
                    loadingEl?.classList.add('d-none');
                    emptyEl?.classList.add('d-none');
                };
                if (wrapper.dataset.state === 'loading' && elapsed < MIN_SPINNER_MS) {
                    setTimeout(hide, MIN_SPINNER_MS - elapsed);
                } else {
                    hide();
                }
            } else if (wrapper.dataset.state === 'empty') {
                overlay.classList.remove('d-none');
                loadingEl?.classList.add('d-none');
                emptyEl?.classList.remove('d-none');
            } else {
                overlay.classList.remove('d-none');
                loadingEl?.classList.remove('d-none');
                emptyEl?.classList.add('d-none');
            }
        }

        const obs = new MutationObserver(() => {
            clearTimeout(debounceTimer);
            debounceTimer = setTimeout(syncOverlay, DEBOUNCE_MS);
        });
        if (tbody) obs.observe(tbody, { childList: true, subtree: true });

        function showLoading(){
            if (!wrapper) return;
            wrapper.dataset.state = 'loading';
            loadingSince = Date.now();
            syncOverlay();
        }

        function showEmpty(){
            if (!wrapper) return;
            wrapper.dataset.state = 'empty';
            syncOverlay();
        }

        // Spec-required global helpers (note: overrides global ajax-standards showLoading on this page)
        window.showLoading = showLoading;
        window.showEmpty = showEmpty;
        window.CompaniesLoader = { showLoading, showEmpty };

        // Backward compatible names
        window.showCompaniesLoading = showLoading;
        window.showCompaniesEmpty = showEmpty;

        document.getElementById('applyFilters')?.addEventListener('click', function(){ showLoading(); });
        document.getElementById('clearFilters')?.addEventListener('click', function(){ showLoading(); });

        // Recalc height when filter bar expands/collapses
        const filters = document.getElementById('companyFilters');
        if (filters) {
            filters.addEventListener('shown.bs.collapse', applyVh);
            filters.addEventListener('hidden.bs.collapse', applyVh);
        }
    });
</script>

<script src="{{ asset('assets/js/common/states.js') }}"></script>
@endpush