@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        {{-- check authorize add --}}
                        @if ($authorize->add == '1')
                            {{-- button execute --}}
                            <button class="btn btn-primary mb-0"
                                onclick="event.preventDefault(); $('#kode_lemari').trigger('change'); document.getElementById('{{ $dmenu }}-form').submit();"><i
                                    class="fas fa-bolt me-1"> </i><span class="font-weight-bold">Execute</span></button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-lg-5">
                <div class="card">
                    <form role="form" method="POST" action="{{ URL::to($url_menu) }}" id="{{ $dmenu }}-form">
                        @csrf
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Filter {{ $title_menu }}</p>
                            <hr class="horizontal dark mt-0">
                            <div class="row">
                                {{-- Filter for Jenis Loker --}}
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="nama_loker">Jenis Loker</label>
                                        <select name="nama_loker" id="nama_loker" class="form-select">
                                            <option value="" selected>Pilih Jenis Loker</option>
                                            @foreach ($jenisLoker as $jenis)
                                                <option value="{{ $jenis->id }}" loker-id="{{ $jenis->id }}">
                                                    {{ $jenis->nama_loker }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                {{-- Filter for Gedung --}}
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="nama_gedung">Gedung</label>
                                        <select name="nama_gedung" id="nama_gedung" class="form-select">
                                            <option value="" selected disabled>Pilih Gedung</option>
                                        </select>
                                    </div>
                                </div>

                                {{-- Filter for Lokasi --}}
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="nama_lokasi">Lokasi</label>
                                        <select name="nama_lokasi" id="nama_lokasi" class="form-select">
                                            <option value="" selected disabled>Pilih Lokasi</option>
                                        </select>
                                    </div>
                                </div>

                                {{-- Filter for Kode Pintu --}}
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="kode_lemari">Kode Lemari</label>
                                        <select name="kode_lemari" id="kode_lemari" class="form-select" required>
                                            <option value="" selected>Pilih Kode Lemari</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <hr class="horizontal dark">
                        </div>
                        <div class="card-footer align-items-center pt-0 pb-2">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- AJAX script to filter Kode Pintu based on selected Jenis Loker, Gedung, and Lokasi --}}
    <script>
        $(document).ready(function() {
            // Filter gedung dan lokasi berdasarkan jenis loker
            $('#nama_loker').change(function() {
                const selectedOption = this.options[this.selectedIndex];
                const idLoker = selectedOption.getAttribute('loker-id');
                console.log(idLoker);

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                $.ajax({
                    url: '{{ URL::to('/') }}/trsrah/getGedungByJenisLoker',
                    type: 'POST',
                    data: {
                        id_jenis_loker: idLoker
                    },
                    success: function(res) {
                        if (res.status == 'success') {
                            $('#nama_gedung').empty();

                            $('#nama_gedung').append(`<option value="">Pilih Gedung</option>`)

                            res.data.forEach(dt => {
                                $('#nama_gedung').append(
                                    `<option value="${dt.id}" gedung-id="${dt.id}">${dt.nama_gedung}</option>`
                                )
                            });
                        }
                    },
                    error: function(err) {
                        console.log('Gagal:', err);
                    }
                });

            })

            $('#nama_gedung').change(function() {
                const selectedOption = this.options[this.selectedIndex];
                const idgedung = selectedOption.getAttribute('gedung-id');

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                $.ajax({
                    url: '{{ URL::to('/') }}/trsrah/getLokasiByGedung',
                    type: 'POST',
                    data: {
                        id_gedung: idgedung
                    },
                    success: function(res) {
                        if (res.status == 'success') {
                            $('#nama_lokasi').empty();

                            $('#nama_lokasi').append(`<option value="">Pilih Lokasi</option>`)

                            res.data.forEach(dt => {
                                $('#nama_lokasi').append(
                                    `<option value="${dt.id}" lokasi-id="${dt.id}">${dt.nama_lokasi}</option>`
                                )
                            });
                        }
                    },
                    error: function(err) {
                        console.log('Gagal:', err);
                    }
                });

            })

            //Event handler untuk memanggil AJAX
            $('#nama_lokasi, #nama_gedung, #nama_loker').on('change', function() {
                const jenisLoker = $('#nama_loker').val();
                const gedung = $('#nama_gedung').val();
                const lokasi = $('#nama_lokasi').val();

                // Clear existing options in kode lemari
                $('#kode_lemari').empty().append(
                    '<option value="" selected>Pilih lemari</option>');

                $.ajax({
                    url: '{{ route('getkodelemari') }}',
                    method: 'GET',
                    data: {
                        jenis_loker: jenisLoker,
                        gedung: gedung,
                        lokasi: lokasi
                    },
                    success: function(data) {
                        console.log("Data received:", data); // Debugging: Log data received
                        const uniqueLemari = new Set();

                        // Clear existing options in kode lemari
                        $('#kode_lemari').empty().append(
                            '<option value="" selected>Pilih lemari</option>');

                        data.forEach(function(loker) {
                            if (!uniqueLemari.has(loker.kode_lemari)) {
                                uniqueLemari.add(loker.kode_lemari);
                                $('#kode_lemari').append(new Option(loker.kode_lemari,
                                    loker.kode_lemari));
                            }
                        });

                        $('#kode_lemari').select2(); // Reinitialize Select2
                    },
                    error: function() {
                        alert('Error fetching kode lemari.'); // Handle error
                    }
                });
            });

            // Trigger AJAX call to load all kode lemari on page load
            $('#nama_loker, #nama_gedung, #nama_lokasi').trigger('change');
        });
    </script>
@endsection