@extends('layouts.full')
{{-- title --}}
@section('title','Registrasi')
{{-- vendor scripts --}}
@section('vendor-styles')
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/forms/select/select2.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/pickers/pickadate/pickadate.css')}}">
@endsection
{{-- page scripts --}}
@section('page-styles')
<link rel="stylesheet" type="text/css" href="{{asset('css/pages/authentication.css')}}">
<style>

#loading-spinner {
    position: absolute;
    top: 75%;
    left: 54%;
    transform: translate(-50%, -50%);
    background-image: url('spinner.gif');
    opacity: 1; /* Ubah nilai ini untuk mengatur tingkat transparansi */
    width: 700px; /* Ubah nilai ini untuk mengatur lebar spinner */
    height: 700px; /* Ubah nilai ini untuk mengatur tinggi spinner */
}
#loading-spinner img {
    display: block;
    margin: 0 auto;
    width: 100%; /* Sesuaikan lebar gambar agar sesuai dengan kotak spinner */
    height: auto; /* Sesuaikan tinggi gambar agar sesuai dengan kotak spinner */
}
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Lapisan transparan */
    display: none;
    z-index: 9999; /* Z-index tinggi untuk menutupi semua elemen */
}


  .login-bg {
    height: 90%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .login-ic {
    position: relative;
    width: 200px; /* Lebar elemen */
    height: 250px; /* Tinggi elemen */
    text-align: center; /* Mengatur konten di tengah elemen */

  }

  .login-ic img {
    position: absolute;
    max-width: 100%; /* Maksimum lebar gambar sesuai dengan lebar elemen */
    max-height: 100%;
    top: 20px;
    left: -120px;
  }
  .form-group {
    margin-bottom: 0px; /* Atur jarak antar form di sini */
  }

  #icon-arrow-back {
  margin-left: 0px; /* Mengatur jarak antara ikon dan teks */
  transform: scaleX(-1); /* Membalik ikon horizontal */
}

</style>
@endsection

@section('content')

<!-- login page start -->

