@extends("template.master")

@section("content")
<div class="mb-3">
    <label for="filter-unit" class="form-label">Filter Unit</label>
    <select id="filter-unit" class="form-control">
        <option value="">-- Semua Unit --</option>
        @foreach ($units as $unit)
            <option value="{{ $unit->id }}">{{ $unit->unit_code }}</option>
        @endforeach
    </select>
</div>

    <div class="card">
        <div class="card-body">
            <table class="table table-striped data-table">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Unit</th>
                        <th>Hour Meter</th>
                        <th>Sparepart</th>
                        <th>Deskripsi</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
@endsection

@push("extraJS")
<script>
    $(function () {
        var table = $('.data-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('preventive-maintenance-report.index') }}",
                data: function (d) {
                    d.unit_id = $('#filter-unit').val();
                }
            },
            columnDefs: [
                { width: "50px", targets: 0 }
            ],
            columns: [
                {
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    className: 'text-center',
                    orderable: false,
                    searchable: false
                },
                { data: 'unit', name: 'unit' },
                { data: 'hour_meter', name: 'hour_meter' },
                { data: 'spareparts', name: 'spareparts' },
                { data: 'description', name: 'description' },
            ]
        });

        // Trigger ulang saat dropdown berubah
        $('#filter-unit').on('change', function () {
            table.ajax.reload();
        });
    });
</script>
@endpush