@extends('template.master')

@section('content')
    <div class="card">
        <div class="card-body">
            <form action="" class="mb-4 row">
                <div class="mb-3 col-md-3">
                    <label for="location_id" class="form-label">Lokasi</label>
                    <select class="form-select location" id="location_id" name="location_id">
                        <option value="">-- Pilih Lokasi --</option>
                        @foreach ($location as $l)
                            <option value="{{ $l->id }}">{{ $l->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3 col-md-3">
                    <label for="rak_id" class="form-label">Rak</label>
                    <select class="form-select location" id="rak_id" name="rak_id">
                        <option value="">-- Pilih Rak --</option>
                        @foreach ($rak as $r)
                            <option value="{{ $r->id }}">{{ $r->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3 col-md-3">
                    <label for="supplier_id" class="form-label">Suplier</label>
                    <select class="form-select location" id="supplier_id" name="supplier_id">
                        <option value="">-- Pilih Suplier --</option>
                        @foreach ($supplier as $s)
                            <option value="{{ $s->id }}">{{ $s->name }}</option>
                        @endforeach
                    </select>
                </div>
            </form>

            <table class="table table-striped data-table w-100">
                <thead class="text-center align-middle">
                    <tr>
                        <th>No</th>
                        <th>Part No</th>
                        <th>Part No. 2</th>
                        <th>Deskripsi</th>
                        <th>Suplier</th>
                        <th>Harga</th>
                        <th>Lokasi</th>
                        <th>Quantity</th>
                        <th>Total Harga</th>
                    </tr>
                </thead>
                <tbody></tbody>
                <tfoot>
                    <tr>
                        <th class="text-end">Total</th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th id="total-sum" class="text-start">-</th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
@endsection

@push('extraJS')
    <script>
        $(function() {
            flatpickr("#date_filter", {
                mode: "range",
                dateFormat: "Y-m-d",
                allowInput: true
            });


            // Inisialisasi Select2
            $('#location_id').select2({
                width: '100%',
                theme: 'bootstrap',
                placeholder: 'Pilih Lokasi'
            });
            $('#rak_id').select2({
                width: '100%',
                theme: 'bootstrap',
                placeholder: 'Pilih Rak'
            });
            $('#supplier_id').select2({
                width: '100%',
                theme: 'bootstrap',
                placeholder: 'Pilih Suplier'
            });

            // Inisialisasi DataTables
            var table = $('.data-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('sparepart-report.index') }}",
                    data: function(d) {
                        d.location_id = $('#location_id').val();
                        d.rak_id = $('#rak_id').val();
                        d.supplier_id = $('#supplier_id').val();
                        const dateRange = $('#date_filter').val(); // Contoh: "2025-08-01 to 2025-08-15"
                        d.date = dateRange ? dateRange.split(' to ').map(t => t.trim()) : [];
                        console.log(d);
                    }
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        className: 'text-center align-middle',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'part_number_1',
                        name: 'part_number_1',
                    },
                    {
                        data: 'part_number_2',
                        name: 'part_number_1',
                    },
                    {
                        data: 'name',
                        name: 'name',
                    },
                    {
                        data: 'supplier',
                        name: 'supplier',
                    },
                    {
                        data: 'price',
                        name: 'price',
                    },
                    {
                        data: 'location',
                        name: 'location',
                    },
                    {
                        data: 'qty',
                        name: 'qty',
                    },
                    {
                        data: 'total',
                        name: 'total',
                    },
                ],
                footerCallback: function(row, data, start, end, display) {
                    let total = 0;
                    data.forEach(function(row) {
                        let val = (row.total || '0').replace(/[^0-9]/g, '');
                        total += parseInt(val);
                    });

                    const totalFormatted = new Intl.NumberFormat('id-ID', {
                        style: 'currency',
                        currency: 'IDR',
                        minimumFractionDigits: 0
                    }).format(total);

                    $('#total-sum').html(totalFormatted);
                }
            });

            // Trigger reload saat filter berubah
            $('#location_id,#rak_id,#supplier_id, #date_filter').on('change', function() {
                table.ajax.reload();
            });

        });
    </script>
@endpush