@extends('layouts.app')

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

@section('content')

    <!-- Main Table Card -->
    <div class="card mb-3" id="productsTable">
        <div class="card-header  py-2">
            <div class="row flex-between-center">
                <div class="col-4 col-sm-auto d-flex align-items-center pe-0">
                    <h6 class="mb-0">Product Masters</h6>
                </div>
                <div class="col-8 col-sm-auto text-end ps-2">
                    <div class="d-none" id="table-products-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-products-replace-element">
                        @can('masters-product-management-product-masters.create')
                        <button class="btn btn-sm btn-primary" type="button" id="newProductButton">
                            <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-product-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="importSimpleProductsBtn">
                                    <i class="fas fa-box me-2"></i>Simple Products
                                </a></li>
                                <li><a class="dropdown-item" href="#" id="importProductsWithVariantsBtn">
                                    <i class="fas fa-boxes me-2"></i>Products with Variants
                                </a></li>
                            </ul>
                        </div>
                        @endcan
                        <button class="btn btn-falcon-default btn-sm mx-2" type="button" data-bs-toggle="collapse" data-bs-target="#productFilters" id="filterToggleBtn">
                            <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>
                            <span class="badge bg-primary ms-1 d-none" id="activeFiltersCount">0</span>
                        </button>
                        @can('masters-product-management-product-masters.export')
                        <div class="btn-group">
                            <button class="btn btn-falcon-default btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                <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>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="#" id="exportProductsWithVariants">
                                    <i class="fas fa-boxes me-2"></i>Products with Variants
                                </a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item" href="#" id="exportProductsSimple">
                                    <i class="fas fa-box me-2"></i>Products Only
                                </a></li>
                            </ul>
                        </div>
                        @endcan
                    </div>
                </div>
            </div>
        </div>

        <!-- Quick Filters (Collapsible) -->
        <div class="collapse" id="productFilters">
            <div class="card-body border-top py-2">
                <div class="row g-2 align-items-end">

                    <div class="col-auto">
                        <label class="form-label small mb-1">Category</label>
                        <select class="form-select form-select-sm" id="filterCategory">
                            <option value="">All Categories</option>
                        </select>
                    </div>
                    <div class="col-auto">
                        <label class="form-label small mb-1">Brand</label>
                        <select class="form-select form-select-sm" id="filterBrand">
                            <option value="">All Brands</option>
                        </select>
                    </div>
                    <div class="col-auto">
                        <label class="form-label small mb-1">Status</label>
                        <select class="form-select form-select-sm" id="filterStatus">
                            <option value="">All</option>
                            <option value="1">Active</option>
                            <option value="0">Inactive</option>
                        </select>
                    </div>
                     <div class="col-auto">
                        <label class="form-label small mb-1">Product Code</label>
                        <input class="form-control form-control-sm" id="filterProductCode" type="text" placeholder="Search code...">
                    </div>
                    <div class="col-auto">
                        <label class="form-label small mb-1">Product Name</label>
                        <input class="form-control form-control-sm" id="filterProductName" type="text" placeholder="Search name...">
                    </div>
                    <div class="col-auto">
                        <div class="d-flex gap-1">
                            <button class="btn btn-primary btn-sm me-2" type="button" id="applyProductMasterFilters" title="Apply Filters">
                                <i class="fas fa-search"></i> Apply
                            </button>
                            <button class="btn btn-outline-secondary btn-sm" type="button" id="clearProductMasterFilters" title="Clear Filters">
                                <i class="fas fa-times"></i> Clear
                            </button>
                        </div>
                    </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="productMastersTable">
                    <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:10%;" onclick="setSort('code')">Code <span class="sort-icon" id="sortIcon-code"></span></th>
                            <th class="text-900 align-middle white-space-nowrap" style="width:22%;" onclick="setSort('name')">Name <span class="sort-icon" id="sortIcon-name"></span></th>
                            <th class="text-900 align-middle white-space-nowrap" style="width:15%;" onclick="setSort('category')">Category <span class="sort-icon" id="sortIcon-category"></span></th>
                            <th class="text-900 align-middle white-space-nowrap" style="width:15%;">Product Type</th>
                            <th class="text-900 align-middle white-space-nowrap" style="width:10%;">Brand</th>
                            <th class="text-900 align-middle white-space-nowrap" style="width:10%;">Base Unit</th>
                            <th class="text-900 align-middle white-space-nowrap" style="width:8%;">Status</th>
                            <th class="text-900 align-middle white-space-nowrap" style="width:17%;">Created On</th>
                            @canany(['masters-product-management-product-masters.update','masters-product-management-product-masters.delete'])
                            <th class="text-900 align-middle white-space-nowrap text-center" style="width:8%;">Actions</th>
                            @endcanany
                        </tr>
                    </thead>
                    <tbody id="productTableBody">
                        <tr>
                            <td colspan="9" class="text-center py-4">
                                <div class="spinner-border spinner-border-sm text-primary" role="status">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
                                <p class="mb-0 mt-2 text-muted">Loading products...</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div id="productsEmptyOverlay" 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 products...</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 products found</div>
                        <small class="text-muted">Try adjusting your filters or add new products</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>


