@extends('layoutstudents.app')

{{-- page Title --}}
@section('title','Public')

{{-- 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')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/extensions/toastr.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/extensions/toastr.css')}}">

@endsection

@section('page-styles')

<link rel="stylesheet" type="text/css" href="{{asset('css/plugins/extensions/toastr.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('css/pages/dashboard-analytics.css')}}">

<style>
/* CSS */
.progress {
    width: 72%; /* Lebar awal progress bar */
    height: 30px; /* Tinggi progress bar */
    background-color: #f3f3f3;
    border-radius: 15px; /* Radius untuk membuat ujung tidak lancip */
    overflow: hidden; /* Untuk memotong konten yang berlebih jika progress melewati batas */
}

.progress-bar {
    width: 10%; /* Lebar awal div bar, bisa Anda sesuaikan */
    height: 100%;
    background-color: #4caf50;
    text-align: center;
    line-height: 30px;
    color: white;
    transition: width 0.3s ease; /* Animasi ketika mengisi progress bar */
}

#loading-spinner {
    position: fixed;
    top: 85%;
    left: 54%;
    transform: translate(-50%, -50%);
    opacity: 1; /* Ubah nilai ini untuk mengatur tingkat transparansi */
    width: 1000px; /* Ubah nilai ini untuk mengatur lebar spinner */
    height: 1000px; /* 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 */
}

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

@section('content')

<!-- Dashboard Starts -->
<h3>SELAMAT DATANG PESERTA DIDIK SQDF</h3>

<section class="invoice-list-wrapper">
  <div class="row">
    <div class="col-12 col-sm-3 col-lg-3">
      <div class="form-group">
      <label>Nik Peserta Didik</label>

        <fieldset class="form-group position-relative has-icon-left mb-0">
            @if (Auth::guard('student')->check())
            @endif
          <input type="text" id="nik" autocomplete="off" name="nik" class="form-control  @error('nik') is-invalid @enderror" placeholder="Nik" required data-validation-required-message="This name field is required" value="{{ Auth::guard('student')->user()->nik }}" readonly>
          <input type="hidden" id="id_student" autocomplete="off" name="id_student" class="form-control  @error('id_student') is-invalid @enderror" placeholder="ID STUDENT" required data-validation-required-message="This ID field is required" value="{{ Auth::guard('student')->user()->id }}" readonly>

          <div class="form-control-position">
          </div>
        </fieldset>
      </div>
    </div>

