@extends('admin.account.show')
@section('content')

<div id="kt_content_container" class="container-xxl">
  <div class="row g-5 g-xl-8">
    <!--begin::Charts Widget 2-->
    <div class="card card-xl-stretch mb-5 mb-xl-8">
      <!--begin::Header-->
      <div class="card-header border-0 pt-5">
        <h3 class="card-title align-items-start flex-column">
          <span class="card-label fw-bolder fs-3 mb-1">Weight Statistics</span>
        </h3>
        <!--begin::Toolbar-->
        <div class="card-toolbar" data-kt-buttons="true">
          <a class="btn btn-sm btn-color-muted btn-active btn-active-primary active px-4 wgraph" >weekly</a>
          <a class="btn btn-sm btn-color-muted btn-active btn-active-primary px-4 me-1 wgraph" >monthly</a>
          <a class="btn btn-sm btn-color-muted btn-active btn-active-primary px-4 me-1 wgraph" >yearly</a>
        </div>
        <!--end::Toolbar-->
      </div>
      <!--end::Header-->
      <!--begin::Body-->
      <div class="card-body">
             <script>
                var label = [];
                var weight = [];
                var yaxis = {{$yaxis}};
              </script>

              @foreach ($xaxis_values as $values)
                <script>
                  label.push("{{$values['label']}}");
                  weight.push({{$values['weight']}});
                </script>
              @endforeach

              <script>
                  localStorage.setItem('label', JSON.stringify(label));
                  localStorage.setItem('weight', JSON.stringify(weight));
                  localStorage.setItem('yaxis', JSON.stringify(yaxis));


                var initialData = {
                labels: JSON.parse(localStorage.getItem('label')),
                series: JSON.parse(localStorage.getItem('weight')),
                yaxis: JSON.parse(localStorage.getItem('yaxis')),
                   };
              </script>


        <script>
          // Define chart creation function
          function createChart() {
            var options = {
              chart: {
                type: 'bar',
              },
              series: [
                {
                  name: 'Weight',
                  data: initialData.series,
                },
              ],
              xaxis: {
                categories: initialData.labels,
              },
              yaxis: {
                tickAmount: 10,
                max: initialData.yaxis,
              },
            };

            var chart = new ApexCharts(document.getElementById('chart'), options);
            chart.render();
            return chart;
          }


          // Handle button clicks to update the chart
          $('.wgraph').on('click', function () {
            var type = $(this).text();
            var user = {{$user->id}};

            getGraphStatistics(user, type);
          });

          $.ajaxSetup({
              headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              }
            });

          function getGraphStatistics(id, type) {
            $.ajax({
            url: '/admin/weight-statistics',
            type: 'GET',
            data: {
              id: id,
              type: type
          },
          dataType: 'json',
          success: function(data) {

            var label = [];
            var weight = [];
            var yaxis = data.yaxis;

          $.each(data.xaxis_values, function(index, item) {
            label.push(item.label);
            weight.push(item.weight);

          });

          localStorage.setItem('label', JSON.stringify(label));
          localStorage.setItem('weight', JSON.stringify(weight));
          localStorage.setItem('yaxis', JSON.stringify(yaxis));

          var newData = {
            label: JSON.parse(localStorage.getItem('label')),
            series: JSON.parse(localStorage.getItem('weight')),
            yaxis: parseInt(JSON.parse(localStorage.getItem('yaxis'))),
          };
          updateChart(newData);
          },
        error: function(xhr, status, error) {
          console.error('Error:', error);
        }
      });
    }
          // Function to update the chart with new data
          function updateChart(newData) {
            chart.updateSeries([{
              name: 'weight',
              data: newData.series
            }]);
            chart.updateOptions({
              xaxis: {
                categories: newData.label
              },
              yaxis: {
                tickAmount: 10,
                max: newData.yaxis
              }
            });
          }


        </script>

        <!-- Chart Container -->
        <div id="chart" style="height: 500px;"></div>
      </div>
      <!--end::Body-->
    </div>
    <!--end::Charts Widget 2-->
  </div>
</div>


  <script>
var chart = createChart();
  </script>
@endsection