<!-- Product Creation Wizard Offcanvas -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="productWizardOffcanvas" aria-labelledby="productWizardOffcanvasLabel" style="width: 50%;">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="productWizardOffcanvasLabel">Add New Product</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">Basic Info</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">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-cogs"></span>
                    </span>
                </span>
                <span class="d-none d-md-block mt-1 fs-10">Variant Generation</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 overflow-auto 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
                <div class="row">
                <div class="col-md-6">
                    <div class="">
                        <label class="form-label">Product Code <span class="text-danger">*</span></label>
                        <input type="text" class="form-control form-control-sm" id="productCode" name="prodCode" required placeholder="e.g., RB_CONTROL_UNIT">
                        <div class="invalid-feedback">Please enter an product code.</div>
                        <div class="form-text">Auto-generated based on category and name</div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="">
                        <label class="form-label">Product Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control form-control-sm" id="productName" name="prodName" required placeholder="e.g., Roller Control Unit">
                        <div class="invalid-feedback">Please enter an product name.</div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="">
                        <label class="form-label">Category <span class="text-danger">*</span></label>
                        <select class="form-select form-select-sm" name="prodCategory" id="category" required>
                            <option value="">Select Category</option>
                            <!-- Categories will be loaded dynamically from database -->
                        </select>
                        <div class="invalid-feedback">Please select an category.</div>
                    </div>
                </div>
                <div class="col-md-6">
                       <div class="">
                            <label class="form-label">Product Type <span class="text-danger">*</span></label>
                            <select class="form-select form-select-sm" id="productType" required>
                                <option value="">Select Product Type</option>
                            </select>
                            <div class="invalid-feedback">Please select an product type.</div>
                        </div>


                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="">
                        <label class="form-label">HSN Code <span class="text-danger">*</span></label>
                        <select class="form-select form-select-sm" name="hsnCode" id="hsnCode" required>
                            <option value="">Select HSN Code</option>
                            <!-- HSN codes will be loaded dynamically -->
                            <option value="1">84219900 - Machinery Parts</option>
                            <option value="2">63039290 - Textile Articles</option>
                            <option value="3">84818099 - Other Taps, Cocks, Valves</option>
                        </select>
                        <div class="invalid-feedback">Please select an HSN code.</div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="">
                        <label class="form-label">Brand </label>
                        <select class="form-select form-select-sm" id="brand" name="prodBrand" required>
                            <option value="">Select Brand</option>
                            <!-- Brands will be loaded dynamically from database -->
                        </select>
                        <div class="invalid-feedback">Please select a brand.</div>
                    </div>

                </div>
            </div>

            <!-- UOM Settings -->
            <div class="row mt-2">
                   <div class="col-md-6">
                        <div class="">
                        <label class="form-label">Base Unit <span class="text-danger">*</span></label>
                        <select class="form-select form-select-sm" name="prodUnit" id="baseUnit" required>
                            <option value="">Select Unit</option>
                            <!-- Units will be loaded dynamically from database -->
                        </select>
                        <div class="invalid-feedback">Please select an base unit.</div>
                    </div>

                </div>
                <div class="col-md-6">
                    <div>
                        <label class="form-label">Allowed UOMs <span class="text-danger">*</span></label>
                        <select class="form-select js-choice" id="allowedUoms" multiple="multiple" size="1" name="organizerMultiple" data-options='{"removeItemButton":true,"placeholder":true}'>
                            <!-- Options loaded dynamically -->
                        </select>
                        <div class="invalid-feedback">Please select an allowed UOM.</div>
                        <div class="form-text">Tip: Click to toggle options (no need to hold Ctrl/Command).</div>
                    </div>

                    {{-- <!-- Manage Conversions Button -->
                    <div class="mt-3">
                        <button type="button" class="btn btn-outline-primary btn-sm w-100" id="btnManageConversions"
                                data-product-context="wizard">
                            <i class="fas fa-exchange-alt"></i> Manage Conversion Rules
                        </button>
                        <div class="form-text">Create and manage UOM conversion rules for this product</div>
                    </div> --}}

                </div>

            </div>



            <!-- Contextual Allowed UOMs -->
            <div class="row mt-2 border-top pt-3">
                <div class="col-12">
                    <label class="form-label">Contextual Allowed UOMs</label>
                    <div class="row g-2">
                        <div class="col-md-6">
                            <label class="form-label small text-700">Purchasing Allowed UOMs</label>
                            <select class="form-select" id="ctxAllowedUoms_purchase" multiple></select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small text-700">Sales Allowed UOMs</label>
                            <select class="form-select" id="ctxAllowedUoms_sales" multiple></select>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label small text-700">Manufacturing Allowed UOMs</label>
                            <select class="form-select" id="ctxAllowedUoms_manufacturing" multiple></select>
                        </div>

                    </div>
                    <div class="form-text">Leave empty to inherit from "Allowed UOMs". These lists restrict selectable UOMs per document context.</div>
                </div>
            </div>

            <div class="row border-top pt-3 mt-3">
                <div class="col-md-4">
                    <div class="">
                        <label class="form-label">Breakdown Unit</label>
                        <select class="form-select form-select-sm" id="breakdownUnit" name="breakdownUnit">
                            <option value="">Select Breakdown Unit</option>
                        </select>
                        <div class="form-text">Unit for quantity breakdown (optional)</div>
                    </div>
                    <div class="mt-2">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="autoGenerateReferenceNumber" name="autoGenerateReferenceNumber" value="1">
                            <label class="form-check-label" for="autoGenerateReferenceNumber">
                                Auto generate reference number
                            </label>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="">
                        <label class="form-label">SKU Pattern</label>
                        <input type="text" class="form-control form-control-sm" id="skuPattern" name="skuPattern" placeholder="e.g., RB-38CU-{COLOR}" readonly>
                        <div class="form-text">Auto-generated based on category and attributes</div>
                    </div>
                </div>

                  <div class="col-md-4">
                    <div class="">
                        <label class="form-label">Manufacturer</label>
                        <input type="text" class="form-control form-control-sm" id="manufacturer" name="prodManufacturer" placeholder="e.g., SSG Industries">
                      </div>
                    </div>


                <div class="col-md-4">
                    <div class="">
                        <label class="form-label">Status</label>
                        <select class="form-select form-select-sm" name="prodStatus" id="status">
                            <option value="ACTIVE" selected>Active</option>
                            <option value="INACTIVE">Inactive</option>
                        </select>
                    </div>
                </div>
            </div>
                    <div class="">
                <label class="form-label">Product Description</label>
                <textarea class="form-control" name="prodDescription" id="description"  rows="3" placeholder="Detailed description of the product"></textarea>
            </div>

                <div class="alert alert-warning p-2 d-none" 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>

        <!-- 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-xl">
                <div class="modal-content">
                    <div class="modal-header bg-warning bg-opacity-10">
                        <h5 class="modal-title">
                            <i class="fas fa-plus-circle me-2"></i>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">
                            <!-- Left Column: Basic Fields -->
                            <div class="col-md-6">
                                <div class="card border">
                                    <div class="card-header bg-light">
                                        <h6 class="mb-0 small fw-semibold">Basic Settings</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="mb-3">
                                            <label class="form-label small fw-semibold">From UOM <span class="text-danger">*</span></label>
                                            <select class="form-select form-select-sm" id="newRuleFrom" required></select>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label small fw-semibold">To UOM <span class="text-danger">*</span></label>
                                            <select class="form-select form-select-sm" id="newRuleTo" required></select>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label small fw-semibold">Conversion Type <span class="text-danger">*</span></label>
                                            <select class="form-select form-select-sm" id="newRuleType" required>
                                                <option value="factor">Factor (qty × factor)</option>
                                                <option value="affine">Affine (qty × factor + offset)</option>
                                                <option value="formula">Formula (custom expression)</option>
                                            </select>
                                            <div class="form-text">
                                                <small>
                                                    <strong>Factor:</strong> Simple multiplication<br>
                                                    <strong>Affine:</strong> Linear transformation<br>
                                                    <strong>Formula:</strong> Custom calculation with variables
                                                </small>
                                            </div>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label small fw-semibold">Rule Name (Optional)</label>
                                            <input type="text" class="form-control form-control-sm" id="newRuleName" placeholder="e.g., Roll width × qty" />
                                            <div class="form-text">Optional display name for this rule</div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Right Column: Type-Specific Fields -->
                            <div class="col-md-6">
                                <div class="card border">
                                    <div class="card-header bg-light">
                                        <h6 class="mb-0 small fw-semibold">Conversion Parameters</h6>
                                    </div>
                                    <div class="card-body">
                                        <!-- Factor Field -->
                                        <div class="mb-3" data-role="factor">
                                            <label class="form-label small fw-semibold">Multiply Factor <span class="text-danger">*</span></label>
                                            <input type="number" step="0.0001" class="form-control form-control-sm" id="newRuleFactor" placeholder="e.g., 12" />
                                            <div class="form-text">Result = qty × factor</div>
                                        </div>

                                        <!-- Offset Field (Affine only) -->
                                        <div class="mb-3" data-role="offset" style="display:none;">
                                            <label class="form-label small fw-semibold">Offset <span class="text-danger">*</span></label>
                                            <input type="number" step="0.0001" class="form-control form-control-sm" id="newRuleOffset" placeholder="e.g., 32" />
                                            <div class="form-text">Result = (qty × factor) + offset</div>
                                        </div>

                                        <!-- Formula Fields -->
                                        <div data-role="formula" style="display:none;">
                                            <div class="mb-3">
                                                <label class="form-label small fw-semibold">Formula Expression <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control form-control-sm font-monospace" id="newRuleExpr" placeholder="e.g., qty * WIDTH" oninput="updateFormulaPreview()" />
                                                <div class="form-text">Use <code>qty</code> for quantity, variable names in UPPERCASE</div>
                                            </div>

                                            <div class="mb-3">
                                                <label class="form-label small fw-semibold">Formula Templates</label>
                                                <select class="form-select form-select-sm" id="newRuleFormulaTemplate" onchange="applyFormulaTemplate()">
                                                    <option value="">-- Choose a template --</option>
                                                    <option value="qty * WIDTH">qty × WIDTH</option>
                                                    <option value="qty * LENGTH">qty × LENGTH</option>
                                                    <option value="qty * WIDTH * LENGTH">qty × WIDTH × LENGTH</option>
                                                    <option value="qty * (WIDTH * LENGTH)">qty × (WIDTH × LENGTH)</option>
                                                    <option value="qty * (WIDTH * LENGTH * HEIGHT)">qty × (WIDTH × LENGTH × HEIGHT)</option>
                                                    <option value="qty / WIDTH">qty ÷ WIDTH</option>
                                                    <option value="qty * WEIGHT">qty × WEIGHT</option>
                                                </select>
                                            </div>

                                            <div class="mb-3">
                                                <label class="form-label small fw-semibold">Insert Token</label>
                                                <div class="input-group input-group-sm">
                                                    <select class="form-select" id="newRuleToken">
                                                        <option value="">-- Select token --</option>
                                                        <option value="qty">qty</option>
                                                        <option value="WIDTH">WIDTH</option>
                                                        <option value="LENGTH">LENGTH</option>
                                                        <option value="HEIGHT">HEIGHT</option>
                                                        <option value="WEIGHT">WEIGHT</option>
                                                        <option value=" + ">+</option>
                                                        <option value=" - ">-</option>
                                                        <option value=" * ">×</option>
                                                        <option value=" / ">÷</option>
                                                        <option value=" ^ ">^</option>
                                                        <option value="(">(</option>
                                                        <option value=")">)</option>
                                                    </select>
                                                    <button type="button" class="btn btn-outline-secondary" onclick="insertFormulaToken()">
                                                        <i class="fas fa-plus"></i> Insert
                                                    </button>
                                                </div>
                                            </div>

                                            <div class="mb-3">
                                                <label class="form-label small fw-semibold">Variables Used (Auto-detected)</label>
                                                <input type="text" class="form-control form-control-sm font-monospace" id="newRuleVars" placeholder="WIDTH, LENGTH" readonly />
                                                <div class="form-text">Automatically extracted from formula (except <code>qty</code>)</div>
                                            </div>

                                            <div class="alert alert-info alert-sm p-2 mb-0">
                                                <div class="d-flex align-items-start">
                                                    <i class="fas fa-info-circle me-2 mt-1"></i>
                                                    <div>
                                                        <strong>Formula Preview:</strong>
                                                        <div id="newRuleFormulaPreview" class="font-monospace mt-1 p-2 bg-light border rounded">—</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Advanced Options (Full Width) -->
                            <div class="col-12">
                                <div class="card border">
                                    <div class="card-header bg-light">
                                        <h6 class="mb-0 small fw-semibold">
                                            <i class="fas fa-cog me-1"></i>Advanced Options (Optional)
                                        </h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="row g-3">
                                            <div class="col-md-4">
                                                <label class="form-label small fw-semibold">Rounding Override</label>
                                                <select class="form-select form-select-sm" id="newRuleRounding">
                                                    <option value="">-- None (default) --</option>
                                                    <option value="nearest">Nearest</option>
                                                    <option value="up">Up (Ceiling)</option>
                                                    <option value="down">Down (Floor)</option>
                                                </select>
                                                <div class="form-text">Override default rounding behavior</div>
                                            </div>
                                            <div class="col-md-4">
                                                <label class="form-label small fw-semibold">Min Increment Override</label>
                                                <input type="number" step="0.0001" class="form-control form-control-sm" id="newRuleIncrement" placeholder="e.g., 0.01" />
                                                <div class="form-text">Minimum increment for rounding (e.g., 0.01 for 2 decimals)</div>
                                            </div>
                                            <div class="col-md-4">
                                                <label class="form-label small fw-semibold">Scope</label>
                                                <select class="form-select form-select-sm" id="newRuleScope">
                                                    <option value="item">Item (This Product Only)</option>
                                                    <option value="item_group">Item Group (Same Category)</option>
                                                    <option value="global">Global (All Products)</option>
                                                </select>
                                                <div class="form-text">Rule applicability scope</div>
                                            </div>
                                            <div class="col-12">
                                                <label class="form-label small fw-semibold">Notes</label>
                                                <textarea class="form-control form-control-sm" id="newRuleNotes" rows="2" placeholder="Optional notes or description"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </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="createRuleSave">
                            <i class="fas fa-save me-1"></i>Save Conversion Rule
                        </button>
                    </div>
                </div>
            </div>
        </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>