<br><br>
    <div class="col-12 col-sm-3 col-lg-3">
      <div class="form-group">
        <label>Nama Peserta Didik</label>
        <fieldset class="form-group position-relative has-icon-left mb-0">
          <input type="text" id="name" autocomplete="off" name="name" class="form-control  @error('name') is-invalid @enderror" placeholder="Nama" required data-validation-required-message="This name field is required" value="{{ Auth::guard('student')->user()->name }}" readonly>
          <div class="form-control-position">
          </div>
        </fieldset>
      </div>
    </div>

          <input type="hidden" id="end_date" class="form-control pickadate filter-change" placeholder="Sampai Tanggal" value="{{ Auth::guard('student')->user()->school }}">
                    
                  
          @php
          $schoolValue = Auth::guard('student')->user()->school;

          $schoolText = '';

          if ($schoolValue == 1) {
              $schoolText = 'SMP Quran Darul Fattah Bandar Lampung';
          } elseif ($schoolValue == 2) {
              $schoolText = 'SMP Quran Darul Fattah Lampung Selatan';
          } elseif ($schoolValue == 3) {
              $schoolText = 'SMA Quran Darul Fattah Bandar Lampung';
          } elseif ($schoolValue == 4) {
              $schoolText = 'SD Quran Darul Fattah Bandar Lampung';
          }

          if ($schoolValue == 1) {
             $schoolLink = 'https://chat.whatsapp.com/G1JEArgP0DdAK2Abin30bc';
          } elseif ($schoolValue == 2) {
              $schoolLink = 'https://chat.whatsapp.com/G1JEArgP0DdAK2Abin30bc';
          } elseif ($schoolValue == 3) {
              $schoolLink = 'https://chat.whatsapp.com/GxFLAnIKDyBCi6CIvEoszT';
          } elseif ($schoolValue == 4) {
              $schoolLink = 'https://chat.whatsapp.com/DXrONJxIiiFKrYHYMZ4xuj';
          }


          @endphp

          <div class="col-12 col-sm-2 col-lg-2">
            <div class="form-group">
              <label>Jalur Masuk</label>
              <fieldset class="form-group position-relative has-icon-left mb-0">
              <input type="text" id="jalur_masuk" name="jalur_masuk" class="form-control pickadate filter-change" value="{{ Auth::guard('student')->user()->jalur_masuk }}" readonly>
              
              <div class="form-control-position">
                </div>
              </fieldset>
            </div>
          </div>


        <div class="col-12 col-sm-4 col-lg-4">
            <div class="form-group">
              <label>Unit Sekolah</label>
              <fieldset class="form-group position-relative has-icon-left mb-0">
              <input type="text" id="name_school" name="name_school" class="form-control pickadate filter-change" placeholder="Sampai Tanggal" value="{{ $schoolText }}" readonly>
              <input type="hidden" id="school" name="school" class="form-control pickadate filter-change" placeholder="Sampai Tanggal" value="{{ $schoolValue }}" readonly>

              
              <div class="form-control-position">
                </div>
              </fieldset>
            </div>
          </div>

          <div class="col-12 col-sm-3 col-lg-3">
            <div class="form-group">
              <label>Link Group Whatsapp</label>
              <fieldset class="form-group position-relative has-icon-left mb-0">
              <a href="{{ $schoolLink }}" class="btn btn-success" target="_blank">Klik Me, Join Group! </a>
              <div class="form-control-position">
                </div>
              </fieldset>
            </div>
          </div>

</div>

  <div class="row">
    <div class="col-sm-12">
      <div class="card">
        <div class="card-content">
          <div class="card-body card-dashboard">
            <div class="d-flex align-items-center">
              <h6>Pengisian Data Pribadi</h6>
              <i class="bx bx-info-circle" style="margin-bottom: 7px; margin-left: 5px"></i>

                      <!--PROGRESS BAR-->
                      <div class="progress" id="progress-bar">
                          <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"
                              aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%">
                              <span class="progress-text">0% Complete</span>
                          </div>
                      </div>


            </div>


<br>


    <!-- START TAB AND NAV UL Question -->
    <div class="col-sm-12">
            <ul class="nav nav-tabs" role="tablist">
              <li class="nav-item" id="nav-profil-hidden">
                <a class="nav-link active" id="profile-tab" data-toggle="tab" href="#profile" aria-controls="profile" role="tab" aria-selected="false">
                  <i class="bx bx-user-voice align-middle"></i>
                  <span class="align-middle">Profil</span>
                </a>

              </li>


              <li class="nav-item" id="nav-school-hidden" style="display: none;">
                <a class="nav-link " id="edit-school-tab" data-toggle="tab" href="#edit-school" aria-controls="edit-school" role="tab" aria-selected="true">
                  <i class="bx bx-home align-middle"></i>
                  <span class="align-middle">Data Asal Sekolah</span>
                </a>
              </li>

              <!--Data Orang Tua-->
              <li class="nav-item" id="nav-ortu-hidden" style="display: none;">
                <a class="nav-link" id="ortu-tab" data-toggle="tab" href="#edit-ortu" aria-controls="edit-ortu" role="tab" aria-selected="true">
                  <i class="bx bx-user align-middle"></i>
                  <span class="align-middle">Data Orang Tua</span>
                </a>
              </li>
              <!--Akhir Data Orang Tua Data-->


              

              <li class="nav-item" id="nav-question-hidden" style="display: none;">
                <a class="nav-link " id="edit-profile-tab" data-toggle="tab" href="#edit-profile" aria-controls="edit-profile" role="tab" aria-selected="true">
                  <i class="bx bx-book align-middle"></i>
                  <span class="align-middle">Question</span>
                </a>
              </li>


              <!--Upload Data-->
              <li class="nav-item" id="nav-upload-hidden" style="display: none;">
                <a class="nav-link" id="edit-face-tab" data-toggle="tab" href="#edit-face" aria-controls="edit-face" role="tab" aria-selected="true">
                  <i class="bx bx-upload align-middle"></i>
                  <span class="align-middle">Upload Data</span>
                </a>
              </li>
              <!--Upload Data-->

              

            </ul>




                <div class="tab-content">
                    <div class="tab-pane active" id="profile" aria-labelledby="profile-tab" role="tabpanel">
                    @include('pages.question.satu')
                      
                </div>

                <div class="tab-pane " id="edit-school" aria-labelledby="edit-school-tab" role="tabpanel">
                    @include('pages.question.empat')
                      
                </div>


                <div class="tab-pane " id="edit-profile" aria-labelledby="edit-profile-tab" role="tabpanel">
                    @include('pages.question.dua')
                      
                </div>


                         
              
                <!-- STRAT ORTU -->
                <div class="tab-pane" id="edit-ortu" aria-labelledby="edit-ortu-tab" role="tabpanel">
                      @include('pages.question.tiga')

                </div>
                <!-- AKHIR ORTU -->

                <!-- STRAT UPLOAD -->
                <div class="tab-pane" id="edit-face" aria-labelledby="edit-face-tab" role="tabpanel">
                      @include('pages.question.upload')

                     

                </div>
                <!-- AKHIR UPLOAD -->

 

          </div>
        </div>
      </div>
    </div>
  </div>


