@extends('layouts.app')

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

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

  
  <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>Grafik Pencapaian Hafalan Quran Per Unit</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>
let chart;

$(document).ready(function () {
  function fetchData(data_school, jenjang, room) {
    if (data_school) {
      var url = '/kesiswaan/qurans/get-quran-achievements/' + data_school;

      if (jenjang) {

        url = '/kesiswaan/qurans/get-quran-acv-jenjangs/' + data_school + '/' + jenjang;

      }

      if (room) {

        url = '/kesiswaan/qurans/get-quran-acv-rooms/' + data_school + '/' + jenjang + '/' + room;

      }

      $.ajax({
        url: url,
        type: 'GET',
        dataType: 'json',
        success: function (data) {
          if (data.data.length > 0) {
            // Data found, draw or update the chart
            if (chart) {
              // If chart exists, update the chart with new data
              chart.destroy();
            }
            drawChart(data.data);
            $('#no-data-message').hide();
            $('#summary-line-chart').show();
          } else {
            // Data not found, show no data message
            $('#summary-line-chart').empty().hide();
            $('#no-data-message').text('Data Capaian Quran Tidak Ada!.').show();
          }
        },
        error: function (xhr, status, error) {
          // Handle errors gracefully and show error message
          $('#summary-line-chart').empty().hide();
          if (xhr.status === 404) {
            $('#no-data-message').text('Data not found').show();
          } else {
            $('#no-data-message').text('Error: Failed to fetch data.').show();
          }
          console.error(xhr.responseText);
        }
      });
    } else {
      // If no school is selected, hide the chart and no data message
      $('#summary-line-chart').empty().hide();
      $('#no-data-message').empty().hide();
    }
  }

  $('#data_school, #jenjang, #room').on('change', function () {
    var data_school = $('#data_school').val();
    var jenjang = $('#jenjang').val();
    var room = $('#room').val();

    fetchData(data_school, jenjang, room);
  });
});



//Chart
function drawChart(data) {
  // Hitung jumlah kemunculan setiap id_juz
  const juzCount = {};
  data.forEach(item => {
    const id_juz = item.id_juz.toString();
    juzCount[id_juz] = (juzCount[id_juz] || 0) + 1;
  });

  // Urutkan id_juz berdasarkan urutan yang diinginkan (misalnya dari besar ke kecil)
  const sortedJuz = [
    '30', '29', '28', '27', '26', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10',
    '11', '12', '13', '14', '15', '16', '17', '18', '19', '20',
    '21', '22', '23', '24', '25',
  ];

  // Persiapkan data untuk grafik batang
  const chartData = {
    chart: {
      type: 'bar', // Jenis grafik batang
      height: 350, // Tinggi grafik
    },
    plotOptions: {
      bar: {
        horizontal: false, // Orientasi grafik batang, bisa diubah menjadi 'true' untuk horizontal
      },
    },
    series: [
      {
        name: 'Jumlah Tampilan Juz',
        data: sortedJuz.map(juz => juzCount[juz] || 0), // Jumlah tampilan setiap juz sebagai nilai grafik
      },
    ],
    xaxis: {
      categories: sortedJuz, // id_juz sebagai kategori untuk grafik batang
    },
    fill: {
      opacity: 1,
    },
    legend: {
      show: false, // Menyembunyikan legenda
    },
  };

  // Draw the chart using ApexCharts
  chart = new ApexCharts(document.querySelector("#summary-line-chart"), chartData);
  chart.render();

  // Show the chart and hide the "Data not found" message
  document.querySelector("#summary-line-chart").style.display = 'block';
  document.querySelector("#no-data-message").style.display = 'none';
}

</script>





<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();

    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