@csrf
<div class="box-body">
    <div class="form-group">
        <label for="kabupaten_id">Kabupaten</label>
        <select class="form-control" id="kabupaten_id" name="kabupaten_id">
            <option disabled selected>Pilih Kabupaten</option>
            @foreach ($kabupatens as $key => $kabupaten)
                <option value="{{ $key }}"
                    {{ old('kecamatan_id', @$data->kecamatan->kabupaten_id) == $key ? 'selected' : '' }}>
                    {{ $kabupaten }}</option>
            @endforeach
        </select>
        @error('kabupaten_id')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
        @enderror
    </div>
    <div class="form-group">
        <label for="kecamatan_id">Kecamatan</label>
        <select class="form-control" id="kecamatan_id" name="kecamatan_id">
            @if (@$data)
                <option disabled selected>Pilih Kecamatan</option>
                @foreach ($kecamatans as $key => $kecamatan)
                    <option value="{{ $key }}"
                        {{ old('kecamatan_id', optional($data)->kecamatan_id) == $key ? 'selected' : '' }}>
                        {{ $kecamatan }}</option>
                @endforeach
            @else
                <option disabled selected>Pilih Kabupaten dulu</option>
            @endif
        </select>
        @error('kecamatan_id')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
        @enderror
    </div>

    <div class="form-group">
        <label for="nama_kelurahan">Nama Kelurahan</label>
        <input type="text" value="{{ old('nama_kelurahan', optional($data)->nama_kelurahan) }}" class="form-control"
            id="nama_kelurahan" name="nama_kelurahan" placeholder="Nama Kelurahan">
        @error('nama_kelurahan')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
        @enderror
    </div>
</div>
<script>
    @section('jquery')
        $(document).ready(function() {
            // $('#').select2();
            // alert("AYONIMA");
            $('#kabupaten_id').change(function() {
                let total = 0;
                if ($(this).find(":selected").val() != "") {
                    $.ajax({
                        url: '/kelurahan/create?kabupaten=' + $(this).find(":selected").val(),
                        type: 'get',
                        success: function(response) {
                            // console.log(response);
                            $('#kecamatan_id').empty();
                            //$('#kelurahan_id').empty();
                            $('#kecamatan_id').append(
                                '<option disabled selected>Pilih Kecamatan</option>'
                            );
                            // console.log(response.data.tp.kelurahans.id);
                            response.data.forEach(element => {
                                // console.log(element);
                                total += 1;
                                $('#kecamatan_id').append('<option value="' +
                                    element
                                    .id + '">' + element.nama_kecamatan +
                                    '</option>');
                            });

                            if (total == 0) {
                                $('#kecamatan_id').empty();
                                $('#kecamatan_id').append(
                                    '<option disabled selected> Kecamatan tidak tersedia </option>'
                                );
                            }
                        }
                    });
                } else {
                    $('#kecamatan_id').empty();
                    $('#kecamatan_id').append(
                        '<option disabled selected>Pilih Kabupaten Dulu</option>');
                }
            });
        });
    @endsection
</script>
<!-- /.box-body -->