@extends('layouts.app')

@section('title', 'Category Management')

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

<style>
    /* Table wrapper for sticky headers */
    .table-body-wrapper {
        position: relative;
        overflow-x: auto;
        overflow-y: auto;
    }

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

    /* Sticky header positioning */
    .sticky-top {
        position: sticky;
        top: 0;
        z-index: 10;
        background-color: #f8f9fa;
    }

    /* White space nowrap for headers */
    .white-space-nowrap {
        white-space: nowrap;
    }

    /* Centered empty-state overlay */
    .table-empty-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        color: #6c757d;
        background-color: rgba(255, 255, 255, 0.95);
    }

    /* Loading and empty state styling */
    .table-loading-state,
    .table-empty-state {
        text-align: center;
        padding: 2rem;
        color: #6c757d;
    }

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

    #categoriesMainTable tbody tr:hover {
        z-index: 1;
    }

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

    /* Dropdown menu positioning */
    #categoriesMainTable .dropdown-menu {
        z-index: 1050 !important;
        position: absolute !important;
    }

    /* Ensure proper stacking on dropdown open */
    #categoriesMainTable tbody tr:has(.dropdown.show) {
        z-index: 1051 !important;
    }
</style>
@endpush

@section('content')

<!-- Main Table Card -->
<div class="card mb-3" id="categoriesTable"
    data-list='{"valueNames":["category_code","category_name","parent_category","category_type","status"],"page":10,"pagination":true}'>
    <div class="card-header py-2">
        <div class="row flex-between-center g-0">
            <div class="col-4 col-sm-auto d-flex align-items-center pe-0">
                <h6 class="mb-0">Category Management</h6>
            </div>
            <div class="col-8 col-sm-auto text-end ps-2">
                <div class="d-none" id="table-categories-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-categories-replace-element">
                    @can('masters-product-management-category-management.create')
                    <button class="btn btn-sm btn-primary" type="button" data-bs-toggle="offcanvas"
                        data-bs-target="#categoriesWizardOffcanvas" aria-controls="categoriesWizardOffcanvas">
                        <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
                    <button class="btn btn-falcon-default btn-sm mx-2" type="button" data-bs-toggle="collapse"
                        data-bs-target="#categoryFilters">
                        <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>
                    </button>
                    <!-- @can('masters-product-management-category-management.export')
                        <button class="btn btn-falcon-default btn-sm" type="button" id="exportCategories">
                            <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>
                        @endcan-->
                </div>
            </div>
        </div>
    </div>

    <!-- Advanced Filters (Collapsible) -->
    <div class="collapse" id="categoryFilters">
        <div class="card-body border-top fs-10">
            <div class="row g-2 flex-nowrap align-items-end" style="overflow-x:auto; white-space:nowrap;">
                <div class="col-auto">
                    <label class="form-label mb-0" for="filterCategoryCode">Category Code</label>
                    <input class="form-control form-control-sm" id="filterCategoryCode" type="text"
                        placeholder="Search by code">
                </div>
                <div class="col-auto">
                    <label class="form-label mb-0" for="filterCategoryName">Category Name</label>
                    <input class="form-control form-control-sm" id="filterCategoryName" type="text"
                        placeholder="Search by name">
                </div>
                <div class="col-auto">
                    <label class="form-label mb-0" for="filterParentCategory">Parent Category</label>
                    <select class="form-select form-select-sm" id="filterParentCategory">
                        <option value="">All Parent Categories</option>
                        <!-- Dynamic options will be loaded here -->
                    </select>
                </div>
                <div class="col-auto">
                    <label class="form-label mb-0" for="filterCategoryStatus">Status</label>
                    <select class="form-select form-select-sm" id="filterCategoryStatus">
                        <option value="">All Status</option>
                        <option value="active">Active</option>
                        <option value="inactive">Inactive</option>
                    </select>
                </div>
                <div class="col-auto d-flex align-items-center">
                    <button class="btn btn-primary btn-sm me-2" type="button" id="applyCategoryFilters">Apply</button>
                    <button class="btn btn-outline-secondary btn-sm" type="button" id="clearCategoryFilters"> <i
                            class="fas fa-times"></i> Clear</button>
                </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="categoriesMainTable">
                    <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: 5%;">#</th>
                            <th class="text-900 align-middle white-space-nowrap" style="width: 12%;" onclick="setSort('code')">Code <span class="sort-icon" id="sortIcon-code"></span></th>
                            <th class="text-900 align-middle white-space-nowrap" style="width: 15%;" onclick="setSort('name')">Name <span class="sort-icon" id="sortIcon-name"></span></th>
                            {{-- <th class="text-900 align-middle white-space-nowrap" onclick="setSort('type')">Category Type <span class="sort-icon" id="sortIcon-type"></span></th> --}}
                            <th class="text-900 align-middle white-space-nowrap" style="width: 15%;">Parent Category</th>
                            <th class="text-900 align-middle white-space-nowrap" style="width: 12%;">Attributes</th>
                            <th class="text-900 align-middle white-space-nowrap" style="width: 10%;">Status</th>
                            <th class="text-900 align-middle white-space-nowrap" style="width: 23%;">Description</th>
                            @canany(['masters-product-management-category-management.update','masters-product-management-category-management.delete'])
                            <th class="text-900 align-middle white-space-nowrap" style="width: 8%;">Actions</th>
                            @endcanany
                        </tr>
                    </thead>
                    <tbody id="categoriesTableBody"></tbody>
                </table>
                <div id="categoriesEmptyOverlay" 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 categories...</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 categories found</div>
                        <small class="text-muted">Try adjusting your filters or add new categories</small>
                    </div>
                </div>
            </div>
        </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" style="height:100%">

            <div class="card-body">
                <form id="categoryForm">
                    <div class="mb-3">
                        <label class="form-label">Category Code <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="catCode" placeholder="e.g. ROLLER" maxlength="30"
                            required>
                        <div class="invalid-feedback">Category Code is required</div>
                        <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="text-danger">*</span></label>
                        <input type="text" class="form-control" id="catName" placeholder="e.g. Roller Blinds"
                            maxlength="100" required>
                        <div class="invalid-feedback">Category Name is required</div>
                    </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">
                        <div class="d-flex justify-content-between align-items-center">
                            <label class="form-label mb-0">Attributes <span id="attributesRequiredStar"
                                    class="required">*</span></label>
                            <div class="form-check form-switch m-0">
                                <input class="form-check-input" type="checkbox" id="noAttributes">
                                <label class="form-check-label" for="noAttributes">No Attributes</label>
                            </div>
                        </div>
                        <div class="row g-2 align-items-end mt-1">
                            <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 id="catAttrsInlineError" class="invalid-feedback d-block" style="display:none;"></div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="sortOrder">Sort Order</label>
                        <input class="form-control" id="sortOrder" name="sort_order" type="number" min="0" value="0">
                    </div>

                    <div class="row g-3 align-items-center">
                        <div class="col-auto">
                            <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>
                        <div class="col-auto">
                            <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>
                    </div>
                    <hr>

                </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 class="offcanvas-footer border-top p-3 bg-light position-sticky bottom-0 align-items-end" style="z-index: 1;">
            <div class="d-flex justify-content-between align-items-center">
                <button type="reset" class="btn btn-outline-secondary" form="categoryForm"><i class="fas fa-undo"></i> Reset</button>
                @canany(['masters-product-management-category-management.create','masters-product-management-category-management.update'])
                <button type="submit" class="btn btn-success" form="categoryForm"><i class="fas fa-save"></i> Save Category</button>
                @endcanany
            </div>
        </div>