<!-- Product Import Modal -->
<div class="modal fade" id="productImportModal" tabindex="-1" aria-labelledby="productImportModalLabel" 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="productImportModalLabel">
                    <i class="fas fa-file-excel me-2"></i><span id="importModalTitle">Import Products from Excel</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-box me-1"></i>Simple Products
                    </span>
                </div>

                <!-- Step 1: Download Template -->
                <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 product 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>

                <!-- Step 2: Upload File -->
                <form id="productImportForm" 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 product 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 products
                                </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>

                    <!-- Preview Area -->
                    <div id="importPreview" class="d-none">
                        <h6 class="mb-2"><i class="fas fa-eye me-1"></i>Import Preview</h6>
                        <div class="table-responsive" style="max-height: 300px;">
                            <table class="table table-sm table-bordered">
                                <thead class="table-light">
                                    <tr id="previewHeaders"></tr>
                                </thead>
                                <tbody id="previewBody"></tbody>
                            </table>
                        </div>
                        <div class="alert alert-warning border-0 mt-2" role="alert">
                            <small><i class="fas fa-exclamation-triangle me-1"></i>Showing first 5 rows for preview</small>
                        </div>
                    </div>

                    <!-- Progress Bar -->
                    <div id="importProgress" class="d-none">
                        <div class="d-flex justify-content-between mb-2">
                            <span class="text-muted">Importing products...</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%">
                                <span id="progressCount">0 / 0</span>
                            </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-primary" id="previewImportBtn">
                    <i class="fas fa-eye me-1"></i>Preview Data
                </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>

