@extends('layouts.app')

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

  .required {
            color: #dc3545;
        }
        .value-tag {
            display: inline-block;
            background: #e0e7ff;
            color: #667eea;
            border-radius: 12px;
            padding: 4px 10px;
            margin: 2px 4px 2px 0;
            font-size: 0.9em;
        }
        .value-tag .fa-xmark {
            color: #dc3545;
            margin-left: 6px;
            cursor: pointer;
        }
        .attr-badge {
            display: inline-block;
            background: #e0e7ff;
            color: #667eea;
            border-radius: 12px;
            padding: 4px 10px;
            margin: 2px 4px 2px 0;
            font-size: 0.9em;
        }
        .attr-badge .fa-times {
            color: #dc3545;
            margin-left: 6px;
            cursor: pointer;
        }

</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> Category Management<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>

                        </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, description..." oninput="renderCategoryTable()">
                <select class="form-select me-2" style="width:180px;" id="statusFilter" onchange="renderCategoryTable()">
                    <option value="all">Status: All</option>
                    <option value="true">Active</option>
                    <option value="false">Inactive</option>
                </select>
                <select class="form-select me-2" style="width:200px;" id="categoryTypeFilter" onchange="renderCategoryTable()">
                    <option value="">Category Type: All</option>
                </select>
                <select class="form-select me-2" style="width:180px;" id="parentFilter" onchange="renderCategoryTable()">
                    <option value="">Parent: All</option>
                    <option value="root">Root Categories</option>
                    <option value="child">Child Categories</option>
                </select>
            </div>
            <div>
            <button class="btn btn-primary btn-sm" data-bs-toggle="offcanvas" data-bs-target="#categoriesWizardOffcanvas">
                <i class="fas fa-plus"></i> Add Category
            </button>
            </div>
        </div>

        <div class="table-responsive">
            <table class="table table-sm table-hover align-middle mt-3">
                <thead class="bg-light">
                    <tr>
                         <th>#</th>
                        <th onclick="setSort('code')">Code <span class="sort-icon" id="sortIcon-code"></span></th>
                        <th onclick="setSort('name')">Name <span class="sort-icon" id="sortIcon-name"></span></th>
                        <th onclick="setSort('type')">Category Type <span class="sort-icon" id="sortIcon-type"></span></th>
                        <th>Parent Category</th>
                        <th>Attributes</th>
                        <th>Status</th>
                        <th>Description</th>
                        <th style="width:8%;">Actions</th>
                    </tr>
                </thead>
                <tbody id="categoriesTableBody" style="font-size: 14px;"></tbody>
            </table>
        </div>
       </div>
    </div>

    <!-- categories Creation Wizard Offcanvas -->
    <div class="offcanvas offcanvas-end" tabindex="-1" id="categoriesWizardOffcanvas" aria-labelledby="categoriesWizardLabel" style="width: 50%;">
        <div class="offcanvas-header border-bottom">
            <h5 class="offcanvas-title" id="categoriesWizardLabel"><i class="fas fa-cog"></i> Create New Category</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="categoryForm">
                        <div class="mb-3">
                            <label class="form-label">Category Code <span class="required">*</span></label>
                            <input type="text" class="form-control" id="catCode" placeholder="e.g. ROLLER" maxlength="30" required>
                            <small class="form-text text-muted">Unique code, uppercase, no spaces (e.g. ROLLER, ZEBRA, WOODEN)</small>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Category Name <span class="required">*</span></label>
                            <input type="text" class="form-control" id="catName" placeholder="e.g. Roller Blinds" maxlength="100" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Category Type <span class="required">*</span></label>
                            <select class="form-select" id="categoryType" required>
                                <option value="">Select Category Type</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Parent Category</label>
                            <select class="form-select" id="parentCat">
                                <option value="">-- None (Root Category) --</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Description</label>
                            <textarea class="form-control" id="catDesc" rows="2" placeholder="Describe this category (optional)"></textarea>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Attributes <span class="required">*</span></label>
                            <div class="row g-2 align-items-end">
                                <div class="col-8">
                                    <select class="form-select" id="attrSelect">
                                        <option value="">Select Attribute</option>
                                    </select>
                                </div>
                                <div class="col-4 d-grid">
                                    <button type="button" class="btn btn-primary" id="addAttrBtn">
                                        <i class="fas fa-plus"></i> Add Attribute
                                    </button>
                                </div>
                            </div>
                            <div id="attrsList" class="mt-2"></div>
                        </div>
                        <div class="form-check form-switch mb-3">
                            <input class="form-check-input" type="checkbox" id="hasVariants">
                            <label class="form-check-label" for="hasVariants">Has Variants</label>
                        </div>
                        <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>
                        <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 Category</button>
                        </div>
                    </form>
                </div>
            </div>
<div class="row justify-content-center">
        <div class="col-xl-7 col-lg-8 col-md-10">

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

        </div>
    </div>


@endsection