@extends('layouts.app')
@section('title','Inventory')
@push('styles')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/dataTables.bootstrap5.min.css">
@endpush
@section('content')
<div class="d-flex align-items-center justify-content-between mb-4">
    <div>
        <h1 class="h4 fw-semibold mb-0"><i class="ti ti-box-seam me-2 text-primary"></i>Inventory</h1>
        <nav aria-label="breadcrumb"><ol class="breadcrumb breadcrumb-chevron mb-0 small"><li class="breadcrumb-item"><a href="{{ route('dashboard') }}" class="text-decoration-none">Dashboard</a></li><li class="breadcrumb-item active">Inventory</li></ol></nav>
    </div>
    @can('create',\App\Models\InventoryItem::class)
    <a href="{{ route('inventory.create') }}" class="btn btn-primary"><i class="ti ti-plus me-1"></i>New Item</a>
    @endcan
</div>
@include('partials._alerts')

{{-- KPI Cards --}}
<div class="row g-3 mb-4">
    @php $kpis=[['l'=>'Total','v'=>$stats['total'],'c'=>'primary','i'=>'ti-box'],['l'=>'Active','v'=>$stats['active'],'c'=>'success','i'=>'ti-circle-check'],['l'=>'Low Stock','v'=>$stats['low_stock'],'c'=>$stats['low_stock']>0?'warning':'success','i'=>'ti-alert-triangle'],['l'=>'Expiring Soon','v'=>$stats['expiring_soon'],'c'=>$stats['expiring_soon']>0?'warning':'success','i'=>'ti-clock-exclamation'],['l'=>'Expired','v'=>$stats['expired'],'c'=>$stats['expired']>0?'danger':'success','i'=>'ti-calendar-x'],['l'=>'Out of Stock','v'=>$stats['out_of_stock'],'c'=>$stats['out_of_stock']>0?'danger':'success','i'=>'ti-ban']]; @endphp
    @foreach($kpis as $k)
    <div class="col-6 col-sm-4 col-xl-2">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body py-3 px-3 d-flex align-items-center gap-3">
                <div class="rounded-2 d-flex align-items-center justify-content-center bg-{{ $k['c'] }} bg-opacity-10 text-{{ $k['c'] }}" style="width:36px;height:36px;flex-shrink:0"><i class="ti {{ $k['i'] }}" style="font-size:.9rem"></i></div>
                <div><div class="text-muted" style="font-size:.7rem;text-transform:uppercase;letter-spacing:.04em">{{ $k['l'] }}</div><div class="fw-bold text-{{ $k['c'] }}" style="font-size:1.3rem;line-height:1">{{ number_format($k['v']) }}</div></div>
            </div>
        </div>
    </div>
    @endforeach
</div>

