@extends('layouts.admin-simple')

@section('title', 'Indirect Goods - Consumption')

@section('breadcrumb')
    <li class="breadcrumb-item">Warehouse</li>
    <li class="breadcrumb-item">Indirect Goods</li>
    <li class="breadcrumb-item active">Consumption</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">Consumption / Write-Off Records</h3>
            <p class="text-muted mb-0" style="font-size: 13px;">Track consumption and write-offs of indirect goods from projects</p>
        </div>
        @can('warehouse.indirect-consumption.create')
        <a href="{{ route('warehouse.indirect-goods.consumption.create') }}" class="btn btn-sm btn-primary">
            <i class="material-icons mr-1" style="font-size: 16px;">add</i>
            Record Consumption
        </a>
        @endcan
    </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">Project</label>
                    <select id="filter-project" class="form-control form-control-sm">
                        <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">
                    <label class="small font-weight-bold">Type</label>
                    <select id="filter-type" class="form-control form-control-sm">
                        <option value="">All Types</option>
                        <option value="consumed">Consumed</option>
                        <option value="written_off">Written Off</option>
                        <option value="damaged">Damaged</option>
                        <option value="expired">Expired</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="small font-weight-bold">Date From</label>
                    <input type="date" id="filter-date-from" class="form-control form-control-sm">
                </div>
                <div class="col-md-2">
                    <label class="small font-weight-bold">Date To</label>
                    <input type="date" id="filter-date-to" class="form-control form-control-sm">
                </div>
                <div class="col-md-2 d-flex align-items-end mt-3">
                    <button type="button" class="btn btn-sm btn-outline-secondary" onclick="clearFilters()">
                        <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="consumption-table" class="table table-striped table-bordered" style="width:100%">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Consumption No.</th>
                            <th>Date</th>
                            <th>Project</th>
                            <th>Indirect Good</th>
                            <th>Invoice No.</th>
                            <th>Qty Consumed</th>
                            <th>Type</th>
                            <th>Recorded By</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
<script>
$(document).ready(function() {
    var table = $('#consumption-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{ route("warehouse.indirect-goods.consumption.index") }}',
            data: function(d) {
                d.project_id = $('#filter-project').val();
                d.consumption_type = $('#filter-type').val();
                d.date_from = $('#filter-date-from').val();
                d.date_to = $('#filter-date-to').val();
            }
        },
        columns: [
            { data: 'DT_RowIndex', orderable: false, searchable: false },
            { data: 'consumption_number' },
            { data: 'consumption_date' },
            { data: 'project' },
            { data: 'indirect_good' },
            { data: 'invoice_number' },
            { data: 'quantity_consumed' },
            {
                data: 'consumption_type',
                render: function(data) {
                    var badges = {
                        'consumed': '<span class="badge badge-success">Consumed</span>',
                        'written_off': '<span class="badge badge-warning">Written Off</span>',
                        'damaged': '<span class="badge badge-danger">Damaged</span>',
                        'expired': '<span class="badge badge-secondary">Expired</span>'
                    };
                    return badges[data] || data;
                }
            },
            { data: 'recorded_by' },
            {
                data: 'id',
                orderable: false,
                render: function(data) {
                    return '<a href="/warehouse/indirect-goods/consumption/' + data + '" class="btn btn-sm btn-outline-info" title="View"><i class="material-icons" style="font-size:16px;">visibility</i></a>';
                }
            }
        ],
        order: [[2, 'desc']],
        pageLength: 25
    });

    $('#filter-project, #filter-type').change(function() { table.draw(); });
    $('#filter-date-from, #filter-date-to').change(function() { table.draw(); });
});

function clearFilters() {
    $('#filter-project').val('').trigger('change');
    $('#filter-type').val('');
    $('#filter-date-from').val('');
    $('#filter-date-to').val('');
    $('#consumption-table').DataTable().draw();
}
</script>
@endsection