<!-- View Product Details Offcanvas -->
<div class="offcanvas offcanvas-end" id="productViewOffcanvas" tabindex="-1" aria-labelledby="productViewOffcanvasLabel" style="width: 600px;">
    <div class="offcanvas-header border-bottom bg-white">
        <div class="w-100">
            <div class="d-flex justify-content-between align-items-start">
                <div>
                    <h6 class="offcanvas-title mb-1 text-dark" id="productViewOffcanvasLabel">
                        <i class="fas fa-box me-2 text-primary"></i>Product Details
                    </h6>
                    <!-- Product Name and Code Header -->
                    <div class="product-header-info mt-2" id="productHeaderInfo" style="display: none;">
                        <div class="text-muted small mb-1" id="view_product_name_header">-</div>
                        <div class="d-flex align-items-center gap-2">
                            <span class="badge bg-light text-dark border" id="view_product_code_header">-</span>
                            <span id="view_status_badge_header"></span>
                        </div>
                    </div>
                </div>
                <div class="d-flex align-items-center gap-2">
                    @can('masters-product-management-product-masters.update')
                    <button type="button" class="btn btn-outline-primary btn-sm" id="viewEditProductBtn" title="Edit Product">
                        <i class="fas fa-edit"></i>
                    </button>
                    @endcan
                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                </div>
            </div>
        </div>
    </div>
    <div class="offcanvas-body p-0">
        <!-- Loading State -->
        <div id="viewProductLoading" class="text-center py-5">
            <div class="spinner-border text-secondary mb-3" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
            <p class="text-muted mb-0">Loading product details...</p>
        </div>

        <!-- Error State -->
        <div id="viewProductError" class="alert alert-danger m-3 d-none" role="alert">
            <i class="fas fa-exclamation-triangle me-2"></i>
            <span id="viewProductErrorMessage">Failed to load product details</span>
        </div>

        <!-- Product Details Content -->
        <div id="viewProductContent" class="d-none">
            <!-- Tabs Navigation -->
            <ul class="nav nav-tabs border-bottom bg-white px-3" id="productViewTabs" role="tablist" style="position: sticky; top: 0; z-index: 100;">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="view-basic-tab" data-bs-toggle="tab" data-bs-target="#view-basic" type="button" role="tab">
                        <i class="fas fa-info-circle me-1 text-primary"></i>Basic Info
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="view-attributes-tab" data-bs-toggle="tab" data-bs-target="#view-attributes" type="button" role="tab">
                        <i class="fas fa-tags me-1 text-info"></i>Attributes
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="view-variants-tab" data-bs-toggle="tab" data-bs-target="#view-variants" type="button" role="tab">
                        <i class="fas fa-boxes me-1 text-purple"></i>Variants <span class="badge bg-secondary ms-1" id="view_variants_count">0</span>
                    </button>
                </li>
            </ul>

            <!-- Tabs Content -->
            <div class="tab-content p-3" id="productViewTabsContent">
                <!-- Basic Information Tab -->
                <div class="tab-pane fade show active" id="view-basic" role="tabpanel">
                    <!-- Main Card with Header -->
                    <div class="card border shadow-sm">
                        <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>Product Information
                                </h6>
                                <span id="view_status_badge" 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 text-primary"></i>Product Code
                                    </label>
                                    <p id="view_basic_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 text-success"></i>Product Name
                                    </label>
                                    <p id="view_basic_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 text-info"></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="view_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="view_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="view_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="view_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 text-secondary"></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="view_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="view_hsn_code" class="mb-0">-</p>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label text-muted mb-1 small">Has Variants</label>
                                        <p id="view_has_variants" class="mb-0">-</p>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label text-muted mb-1 small">Breakdown Unit</label>
                                        <p id="view_breakdown_unit" class="mb-0">-</p>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label text-muted mb-1 small">Auto Generate Reference Number</label>
                                        <p id="view_auto_generate_ref" class="mb-0">-</p>
                                    </div>
                                    <div class="col-12">
                                        <label class="form-label text-muted mb-1 small">SKU Pattern</label>
                                        <p class="mb-0"><code class="small bg-light px-2 py-1 rounded" id="view_sku_pattern">-</code></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 text-warning"></i>Allowed Units of Measure
                                </h6>
                                <div class="bg-light rounded p-2">
                                    <div id="view_allowed_uoms" class="d-flex flex-wrap gap-2">
                                        <span class="badge bg-secondary small">Loading...</span>
                                    </div>
                                </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 text-purple"></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 text-primary"></i>Purchase
                                            </label>
                                            <div id="view_ctx_purchase_uoms" class="d-flex flex-wrap gap-1">
                                                <span class="badge bg-light text-dark small">None</span>
                                            </div>
                                        </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 text-success"></i>Sales
                                            </label>
                                            <div id="view_ctx_sales_uoms" class="d-flex flex-wrap gap-1">
                                                <span class="badge bg-light text-dark small">None</span>
                                            </div>
                                        </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 text-info"></i>Manufacturing
                                            </label>
                                            <div id="view_ctx_mfg_uoms" class="d-flex flex-wrap gap-1">
                                                <span class="badge bg-light text-dark small">None</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

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

                            <!-- Metadata Section -->
                            <div class="border-top pt-3">
                                <h6 class="text-muted mb-2 small fw-semibold text-uppercase">
                                    <i class="fas fa-clock me-1 text-muted"></i>Metadata
                                </h6>
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label class="form-label text-muted mb-1 small">
                                            <i class="fas fa-calendar-plus me-1 text-success"></i>Created At
                                        </label>
                                        <p id="view_created_at" class="small mb-0">-</p>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label text-muted mb-1 small">
                                            <i class="fas fa-calendar-check me-1 text-info"></i>Updated At
                                        </label>
                                        <p id="view_updated_at" class="small mb-0">-</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Attributes Tab -->
                <div class="tab-pane fade" id="view-attributes" role="tabpanel">
                    <div id="view_attributes_content">
                        <div class="card border">
                            <div class="card-body text-center py-4">
                                <i class="fas fa-tags fa-2x text-info mb-2"></i>
                                <p class="text-muted mb-0">No attributes configured</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Variants Tab -->
                <div class="tab-pane fade" id="view-variants" role="tabpanel">
                    <div id="view_variants_content">
                        <div class="card border">
                            <div class="card-body text-center py-4">
                                <i class="fas fa-boxes fa-2x text-purple mb-2"></i>
                                <p class="text-muted mb-0">No variants configured</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

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