{{-- Filter Bar --}}
<div class="card border-0 shadow-sm mb-4" style="background:var(--bs-tertiary-bg,#f8f9fa)">
    <div class="card-body py-3">
        <div class="row g-2 align-items-end">
            <div class="col-12 col-sm-6 col-md-3 col-xl-2">
                <label class="form-label small fw-semibold text-muted text-uppercase mb-1">Category</label>
                <select id="filter-category" class="form-select form-select-sm">
                    <option value="">All Categories</option>
                    @foreach($categories as $cat)<option value="{{ $cat->id }}">{{ $cat->name }}</option>@endforeach
                </select>
            </div>
            <div class="col-12 col-sm-6 col-md-3 col-xl-2">
                <label class="form-label small fw-semibold text-muted text-uppercase mb-1">Supplier</label>
                <select id="filter-supplier" class="form-select form-select-sm">
                    <option value="">All Suppliers</option>
                    @foreach($suppliers as $sup)<option value="{{ $sup->id }}">{{ $sup->name }}</option>@endforeach
                </select>
            </div>
            <div class="col-6 col-md-2 col-xl-2">
                <label class="form-label small fw-semibold text-muted text-uppercase mb-1">Status</label>
                <select id="filter-status" class="form-select form-select-sm">
                    <option value="">All</option><option value="1">Active</option><option value="0">Inactive</option>
                </select>
            </div>
            <div class="col-6 col-md-2 col-xl-2">
                <label class="form-label small fw-semibold text-muted text-uppercase mb-1">Quick Filter</label>
                <select id="filter-quick" class="form-select form-select-sm">
                    <option value="">None</option><option value="low_stock">Low Stock</option><option value="expiring_soon">Expiring Soon</option>
                </select>
            </div>
            <div class="col-6 col-md-1 col-xl-1">
                <label class="form-label small d-none d-md-block">&nbsp;</label>
                <button id="btn-reset" class="btn btn-sm btn-outline-secondary w-100"><i class="ti ti-refresh"></i></button>
            </div>
            <div class="col-6 col-md-auto ms-md-auto">
                <label class="form-label small d-none d-sm-block">&nbsp;</label>
                <div class="d-flex gap-2">
                    <a id="btn-excel" href="{{ route('inventory.export','excel') }}" class="btn btn-sm btn-outline-success"><i class="ti ti-file-spreadsheet me-1"></i>Excel</a>
                    <a id="btn-pdf" href="{{ route('inventory.export','pdf') }}" class="btn btn-sm btn-outline-danger"><i class="ti ti-file-type-pdf me-1"></i>PDF</a>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- DataTable --}}
<div class="card border-0 shadow-sm">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table id="inventory-table" class="table table-hover align-middle mb-0 w-100">
                <thead class="table-light" style="font-size:.75rem">
                    <tr><th>SKU</th><th>Name</th><th>Category</th><th>Supplier</th><th>UOM</th><th class="text-end">Qty</th><th class="text-end">Reorder</th><th>Expiry</th><th class="text-center">Status</th><th class="text-center">Actions</th></tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

{{-- Delete Modal --}}
<div class="modal fade" id="deleteModal" tabindex="-1"><div class="modal-dialog modal-dialog-centered"><div class="modal-content border-0 shadow">
    <div class="modal-header border-0"><h5 class="modal-title fw-semibold"><i class="ti ti-alert-circle text-danger me-2"></i>Deactivate Item</h5><button class="btn-close" data-bs-dismiss="modal"></button></div>
    <div class="modal-body text-muted small">Are you sure you want to deactivate <strong class="text-body" id="delete-name"></strong>? Stock history will be preserved.</div>
    <div class="modal-footer border-0"><button class="btn btn-light" data-bs-dismiss="modal">Cancel</button><form id="delete-form" method="POST">@csrf @method('DELETE')<button type="submit" class="btn btn-danger">Deactivate</button></form></div>
