@extends("template.master")

@section("content")
    <div class="card">
        <div class="card-body">
            <form action="" class="row mb-4">
                <div class="mb-3 col-md-6">
                    <label for="date_filter" class="form-label">Tanggal</label>
                    <input type="text" class="form-control" id="date_filter" name="date[]"
                        placeholder="Pilih rentang tanggal">
                </div>
            </form>

            <table class="table table-striped data-table w-100">
                <thead class="text-center align-middle">
                    <tr>
                        <th rowspan="2">No</th>
                        <th rowspan="2">Part No</th>
                        <th rowspan="2">Part No. 2</th>
                        <th rowspan="2">Deskripsi</th>
                        <th colspan="2">Sites</th>
                        <th rowspan="2">Quantity</th>
                        <th rowspan="2">Tanggal</th>
                        <th rowspan="2">User</th>
                    </tr>
                    <tr>
                        <th>Dari</th>
                        <th>Ke</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
@endsection

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



            // Inisialisasi DataTables
            var table = $('.data-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('sparepart-transfer-report.index') }}",
                    data: function (d) {
                        const dateRange = $('#date_filter').val(); // Contoh: "2025-08-01 to 2025-08-15"
                        d.date = dateRange ? dateRange.split(' to ').map(t => t.trim()) : [];
                    }
                },
                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_2' },
                    { data: 'description', name: 'description' },
                    { data: 'location_from', name: 'location_from' },
                    { data: 'location_to', name: 'location_to' },
                    { data: 'qty', name: 'qty' },
                    { data: 'date', name: 'date' },
                    { data: 'user', name: 'user' },
                ]

            });

            $('#date_filter').on('change', function () {
                table.ajax.reload();
            });
        });
    </script>
@endpush