<!-- AWAL MODAL SELESAI -->
<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 Penyelesaian Pengisian Data</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <!-- Tambahkan checkbox di sini -->
        <div class="form-check">
          <input class="form-check-input" type="checkbox" value="" id="confirmationCheckbox">
          <label class="form-check-label" for="confirmationCheckbox">
            Dengan ini saya menyatakan bahwa data yang saya isi adalah benar, diisi dalam keadaan sadar, tanpa kebohongan serta tanpa paksaan. Dengan harapan data ini dapat digunakan sebagaimana mestinya.
          </label>
        </div>
        <br>
        *Jika dikemudian hari saya terbukti memalsukan data, maka saya siap untuk diproses secara hukum atau aturan yang berlaku.
        <br><br>
        Data Tidak Dapat Di Ubah Kembali !
        <br>
        Apakah Anda yakin akan menyelesaikan Tahap Pengisian ini...?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-warning" data-dismiss="modal">Kembali Mengisi Data</button>
        <!-- Tambahkan atribut disabled pada tombol "Selesai" -->
        <button type="button" class="btn btn-danger" id="finish" disabled>Ya, Selesaikan !</button>
      </div>
    </div>
  </div>
</div>
<!-- AKHIR MODAL SELESAI -->

<!-- Loading Spinner   -->
<div id="loading-spinner" style="display: none;">
<img src="{{ asset('images/waiting.gif') }}" alt="Loading..." />
</div>


<form id="logout-form" action="{{ route('student-logout') }}" method="POST" style="display: none;">
  @csrf
</form>

</section>
<!-- Dashboard loan end -->
@endsection

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

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

<script src="{{asset('vendors/js/forms/validation/jqBootstrapValidation.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() {
    // Mengatur konten pertama (Question 1) sebagai konten aktif awal
    $('#question1').addClass('show active');

    // Menampilkan konten yang sesuai saat tab diubah
    $('ul.nav-tabs a').on('shown.bs.tab', function(e) {
        var target = $(e.target).attr('href');
        $(target).addClass('show active').siblings().removeClass('show active');
    });

    // Menghapus tab "Question 1" saat tab "Upload Data" dipilih
    $('#question-4').on('click', function() {
        $('#question1TabContent').remove();
    });
});
</script>



