@extends('layouts/contentNavbarLayout')

@section('title', 'Dashboard - Analytics')

@section('vendor-style')
<link rel="stylesheet" href="{{asset('assets/vendor/libs/apex-charts/apex-charts.css')}}">
@endsection

@section('vendor-script')
<script src="{{asset('assets/vendor/libs/apex-charts/apexcharts.js')}}"></script>
@endsection

@section('page-script')
<script>
  "use strict";

  (function () {
    let cardColor, headingColor, axisColor, shadeColor, borderColor, siswa, tutor, user, users, classification;

    siswa = <?php echo $siswa; ?>;
    tutor = <?php echo $tutor; ?>;
    classification = <?php echo $classification; ?>;
    user = <?php echo $user; ?>;
    users = <?php  echo $users; ?>;
    cardColor = config.colors.white;
    headingColor = config.colors.headingColor;
    axisColor = config.colors.axisColor;
    borderColor = config.colors.borderColor;

    // Total Revenue Report Chart - Bar Chart
    // --------------------------------------------------------------------
    const totalRevenueChartEl = document.querySelector("#totalRevenueChart"),
      totalRevenueChartOptions = {
        series: [
          {
            name: "2021",
            data: [18, 7, 15, 29, 18, 12, 9],
          },
          {
            name: "2020",
            data: [-13, -18, -9, -14, -5, -17, -15],
          },
        ],
        chart: {
          height: 300,
          stacked: true,
          type: "bar",
          toolbar: { show: false },
        },
        plotOptions: {
          bar: {
            horizontal: false,
            columnWidth: "33%",
            borderRadius: 12,
            startingShape: "rounded",
            endingShape: "rounded",
          },
        },
        colors: [config.colors.primary, config.colors.info],
        dataLabels: {
          enabled: false,
        },
        stroke: {
          curve: "smooth",
          width: 6,
          lineCap: "round",
          colors: [cardColor],
        },
        legend: {
          show: true,
          horizontalAlign: "left",
          position: "top",
          markers: {
            height: 8,
            width: 8,
            radius: 12,
            offsetX: -3,
          },
          labels: {
            colors: axisColor,
          },
          itemMargin: {
            horizontal: 10,
          },
        },
        grid: {
          borderColor: borderColor,
          padding: {
            top: 0,
            bottom: -8,
            left: 20,
            right: 20,
          },
        },
        xaxis: {
          categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
          labels: {
            style: {
              fontSize: "13px",
              colors: axisColor,
            },
          },
          axisTicks: {
            show: false,
          },
          axisBorder: {
            show: false,
          },
        },
        yaxis: {
          labels: {
            style: {
              fontSize: "13px",
              colors: axisColor,
            },
          },
        },
        responsive: [
          {
            breakpoint: 1700,
            options: {
              plotOptions: {
                bar: {
                  borderRadius: 10,
                  columnWidth: "32%",
                },
              },
            },
          },
          {
            breakpoint: 1580,
            options: {
              plotOptions: {
                bar: {
                  borderRadius: 10,
                  columnWidth: "35%",
                },
              },
            },
          },
          {
            breakpoint: 1440,
            options: {
              plotOptions: {
                bar: {
                  borderRadius: 10,
                  columnWidth: "42%",
                },
              },
            },
          },
          {
            breakpoint: 1300,
            options: {
              plotOptions: {
                bar: {
                  borderRadius: 10,
                  columnWidth: "48%",
                },
              },
            },
          },
          {
            breakpoint: 1200,
            options: {
              plotOptions: {
                bar: {
                  borderRadius: 10,
                  columnWidth: "40%",
                },
              },
            },
          },
          {
            breakpoint: 1040,
            options: {
              plotOptions: {
                bar: {
                  borderRadius: 11,
                  columnWidth: "48%",
                },
              },
            },
          },
          {
            breakpoint: 991,
            options: {
              plotOptions: {
                bar: {
                  borderRadius: 10,
                  columnWidth: "30%",
                },
              },
            },
          },
          {
            breakpoint: 840,
            options: {
              plotOptions: {
                bar: {
                  borderRadius: 10,
                  columnWidth: "35%",
                },
              },
            },
          },
          {
            breakpoint: 768,
            options: {
              plotOptions: {
                bar: {
                  borderRadius: 10,
                  columnWidth: "28%",
                },
              },
            },
          },
          {
            breakpoint: 640,
            options: {
              plotOptions: {
                bar: {
                  borderRadius: 10,
                  columnWidth: "32%",
                },
              },
            },
          },
          {
            breakpoint: 576,
            options: {
              plotOptions: {
                bar: {
                  borderRadius: 10,
                  columnWidth: "37%",
                },
              },
            },
          },
          {
            breakpoint: 480,
            options: {
              plotOptions: {
                bar: {
                  borderRadius: 10,
                  columnWidth: "45%",
                },
              },
            },
          },
          {
            breakpoint: 420,
            options: {
              plotOptions: {
                bar: {
                  borderRadius: 10,
                  columnWidth: "52%",
                },
              },
            },
          },
          {
            breakpoint: 380,
            options: {
              plotOptions: {
                bar: {
                  borderRadius: 10,
                  columnWidth: "60%",
                },
              },
            },
          },
        ],
        states: {
          hover: {
            filter: {
              type: "none",
            },
          },
          active: {
            filter: {
              type: "none",
            },
          },
        },
      };
    if (
      typeof totalRevenueChartEl !== undefined &&
      totalRevenueChartEl !== null
    ) {
      const totalRevenueChart = new ApexCharts(
        totalRevenueChartEl,
        totalRevenueChartOptions
      );
      totalRevenueChart.render();
    }

    // Growth Chart - Radial Bar Chart
    // --------------------------------------------------------------------
    const growthChartEl = document.querySelector("#growthChart"),
      growthChartOptions = {
        series: [78],
        labels: ["Growth"],
        chart: {
          height: 240,
          type: "radialBar",
        },
        plotOptions: {
          radialBar: {
            size: 150,
            offsetY: 10,
            startAngle: -150,
            endAngle: 150,
            hollow: {
              size: "55%",
            },
            track: {
              background: cardColor,
              strokeWidth: "100%",
            },
            dataLabels: {
              name: {
                offsetY: 15,
                color: headingColor,
                fontSize: "15px",
                fontWeight: "600",
                fontFamily: "Public Sans",
              },
              value: {
                offsetY: -25,
                color: headingColor,
                fontSize: "22px",
                fontWeight: "500",
                fontFamily: "Public Sans",
              },
            },
          },
        },
        colors: [config.colors.primary],
        fill: {
          type: "gradient",
          gradient: {
            shade: "dark",
            shadeIntensity: 0.5,
            gradientToColors: [config.colors.primary],
            inverseColors: true,
            opacityFrom: 1,
            opacityTo: 0.6,
            stops: [30, 70, 100],
          },
        },
        stroke: {
          dashArray: 5,
        },
        grid: {
          padding: {
            top: -35,
            bottom: -10,
          },
        },
        states: {
          hover: {
            filter: {
              type: "none",
            },
          },
          active: {
            filter: {
              type: "none",
            },
          },
        },
      };
    if (typeof growthChartEl !== undefined && growthChartEl !== null) {
      const growthChart = new ApexCharts(growthChartEl, growthChartOptions);
      growthChart.render();
    }

    // Profit Report Line Chart
    // --------------------------------------------------------------------
    const profileReportChartEl = document.querySelector("#profileReportChart"),
      profileReportChartConfig = {
        chart: {
          height: 80,
          // width: 175,
          type: "line",
          toolbar: {
            show: false,
          },
          dropShadow: {
            enabled: true,
            top: 10,
            left: 5,
            blur: 3,
            color: config.colors.warning,
            opacity: 0.15,
          },
          sparkline: {
            enabled: true,
          },
        },
        grid: {
          show: false,
          padding: {
            right: 8,
          },
        },
        colors: [config.colors.warning],
        dataLabels: {
          enabled: false,
        },
        stroke: {
          width: 5,
          curve: "smooth",
        },
        series: [
          {
            data: [110, 270, 145, 245, 205, 285],
          },
        ],
        xaxis: {
          show: false,
          lines: {
            show: false,
          },
          labels: {
            show: false,
          },
          axisBorder: {
            show: false,
          },
        },
        yaxis: {
          show: false,
        },
      };
    if (
      typeof profileReportChartEl !== undefined &&
      profileReportChartEl !== null
    ) {
      const profileReportChart = new ApexCharts(
        profileReportChartEl,
        profileReportChartConfig
      );
      profileReportChart.render();
    }

    // Order Statistics Chart
    // --------------------------------------------------------------------
    const chartOrderStatistics = document.querySelector("#orderStatisticsChart"),
      orderChartConfig = {
        chart: {
          height: 165,
          width: 130,
          type: "donut",
        },
        labels: ["Siswa", "Siswa Tidak Aktif", "Tutor"],
        series: [users.filter((item) => item.active).length, users.filter((item) => item.active == 0).length, tutor.length],
        colors: [
          config.colors.success,
          config.colors.danger,
          config.colors.primary
        ],
        stroke: {
          width: 5,
          colors: cardColor,
        },
        dataLabels: {
          enabled: false,
          formatter: function (val, opt) {
            return parseInt(val) + "%";
          },
        },
        legend: {
          show: false,
        },
        grid: {
          padding: {
            top: 0,
            bottom: 0,
            right: 15,
          },
        },
        plotOptions: {
          pie: {
            donut: {
              size: "75%",
              labels: {
                show: true,
                value: {
                  fontSize: "1.5rem",
                  fontFamily: "Public Sans",
                  color: headingColor,
                  offsetY: -15,
                  formatter: function (val) {
                    return parseInt(val / (siswa.length + tutor.length) * 100) + "%";
                  },
                },
                name: {
                  offsetY: 20,
                  fontFamily: "Public Sans",
                },
                total: {
                  show: true,
                  fontSize: "0.8125rem",
                  color: axisColor,
                  label: "Pengguna",
                  formatter: function (w) {
                    let total = 0;
                    for (let i of w.config.series) {
                      total += i;
                    }

                    return total;
                  },
                },
              },
            },
          },
        },
      };
    if (
      typeof chartOrderStatistics !== undefined &&
      chartOrderStatistics !== null
    ) {
      const statisticsChart = new ApexCharts(
        chartOrderStatistics,
        orderChartConfig
      );
      statisticsChart.render();
    }

    // Income Chart - Area chart
    // --------------------------------------------------------------------
    const incomeChartEl = document.querySelector("#incomeChart"),
      incomeChartConfig = {
        series: [
          {
            data: [24, 21, 30, 22, 42, 26, 35, 29],
          },
        ],
        chart: {
          height: 215,
          parentHeightOffset: 0,
          parentWidthOffset: 0,
          toolbar: {
            show: false,
          },
          type: "area",
        },
        dataLabels: {
          enabled: false,
        },
        stroke: {
          width: 2,
          curve: "smooth",
        },
        legend: {
          show: false,
        },
        markers: {
          size: 6,
          colors: "transparent",
          strokeColors: "transparent",
          strokeWidth: 4,
          discrete: [
            {
              fillColor: config.colors.white,
              seriesIndex: 0,
              dataPointIndex: 7,
              strokeColor: config.colors.primary,
              strokeWidth: 2,
              size: 6,
              radius: 8,
            },
          ],
          hover: {
            size: 7,
          },
        },
        colors: [config.colors.primary],
        fill: {
          type: "gradient",
          gradient: {
            shade: shadeColor,
            shadeIntensity: 0.6,
            opacityFrom: 0.5,
            opacityTo: 0.25,
            stops: [0, 95, 100],
          },
        },
        grid: {
          borderColor: borderColor,
          strokeDashArray: 3,
          padding: {
            top: -20,
            bottom: -8,
            left: -10,
            right: 8,
          },
        },
        xaxis: {
          categories: ["", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
          axisBorder: {
            show: false,
          },
          axisTicks: {
            show: false,
          },
          labels: {
            show: true,
            style: {
              fontSize: "13px",
              colors: axisColor,
            },
          },
        },
        yaxis: {
          labels: {
            show: false,
          },
          min: 10,
          max: 50,
          tickAmount: 4,
        },
      };
    if (typeof incomeChartEl !== undefined && incomeChartEl !== null) {
      const incomeChart = new ApexCharts(incomeChartEl, incomeChartConfig);
      incomeChart.render();
    }

    // Expenses Mini Chart - Radial Chart
    // --------------------------------------------------------------------
    const weeklyExpensesEl = document.querySelector("#expensesOfWeek"),
      weeklyExpensesConfig = {
        series: [65],
        chart: {
          width: 60,
          height: 60,
          type: "radialBar",
        },
        plotOptions: {
          radialBar: {
            startAngle: 0,
            endAngle: 360,
            strokeWidth: "8",
            hollow: {
              margin: 2,
              size: "45%",
            },
            track: {
              strokeWidth: "50%",
              background: borderColor,
            },
            dataLabels: {
              show: true,
              name: {
                show: false,
              },
              value: {
                formatter: function (val) {
                  return "$" + parseInt(val);
                },
                offsetY: 5,
                color: "#697a8d",
                fontSize: "13px",
                show: true,
              },
            },
          },
        },
        fill: {
          type: "solid",
          colors: config.colors.primary,
        },
        stroke: {
          lineCap: "round",
        },
        grid: {
          padding: {
            top: -10,
            bottom: -15,
            left: -10,
            right: -10,
          },
        },
        states: {
          hover: {
            filter: {
              type: "none",
            },
          },
          active: {
            filter: {
              type: "none",
            },
          },
        },
      };
    if (typeof weeklyExpensesEl !== undefined && weeklyExpensesEl !== null) {
      const weeklyExpenses = new ApexCharts(
        weeklyExpensesEl,
        weeklyExpensesConfig
      );
      weeklyExpenses.render();
    }

    // Scatter plot
    function calculateArray(level, key) {
      const data = [];
      for (const item of classification) {
        if (item.hasil_kelas == level) {
          data.push(item[key]);
        }
      }

      return data;
    }

    // Define Data
    const data = [{
      // Pre-Kids
      x: calculateArray("Pre-Kids", "jenjang"),
      y: calculateArray("Pre-Kids", "nilai"),
      name: "Pre-Kids",
      mode: "markers",
      type: "scatter"
    }, {
      // Beginner
      x: calculateArray("Beginner", "jenjang"),
      y: calculateArray("Beginner", "nilai"),
      name: "Beginner",
      mode: "markers",
      type: "scatter"
    }, {
      // Intermediate
      x: calculateArray("Intermediate", "jenjang"),
      y: calculateArray("Intermediate", "nilai"),
      name: "Intermediate",
      mode: "markers",
      type: "scatter"
    }];

    // Define Layout
    const layout = {
      xaxis: { title: "Jenjang" },
      yaxis: { range: [0, 100], title: "Nilai" },
      title: "Persebaran Kelas"
    };
  
    // Display with Plotly
    Plotly.newPlot("scatter-plot", data, layout);
  })();
</script>
@endsection

@section('content')
@if ($user->role == "Admin")
  <div class="column">
    <div class="col-lg-12 col-md-4 order-1">
    <div class="row">
      <!-- Order Statistics -->
      <div class="col-md-12 col-lg-6 col-xl-6 order-0 mb-4">
      <div class="card h-100">
        <div class="card-header d-flex align-items-center justify-content-between pb-0">
        <div class="card-title mb-0">
          <h5 class="m-0 me-2">Total Pengguna</h5>
        </div>
        </div>
        <div class="card-body">
        <div class="d-flex justify-content-between align-items-center mb-3">
          <div class="d-flex flex-column align-items-center gap-1">
          <h2 class="mb-2">{{count($users) + count($tutor)}}</h2>
          <span>Pengguna</span>
          </div>
          <div id="orderStatisticsChart"></div>
        </div>
        <ul class="p-0 m-0">
          <li class="d-flex mb-4 pb-1">
          <div class="avatar flex-shrink-0 me-3">
            <span class="avatar-initial rounded bg-label-success">
            <i class='bx bx-body'></i>
            </span>
          </div>
          <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
            <div class="me-2">
            <h6 class="mb-0">Siswa</h6>
            </div>
            <div class="user-progress">
            <small
              class="fw-semibold">{{array_count_values(array_column($users->toArray(), 'active'))[1] ?? "0"}}</small>
            </div>
          </div>
          </li>
          <li class="d-flex mb-4 pb-1">
          <div class="avatar flex-shrink-0 me-3">
            <span class="avatar-initial rounded bg-label-danger">
            <i class='bx bx-body'></i>
            </span>
          </div>
          <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
            <div class="me-2">
            <h6 class="mb-0">Siswa Tidak Aktif</h6>
            </div>
            <div class="user-progress">
            <small
              class="fw-semibold">{{array_count_values(array_column($users->toArray(), 'active'))[0] ?? "0"}}</small>
            </div>
          </div>
          </li>
          <li class="d-flex mb-4 pb-1">
          <div class="avatar flex-shrink-0 me-3">
            <span class="avatar-initial rounded bg-label-primary">
            <i class='bx bx-male'></i>
            </span>
          </div>
          <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
            <div class="me-2">
            <h6 class="mb-0">Tutor</h6>
            </div>
            <div class="user-progress">
            <small class="fw-semibold">{{count($tutor)}}</small>
            </div>
          </div>
          </li>
        </ul>
        </div>
      </div>
      </div>
      <div class="col-md-12 col-lg-6 col-xl-6 order-0 mb-4">
      <div class="card rounded">
        <div id="scatter-plot"></div>
      </div>
      </div>
    </div>
    </div>
    <!--/ Order Statistics -->
  </div>
  <div class="column">
    <div class="col-lg-12 col-md-4 order-1">
    <div class="row">
      <div class="col-lg-6 col-md-12 col-6 mb-4">
      <div class="card">
        <div class="card-body">
        <div class="card-title d-flex align-items-start justify-content-between">
          <div class="avatar flex-shrink-0">
          <span class="avatar-initial rounded bg-label-success">
            <i class="bx bx-md bx-body"></i>
          </span>
          </div>
        </div>
        <span class="fw-semibold d-block mb-1">Jumlah Siswa</span>
        <h3 class="card-title mb-2">{{array_count_values(array_column($users->toArray(), 'active'))[1] ?? "0"}}</h3>
        </div>
      </div>
      </div>
      <div class="col-lg-6 col-md-12 col-6 mb-4">
      <div class="card">
        <div class="card-body">
        <div class="card-title d-flex align-items-start justify-content-between">
          <div class="avatar flex-shrink-0">
          <span class="avatar-initial rounded bg-label-danger">
            <i class="bx bx-md bx-body"></i>
          </span>
          </div>
        </div>
        <span class="fw-semibold d-block mb-1">Jumlah Siswa Tidak Aktif</span>
        <h3 class="card-title mb-2">{{array_count_values(array_column($users->toArray(), 'active'))[0] ?? "0"}}</h3>
        </div>
      </div>
      </div>
      <div class="col-lg-12 col-md-12 col-6 mb-4">
      <div class="card">
        <div class="card-body">
        <div class="card-title d-flex align-items-start justify-content-between">
          <div class="avatar flex-shrink-0">
          <span class="avatar-initial rounded bg-label-primary">
            <i class="bx bx-md bx-male"></i>
          </span>
          </div>
        </div>
        <span class="fw-semibold d-block mb-1">Jumlah Tutor</span>
        <h3 class="card-title mb-2">{{count($tutor)}}</h3>
        </div>
      </div>
      </div>
    </div>
    </div>
  </div>
@else
  <div class="column">
    <div class="col-lg-12 mb-4 order-0">
    <div class="card">
      <div class="d-flex align-items-end row">
      <div class="col-sm-7">
        <div class="card-body">
        <h5 class="card-title text-primary">Congratulations {{$user->biodata->nama}}! 🎉</h5>
        @if ($user->kelas)
      <p class="mb-4">Kamu sekarang memiliki akses untuk belajar di LKP Seiza, klik menu di samping untuk mulai
        belajar!</p>

      <a href="tables/jadwal" class="btn btn-sm btn-outline-primary">Lihat Jadwal</a>
    @else
    <p class="mb-4">Kamu perlu menyelesaikan placement test terlebih dahulu sebelum mulai menggunakan layanan.
    </p>

    <a href="tables/placement" class="btn btn-sm btn-outline-primary">Mulai Tes</a>
  @endif
        </div>
      </div>
      <div class="col-sm-5 text-center text-sm-left">
        <div class="card-body pb-0 px-0 px-md-4">
        <img src="{{asset('assets/img/illustrations/man-with-laptop-light.png')}}" height="140"
          alt="View Badge User" data-app-dark-img="illustrations/man-with-laptop-dark.png"
          data-app-light-img="illustrations/man-with-laptop-light.png">
        </div>
      </div>
      </div>
    </div>
    </div>
  </div>
@endif
@endsection