<section id="auth-ppdb" class="row flexbox-container">

  <div class="col-xl-1 col-lg-6 col-md-5 p-0 d-md-block d-lg-block d-sm-none d-none login-bg">
  
    <div class="login-ic">
      <img src="{{ asset('images/logo.png') }}" />
   
    </div>

  </div>

  <div class="col-sm-6" style="background: #F5F5F5">
  
    <div class="row justify-content-md-center">

      <div class="col-sm-9">

        <!-- <h3 class="text-center" style="font-weight: bolder; color: #009C9F;">FORMULIR PENDAFTARAN</h3> -->
        <h4 class="text-center mb-2">
          <!-- SEKOLAH QUR'AN DARUL FATTAH<br>  -->
        </h4>
        <div class="card bg-authentication mb-0">
          <div class="card disable-rounded-right mb-0 p-2 h-100 d-flex justify-content-center">
            <div class="card-header pb-1">
              <div class="card-title">
                <!-- <h5 class="text-center">Sekolah Qur'an Darul Fattah Lampung</h5> -->
                <h3 class="text-center" style="font-weight: bolder; color: #009C9F;">FORMULIR PENDAFTARAN <br> PPDB SQDF 2025/2026</h3>
                <p id="countdown" class="text-center" style="font-weight: bolder; color: red;"></p>

              </div>
            </div>

            <!-- <form method="POST"> -->

            <div class="card-content">
              <div class="card-body">
                  @csrf



                  <div class="form-group mb-50">
                      <label class="text-bold-600" for="name">Nama Siswa</label>
                      <input id="name" type="name" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" autocomplete="off" autofocus placeholder="Nama Peserta">
                      @error('name')
                      <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                      </span>
                      @enderror
                  </div>
        <div id="identitas" class="row">    

                <div class="col-sm-12">
                    <div class="form-group mb-50">
                        <label class="text-bold-600" for="nik">NIK Peserta</label>
                        <input id="nik" type="number" class="form-control @error('nip') is-invalid @enderror" name="nik" value="{{ old('nik') }}" autocomplete="off" autofocus placeholder="NIK Sesuai KK">
                        @error('nik')
                        <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>
                </div>


              





                <div class="col-sm-6">
                  <div class="form-group mb-50">
                    <label class="text-bold-600" for="name">Tempat Lahir</label>
                    <input id="born_address" type="text" class="form-control @error('born_address') is-invalid @enderror" name="born_address" value="{{ old('born_address') }}" autocomplete="off" autofocus placeholder="Tempat Lahir Peserta">
                    @error('born_address')
                    <span class="invalid-feedback" role="alert">
                      <strong>{{ $message }}</strong>
                    </span>
                    @enderror
                  </div>
                </div>



              <div class="col-sm-6">
                <div class="form-group  mb-50">
                  <label class="text-bold-600" for="name">Tanggal Lahir</label>
                    <div class="controls form-label-group position-relative has-icon-left">
                      <input type="text" id="born_date" name="born_date" class="form-control  @error('born_date') is-invalid @enderror pickadate" placeholder="Pilih Tanggal" required data-validation-required-message="This born_date field is required">
                      <div class="form-control-position">
                        <i class="bx bx-calendar"></i>
                      </div>
                    </div>
                </div>
              </div>
                


              <div class="col-sm-6">
                    <div class="form-group mb-50">
                        <label class="text-bold-600" for="name">Pilih Jenis Kelamin </label>
                        <select id="gender" name="gender" class="select2 form-control @error('gender') is-invalid @enderror" required data-validation-required-message="This gender field is required">
                          <option value="">Pilih Jenis Kelamin</option>

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


              

                <input type="hidden" id="agama" name="agama" value="Islam">

              <input type="hidden" id="kewarganegaraan" name="kewarganegaraan" value="Indonesia">
                         

                <div class="col-sm-6">
                  <div class="form-group mb-50">
                    <label class="text-bold-600" for="name">No HP Yang Bisa Dihubungi</label>
                    <input id="phone" type="text" class="form-control @error('phone') is-invalid @enderror" name="phone" value="{{ old('phone') }}" autocomplete="off" autofocus placeholder="No HP Yang Bisa Dihubungi">
                    @error('phone')
                    <span class="invalid-feedback" role="alert">
                      <strong>{{ $message }}</strong>
                    </span>
                    @enderror
                  </div>
                </div>



                              
                <div class="col-sm-12">
                  <div class="form-group">
                    <label>Email Orang Tua (Aktif)</label>
                    <div class="controls form-label-group mb-50">
                      <input type="email" id="email" name="email" class="form-control  @error('email') is-invalid @enderror" placeholder="Email Orang Tua / Wali" required data-validation-required-message="This email field is required" autocomplete="off">
                      <div class="form-control-position">
                      </div>
                      <!-- Error Message -->
                      @error('email')
                      <div class="help-block">
                        <ul role="alert">
                          <li>{{ $message }}</li>
                        </ul>
                      </div>
                      @enderror
                    </div>
                  </div>
                </div>




                <div class="col-sm-12">
                    <div class="form-group mb-50">
                        <label class="text-bold-600" for="name">Pilih Unit Sekolah Yang Di Daftar </label>
                        <select id="school" name="school" class="select2 form-control @error('school') is-invalid @enderror" required data-validation-required-message="This school field is required">
                            
                          <option value="">Pilih Sekolah</option>
                          
                          <option value="1">SMP Quran Darul Fattah Bandar Lampung (Fullday)</option>
                          <option value="2">SMP Quran Darul Fattah Lampung Selatan (Boarding)</option>
                          
                        </select>
                        @error('school')
                            <span class="invalid-feedback" role="alert">
                      <strong>{{ $message }}</strong>
                    </span>
                    @enderror
                    </div>
                </div>

              

        </div>
        <!-- Akhir Row -->

        <div id="data_lanjutan" class="row">
          

                <!-- Pilihan Jurusan -->
                  <div id="jalur_masuk_div" class="col-sm-12" style="display: none;">
                    <div class="form-group mb-50">
                      <hr>
                      <label class="text-bold-600" for="name">Jalur Masuk</label>
                      <select id="jalur_masuk" name="jalur_masuk" class="select2 form-control @error('jalur_masuk') is-invalid @enderror" required data-validation-required-message="This jalur_masuk field is required">
                        <option value="">Pilih Jalur Masuk</option>
                        <option value="Reguler">Reguler</option>
                        <!--<option value="Pindahan">Pindahan</option>-->
                        <!--<option value="Alumni">Alumni</option>-->
                      </select>
                      @error('jalur_masuk')
                      <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                      </span>
                      @enderror
                    </div>
                  </div>
                  
                    <div class="col-sm-12" id="nisn_span" style="display: none;">
                    <div class="form-group mb-50">
                      <label class="text-bold-600" for="nisn">NISN Peserta</label>
                      <input id="nisn" min="8" type="number" class="form-control @error('nisn') is-invalid @enderror" name="nisn" value="{{ old('nisn') }}" autocomplete="off" autofocus placeholder="NISN Peserta 10 DIGIT">
                      @error('nisn')
                      <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                      </span>
                      @enderror
                    </div>
                    </div>
                <!-- Pilihan Jurusan -->




                <!-- Pilihan KELAS PINDAHAN -->
                <div class="col-sm-12" id="sd_span" style="display: none;">
                    <div class="form-group mb-50">
                        <label class="text-bold-600" for="name">Ketersedian Kelas SD (Ikhwan dan Akhwat)</label>
                        <select id="jenjang_pindahan_sd" name="jenjang_pindahan_sd" class="select2 form-control @error('jenjang_pindahan_sd') is-invalid @enderror" required data-validation-required-message="This jenjang_pindahan_sd field is required">
                          <option value="">Pilih Jenjang Pindahan</option>
                          <option value="2">Kelas 2</option>

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


                <div class="col-sm-12" id="smpfd_span" style="display: none;">
                    <div class="form-group mb-50">
                        <label class="text-bold-600" for="name">Ketersedian Kelas SMP FULLDAY (Ikhwan)</label>
                        <select id="jenjang_pindahan_smpfd" name="jenjang_pindahan_smpfd" class="select2 form-control @error('jenjang_pindahan_smpfd') is-invalid @enderror" required data-validation-required-message="This jenjang_pindahan_smpfd field is required">
                          <option value="">Pilih Jenjang Pindahan</option>
                          <option value="8">Kelas 8</option>

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

                <div class="col-sm-12" id="smpbd_span" style="display: none;">
                    <div class="form-group mb-50">
                        <label class="text-bold-600" for="name">Ketersedian Kelas SMP Boarding (Akhwat)</label>
                        <select id="jenjang_pindahan_smpbd" name="jenjang_pindahan_smpbd" class="select2 form-control @error('jenjang_pindahan_smpbd') is-invalid @enderror" required data-validation-required-message="This jenjang_pindahan_smpbd field is required">
                          <option value="">Pilih Jenjang Pindahan</option>
                          <option value="8">Kelas 8</option>

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

                <div class="col-sm-12" id="sma_span" style="display: none;">
                    <div class="form-group mb-50">
                        <label class="text-bold-600" for="name">Ketersedian Kelas SMA (Akhwat)</label>
                        <select id="jenjang_pindahan_sma" name="jenjang_pindahan_sma" class="select2 form-control @error('jenjang_pindahan_sma') is-invalid @enderror" required data-validation-required-message="This jenjang_pindahan_sma field is required">
                          <option value="">Pilih Jenjang Pindahan</option>
                          <option value="11">Kelas 11</option>

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

                <!-- Pilihan KELAS PINDAHAN -->


        </div>
        <!-- Akhir Row Data Lanjutan-->

                <div class="col-sm-6">
                        <div class="form-group d-flex flex-md-row flex-column justify-content-between align-items-center">
                        </div>
                </div>
                

              <br>

                <div class="row">
                    <div class="col-md-6" >
                        <div class="form-check" id="cek" style="display: none;">
                            <input class="form-check-input" type="checkbox" value="" id="confirmationCheckbox">
                            <label class="form-check-label" for="confirmationCheckbox">
                                Konfirmasi
                            </label>
                        </div>
                    </div>

                    <div class="col-md-6 text-right">
                        <a href="{{ url('student-login') }}" class="card-link"><small>Login Jika Sudah Daftar ?</small></a>
                    </div>
                </div>

              <br>
                
                <button type="button" id="lanjutkan" class="btn btn-warning glow w-100 position-relative" disabled>Lanjutkan
                  <i id="icon-arrow" class="bx bx-right-arrow-alt"></i>
                </button>
               
                
                
              <div class="row">
                <div class="col-sm-6">
                  <button type="button" id="kembali" style="display: none;" class="btn btn-danger glow w-100 position-relative">
                  <i id="icon-arrow-back" class="bx bx-right-arrow-alt"></i>Kembali
                  
                  </button>
                </div>

                <div class="col-sm-6">
                <button type="button" id="submitForm" style="display: none;" class="btn btn-primary glow w-100 position-relative" disabled>Daftar
                  <i id="icon-arrow" class="bx bx-right-arrow-alt"></i>
                </button>
                </div>
              </div>


            
