@extends('layouts.app')

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

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

<style>
    /* Table wrapper for sticky headers */
    .table-body-wrapper {
        position: relative;
        overflow-x: auto;
        overflow-y: auto;
    }

    .table-responsive {
        overflow: visible !important;
    }

    /* Sticky header positioning */
    .sticky-top {
        position: sticky;
        top: 0;
        z-index: 10;
        background-color: #f8f9fa;
    }

    /* White space nowrap for headers */
    .white-space-nowrap {
        white-space: nowrap;
    }

    /* Centered empty-state overlay */
    .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);
    }

    /* Loading and empty state styling */
    .table-loading-state,
    .table-empty-state {
        text-align: center;
        padding: 2rem;
        color: #6c757d;
    }

    /* Attribute Values List Styling */
    .hover-shadow:hover {
        box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.15) !important;
    }

    #attrValuesList::-webkit-scrollbar {
        width: 8px;
    }

    #attrValuesList::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }

    #attrValuesList::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 4px;
    }

    #attrValuesList::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

    /* Loading animation */
    @keyframes pulse {
        0%,
        100% {
            opacity: 1;
        }
        50% {
            opacity: 0.5;
        }
    }

    #attributeFormLoading {
        animation: pulse 1.5s ease-in-out infinite;
    }

    /* Fix dropdown going behind table cells */
    #attributesMainTable tbody tr {
        position: relative;
    }

    #attributesMainTable tbody tr:hover {
        z-index: 1;
    }

    #attributesMainTable tbody tr td:last-child {
        overflow: visible !important;
        position: relative;
        z-index: 1;
    }

    #attributesMainTable .dropdown-menu {
        z-index: 1050 !important;
        position: absolute !important;
    }

    #attributesMainTable tbody tr:has(.dropdown.show) {
        z-index: 1051 !important;
    }
</style>
@endpush

@section('content')