<script>
  let progressValue = 0;
  function updateProgressBar() {
    // Hitung jumlah input yang telah diisi dengan nilai yang valid
    const filledInputs = document.querySelectorAll('input[type="text"]:valid, textarea:valid').length;
    
    // Total elemen yang harus diisi (termasuk file yang diunggah)
    var jalur_masuk = $('#jalur_masuk').val();
    var school = $('#school').val();
    var totalElements;

    if (school == '4' && jalur_masuk == 'Reguler') {
      totalElements = 13;
    } else {
      totalElements = 16;
    }

    // Calculate progress value
    const progressValue = Math.min((filledInputs / totalElements) * 100, 100);

    // Select the progress bar elements
    const progressBar = document.querySelector("#progress-bar .progress-bar");
    const progressText = document.querySelector(".progress-text");

    // Set the width and aria value of the progress bar
    progressBar.style.width = progressValue + "%";
    progressBar.setAttribute("aria-valuenow", progressValue);

    // Update the progress text
    progressText.textContent = Math.round(progressValue) + "% Complete";

    // Handle the completion case
    if (progressValue === 100) {
      progressBar.classList.remove("progress-bar-striped");
      progressBar.classList.add("progress-bar-success");
      progressText.textContent = Math.round(progressValue) + "% Complete (success) - Langkah Selanjutnya Jawab Pertanyaan dan Upload Data -";
    }


    
  }


    // Menambahkan event listener ke setiap elemen input yang Anda ingin pantau
    document.getElementById("address").addEventListener("input", updateProgressBar);
    document.getElementById("anakke").addEventListener("input", updateProgressBar);
    document.getElementById("jumlah_saudara").addEventListener("input", updateProgressBar);

    if (school != '4' && jalur_masuk != 'Reguler'){
      // Menambahkan event listener ke setiap elemen select yang Anda ingin pantau
      document.getElementById("asal_sekolah").addEventListener("change", updateProgressBar);
      document.getElementById("npsn_asal").addEventListener("change", updateProgressBar);
      document.getElementById("address_school").addEventListener("change", updateProgressBar);
    }
   
    // Menambahkan event listener ke setiap elemen input yang Anda ingin pantau
    document.getElementById("name_father").addEventListener("input", updateProgressBar);
    document.getElementById("name_mother").addEventListener("input", updateProgressBar);
    document.getElementById("phone_father").addEventListener("input", updateProgressBar);
    document.getElementById("phone_mother").addEventListener("input", updateProgressBar);
    document.getElementById("education_father").addEventListener("input", updateProgressBar);
    document.getElementById("education_mother").addEventListener("input", updateProgressBar);
    document.getElementById("job_father").addEventListener("input", updateProgressBar);
    document.getElementById("job_mother").addEventListener("input", updateProgressBar);
    document.getElementById("income_father").addEventListener("input", updateProgressBar);
    document.getElementById("income_mother").addEventListener("input", updateProgressBar);

   
// Menambahkan event listener ke setiap elemen input yang Anda ingin pantau (termasuk input file)
const allInputs = document.querySelectorAll('input[type="text"], textarea, select, input[type="file"]');
  allInputs.forEach(function (input) {
      input.addEventListener("input", updateProgressBar);
      input.addEventListener("change", updateProgressBar);
  });
</script>


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

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

      // Show the confirmation modal
      var avatar = $('#avatar').val(); //Foto
      //var family_card = $('#family_card').val(); //KK
     // var born_card = $('#born_card').val(); //Kartu Lahir
      var identity_card = $('#identity_card').val(); //NISN
      //var ex_certificate = $('#ex_certificate').val(); //HALAMAN DEPAN RAPOT
      //var transcript = $('#transcript').val(); //NILAI RAPOT
      
      var jalur_masuk = $('#jalur_masuk').val();
      var school = $('#school').val();


      if (avatar == ''){
            alert('Mohon Dapat Upload Foto Anda Dengan Format (JPG / PNG / JPEG) !');
              $('#avatar').focus(); 
            return;
      }
