@extends('layouts.app')

@section('content')
<style>
    thead th:hover {
        cursor: pointer;
    }
    thead {
        user-select: none;
    }
    .stock-good { color: #28a745; }
    .stock-low { color: #ffc107; }
    .stock-out { color: #dc3545; }
    .stock-badge {
        font-size: 0.75em;
        padding: 0.25em 0.5em;
        border-radius: 0.375rem;
    }
</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-cubes text-primary"></i> Product Variants
                    <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">0</b></span>
                </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 SKU, variant name, product..." oninput="renderVariantTable()">
                <select class="form-select me-2" style="width:180px;" id="statusFilter" onchange="renderVariantTable()">
                    <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="stockFilter" onchange="renderVariantTable()">
                    <option value="">Stock: All</option>
                    <option value="good">Good Stock</option>
                    <option value="low">Low Stock</option>
                    <option value="out">Out of Stock</option>
                </select>
            </div>
            <div>
                <button class="btn btn-primary btn-sm" data-bs-toggle="offcanvas" data-bs-target="#variantWizardOffcanvas">
                    <i class="fas fa-plus"></i> Add Variant
                </button>
            </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:12%;" onclick="setSort('sku')">SKU <span class="sort-icon" id="sortIcon-sku"></span></th>
                        <th style="width:18%;">Product</th>
                        <th style="width:15%;" onclick="setSort('category')">Category <span class="sort-icon" id="sortIcon-category"></span></th>
                        <th style="width:15%;" onclick="setSort('variant_name')">Variant <span class="sort-icon" id="sortIcon-variant_name"></span></th>
                        <th style="width:8%;">Unit</th>
                        <th style="width:12%;" onclick="setSort('current_stock')">Stock <span class="sort-icon" id="sortIcon-current_stock"></span></th>
                        <th style="width:8%;">Status</th>
                        <th style="width:12%;">Actions</th>
                    </tr>
                </thead>
                <tbody id="variantTableBody" style="font-size: 14px;"></tbody>
            </table>
        </div>
    </div>
</div>

<!-- Variant Creation Wizard Offcanvas -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="variantWizardOffcanvas" aria-labelledby="variantWizardLabel" style="width: 50%;">
    <div class="offcanvas-header border-bottom">
        <h5 class="offcanvas-title" id="variantWizardLabel">
            <i class="fas fa-cubes"></i> Create New Variant
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <div class="card">
            <div class="card-body">
                <form id="variantForm">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">SKU <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="variantSku" placeholder="e.g. RB-38CU-WH" maxlength="50" required>
                                <small class="form-text text-muted">Unique SKU code for this variant</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Product <span class="text-danger">*</span></label>
                                <select class="form-select" id="productId" required>
                                    <option value="">Select Product</option>
                                    <!-- Will be populated via AJAX -->
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Variant Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="variantName" placeholder="e.g. White" maxlength="255" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Unit <span class="text-danger">*</span></label>
                                <select class="form-select" id="variantUnit" required>
                                    <option value="">Select Unit</option>
                                    <option value="PCS">PCS</option>
                                    <option value="KG">KG</option>
                                    <option value="METER">METER</option>
                                    <option value="LITER">LITER</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Full Name</label>
                        <input type="text" class="form-control" id="fullName" placeholder="Auto-generated or custom">
                        <small class="form-text text-muted">Will be auto-generated if left empty</small>
                    </div>

                    <hr>
                    <h6 class="text-primary">Pricing Information</h6>

                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">Purchase Price <span class="text-danger">*</span></label>
                                <input type="number" class="form-control" id="purchasePrice" step="0.01" min="0" required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">Selling Price <span class="text-danger">*</span></label>
                                <input type="number" class="form-control" id="sellingPrice" step="0.01" min="0" required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">Currency <span class="text-danger">*</span></label>
                                <select class="form-select" id="currency" required>
                                    <option value="INR">INR</option>
                                    <option value="USD">USD</option>
                                    <option value="EUR">EUR</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <hr>
                    <h6 class="text-primary">Inventory Information</h6>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Current Stock <span class="text-danger">*</span></label>
                                <input type="number" class="form-control" id="currentStock" step="0.001" min="0" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Minimum Stock <span class="text-danger">*</span></label>
                                <input type="number" class="form-control" id="minimumStock" step="0.001" min="0" required>
                            </div>
                        </div>
                    </div>

                    <div class="d-flex justify-content-between align-items-center">
                        <div class="form-check form-switch mb-3">
                            <input class="form-check-input" type="checkbox" id="isActive" checked>
                            <label class="form-check-label" for="isActive">Active</label>
                        </div>
                    </div>

                    <hr>
                    <div class="d-flex justify-content-between align-items-center">
                        <button type="reset" class="btn btn-outline-secondary">
                            <i class="fas fa-undo"></i> Reset
                        </button>
                        <button type="submit" class="btn btn-success">
                            <i class="fas fa-save"></i> Save Variant
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <div class="row justify-content-center">
            <div class="col-xl-12">
                <div id="result" class="mt-4"></div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script src="{{ asset('assets/js/custom/product_management/product_variants.js') }}"></script>
@endsection