<!-- </form> -->
              </div>
            </div>
      
          </div> 
        </div>     
      </div>
    </div>
  </div>    
</section>
<!-- login page ends -->



<!-- Loading Spinner  style="display: none;"-->
<div id="loading-overlay">

<div id="loading-spinner">
<img src="{{ asset('images/spinner.gif') }}" alt="Loading..." />
</div>
</div>




    <!-- MODAL KONFIRMASI -->
    <div id="confirmationModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Konfirmasi Pendaftaran</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Nama Peserta: <span id="modalName"></span></p>
        <p>Jalur Masuk: <span id="modalJalur"></span></p>
        <p>Mendaftar Unit : <b><span id="modalSchool"></span></b></p>
        
        Pastikan E-MAIL Anda benar, karena setelah pendaftaran selesai, Nomor VA pembayaran akan dikirimkan melalui E-MAIL tersebut.
        <br><br>
        VA Pembayaran akan aktif di hari berikutnya setelah selesai mendaftar, mohon cek E-MAIL secara berkala.
        <br><br>
        <p>E-Mail Penerima : <span id="modalEmail"></span></p>

        <br><br>
        Pastikan Data Anda Benar!
        <br>
        Apakah Anda yakin akan mendaftar di Unit Sekolah ini?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-warning" data-dismiss="modal">Batal</button>
        <button type="button" class="btn btn-primary" id="confirmRegistration">Ya, Daftar</button>
      </div>
    </div>
  </div>
