@extends('layouts.app')

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

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

<style>
    /* Table wrapper for sticky headers */
    .table-body-wrapper {
        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;
    }

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

    /* Simplified Attribute Selection Styles */
    .form-check-card {
        margin-bottom: 0.5rem;
    }

    .attribute-block {
        margin-bottom: 1.5rem;
    }

    .attribute-block .form-check-label {
        cursor: pointer;
        margin-bottom: 0;
    }

    .attribute-block .form-check-label > div {
        transition: all 0.15s ease-in-out;
    }

    .attribute-block .form-check-label:hover > div {
        border-color: #0d6efd !important;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    }

    /* Simple badge styles */
    .badge {
        font-size: 0.75rem;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .attribute-block .btn-group {
            flex-direction: column;
        }

        .attribute-block .btn-group .btn {
            font-size: 0.75rem;
            padding: 0.25rem 0.5rem;
        }
    }

    /* Simple text utilities */
    /* .text-muted { color: #6c757d !important; }
    .text-primary { color: #0d6efd !important; }
    .text-success { color: #198754 !important; } */

    /* Simple background utilities */
    /* .bg-light { background-color: #f8f9fa !important; }
    .bg-success { background-color: #198754 !important; } */
    .bg-opacity-10 { --bs-bg-opacity: 0.1; }

    /* Basic hover effects */
    .btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    }

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

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

    /* Apply/Clear button feedback */
    .border-success {
        border-color: #198754 !important;
        transition: border-color 0.3s ease;
    }

    .border-info {
        border-color: #0dcaf0 !important;
        transition: border-color 0.3s ease;
    }

    .border-warning {
        border-color: #ffc107 !important;
        transition: border-color 0.3s ease;
    }

    /* Required field indicator */
    .text-danger {
        color: #dc3545 !important;
    }

    /* Responsive adjustments for variant cards */
    @media (max-width: 768px) {
        .variant-card .btn-group {
            flex-direction: column;
        }

        .variant-card .btn-group .btn {
            font-size: 0.7rem;
            padding: 0.2rem 0.4rem;
        }
    }

    /* Alert styles */
    .alert {
        border: 1px solid transparent;
        border-radius: 0.375rem;
        padding: 0.75rem 1rem;
        margin-bottom: 1rem;
    }

    .alert-success {
        color: #0f5132;
        background-color: #d1e7dd;
        border-color: #badbcc;
    }

    .alert-info {
        color: #055160;
        background-color: #cff4fc;
        border-color: #b6effb;
    }

    .alert-warning {
        color: #664d03;
        background-color: #fff3cd;
        border-color: #ffecb5;
    }

    .alert-danger {
        color: #842029;
        background-color: #f8d7da;
        border-color: #f5c2c7;
    }
</style>
@endpush