/*
      if (family_card == ''){
            alert('Mohon Dapat Upload Kartu Keluarga Anda Dengan Format (JPG / PNG / JPEG / PDF) !');
              $('#family_card').focus(); 
            return;
      }

    //DATA UPLOAD UNTUK SD REGULER
    if (school == '4' && jalur_masuk == 'Reguler'){


      if (born_card == ''){
            alert('Mohon Dapat Upload Akte Kelahiran Anda Dengan Format (JPG / PNG / JPEG / PDF) !');
              $('#born_card').focus(); 
            return;
      }

    }
    else{

      if (identity_card == ''){
            alert('Mohon Dapat Upload Verify NISN Anda Dengan Format (JPG / PNG / JPEG / PDF) !');
              $('#identity_card').focus(); 
            return;
      }

      if (ex_certificate == ''){
            alert('Mohon Dapat Upload Halaman Depan Rapot Anda Dengan Format (JPG / PNG / JPEG / PDF) !');
              $('#ex_certificate').focus(); 
            return;
      }

      if (transcript == ''){
            alert('Mohon Dapat Upload Nilai Rapot Anda Dengan Format (JPG / PNG / JPEG / PDF) !');
              $('#transcript').focus(); 
            return;
      }
    }
    */
   
      $('#confirmationModal').modal('show');
    
    });

  });
</script>


<script>
  $(document).ready(function () {
  // Saat status centang checkbox berubah
  $('#confirmationCheckbox').on('change', function () {
    // Periksa apakah checkbox telah dicentang
    if ($(this).prop('checked')) {
      // Checkbox telah dicentang, aktifkan tombol "Selesai"
      $('#finish').prop('disabled', false);
    } else {
      // Checkbox belum dicentang, non-aktifkan tombol "Selesai"
      $('#finish').prop('disabled', true);
    }
  });

  $('#finish').on('click', function () {
    // Collect all the form data
    
    var nik = $('#nik').val();
    var school = $('#school').val();
    var addressPersonal = $('#address').val();
    var anakkePersonal = $('#anakke').val();
    var jumlahSaudaraPersonal = $('#jumlah_saudara').val();
    var asalSekolah = $('#asal_sekolah').val();
    var npsnAsal = $('#npsn_asal').val();
    var addressSchool = $('#address_school').val();
    var quest1 = $('#quest_1').val();
    var quest2 = $('#quest_2').val();
    var quest3 = $('#quest_3').val();
    var quest4 = $('#quest_4').val();
    var nameFather = $('#name_father').val();
    var nameMother = $('#name_mother').val();
    var phoneFather = $('#phone_father').val();
    var phoneMother = $('#phone_mother').val();
    var educationFather = $('#education_father').val();
    var educationMother = $('#education_mother').val();
    var jobFather = $('#job_father').val();
    var jobMother = $('#job_mother').val();
    var incomeFather = $('#income_father').val();
    var incomeMother = $('#income_mother').val();
    var id_student = $('#id_student').val();
    
    //PDF
    var avatar = $('#avatar')[0].files[0];
    //var family_card = $('#family_card')[0].files[0];
    var identity_card = $('#identity_card')[0].files[0];
    //var ex_certificate = $('#ex_certificate')[0].files[0];
    //var transcript = $('#transcript')[0].files[0];
    //var certificate = $('#certificate')[0].files[0];
    //var born_card = $('#born_card')[0].files[0];

    
    // Membuat objek FormData
    var formData = new FormData();

    // Menambahkan data formulir ke FormData
    formData.append('id_student', id_student);
    formData.append('nik', nik);
    formData.append('school', school);
    formData.append('addressPersonal', addressPersonal);
    formData.append('anakkePersonal', anakkePersonal);
    formData.append('jumlahSaudaraPersonal', jumlahSaudaraPersonal);
    formData.append('asalSekolah', asalSekolah);
    formData.append('npsnAsal', npsnAsal);
    formData.append('addressSchool', addressSchool);
    formData.append('quest1', quest1);
    formData.append('quest2', quest2);
    formData.append('quest3', quest3);
    formData.append('quest4', quest4);
    formData.append('nameFather', nameFather);
    formData.append('nameMother', nameMother);
    formData.append('phoneFather', phoneFather);
    formData.append('phoneMother', phoneMother);
    formData.append('educationFather', educationFather);
    formData.append('educationMother', educationMother);
    formData.append('jobFather', jobFather);
    formData.append('jobMother', jobMother);
    formData.append('incomeFather', incomeFather);
    formData.append('incomeMother', incomeMother);

    // Menambahkan berkas PDF ke FormData
    formData.append('avatar', avatar);
    //formData.append('family_card', family_card);
    formData.append('identity_card', identity_card);
    //formData.append('ex_certificate', ex_certificate);
    //formData.append('transcript', transcript);
    //formData.append('certificate', certificate);
    //formData.append('born_card', born_card);

    $('#loading-spinner').show();

    // Jika tidak ada input yang kosong, kirim permintaan Ajax
    $.ajax({
      type: 'POST', // Change to the appropriate HTTP method (e.g., POST or GET)
      url: '/finish/register/student', // Replace with the actual server URL
      data: formData,
      processData: false, // Important: tell jQuery not to process the data
      contentType: false, // Important: tell jQuery not to set contentType
      headers: {
        "X-CSRF-TOKEN": $("meta[name='csrf-token']").attr("content"),
      },
      success: function (response) {

        $('#confirmationModal').modal('hide');


        // Tunggu selama 3 detik dan kemudian tampilkan alert
        delay(3000)
            .then(() => {
              $('#loading-spinner').hide();

                alert('Selamat Anda Sudah Menyelesaikan Proses Pengisian Data');

                // Lakukan logout
                var logoutForm = document.getElementById('logout-form');
                if (logoutForm) {
                  logoutForm.submit();
                }
            });


      },
      error: function (error) {
        // Handle errors here (e.g., show an error message)
        alert('Format File Tidak Lebih Dari 2 MB, Format File di Perbolehkan JPEG, JPG, PNG dan PDF, atau Pastikan Internet Anda!');
      
        $('#loading-spinner').hide();
        $('#confirmationModal').modal('hide');

        
      },
    });

          // Fungsi untuk mengatur penundaan
      function delay(ms) {
          return new Promise(resolve => setTimeout(resolve, ms));
      }

    // Show the confirmation modal
    $('#confirmationModal').modal('show');
  });

});