</div>
    <!-- AKHIR MODAL KONFIRMASI PENDAFTARAN -->
@endsection

{{-- vendor scripts --}}
@section('vendor-scripts')

<script src="{{asset('vendors/js/forms/select/select2.full.min.js')}}"></script>
<script src="{{asset('vendors/js/forms/validation/jqBootstrapValidation.js')}}"></script>
<script src="{{asset('vendors/js/pickers/pickadate/picker.js')}}"></script>
<script src="{{asset('vendors/js/pickers/pickadate/picker.date.js')}}"></script>

@endsection

{{-- page scripts --}}
@section('page-scripts')

<script src="{{asset('js/scripts/forms/select/form-select2.js')}}"></script>
<script src="{{asset('js/scripts/forms/validation/form-validation.js')}}"></script>


<script>
 $(document).ready(function () {
  var currentDate = new Date(); // Mendapatkan tanggal dan waktu saat ini
  var startTime = new Date('2025-05-01T00:00:00').getTime(); // Menetapkan tanggal dan waktu mulai
  var endTime = new Date('2025-05-30T20:59:59').getTime(); // Tanggal dan waktu berakhir

  // Fungsi untuk menghitung waktu mundur dan memperbarui tampilan
  function updateCountdown() {
    var currentTime = new Date().getTime(); // Mendapatkan waktu sekarang
    var timeRemaining = endTime - currentTime;

    if (currentTime < startTime) {
      // Jika saat ini sebelum waktu mulai, tampilkan pesan bahwa hitung mundur belum dimulai
      document.getElementById('countdown').innerHTML = 'Daftarkan Diri Anda Pada <br> Hari Kamis, 02 Januari 2025';
      $('#lanjutkan').prop('disabled', true); // Nonaktifkan tombol "lanjutkan"
    } else if (timeRemaining <= 0) {
      // Jika waktu berakhir, tampilkan pesan
      document.getElementById('countdown').innerHTML = 'Waktu sudah habis';
      $('#lanjutkan').prop('disabled', true); // Nonaktifkan tombol "lanjutkan"
    } else {
      // Hitung hari, jam, menit, dan detik yang tersisa
      var days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
      var hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);

      // Tampilkan waktu mundur dalam elemen dengan id "countdown"
      document.getElementById('countdown').innerHTML = 'Akhir Pendaftaran<br>' + days + ' hari, ' + hours + ' jam, ' + minutes + ' menit, ' + seconds + ' detik';
      
      // Aktifkan tombol "lanjutkan" jika berada di antara waktu mulai dan waktu akhir
      if (currentTime >= startTime && currentTime <= endTime) {
        $('#lanjutkan').prop('disabled', false); // Aktifkan tombol "lanjutkan"
      }
    }
  }

  // Perbarui tampilan setiap detik
  setInterval(updateCountdown, 1000);

});
</script>