@section('content')

    <!-- Main Table Card -->
    <div class="card mb-3" id="variantManagementCard">
        <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">
                        <span class="fas fa-cubes me-2"></span>Product Variants
                    </h5>
                </div>
                <div class="col-8 col-sm-auto text-end ps-2 d-flex justify-content-between">
                    <div class="me-2 d-none" id="table-variants-actions">
                        <div class="d-flex align-items-center">
                            <span class="badge bg-primary me-2" id="selectedVariantsCount">0 selected</span>
                            <select class="form-select form-select-sm" id="bulkActionSelect" aria-label="Bulk actions" style="min-width: 150px;">
                                <option value="" selected>Bulk actions</option>
                                @can('masters-product-management-product-variants.update')
                                <option value="activate">Activate</option>
                                <option value="deactivate">Deactivate</option>
                                @endcan
                                @can('masters-product-management-product-variants.delete')
                                <option value="delete">Delete</option>
                                @endcan
                                @can('masters-product-management-product-variants.export')
                                <option value="export">Export Selected</option>
                                @endcan
                            </select>
                            <button class="btn btn-falcon-default btn-sm ms-2" type="button" id="applyBulkAction">Apply</button>
                        </div>
                    </div>


                    <div id="table-variants-replace-element">
                        @can('masters-product-management-product-variants.create')
                        <button class="btn btn-sm btn-primary" type="button"  id="newVariantButton">
                            <span class="fas fa-plus" data-fa-transform="shrink-3 down-2"></span>
                            <span class="d-none d-sm-inline-block ms-1">New</span>
                        </button>
                        @endcan
                        <button class="btn btn-falcon-default btn-sm mx-2" type="button" data-bs-toggle="collapse" data-bs-target="#variantFilters">
                            <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-product-variants.export')
                        <button class="btn btn-falcon-default btn-sm me-2" type="button" id="exportVariants">
                            <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="variantFilters">
                <div class="card-body border-top fs-10">
                    <div class="row g-3">
                        <div class="col-2 col-md-2 col-lg-2">
                            {{-- <label class="form-label" for="filterSku">SKU</label> --}}
                            <input class="form-control form-control-sm" id="filterSku" type="text" placeholder="Search by SKU">
                        </div>
                        <div class="col-2 col-md-2 col-lg-2">
                            {{-- <label class="form-label" for="filterVariantName">Variant Name</label> --}}
                            <input class="form-control form-control-sm" id="filterVariantName" type="text" placeholder="Search by name">
                        </div>
                        <div class="col-2 col-md-2 col-lg-2">
                            {{-- <label class="form-label" for="filterProduct">Product</label> --}}
                            <select class="form-select form-select-sm" id="filterProduct">
                                <option value="">All Products</option>
                                <!-- Products will be loaded dynamically -->
                            </select>
                        </div>
                        <div class="col-2 col-md-2 col-lg-2">
                            {{-- <label class="form-label" for="filterBrand">Brand</label> --}}
                            <select class="form-select form-select-sm" id="filterBrand">
                                <option value="">All Brands</option>
                                <!-- Brands will be loaded dynamically -->
                            </select>
                        </div>

                        <div class="col-2 col-md-2 col-lg-2">
                            {{-- <label class="form-label" for="filterStatus">Status</label> --}}
                            <select class="form-select form-select-sm" id="filterStatus">
                                <option value="">All Status</option>
                                <option value="1">Active</option>
                                <option value="0">Inactive</option>
                            </select>
                        </div>
                        <div class="col-2 col-md-2 col-lg-2 d-flex align-items-end">
                            <button class="btn btn-primary btn-sm me-2" type="button" id="applyVariantFilters">Apply</button>
                            <button class="btn btn-outline-secondary btn-sm" type="button" id="clearVariantFilters">Clear</button>
                        </div>
                    </div>
                </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="variantTable">
                            <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: 4%;">
                            <div class="form-check fs-9 mb-0 d-flex align-items-center">
                                <input class="form-check-input" id="checkbox-bulk-variants-select" type="checkbox" />
                            </div>
                        </th>
                        {{-- <th class="text-900 align-middle pe-3" scope="col" style="width: 5%;">SR NO.</th> --}}
                        <th class="text-900 sort align-middle white-space-nowrap" scope="col" data-sort="sku" style="width: 15%;">SKU</th>
                        <th class="text-900 sort align-middle white-space-nowrap" scope="col" data-sort="variant_name" style="width: 30%;">VARIANT NAME</th>
                        <th class="text-900 sort align-middle white-space-nowrap" scope="col" data-sort="product" style="width: 21%;">PRODUCT</th>
                        {{-- <th class="text-900 sort align-middle pe-3" scope="col" data-sort="brand" style="width: 8%;">BRAND</th>
                        <th class="text-900 sort align-middle pe-3 hide-on-md" scope="col" data-sort="purchase_price" style="width: 10%;">PURCHASE PRICE</th>
                        <th class="text-900 sort align-middle pe-3" scope="col" data-sort="selling_price" style="width: 10%;">SELLING PRICE</th>
                        <th class="text-900 sort align-middle pe-3 hide-on-sm" scope="col" data-sort="current_stock" style="width: 10%;">STOCK</th> --}}
                        <th class="text-900 sort align-middle white-space-nowrap" scope="col" data-sort="status" style="width: 10%;">STATUS</th>
                        <th class="text-900 sort align-middle white-space-nowrap hide-on-sm" scope="col" data-sort="created_at" style="width: 10%;">CREATED AT</th>
                        @canany(['masters-product-management-product-variants.update','masters-product-management-product-variants.delete'])
                        <th class="text-900 no-sort align-middle white-space-nowrap data-table-row-action" style="width: 10%;">ACTION</th>
                        @endcanany
                    </tr>
                </thead>
                 <tbody id="variantTableBody">

                </tbody>
            </table>
            <div id="variantTableEmptyOverlay" 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 variants...</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 variants found</div>
                    <small class="text-muted">Try adjusting your filters or add new variants</small>
                </div>
            </div>
        </div>
    </div>
  </div>