<!-- Main Table Card -->
<div class="card mb-3" id="attributeMastersTable"
    data-list='{"valueNames":["attribute_code","attribute_name","attribute_type","data_type","status"],"page":10,"pagination":true}'>
    <div class="card-header py-2">
        <div class="row flex-between-center g-0">
            <div class="col-4 col-sm-auto d-flex align-items-center pe-0">
                <h6 class="mb-0">Attribute Masters</h6>
            </div>
            <div class="col-8 col-sm-auto text-end ps-2">
                <div class="d-none" id="table-attribute-masters-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-attribute-masters-replace-element">
                    @can('masters-product-management-attribute-masters.create')
                    <button class="btn btn-sm btn-primary" type="button" data-bs-toggle="offcanvas"
                        data-bs-target="#addAttributeMasterOffcanvas" aria-controls="addAttributeMasterOffcanvas">
                        <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-product-management-attribute-masters.create')
                    <div class="btn-group mx-2">
                        <button class="btn btn-falcon-default btn-sm dropdown-toggle" type="button"
                            data-bs-toggle="dropdown" aria-expanded="false">
                            <span class="fas fa-file-excel" data-fa-transform="shrink-3 down-2"></span>
                            <span class="d-none d-sm-inline-block ms-1">Import</span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#" id="importAttributesWithValuesBtn">
                                    <i class="fas fa-list me-2"></i>Attributes with Values
                                </a></li>
                            <li><a class="dropdown-item" href="#" id="importAttributeValuesOnlyBtn">
                                    <i class="fas fa-tags me-2"></i>Attribute Values Only
                                </a></li>
                        </ul>
                    </div>
                    @endcan
                    <button class="btn btn-falcon-default btn-sm" type="button" data-bs-toggle="collapse"
                        data-bs-target="#attributeMasterFilters">
                        <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-product-management-attribute-masters.export')
                        <button class="btn btn-falcon-default btn-sm" type="button" id="exportAttributeMasters">
                            <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="attributeMasterFilters">
        <div class="card-body border-top fs-10">
            <div class="row g-2 align-items-end">
                <div class="col-auto">
                    <label class="form-label" for="filterAttributeCode">Attribute Code</label>
                    <input class="form-control form-control-sm" id="filterAttributeCode" type="text"
                        placeholder="Search by code" oninput="renderAttributeTable()">
                </div>
                <div class="col-auto">
                    <label class="form-label" for="filterAttributeName">Attribute Name</label>
                    <input class="form-control form-control-sm" id="filterAttributeName" type="text"
                        placeholder="Search by name" oninput="renderAttributeTable()">
                </div>
                <div class="col-auto">
                    <label class="form-label" for="filterAttributeType">Attribute Type</label>
                    <select class="form-select form-select-sm" id="filterAttributeType"
                        onchange="renderAttributeTable()">
                        <option value="">All Types</option>
                        <option value="product">Product</option>
                        <option value="variant">Variant</option>
                        <option value="both">Both</option>
                    </select>
                </div>
                <div class="col-auto">
                    <label class="form-label" for="filterDataType">Data Type</label>
                    <select class="form-select form-select-sm" id="filterDataType" onchange="renderAttributeTable()">
                        <option value="">All Data Types</option>
                        <option value="text">Text</option>
                        <option value="number">Number</option>
                        <option value="decimal">Decimal</option>
                        <option value="boolean">Boolean</option>
                        <option value="date">Date</option>
                        <option value="datetime">Date Time</option>
                        <option value="list">List</option>
                    </select>
                </div>
                <div class="col-auto">
                    <label class="form-label" for="filterAttributeStatus">Status</label>
                    <select class="form-select form-select-sm" id="filterAttributeStatus"
                        onchange="renderAttributeTable()">
                        <option value="">All Status</option>
                        <option value="active">Active</option>
                        <option value="inactive">Inactive</option>
                    </select>
                </div>
                <div class="col-auto d-flex align-items-center">
                    <button class="btn btn-primary btn-sm me-2" type="button" id="applyAttributeMasterFilters"><i
                            class="fas fa-search"></i> Apply</button>
                    <button class="btn btn-outline-secondary btn-sm" type="button" id="clearAttributeMasterFilters"> <i
                            class="fas fa-times"></i> Clear</button>
                </div>
            </div>
        </div>
    </div>

    {{-- <div class="card-body p-0">
        <div class="table-responsive scrollbar">
            <table class="table table-sm table-striped fs-10 mb-0 overflow-hidden">
                <thead class="bg-200">
                    <tr>
                        <th class="text-900 sort align-middle pe-3" scope="col" data-sort="attribute_code">ATTRIBUTE
                            CODE</th>
                        <th class="text-900 sort align-middle pe-3" scope="col" data-sort="attribute_name">ATTRIBUTE
                            NAME</th>
                        <th class="text-900 sort align-middle pe-3" scope="col" data-sort="attribute_type">TYPE</th>
                        <th class="text-900 sort align-middle pe-3" scope="col" data-sort="data_type">DATA TYPE</th>
                        <th class="text-900 sort align-middle pe-3" scope="col" data-sort="is_required">REQUIRED</th>
                        <th class="text-900 sort align-middle pe-3" scope="col" data-sort="values_count">VALUES</th>
                        <th class="text-900 sort align-middle pe-3" scope="col" data-sort="status">STATUS</th>
                        <th class="text-900 no-sort pe-1 align-middle data-table-row-action">ACTION</th>
                    </tr>
                </thead>
                <tbody class="list" id="table-attribute-masters-body">
                    <!-- Dynamic content will be loaded here -->
                </tbody>
            </table>
        </div>
    </div> --}}

    <div class="card-body p-0">
        <div class="table-responsive scrollbar">
            <div class="table-body-wrapper">
                <table class="table table-sm fs-10 mb-0 table-hover" id="attributesMainTable">
                    <thead class="bg-200 sticky-top" style="position: sticky; top: 0; z-index: 10;">
                        <tr>
                            <th class="text-900 align-middle white-space-nowrap" style="width: 5%;">#</th>
                            <th class="text-900 align-middle white-space-nowrap" style="width: 12%;" onclick="setSort('attribute_code')">Code <span class="sort-icon" id="sortIcon-attribute_code"></span></th>
                            <th class="text-900 align-middle white-space-nowrap" style="width: 15%;" onclick="setSort('attribute_name')">Name <span class="sort-icon" id="sortIcon-attribute_name"></span></th>
                            <th class="text-900 align-middle white-space-nowrap" style="width: 12%;" onclick="setSort('attribute_type')">Type <span class="sort-icon" id="sortIcon-attribute_type"></span></th>
                            <th class="text-900 align-middle white-space-nowrap" style="width: 10%;">Values</th>
                            <th class="text-900 align-middle white-space-nowrap" style="width: 10%;">Status</th>
                            <th class="text-900 align-middle white-space-nowrap" style="width: 28%;">Description</th>
                            @canany(['masters-product-management-attribute-masters.update','masters-product-management-attribute-masters.delete'])
                            <th class="text-900 align-middle white-space-nowrap" style="width: 8%;">Actions</th>
                            @endcanany
                        </tr>
                    </thead>
                    <tbody id="attributesTableBody"></tbody>
                </table>
                <div id="attributesEmptyOverlay" 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 attributes...</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 attributes found</div>
                        <small class="text-muted">Try adjusting your filters or create a new attribute</small>
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>