<script>
  $(".select2").select2({
    dropdownAutoWidth: true,
    width: '100%'
  });

</script>




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


    // Basic date
    $('.pickadate').pickadate({
      format: 'yyyy-mm-dd',
      selectYears: true,
      selectMonths: true
    });

    $('#gender').select2({
      data: @php echo json_encode($gender) @endphp,
      placeholder: 'Pilih Jenis Kelamin'
    });




 
  });

</script>

<!-- 
$('#school').select2({
  data: @php echo json_encode($school) @endphp,
  placeholder: 'Pilih Sekolah'
}); 
-->


<script>
  // Menggunakan jQuery untuk menangani peristiwa klik tombol "Daftar"
  $(document).ready(function () {
    
    $('#confirmRegistration').on('click', function () {

          // Ambil data yang diperlukan dari input
          var nik = $('#nik').val();
          var nisn = $('#nisn').val();
          var name = $('#name').val();
          var born_address = $('#born_address').val();
          var born_date = $('#born_date').val();
          var email = $('#email').val();
          var phone = $('#phone').val();
          var gender = $('#gender').val();
          var agama = $('#agama').val();
          var kewarganegaraan = $('#kewarganegaraan').val();
          var selectedSchool = $('#school').val();

          //Jalur Masuk
          var jalur_masuk = $('#jalur_masuk').val();

          //Kelas Pindahan
          var sd = $('#jenjang_pindahan_sd').val();
          var smpfd = $('#jenjang_pindahan_smpfd').val();
          var smpbd = $('#jenjang_pindahan_smpbd').val();
          var sma = $('#jenjang_pindahan_sma').val();


          if (selectedSchool == '1') {
            grade = '7';
            room = 'FD 7';
            pindahan = smpfd;
          } else if (selectedSchool == '2') {
            grade = '7';
            room = 'Boarding 7';
            pindahan = smpbd;
          } else if (selectedSchool == '3') {
            grade = '10';
            room = 'SMA 10';
            pindahan = sma;
          } else if (selectedSchool == '4') {
            grade = '1';
            room = 'SD 1';
            pindahan = sd;
          } else {
            grade = '0'; 
            room = '0';
            pindahan = '-';
          }

          // Data yang akan dikirimkan dalam bentuk objek
          var dataToSend = {
            nik: nik,
            nisn: nisn,
            name: name,
            born_address: born_address,
            born_date: born_date,
            email: email,
            phone: phone,
            gender: gender,
            agama: agama,
            kewarganegaraan: kewarganegaraan,
            school: selectedSchool,
            grade: grade,
            room: room,
            jalur_masuk: jalur_masuk,
            pindahan: pindahan,
          };

          // Lakukan POST data ke URL yang sesuai dengan kebutuhan Anda
              $('#loading-overlay').show();
              $('#loading-spinner').show();
          $.ajax({
            type: 'POST',
            url: '/ppdb/register-student',
            data: dataToSend,
                    headers: {
                      "X-CSRF-TOKEN": $("meta[name='csrf-token']").attr("content"),
                    },
            success: function (response) {
              
              console.log('Data TELEGRAM:', response);

              var nik = $('#nik').val();
              var url = '/send-email?nik=' + nik;
              window.location.href = url;              

            },
            error: function (error) {
              // Tangani kesalahan jika POST gagal
              alert('Terjadi kesalahan saat mengirim data ke server, Silahkan Coba Lagi.');
            },
          });

      // Tutup modal konfirmasi
      $('#confirmationModal').modal('hide');

    });


    $('#submitForm').on('click', function () {

        var nik = $('#nik').val();
        var name = $('#name').val();
        var school = $('#school').val();
        var email = $('#email').val();

        var nisn = $('#nisn').val();
        // Pemeriksaan panjang NISN
        if (nisn.length !== 10) {

          $('#nisn').get(0).setCustomValidity('NIK harus terdiri dari 10 digit');
          alert('NISN harus terdiri dari 10 digit');
          $('#nisn').focus(); 
          return;

        }

        var jalur_masuk = $('#jalur_masuk').val();
            if (jalur_masuk == ''){
                    alert('Mohon Tentukan Jalur Masuk Anda!');
                    $('#jalur_masuk').focus(); 
                    return;
            }
        

        // Isi data nama dan sekolah ke dalam modal
        $('#modalName').text(name);
        $('#modalJalur').text(jalur_masuk);
        $('#modalEmail').text(email);

        var dataschool = $('#school').val();
          var school; // Variabel untuk menyimpan nama sekolah

          if (dataschool == '1') {
            school = 'SMP Quran Darul Fattah Bandar Lampung';
          } else if (dataschool == '2') {
            school = 'SMP Quran Darul Fattah Lampung Selatan';
          } else if (dataschool == '3') {
            school = 'SMA Quran Darul Fattah Bandar Lampung';
          } else if (dataschool == '4') {
            school = 'SD Quran Darul Fattah Bandar Lampung';
          } else {
            school = 'Sekolah tidak valid'; // Handle jika dataschool tidak sesuai
          }

          $('#modalSchool').text(school);


      $('#confirmationModal').modal('show');
    });

  });