</div>
@endsection


@push('scripts')
<script>
    (function () {
        // Expose permission caps to JS
        @php
        $pageCaps = isset($caps) && is_array($caps) ? $caps : [
            'view' => false, 'create' => false, 'update' => false, 'delete' => false, 'export' => false
        ];
        @endphp
        window.pageCaps = @json($pageCaps);

        // Defensive: hide export button on load if not allowed
        document.addEventListener('DOMContentLoaded', function () {
            if (!window.pageCaps?.export) {
                const btn = document.getElementById('exportCategories');
                if (btn) btn.style.display = 'none';
            }
        });
    })();
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Dynamic table height adjustment and overlay management
    const tbody = document.getElementById('categoriesTableBody');
    const overlay = document.getElementById('categoriesEmptyOverlay');
    const wrapper = document.querySelector('#categoriesTable .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;

    // Initialize loading state
    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();
    }

    // Adjust table wrapper height based on viewport
    function adjustHeight() {
        const tableBodyWrapper = document.querySelector('#categoriesTable .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 - 40);
        tableBodyWrapper.style.maxHeight = `${avail}px`;
        tableBodyWrapper.style.minHeight = `${avail}px`;
    }

    adjustHeight();
    window.addEventListener('resize', adjustHeight);

    // Check if table has renderable data
    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);
        });
    }

    // Sync overlay visibility with data state
    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');
        }
    }

    // Observe tbody changes
    const obs = new MutationObserver(() => {
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(syncOverlay, DEBOUNCE_MS);
    });
    if (tbody) obs.observe(tbody, { childList: true, subtree: true });

    // Helper functions for external use
    window.showCategoriesLoading = function() {
        if (wrapper) {
            wrapper.dataset.state = 'loading';
            loadingSince = Date.now();
            syncOverlay();
        }
    };
    window.showCategoriesEmpty = function() {
        if (wrapper) {
            wrapper.dataset.state = 'empty';
            syncOverlay();
        }
    };

    // Filter button handlers
    document.getElementById('applyCategoryFilters')?.addEventListener('click', function() {
        if (wrapper) {
            wrapper.dataset.state = 'loading';
            loadingSince = Date.now();
            syncOverlay();
        }
    });
    document.getElementById('clearCategoryFilters')?.addEventListener('click', function() {
        if (wrapper) {
            wrapper.dataset.state = 'loading';
            loadingSince = Date.now();
            syncOverlay();
        }
    });
});
</script>
@endpush