@extends('layouts.app')

@section('content')
<style>
    thead th:hover {
     cursor: pointer;
}
thead {
  user-select: none;
}
</style>


   <div class="card shadow-none border">
                    <div class="card-header border-bottom bg-body p-2">
                      <div class="row justify-content-between align-items-center">
                        <div class="col-12 col-md">
                          <h4 class="text-body mb-0" data-anchor="data-anchor" id="basic-example"><i class="fa fa-box text-primary"></i> Product Masters<a class="anchorjs-link " aria-label="Anchor" data-anchorjs-icon="#" href="#basic-example" style="margin-left: 0.1875em; padding-right: 0.1875em; padding-left: 0.1875em;"></a></h4>
                        </div>
                        <div class="col col-md-auto">
                          <nav class="nav justify-content-end doc-tab-nav align-items-center" role="tablist">
                            <span>Total Count: <b id="total_count"></b></span>
                            {{-- <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#productModal" onclick="openProductModal()">
                                <i class="fas fa-plus"></i> Add Product
                            </button> --}}
                        </nav>
                        </div>
                      </div>
                    </div>

            <div class="card-body p-2">
        <div class="search-bar d-flex flex-wrap align-items-center gap-2 m-2">
            <div class="flex-grow-1 d-flex align-items-center">
                <input type="text" id="searchInput" class="form-control me-2" placeholder="Search by code, name, category, brand..." oninput="renderProductTable()">
                <select class="form-select me-2" style="width:180px;" id="statusFilter" onchange="renderProductTable()">
                    <option value="">Status: All</option>
                    <option value="ACTIVE">Active</option>
                    <option value="INACTIVE">Inactive</option>
                </select>
                <select class="form-select me-2" style="width:200px;" id="categoryFilter" onchange="renderProductTable()">
                    <option value="">Category: All</option>
                    <option value="ROLLER">Roller Blinds</option>
                    <option value="ZEBRA">Zebra Blinds</option>
                    <option value="TUBULAR">Tubular Motors</option>
                    <option value="PVC">PVC Raw</option>
                    <option value="CHAIN">Chains</option>
                </select>
            </div>
            <div>
            <button class="btn btn-primary btn-sm" data-bs-toggle="offcanvas" data-bs-target="#productWizardOffcanvas">
                <i class="fas fa-plus"></i> Add Product
            </button>

                {{-- <div class="btn-group">
                    <button class="btn btn-outline-secondary" onclick="setSort('name')">
                        Name
                    </button>
                    <button class="btn btn-outline-secondary" onclick="setSort('code')">
                        Code <span class="sort-icon" id="sortIcon-code"></span>
                    </button>
                    <button class="btn btn-outline-secondary" onclick="setSort('category')">
                        Category <span class="sort-icon" id="sortIcon-category"></span>
                    </button>
                </div> --}}
            </div>
        </div>

        <div class="table-responsive">
            <table class="table table-sm table-hover align-middle mt-3">
                <thead class="bg-light">
                    <tr>
                        <th style="width:10%;" onclick="setSort('code')">Code <span class="sort-icon" id="sortIcon-code"></span></th>
                        <th style="width:22%;" onclick="setSort('name')">Name <span class="sort-icon" id="sortIcon-name"></span></th>
                        <th style="width:15%;" onclick="setSort('category')">Category <span class="sort-icon" id="sortIcon-category"></span></th>
                        <th style="width:15%;">Brand</th>
                        <th style="width:10%;">Base Unit</th>
                        <th style="width:8%;">Status</th>
                        <th style="width:12%;">Created</th>
                        <th style="width:8%;">Actions</th>
                    </tr>
                </thead>
                <tbody id="productTableBody" style="font-size: 14px;"></tbody>
            </table>
        </div>
       </div>
    </div>

    <!-- Product Creation Wizard Offcanvas -->
    <div class="offcanvas offcanvas-end" tabindex="-1" id="productWizardOffcanvas" aria-labelledby="productWizardLabel" style="width: 60%;">
        <div class="offcanvas-header border-bottom">
            <h5 class="offcanvas-title" id="productWizardLabel">Create New Product</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <form id="productWizardForm">
                <!-- Wizard Navigation -->
                <div class="wizard-nav mb-3">
                    <ul class="nav nav-pills nav-justified">
                        <li class="nav-item">
                            <button type="button" class="nav-link active" data-step="1">
                                <i class="fas fa-info-circle me-2"></i>Basic Info
                            </button>
                        </li>
                        <li class="nav-item">
                            <button type="button" class="nav-link" data-step="2">
                                <i class="fas fa-list-ul me-2"></i>Attributes
                            </button>
                        </li>
                        <li class="nav-item">
                            <button type="button" class="nav-link" data-step="3">
                                <i class="fas fa-cubes me-2"></i>Variants
                            </button>
                        </li>
                        <li class="nav-item">
                            <button type="button" class="nav-link" data-step="4">
                                <i class="fas fa-eye me-2"></i>Preview
                            </button>
                        </li>
                    </ul>
                </div>

                <!-- Step 1: Basic Info -->
                <div class="wizard-step" id="step1">
                    <div class="card">
                        <div class="card-header bg-primary p-2">
                            <h5 class="text-white"><i class="fas fa-info-circle"></i> Basic Product Information</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Product Code <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="productCode" name="prodCode" required placeholder="e.g., RB_CONTROL_UNIT">
                                        <div class="form-text">Auto-generated based on category and name</div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Product Name <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="productName" name="prodName" required placeholder="e.g., Roller Control Unit">
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Category <span class="text-danger">*</span></label>
                                        <select class="form-select" name="prodCategory" id="category" required>
                                            <option value="">Select Category</option>
                                            <optgroup label="Roller Blinds">
                                                <option value="ROLLER">Roller Blinds</option>
                                            </optgroup>
                                            <optgroup label="Zebra Blinds">
                                                <option value="ZEBRA">Zebra Blinds</option>
                                            </optgroup>
                                            <optgroup label="Wooden Blinds">
                                                <option value="WOODEN">Wooden Blinds</option>
                                            </optgroup>
                                            <optgroup label="Roman Blinds">
                                                <option value="ROMAN">Roman Blinds</option>
                                            </optgroup>
                                            <optgroup label="Motors">
                                                <option value="TUBULAR">Tubular Motors</option>
                                                <option value="CURTAIN">Curtain Motors</option>
                                                <option value="REMOTE">Remote Controls</option>
                                            </optgroup>
                                            <optgroup label="Accessories">
                                                <option value="TAPE">Tapes & Strips</option>
                                                <option value="CHAIN">Chains</option>
                                            </optgroup>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Base Unit <span class="text-danger">*</span></label>
                                        <select class="form-select" name="prodUnit" id="baseUnit" required>
                                            <option value="">Select Unit</option>
                                            <option value="PCS">PCS (Pieces)</option>
                                            <option value="KG">KG (Kilograms)</option>
                                            <option value="MTR">MTR (Meters)</option>
                                            <option value="LTR">LTR (Liters)</option>
                                            <option value="SET">SET (Set)</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Brand</label>
                                        <input type="text" class="form-control" id="brand" name="prodBrand" placeholder="e.g., SSG, ErgoComfort">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Manufacturer</label>
                                        <input type="text" class="form-control" id="manufacturer" name="prodManufacturer" placeholder="e.g., SSG Industries">
                                    </div>
                                </div>
                            </div>

                            <div class="mb-3">
                                <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="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">SKU Pattern</label>
                                        <input type="text" class="form-control" 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-6">
                                    <div class="mb-3">
                                        <label class="form-label">Status</label>
                                        <select class="form-select" name="prodStatus" id="status">
                                            <option value="ACTIVE" selected>Active</option>
                                            <option value="INACTIVE">Inactive</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Step 2: Attributes -->
                <div class="wizard-step d-none" id="step2">
                    <div class="card">
                        <div class="card-header bg-primary p-2">
                            <h5 class="text-white"><i class="fas fa-tags"></i> Select Product Attributes</h5>
                        </div>
                        <div class="card-body">
                            <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>
                        </div>
                    </div>
                </div>

                <!-- Step 3: Variants -->
                <div class="wizard-step d-none" id="step3">
                    <div class="card">
                        <div class="card-header bg-primary  p-2">
                            <h5 class="text-white"><i class="fas fa-cogs"></i> Product Variants</h5>
                            {{-- <button type="button" class="btn btn-success" id="generateVariants"                                                                             >
                                <i class="fas fa-magic"></i> Generate Variants
                            </button> --}}
                        </div>
                        <div class="card-body">
                            <div class="alert alert-warning p-2">
                                <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 class="row">
                                <div class="col-md-6">
                                    <label class="form-label">Expected Variants Count</label>
                                    <div class="input-group mb-3">
                                        <input type="text" class="form-control" id="variantCount" name="variantCount" readonly>
                                        <span class="input-group-text p-0 border-0 pr-4">
                                            <button type="button" class="btn btn-success btn-sm" id="generateVariants"                                                                             >
                                            <i class="fas fa-magic"></i> Generate Variants
                                        </button>
                                       </span>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Currency</label>
                                        <select class="form-select" name="currency" id="currency">
                                            <option value="INR" selected>INR (₹)</option>
                                            <option value="USD">USD ($)</option>
                                            <option value="EUR">EUR (€)</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

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

                <!-- Step 4: Preview -->
                <div class="wizard-step d-none" id="step4">
                    <div class="card">
                        <div class="card-header bg-primary p-2">
                            <h5 class="text-white"><i class="fas fa-eye"></i> Product Preview</h5>
                        </div>
                        <div class="card-body">
                            <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>
                        </div>
                    </div>
                </div>

                <!-- Wizard Navigation Buttons -->
                <div class="wizard-buttons mt-4 d-flex gap-2">
                    <button type="button" class="btn btn-secondary" id="prevStep" disabled>Previous</button>
                    <button type="button" class="btn btn-primary" id="nextStep">Next</button>
                    <button type="submit" class="btn btn-success d-none" id="saveProduct">Save Product</button>
                </div>
            </form>
        </div>
    </div>


@endsection