</div>
{{-- style="overflow-y: scroll; max-height: calc(100vh - 60px);" --}}

<!-- Product Creation Wizard Offcanvas -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="productWizardOffcanvas"  data-bs-backdrop="static" data-bs-keyboard="false" aria-labelledby="productWizardOffcanvasLabel" style="width: 80%;">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="productWizardOffcanvasLabel">
    <i class="fas fa-cubes me-2"></i>Create Product Variants
</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>

<div class="offcanvas-body p-0 d-flex flex-column">
<div class="card theme-wizard border-0 flex-1" data-theme-wizard="data-theme-wizard">
<div class="card-header border-bottom py-2 bg-body-tertiary">
    <ul class="nav nav-wizard">
        <li class="nav-item">
            <a class="nav-link fw-semi-bold active" href="#product-tab1" data-bs-toggle="tab" data-wizard-step="1">
                <span class="nav-item-circle-parent">
                    <span class="nav-item-circle">
                        <span class="fas fa-box"></span>
                    </span>
                </span>
                <span class="d-none d-md-block mt-1 fs-10">Select Product</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link fw-semi-bold" href="#product-tab2" data-bs-toggle="tab" data-wizard-step="2">
                <span class="nav-item-circle-parent">
                    <span class="nav-item-circle">
                        <span class="fas fa-tags"></span>
                    </span>
                </span>
                <span class="d-none d-md-block mt-1 fs-10">Select Attributes</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link fw-semi-bold" href="#product-tab3" data-bs-toggle="tab" data-wizard-step="3">
                <span class="nav-item-circle-parent">
                    <span class="nav-item-circle">
                        <span class="fas fa-cubes"></span>
                    </span>
                </span>
                <span class="d-none d-md-block mt-1 fs-10">Generate Variants</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link fw-semi-bold" href="#product-tab4" data-bs-toggle="tab" data-wizard-step="4">
                <span class="nav-item-circle-parent">
                    <span class="nav-item-circle">
                        <span class="fas fa-eye"></span>
                    </span>
                </span>
                <span class="d-none d-md-block mt-1 fs-10">Summary</span>
            </a>
        </li>
    </ul>
</div>


