@extends('layout.app')
@section('title', 'Item Ledger Report')

@push('header_script')
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/datatables/dataTables.bs5.css') }}">
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/datatables/dataTables.bs5-custom.css') }}">
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/datatables/buttons/dataTables.bs5-custom.css') }}">
    <style>
        .bal-cell { background-color: rgba(255, 193, 7, 0.08) !important; }
        .bal-header { background-color: rgba(255, 193, 7, 0.18) !important; color: #856404 !important; }
    </style>
@endpush

@section('content')
<div class="app-hero-header d-flex align-items-center justify-content-between">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="{{ route('inventory.reports.stock-summary') }}">Inventory</a>
        </li>
        <li class="breadcrumb-item active">Item Ledger</li>
    </ol>
</div>

<div class="app-body">
    {{-- Filter Card --}}
    <div class="row gx-3 mb-3">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-3">
                            <label class="form-label">Category</label>
                            <select id="filter_category" class="form-control select2">
                                <option value="">-- All Categories --</option>
                                @foreach($categories as $id => $name)
                                    <option value="{{ $id }}">{{ $name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Item / Product</label>
                            <select id="filter_item" class="form-control select2">
                                <option value="">-- All Items --</option>
                                @foreach($items as $id => $name)
                                    <option value="{{ $id }}">{{ $name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Brand</label>
                            <select id="filter_brand" class="form-control select2">
                                <option value="">-- All Brands --</option>
                                @foreach($brands as $id => $name)
                                    <option value="{{ $id }}">{{ $name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Start Date</label>
                            <input type="text" id="filter_start_date" class="form-control datepicker" placeholder="DD-MM-YYYY">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">End Date</label>
                            <input type="text" id="filter_end_date" class="form-control datepicker" placeholder="DD-MM-YYYY">
                        </div>
                        <div class="col-md-12 text-end">
                            <button id="btnFilter" class="btn btn-primary"><i class="ri-filter-line me-1"></i>Apply</button>
                            <button id="btnReset" class="btn btn-light ms-2"><i class="ri-refresh-line me-1"></i>Reset</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Ledger Table --}}
    <div class="row gx-3">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-header py-3 bg-white border-bottom">
                    <h6 class="m-0 fw-bold text-dark">
                        <i class="ri-history-line text-warning me-1"></i> Stock Ledger Entries
                    </h6>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="datatable" class="table truncate m-0 align-middle">
                            <thead>
                                <tr>
                                    <th>S.no.</th>
                                    <th>Item Name</th>
                                    <th>Voucher Type</th>
                                    <th>Manufacturer</th>
                                    <th>Brand</th>
                                    <th class="text-center">Qty</th>
                                    <th class="text-center">Unit</th>
                                    <th class="text-end">Rate</th>
                                    <th class="text-end">Amount</th>
                                    <th class="text-center bal-header">Bal. Qty</th>
                                    <th class="text-center bal-header">Unit</th>
                                    <th class="text-end bal-header">Bal. Rate</th>
                                    <th class="text-end bal-header">Bal. Amount</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('footer_script')
    <script src="{{ asset('theme/assets/vendor/datatables/dataTables.min.js') }}"></script>
    <script src="{{ asset('theme/assets/vendor/datatables/dataTables.bootstrap.min.js') }}"></script>
    <script src="{{ asset('theme/assets/vendor/datatables/custom/custom-datatables.js') }}"></script>

    <script>
        var table = $('#datatable').DataTable({
            processing: true,
            serverSide: true,
            stateSave: true,
            responsive: true,
            ajax: {
                url: '{{ route('inventory.reports.item-ledger.getData') }}',
                data: function(d) {
                    d.category_id = $('#filter_category').val();
                    d.item_id     = $('#filter_item').val();
                    d.brand_id    = $('#filter_brand').val();
                    d.start_date  = $('#filter_start_date').val();
                    d.end_date    = $('#filter_end_date').val();
                }
            },
            columns: [
                { data: 'DT_RowIndex',  name: 'DT_RowIndex',  searchable: false, orderable: false },
                { data: 'product_name', name: 'product_name' },
                {
                    data: 'voucher_type', name: 'voucher_type', className: 'text-center',
                    render: function(data, type, row) {
                        var cls = (data.toLowerCase().includes('inward') || data.toLowerCase().includes('purchase'))
                            ? 'bg-soft-success text-success' : 'bg-soft-danger text-danger';
                        return `<span class="badge ${cls}">${data}</span>`;
                    }
                },
                { data: 'manufacturer', name: 'manufacturer' },
                { data: 'brand_name',   name: 'brand_name' },
                {
                    data: 'qty', name: 'qty', className: 'text-center fw-bold',
                    render: function(data, type, row) {
                        var cls = row.is_inward ? 'text-success' : 'text-danger';
                        return `<span class="${cls}">${data}</span>`;
                    }
                },
                { data: 'unit',      name: 'unit',      className: 'text-center' },
                { data: 'rate',      name: 'rate',      className: 'text-end' },
                { data: 'amount',    name: 'amount',    className: 'text-end' },
                { data: 'bal_qty',   name: 'bal_qty',   className: 'text-center bal-cell' },
                { data: 'bal_unit',  name: 'bal_unit',  className: 'text-center bal-cell' },
                { data: 'bal_rate',  name: 'bal_rate',  className: 'text-end bal-cell' },
                { data: 'bal_amount',name: 'bal_amount',className: 'text-end bal-cell fw-bold text-dark' },
            ]
        });

        $('#btnFilter').on('click', function() {
            table.draw();
        });

        $('#btnReset').on('click', function() {
            $('#filter_category, #filter_item, #filter_brand').val('').trigger('change');
            $('#filter_start_date, #filter_end_date').val('');
            table.draw();
        });
    </script>
@endpush