// Fungsi untuk memeriksa apakah berkas adalah berkas PDF
function isPDF(file) {
  return file && file.type === 'application/pdf';
}
</script>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        // Menangkap elemen yang diperlukan
        var schoolSelect = document.getElementById("school");
        var dataQ2Span = document.getElementById("data_q2");
        var dataNISNSpan = document.getElementById("upload_sdnisn");
        //var dataHalSpan = document.getElementById("upload_sdhalaman");
        //var dataRapotSpan = document.getElementById("upload_sdrapot");
        //var dataSertifikatSpan = document.getElementById("upload_sdsertifikat");
        //var dataAkteSpan = document.getElementById("akte_upload");
        //var dataUp = document.getElementById("upakte");
        var jalurMasuk = document.getElementById("jalur_masuk");
        
        // Menyembunyikan Upload Data Jika School 4 (SD) REGULER, PINDAHAN DAN SMP+SMA
        if (schoolSelect.value === "4" && jalurMasuk.value === "Reguler") {
          dataQ2Span.style.display = "none";
          dataNISNSpan.style.display = "none";
          dataHalSpan.style.display = "none";
          dataRapotSpan.style.display = "none";
          dataSertifikatSpan.style.display = "none";
        }
        else if (schoolSelect.value === "4" && jalurMasuk.value === "Pindahan") {
          dataQ2Span.style.display = "none";
          dataHalSpan.style.display = "none";
          dataRapotSpan.style.display = "none";
          dataSertifikatSpan.style.display = "none";

        }
        else if (schoolSelect.value === "3" && jalurMasuk.value === "Alumni") {
          dataNISNSpan.style.display = "none";
          dataHalSpan.style.display = "none";
          dataRapotSpan.style.display = "none";
          dataSertifikatSpan.style.display = "none";

        }
        else{
          dataAkteSpan.style.display = "none";
          dataUp.style.display = "none";
        }

       
    });
</script>

