@extends('admin.layouts.app')
@section('content')
  <!-- [ breadcrumb ] start -->
  <div class="page-header">
    <div class="page-block">
      <div class="row align-items-center">
        <div class="col-md-12">
          <div class="page-header-title">
            <h5 class="m-b-10">Home</h5>
          </div>
          <ul class="breadcrumb">
            <li class="breadcrumb-item"><a href="../dashboard/index.html">Home</a></li>
            <li class="breadcrumb-item"><a href="javascript: void(0)">Dashboard</a></li>
            <li class="breadcrumb-item" aria-current="page">Home</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!-- [ breadcrumb ] end -->
  <!-- [ Main Content ] start -->
  <div class="row">
    <!-- [ sample-page ] start -->
    <div class="col-md-6 col-xl-3">
      <div class="card">
        <div class="card-body">
          <h6 class="mb-2 f-w-400 text-muted">Total Booking hari ini</h6>
          <h4 class="mb-3">
            <span id="total_booking"></span>
            <span class="badge bg-light-primary border border-primary">
              <i class="ti" id="trending-icon-booking"></i>
              <span id="booking_percent">%</span>
            </span>
          </h4>
          <p class="mb-0 text-muted text-sm">Booking <span id="booking_trend">bertambah</span> <span class="text-primary" id="from_month_booking_count"></span> dari bulan lalu
          </p>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-xl-3">
      <div class="card">
        <div class="card-body">
          <h6 class="mb-2 f-w-400 text-muted">Total tes selesai hari ini</h6>
          <h4 class="mb-3">
            <span id="total_tes"></span>
            <span class="badge bg-light-primary border border-primary">
              <i class="ti" id="trending-icon-tes"></i>
              <span id="tes_percent">%</span>
            </span>
          </h4>
          <p class="mb-0 text-muted text-sm">Tes <span id="tes_trend">bertambah</span> <span class="text-primary" id="from_month_tes_count"></span> dari bulan lalu
          </p>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-xl-3">
      <div class="card">
        <div class="card-body">
          <h6 class="mb-2 f-w-400 text-muted">Total tes masih berlangsung hari ini</h6>
          <h4 class="mb-3">
            <span id="total_tes_berlangsung"></span>
            <span class="badge bg-light-primary border border-primary">
              <i class="ti" id="trending-icon-tes-berlangsung"></i>
              <span id="tes_berlangsung_percent">%</span>
            </span>
          </h4>
          <p class="mb-0 text-muted text-sm">Tes yang sedang berlangsung <span id="tes_berlangsung_trend">bertambah</span> <span class="text-primary" id="from_month_tes_berlangsung_count"></span> dari bulan lalu
          </p>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-xl-3">
      <div class="card">
        <div class="card-body">
          <h6 class="mb-2 f-w-400 text-muted">Rata rata skor kecemasan hari ini</h6>
          <h4 class="mb-3">
            <span id="rata_rata_kecemasan"></span>
            <span class="badge bg-light-primary border border-primary">
              <i class="ti" id="trending-icon-rata-rata"></i>
              <span id="rata_rata_kecemasan_percent">%</span>
            </span>
          </h4>
          <p class="mb-0 text-muted text-sm">Rata rata skor kecemasan <span id="rata_rata_kecemasan_trend">bertambah</span> <span class="text-primary" id="from_month_rata_rata_kecemasan_count"></span> dari bulan lalu
          </p>
        </div>
      </div>
    </div>

    <div class="col-md-12 col-xl-8">
      <h5 class="mb-3">Tabel Monitoring Tes</h5>
      <table id="table-data-booking" class="table table-bordered">
        <thead>
          <tr>
            <th>No</th>
            <th>Nama</th>
            <th>Email</th>
            <th>Telepon</th>
            <th>Tanggal Booking</th>
            <th>Status Tes</th>
            <th>Status Sesi</th>
          </tr>
        </thead>
      </table>
    </div>
  </div>
@endsection

@section('script')
<script>
  let table = null;
  $(document).ready(function() {
    $.get('{{ route("dashboard.fetchData") }}', function(data) {
      $('#total_booking').text(data.total_booking);
      $('#booking_percent').text(data.booking_percent + '%');
      $('#from_month_booking_count').text(data.from_month_booking_count);
      $('#booking_trend').text(data.booking_trend);
      if (data.booking_diff >= 0) {
        $('#trending-icon-booking').addClass('ti-trending-up');
        $('#booking_percent').addClass('text-primary');
      } else {
        $('#trending-icon-booking').addClass('ti-trending-down');
        $('#booking_percent').addClass('text-danger');
      }

      $('#total_tes').text(data.total_tes);
      $('#tes_percent').text(data.tes_percent + '%');
      $('#from_month_tes_count').text(data.from_month_tes_count);
      $('#tes_trend').text(data.tes_trend);
      if (data.tes_diff >= 0) {
        $('#trending-icon-tes').addClass('ti-trending-up');
        $('#tes_percent').addClass('text-primary');
      } else {
        $('#trending-icon-tes').addClass('ti-trending-down');
        $('#tes_percent').addClass('text-danger');
      }

      $('#total_tes_berlangsung').text(data.total_tes_berlangsung);
      $('#tes_berlangsung_percent').text(data.tes_berlangsung_percent + '%');
      $('#from_month_tes_berlangsung_count').text(data.from_month_tes_berlangsung_count);
      $('#tes_berlangsung_trend').text(data.tes_berlangsung_trend);
      if (data.tes_berlangsung_diff >= 0) {
        $('#trending-icon-tes-berlangsung').addClass('ti-trending-up');
        $('#tes_berlangsung_percent').addClass('text-primary');
      } else {
        $('#trending-icon-tes-berlangsung').addClass('ti-trending-down');
        $('#tes_berlangsung_percent').addClass('text-danger');
      }

      $('#rata_rata_kecemasan').text(data.rata_rata_kecemasan);
      $('#rata_rata_kecemasan_percent').text(data.rata_rata_kecemasan_percent + '%');
      $('#from_month_rata_rata_kecemasan_count').text(data.from_month_rata_rata_kecemasan);
      $('#rata_rata_kecemasan_trend').text(data.rata_rata_kecemasan_trend);
      if (data.rata_rata_kecemasan_diff >= 0) {
        $('#trending-icon-rata-rata').addClass('ti-trending-up');
        $('#rata_rata_kecemasan_percent').addClass('text-primary');
      } else {
        $('#trending-icon-rata-rata').addClass('ti-trending-down');
        $('#rata_rata_kecemasan_percent').addClass('text-danger');
      }

      table = new DataTable('#table-data-booking', {
        searching: false,
        paging: false,
        ajax: {
          url: '{{ route("dashboard.fetchDataTable") }}',
        },
        columns: [
          {
            data: null,
            render: function(data, type, row, meta) {
              return meta.row + 1;
            }
          },
          { data: 'nama_lengkap' },
          { data: 'email', name: 'email' },
          { data: 'no_telp' },
          { data: 'tanggal_booking' },
          { data: 'status_tes' },
          { data: 'status_session' },
        ]
      });
    });
  });
</script>
@endsection