<style>
    /* Product View Offcanvas */
    #productViewOffcanvas .info-item {
        padding: 0.5rem 0;
        border-bottom: 1px solid #f0f0f0;
    }

    #productViewOffcanvas .info-item:last-child {
        border-bottom: none;
    }

    #productViewOffcanvas .badge {
        font-weight: 500;
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }

    /* Compact filter styles */
    #productFilters .form-label {
        font-size: 0.75rem;
        font-weight: 600;
        color: #6c757d;
        margin-bottom: 0.25rem;
    }

    #productFilters .form-control-sm,
    #productFilters .form-select-sm {
        font-size: 0.85rem;
        padding: 0.375rem 0.5rem;
    }

    /* Filter button active state */
    #filterToggleBtn.btn-primary {
        background-color: #0d6efd;
        border-color: #0d6efd;
        color: white;
    }

    /* Filter transition */
    #productFilters {
        transition: all 0.3s ease;
    }

    /* Badge styling */
    #activeFiltersCount {
        font-size: 0.65rem;
        line-height: 1;
        padding: 0.2em 0.4em;
    }

    /* Table Row Hover */
    #productMastersTable tbody tr:hover {
        background-color: #f8f9fc !important;
    }

    /* Table wrapper for sticky header */
    .table-body-wrapper {
        overflow-x: auto;
        overflow-y: auto;
    }

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

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

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

    /* Dropdown menu positioning */
    #productMastersTable .dropdown-menu {
        z-index: 2001 !important;
    }

    /* Keep the row above other hovered rows while dropdown is open */
    #productMastersTable tbody tr.pm-dropdown-open {
        z-index: 2000 !important;
    }

    #productMastersTable tbody tr.pm-dropdown-open td {
        position: relative;
        z-index: 2000;
    }
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    // Move modals to body to avoid being constrained by parents with transforms/positioning
    ['conversionModal','createRuleModal'].forEach(id => {
        const el = document.getElementById(id);
        if (el && el.parentNode !== document.body) {
            document.body.appendChild(el);
        }
    });

    // ===================================================================
    // Dynamic table height adjustment for sticky header
    // ===================================================================
     const tbody = document.getElementById('productTableBody');
        const overlay = document.getElementById('productsEmptyOverlay');
        const wrapper = document.querySelector('#productsTable .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 adjustHeight(){
            const tableBodyWrapper = document.querySelector('#productsTable .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);
        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 });
        window.showProductsLoading = function(){ if (wrapper) { wrapper.dataset.state = 'loading'; loadingSince = Date.now(); syncOverlay(); } };
        window.showProductsEmpty = function(){ if (wrapper) { wrapper.dataset.state = 'empty'; syncOverlay(); } };
    document.getElementById('applyProductMasterFilters')?.addEventListener('click', function(){ if (wrapper) { wrapper.dataset.state = 'loading'; loadingSince = Date.now(); syncOverlay(); } });
    document.getElementById('clearProductMasterFilters')?.addEventListener('click', function(){ if (wrapper) { wrapper.dataset.state = 'loading'; loadingSince = Date.now(); syncOverlay(); } });

    // ================================================================
    // Dropdown z-index fix: keep the trigger row elevated while open
    // (prevents adjacent row hover backgrounds from overlapping menu)
    // ================================================================
    document.addEventListener('shown.bs.dropdown', function (event) {
        const dropdown = event?.target;
        const tr = dropdown?.closest ? dropdown.closest('#productMastersTable tbody tr') : null;
        if (tr) tr.classList.add('pm-dropdown-open');
    });

    document.addEventListener('hidden.bs.dropdown', function (event) {
        const dropdown = event?.target;
        const tr = dropdown?.closest ? dropdown.closest('#productMastersTable tbody tr') : null;
        if (tr) tr.classList.remove('pm-dropdown-open');
    });
});
</script>
<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 src="{{ asset('assets/js/custom/product_management/product_master.js') }}"></script> --}}
<script>
document.addEventListener('DOMContentLoaded', async function() {
    // Initialize ProductMasterManager
    window.productMasterManager = new ProductMasterManager();

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

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

    // Export Products with Variants button handler
    document.getElementById('exportProductsWithVariants')?.addEventListener('click', function(e) {
        e.preventDefault();
        exportProductsWithVariants();
    });

    // Export Products Simple button handler
    document.getElementById('exportProductsSimple')?.addEventListener('click', function(e) {
        e.preventDefault();
        showAlert('Simple product export feature coming soon', 'info');
    });
});