<!-- attributes Creation Wizard Offcanvas -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="addAttributeMasterOffcanvas"
    aria-labelledby="addAttributeMasterOffcanvasLabel" style="width: 50%;">
    <div class="offcanvas-header border-bottom">
        <h5 class="offcanvas-title" id="attributesWizardLabel"><i class="fas fa-cog"></i> Create New Attribute</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body" style="">
        <!-- Loading State -->
        <div id="attributeFormLoading" class="text-center py-5" style="display:none;">
            <div class="spinner-border text-primary mb-3" role="status" style="width: 3rem; height: 3rem;">
                <span class="visually-hidden">Loading...</span>
            </div>
            <h5 class="text-muted">Loading attribute data...</h5>
            <p class="text-muted small">Please wait while we fetch the attribute details</p>
        </div>

        <div class="card" id="attributeFormCard" style="height:100%">

            <div class="card-body">
                <form id="attributeForm">
                    <div class="mb-3">
                        <label class="form-label">Attribute Code <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="attrCode" placeholder="e.g. COLOR" maxlength="30"
                            required>
                        <div class="invalid-feedback">Attribute Code is required</div>
                        <small class="form-text text-muted">Unique code, uppercase, no spaces (e.g. COLOR, SIZE,
                            MATERIAL)</small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Attribute Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="attrName" placeholder="e.g. Color" maxlength="100"
                            required>
                        <div class="invalid-feedback">Attribute Name is required</div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Attribute Type <span class="text-danger">*</span></label>
                        <select class="form-select" id="attrType" required>
                            <option value="">Select Type</option>
                            <option value="DROPDOWN">Dropdown (List of Values)</option>
                            <option value="TEXT">Text</option>
                            <option value="NUMBER">Number</option>
                            <option value="BOOLEAN">Yes/No (Boolean)</option>
                            <option value="DATE">Date</option>
                        </select>
                        <div class="invalid-feedback">Attribute Type is required</div>
                    </div>
                    <div class="mb-3" id="dropdownValuesSection" style="display:none;">
                        <label class="form-label d-flex justify-content-between align-items-center">
                            <span>Attribute Values <span class="text-danger">*</span></span>
                            <span class="badge bg-info" id="valuesCountBadge">0 values</span>
                        </label>

                        <!-- Add New Value Input -->
                        <div class="card bg-light border-0 mb-3">
                            <div class="card-body p-3">
                                <div class="row g-2">
                                    <div class="col-5">
                                        <input type="text" class="form-control form-control-sm" id="attrValueCode"
                                            placeholder="Value Code (e.g. RED)">
                                    </div>
                                    <div class="col-5">
                                        <input type="text" class="form-control form-control-sm" id="attrValueName"
                                            placeholder="Value Name (e.g. Red)">
                                    </div>
                                    <div class="col-2 d-grid">
                                        <button type="button" class="btn btn-primary btn-sm" id="addAttrValueBtn">
                                            <i class="fas fa-plus"></i> Add
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Values List -->
                        <div id="attrValuesList" class="border rounded p-2"
                            style="max-height: 300px; overflow-y: auto; background-color: #f8f9fa;">
                            <p class="text-muted text-center small mb-0" id="noValuesMessage">No values added yet. Add
                                values using the form above.</p>
                        </div>
                        <div id="attrsInlineError" class="invalid-feedback d-block" style="display:none;"></div>
                   <div class="mb-3">
                        <label class="form-label">Description</label>
                        <textarea class="form-control" id="attrDesc" rows="2"
                            placeholder="Describe the attribute's purpose (optional)"></textarea>
                    </div>
                    <div class="row g-3 align-items-center">
                        <div class="col-auto">
                            <div class="form-check form-switch mb-0">
                                <input class="form-check-input" type="checkbox" id="isActive" checked>
                                <label class="form-check-label" for="isActive">Active</label>
                            </div>
                        </div>
                        <div class="col-auto">
                            <div class="form-check form-switch mb-0">
                                <input class="form-check-input" type="checkbox" id="isRequired" checked>
                                <label class="form-check-label" for="isRequired">Required</label>
                            </div>
                        </div>
                    </div>
                    </div>



                    {{-- Action buttons moved to sticky offcanvas footer below --}}
                </form>
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-xl-7 col-lg-8 col-md-10">

                <div id="result" class="mt-4"></div>
            </div>

        </div>

    </div>
    {{-- Sticky offcanvas footer actions --}}
            <div class="offcanvas-footer border-top p-3 bg-light position-sticky bottom-0" style="z-index: 1;">
                <div class="d-flex justify-content-between align-items-center">
                    <button type="reset" class="btn btn-outline-secondary" form="attributeForm"><i
                            class="fas fa-undo"></i> Reset</button>
                    @canany(['masters-product-management-attribute-masters.create','masters-product-management-attribute-masters.update'])
                    <button type="submit" id="saveAttributeBtn" class="btn btn-success" form="attributeForm"><i
                            class="fas fa-save"></i> Save Attribute</button>
                    @endcanany
                </div>
            </div>