</script>


<!-- JALUR MASUK SCRIPT -->

<!-- JALUR MASUK SCRIPT -->
<script>
  $(document).ready(function () {
    $('#jalur_masuk').on('change', function () {
      var gender = $('#gender').val();
      var dataschool = $('#school').val();
      var selectedJalurMasuk = $(this).val(); // Ambil nilai dari dropdown jalur_masuk

      // Jika jalur_masuk adalah 'Reguler' atau 'Alumni'
      if (selectedJalurMasuk === 'Reguler') {
        if (dataschool == '1' && gender == 'Laki-Laki') {
          alert('Mohon Maaf, ' + $('#school option:selected').text() + ' Kelas ' + $('#gender option:selected').text() + ' Tidak Ada Kuota!');
          $('#jalur_masuk').val('').trigger('change');
          $('#sd_span, #smpfd_span, #smpbd_span, #sma_span, #nisn_span').hide();
          $('#nisn').val('');
          
            // Setelah pengguna menekan "OK" di alert
            setTimeout(function () {
            $('#kembali').trigger('click'); // Simulasikan klik tombol "Kembali"
            }, 100); // Berikan sedikit jeda untuk memastikan alert ditutup
            
        } else if (dataschool == '1' && gender != 'Laki-Laki') {
          $('#sma_span').hide();
          $('#smpfd_span').hide();
          $('#smpbd_span').hide();
          $('#nisn_span').show();
          
        } else if (dataschool == '3' && gender == 'Laki-Laki') {
          alert('Mohon Maaf, ' + $('#school option:selected').text() + ' Kelas ' + $('#gender option:selected').text() + ' Tidak Ada Kuota!');
          $('#jalur_masuk').val('').trigger('change');
          $('#sd_span, #smpfd_span, #smpbd_span, #sma_span, #nisn_span').hide();
          $('#nisn').val('');
          
          
            // Setelah pengguna menekan "OK" di alert
            setTimeout(function () {
            $('#kembali').trigger('click'); // Simulasikan klik tombol "Kembali"
            }, 100); // Berikan sedikit jeda untuk memastikan alert ditutup
            
        } else if (dataschool == '3' && gender != 'Laki-Laki') {
          $('#sma_span').hide();
          $('#smpfd_span').hide();
          $('#smpbd_span').hide();
          $('#nisn_span').show();
        } else if (dataschool == '4' && gender == 'Laki-Laki') {
          alert('Mohon Maaf, ' + $('#school option:selected').text() + ' Kelas ' + $('#gender option:selected').text() + ' Tidak Ada Kuota!');
          $('#jalur_masuk').val('').trigger('change');
          $('#sd_span, #smpfd_span, #smpbd_span, #sma_span, #nisn_span').hide();
          $('#nisn').val('');
          
          
            // Setelah pengguna menekan "OK" di alert
            setTimeout(function () {
            $('#kembali').trigger('click'); // Simulasikan klik tombol "Kembali"
            }, 100); // Berikan sedikit jeda untuk memastikan alert ditutup
            
        } else if (dataschool == '4' && gender != 'Laki-Laki') {
          $('#nisn').val('1234567890');
          $('#nisn_span, #sd_span').hide();
        } else if (dataschool === '2' && (gender === 'Perempuan' || gender === 'Laki-Laki')) {
          $('#sma_span').hide();
          $('#smpfd_span').hide();
          $('#smpbd_span').hide();
          $('#nisn_span').show();
        }
      } else if (selectedJalurMasuk === 'Alumni') {
        alert('Jalur Masuk Alumni Sudah Tutup'); // Tampilkan pesan alert
        $('#jalur_masuk').val('').trigger('change'); // Reset nilai dropdown
        $('#sd_span, #smpfd_span, #smpbd_span, #sma_span, #nisn_span').hide(); // Sembunyikan semua span
        $('#nisn').val(''); // Kosongkan NISN
        
          
            // Setelah pengguna menekan "OK" di alert
            setTimeout(function () {
            $('#kembali').trigger('click'); // Simulasikan klik tombol "Kembali"
            }, 100); // Berikan sedikit jeda untuk memastikan alert ditutup
      }
    });
  });
