@extends('layouts.admin-simple')

@section('title', 'Indirect Goods - Warehouse Inventory')

@section('breadcrumb')
    <li class="breadcrumb-item">Warehouse</li>
    <li class="breadcrumb-item">Indirect Goods</li>
    <li class="breadcrumb-item active">Inventory</li>
@endsection

@section('page-title')
    <div class="d-flex justify-content-between align-items-center w-100">
        <div class="page-title-left">
            <h3 class="mb-1">Indirect Goods - Warehouse Inventory</h3>
            <p class="text-muted mb-0" style="font-size: 13px;">Current stock levels of indirect goods in warehouse</p>
        </div>
        <div class="d-flex">
            <a href="{{ route('warehouse.indirect-goods.inventory.project-inventory') }}" class="btn btn-sm btn-outline-info mr-2">
                <i class="material-icons mr-1" style="font-size: 16px;">work</i> Project Inventory
            </a>
            <a href="{{ route('warehouse.indirect-goods.inventory.low-stock') }}" class="btn btn-sm btn-outline-warning mr-2">
                <i class="material-icons mr-1" style="font-size: 16px;">warning</i> Low Stock
            </a>
            @can('warehouse.indirect-inventory.adjust')
            <a href="{{ route('warehouse.indirect-goods.inventory.adjustments') }}" class="btn btn-sm btn-outline-secondary mr-2">
                <i class="material-icons mr-1" style="font-size: 16px;">tune</i> Adjustments
            </a>
            @endcan
            @can('warehouse.indirect-goods.create')
            <a href="{{ route('warehouse.indirect-goods.catalog.index') }}?action=add" class="btn btn-sm btn-primary" title="Add new indirect good">
                <i class="material-icons mr-1" style="font-size: 16px;">add</i> Add Item
            </a>
            @endcan
        </div>
    </div>
@endsection

@section('content')
    <!-- Filters -->
    <div class="card mb-4">
        <div class="card-header">
            <h6 class="card-title mb-0"><i class="material-icons mr-2">filter_list</i>Filters</h6>
        </div>
        <div class="card-body">
            <div class="row align-items-center">
                <div class="col-md-3">
                    <label class="small font-weight-bold">Status</label>
                    <select id="filter-status" class="form-control form-control-sm">
                        <option value="">All Statuses</option>
                        <option value="in_stock">In Stock</option>
                        <option value="low_stock">Low Stock</option>
                        <option value="out_of_stock">Out of Stock</option>
                    </select>
                </div>
                <div class="col-md-2 d-flex align-items-end mt-3">
                    <button type="button" class="btn btn-sm btn-outline-secondary" onclick="$('#filter-status').val(''); $('#inventory-table').DataTable().draw();">
                        <i class="material-icons" style="font-size: 14px;">clear</i> Clear
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- DataTable -->
    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table id="inventory-table" class="table table-striped table-bordered" style="width:100%">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>IG Code</th>
                            <th>Description</th>
                            <th>Category</th>
                            <th>Invoice No.</th>
                            <th>Batch No.</th>
                            <th>Qty Available</th>
                            <th>Unit Price</th>
                            <th>Total Value</th>
                            <th>Expiry Date</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
<script>
$(document).ready(function() {
    var table = $('#inventory-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{ route("warehouse.indirect-goods.inventory.index") }}',
            data: function(d) {
                d.status = $('#filter-status').val();
            }
        },
        columns: [
            { data: 'DT_RowIndex', orderable: false, searchable: false },
            { data: 'ig_code' },
            { data: 'ig_description' },
            { data: 'category' },
            { data: 'invoice_number' },
            { data: 'batch_number' },
            {
                data: 'quantity_available',
                className: 'text-right'
            },
            { data: 'unit_price', className: 'text-right' },
            { data: 'total_value', className: 'text-right font-weight-bold' },
            { data: 'expiry_date' },
            {
                data: 'status',
                render: function(data) {
                    var badges = {
                        'in_stock': '<span class="badge badge-success">In Stock</span>',
                        'low_stock': '<span class="badge badge-warning">Low Stock</span>',
                        'out_of_stock': '<span class="badge badge-danger">Out of Stock</span>'
                    };
                    return badges[data] || data;
                }
            }
        ],
        order: [[1, 'asc']],
        pageLength: 25
    });

    $('#filter-status').change(function() { table.draw(); });
});
</script>
@endsection