</div>

<!-- View Attribute Values Offcanvas -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="viewAttributeValuesOffcanvas"
    aria-labelledby="viewAttributeValuesOffcanvasLabel" style="width: 40%;">
    <div class="offcanvas-header border-bottom bg-light">
        <h5 class="offcanvas-title" id="viewAttributeValuesOffcanvasLabel">
            <i class="fas fa-tags me-2"></i>Attribute Values
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <!-- Attribute Info Card -->
        <div class="card mb-3 border-0 shadow-sm">
            <div class="card-body">
                <div class="row g-2">
                    <div class="col-12">
                        <h6 class="mb-1 text-primary" id="viewAttrName">-</h6>
                        <p class="mb-2 text-muted small">
                            <strong>Code:</strong> <span id="viewAttrCode">-</span>
                        </p>
                    </div>
                    <div class="col-6">
                        <small class="text-muted d-block">Type</small>
                        <span class="badge" id="viewAttrType">-</span>
                    </div>
                    <div class="col-6">
                        <small class="text-muted d-block">Status</small>
                        <span class="badge" id="viewAttrStatus">-</span>
                    </div>
                    <div class="col-12 mt-2" id="viewAttrDescContainer" style="display:none;">
                        <small class="text-muted d-block">Description</small>
                        <p class="mb-0 small" id="viewAttrDesc">-</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Values List -->
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white border-bottom">
                <div class="d-flex justify-content-between align-items-center">
                    <h6 class="mb-0">
                        <i class="fas fa-list me-2"></i>Attribute Values
                        <span class="badge bg-info ms-2" id="valuesCount">0</span>
                    </h6>
                    <div class="input-group input-group-sm" style="width: 200px;">
                        <span class="input-group-text"><i class="fas fa-search"></i></span>
                        <input type="text" class="form-control" id="searchValues" placeholder="Search values...">
                    </div>
                </div>
            </div>
            <div class="card-body p-0">
                <!-- Loading State -->
                <div id="valuesLoading" class="text-center py-5">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <p class="mt-2 text-muted">Loading values...</p>
                </div>

                <!-- Empty State -->
                <div id="valuesEmpty" class="text-center py-5" style="display:none;">
                    <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                    <p class="text-muted">No values found</p>
                </div>

                <!-- Values Table -->
                <div id="valuesTableContainer" style="display:none;">
                    <div class="table-responsive" style="max-height: 500px; overflow-y: auto;">
                        <table class="table table-sm table-hover mb-0">
                            <thead class="bg-light sticky-top">
                                <tr>
                                    <th style="width: 50px;">#</th>
                                    <th>Value Code</th>
                                    <th>Value Name</th>
                                    <th style="width: 100px;" class="text-center">Color</th>
                                    <th style="width: 80px;" class="text-center">Status</th>
                                </tr>
                            </thead>
                            <tbody id="valuesTableBody">
                                <!-- Dynamic values will be loaded here -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Statistics Card -->
        <div class="card border-0 shadow-sm mt-3" id="valuesStatsCard" style="display:none;">
            <div class="card-body">
                <h6 class="card-title mb-3">
                    <i class="fas fa-chart-bar me-2"></i>Statistics
                </h6>
                <div class="row g-3">
                    <div class="col-6">
                        <div class="text-center p-2 bg-light rounded">
                            <div class="fs-4 fw-bold text-primary" id="totalValuesCount">0</div>
                            <small class="text-muted">Total Values</small>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="text-center p-2 bg-light rounded">
                            <div class="fs-4 fw-bold text-success" id="activeValuesCount">0</div>
                            <small class="text-muted">Active Values</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="offcanvas-footer border-top p-3 bg-light">
        <button type="button" class="btn btn-secondary w-100" data-bs-dismiss="offcanvas">
            <i class="fas fa-times me-1"></i>Close
        </button>
    </div>
