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

@section('content')
    <div class="fixed-action-bar d-flex align-items-center justify-content-between">
        <div class="fw-semibold fixed-nav-title">
            Inventory Report
            <span class="ms-2 badge bg-light text-dark fw-normal fs-12 border">
                Viewing: {{ request('location_type') ? ucfirst(str_replace('_', ' ', request('location_type'))) : 'All Locations' }}
            </span>
        </div>
        <div class="d-flex align-items-center">
            <!-- Additional Actions (Left) -->
            <button onclick="exportToCSV()" class="btn btn-link p-0 border-0 text-decoration-none mx-1">
                <i class="fa-solid fa-download fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center"
                    data-toggle="tooltip" title="Export CSV"></i>
            </button>

            <div class="ms-auto d-flex align-items-center">
                <!-- Mandatory Action Set (Right) -->
                <!-- Add -->
                
            <a href="{{ route('posm.reports.inventory-audit.excel', request()->all()) }}">
                <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 mx-1" style="color: #28a745; cursor: pointer;"
                    data-toggle="tooltip" title="Export Excel"></i>
            </a>
                <i class="fa-regular fa-plus fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Add" style="cursor: default;"></i>

                <!-- Save -->
                <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 -->
                <i 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 -->
                <i 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 -->
                <a href="{{ route('posm.reports.dashboard') }}" class="mx-1">
                    <i class="fa-solid fa-xmark fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center"
                        data-toggle="tooltip" title="Close"></i>
                </a>

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

    <div class="row g-4 mt-3 mb-4">
        <div class="col-md-4">
            <div class="card border-0 shadow-sm h-100 rounded-border bg-white">
                <div class="card-body p-4 d-flex align-items-center justify-content-between">
                    <div>
                        <h6 class="fw-bold mb-1 text-muted small uppercase">
                            Total Inventory Value 
                            <span class="text-lowercase fw-normal">({{ request('location_type') ? str_replace('_', ' ', request('location_type')) : 'All' }})</span>
                        </h6>
                        <h2 class="mb-0 fw-bold fs-2 text-success">{{ number_format($totalValue, 2) }} LKR</h2>
                    </div>
                    <div class="avatar-lg bg-soft-success text-success rounded-circle d-flex align-items-center justify-content-center"
                        style="width: 56px; height: 56px;">
                        <i class="fa-solid fa-sack-dollar fs-2"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card border-0 shadow-sm h-100 rounded-border bg-white">
                <div class="card-body p-4 d-flex align-items-center justify-content-between">
                    <div>
                        <h6 class="fw-bold mb-1 text-muted small uppercase">
                            Total Stock Quantity
                            <span class="text-lowercase fw-normal">({{ request('location_type') ? str_replace('_', ' ', request('location_type')) : 'All' }})</span>
                        </h6>
                        <h2 class="mb-0 fw-bold fs-2 text-warning">{{ number_format($totalQuantity) }}</h2>
                    </div>
                    <div class="avatar-lg bg-soft-warning text-warning rounded-circle d-flex align-items-center justify-content-center"
                        style="width: 56px; height: 56px;">
                        <i class="fa-solid fa-boxes-stacked fs-2"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card border-0 shadow-sm h-100 rounded-border bg-white">
                <div class="card-body p-4 d-flex align-items-center justify-content-between">
                    <div>
                        <h6 class="fw-bold mb-1 text-muted small uppercase">
                            Total SKUs in Stock
                            <span class="text-lowercase fw-normal">({{ request('location_type') ? str_replace('_', ' ', request('location_type')) : 'All' }})</span>
                        </h6>
                        <h2 class="mb-0 fw-bold fs-2 text-primary">{{ $totalSKUs }}</h2>
                    </div>
                    <div class="avatar-lg bg-soft-primary text-primary rounded-circle d-flex align-items-center justify-content-center"
                        style="width: 56px; height: 56px;">
                        <i class="fa-solid fa-tags fs-2"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card mt-3 rounded-border border-0 shadow-sm">
        <div class="card-body">
            <!-- Filters -->
            <form action="{{ route('posm.reports.inventory-audit') }}" method="GET">
                <div class="row align-items-end mb-4">
                    <div class="col-md-3 mb-3">
                        <label for="location_type" class="form-label fw-bold small text-muted uppercase">Location Type</label>
                        <select class="form-control select2" id="location_type" name="location_type">
                            <option value="">All Types</option>
                            <option value="warehouse" {{ request('location_type') == 'warehouse' ? 'selected' : '' }}>Warehouse</option>
                            <option value="distribution_point" {{ request('location_type') == 'distribution_point' ? 'selected' : '' }}>Distribution Point</option>
                            <option value="outlet" {{ request('location_type') == 'outlet' ? 'selected' : '' }}>Outlet</option>
                        </select>
                    </div>
                    <div class="col-md-3 mb-3">
                        <label for="location_id" class="form-label fw-bold small text-muted uppercase">Specific Location</label>
                        <select class="form-control select2" id="location_id" name="location_id">
                            <option value="">All Locations</option>
                            <optgroup label="Warehouses" class="type-group type-warehouse">
                                @foreach($warehouses as $w)
                                    @if($w->entry_type == 'warehouse' || !$w->entry_type)
                                        <option value="{{ $w->id }}" data-type="warehouse" {{ request('location_id') == $w->id && request('location_type') == 'warehouse' ? 'selected' : '' }}>{{ $w->name }}</option>
                                    @endif
                                @endforeach
                            </optgroup>
                            <optgroup label="Distribution Points" class="type-group type-distribution_point">
                                @foreach($warehouses as $w)
                                    @if($w->entry_type == 'distribution_center' || $w->entry_type == 'distribution_point')
                                        <option value="{{ $w->id }}" data-type="distribution_point" {{ request('location_id') == $w->id && request('location_type') == 'distribution_point' ? 'selected' : '' }}>{{ $w->name }}</option>
                                    @endif
                                @endforeach
                            </optgroup>
                            <optgroup label="Outlets" class="type-group type-outlet">
                                @foreach($outlets as $o)
                                    <option value="{{ $o->id }}" data-type="outlet" {{ request('location_id') == $o->id && request('location_type') == 'outlet' ? 'selected' : '' }}>{{ $o->name }}</option>
                                @endforeach
                            </optgroup>
                        </select>
                    </div>
                    <div class="col-md-3 mb-3">
                        <label for="product_id" class="form-label fw-bold small text-muted uppercase">Product</label>
                        <select class="form-control select2" id="product_id" name="product_id">
                            <option value="">All Products</option>
                            @foreach($products as $p)
                                <option value="{{ $p->id }}" {{ request('product_id') == $p->id ? 'selected' : '' }}>{{ $p->name }} ({{ $p->code }})</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3 mb-3">
                        <label for="category" class="form-label fw-bold small text-muted uppercase">Category</label>
                        <select class="form-control select2" id="category" name="category">
                            <option value="">All Categories</option>
                            @foreach($categories as $cat)
                                <option value="{{ $cat }}" {{ request('category') == $cat ? 'selected' : '' }}>{{ $cat }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-12 d-flex justify-content-end">
                        <a href="{{ route('posm.reports.inventory-audit') }}" class="btn btn-light rounded-pill fw-bold me-2">Reset</a>
                        <button type="submit" class="btn btn-primary rounded-pill fw-bold px-4">
                            <i class="fa-solid fa-filter me-2"></i> Apply Filters
                        </button>
                    </div>
                </div>
            </form>

            <div class="table-responsive">
                <table class="table table-hover align-middle table-striped">
                    <thead class="bg-light text-muted uppercase fs-11 fw-bold">
                        <tr>
                            <th class="ps-4 py-3">Product Name</th>
                            <th class="py-3">SKU</th>
                            <th class="py-3">Location</th>
                            <th class="py-3 text-end">Quantity</th>
                            <th class="py-3 text-end pe-4">Total Value</th>
                        </tr>
                    </thead>
                    <tbody>
                        @php
                            $isAllLocations = !request()->filled('location_type') && !request()->filled('location_id');
                            $hasProductFilter = request()->filled('product_id') || request()->filled('category');
                            
                            // Group inventory if product filter is active
                            $displayItems = $hasProductFilter ? $inventory->groupBy('location_type') : ['all' => $inventory];
                        @endphp

                        @forelse($displayItems as $type => $items)
                            @if($hasProductFilter && $items->count() > 0)
                                <tr class="bg-light">
                                    <td colspan="5" class="ps-4 py-2 fw-bold text-primary small uppercase" style="letter-spacing: 1px;">
                                        <i class="fa-solid fa-layer-group me-2"></i>
                                        {{ str_replace('_', ' ', $type) }}s
                                    </td>
                                </tr>
                            @endif

                            @foreach($items as $item)
                                <tr>
                                    <td class="ps-4">
                                        <div class="fw-bold text-dark">{{ $item->product->name ?? 'Unknown' }}</div>
                                        <small class="text-muted">{{ $item->product->category ?? '-' }}</small>
                                    </td>
                                    <td>
                                        <span class="badge bg-light text-dark border">{{ $item->product->code ?? '-' }}</span>
                                    </td>
                                    <td>
                                        @if($isAllLocations && !request()->filled('product_id'))
                                            <div class="d-flex align-items-center">
                                                <i class="fa-solid fa-earth-americas text-primary me-3 opacity-75 fs-3"></i>
                                                <div>
                                                    <div class="fw-bold text-dark fs-15 mb-0">Combined Stock</div>
                                                    <div class="text-muted small uppercase fw-bold fs-10" style="letter-spacing: 0.5px;">Across All Locations</div>
                                                </div>
                                            </div>
                                        @else
                                            <div class="d-flex align-items-center">
                                                @php
                                                    $iconColor = 'text-muted';
                                                    $icon = 'fa-map-pin';
                                                    $locationName = $item->location->name ?? null;

                                                    if ($item->location_type == 'warehouse' || $item->location_type == 'distribution_center') {
                                                        $iconColor = 'text-primary';
                                                        $icon = 'fa-warehouse';
                                                        $locationName = $locationName ?? ($warehouseMap[$item->location_id] ?? 'Warehouse');
                                                    } elseif ($item->location_type == 'distribution_point') {
                                                        $iconColor = 'text-success';
                                                        $icon = 'fa-truck-ramp-box';
                                                        $locationName = $locationName ?? ($dpMap[$item->location_id] ?? 'Distribution Point');
                                                    } elseif ($item->location_type == 'outlet') {
                                                        $iconColor = 'text-info';
                                                        $icon = 'fa-store';
                                                        $locationName = $locationName ?? ($outletMap[$item->location_id] ?? 'Outlet');
                                                    }
                                                @endphp
                                                <i class="fa-solid {{ $icon }} {{ $iconColor }} me-3 opacity-75 fs-3"></i>
                                                <div>
                                                    <div class="fw-bold text-dark fs-15 mb-0">
                                                        {{ $locationName }}
                                                    </div>
                                                    <div class="text-muted small uppercase fw-bold fs-10 d-flex align-items-center" style="letter-spacing: 0.5px;">
                                                        <span>{{ str_replace('_', ' ', $item->location_type) }}</span>
                                                        @if($item->location_type == 'outlet' && isset($item->location->rt_code))
                                                            <span class="mx-1">•</span>
                                                            <span class="text-primary">{{ $item->location->rt_code }}</span>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                    </td>
                                    <td class="text-end fw-bold {{ $item->quantity < 10 ? 'text-danger' : 'text-dark' }}">
                                        {{ number_format($item->quantity) }}
                                    </td>
                                    <td class="text-end pe-4">
                                        {{ number_format($item->quantity * ($item->product->unit_price ?? 0), 2) }}
                                    </td>
                                </tr>
                            @endforeach
                        @empty
                            <tr>
                                <td colspan="5" class="text-center py-5">
                                    <div class="d-flex flex-column align-items-center">
                                        <i class="fa-solid fa-warehouse text-muted opacity-25" style="font-size: 48px;"></i>
                                        <p class="text-muted mt-3 mb-0">No inventory records found.</p>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="d-flex justify-content-between mt-4 align-items-center">
                <div class="small text-muted">
                    Showing {{ $inventory->firstItem() ?? 0 }} to {{ $inventory->lastItem() ?? 0 }} of
                    {{ $inventory->total() }} records
                </div>
                <div>
                    {{ $inventory->appends(request()->query())->links() }}
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
<script>
$(document).ready(function() {
    if ($.fn.select2) {
        $('.select2').select2({
            theme: 'bootstrap-5',
            width: '100%'
        });
    }

    $('#location_type').on('change', function() {
        const type = $(this).val();
        const $locationSelect = $('#location_id');
        
        if (!type) {
            $locationSelect.find('optgroup').show();
            $locationSelect.find('option').show();
        } else {
            $locationSelect.find('optgroup').hide();
            $locationSelect.find('optgroup.type-' + type).show();
            $locationSelect.find('option[data-type]').hide();
            $locationSelect.find('option[data-type="' + type + '"]').show();
            $locationSelect.find('option[value=""]').show();
        }
        
        // Clear selection if not valid for new type
        const selectedOption = $locationSelect.find('option:selected');
        if (type && selectedOption.data('type') && selectedOption.data('type') !== type) {
            $locationSelect.val('').trigger('change');
        }
    });

    $('#location_id').on('change', function() {
        const $selected = $(this).find('option:selected');
        const type = $selected.data('type');
        if (type) {
            $('#location_type').val(type).trigger('change');
        }
    });
    
    // Trigger change on load if type is selected
    if ($('#location_type').val()) {
        $('#location_type').trigger('change');
    }
});

function exportToCSV() {
    const table = document.querySelector('table');
    let csv = [];
    const rows = table.querySelectorAll('tr');
    
    for (let i = 0; i < rows.length; i++) {
        const row = [], cols = rows[i].querySelectorAll('td, th');
        
        for (let j = 0; j < cols.length; j++) { // Include all columns
            let data = cols[j].innerText.replace(/(\r\n|\n|\r)/gm, ' ').replace(/\s+/g, ' ').trim();
            row.push('"' + data + '"');
        }
        
        csv.push(row.join(','));
    }
    
    const csvFile = new Blob([csv.join('\n')], { type: 'text/csv' });
    const downloadLink = document.createElement('a');
    downloadLink.download = 'inventory_report_' + new Date().toISOString().split('T')[0] + '.csv';
    downloadLink.href = window.URL.createObjectURL(csvFile);
    downloadLink.style.display = 'none';
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
}
</script>
@endpush