database-pertani-web/resources/views/core/program-lokasi/add.blade.php

<div
    class="offcanvas offcanvas-end"
    tabindex="-1"
    id="offcanvasAddProgramLokasi"
    aria-labelledby="offcanvasAddProgramLokasiLabel">
    <div class="offcanvas-header border-bottom">
        <h5 id="offcanvasAddProgramLokasiLabel" class="offcanvas-title">Tambah Lokasi</h5>
        <button
            type="button"
            class="btn-close text-reset"
            data-bs-dismiss="offcanvas"
            aria-label="Tutup"></button>
    </div>
    <div class="offcanvas-body mx-0 flex-grow-0 p-6 h-100">
        <form class="add-new-program-lokasi pt-0" id="addNewProgramLokasiForm" action="{{ route('program.lokasi.store', $program->id) }}" method="POST">
            @csrf
            
            <div class="mb-6 form-control-validation">
                <label class="form-label" for="add-program-lokasi-provinsi_id">Provinsi<span class="text-danger">*</span></label>
                <select name="provinsi_id" class="form-select select2" id="add-program-lokasi-provinsi_id" data-placeholder="Pilih Provinsi">
                    <option value="">Pilih Provinsi</option>
                    @foreach($provinsi as $p)
                        <option value="{{ $p->id }}">{{ $p->kode }} {{ $p->nama }}</option>
                    @endforeach
                </select>
            </div>
            <div class="mb-6 form-control-validation">
                <label class="form-label" for="add-program-lokasi-kabupaten_kota_id">Kabupaten/Kota</label>
                <select name="kabupaten_kota_id" class="form-select select2" id="add-program-lokasi-kabupaten_kota_id" data-placeholder="Pilih Kabupaten/Kota">
                    <option value="">Pilih Kabupaten/Kota</option>
                </select>
            </div>
            <div class="mb-6 form-control-validation">
                <label class="form-label" for="add-program-lokasi-kecamatan_id">Kecamatan</label>
                <select name="kecamatan_id" class="form-select select2" id="add-program-lokasi-kecamatan_id" data-placeholder="Pilih Kecamatan">
                    <option value="">Pilih Kecamatan</option>
                </select>
            </div>
            <div class="mb-6 form-control-validation">
                <label class="form-label" for="add-program-lokasi-desa_kelurahan_id">Desa/Kelurahan</label>
                <select name="desa_kelurahan_id" class="form-select select2" id="add-program-lokasi-desa_kelurahan_id" data-placeholder="Pilih Desa/Kelurahan">
                    <option value="">Pilih Desa/Kelurahan</option>
                </select>
            </div>
            <div class="mb-6 form-control-validation">
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" id="defaultSwitch" name="default" value="1">
                    <label class="form-check-label" for="defaultSwitch">Default</label>
                </div>
            </div>

            <button type="submit" class="btn btn-primary me-3 data-submit">Simpan</button>
            <button type="reset" class="btn btn-label-danger" data-bs-dismiss="offcanvas">Batal</button>
        </form>
    </div>
</div>

@push('scripts')
<script>
    $(document).ready(function() {
        const $provinsi = $('#add-program-lokasi-provinsi_id');
        const $kabupaten = $('#add-program-lokasi-kabupaten_kota_id');
        const $kecamatan = $('#add-program-lokasi-kecamatan_id');
        const $desa = $('#add-program-lokasi-desa_kelurahan_id');


        $('#add-program-lokasi-provinsi_id, #add-program-lokasi-kabupaten_kota_id, #add-program-lokasi-kecamatan_id, #add-program-lokasi-desa_kelurahan_id').select2({
            dropdownParent: $('#offcanvasAddProgramLokasi'),
            width: '100%',
        });
        $provinsi.on('change', function () {
            const id = $(this).val();

            // reset bawahnya
            $kabupaten.empty().append('<option value="">Pilih Kabupaten/Kota</option>').trigger('change');
            $kecamatan.empty().append('<option value="">Pilih Kecamatan</option>').trigger('change');
            $desa.empty().append('<option value="">Pilih Desa/Kelurahan</option>').trigger('change');

            if (!id) return;

            $.get("{{ route('kabupatenkota.byprovinsi', ':id') }}".replace(':id', id), function (data) {
                data.forEach(kab => {
                    $kabupaten.append(new Option(`${kab.kode} ${kab.nama}`, kab.id));
                });
            });
        });
        $kabupaten.on('change', function () {
            const id = $(this).val();

            // reset kecamatan
            $kecamatan.empty().append('<option value="">Pilih Kecamatan</option>').trigger('change');

            if (!id) return;

            $.get("{{ route('kecamatan.bykabupatenkota', ':id') }}".replace(':id', id), function (data) {
                data.forEach(kec => {
                    $kecamatan.append(new Option(`${kec.kode} ${kec.nama}`, kec.id));
                });
            });
        });
        $kecamatan.on('change', function () {
            const id = $(this).val();

            // reset desa
            $desa.empty().append('<option value="">Pilih Desa/Kelurahan</option>').trigger('change');

            if (!id) return;

            $.get("{{ route('desakelurahan.bykecamatan', ':id') }}".replace(':id', id), function (data) {
                data.forEach(desa => {
                    $desa.append(new Option(`${desa.kode} ${desa.nama}`, desa.id));
                });
            });
        });
        $.validator.setDefaults({
            errorElement: 'div',
            errorPlacement: function (error, element) {
                error.addClass('invalid-feedback');
                element.closest('.mb-6, .form-control-validation').append(error);
            },
            highlight: function (element) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function (element) {
                $(element).removeClass('is-invalid');
            }
        });

        const offcanvasAdd = new bootstrap.Offcanvas(document.getElementById('offcanvasAddProgramLokasi'));
        $('#addNewProgramLokasiForm').validate({
            rules: {
                provinsi_id: { required: true },
            },
            messages: {
                provinsi_id: { required: "Provinsi wajib dipilih" }
            },
            submitHandler: function (form) {
                $.ajax({
                    url: $(form).attr('action'),
                    type: 'POST',
                    data: $(form).serialize(),
                    success: function () {
                        offcanvasAdd.hide();
                        form.reset();
                        Swal.fire({ icon: 'success', title: 'Berhasil!', showConfirmButton: false, timer: 1500 })
                            .then(() => window.location.reload());
                    },
                    error: function (xhr) {
                        Swal.fire({ icon: 'error', title: 'Gagal!', text: xhr.responseJSON?.message || 'Error' });
                    }
                });
            }
        });
    });
</script>
@endpush