@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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
@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">
            <div id="data-information">
              <h6 class="card-title">Dasar</h6>
              <div class="row">
                <div class="col-sm-3">
                  <div class="mb-3">
                    <label class="form-label">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-3">
                  <div class="mb-3">
                    <label for="purpose" class="form-label">Tujuan Transaksi</label>
                    <select name="purpose" id="purpose">
                      <option value=""hidden selected>Pilih Jenis Tujuan</option>
                      <option value="B">Breeding/Artificial Propagation</option>
                      <option value="E">Educational</option>
                      <option value="G">Botanical Gardens</option>
                      <option value="H">Hunting Trophies</option>
                      <option value="L">Law Enforcement</option>
                      <option value="M">Medical</option>
                      <option value="N">Introduction into The Wild</option>
                      <option value="P">Personal</option>
                      <option value="Q">Exhibitions</option>
                      <option value="S">Scientific</option>
                      <option value="T">Commersial</option>
                      <option value="Z">Zoo</option>

                    </select>
                  </div>
                </div><!-- Col -->
              </div><!-- Row -->
              <div class="row">
                <div class="col-sm-3">
                  <div class="mb-3">
                    <label class="form-label">No. Izin Mengambil/Menangkap</label>
                    <input type="text" name="no_izin_mengambil" id="no_izin_mengambil" class="form-control" placeholder="Nomor Izin Mengambil" required>
                  </div>
                </div><!-- Col -->
                <div class="col-sm-3">
                  <div class="mb-3">
                    <label for="tgl" class="form-label">Tanggal izin Mengambil/Menangkap</label>
                    <input type="date" name="tgl_no_izin_mengambil" id="tgl" placeholder="yyyy-mm-dd" class="form-control" required>
                  </div>
                </div><!-- Col -->
              </div><!-- Row -->

            <div class="row">
              <div class="col-sm-3">
                <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-3">
                <div class="mb-3">
                  <label for="tgl" class="form-label">Tanggal Surat Permohonan Angkut</label>
                  <input type="text" name="tgl_no_surat_permohonan_angkut" id="tgl" placeholder="yyyy-mm-dd" class="form-control" required>
                </div>
              </div><!-- Col -->
            </div><!-- Row -->
            
            <div class="row">
              <div class="col-sm-3">
                <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-3">
                <div class="mb-3">
                  <label for="tgl" class="form-label">Tanggal BAP</label>
                  <input type="text" name="tgl_no_bap" id="tgl" class="form-control" placeholder="yyyy-mm-dd" required>
                </div>
              </div><!-- Col -->
            </div><!-- Row -->

              <div class="row">
                <div class="col-sm-3">
                  <div class="mb-3">
                    <label class="form-label">SATSDN Asal</label>
                    <select name="satsdn_asal" id="satsdn_asal" class="form-control" required>
                      <option value="" selected hidden>Pilih Asal</option>
                    </select>
                  </div>
                </div><!-- Col -->
                <div class="col-sm-3">
                  <div class="mb-3">
                    <label class="form-label">SATSDN Tujuan</label>
                    <select name="satsdn_tujuan" id="satsdn_tujuan" class="form-control" required>
                      <option value="" selected hidden>Pilih Tujuan</option>
                    </select>
                  </div>
                </div><!-- Col -->
                <div class="col-sm-3">
                  <div class="mb-3">
                    <label class="form-label">Alat Angkut</label>
                    <select name="alat_angkut" id="alat_angkut" class="form-control" 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>
                    {{-- <input type="text" name="no_surat_permohonan_angkut" class="form-control" placeholder="No. Surat Permohonan Angkut "> --}}
                  </div>
                </div><!-- Col -->
              </div><!-- Row -->
            </div>

            <br>
            <div id="data-pengirim">
              <h6 class="card-title">Data Pengirim</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" 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="email" name="email_pengirim" id="email" class="form-control email" autocomplete="off" 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" max="99999" min="10000" 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" name="kelurahan_pengirim" id="kelurahan-pengirim" 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" disabled> --}}
                    <select class="form-control" name="kecamatan_pengirim" id="kecamatan-pengirim" 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" disabled>
                  </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" disabled>
                  </div>
                </div><!-- Col -->
              </div><!-- Row -->
              <div class="row">
                <div class="col-sm-6">
                  <div class="mb-3">
                    <label class="form-label">Alamat</label>
                    <input type="text" name="alamat_pengirim" id="alamat-pengirim" class="form-control" placeholder="Enter Alamat/Nama Jalan" required>
                  </div>
                </div><!-- col --->
              </div> <!-- Row --->
            </div>
            <br>
            <div id="data-tujuan">
              <h6 class="card-title">Data Tujuan</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" 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"  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" maxlength="5" max="99999" min="10000" 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" 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" disabled > --}}
                    <select class="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" disabled>
                  </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" disabled>
                  </div>
                </div><!-- Col -->
              </div><!-- Row -->
              <div class="row">
                <div class="col-sm-6">
                  <div class="mb-3">
                    <label class="form-label">Alamat</label>
                    <input type="text" name="alamat_tujuan" id="alamat-tujuan" class="form-control" placeholder="Enter Alamat/Nama Jalan" required>
                  </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>
@endpush

@push('custom-scripts')
<script src="{{ asset('assets/js/select2.js') }}"></script>
  
@endpush

<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>


<script>
  $(document).ready(function(){
    $.ajax({
        url: "https://www.emsifa.com/api-wilayah-indonesia/api/provinces.json",
        type: "GET",
        success: function (response) {
            let satsdn_asal = $("#satsdn_asal");
            let satsdn_tujuan = $("#satsdn_tujuan");

            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");
        }
    });
  })
</script>

<script>
$(document).ready(function () {

  $.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 = {
        nomor_satsdn: $("[name='nomor_satsdn']").val(),
        purpose: $("[name='purpose']").val(),
        no_izin_mengambil: $("[name='no_izin_mengambil']").val(),
        tgl_no_izin_mengambil: $("[name='tgl_no_izin_mengambil']").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_tujuan: $("[name='satsdn_tujuan']").val(),
        alat_angkut: $("[name='alat_angkut']").val(),

        nama_pengirim: $("[name='nama_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(),
        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 || "");
                          $(provinsiId).val(locationData.province || "");

                          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>