@extends('layouts.app')

@section('title', 'Units of Measure')

@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 */
    #uomMainTable tbody tr {
        position: relative;
    }

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

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

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

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

@section('content')

    <!-- Main Table Card -->
    <div class="card mb-3" id="uomTable" data-list='{"valueNames":["uom_code","uom_name","uom_type","base_uom","conversion_factor","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">Units of Measure</h6>
                </div>
                <div class="col-8 col-sm-auto text-end ps-2">
                    <div class="d-none" id="table-uom-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-uom-replace-element">
                        @can('masters-product-management-units-of-measure.create')
                        <button class="btn btn-sm btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#addUomOffcanvas" aria-controls="addUomOffcanvas">
                            <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="#uomFilters">
                            <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="#uomConversionsModal">
                            <span class="fas fa-exchange-alt" data-fa-transform="shrink-3 down-2"></span>
                            <span class="d-none d-sm-inline-block ms-1">Conversions</span>
                        </button>
                        <!-- @can('masters-product-management-units-of-measure.export')
                        <button class="btn btn-falcon-default btn-sm" type="button" id="exportUoms">
                            <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="uomFilters">
            <div class="card-body border-top fs-10">
                <div class="row g-3">
                    <div class="col-auto">
                        <label class="form-label" for="filterUomCode">UOM Code</label>
                        <input class="form-control" id="filterUomCode" type="text" placeholder="Search by code">
                    </div>
                    <div class="col-auto">
                        <label class="form-label" for="filterUomName">UOM Name</label>
                        <input class="form-control" id="filterUomName" type="text" placeholder="Search by name">
                    </div>
                    <div class="col-auto">
                        <label class="form-label" for="filterUomType">UOM Type</label>
                        <select class="form-select" id="filterUomType">
                            <option value="">All Types</option>
                            <option value="LENGTH">Length</option>
                            <option value="WEIGHT">Weight</option>
                            <option value="VOLUME">Volume</option>
                            <option value="QUANTITY">Quantity</option>
                            <option value="AREA">Area</option>
                            <option value="TIME">Time</option>
                            <option value="TEMPERATURE">Temperature</option>
                            <option value="OTHER">Other</option>
                        </select>
                    </div>
                    <div class="col-auto">
                        <label class="form-label" for="filterBaseUom">Base UOM</label>
                        <select class="form-select" id="filterBaseUom">
                            <option value="">All Base UOMs</option>
                            <!-- Dynamic options will be loaded here -->
                        </select>
                    </div>
                    <div class="col-auto">
                        <label class="form-label" for="filterUomStatus">Status</label>
                        <select class="form-select" id="filterUomStatus">
                            <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="applyUomFilters"><i class="fas fa-search"></i>  Apply</button>
                        <button class="btn btn-outline-secondary btn-sm" type="button" id="clearUomFilters"><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="uomMainTable">
                                                <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: 12%;" onclick="setSort('uom_code')" style="cursor: pointer;">
                                    CODE <span id="sortIcon-uom_code" class="sort-icon"></span>
                                </th>
                                <th class="text-900 align-middle white-space-nowrap" style="width: 18%;" onclick="setSort('uom_name')" style="cursor: pointer;">
                                    NAME <span id="sortIcon-uom_name" class="sort-icon"></span>
                                </th>
                                <th class="text-900 align-middle white-space-nowrap" style="width: 12%;" onclick="setSort('uom_type')" style="cursor: pointer;">
                                    TYPE <span id="sortIcon-uom_type" class="sort-icon"></span>
                                </th>
                                <th class="text-900 align-middle white-space-nowrap" style="width: 15%;">BASE UOM</th>
                                <th class="text-900 align-middle white-space-nowrap" style="width: 12%;">CONVERSION</th>
                                <th class="text-900 align-middle white-space-nowrap" style="width: 10%;">SYMBOL</th>
                                <th class="text-900 align-middle white-space-nowrap" style="width: 10%;" onclick="setSort('is_active')" style="cursor: pointer;">
                                    STATUS <span id="sortIcon-is_active" class="sort-icon"></span>
                                </th>
                                @canany(['masters-product-management-units-of-measure.update','masters-product-management-units-of-measure.delete'])
                                <th class="text-900 align-middle white-space-nowrap" style="width: 11%;">ACTION</th>
                                @endcanany
                            </tr>
                        </thead>
                        <tbody class="list" id="table-uom-body">
                            <!-- Dynamic content will be loaded here -->
                        </tbody>
                    </table>
                    <div id="uomEmptyOverlay" 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 UOMs...</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 UOMs found</div>
                            <small class="text-muted">Try adjusting your filters or add new units</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>

    <!-- Add UOM Offcanvas -->
    <div class="offcanvas offcanvas-end" tabindex="-1" id="addUomOffcanvas" aria-labelledby="addUomOffcanvasLabel" style="width: 50%;">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="addUomOffcanvasLabel">Add Unit of Measure</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="addUomForm">
                        <div class="row g-2 flex-nowrap" style="">
                            <div class="col-6">
                                <label class="form-label" for="uomCode">UOM Code <span class="text-danger">*</span></label>
                                <input class="form-control" id="uomCode" name="uom_code" type="text" >
                            </div>

                            <div class="col-6">
                                <label class="form-label" for="uomName">UOM Name <span class="text-danger">*</span></label>
                                <input class="form-control" id="uomName" name="uom_name" type="text" >
                            </div>
                        </div>
                        <div class="row g-2 flex-nowrap" style="">

                            <div class="col-6">
                                <label class="form-label" for="uomType">UOM Type <span class="text-danger">*</span></label>
                                <select class="form-select" id="uomType" name="uom_type" >
                                    <option value="">Select Type</option>
                                    <option value="LENGTH">Length</option>
                                    <option value="WEIGHT">Weight</option>
                                    <option value="VOLUME">Volume</option>
                                    <option value="QUANTITY">Quantity</option>
                                    <option value="AREA">Area</option>
                                    <option value="TIME">Time</option>
                                    <option value="TEMPERATURE">Temperature</option>
                                    <option value="OTHER">Other</option>
                                </select>
                            </div>



                        </div>
                        <hr style="border-top:1px solid #e5e5e5;">
                        <div class="row g-2 flex-nowrap" style="">
                            <div class="col-6">
                                <label class="form-label" for="baseUomCode">Base UOM</label>
                                <select class="form-select" id="baseUomCode" name="base_uom_code">
                                    <option value="">Select Base UOM (or leave empty for base unit)</option>
                                    <!-- Dynamic options will be loaded here -->
                                </select>
                            </div>

                            <div class="col-6" id="conversionFactorContainer" >
                                <label class="form-label" for="baseUnitFactor">Conversion Factor <span class="text-danger">*</span></label>
                                <input class="form-control" id="baseUnitFactor" name="base_unit_factor" type="number" step="0.000001" placeholder="1.0">
                                <div class="form-text">How many base units equal 1 of this unit</div>
                            </div>
                        </div>

                        <div class="row g-2 flex-nowrap" style="">

                            <div class="col-12">
                                <label class="form-label" for="uomDescription">Description</label>
                                <textarea class="form-control" id="uomDescription" name="description" rows="3"></textarea>
                            </div>
                         </div>
                        <div class="row g-2 flex-nowrap" style="">
                            <div class="col-6">
                                <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 class="form-text">Display order (lower numbers appear first)</div>
                            </div>

                            <div class="col-6">
                                <label class="form-label" for="symbol">Symbol</label>
                                <input class="form-control" id="symbol" name="symbol" type="text" placeholder="e.g., kg, m, l">
                            </div>
                        </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" id="isBaseUnit" name="is_base_unit" type="checkbox">
                                            <label class="form-check-label" for="isBaseUnit">Is Base Unit</label>
                                        </div>
                                    </div>
                                    <div class="col-auto">
                                        <div class="form-check form-switch mb-3">
                                            <input class="form-check-input" id="uomIsActive" name="is_active" type="checkbox" checked>
                                            <label class="form-check-label" for="uomIsActive">Active Status</label>
                                        </div>
                                    </div>
                                </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-outline-secondary me-2" type="button" data-bs-dismiss="offcanvas"><i class="fas fa-close"></i> Cancel</button>
                        @canany(['masters-product-management-units-of-measure.create','masters-product-management-units-of-measure.update'])
                        <button class="btn btn-success" type="submit" form="addUomForm"><i
                            class="fas fa-save"></i> Save UOM</button>
                        @endcanany
                    </div>


                </div>
    </div>

    <!-- UOM Conversions Modal -->
    <div class="modal fade" id="uomConversionsModal" tabindex="-1" aria-labelledby="uomConversionsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="uomConversionsModalLabel">UOM Conversions Management</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6>Conversion Calculator</h6>
                            <div class="card">
                                <div class="card-body">
                                    <div class="row g-3">
                                        <div class="col-6">
                                            <label class="form-label">From UOM</label>
                                            <select class="form-select" id="fromUom">
                                                <option value="">Select UOM</option>
                                                <!-- Dynamic options -->
                                            </select>
                                        </div>
                                        <div class="col-6">
                                            <label class="form-label">To UOM</label>
                                            <select class="form-select" id="toUom">
                                                <option value="">Select UOM</option>
                                                <!-- Dynamic options -->
                                            </select>
                                        </div>
                                        <div class="col-6">
                                            <label class="form-label">Quantity</label>
                                            <input class="form-control" id="fromQuantity" type="number" step="0.001" value="1">
                                        </div>
                                        <div class="col-6">
                                            <label class="form-label">Converted Quantity</label>
                                            <input class="form-control" id="toQuantity" type="number" readonly>
                                        </div>
                                        <div class="col-12">
                                            <button class="btn btn-primary" type="button" id="calculateConversion">Calculate</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <h6>UOM Conversion Matrix</h6>
                            <div class="table-responsive">
                                <table class="table table-sm">
                                    <thead>
                                        <tr>
                                            <th>From</th>
                                            <th>To</th>
                                            <th>Factor</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody id="conversionMatrixBody">
                                        <!-- Dynamic conversion matrix -->
                                    </tbody>
                                </table>
                            </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);
    document.addEventListener('DOMContentLoaded', function(){
        if (!window.pageCaps?.export) {
            const btn = document.getElementById('exportUoms');
            if (btn) btn.style.display = 'none';
        }
        const tbody = document.getElementById('table-uom-body');
        const overlay = document.getElementById('uomEmptyOverlay');
        const wrapper = document.querySelector('#uomTable .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('#uomTable .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 helpers requested by the spec
        window.showLoading = showLoading;
        window.showEmpty = showEmpty;
        window.UomLoader = { showLoading, showEmpty };

        // Backward compatible names
        window.showUomLoading = showLoading;
        window.showUomEmpty = showEmpty;

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