<div class="card-body flex-1 py-2">
    <div class="tab-content h-100">
        <!-- Step 1: Product Selection -->
        <div class="tab-pane active px-sm-3 px-md-5" role="tabpanel" aria-labelledby="product-tab1" id="product-tab1">
            <form novalidate="novalidate" data-wizard-form="1" id="basicProductInfoForm">
                @csrf

                <!-- Product Selection Section -->
                <div class="row mb-3 pb-3 border-bottom">
                    <div class="col-12">
                        <div class="mb-3">
                            <label for="product_master_id" class="form-label fw-bold">
                                <i class="fas fa-box me-2 text-primary"></i>Select Product Master <span class="text-danger">*</span>
                            </label>
                            <select class="form-select form-select-sm" id="product_master_id" name="product_master_id" required>
                                <option value="">Select Product to Create Variants For...</option>
                            </select>
                            <div class="invalid-feedback">Please select a product to create variants for</div>
                            <div class="form-text">Choose an existing product from the list to create variants</div>
                        </div>

                        <!-- Product Details Card (shows after selection) -->
                        <div id="productDetailsCard" class="card border shadow-sm d-none">
                            <div class="card-header bg-light border-bottom">
                                <div class="d-flex align-items-center justify-content-between">
                                    <h6 class="mb-0 fw-semibold">
                                        <i class="fas fa-info-circle me-2 text-primary"></i>Selected Product Details
                                    </h6>
                                    <span id="display_status" class="badge bg-success">
                                        <i class="fas fa-check-circle me-1"></i>Active
                                    </span>
                                </div>
                            </div>
                            <div class="card-body p-3">
                                <!-- Primary Info Section -->
                                <div class="row g-3 mb-3">
                                    <div class="col-md-6">
                                        <label class="form-label text-muted mb-1 small">
                                            <i class="fas fa-barcode me-1"></i>Product Code
                                        </label>
                                        <p id="display_product_code" class="fw-semibold mb-0">-</p>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label text-muted mb-1 small">
                                            <i class="fas fa-tag me-1"></i>Product Name
                                        </label>
                                        <p id="display_product_name" class="fw-semibold mb-0">-</p>
                                    </div>
                                </div>

                                <!-- Classification Section -->
                                <div class="border-top pt-3 mb-3">
                                    <h6 class="text-muted mb-2 small fw-semibold text-uppercase">
                                        <i class="fas fa-layer-group me-1"></i>Classification
                                    </h6>
                                    <div class="row g-3">
                                        <div class="col-md-3 col-6">
                                            <label class="form-label text-muted mb-1 small">Category</label>
                                            <p id="display_category" class="mb-0">-</p>
                                        </div>
                                        <div class="col-md-3 col-6">
                                            <label class="form-label text-muted mb-1 small">Product Type</label>
                                            <p id="display_product_type" class="mb-0">-</p>
                                        </div>
                                        <div class="col-md-3 col-6">
                                            <label class="form-label text-muted mb-1 small">Brand</label>
                                            <p id="display_brand" class="mb-0">-</p>
                                        </div>
                                        <div class="col-md-3 col-6">
                                            <label class="form-label text-muted mb-1 small">Manufacturer</label>
                                            <p id="display_manufacturer" class="mb-0">-</p>
                                        </div>
                                    </div>
                                </div>

                                <!-- Technical Details Section -->
                                <div class="border-top pt-3 mb-3">
                                    <h6 class="text-muted mb-2 small fw-semibold text-uppercase">
                                        <i class="fas fa-cogs me-1"></i>Technical Details
                                    </h6>
                                    <div class="row g-3">
                                        <div class="col-md-4">
                                            <label class="form-label text-muted mb-1 small">Base UOM</label>
                                            <p id="display_base_uom" class="mb-0">-</p>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label text-muted mb-1 small">HSN Code</label>
                                            <p id="display_hsn_code" class="mb-0">-</p>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label text-muted mb-1 small">SKU Pattern</label>
                                            <p id="display_sku_pattern" class="mb-0 small">-</p>
                                        </div>
                                    </div>
                                </div>

                                <!-- UOMs Section -->
                                <div class="border-top pt-3 mb-3">
                                    <h6 class="text-muted mb-2 small fw-semibold text-uppercase">
                                        <i class="fas fa-ruler-combined me-1"></i>Allowed Units of Measure
                                    </h6>
                                    <div class="bg-light rounded p-2">
                                        <p id="display_allowed_uoms" class="mb-0 small">-</p>
                                    </div>
                                </div>

                                <!-- Contextual UOMs Section -->
                                <div class="border-top pt-3 mb-3">
                                    <h6 class="text-muted mb-2 small fw-semibold text-uppercase">
                                        <i class="fas fa-exchange-alt me-1"></i>Contextual UOMs
                                    </h6>
                                    <div class="row g-2">
                                        <div class="col-md-4">
                                            <div class="border rounded p-2">
                                                <label class="text-muted small mb-1 fw-semibold">
                                                    <i class="fas fa-shopping-cart me-1"></i>Purchase
                                                </label>
                                                <p id="display_ctx_purchase_uoms" class="mb-0 small">-</p>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="border rounded p-2">
                                                <label class="text-muted small mb-1 fw-semibold">
                                                    <i class="fas fa-hand-holding-usd me-1"></i>Sales
                                                </label>
                                                <p id="display_ctx_sales_uoms" class="mb-0 small">-</p>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="border rounded p-2">
                                                <label class="text-muted small mb-1 fw-semibold">
                                                    <i class="fas fa-industry me-1"></i>Manufacturing
                                                </label>
                                                <p id="display_ctx_manufacturing_uoms" class="mb-0 small">-</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Description Section -->
                                <div class="border-top pt-3">
                                    <label class="form-label text-muted mb-1 small fw-semibold">
                                        <i class="fas fa-align-left me-1"></i>Description
                                    </label>
                                    <p id="display_description" class="mb-0 text-muted small">-</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Alert for validation messages -->
                <div class="alert alert-warning p-2 d-none mt-3" id="productAlert">
                    <i class="fas fa-exclamation-triangle"></i> <span id="productAlertText"></span>
                </div>
            </form>
        </div>

        <!-- Step 2: Attributes Selection -->
        <div class="tab-pane px-sm-3 px-md-5" role="tabpanel" aria-labelledby="product-tab2" id="product-tab2">
            <form data-wizard-form="2" id="productAttributesForm">
                    {{-- <div class="alert alert-info p-2">
                <i class="fas fa-info-circle"></i> Select attributes that will create variants of this product.
            </div> --}}

            <div id="attributeContainer">
                <!-- Attributes will be loaded dynamically based on category -->
            </div>

            <div class="mt-4">
                <h6>Selected Attributes Preview:</h6>
                <div id="selectedAttributes" class="border p-3 rounded bg-light min-height-100">
                    <em class="text-muted">No attributes selected yet</em>
                </div>
            </div>
            </form>
        </div>

        <!-- Step 3: Variant Generation -->
        <div class="tab-pane px-sm-3 px-md-5" role="tabpanel" aria-labelledby="product-tab3" id="product-tab3">
            <form data-wizard-form="3" id="productVariantGenerationForm">
                {{-- <div class="alert alert-warning">
                <i class="fas fa-exclamation-triangle"></i>
                <strong>Note:</strong> Variants will be generated based on selected attributes. Each combination will create a unique SKU.
            </div> --}}

                <div id="variantsList" class="mt-1">
                    <!-- Variants will be generated here -->
                </div>
            </form>
        </div>

        <!-- Step 4: Pricing -->
        <div class="tab-pane px-sm-3 px-md-5" role="tabpanel" aria-labelledby="product-tab4" id="product-tab4">
            <form data-wizard-form="4" id="productSummaryForm">
                <div class="row">
                <div class="col-md-6">
                    <div class="border rounded p-4">
                        <h6>Product Master Summary</h6>
                        <div id="productSummary">
                            <!-- Product summary will be shown here -->
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="border rounded p-4">
                        <h6>Variants Summary</h6>
                        <div id="variantsSummary">
                            <!-- Variants summary will be shown here -->
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-4">
                <div class="alert alert-success p-2">
                    <i class="fas fa-check-circle"></i>
                    <strong>Ready to Save!</strong> Review all information above and click Save Product to create the product master with all variants.
                </div>
            </div>
            </form>
        </div>

    </div>