</script>



<!-- SUBMIT LANJUTKAN SCRIPT -->
<script>
  $(document).ready(function () {
    $('#lanjutkan').on('click', function() {

      var name = $('#name').val();
      if (name == ''){
        alert('Mohon isi Terlebih Dahulu Nama Peserta ');
        $('#name').focus(); 
        return;
      }

      var nik = $('#nik').val();
      // Pemeriksaan panjang NIK
      if (nik.length !== 16) {

        $('#nik').get(0).setCustomValidity('NIK harus terdiri dari 16 digit');
        alert('NIK harus terdiri dari 16 digit');
        $('#nik').focus(); 
        return;

      }

      //Cek AJAX Untuk NIK Bisa Digunakan atau tidak
      // Lakukan permintaan AJAX berdasarkan NIK menggunakan $.ajax
      $.ajax({
            url: '/ppdb/getnik/' + nik,
            type: 'GET',
            success: function(data) {
              if ($.isEmptyObject(data)) {
                  // Data kosong, lakukan sesuatu di sini jika diperlukan
                  alert('NIK Anda Bisa Di Gunakan');


                  //Cek Data Yang Lainnya
                  
                  var born_address = $('#born_address').val();
                  if (born_address == ''){
                    alert('Mohon isi Terlebih Dahulu Tempat Lahir Peserta ');
                    $('#born_address').focus(); 
                    return;
                  }

                  var born_date = $('#born_date').val();
                  if (born_date == ''){
                    alert('Mohon isi Terlebih Dahulu Tanggal Lahir Peserta ');
                    $('#born_date').focus(); 
                    return;
                  }

                  var gender = $('#gender').val();
                  if (gender == ''){
                    alert('Mohon isi Terlebih Dahulu Jenis Kelamin Peserta ');
                    $('#gender').focus(); 
                    return;
                  }

                  var email = $('#email').val();
                  if (email == ''){
                    alert('Mohon isi Terlebih Dahulu Email Anda! ');
                    $('#email').focus(); 
                    return;
                  }
                  else{
                    var emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

                    if (!emailPattern.test(email) || email.includes(' ')) {
                        alert('E-Mail Anda Tidak Valid!');
                        $('#email').focus();
                        return false;
                    }

                  }


                  var phone = $('#phone').val();
                  if (phone == ''){
                    alert('Mohon isi Terlebih Dahulu No HP Anda!');
                    $('#phone').focus(); 
                    return;
                  }

                  var school = $('#school').val();
                  if (school == ''){
                    alert('Mohon isi Pilihan Sekolah Yang Ingin Anda Daftar!');
                    $('#school').focus(); 
                    return;
                  }

                  $('#lanjutkan').hide(); 
                  $('#identitas').hide(); 
                  $('#jalur_masuk_div').show();
                  $('#kembali').show();
                  $('#submitForm').show();
                  $('#cek').show();
                  
                  $('#name').prop('disabled', true); // Menjadikan input dengan ID "name" menjadi nonaktif
                  
                  $('#data_lanjutan').show(); // Menampilkan elemen




              } else {
                  // Data ditemukan, lakukan tindakan dengan data yang diterima
                  alert('NIK Sudah Melakukan Pendaftaran,: ' + data.nik);

                  $('#nik').val('');
                  $('#nik').focus();
              }
          },

            error: function(xhr, status, error) {
              console.error('Terjadi kesalahan:', error);
            }
          });
          //AKHIR permintaan AJAX berdasarkan NIK menggunakan $.ajax








    });
  });