/**
 * Export products with variants by category
 */
function exportProductsWithVariants() {
    // Get current filters
    const filters = {
        category_id: document.getElementById('filterCategory')?.value || '',
        brand_id: document.getElementById('filterBrand')?.value || '',
        product_type: document.getElementById('filterProductType')?.value || '',
        is_active: document.getElementById('filterStatus')?.value || '',
        search: document.getElementById('filterProductName')?.value || document.getElementById('filterProductCode')?.value || ''
    };

    // Build query string
    const queryParams = new URLSearchParams();
    Object.keys(filters).forEach(key => {
        if (filters[key]) {
            queryParams.append(key, filters[key]);
        }
    });

    // Build export URL
    const exportUrl = '{{ route("product.masters.export.variants") }}' + (queryParams.toString() ? '?' + queryParams.toString() : '');

    // Show loading state
    const originalText = document.getElementById('exportProductsWithVariants').innerHTML;
    document.getElementById('exportProductsWithVariants').innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Exporting...';
    document.getElementById('exportProductsWithVariants').style.pointerEvents = 'none';

    // Create hidden iframe for download
    const iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    iframe.src = exportUrl;
    document.body.appendChild(iframe);

    // Reset button after delay
    setTimeout(() => {
        document.getElementById('exportProductsWithVariants').innerHTML = originalText;
        document.getElementById('exportProductsWithVariants').style.pointerEvents = 'auto';
        document.body.removeChild(iframe);

        // Show success message
        if (typeof Swal !== 'undefined') {
            Swal.fire({
                icon: 'success',
                title: 'Export Started',
                text: 'Your file will download shortly',
                timer: 2000,
                showConfirmButton: false
            });
        } else if (typeof showAlert === 'function') {
            showAlert('Export started successfully', 'success');
        }
    }, 2000);
}