<!-- SCRIPT UNTUK LANJUTKAN PER NAV HEAD SATU BLADE DATA PRIBADI-->
<script>
$(document).ready(function () {

  $('#lanjutkansatu').on('click', function () {
      var address = $('#address').val();
      var anakke = $('#anakke').val();
      var jumlah_saudara = $('#jumlah_saudara').val();
      var jalur_masuk = $('#jalur_masuk').val();
      var school = $('#school').val();

        if (address == ''){
            alert('Mohon isi Terlebih Dahulu Alamat Peserta !');
              $('#address').focus(); 
            return;
        }
        if (anakke == ''){
            alert('Mohon isi Bahwa Anak Ke Berapa Peserta Didik !');
              $('#anakke').focus(); 
            return;
        }
        if (jumlah_saudara == ''){
            alert('Mohon isi Jumlah Saudara Peserta !');
              $('#jumlah_saudara').focus(); 
            return;
        }

    //Munculkan Data Asal Sekolah
    $('#nav-profil-hidden').hide();
    $('#profile').hide();



    if(school == '4' && jalur_masuk == 'Reguler'){      
      $('#nav-ortu-hidden').show();
      $('#edit-ortu').show();
    }
    else{
      $('#nav-school-hidden').show();
      $('#edit-school').show();
    }

    

  });
});
</script>




<!-- SCRIPT UNTUK LANJUTKAN PER NAV HEAD EMPAT BLADE DATA SEKOLAH -->
<script>
$(document).ready(function () {
  //KLIK KEMBALI
  $('#kembaliempat').on('click', function () {
      //Munculkan Data Asal Sekolah
      $('#nav-school-hidden').hide();
      $('#nav-profil-hidden').show();
      $('#profile').show();
      $('#edit-school').hide();
  });

    //KLIK LANJUTKAN
  $('#lanjutkanempat').on('click', function () {
      var asal_sekolah = $('#asal_sekolah').val();
      var npsn_asal = $('#npsn_asal').val();
      var address_school = $('#address_school').val();
      var jalur_masuk = $('#jalur_masuk').val();

        if (asal_sekolah == ''){
            alert('Mohon isi Nama Asal Instansi Sekolah Peserta !');
              $('#asal_sekolah').focus(); 
            return;
        }
        if (npsn_asal == ''){
            alert('Mohon isi NPSN Asal Sekolah Peserta (NPSN Sekolah)!');
              $('#npsn_asal').focus(); 
            return;
        }
        if (address_school == ''){
            alert('Mohon isi Alamat Lengkap Asal Instansi Sekolah Peserta !');
              $('#address_school').focus(); 
            return;
        }

    //Data Before
    $('#nav-ortu-hidden').show();
    $('#edit-ortu').show();

      //Data Now
    $('#nav-school-hidden').hide();
    $('#edit-school').hide();

    

  });
});
</script>