</div></div></div>
@endsection
@push('scripts')
<script>
$(function(){
    const CAN_EDIT   = @json(auth()->user()->can('update',\App\Models\InventoryItem::class));
    const CAN_DELETE = @json(auth()->user()->can('delete',\App\Models\InventoryItem::class));
    const CSRF       = '{{ csrf_token() }}';

    const table = $('#inventory-table').DataTable({
        processing:false, serverSide:true,
        ajax:{url:'{{ route("inventory.datatable") }}',type:'GET',
            beforeSend:()=>$('#inventory-table_processing').show(),
            complete:()=>$('#inventory-table_processing').hide(),
            data:d=>{d.category_id=$('#filter-category').val();d.supplier_id=$('#filter-supplier').val();d.is_active=$('#filter-status').val();d.low_stock=$('#filter-quick').val()==='low_stock'?1:'';d.expiring_soon=$('#filter-quick').val()==='expiring_soon'?1:''}
        },
        columns:[
            {data:'sku',name:'sku',render:v=>`<span class="font-monospace small text-muted">${v}</span>`},
            {data:'name',name:'name',render:(v,t,r)=>`<a href="/inventory/${r.id}" class="text-decoration-none fw-medium text-body small">${v}</a>`},
            {data:'category',name:'category_id',orderable:false,render:v=>v?`<span class="badge bg-light text-secondary border small">${v}</span>`:'<span class="text-muted">—</span>'},
            {data:'supplier',name:'supplier_id',orderable:false,render:v=>v||'<span class="text-muted small">—</span>'},
            {data:'unit_of_measure',name:'unit_of_measure',className:'small text-muted'},
            {data:'current_quantity',name:'current_quantity',className:'text-end',render:(v,t,r)=>{const z=parseFloat(v)<=0,l=r.is_low_stock&&!z;return `<span class="fw-semibold ${z?'text-danger':l?'text-warning':'text-success'}" style="font-family:monospace">${v}</span>`}},
            {data:'reorder_level',name:'reorder_level',className:'text-end text-muted small'},
            {data:'expiry_date',name:'expiry_date',render:(v,t,r)=>v&&v!=='—'?`<span class="small ${r.is_expired?'text-danger fw-semibold':r.is_expiring_soon?'text-warning fw-semibold':''}">${v}</span>`:'<span class="text-muted small">—</span>'},
            {data:'is_active',name:'is_active',className:'text-center',orderable:false,render:(v,t,r)=>{if(r.is_expired) return '<span class="badge bg-danger" style="font-size:.68rem">Expired</span>';if(r.is_expiring_soon) return '<span class="badge bg-warning text-dark" style="font-size:.68rem">Expiring</span>';if(r.is_low_stock) return '<span class="badge bg-warning text-dark" style="font-size:.68rem">Low Stock</span>';if(!v) return '<span class="badge bg-secondary" style="font-size:.68rem">Inactive</span>';return '<span class="badge bg-success" style="font-size:.68rem">Active</span>'}},
            {data:'id',name:'actions',className:'text-center',orderable:false,searchable:false,render:(id,t,r)=>{let h=`<div class="d-flex gap-1 justify-content-center"><a href="/inventory/${id}" class="btn btn-sm btn-light py-1 px-2" title="View"><i class="ti ti-eye text-primary" style="font-size:.8rem"></i></a>`;if(CAN_EDIT) h+=`<a href="/inventory/${id}/edit" class="btn btn-sm btn-light py-1 px-2" title="Edit"><i class="ti ti-pencil" style="font-size:.8rem"></i></a>`;if(CAN_DELETE) h+=`<button class="btn btn-sm btn-light py-1 px-2 btn-delete" data-id="${id}" data-name="${r.name}" title="Deactivate"><i class="ti ti-trash text-danger" style="font-size:.8rem"></i></button>`;return h+'</div>'}}
        ],
        order:[[1,'asc']], pageLength:25, lengthMenu:[10,25,50,100],
        dom:"<'row mb-3 mt-3 px-3'<'col-sm-6'l><'col-sm-6 text-end'f>><'row'<'col-12'tr>><'row mt-3 px-3 pb-3'<'col-sm-5'i><'col-sm-7 d-flex justify-content-end'p>>",
        language:{search:'',searchPlaceholder:'Search SKU, name…',emptyTable:'<div class="py-4 text-muted"><i class="ti ti-inbox d-block mb-1" style="font-size:1.5rem"></i>No items found</div>',zeroRecords:'<div class="py-4 text-muted"><i class="ti ti-search d-block mb-1" style="font-size:1.5rem"></i>No matches</div>'},
        createdRow:function(row,data){$(row).removeClass('table-danger table-warning');if(data.is_expired)$(row).addClass('table-danger');else if(data.is_low_stock||data.is_expiring_soon)$(row).addClass('table-warning');if(!data.is_active)$(row).css('opacity','.6')}
    });

    $('#filter-category,#filter-supplier,#filter-status,#filter-quick').on('change',()=>table.draw());
    $('#btn-reset').on('click',()=>{$('#filter-category,#filter-supplier,#filter-status,#filter-quick').val('');table.search('').draw()});
    $(document).on('click','.btn-delete',function(){$('#delete-name').text($(this).data('name'));$('#delete-form').attr('action',`/inventory/${$(this).data('id')}`);new bootstrap.Modal('#deleteModal').show()});
});
</script>
@endpush