@extends("template.master")

@section("content")
    <div class="card">
        <div class="card-body">
            <form action="" class="row mb-4">
                <div class="mb-3 col-md-3">
                    <label for="unit_id" class="form-label">Unit</label>
                    <select class="form-select unit" id="unit_id" name="unit_id">
                        <option value="">-- Pilih Unit --</option>
                        @foreach ($units as $unit)
                            <option value="{{ $unit->id }}">{{ $unit->unit_code }}</option>
                        @endforeach
                    </select>
                </div>
                <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 ($locations as $location)
                            <option value="{{ $location->id }}">{{ $location->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3 col-md-3">
                    <label for="oil_id" class="form-label">Oli</label>
                    <select class="form-select oil" id="oil_id" name="oil_id">
                        <option value="">-- Pilih Oli --</option>
                        @foreach ($oils as $oil)
                            <option value="{{ $oil->id }}">{{ $oil->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3 col-md-3">
                    <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">Unit</th>
                        <th rowspan="2">Oli</th>
                        <th rowspan="2">Deskripsi</th>
                        <th colspan="4">Pemakaian Oli</th>
                        <th rowspan="2">Tanggal</th>
                    </tr>
                    <tr>
                        <th>Mesin</th>
                        <th>Transmisi</th>
                        <th>Hidrolik</th>
                        <th>Gardan</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 Select2
            $('#unit_id').select2({ width: '100%', theme: 'bootstrap', placeholder: 'Pilih Unit' });
            $('#location_id').select2({ width: '100%', theme: 'bootstrap', placeholder: 'Pilih Lokasi' });
            $('#oil_id').select2({ width: '100%', theme: 'bootstrap', placeholder: 'Pilih Oli' });

            // Inisialisasi DataTables
            var table = $('.data-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('used-oil-report.index') }}",
                    data: function (d) {
                        d.unit_id = $('#unit_id').val();
                        d.location_id = $('#location_id').val();
                        d.oil_id = $('#oil_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: 'unit', name: 'unit', className: 'align-middle' },
                    { data: 'oil', name: 'oil', className: 'align-middle' },
                    { data: 'description', name: 'description', className: 'align-middle' },
                    {
                        data: 'engine',
                        name: 'engine',
                        className: 'text-center',
                        render: function (data) {
                            return (data ?? 0) + ' L';
                        }
                    },
                    {
                        data: 'transmission',
                        name: 'transmission',
                        className: 'text-center',
                        render: function (data) {
                            return (data ?? 0) + ' L';
                        }
                    },
                    {
                        data: 'hidraulic',
                        name: 'hidraulic',
                        className: 'text-center',
                        render: function (data) {
                            return (data ?? 0) + ' L';
                        }
                    },
                    {
                        data: 'gardan',
                        name: 'gardan',
                        className: 'text-center',
                        render: function (data) {
                            return (data ?? 0) + ' L';
                        }
                    },

                    { data: 'date', name: 'date', className: 'align-middle' }
                ]
            });

            // Trigger reload saat filter berubah
            $('#unit_id, #location_id, #oil_id, #date_filter').on('change', function () {
                table.ajax.reload();
            });
        });
    </script>
@endpush