</script>




<!--TOMBOL KEMBALI SCRIPT -->
<script>
  $(document).ready(function () {
    $('#kembali').on('click', function() {

      $('#lanjutkan').show(); 
      $('#identitas').show(); 
      
      $('#kembali').hide();
      $('#submitForm').hide();
      $('#name').prop('disabled', false);
      $('#data_lanjutan').hide();

      $('#jalur_masuk').val('');
              $('#jalur_masuk').select2({
                placeholder: 'Pilih Jalur Masuk'
              });

      $('#nisn').val('');
      $('#nisn_span').hide(); 


      $('#jenjang_pindahan_sd').val('');
      $('#jenjang_pindahan_smpfd').val('');
      $('#jenjang_pindahan_smpbd').val('');
      $('#jenjang_pindahan_sma').val('');

      $('#sd_span').hide();
      $('#smpfd_span').hide();
      $('#smpbd_span').hide();
      $('#sma_span').hide();
      $('#confirmationCheckbox').prop('checked', false);
      $('#submitForm').prop('disabled', true);
      $('#cek').hide();



    });
  });
</script>

<script>
    const confirmationCheckbox = document.getElementById('confirmationCheckbox');
    const daftarButton = document.getElementById('submitForm');

    confirmationCheckbox.addEventListener('change', function () {
        daftarButton.disabled = !this.checked;
    });
</script>


@endsection