@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)
                {{-- {{ old('kabupaten_id', optional($data)->kelurahan_id) == $key ? 'selected' : '' }} --}}
                <option value="{{ $key }}">
                    {{ $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)
                @foreach ($kecamatans as $key => $kecamatan)
                    <option value="{{ $key }}"
                        {{ old('kecamatan_id', optional($data)->kelurahans->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="kelurahan_id">Kelurahan</label>
        <select class="form-control" id="kelurahan_id" name="kelurahan_id">
            @if (@$data)
                @foreach ($kelurahans as $key => $kelurahan)
                    <option value="{{ $key }}"
                        {{ old('kelurahan_id', optional($data)->kelurahan_id) == $key ? 'selected' : '' }}>
                        {{ $kelurahan }}</option>
                @endforeach
            @else
                <option disabled selected>Pilih Kecamatan Dulu</option>
            @endif
        </select>
        @error('kelurahan_id')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
        @enderror
    </div>

    <div class="form-group">
        <label for="nomor">Nomor TPS</label>
        <input type="number" value="{{ old('nomor', optional($data)->nomor) }}" class="form-control" id="nomor"
            name="nomor" placeholder="Nomor TPS">
        @error('nomor')
            <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: '/tps/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>');
                }
            });

            $('#kecamatan_id').change(function() {
                let total = 0;
                if ($(this).find(":selected").val() != "") {
                    $.ajax({
                        url: '/tps/create?kecamatan=' + $(this).find(":selected").val(),
                        type: 'get',
                        success: function(response) {
                            // console.log(response);
                            $('#kelurahan_id').empty();
                            //$('#kelurahan_id').empty();
                            $('#kelurahan_id').append(
                                '<option disabled selected>Pilih Kelurahan</option>'
                            );
                            // console.log(response.data.tp.kelurahans.id);
                            response.data.forEach(element => {
                                // console.log(element);
                                total += 1;
                                $('#kelurahan_id').append('<option value="' +
                                    element
                                    .id + '">' + element.nama_kelurahan +
                                    '</option>');
                            });

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