@extends('layouts.app')

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

{{-- 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

@section('page-styles')
<link rel="stylesheet" type="text/css" href="{{asset('css/pages/dashboard-analytics.css')}}">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

@endsection
  
@section('content')

<!-- Dashboard Starts -->
<section class="invoice-list-wrapper">

  <div class="row">

  
    <div class="col-12 col-sm-4 col-lg-4">
      <div class="form-group">
        <label>Instansi</label>
        <fieldset class="form-group position-relative has-icon-left mb-0">
          <select id="data_school" name="project_type" class="select2 form-control filter-change">
            <option>Pilih Sekolah</option>
            <option value="1">SMP Quran Darul Fattah Bandar Lampung</option>
            <option value="2">SMP Quran Darul Fattah Lampung Selatan</option>
            <option value="3">SMA Quran Darul Fattah Bandar Lampung</option>
            <option value="4">SD Quran Darul Fattah Bandar Lampung</option>
          </select>
          <div class="form-control-position">
            <i class="bx bx-edit-alt"></i>
          </div>
        </fieldset>
      </div>
    </div>



    <div class="col-12 col-sm-3 col-lg-3">
        <div class="form-group">
          <label>Tingkatan Jenjang</label>
          <fieldset class="form-group position-relative has-icon-left mb-0">
            <select id="jenjang" name="jenjang" class="select2 form-control jenjang-change">
              <option value="">Pilih Tingkatan Jenjang</option> 

            </select>
          </fieldset>
        </div>
    </div>


    <div class="col-sm-3">
      <div class="form-group">
        <label>Pilih Kelas</label>
            <div class="controls form-label-group position-relative has-icon-left">
              <select id="room" name="room" autocomplete="off" class="select2 form-control @error('room') is-invalid @enderror" required data-validation-required-message="This Sekolah field is required">
                <option value="">Pilih Kelas </option>
              </select>
            </div>
        </div>
    </div>

    <div class="col-sm-2">
      <br>
        <button type="button" id="carikelas" style="display: none;" class="btn btn-primary glow w-100 position-relative">Tampilkan
          <i id="icon-arrow" class="bx bx-right-arrow-alt"></i>
        </button>
    </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>Data Penilaian Sekolah Quran Darul Fattah</h6>
                <i class="bx bx-info-circle" style="margin-bottom: 7px; margin-left: 5px"></i>
              </div>
                <div id="summary-line-chart"></div>
                <div id="no-data-message" style="display: none;">Tidak ada data untuk ditampilkan.</div>

                </div>
                </div>

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

<hr>








<!-- Akhir Bawah -->
      </div>
    </div>
  </div>
</div>
  
</section>
<!-- Dashboard loan end -->


@endsection


{{-- vendor scripts --}}
@section('vendor-scripts')
<script src="{{asset('vendors/js/charts/apexcharts.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>
@endsection

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

<!-- Your script to handle the AJAX request and populate the room dropdown -->
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>


<script src="https://cdn.jsdelivr.net/npm/apexcharts@3.28.3/dist/apexcharts.min.js"></script>
<!-- Add this script tag before your custom scripts -->

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<!-- Your other styles and scripts -->



<script>
  $(document).ready(function() {
    // Get references to the select elements
    const dataSchoolSelect = $('#data_school');
    const jenjangSelect = $('#jenjang');

    // Add event listener to the data_school select element
    dataSchoolSelect.on('change', function() {
      const selectedValue = $(this).val();

      // Clear the existing options in jenjang select element
      jenjangSelect.empty();

      // Add the default option to the jenjang select element
      jenjangSelect.append('<option value="">Pilih Tingkatan Jenjang</option>');

      // Populate jenjang select element with AJAX based on the selected school
      switch (selectedValue) {
        case '1':
        case '2':
          loadJenjangOptions([7, 8, 9]);
          break;
        case '3':
          loadJenjangOptions([10, 11, 12]);
          break;
        case '4':
          loadJenjangOptions([1, 2, 3, 4, 5, 6]);
          break;
        default:
          // Hide the jenjang select element if no school is selected
          jenjangSelect.hide();
          return;
      }

      // Show the jenjang select element after updating the options
      jenjangSelect.show();
    });

    // Helper function to load 'jenjang' options
    function loadJenjangOptions(jenjangOptions) {
      $.each(jenjangOptions, function(index, value) {
        jenjangSelect.append('<option value="' + value + '">Jenjang ' + value + '</option>');
      });
    }
  });
</script>





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

  //Start Room
  $('#jenjang').on('change', function () {
    var data_school = $('#data_school').val();
    var jenjang = $(this).val();
    var carikelas = $('#carikelas').val();

    if (jenjang) {
      $.ajax({
        url: '/kesiswaan/qurans/data_rooms/' + data_school + '/' + jenjang,
        type: 'GET',
        dataType: 'json',
        success: function (data) {
          $('#room').empty();
          $('#room').append('<option value="">Pilih Kelas</option>');
          data.forEach(function (item) {
            // Assuming `item` is an object with properties you want to display as a string
            $('#room').append('<option value="' + item + '">' + item + '</option>');
          });
        },
        error: function (xhr, status, error) {
          console.error(xhr.responseText);
        }
      });
    } else {
      $('#room').empty();
    }
  });
  // Akhir Room
});
</script>





<script>
  // Get references to the select elements
  const dataSchoolSelect = document.getElementById('data_school');
  const jenjangSelect = document.getElementById('jenjang');

  // Add event listener to the data_school select element
  dataSchoolSelect.addEventListener('change', function() {
    const selectedValue = this.value;

    // Clear the existing options in jenjang select element
    jenjangSelect.innerHTML = '<option value="">Pilih Tingkatan Jenjang</option>';

    // Populate jenjang select element based on the selected school
    switch (selectedValue) {
      case '1':
      case '2':
        addJenjangOption(7);
        addJenjangOption(8);
        addJenjangOption(9);
        break;
      case '3':
        addJenjangOption(10);
        addJenjangOption(11);
        addJenjangOption(12);
        break;
      case '4':
        for (let i = 1; i <= 6; i++) {
          addJenjangOption(i);
        }
        break;
    }
  });

  // Helper function to add options to the jenjang select element
  function addJenjangOption(jenjangValue) {
    const option = document.createElement('option');
    option.value = jenjangValue;
    option.textContent = 'Jenjang ' + jenjangValue;
    jenjangSelect.appendChild(option);
  }
</script>







@endsection