</div>

<!-- Attribute Import Modal -->
<div class="modal fade" id="attributeImportModal" tabindex="-1" aria-labelledby="attributeImportModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="attributeImportModalLabel">
                    <i class="fas fa-file-excel me-2"></i><span id="importModalTitle">Import Attributes</span>
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                    aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- Import Type Badge -->
                <div class="mb-3">
                    <span class="badge bg-info" id="importTypeBadge">
                        <i class="fas fa-list me-1"></i>Attributes with Values
                    </span>
                </div>

                <!-- Instructions -->
                <div class="alert alert-info border-0" role="alert">
                    <div class="d-flex align-items-center">
                        <i class="fas fa-info-circle fs-3 me-3"></i>
                        <div>
                            <h6 class="alert-heading mb-1">Import Instructions</h6>
                            <p class="mb-2 small" id="importInstructions">Download the template, fill in attribute data,
                                and upload the completed file.</p>
                            <button class="btn btn-sm btn-outline-info" id="downloadTemplateBtn">
                                <i class="fas fa-download me-1"></i>Download Excel Template
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Upload File -->
                <form id="attributeImportForm" enctype="multipart/form-data">
                    @csrf
                    <div class="mb-3">
                        <label for="importFile" class="form-label fw-bold">
                            <i class="fas fa-cloud-upload-alt me-1"></i>Select Excel File
                        </label>
                        <input type="file" class="form-control" id="importFile" name="import_file" accept=".xlsx,.xls"
                            required>
                        <div class="form-text">
                            Supported formats: .xlsx, .xls (Max size: 5MB)
                        </div>
                        <div class="invalid-feedback" id="fileError"></div>
                    </div>

                    <!-- Import Options -->
                    <div class="card bg-light border-0 mb-3">
                        <div class="card-body">
                            <h6 class="card-title mb-3">Import Options</h6>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" id="skipDuplicates"
                                    name="skip_duplicates" checked>
                                <label class="form-check-label" for="skipDuplicates">
                                    Skip duplicate attribute codes
                                </label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" id="updateExisting"
                                    name="update_existing">
                                <label class="form-check-label" for="updateExisting">
                                    Update existing attributes/values
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="validateOnly" name="validate_only">
                                <label class="form-check-label" for="validateOnly">
                                    Validate only (don't import)
                                </label>
                            </div>
                        </div>
                    </div>

                    <!-- Progress Bar -->
                    <div id="importProgress" class="d-none">
                        <div class="d-flex justify-content-between mb-2">
                            <span class="text-muted">Importing...</span>
                            <span id="progressText">0%</span>
                        </div>
                        <div class="progress" style="height: 25px;">
                            <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
                                id="progressBar" style="width: 0%">
                            </div>
                        </div>
                    </div>

                    <!-- Results Area -->
                    <div id="importResults" class="d-none mt-3"></div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-1"></i>Close
                </button>
                <button type="button" class="btn btn-success" id="startImportBtn">
                    <i class="fas fa-upload me-1"></i>Start Import
                </button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
    // Expose page capability flags for JS usage
    @php
    $pageCaps = isset($caps) ? $caps : [
        'view'   => false,
        'create' => false,
        'update' => false,
        'delete' => false,
        'export' => false,
    ];
    @endphp
    window.pageCaps = @json($pageCaps);
</script>
<script>
    // Single overlay (loading/empty) + dynamic height for Attribute Masters list
    document.addEventListener('DOMContentLoaded', function(){
        const tbody = document.getElementById('attributesTableBody');
        const overlay = document.getElementById('attributesEmptyOverlay');
        const wrapper = document.querySelector('#attributeMastersTable .table-body-wrapper');
        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;

        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.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 now = Date.now();
                const elapsed = now - loadingSince;
                const hide = () => {
                    wrapper.dataset.state = 'data';
                    overlay.classList.add('d-none');
                    loadingEl?.classList.add('d-none');
                    emptyEl?.classList.add('d-none');
                };
                if (elapsed < MIN_SPINNER_MS && wrapper.dataset.state === 'loading') {
                    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 });

        // Public helpers (standard + backward compatible aliases)
        function showLoading(){
            if (!wrapper) return;
            wrapper.dataset.state = 'loading';
            loadingSince = Date.now();
            syncOverlay();
        }
        function showEmpty(){
            if (!wrapper) return;
            wrapper.dataset.state = 'empty';
            syncOverlay();
        }

        // Standard helpers requested by the spec
        window.showLoading = showLoading;
        window.showEmpty = showEmpty;
        window.AttributeMastersLoader = { showLoading, showEmpty };

        // Backward compatible names (in case other scripts already call these)
        window.showAttributesLoading = showLoading;
        window.showAttributesEmpty = showEmpty;

        function adjustHeight(){
            const tableBodyWrapper = document.querySelector('#attributeMastersTable .table-body-wrapper');
            if (!tableBodyWrapper) return;
            const viewportHeight = window.innerHeight;
            const top = tableBodyWrapper.getBoundingClientRect().top;
            const footerEl = document.querySelector('footer') || null;
            const footerHeight = footerEl ? footerEl.getBoundingClientRect().height : 56;
            const avail = Math.max(280, viewportHeight - top - footerHeight - 40);
            tableBodyWrapper.style.maxHeight = `${avail}px`;
            tableBodyWrapper.style.minHeight = `${avail}px`;
        }
        adjustHeight();
        window.addEventListener('resize', adjustHeight);

        document.getElementById('applyAttributeMasterFilters')?.addEventListener('click', function(){ showLoading(); });
        document.getElementById('clearAttributeMasterFilters')?.addEventListener('click', function(){ showLoading(); });
    });
</script>
@endpush