</div>

 <div class="card-footer bg-body-tertiary position-sticky bottom-0" style="z-index: 1000;">
{{-- <div class="offcanvas-footer border-top p-3 bg-body-tertiary position-sticky bottom-0"> --}}
        <ul class="pager wizard list-inline mb-0 d-flex justify-content-between ">
            <li class="previous">
                <button class="btn btn-link ps-0 d-none" type="button" id="productPrevBtn">
                    <span class="fas fa-chevron-left me-2" data-fa-transform="shrink-3"></span>Back
                </button>
            </li>
            <li class="undo d-none" id="productUndoBtnContainer">
                <button class="btn btn-warning px-4 px-sm-5" type="button" id="productUndoBtn">
                    <span class="fas fa-undo me-2" data-fa-transform="shrink-3"></span>Undo
                </button>
            </li>
            <li class="next">
                <button class="btn btn-primary px-5 px-sm-6" type="button" id="productNextBtn">
                    Next<span class="fas fa-chevron-right ms-2" data-fa-transform="shrink-3"></span>
                </button>
                    <button class="btn btn-success px-5 px-sm-6 d-none" type="button" id="productSubmitBtn">

                </button>
            </li>
            {{-- <li class="submit">
                <button class="btn btn-success px-5 px-sm-6 d-none" type="button" id="productSubmitBtn">
                    <span class="fas fa-save me-2" data-fa-transform="shrink-3"></span>Create Product
                </button>
            </li> --}}
        </ul>
{{-- </div> --}}
</div>
</div>

<!-- Footer -->

</div>

