@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@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">
                        <button class="btn btn-secondary mb-0" onclick="history.back()">
                            <i class="fas fa-circle-left me-1"></i>
                            <span class="font-weight-bold">Kembali</span>
                        </button>
                        @if ($authorize->add == '1')
                            <button class="btn btn-primary mb-0"
                                onclick="event.preventDefault(); document.getElementById('{{ $dmenu }}-form').submit();">
                                <i class="fas fa-floppy-disk me-1"></i>
                                <span class="font-weight-bold">Simpan</span>
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    @if (session()->has('error'))
                        <div class="alert alert-danger" style="color: #FFFFFF;">
                            {{ session()->get('error') }}
                        </div>
                    @endif
                    <form role="form" method="POST" action="{{ URL::to($url_menu) }}" id="{{ $dmenu }}-form"
                        enctype="multipart/form-data">
                        @csrf
                        <div class="container-fluid py-4">
                            <div class="mb-3">
                                <div class="form-group">
                                    <label for="nama" class="form-label">Nama<span class="text-danger">*</span></label>
                                    <select name="nama" id="nama" class="form-select form-select-lg mb-3"
                                        aria-label="Nama" required>
                                        <option value="" selected disabled>Pilih Karyawan</option>
                                        @foreach ($karyawans as $karyawan)
                                            <option value="{{ $karyawan->nama_karyawan }}">{{ $karyawan->nik }} -
                                                {{ $karyawan->nama_karyawan }} - {{ $karyawan->nama_departemen }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="nama_loker" class="form-label">Jenis Loker<span
                                            class="text-danger">*</span></label>
                                    <select name="nama_loker" id="idjenisloker" class="form-select form-select-lg mb-3"
                                        aria-label="Jenis Loker" required>
                                        <option value="" selected disabled>Pilih Jenis Loker</option>
                                        @foreach ($jenisLoker as $jenis)
                                            <option value="{{ $jenis->id }}"
                                                {{ request('nama_loker') == $jenis->id ? 'selected' : '' }}
                                                loker-id="{{ $jenis->id }}">
                                                {{ $jenis->nama_loker }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="nama_gedung" class="form-label">Gedung<span
                                            class="text-danger">*</span></label>
                                    <select name="nama_gedung" id="gedung" class="form-select form-select-lg mb-3"
                                        aria-label="gedung" required>
                                        <option value="" selected>Pilih Gedung</option>

                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="nama_lokasi" class="form-label">Lokasi<span
                                            class="text-danger">*</span></label>
                                    <select name="nama_lokasi" id="lokasi" class="form-select form-select-lg mb-3"
                                        aria-label="nama_lokasi" required>
                                        <option value="" selected>Pilih Lokasi</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="kodepintu" class="form-label">Kode Pintu <span
                                            class="text-danger">*</span></label>
                                    <select name="kodepintu" id="kodepintu" class="form-control select2" required>
                                        <option value="" selected disabled>Pilih Pintu</option>
                                        @if (request('kodepintu'))
                                            <option value="{{ request('kodepintu') }}" selected>{{ request('kodepintu') }}
                                            </option>
                                        @endif
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="tanggal_pengajuan">Tanggal Pengajuan Serah Terima Loker <span
                                            class="text-danger">*</span></label>
                                    <input type="date" value="{{ date('Y-m-d') }}" name="tanggal_pengajuan"
                                        id="tanggal_pengajuan" class="form-control" required>
                                </div>
                                <div class="form-group">
                                    <label for="quantity">Quantity <span class="text-danger">*</span></label>
                                    <input type="number" value="1" name="quantity" id="quantity" class="form-control"
                                        readonly>
                                </div>
                                <div class="form-group">
                                    <label for="unit">Unit <span class="text-danger">*</span></label>
                                    <input type="text" value="pcs" name="unit" id="unit" class="form-control"
                                        readonly>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {
            // Inisialisasi Select2 dengan placeholder
            $('#nama').select2({
                placeholder: "Cari dan pilih nama",
                allowClear: true
            });

            // Validasi form sebelum submit
            $('#{{ $dmenu }}-form').submit(function(e) {
                var isValid = true;
                $(this).find('select, input[required]').each(function() {
                    if (!$(this).val()) {
                        isValid = false;
                        $(this).addClass('is-invalid');
                    } else {
                        $(this).removeClass('is-invalid');
                    }
                });

                if (!isValid) {
                    e.preventDefault();
                    alert('Mohon isi semua field yang wajib diisi.');
                }
            });

            // // Filter gedung dan lokasi berdasarkan jenis loker
            // $('#nama_loker').change(function() {
            //     const selectedJenis = $(this).find('option:selected').text();

            //     $('#nama_gedung option').each(function() {
            //         const gedungNama = $(this).text();
            //         if (selectedJenis === 'Central' && gedungNama !== 'Central') {
            //             $(this).hide();
            //         } else if (selectedJenis === 'APD' && !['Gedung A', 'Gedung B', 'Gedung C',
            //                 'Gedung E', 'Gedung F'
            //             ].includes(gedungNama)) {
            //             $(this).hide();
            //         } else {
            //             $(this).show();
            //         }
            //     });

            //     // Reset pilihan gedung dan lokasi
            //     $('#nama_gedung').val('').trigger('change');
            //     $('#nama_lokasi').val('').trigger('change');
            // });

            // $('#nama_gedung').change(function() {
            //     const selectedJenis = $('#nama_loker').find('option:selected').text();
            //     console.log(selectedJenis);
            //     const selectedGedung = $(this).find('option:selected').text();

            //     $('#nama_lokasi option').each(function() {
            //         const lokasiNama = $(this).text();
            //         if (selectedJenis === 'Central' && !['Central OS', 'Central MSJ'].includes(
            //                 lokasiNama)) {
            //             $(this).hide();
            //         } else if (selectedGedung === 'Gedung A' && !['Gedung A', 'APD-Office',
            //                 'APD-GBJ', 'PU'
            //             ].includes(lokasiNama)) {
            //             $(this).hide();
            //         } else if (selectedGedung === 'Gedung B' && !['Gedung B', 'Jishuken'].includes(
            //                 lokasiNama)) {
            //             $(this).hide();
            //         } else if (selectedGedung === 'Gedung C' && lokasiNama !== 'Gedung C') {
            //             $(this).hide();
            //         } else if (selectedGedung === 'Gedung E' && lokasiNama !== 'Gedung E') {
            //             $(this).hide();
            //         } else if (selectedGedung === 'Gedung F' && lokasiNama !== 'Gedung F') {
            //             $(this).hide();
            //         } else {
            //             $(this).show();
            //         }
            //     });

            //     // Reset pilihan lokasi
            //     $('#nama_lokasi').val('').trigger('change');
            // });

            $('#kodepintu').select2({
                placeholder: "Cari dan pilih pintu",
                allowClear: true
            });

            $('#idjenisloker').change(function() {
                const selectedOption = this.options[this.selectedIndex];
                const idLoker = selectedOption.getAttribute('loker-id');

                $.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') {
                            $('#gedung').empty();

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

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

            })

            $('#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') {
                            $('#lokasi').empty();

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

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

            })

            $('#idjenisloker, #gedung').change(function() {
                
                const jenisLoker = $('#idjenisloker').val();
                const gedung = $('#gedung').val();

                // Clear existing options in kode pintu
                $('#kodepintu').empty().append('<option value="" selected disabled>Pilih Pintu</option>');

                if (jenisLoker && gedung) {
                    $.ajax({
                        url: '{{ route('getKodePintu') }}',
                        method: 'GET',
                        data: {
                            jenis_loker: jenisLoker,
                            gedung: gedung
                        },
                        success: function(data) {
                            // Menambahkan opsi kode pintu ke dropdown
                            data.forEach(function(pintu) {
                                $('#kodepintu').append(new Option(pintu.kodepintu, pintu
                                    .kodepintu));
                            });

                            $('#kodepintu').select2(); // Reinitialize Select2
                        },
                        error: function() {
                            alert('Error fetching kode pintu.'); // Handle error
                        }
                    });
                }
            });
        });
    </script>
@endpush