@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="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>
                <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>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>User</th>
                        <th>Aksi</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
            $('#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-receive-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: 'description', name: 'description', },
                    { data: 'supplier', name: 'supplier', },
                    { data: 'price', name: 'price', },
                    { data: 'location', name: 'location', },
                    { data: 'qty', name: 'qty', },
                    { data: 'user', name: 'user', },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ]
            });

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


            $(document).on("click", ".delete", function () {
                var id = $(this).data("id");

                Swal.fire({
                    title: 'Apakah kamu yakin?',
                    text: "Data akan dihapus secara permanen!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#3085d6',
                    confirmButtonText: 'Ya, hapus!',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: '/sparepart-receive-report/' + id,
                            type: 'DELETE',
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            success: function (res) {
                                Swal.fire('Terhapus!', res.message, 'success');
                                $('.data-table').DataTable().ajax.reload();
                            },
                            error: function (xhr) {
                                console.log(xhr);
                                Swal.fire('Gagal!', 'Data gagal dihapus.', 'error');
                            }
                        });
                    }
                });
            });
        });
    </script>
@endpush