@extends('layouts.app')
@section('title', 'Inventory Management')

@section('content')
<div class="fixed-action-bar d-flex align-items-center justify-content-between">
    <div class="fw-semibold fixed-nav-title">@yield('title')</div>
    <div class="d-flex align-items-center ms-auto">
        <!-- Additional Actions (Left) -->
        <!-- Excel Export -->
        <form action="{{ route('posm.inventory.index') }}" method="GET" style="display:inline;" id="exportForm">
            <input type="hidden" name="search" value="{{ request('search') }}">
            <input type="hidden" name="warehouse_id" value="{{ request('warehouse_id') }}">
            <input type="hidden" name="dc_id" value="{{ request('dc_id') }}">
            <input type="hidden" name="location_type" value="{{ $locationType }}">
            <input type="hidden" name="export" value="excel">
            <button type="submit" class="btn btn-link p-0 m-0 align-middle mx-1" data-toggle="tooltip" title="Export to Excel" style="border:none; background:none;">
                <i class="fa-solid fa-file-excel fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center"></i>
            </button>
        </form>

        <!-- Refresh -->
        <i class="fa-solid fa-rotate-right fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center mx-1"
            data-toggle="tooltip" title="Refresh" onclick="window.location.reload()" style="cursor:pointer;"></i>

        <!-- Additional Actions -->
        <a href="{{ route('posm.inventory.adjustment.create') }}" class="mx-1" data-toggle="tooltip" title="Adjustment">
            <i class="fa-solid fa-sliders fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center"></i>
        </a>

        <a href="{{ route('posm.inventory.history') }}" class="mx-1" data-toggle="tooltip" title="History">
            <i class="fa-solid fa-clock-rotate-left fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center"></i>
        </a>

        <div class="ms-auto d-flex align-items-center">
            <!-- Mandatory Action Set (Right) -->
            <!-- Add Button -->
            <a href="{{ route('posm.inventory.stock-inward.create') }}" class="mx-1" data-toggle="tooltip" title="Add Inventory">
                <i class="fa-regular fa-plus fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center"></i>
            </a>

            <!-- Save (Placeholder for index) -->
            <i class="fa-regular fa-save fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1"
                data-toggle="tooltip" title="Save" style="cursor: default;"></i>

            <!-- Edit (Selective) -->
            <i id="editSelectedInventory" class="fa-regular fa-edit fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1"
                data-toggle="tooltip" title="Edit" style="cursor: default;"></i>

            <!-- Delete (Selective) -->
            <i id="deleteSelectedInventory" class="fa-regular fa-trash-can fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1"
                data-toggle="tooltip" title="Delete" style="cursor: default;"></i>

            <!-- Close -->
            <i class="fa-solid fa-xmark fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Close" style="cursor: default;"></i>

            <!-- Column Visibility -->
            <div class="dropdown d-inline-block mx-1">
                <i class="fa-solid fa-columns fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center"
                    id="columnVisibilityDropdownInventory" data-toggle="dropdown" aria-haspopup="true"
                    aria-expanded="false" title="Columns" style="cursor: pointer;"></i>
                <div class="dropdown-menu dropdown-menu-right columns-menu shadow border-0"
                    aria-labelledby="columnVisibilityDropdownInventory" style="min-width: 220px;">
                    <li><label class="dropdown-item"><input type="checkbox" class="columnCheckbox" data-column="product" checked> Product</label></li>
                    <li><label class="dropdown-item"><input type="checkbox" class="columnCheckbox" data-column="location" checked> Location</label></li>
                    <li><label class="dropdown-item"><input type="checkbox" class="columnCheckbox" data-column="on-hand" checked> On Hand</label></li>
                    <li><label class="dropdown-item"><input type="checkbox" class="columnCheckbox" data-column="issued" checked> Issued Qty</label></li>
                    <li><label class="dropdown-item"><input type="checkbox" class="columnCheckbox" data-column="reserved" checked> Reserved</label></li>
                    <li><label class="dropdown-item"><input type="checkbox" class="columnCheckbox" data-column="available" checked> Available</label></li>
                    <li><label class="dropdown-item"><input type="checkbox" class="columnCheckbox" data-column="cost" checked> Unit Cost</label></li>
                    <li><label class="dropdown-item"><input type="checkbox" class="columnCheckbox" data-column="total" checked> Total Value</label></li>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card mt-3 rounded-border">
    <div class="card-body">
        <form id="filtersForm" action="{{ route('posm.inventory.index') }}" method="GET">
            <div class="row align-items-center">
                {{-- Search Input --}}
                <div class="col-md-5">
                    <div class="input-group search-input-group">
                        <input type="text" class="form-control"
                            placeholder="Type and press enter to search by Product Name or Code" name="search"
                            value="{{ request('search') }}" id="search_input">
                        <button class="btn btn-link search-btn" type="submit">
                            <i class="fa-solid fa-magnifying-glass"></i>
                        </button>
                    </div>
                </div>

                {{-- Bulk Actions Dropdown --}}
                <div class="col-md-2">
                    <div class="dropdown">
                        <button class="btn btn-de-dark filter-btn dropdown-toggle w-100" type="button" id="bulkActionsButton"
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" disabled>
                            Bulk Actions
                        </button>
                        <div class="dropdown-menu" aria-labelledby="bulkActionsButton">
                            <a class="dropdown-item disabled" href="#">No bulk actions available</a>
                        </div>
                    </div>
                </div>

                {{-- Filters Button --}}
                <div class="col-md-3">
                    <button type="button" class="btn btn-de-dark filter-btn w-100" data-toggle="collapse"
                        data-target="#filtersCollapse" aria-expanded="false" aria-controls="filtersCollapse">
                        Filters
                    </button>
                </div>

                {{-- Per Page Select --}}
                <div class="col-md-2">
                    <select name="perPage" class="form-control" onchange="this.form.submit()">
                        <option value="20" {{ request('perPage', 20) == 20 ? 'selected' : '' }}>20 Rows</option>
                        <option value="50" {{ request('perPage') == 50 ? 'selected' : '' }}>50 Rows</option>
                        <option value="100" {{ request('perPage') == 100 ? 'selected' : '' }}>100 Rows</option>
                        <option value="200" {{ request('perPage') == 200 ? 'selected' : '' }}>200 Rows</option>
                    </select>
                </div>
            </div>

            <div class="collapse {{ (request()->hasAny(['warehouse_id', 'dc_id', 'location_type']) && $locationType != 'all') || request('location_type') ? 'show' : '' }}"
                id="filtersCollapse">
                <div class="row mt-3">
                    <div class="col-md-3 mb-2">
                        <label class="form-label">Location Type</label>
                        <select name="location_type" class="form-control" onchange="document.getElementById('filtersForm').submit()">
                            <option value="all" {{ ($locationType == 'all') ? 'selected' : '' }}>All Location Types</option>
                            <option value="warehouse" {{ ($locationType == 'warehouse') ? 'selected' : '' }}>Warehouse</option>
                            <option value="distribution_center" {{ ($locationType == 'distribution_center') ? 'selected' : '' }}>Distribution Center</option>
                        </select>
                    </div>

                    @if($locationType == 'warehouse' || $locationType == 'all')
                    <div class="col-md-3 mb-2">
                        <label class="form-label">Warehouse</label>
                        <select name="warehouse_id" id="warehouse_id" class="form-control"
                            onchange="document.getElementById('filtersForm').submit()">
                            <option value="">All Warehouses</option>
                            @foreach($warehousesOnly as $warehouse)
                            <option value="{{ $warehouse->id }}" {{ request('warehouse_id')==$warehouse->id ? 'selected' : '' }}>
                                {{ $warehouse->name }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                    @endif

                    @if($locationType == 'distribution_center' || $locationType == 'all')
                    <div class="col-md-3 mb-2">
                        <label class="form-label">Distribution Center</label>
                        <select name="dc_id" id="dc_id" class="form-control"
                            onchange="document.getElementById('filtersForm').submit()">
                            <option value="">All Distribution Centers</option>
                            @foreach($distributionCenters as $dc)
                            <option value="{{ $dc->id }}" {{ request('dc_id')==$dc->id ? 'selected' : '' }}>
                                {{ $dc->name }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                    @endif
                </div>
                <div class="row mt-3">
                    <div class="col-md-12 text-start">
                        <a href="{{ route('posm.inventory.index') }}" class="btn btn-primary rounded-pill" style="background-color: #FABB1E; border-color: #FABB1E; font-weight: 600; padding: 0.4rem 2rem;">Clear</a>
                    </div>
                </div>
            </div>
        </form>

        <div class="table-responsive table-fixed-width mt-4">
            <table class="table table-striped table-hover text-nowrap" id="inventoryTable">
                <thead class="bg-light">
                    <tr>
                        <th scope="col" style="width: 10px;"><input type="checkbox" id="selectAll"></th>
                        <th scope="col" class="product-index">Product</th>
                        <th scope="col" class="location-index">Location</th>
                        <th scope="col" class="on-hand-index text-end">On Hand</th>
                        <th scope="col" class="issued-index text-end">Issued Qty</th>
                        <th scope="col" class="reserved-index text-end">Reserved</th>
                        <th scope="col" class="available-index text-end">Available</th>
                        <th scope="col" class="cost-index text-end">Unit Cost</th>
                        <th scope="col" class="total-index text-end">Total Value</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($inventory as $item)
                    @php
                    $available = $item->quantity - $item->reserved_quantity;
                    $isLow = $available <= ($item->product->reorder_level ?? 0);
                    @endphp
                    <tr>
                        <td><input class="itemCheckbox" type="checkbox" value="{{ $item->id }}"></td>
                        <td class="product-index">
                            <a href="{{ route('posm.products.show', $item->product->id ?? 0) }}"
                                class="text-decoration-none">
                                <span class="fw-bold">{{ $item->product->name ?? 'Unknown' }}</span>
                                <div class="text-muted small">{{ $item->product->code ?? '-' }}</div>
                            </a>
                        </td>
                        <td class="location-index">
                            @if($item->location_type == 'warehouse')
                            <span class="badge bg-transparent px-2 py-1 rounded-pill" style="border: 1px solid rgba(59, 130, 246, 0.4); color: #3b82f6;">
                                <i class="fa-solid fa-warehouse me-1" style="color: #3b82f6;"></i>
                                {{ $item->location->name ?? 'Warehouse #' . $item->location_id }}
                            </span>
                            @elseif($item->location_type == 'distribution_center')
                            <span class="badge bg-transparent px-2 py-1 rounded-pill" style="border: 1px solid rgba(16, 185, 129, 0.4); color: #10b981;">
                                <i class="fa-solid fa-building-circle-check me-1" style="color: #10b981;"></i>
                                {{ $item->location->name ?? 'DC #' . $item->location_id }}
                            </span>
                            @else
                            <span class="badge bg-soft-secondary px-2 py-1 rounded-pill">{{ str_replace('_', ' ', ucfirst($item->location_type)) }}</span>
                            @endif
                        </td>
                        <td class="on-hand-index text-end fw-bold">{{ number_format($item->quantity) }}</td>
                        <td class="issued-index text-end">{{ number_format($item->issued_qty ?? 0) }}</td>
                        <td class="reserved-index text-end">{{ number_format($item->reserved_quantity) }}</td>
                        <td class="available-index text-end fw-bold">{{ number_format($available) }}</td>
                        <td class="cost-index text-end">LKR {{ number_format($item->unit_cost, 2) }}</td>
                        <td class="total-index text-end fw-bold">LKR {{ number_format($item->quantity * $item->unit_cost, 2) }}</td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="9" class="text-center py-4 text-muted">No inventory records found.</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="d-flex justify-content-between mt-4 align-items-center">
            <div style="font-size: 14px;" class="fw-normal">
                Showing {{ $inventory->firstItem() ?? 0 }} to {{ $inventory->lastItem() ?? 0 }} of
                {{ $inventory->total() }} entries
            </div>
            <div>
                {{ $inventory->appends(request()->query())->links() }}
            </div>
        </div>
    </div>
</div>
@endsection

@push('css')
<style>
    /* Match Outlets Premium Styles */
    .card-body {
        padding: 1.5rem !important;
    }

    .form-control {
        border: none !important;
        border-bottom: 1px solid #E5E9F2 !important;
        border-radius: 0 !important;
        padding: 0.4rem 0 !important;
        font-size: 0.95rem !important;
        background: transparent !important;
        color: #4E5E7A !important;
        box-shadow: none !important;
    }

    .form-control:focus {
        border-bottom-color: #FABB1E !important;
        box-shadow: none !important;
    }

    .search-input-group {
        position: relative;
        display: flex;
        align-items: center;
    }

    .search-btn {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        color: #8D99AE;
        border: none;
        padding: 5px 10px;
        z-index: 5;
        background: none;
    }

    .search-btn:hover {
        color: #FABB1E;
    }

    #search_input {
        padding-right: 35px !important;
        height: auto !important;
    }

    .filter-btn {
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>
@endpush

@push('js')
<script>
    $(document).ready(function () {
        // --- Search Input Enter Key Handling ---
        $('#search_input').on('keypress', function(e) {
            if (e.which == 13) {
                e.preventDefault();
                $('#filtersForm').submit();
            }
        });
        // --- Column Visibility Logic ---
        const checkboxes = $('.columnCheckbox');

        function toggleColumnVisibility(column, checked) {
            const th = $('th.' + column + '-index');
            const tdList = $('td.' + column + '-index');

            if (checked) {
                th.show();
                tdList.show();
            } else {
                th.hide();
                tdList.hide();
            }
        }

        // Restore state from session
        checkboxes.each(function () {
            const column = $(this).data('column');
            const visibility = sessionStorage.getItem('inv_col_vis_' + column);

            if (visibility === 'hidden') {
                $(this).prop('checked', false);
                toggleColumnVisibility(column, false);
            } else if (visibility === 'visible') {
                $(this).prop('checked', true);
                toggleColumnVisibility(column, true);
            } else {
                // Initial state based on DOM
                if (!$(this).prop('checked')) {
                    toggleColumnVisibility(column, false);
                }
            }
        });

        // Add change listener
        checkboxes.on('change', function () {
            const column = $(this).data('column');
            const isChecked = this.checked;
            toggleColumnVisibility(column, isChecked);
            sessionStorage.setItem('inv_col_vis_' + column, isChecked ? 'visible' : 'hidden');
        });

        // --- Bulk Selection Logic ---
        const selectAllCheckbox = $('#selectAll');
        const itemCheckboxes = $('.itemCheckbox');
        const bulkActionsButton = $('#bulkActionsButton');
        const editIcon = $('#editSelectedInventory');
        const deleteIcon = $('#deleteSelectedInventory');
        let selectedIds = [];

        function updateBulkUI() {
            const selectedCount = selectedIds.length;
            bulkActionsButton.prop('disabled', selectedCount === 0);
            if (selectedCount > 0) {
                bulkActionsButton.text(`Bulk Actions (${selectedCount})`);
                deleteIcon.addClass('fixed-nav-btn-active').css('cursor', 'pointer');
            } else {
                bulkActionsButton.text('Bulk Actions');
                deleteIcon.removeClass('fixed-nav-btn-active').css('cursor', 'default');
            }

            if (selectedCount === 1) {
                editIcon.addClass('fixed-nav-btn-active').css('cursor', 'pointer');
            } else {
                editIcon.removeClass('fixed-nav-btn-active').css('cursor', 'default');
            }

            // Update select all state
            let allVisibleChecked = itemCheckboxes.length > 0;
            itemCheckboxes.each(function() {
                if (!$(this).prop('checked')) allVisibleChecked = false;
            });
            selectAllCheckbox.prop('checked', allVisibleChecked);
        }

        selectAllCheckbox.on('change', function () {
            const isChecked = this.checked;
            itemCheckboxes.prop('checked', isChecked);
            selectedIds = [];
            if (isChecked) {
                itemCheckboxes.each(function () {
                    selectedIds.push($(this).val());
                });
            }
            updateBulkUI();
        });

        itemCheckboxes.on('change', function () {
            const id = $(this).val();
            if (this.checked) {
                if (!selectedIds.includes(id)) selectedIds.push(id);
            } else {
                selectedIds = selectedIds.filter(item => item !== id);
            }
            updateBulkUI();
        });
    });
</script>
@endpush