@extends('layout.master')

@push('plugin-styles')
  <link href="{{ asset('css/form-satsdn.css') }}" rel="stylesheet" />
  <link href="{{ asset('assets/plugins/select2/select2.min.css') }}" rel="stylesheet" />
  <link href="{{ asset('assets/plugins/flatpickr/flatpickr.min.css') }}" rel="stylesheet" />
@endpush

@section('content')
<nav class="page-breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="/">Dashboard</a></li>
    <li class="breadcrumb-item active" aria-current="page">Form SATS-DN</li>
  </ol>
</nav>




<div class="row">
  <div class="col-md-12 stretch-card">
    <div class="card">
      <div class="card-body">
        <h6 class="card-title">Form SATS - Dalam Negeri</h6>
        <div class="alert alert-danger d-none" id="errorAlert"></div>
        @include('components.validation-errors')
        <br>
          <form class="form-satsdn" id="form">
            
            <div id="data-information">
              <h6 class="card-title">Informasi Dasar</h6>

              <div class="row">
             <div class="col-sm-4" style="visibility:hidden;">
                    <div class="mb-3">
                        <label class="form-label" for="company_id">Nama Perusahaan</label>
                        @if (isset(Auth::user()->company_id))
                            <input type="hidden" class="form-control" name="company_id" id="company_id" required value="{{ Auth::user()->company->id }}">
                            <input type="text" class="form-control" value="{{ Auth::user()->company->nama }}" disabled>
                        @else
                            @if ($companies->isNotEmpty())
                                <select name="company_id" id="company_id" class="form-control js-example-basic-single">
                                    <option value="" selected hidden>Pilih Company</option>
                                    @foreach ($companies as $company)
                                        <option value="{{ $company->id }}">{{ $company->nama }}</option>
                                    @endforeach
                                </select>
                            @else
                                <select name="company_id" id="company_id" class="form-control js-example-basic-single" disabled>
                                    <option value="">Tidak ada perusahaan tersedia</option>
                                </select>
                                {{-- <small class="text-danger">Data perusahaan belum tersedia untuk wilayah Anda.</small> --}}
                            @endif
                        @endif
                    </div>
                </div>
              </div>
            
              <div class="row">
              	<div class="col-sm-4">
                  <div class="mb-3">
                    <label class="form-label" for="nomor_asal_satsdn">Nomor Asal SATS-DN <small class="text-danger">*Jika tidak ada isi dengan "-"</small></label>
                    <input type="text" name="nomor_asal_satsdn" id="nomor_asal_satsdn" class="form-control" placeholder="Nomor Asal SATS - DN" required>
                  </div>
                </div><!-- Col -->
                <div class="col-sm-4">
                  <div class="mb-3">
                    <label class="form-label" for="nomor_satsdn">Nomor SATS-DN</label>
                    <input type="text" name="nomor_satsdn" id="nomor_satsdn" class="form-control" placeholder="Nomor SATS - DN" required>
                  </div>
                </div><!-- Col -->
                <div class="col-sm-4">
                  <div class="mb-3">
                    <label for="purpose" class="form-label">Untuk Keperluan</label>
                    <select name="purpose" id="purpose" class="form-control js-example-basic-single form-select" data-width="100%" id="select" required>
                      <option value=""hidden selected>Pilih Jenis Tujuan</option>
                      <option value="Komersil">Komersil</option>
                      <option value="Non-Komersil">Non-Komersil</option>
                    </select>
                  </div>
                </div><!-- Col -->
              </div><!-- Row -->

              <div class="row">
                <div class="col-sm-4">
                  <div class="mb-3">
                    <label class="form-label">Pilih Jenis Dokumen</label>
                    <select class="form-control name="jenis_dokumen" form-select" required>
	                    <option value="" selected disabled>Pilih Jenis Dokumen</option>
	                    <option value="0">Izin Mengambil/Menangkap</option>
	                    <option value="1">Izin Penangkaran</option>
	                    <option value="2">Lainnya</option>
	                    <!--<option value="-">Tidak ada</option>-->
                    </select>
                  </div>
                </div>
                <div class="col-sm-4">
                  <div class="mb-3">
                    <label class="form-label">Nomor Persetujuan Mengambil/Menangkap</label>
                    <input type="text" name="no_izin_persetujuan" id="no_izin_persetujuan" class="form-control" placeholder="Nomor Izin Persetujuan Mengambil/Menangkap" >
                  </div>
                </div><!-- Col -->


                
                <div class="col-sm-4">
                  <div class="mb-3">
                    <label for="tgl" class="form-label text-nowrap">Tanggal Izin Persetujuan Mengambil/Menangkap</label>
                    <div class="input-group flatpickr" id="flatpickr-date">
                      <input type="text" name="tgl_no_izin_persetujuan" class="form-control" placeholder="Pilih Tanggal" data-input>
                      <!--<input type="text" name="tgl_no_izin_persetujuan" class="form-control" placeholder="Pilih Tanggal" required data-input>-->
                    </div>
                  </div>
                </div><!-- Col -->
              </div><!-- Row -->

            <div class="row">
              <div class="col-sm-4">
                <div class="mb-3">
                  <label class="form-label">Nomor Surat Permohonan Angkut</label>
                  <input type="text" name="no_surat_permohonan_angkut" id="no_surat_permohonan_angkut" class="form-control" placeholder="No. Surat Permohonan Angkut " required>
                </div>
              </div><!-- Col -->
              <div class="col-sm-4">
                <div class="mb-3">
                  <label for="tgl" class="form-label">Tanggal Surat Permohonan Angkut</label>
                  <div class="input-group flatpickr" id="flatpickr-date">
                    <input type="text" name="tgl_no_surat_permohonan_angkut" class="form-control" placeholder="Pilih Tanggal"  data-input>
                    <!--<input type="text" name="tgl_no_surat_permohonan_angkut" class="form-control" placeholder="Pilih Tanggal" required data-input>-->
                  </div>
                </div>
              </div><!-- Col -->
            </div><!-- Row -->
            
            <div class="row">
              <div class="col-sm-4">
                <div class="mb-3">
                  <label for="tgl" class="form-label">Nomor BAP</label>
                  <input type="text" name="no_bap" id="no_bap" class="form-control" placeholder="Nomor BAP" required>
                </div>
              </div><!-- Col -->
              <div class="col-sm-4">
                <div class="mb-3" >
                  <label for="tgl" class="form-label">Tanggal BAP</label>
                  <div class="input-group flatpickr" id="flatpickr-date">
                    <input type="text" name="tgl_no_bap" class="form-control" placeholder="Pilih Tanggal" required data-input>
                  </div>
                </div>
              </div><!-- Col -->
            </div><!-- Row -->

              <div class="row mb-3">

                <div class="col-sm-4 mb-3">
                    <label class="form-label">Keberangkatan</label>
                    {{-- @if (isset(Auth::user()->wilayah))
                      <input type="text" class="form-control" name="satsdn_asal" id="satsdn_asal" required value="{{ Auth::user()->wilayah }}" readonly>
                    @else --}}
                    <select name="satsdn_asal_prov" id="satsdn_asal_prov" class="form-control js-example-basic-single" required>
                      <option value="" selected hidden>Pilih Asal Provinsi</option>
                    </select>
                    {{-- @endif --}}
                </div>
                <div class="col-sm-4 mb-3">
                    <label class="form-label text-white">Keberangkatan</label>
                    <select name="satsdn_asal" id="satsdn_asal" class="form-control js-example-basic-single" required>
                      <option value="" selected hidden>Pilih Asal Kota/Kabupaten</option>
                    </select>
                </div>
              </div>
            

              <div class="row mb-3">
                <div class="col-sm-4 mb-3">
                    <label class="form-label">Tujuan</label>
                    <select name="satsdn_tujuan_prov" id="satsdn_tujuan_prov" class="form-control js-example-basic-single" required>
                      <option value="" selected hidden>Pilih Tujuan Provinsi</option>
                    </select>
                </div>
                <div class="col-sm-4 mb-3">
                    <label class="form-label text-white">Tujuan</label>
                    <select name="satsdn_tujuan" id="satsdn_tujuan" class="form-control js-example-basic-single" required>
                      <option value="" selected hidden>Pilih Tujuan Kota/Kabupaten</option>
                    </select>
                </div>
              </div>

              <div class="row">
                <div class="col-sm-3">
                  <div class="mb-3">
                    <label class="form-label">Alat Angkut</label>
                    <select name="alat_angkut" id="select" class="form-control form-select" required>
                      <option value="" selected hidden> Pilih Alat Angkut</option>
                      <option value="udara"> Udara</option>
                      <option value="laut"> Laut</option>
                      <option value="darat"> Darat</option>
                    </select>
                  </div>
                </div>
              </div>
              </div><!-- Row -->
           

            <br>
            <div id="data-pengirim">
              <h6 class="card-title">Data Keberangkatan TSL</h6>
              <div class="row">
                <div class="col-sm-3">
                  <div class="mb-3">
                    <label class="form-label">Nama Perusahaan/Lembaga</label>
                    <input type="text" name="nama_pengirim" id="nama" class="form-control" placeholder="Nama Perusahaan/Lembaga" required>
                  </div>
                </div><!-- Col -->
                <div class="col-sm-3">
                  <div class="mb-3">
                    <label class="form-label">Nomor Telepon</label>
                    <input type="text" name="no_telp_pengirim" id="no_telp" class="form-control no_telp" autocomplete="off" minlength="12" maxlength="14" placeholder="62812 3456 7890" required>
                  </div>
                </div><!-- Col -->
                <div class="col-sm-3">
                  <div class="mb-3">
                    <label class="form-label">Email</label>
                    <input type="text" name="email_pengirim" id="email" class="form-control email" autocomplete="off" data-inputmask="'alias': 'email'"  placeholder="Pengirim@gmail.com" required>
                  </div>
                </div><!-- Col -->
              </div><!-- Row -->
              <div class="row">
                <div class="col-sm-2">
                  <div class="mb-3">
                    <label class="form-label">Kode Pos</label>
                    <input type="number" name="kodepos_pengirim" id="kodepos-pengirim" minlength="5" id="kodepos-pengirim" class="form-control" placeholder="Kode Pos" required>
                  </div>
                </div><!-- Col -->
                <div class="col-sm-2">
                  <div class="mb-3">
                      <label class="form-label">Kelurahan</label>
                      <select class="form-control js-example-basic-single form-select" name="kelurahan_pengirim" id="kelurahan-pengirim" data-width="100%"required>
                          <option value="" selected hidden>Pilih Kelurahan</option>
                      </select>
                  </div>
                </div><!-- Col -->
                <div class="col-sm-2">
                  <div class="mb-3">
                    <label class="form-label">Kecamatan</label>
                    {{-- <input type="text" name="kecamatan_pengirim" id="kecamatan-pengirim" class="form-control" placeholder="Enter Kode Pos" readonly> --}}
                    <select class="form-control js-example-basic-single form-select" name="kecamatan_pengirim" id="kecamatan-pengirim" data-width="100%" required>
                      <option value="" selected hidden>Pilih kecamatan</option>
                    </select>
                  </div>
                </div><!-- Col -->
                <div class="col-sm-2">
                  <div class="mb-3">
                    <label class="form-label">Kota/Kabupaten</label>
                    <input type="text" name="kota_kabupaten_pengirim" id="kota_kabupaten-pengirim" class="form-control" placeholder="Enter Kode Pos" readonly>
                  </div>
                </div><!-- Col -->
                <div class="col-sm-2">
                  <div class="mb-3">
                    <label class="form-label">Provinsi</label>
                    <input type="text" name="provinsi_pengirim" id="provinsi-pengirim" class="form-control" placeholder="Enter Kode Pos" readonly>
                  </div>
                </div><!-- Col -->
              </div><!-- Row -->
              <div class="row">
                <div class="col-sm-6">
                  <div class="mb-3">
                    <label class="form-label">Alamat</label>
                    <textarea type="text" name="alamat_pengirim" id="alamat-pengirim" class="form-control" placeholder="Enter Alamat/Nama Jalan" required></textarea>
                  </div>
                </div><!-- col --->
              </div> <!-- Row --->
            </div>
            <br>
            <div id="data-tujuan">
              <h6 class="card-title">Data Ketibaan/Kedatangan TSL</h6>
              <div class="row">
                <div class="col-sm-3">
                  <div class="mb-3">
                    <label class="form-label">Nama Perusahaan/Lembaga</label>
                    <input type="text" name="nama_tujuan" id="nama" class="form-control" placeholder="Nama Perusahaan/Lembaga" required>
                  </div>
                </div><!-- Col -->
                <div class="col-sm-3">
                  <div class="mb-3">
                    <label class="form-label">Nomor Telepon</label>
                    <input type="text" name="no_telp_tujuan" id="no_telp" class="form-control no_telp"  placeholder="62812 3456 7890" required>
                  </div>
                </div><!-- Col -->
                <div class="col-sm-3">
                  <div class="mb-3">
                    <label class="form-label">Email</label>
                    <input type="text" name="email_tujuan" id="email" class="form-control email" data-inputmask="'alias': 'email'"  placeholder="Tujuan@gmail.com" required>
                  </div>
                </div><!-- Col -->
              </div><!-- Row -->
              <div class="row">
                <div class="col-sm-2">
                  <div class="mb-3">
                    <label class="form-label">Kode Pos</label>
                    <input type="number" name="kodepos_tujuan" id="kodepos-tujuan" minlength="5" id="kodepos-tujuan" class="form-control" placeholder="Kode Pos" required>
                  </div>
                </div><!-- Col -->
                <div class="col-sm-2">
                  <div class="mb-3">
                      <label class="form-label">Kelurahan</label>
                      <select class="form-control js-example-basic-single form-select" data-width="100%" name="kelurahan_tujuan" id="kelurahan-tujuan" required>
                          <option value="" selected hidden>Pilih Kelurahan</option>
                      </select>
                  </div>
                </div><!-- Col -->
                <div class="col-sm-2">
                  <div class="mb-3">
                    <label class="form-label">Kecamatan</label>
                    {{-- <input type="text" name="kecamatan_tujuan" id="kecamatan-tujuan" class="form-control" placeholder="Enter Kode Pos" readonly > --}}
                    <select class="form-control js-example-basic-single form-select" data-width="100%" name="kecamatan_tujuan" id="kecamatan-tujuan" required>
                      <option value="" selected hidden>Pilih Kecamatan</option>
                    </select>
                  </div>
                </div><!-- Col -->
                <div class="col-sm-2">
                  <div class="mb-3">
                    <label class="form-label">Kota/Kabupaten</label>
                    <input type="text" name="kota_kabupaten_tujuan" id="kota_kabupaten-tujuan" class="form-control" placeholder="Enter Kode Pos" readonly>
                  </div>
                </div><!-- Col -->
                <div class="col-sm-2">
                  <div class="mb-3">
                    <label class="form-label">Provinsi</label>
                    <input type="text" name="provinsi_tujuan" id="provinsi-tujuan" class="form-control" placeholder="Enter Kode Pos" readonly>
                  </div>
                </div><!-- Col -->
              </div><!-- Row -->
              <div class="row">
                <div class="col-sm-6">
                  <div class="mb-3">
                    <label class="form-label">Alamat</label>
                    <textarea type="text" name="alamat_tujuan" id="alamat-tujuan" class="form-control" placeholder="Enter Alamat/Nama Jalan" required></textarea>
                  </div>
                </div><!-- col --->
              </div> <!-- Row --->
            </div>
            
            <br>
            <button type="submit" class="btn btn-primary submit">Simpan</button>
          </form>
      </div>
    </div>
  </div>
