@csrf
<div class="box-body">
    <div class="form-group">
        <label for="kabupaten_id">Kabupaten</label>
        <select class="form-control select2" id="kabupaten_id" name="kabupaten_id">
            <option disabled selected>Pilih Kabupaten</option>
            @foreach ($kabupatens as $key => $kabupaten)
                <option value="{{ $key }}"
                    @if (@$data) {{ old('kabupaten_id', optional($data)->tp->kelurahans->kecamatan->kabupaten_id) == $key ? 'selected' : '' }} @endif>
                    {{ $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 select2" id="kecamatan_id" name="kecamatan_id">
            @if (@$kecamatans)
                <option disabled selected>Pilih Kecamatan</option>
                @foreach ($kecamatans as $key)
                    <option value="{{ $key->id }}"
                        {{ old('kecamatan_id', optional($data)->tp->kelurahans->kecamatan_id) == $key->id ? 'selected' : '' }}>
                        {{ $key->nama_kecamatan }}</option>
                @endforeach
            @else
                <option disabled selected>Pilih Kabupaten Dulu</option>
            @endif
            {{-- @foreach ($kelurahans as $key => $kelurahan)
                <option value="{{ $key }}">
                    {{ $kelurahan }}</option>
            @endforeach --}}
        </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 select2" id="kelurahan_id" name="kelurahan_id">
            @if (@$kelurahans)
                <option disabled selected>Pilih Kelurahan</option>
                @foreach ($kelurahans as $key)
                    <option value="{{ $key->id }}"
                        {{ old('kelurahan_id', optional($data)->tp->kelurahan_id) == $key->id ? 'selected' : '' }}>
                        {{ $key->nama_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="tps_id">TPS</label>
        <select class="form-control select2" id="tps_id" name="tps_id">
            @if (@$tps)
                <option disabled selected>Pilih TPS</option>
                @foreach ($tps as $a)
                    <option value="{{ $a->id }}"
                        {{ old('tps_id', optional($data)->tps_id) == $a->id ? 'selected' : '' }}>TPS
                        {{ $a->nomor }}</option>
                @endforeach
            @else
                <option disabled selected>Pilih Kelurahan Dulu</option>
            @endif
        </select>
        @error('tps_id')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
        @enderror
    </div>
    {{-- <div class="form-group">
        <label for="nik">Foto E-KTP</label>
        <input type="file" value="{{ old('e_ktp', optional($data)->e_ktp) }}" class="form-control" id="e_ktp"
            name="e_ktp" placeholder="Nik">
        @error('e_ktp')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
        @enderror
    </div> --}}
    <div class="form-group">
        <label for="nik">NIK</label>
        <input type="number" value="{{ old('nik', optional($data)->nik) }}" class="form-control" id="nik"
            name="nik" placeholder="Nik">
        @error('nik')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
        @enderror
    </div>

    {{-- <div class="form-group">
        <label for="no_telepon">No Telepon</label>
        <input type="text" value="{{ old('no_telepon', optional($data)->no_telepon) }}" class="form-control"
            id="no_telepon" name="no_telepon" placeholder="No Telepon">
        @error('no_telepon')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
        @enderror
    </div> --}}

    <div class="form-group">
        <label for="nama_lengkap">Nama Lengkap</label>
        <input type="text" value="{{ old('nama_lengkap', optional($data)->nama_lengkap) }}" class="form-control"
            id="nama_lengkap" name="nama_lengkap" placeholder="Nama Lengkap">
        @error('nama_lengkap')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
        @enderror
    </div>

    <div class="form-group">
        <label for="tanggal_lahir">Tempat Tanggal Lahir</label>
        <div class="row">
            <div class="col-md-6">
                <input type="date" value="{{ old('tanggal_lahir', optional($data)->tanggal_lahirs) }}"
                    class=" form-control" id="tanggal_lahir" name="tanggal_lahir" placeholder="Tanggal lahir">
            </div>
            <div class="col-md-6">
                <input type="text" value="{{ old('tempat_lahir', @$data->tempat_lahirs) }}" class=" form-control"
                    id="tempat_lahir" name="tempat_lahir" placeholder="Tempat lahir">
            </div>


            @error('tanggal_lahir')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror
        </div>

    </div>

    <div class="form-group">
        <label for="alamat">Alamat</label>
        <textarea name="alamat" placeholder="Alamat" class="form-control" style="height: 100px;">{{ old('alamat', optional($data)->alamat) }}</textarea>
        @error('alamat')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
        @enderror
    </div>

    <div class="form-group">
        <label for="rt">Rt</label>
        <input type="text" value="{{ old('rt', optional($data)->rt) }}" class="form-control" id="rt"
            name="rt" placeholder="RT">
        @error('rt')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
        @enderror
    </div>

    <div class="form-group">
        <label for="rw">RW</label>
        <input type="text" value="{{ old('rw', optional($data)->rw) }}" class="form-control" id="rw"
            name="rw" placeholder="RW">
        @error('rw')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
        @enderror
    </div>

    {{-- <div class="form-group">
        <label for="agama">Agama</label>
        <select class="form-control select2" id="agama" name="agama">
            <option disabled selected>Pilih Agama</option>
            <option value="Islam" {{ old('agama', optional($data)->agama) == 'Islam' ? 'selected' : '' }}>Islam
            </option>
            <option value="Kristen Protestan"
                {{ old('agama', optional($data)->agama) == 'Kristen Protestan' ? 'selected' : '' }}>Kristen
                Protestan</option>
            <option value="Katolik" {{ old('agama', optional($data)->agama) == 'Katolik' ? 'selected' : '' }}>
                Katolik</option>
            <option value="Hindu" {{ old('agama', optional($data)->agama) == 'Hindu' ? 'selected' : '' }}>Hindu
            </option>
            <option value="Buddha" {{ old('agama', optional($data)->agama) == 'Buddha' ? 'selected' : '' }}>
                Buddha</option>
            <option value="Kong Hu Cu" {{ old('agama', optional($data)->agama) == 'Kong Hu Cu' ? 'selected' : '' }}>
                Kong Hu Cu</option>
        </select>
        @error('agama')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
        @enderror
    </div> --}}

    <div class="form-group">
        <label for="jenis_kelamin">Jenis Kelamin</label>
        <select class="form-control select2" id="jenis_kelamin" name="jenis_kelamin">
            <option disabled selected>Pilih Jenis Kelamin</option>
            <option value="Laki-laki"
                {{ old('jenis_kelamin', optional($data)->jenis_kelamin) == 'L' ? 'selected' : '' }}>
                Laki-laki</option>
            <option value="Perempuan"
                {{ old('jenis_kelamin', optional($data)->jenis_kelamin) == 'P' ? 'selected' : '' }}>
                Perempuan</option>

        </select>
        @error('jenis_kelamin')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
        @enderror
    </div>


    {{-- <div class="form-group">
        <label for="kawin">Perkawinan</label>
        <select class="form-control select2" id="kawin" name="kawin">
            <option disabled selected>Pilih Status Perkawinan</option>
            <option value="Sudah" {{ old('kawin', optional($data)->kawin) == 'Sudah' ? 'selected' : '' }}>Sudah
            </option>
            <option value="Belum" {{ old('kawin', optional($data)->kawin) == 'Belum' ? 'selected' : '' }}>Belum
            </option>
            <option value="Pernah" {{ old('kawin', optional($data)->kawin) == 'Pernah' ? 'selected' : '' }}>Pernah
            </option>

        </select>
        @error('kawin')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
        @enderror
    </div>



    <div class="form-group">
        <label for="pekerjaan">Pekerjaan</label>
        <input type="text" value="{{ old('pekerjaan', optional($data)->pekerjaan) }}" class="form-control"
            id="pekerjaan" name="pekerjaan" placeholder="Pekerjaan">
        @error('pekerjaan')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
        @enderror
    </div> --}}
    {{--
    <div class="form-group">
        <label for="nama_penghubung">Nama Penghubung</label>
        <input type="text" value="{{ old('nama_penghubung', optional($data)->nama_penghubung) }}"
            class="form-control" id="nama_penghubung" name="nama_penghubung" placeholder="Nama Penghubung"
            required="">
        @error('nama_penghubung')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
        @enderror
    </div>

    <div class="form-group">
        <label for="no_telp_penghubung">No Telp Penghubung</label>
        <input type="text" value="{{ old('no_telp_penghubung', optional($data)->no_telp_penghubung) }}"
            class="form-control" id="nama_penghubung" name="no_telp_penghubung"
            placeholder="Nomor Telepon Penghubung" required="">
        @error('no_telp_penghubung')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
        @enderror
    </div> --}}
    <div class="form-group">
        <label for="keterangan">Keterangan</label>
        <textarea name="keterangan" placeholder="Keterangan" class="form-control" style="height: 100px;">{{ old('keterangan', optional($data)->keterangan) }}</textarea>
        @error('keterangan')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
        @enderror
    </div>

</div>
<script>
    @section('jquery')
        $(document).ready(function() {
            $('#kabupaten_id').change(function() {
                let total = 0;
                if ($(this).find(":selected").val() != "") {
                    $.ajax({
                        url: '/dpt/create?kabupaten=' + $(this).find(":selected").val(),
                        type: 'get',
                        success: function(response) {
                            $('#kecamatan_id').empty();
                            //$('#kelurahan_id').empty();
                            $('#kecamatan_id').append(
                                '<option disabled selected>Pilih Kecamatan</option>'
                            );
                            console.log(response);
                            response.data.forEach(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: '/dpt/create?kecamatan=' + $(this).find(":selected").val(),
                        type: 'get',
                        success: function(response) {
                            $('#kelurahan_id').empty();
                            //$('#kelurahan_id').empty();
                            $('#kelurahan_id').append(
                                '<option disabled selected>Pilih Kelurahan</option>'
                            );
                            console.log(response);
                            response.data.forEach(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>');
                }
            });


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

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