@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;
        }

</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> Attribute Master<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, category, brand..." oninput="renderAttributeTable()">
                <select class="form-select me-2" style="width:180px;" id="statusFilter" onchange="renderAttributeTable()">
                    <option value="">Status: All</option>
                    <option value="true">Active</option>
                    <option value="false">Inactive</option>
                </select>
                <select class="form-select me-2" style="width:200px;" id="typeFilter" onchange="renderAttributeTable()">
                    <option value="">Type: All</option>
                    <option value="DROPDOWN">Dropdown</option>
                    <option value="TEXT">Text</option>
                    <option value="NUMBER">Number</option>
                    <option value="BOOLEAN">Yes/No (Boolean)</option>
                    <option value="DATE">Date</option>
                </select>
            </div>
            <div>
            <button class="btn btn-primary btn-sm" data-bs-toggle="offcanvas" data-bs-target="#attributesWizardOffcanvas">
                <i class="fas fa-plus"></i> Add Attributes
            </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>
                    <tr>
                         <th >#</th>
                        <th onclick="setSort('attribute_code')">Code <span class="sort-icon" id="sortIcon-attribute_code"></span></th>
                        <th onclick="setSort('attribute_name')">Name <span class="sort-icon" id="sortIcon-attribute_name"></span></th>
                        <th onclick="setSort('attribute_type')">Type <span class="sort-icon" id="sortIcon-attribute_type"></span></th>
                        <th >Values</th>
                        <th >Status</th>
                         <th >Description</th>
                        {{-- <th style="width:12%;">Created</th> --}}
                        <th style="width:8%;">Actions</th>



                    </tr>
                </thead>
                <tbody id="attributesTableBody" style="font-size: 14px;"></tbody>
            </table>
        </div>
       </div>
    </div>

    <!-- attributes Creation Wizard Offcanvas -->
    <div class="offcanvas offcanvas-end" tabindex="-1" id="attributesWizardOffcanvas" aria-labelledby="attributesWizardLabel" style="width: 50%;">
        <div class="offcanvas-header border-bottom">
            <h5 class="offcanvas-title" id="attributesWizardLabel"><i class="fas fa-cog"></i> Create New Attribute</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="attributeForm">
                        <div class="mb-3">
                            <label class="form-label">Attribute Code <span class="required">*</span></label>
                            <input type="text" class="form-control" id="attrCode" placeholder="e.g. COLOR" maxlength="30" required>
                            <small class="form-text text-muted">Unique code, uppercase, no spaces (e.g. COLOR, SIZE, MATERIAL)</small>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Attribute Name <span class="required">*</span></label>
                            <input type="text" class="form-control" id="attrName" placeholder="e.g. Color" maxlength="100" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Attribute Type <span class="required">*</span></label>
                            <select class="form-select" id="attrType" required>
                                <option value="">Select Type</option>
                                <option value="DROPDOWN">Dropdown (List of Values)</option>
                                <option value="TEXT">Text</option>
                                <option value="NUMBER">Number</option>
                                <option value="BOOLEAN">Yes/No (Boolean)</option>
                                <option value="DATE">Date</option>
                            </select>
                        </div>
                        <div class="mb-3" id="dropdownValuesSection" style="display:none;">
                            <label class="form-label">Attribute Values <span class="required">*</span></label>
                            <div class="row g-2">
                                <div class="col-5">
                                    <input type="text" class="form-control" id="attrValueCode" placeholder="Value Code (e.g. WH)">
                                </div>
                                <div class="col-5">
                                    <input type="text" class="form-control" id="attrValueName" placeholder="Value Name (e.g. White)">
                                </div>
                                <div class="col-2 d-grid">
                                    <button type="button" class="btn btn-primary" id="addAttrValueBtn">
                                        <i class="fas fa-plus"></i> Add
                                    </button>
                                </div>
                            </div>
                            <div id="attrValuesList" class="mt-2"></div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Description</label>
                            <textarea class="form-control" id="attrDesc" rows="2" placeholder="Describe the attribute's purpose (optional)"></textarea>
                        </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 class="form-check form-switch mb-3">
                            <input class="form-check-input" type="checkbox" id="isRequired" checked>
                            <label class="form-check-label" for="isRequired">Required</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 Attribute</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