</div>
@endsection

@push('plugin-scripts')
<script src="{{ asset('assets/plugins/select2/select2.min.js') }}"></script>
<script src="{{ asset('assets/plugins/flatpickr/flatpickr.min.js') }}"></script>
<script src="{{ asset('assets/plugins/bootstrap-maxlength/bootstrap-maxlength.min.js') }}"></script>
<script src="{{ asset('assets/plugins/jquery-validation/jquery.validate.min.js') }}"></script>
<script src="{{ asset('assets/plugins/inputmask/jquery.inputmask.min.js') }}"></script>

@endpush

@push('custom-scripts')
<script src="{{ asset('assets/js/form-validation.js') }}"></script>
<script src="{{ asset('assets/js/inputmask.js') }}"></script>
<script src="{{ asset('assets/js/select2.js') }}"></script>
<script src="{{ asset('assets/js/flatpickr.js') }}"></script>
<script src="{{ asset('assets/js/bootstrap-maxlength.js') }}"></script>
<script>
  $(document).ready(function(){
    $.ajax({
        url: "https://www.emsifa.com/api-wilayah-indonesia/api/provinces.json",
        // url : `/search-province`,
        type: "GET",
        success: function (response) {
            let satsdn_asal = $("#satsdn_asal_prov");
            let satsdn_tujuan = $("#satsdn_tujuan_prov");

            response.forEach(function (provinsi) {
                satsdn_asal.append(`<option value="${provinsi.name}">${provinsi.name}</option>`);
                satsdn_tujuan.append(`<option value="${provinsi.name}">${provinsi.name}</option>`);
            });
        },
        error: function () {
            console.error("Error fetching provinsi");
        }
    });

    $('#satsdn_asal_prov').on('change', function () {
      let selected = $(this).find('option:selected').val();
      let satsdn_asal_kab = $("#satsdn_asal");

      satsdn_asal_kab.empty();
      satsdn_asal_kab.append(`<option value="" selected hidden>Pilih Asal Kota/Kabupaten</option>`);

        $.ajax({
          url : `/search-regency?province=${selected}`,
          type: "GET",
          success: function (response) {
              let satsdn_asal_kab = $("#satsdn_asal");

              response.forEach(function (regency) {
                  satsdn_asal_kab.append(`<option value="${regency}">${regency}</option>`);
              });
          },
          error: function () {
              console.error("Error fetching provinsi");
          }
        });
    })
    $('#satsdn_tujuan_prov').on('change', function () {
      let selected = $(this).find('option:selected').val();
      let satsdn_tujuan_kab = $("#satsdn_tujuan");

      satsdn_tujuan_kab.empty();
      satsdn_tujuan_kab.append(`<option value="" selected hidden>Pilih Tujuan Kota/Kabupaten</option>`);

        $.ajax({
          url : `/search-regency?province=${selected}`,
          type: "GET",
          success: function (response) {
              let satsdn_tujuan_kab = $("#satsdn_tujuan");

              response.forEach(function (regency) {
                  satsdn_tujuan_kab.append(`<option value="${regency}">${regency}</option>`);
              });
          },
          error: function () {
              console.error("Error fetching provinsi");
          }
        });
    })
  })