</div>


        <!-- Conversion Modal (simplified: only rules list + New) -->
       <div class="modal fade" id="conversionModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">UOM Rules for Product</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row g-3">
                            <div class="col-12 col-lg-6">
                                <label class="form-label small">Available Rules</label>
                                <div class="d-flex gap-2 align-items-start">
                                    <select class="form-select" id="convPairRule" multiple size="8"></select>
                                    <button type="button" class="btn btn-outline-primary btn-sm" id="convStartCreate">New</button>
                                </div>
                                <div class="form-text">Rules shown match any pair within the product's allowed UOMs. Item rules shown first, then global.</div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-primary" id="convApplyBtn">Apply</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Create Rule Modal -->
        <div class="modal fade" id="createRuleModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Create Conversion Rule</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label small">From UOM</label>
                                <select class="form-select" id="newRuleFrom"></select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label small">To UOM</label>
                                <select class="form-select" id="newRuleTo"></select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label small">Type</label>
                                <select class="form-select" id="newRuleType">
                                    <option value="factor">Factor</option>
                                    <option value="affine">Affine</option>
                                    <option value="formula">Formula</option>
                                </select>
                            </div>
                            <div class="col-md-8">
                                <label class="form-label small">Rule name (optional)</label>
                                <input type="text" class="form-control" id="newRuleName" placeholder="e.g., Roll width x qty" />
                            </div>
                            <div class="col-md-4" data-role="factor">
                                <label class="form-label small">Factor</label>
                                <input type="number" step="0.0001" class="form-control" id="newRuleFactor" />
                            </div>
                            <div class="col-md-4" data-role="offset" style="display:none;">
                                <label class="form-label small">Offset</label>
                                <input type="number" step="0.0001" class="form-control" id="newRuleOffset" />
                            </div>
                            <div class="col-12" data-role="formula" style="display:none;">
                                <label class="form-label small">Formula</label>
                                <input type="text" class="form-control" id="newRuleExpr" placeholder="e.g., qty * WIDTH" />
                            </div>
                            <div class="col-md-6" data-role="formula" style="display:none;">
                                <label class="form-label small">Variables used (comma)</label>
                                <input type="text" class="form-control" id="newRuleVars" placeholder="WIDTH, LENGTH" />
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" id="createRuleSave">Save Rule</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

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

<style>
    /* Fix dropdown going behind table cells */
    #variantTable tbody tr {
        position: relative;
        z-index: auto;
    }

    /* Increase z-index on hover to lift row above others */
    #variantTable tbody tr:hover {
        z-index: 10 !important;
    }

    /* Ensure dropdown button cell allows overflow */
    #variantTable tbody tr td:last-child {
        overflow: visible !important;
        position: relative;
    }

    /* Dropdown menu positioning - higher than row hover */
    #variantTable .dropdown-menu {
        z-index: 1050 !important;
        position: absolute !important;
    }

    /* Ensure proper stacking on dropdown open - highest priority */
    #variantTable tbody tr:has(.dropdown.show) {
        z-index: 1051 !important;
    }

    /* Fix for action column to allow dropdown overflow */
    #variantTable tbody tr td.white-space-nowrap:last-child .dropdown {
        position: static !important;
    }
</style>
@endpush

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

    document.addEventListener('DOMContentLoaded', async function() {
    // Initialize ProductVariantMasterManager
    window.productVariantMasterManager = new ProductVariantMasterManager();

    // Initialize the manager properly with data loading
    await window.initializeProductVariantMasterManager();

    // New Product button click handler
    // document.getElementById('newProductButton')?.addEventListener('click', function() {
    //     window.ProductVariantMasterManager.openProductWizardOffcanvas();
    // });
});

document.addEventListener('DOMContentLoaded', function() {
    // Dynamic table height adjustment and overlay management
    const tbody = document.getElementById('variantTableBody');
    const overlay = document.getElementById('variantTableEmptyOverlay');
    const wrapper = document.querySelector('#variantManagementCard .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;

    // Initialize loading state
    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();
    }

    // Adjust table wrapper height based on viewport
    function adjustHeight() {
        const tableBodyWrapper = document.querySelector('#variantManagementCard .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 - 35);
        tableBodyWrapper.style.maxHeight = `${avail}px`;
        tableBodyWrapper.style.minHeight = `${avail}px`;
    }

    adjustHeight();
    window.addEventListener('resize', adjustHeight);

    // Check if table has renderable data
    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);
        });
    }

    // Sync overlay visibility with data state
    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');
        }
    }

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

    // Helper functions for external use
    window.showVariantsLoading = function() {
        if (wrapper) {
            wrapper.dataset.state = 'loading';
            loadingSince = Date.now();
            syncOverlay();
        }
    };
    window.showVariantsEmpty = function() {
        if (wrapper) {
            wrapper.dataset.state = 'empty';
            syncOverlay();
        }
    };

    // Filter button handlers
    document.getElementById('applyVariantFilters')?.addEventListener('click', function() {
        if (wrapper) {
            wrapper.dataset.state = 'loading';
            loadingSince = Date.now();
            syncOverlay();
        }
    });
    document.getElementById('clearVariantFilters')?.addEventListener('click', function() {
        if (wrapper) {
            wrapper.dataset.state = 'loading';
            loadingSince = Date.now();
            syncOverlay();
        }
    });
});
</script>
@endpush