// ===================================================================
// Formula Builder Helper Functions (for Create Rule Modal)
// ===================================================================
function insertAtCursor(input, text) {
    const start = input.selectionStart ?? input.value.length;
    const end = input.selectionEnd ?? input.value.length;
    const before = input.value.substring(0, start);
    const after = input.value.substring(end);
    input.value = before + text + after;
    const newPos = start + text.length;
    input.setSelectionRange(newPos, newPos);
    input.focus();
}

function insertFormulaToken() {
    const tok = document.getElementById('newRuleToken').value;
    if (!tok) return;
    const input = document.getElementById('newRuleExpr');
    insertAtCursor(input, tok);
    updateFormulaPreview();
}

function extractVarsFromFormula(expr) {
    if (!expr) return [];
    const ids = Array.from((expr.match(/[A-Za-z_][A-Za-z0-9_]*/g) || []));
    return Array.from(new Set(ids.map(s => s.toUpperCase()).filter(v => v !== 'QTY')));
}

function applyFormulaTemplate() {
    const tpl = document.getElementById('newRuleFormulaTemplate').value;
    if (!tpl) return;
    document.getElementById('newRuleExpr').value = tpl;
    const vars = extractVarsFromFormula(tpl);
    document.getElementById('newRuleVars').value = vars.join(', ');
    updateFormulaPreview();
}

function updateFormulaPreview() {
    const expr = document.getElementById('newRuleExpr').value || '';
    const box = document.getElementById('newRuleFormulaPreview');
    if (box) box.textContent = expr || '—';

    // Auto-update variables
    const vars = extractVarsFromFormula(expr);
    document.getElementById('newRuleVars').value = vars.join(', ');
}
</script>
@endpush