@extends('layouts.app')

@section('title', 'Brand Master')

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

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

    .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: rgba(255, 255, 255, 0.85);
        z-index: 5;
    }

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

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

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

    #brandsMainTable tbody tr td:last-child {
        overflow: visible !important;
        position: relative;
        z-index: 1;
    }

    #brandsMainTable .dropdown-menu {
        z-index: 1050 !important;
        position: absolute !important;
    }

    #brandsMainTable tbody tr:has(.dropdown.show) {
        z-index: 1051 !important;
    }
</style>
@endpush

@section('content')

    <!-- Main Table Card -->
    <div class="card mb-3" id="brandsTable" data-list='{"valueNames":["brand_code","brand_name","brand_category","country","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">Brand Master</h6>
                </div>
                <div class="col-8 col-sm-auto text-end ps-2">
                    <div class="d-none" id="table-brands-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-brands-replace-element">
                        @can('masters-product-management-brand-masters.create')
                        <button class="btn btn-sm btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#addBrandOffcanvas" aria-controls="addBrandOffcanvas">
                            <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="#brandFilters">
                            <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>
                        <button class="btn btn-falcon-default btn-sm me-2" type="button" data-bs-toggle="modal" data-bs-target="#brandMappingModal">
                            <span class="fas fa-link" data-fa-transform="shrink-3 down-2"></span>
                            <span class="d-none d-sm-inline-block ms-1">Mappings</span>
                        </button>
                        @can('masters-product-management-brand-masters.export')
                        <button class="btn btn-falcon-default btn-sm" type="button" id="exportBrands">
                            <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="brandFilters">
            <div class="card-body border-top fs-10">
                <div class="row g-3">
                    <div class="col-auto">
                        <label class="form-label" for="filterBrandCode">Brand Code</label>
                        <input class="form-control" id="filterBrandCode" type="text" placeholder="Search by code">
                    </div>
                    <div class="col-auto">
                        <label class="form-label" for="filterBrandName">Brand Name</label>
                        <input class="form-control" id="filterBrandName" type="text" placeholder="Search by name">
                    </div>
                    <div class="col-auto">
                        <label class="form-label" for="filterWebsite">Website</label>
                        <input class="form-control" id="filterWebsite" type="text" placeholder="Search by website">
                    </div>
                    <div class="col-auto">
                        <label class="form-label" for="filterBrandStatus">Status</label>
                        <select class="form-select" id="filterBrandStatus">
                            <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-end">
                        <button class="btn btn-primary btn-sm me-2" type="button" id="applyBrandFilters"><i class="fas fa-search"></i> Apply</button>
                        <button class="btn btn-outline-secondary btn-sm" type="button" id="clearBrandFilters"><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="brandsMainTable">
                        <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: 15%;" data-sort="brand_code">BRAND CODE</th>
                                <th class="text-900 align-middle white-space-nowrap" style="width: 20%;" data-sort="brand_name">BRAND NAME</th>
                                <th class="text-900 align-middle white-space-nowrap" style="width: 20%;" data-sort="website">WEBSITE</th>
                                <th class="text-900 align-middle white-space-nowrap" style="width: 12%;" data-sort="products_count">PRODUCTS</th>
                                <th class="text-900 align-middle white-space-nowrap" style="width: 12%;" data-sort="vendors_count">VENDORS</th>
                                <th class="text-900 align-middle white-space-nowrap" style="width: 10%;" data-sort="status">STATUS</th>
                                @canany(['masters-product-management-brand-masters.update','masters-product-management-brand-masters.delete'])
                                <th class="text-900 align-middle white-space-nowrap" style="width: 11%;">ACTION</th>
                                @endcanany
                            </tr>
                        </thead>
                        <tbody class="list" id="table-brands-body">
                            <!-- Dynamic content will be loaded here -->
                        </tbody>
                    </table>
                    <div id="brandsEmptyOverlay" 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 brands...</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 brands found</div>
                            <small class="text-muted">Try adjusting your filters or add new brands</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!-- Add Brand Offcanvas -->
    <div class="offcanvas offcanvas-end" tabindex="-1" id="addBrandOffcanvas" aria-labelledby="addBrandOffcanvasLabel" style="width: 40%">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="addBrandOffcanvasLabel">Add Brand</h5>
            <button type="button" class="btn-close text-reset" 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="addBrandForm">
                        <div class="mb-3">
                            <label class="form-label" for="brandCode">Brand Code <span class="text-danger">*</span></label>
                            <input class="form-control" id="brandCode" name="brand_code" type="text">
                        </div>

                        <div class="mb-3">
                            <label class="form-label" for="brandName">Brand Name <span class="text-danger">*</span></label>
                            <input class="form-control" id="brandName" name="brand_name" type="text">
                        </div>

                        <div class="mb-3">
                            <label class="form-label" for="brandDescription">Description</label>
                            <textarea class="form-control" id="brandDescription" name="description" rows="3"></textarea>
                        </div>

                        <div class="mb-3">
                            <label class="form-label" for="website">Website</label>
                            <input class="form-control" id="website" name="website" type="url" placeholder="https://">
                        </div>

                        <div class="mb-3">
                            <label class="form-label" for="brandLogo">Brand Logo</label>
                            <input class="form-control" id="brandLogo" name="logo" type="file" accept="image/*">
                            <div class="form-text">Upload brand logo (PNG, JPG, GIF)</div>
                        </div>

                        <div class="form-check form-switch mb-3">
                            <input class="form-check-input" id="brandIsActive" name="is_active" type="checkbox" checked>
                            <label class="form-check-label" for="brandIsActive">Active Status</label>
                        </div>


                    </form>
                </div>
            </div>
        </div>

        {{-- Sticky offcanvas footer actions --}}
                <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 class="btn btn-secondary me-2" type="button" data-bs-dismiss="offcanvas"><i class="fas fa-times"></i> Cancel</button>
                        @canany(['masters-product-management-brand-masters.create','masters-product-management-brand-masters.update'])
                        <button class="btn btn-success" type="submit" form="addBrandForm" style="float:left"><i
                            class="fas fa-save"></i> Save Brand</button>
                        @endcanany
                    </div>


                </div>
    </div>

    <!-- Brand Mapping Modal -->
    <div class="modal fade" id="brandMappingModal" tabindex="-1" aria-labelledby="brandMappingModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="brandMappingModalLabel">Brand Mappings</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <ul class="nav nav-tabs" id="mappingTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="vendor-mapping-tab" data-bs-toggle="tab" data-bs-target="#vendor-mapping" type="button" role="tab">Vendor Mapping</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="customer-mapping-tab" data-bs-toggle="tab" data-bs-target="#customer-mapping" type="button" role="tab">Customer Mapping</button>
                        </li>
                    </ul>

                    <div class="tab-content" id="mappingTabContent">
                        <!-- Vendor Mapping Tab -->
                        <div class="tab-pane fade show active" id="vendor-mapping" role="tabpanel">
                            <div class="row mt-3">
                                <div class="col-md-6">
                                    <h6>Add Vendor-Brand Mapping</h6>
                                    <form id="vendorBrandMappingForm">
                                        <div class="mb-3">
                                            <label class="form-label">Brand</label>
                                            <select class="form-select" name="brand_id" required>
                                                <option value="">Select Brand</option>
                                                <!-- Dynamic options -->
                                            </select>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">Vendor</label>
                                            <select class="form-select" name="vendor_id" required>
                                                <option value="">Select Vendor</option>
                                                <!-- Dynamic options -->
                                            </select>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">Preferred Vendor</label>
                                            <select class="form-select" name="is_preferred">
                                                <option value="0">No</option>
                                                <option value="1">Yes</option>
                                            </select>
                                        </div>
                                        <button type="submit" class="btn btn-primary">Add Mapping</button>
                                    </form>
                                </div>
                                <div class="col-md-6">
                                    <h6>Existing Vendor Mappings</h6>
                                    <div class="table-responsive">
                                        <table class="table table-sm">
                                            <thead>
                                                <tr>
                                                    <th>Brand</th>
                                                    <th>Vendor</th>
                                                    <th>Preferred</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody id="vendorMappingTable">
                                                <!-- Dynamic content -->
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Customer Mapping Tab -->
                        <div class="tab-pane fade" id="customer-mapping" role="tabpanel">
                            <div class="row mt-3">
                                <div class="col-md-6">
                                    <h6>Add Customer-Brand Mapping</h6>
                                    <form id="customerBrandMappingForm">
                                        <div class="mb-3">
                                            <label class="form-label">Brand</label>
                                            <select class="form-select" name="brand_id" required>
                                                <option value="">Select Brand</option>
                                                <!-- Dynamic options -->
                                            </select>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">Customer</label>
                                            <select class="form-select" name="customer_id" required>
                                                <option value="">Select Customer</option>
                                                <!-- Dynamic options -->
                                            </select>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">Preferred Customer</label>
                                            <select class="form-select" name="is_preferred">
                                                <option value="0">No</option>
                                                <option value="1">Yes</option>
                                            </select>
                                        </div>
                                        <button type="submit" class="btn btn-primary">Add Mapping</button>
                                    </form>
                                </div>
                                <div class="col-md-6">
                                    <h6>Existing Customer Mappings</h6>
                                    <div class="table-responsive">
                                        <table class="table table-sm">
                                            <thead>
                                                <tr>
                                                    <th>Brand</th>
                                                    <th>Customer</th>
                                                    <th>Preferred</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody id="customerMappingTable">
                                                <!-- Dynamic content -->
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
<script>
    @php
        $pageCaps = isset($caps) ? $caps : [
            'view' => false,
            'create' => false,
            'update' => false,
            'delete' => false,
            'export' => false,
        ];
    @endphp
    window.pageCaps = @json($pageCaps);
    // Hide export button if not allowed (defense against cached markup)
    document.addEventListener('DOMContentLoaded', function(){
        if (!window.pageCaps?.export) {
            const btn = document.getElementById('exportBrands');
            if (btn) btn.style.display = 'none';
        }
        const tbody = document.getElementById('table-brands-body');
        const overlay = document.getElementById('brandsEmptyOverlay');
        const wrapper = document.querySelector('#brandsTable .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;

        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();
        }
        function adjustHeight(){
            const tableBodyWrapper = document.querySelector('#brandsTable .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);
        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);
            });
        }
        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');
            }
        }
        const obs = new MutationObserver(() => { clearTimeout(debounceTimer); debounceTimer = setTimeout(syncOverlay, DEBOUNCE_MS); });
        if (tbody) obs.observe(tbody, { childList: true, subtree: true });

        function showLoading(){
            if (!wrapper) return;
            wrapper.dataset.state = 'loading';
            loadingSince = Date.now();
            syncOverlay();
        }
        function showEmpty(){
            if (!wrapper) return;
            wrapper.dataset.state = 'empty';
            syncOverlay();
        }

        // Standard API (required)
        window.showLoading = showLoading;
        window.showEmpty = showEmpty;
        // Backward-compatible aliases
        window.showBrandsLoading = showLoading;
        window.showBrandsEmpty = showEmpty;

        document.getElementById('applyBrandFilters')?.addEventListener('click', function(){ showLoading(); });
        document.getElementById('clearBrandFilters')?.addEventListener('click', function(){ showLoading(); });
    });
</script>
<script src="{{ asset('assets/js/custom/product_management/brand_master.js') }}"></script>
@endpush