@extends('layouts.admin-simple')

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

@section('breadcrumb')
    <li class="breadcrumb-item">Warehouse</li>
    <li class="breadcrumb-item">Indirect Goods</li>
    <li class="breadcrumb-item"><a href="{{ route('warehouse.indirect-goods.inventory.index') }}">Inventory</a></li>
    <li class="breadcrumb-item active">Project 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">Project Inventory</h3>
            <p class="text-muted mb-0" style="font-size: 13px;">Indirect goods stock held at project sites, tracked by invoice</p>
        </div>
        <a href="{{ route('warehouse.indirect-goods.inventory.index') }}" class="btn btn-sm btn-outline-secondary">
            <i class="material-icons mr-1" style="font-size: 16px;">arrow_back</i> Warehouse Inventory
        </a>
    </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-4">
                    <label class="small font-weight-bold">Project</label>
                    <select id="filter-project" class="form-control form-control-sm select2">
                        <option value="">All Projects</option>
                        @foreach($projects as $project)
                            <option value="{{ $project->id }}">{{ $project->project_name }}</option>
                        @endforeach
                    </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-project').val('').trigger('change'); $('#project-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="project-inventory-table" class="table table-striped table-bordered" style="width:100%">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Project</th>
                            <th>IG Code</th>
                            <th>Description</th>
                            <th>Invoice No.</th>
                            <th>Batch No.</th>
                            <th>Qty Available</th>
                            <th>Qty Consumed</th>
                            <th>Unit Price</th>
                            <th>Total Value</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
<script>
$(document).ready(function() {
    $('.select2').select2({ theme: 'bootstrap4', width: '100%' });

    var table = $('#project-inventory-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{ route("warehouse.indirect-goods.inventory.project-inventory") }}',
            data: function(d) {
                d.project_id = $('#filter-project').val();
            }
        },
        columns: [
            { data: 'DT_RowIndex', orderable: false, searchable: false },
            { data: 'project' },
            { data: 'ig_code' },
            { data: 'ig_description' },
            { data: 'invoice_number' },
            { data: 'batch_number' },
            { data: 'quantity_available', className: 'text-right' },
            { data: 'quantity_consumed', className: 'text-right text-muted' },
            { data: 'unit_price', className: 'text-right' },
            { data: 'total_value', className: 'text-right font-weight-bold' }
        ],
        order: [[1, 'asc']],
        pageLength: 25
    });

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