</script>
</script>

<script>
  $(document).ready(function () {
    let uppercaseFields = ["#nomor_satsdn","#nomor_asal_satsdn", "#no_izin_persetujuan", "#no_bap", "#no_surat_permohonan_angkut"];

    uppercaseFields.forEach(function (selector) {
        $(selector).on("input", function () {
            $(this).val($(this).val().toUpperCase());
        });
    });

    $.ajaxSetup({
        headers: {
            "Authorization": "Bearer " + localStorage.getItem("token"),
            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
        }
    });

    flatpickr("#tgl", {
          dateFormat: "Y-m-d", 
          allowInput: true, 
          locale: {
              firstDayOfWeek: 1 
          }
      });

    $(".form-satsdn").submit(function (event) {
        event.preventDefault(); 

      
      // let no_telp = $(".no_telp").val().replace(/\D/g, ""); 
      // console.log(no_telp);
      
            // if (no_telp.length < 13) {
            //     event.preventDefault(); 
            //     Swal.fire({
            //       title: 'Error!',
            //       text :'Nomor telepon harus 15 digit!',
            //       icon : 'error',
            //       confirmButtonText : 'Perbaiki',
            //     })
            // }

      let formData = {
          company_id:$("[name=company_id]").val(),
          nomor_asal_satsdn: $("[name='nomor_asal_satsdn']").val(),
          nomor_satsdn: $("[name='nomor_satsdn']").val(),
          purpose: $("[name='purpose']").val(),
          no_izin_persetujuan: $("[name='no_izin_persetujuan']").val(),
          tgl_no_izin_persetujuan: $("[name='tgl_no_izin_persetujuan']").val(),
          no_surat_permohonan_angkut: $("[name='no_surat_permohonan_angkut']").val(),
          tgl_no_surat_permohonan_angkut: $("[name='tgl_no_surat_permohonan_angkut']").val(),
          no_bap: $("[name='no_bap']").val(),
          tgl_no_bap: $("[name='tgl_no_bap']").val(),
          satsdn_asal: $("[name='satsdn_asal']").val(),
          satsdn_asal_prov: $("[name='satsdn_asal_prov']").val(),
          satsdn_tujuan: $("[name='satsdn_tujuan']").val(),
          satsdn_tujuan_prov: $("[name='satsdn_tujuan_prov']").val(),
          alat_angkut: $("[name='alat_angkut']").val(),

          nama_pengirim: $("[name='nama_pengirim']").val(),
          email_pengirim: $("[name='email_pengirim']").val(),
          no_telp_pengirim: $("[name='no_telp_pengirim']").val().trim().replace(/\s+/g, ""),
          kodepos_pengirim: $("[name='kodepos_pengirim']").val(),
          kelurahan_pengirim: $("[name='kelurahan_pengirim']").val(),
          kecamatan_pengirim: $("[name='kecamatan_pengirim']").val(),
          kabupaten_pengirim: $("[name='kabupaten_pengirim']").val(),
          kota_kabupaten_pengirim: $("[name='kota_kabupaten_pengirim']").val(),
          provinsi_pengirim: $("[name='provinsi_pengirim']").val(),
          alamat_pengirim: $("[name='alamat_pengirim']").val(),

          nama_tujuan: $("[name='nama_tujuan']").val(),
          email_tujuan: $("[name='email_tujuan']").val(),
          no_telp_tujuan: $("[name='no_telp_tujuan']").val().trim().replace(/\s+/g, ""),
          kodepos_tujuan: $("[name='kodepos_tujuan']").val(),
          kelurahan_tujuan: $("[name='kelurahan_tujuan']").val(),
          kecamatan_tujuan: $("[name='kecamatan_tujuan']").val(),
          kabupaten_tujuan: $("[name='kabupaten_tujuan']").val(),
          kota_kabupaten_tujuan: $("[name='kota_kabupaten_tujuan']").val(),
          provinsi_tujuan: $("[name='provinsi_tujuan']").val(),
          alamat_tujuan: $("[name='alamat_tujuan']").val(),
      };

      $.ajax({
          url: "/form-data-satsdn",
          type: "POST",
          contentType: "application/json",
          processData: false,
          data: JSON.stringify(formData),
          dataType: "json",
          success: function (response) {
              localStorage.setItem("id_data_satsdn", response.id);
              Swal.fire({
                title: 'Success!',
                text :'Data berhasil disimpan, Mohon Diisi Data jenis satwa',
                icon : 'success',
                confirmButtonText : 'Next',
              }).then((result) => {
                window.location.href = `/form-data-species/${response.id}`;
                
              })
          },
          error: function (xhr) {
            if (xhr.status === 422) {
                let errors = xhr.responseJSON.errors;
                let errorMessages = "<ul>";
                
                
                $.each(errors, function (key, value) {
                    errorMessages += "<li>" + value[0] + "</li>";
                    $("#" + key).addClass("is-invalid"); 
                });

                errorMessages += "</ul>";
                $("#errorAlert").html(errorMessages).removeClass("d-none");
                $("html, body").animate({ scrollTop: 0 }, "slow");
            }
        }
      });
    });

    $(".no_telp").on("input", function () {
        let value = $(this).val().replace(/\D/g, "");

        // if (!value.startsWith("628")) {
        //     value = "628";
        // }

        if (value.length > 4) {
            value = value.substring(0, 4) + " " + value.substring(4);
        }
        if (value.length > 9) {
            value = value.substring(0, 9) + " " + value.substring(9);
        }
        if (value.length > 14) {
            value = value.substring(0, 14);
        }
        
        $(this).val(value);
    });
    

    function handleKodePos(inputKodePos, kelurahanId, kecamatanId, kotaId, provinsiId) {
        $(inputKodePos).on("input", function () {
            let kodePos = $(this).val().substring(0,5);
            $(this).val(kodePos); 
            if (kodePos.length === 5) {
                $.ajax({
                    url: `/search-kodepos?kodepos=${kodePos}`,
                    type: "GET",
                    success: function (response) {
                        let kelurahanDropdown = $(kelurahanId);
                        let kecamatanDropdown = $(kecamatanId);
                        kecamatanDropdown.empty();
                        kelurahanDropdown.empty();
                        kecamatanDropdown.append(`<option value="" selected hidden>Pilih Kecamatan</option>`);
                        kelurahanDropdown.append(`<option value="" selected hidden>Pilih Kelurahan</option>`);

                        if (response.data && response.data.length > 0) {
                            let locationData = response.data[0];

                            $(kecamatanId).val(locationData.district || "");
                            $(kotaId).val(locationData.regency || "").valid();
                            $(provinsiId).val(locationData.province || "").valid();

                            response.data.forEach(function (kelurahan) {
                                kelurahanDropdown.append(`<option value="${kelurahan.village}">${kelurahan.village}</option>`);
                            });
                            let existingDistricts = new Set();

                            response.data.forEach(function (kecamatan) {
                                if (!existingDistricts.has(kecamatan.district)) {
                                    existingDistricts.add(kecamatan.district);
                                    kecamatanDropdown.append(`<option value="${kecamatan.district}">${kecamatan.district}</option>`);
                                }
                            });

                        } else {
                            $(kecamatanId).val(null);
                            $(kotaId).val(null);
                            $(provinsiId).val(null);
                            kelurahanDropdown.append(`<option value="" selected hidden>Pilih Kelurahan</option>`);
                            alert("Data tidak ditemukan!");
                        }
                    },
                    error: function () {
                        console.error("Error fetching kode pos");
                    }
                });
            } else {
                $(kecamatanId).val(null);
                $(kotaId).val(null);
                $(provinsiId).val(null);
                let kelurahanDropdown = $(kelurahanId);
                kelurahanDropdown.empty();
                kelurahanDropdown.append(`<option value="" selected hidden>Pilih Kelurahan</option>`);
            }
        });
    }

    handleKodePos("#kodepos-pengirim", "#kelurahan-pengirim", "#kecamatan-pengirim", "#kota_kabupaten-pengirim", "#provinsi-pengirim");
    handleKodePos("#kodepos-tujuan", "#kelurahan-tujuan", "#kecamatan-tujuan", "#kota_kabupaten-tujuan", "#provinsi-tujuan");

  });

</script>
@endpush