<!-- SCRIPT UNTUK LANJUTKAN PER NAV HEAD TIGA BLADE DATA ORANG TUA -->
<script>
$(document).ready(function () {
  //KLIK KEMBALI
  $('#kembalitiga').on('click', function () {
      
    var school = $('#school').val();
    var jalur_masuk = $('#jalur_masuk').val();

    if(school == '4' && jalur_masuk == 'Reguler'){      
      
      //Data Now
      $('#nav-ortu-hidden').hide();
      $('#edit-ortu').hide();

      //Data Before
      $('#nav-profil-hidden').show();
      $('#profile').show();

    }
    else{

      //Data Now
      $('#nav-ortu-hidden').hide();
      $('#edit-ortu').hide();

      $('#nav-school-hidden').show();
      $('#edit-school').show();

    }


  });

    //KLIK LANJUTKAN
  $('#lanjutkantiga').on('click', function () {
      var name_father = $('#name_father').val();
      var name_mother = $('#name_mother').val();
      var phone_father = $('#phone_father').val();
      var phone_mother = $('#phone_mother').val();
      var education_father = $('#education_father').val();
      var education_mother = $('#education_mother').val();
      var job_father = $('#job_father').val();
      var job_mother = $('#job_mother').val();
      var income_father = $('#income_father').val();
      var income_mother = $('#income_mother').val();

        if (name_father == ''){
            alert('Nama Ayah Kandung Peserta !');
              $('#name_father').focus(); 
            return;
        }
        if (name_mother == ''){
            alert('Nama Ibu Kandung Peserta!');
              $('#name_mother').focus(); 
            return;
        }
        if (phone_father == ''){
            alert('Nomor HP Ayah Peserta !');
              $('#phone_father').focus(); 
            return;
        }


        if (phone_mother == ''){
            alert('Nomor HP Ibu Peserta !');
              $('#phone_mother').focus(); 
            return;
        }
        if (education_father == ''){
            alert('Pendidikan Ayah Peserta !');
              $('#education_father').focus(); 
            return;
        }
        if (education_mother == ''){
            alert('Pendidikan Ibu Peserta !');
              $('#education_mother').focus(); 
            return;
        }
        if (job_father == ''){
            alert('Pekerjaan Ayah Peserta !');
              $('#job_father').focus(); 
            return;
        }
        if (job_mother == ''){
            alert('Pekerjaan Ibu Peserta !');
              $('#job_mother').focus(); 
            return;
        }
        if (income_father == ''){
            alert('Penghasilan Per Bulan Ayah Kandung Peserta !');
              $('#income_father').focus(); 
            return;
        }
        if (income_mother == ''){
            alert('Penghasilan Per Bulan Ibu Kandung Peserta !');
              $('#income_mother').focus(); 
            return;
        }

    //Data Pribadi
    $('#nav-ortu-hidden').hide();
    $('#edit-ortu').hide();
    
      //Data Sekolah
    $('#nav-question-hidden').show();
    $('#edit-profile').show();

    

  });
});
</script>




<!-- SCRIPT UNTUK LANJUTKAN PER NAV HEAD DUA BLADE QUESTION! -->
<script>
$(document).ready(function () {
  //KLIK KEMBALI
  $('#kembalidua').on('click', function () {
      
      $('#nav-ortu-hidden').show();
      $('#edit-ortu').show();
      
        //Data Sekolah
      $('#nav-question-hidden').hide();
      $('#edit-profile').hide();


  });

    //KLIK LANJUTKAN
  $('#lanjutkandua').on('click', function () {
      var quest_1 = $('#quest_1').val();
      var quest_2 = $('#quest_2').val();
      var quest_3 = $('#quest_3').val();
      var quest_4 = $('#quest_4').val();
      var jalur_masuk = $('#jalur_masuk').val();
      var school = $('#school').val();



        if (quest_1 == ''){
            alert('Mohon Dapat Mengisi Pertanyaan Mengenai Technology !');
              $('#quest_1').focus(); 
            return;
        }


        if (school === '4' && (jalur_masuk === 'Reguler' || jalur_masuk === 'Pindahan')) {
        

        } else {
          if (quest_2 == ''){
              alert('Mohon Dapat Mengisi Pertanyaan Mengani Interaksi !');
                $('#quest_2').focus(); 
              return;
            }
        }

        if (quest_3 == ''){
            alert('Mohon Dapat Mengisi Pertanyaan Target Capaian !');
              $('#quest_3').focus(); 
            return;
        }

        if (quest_4 == ''){
            alert('Mohon Dapat Mengisi Pertanyaan Mampu Menaati Aturan !');
              $('#quest_4').focus(); 
            return;
        }
       

    //Data Pribadi
    $('#nav-upload-hidden').show();
    $('#edit-face').show();
    
      //Data Sekolah
    $('#nav-question-hidden').hide();
    $('#edit-profile').hide();

    

  });
});
</script>




<!-- SCRIPT UNTUK LANJUTKAN PER NAV HEAD DUA BLADE QUESTION! -->
<script>
$(document).ready(function () {
  //KLIK KEMBALI
  $('#kembaliupload').on('click', function () {
        
    //Data now
    $('#nav-upload-hidden').hide();
    $('#edit-face').hide();
    
      //Data before
    $('#nav-question-hidden').show();
    $('#edit-profile').show();

  });


});
</script>
@endsection