title = "Operating System"
url = "/operating-system"
layout = "Dashboard"
is_hidden = 0

[session]
security = "user"
allowedUserGroups[] = "admin"
allowedUserGroups[] = "supplier"
redirect = "dashboard/login"
==
<?php
  use Yuren\BaliTiket\Models\Os;
  use Yuren\BaliTiket\Models\Bookings;

  use Winter\Storm\Auth\AuthManager;
  use Auth;

  function onStart()
  {
    $user = Auth::getUser();
    if ($user) {
      $this['from'] = Input::get('from');
      $this['to'] = Input::get('to');
      $from = Input::get('from');
      $to = Input::get('to');

      $this['vendor'] = $user->vendor; 

      $os = Os::selectRaw('os, COUNT(*) as total')->where('vendor', $user->vendor)->groupBy('os')->orderBy('total', 'desc');
      if ($from != null) {
        $os->where('created_at', '>=', $from);
      }
      if ($to != null) {
        $os->where('created_at', '<=', $to);
      }
      $this['os'] = $os->get();

      $os_by_date = Os::selectRaw('os, COUNT(*) as total')->where('vendor', $user->vendor)->groupBy('os')->orderBy('total', 'asc');
      if ($from != null) {
        $os_by_date->where('created_at', '>=', $from);
      }
      if ($to != null) {
        $os_by_date->where('created_at', '<=', $to);
      }
      $this['os_by_date'] = $os_by_date->get();
    } 

    
  }

?>
==
<!-- Content -->

<div class="container-xxl flex-grow-1 container-p-y">
  <div class="row">
    <!-- filter -->
    <div class="col-12 col-xl-6 col-sm-8 mb-4">
      <div class="card">
        <div class="card-body">
          <form action="{{url('operating-system')}}" method="GET" enctype="multipart/form-data">
            <div class="row g-0">
              <div class="col-md-6 col-sm-6 mb-2 px-2">
                <label for="flatpickr-date-1" class="form-label">From</label>
                <input type="text" class="form-control" id="flatpickr-date-1" value="{{ (from != null) ? from : '' }}" placeholder="yyyy-mm-dd" name="from" />
              </div>
              <div class="col-md-6 col-sm-6 mb-2 px-2">
                <label for="flatpickr-date-2" class="form-label">To</label>
                <input type="text" class="form-control" id="flatpickr-date-2" value="{{ (to != null) ? to : '' }}" placeholder="yyyy-mm-dd" name="to" />
              </div>
            </div>
            <div class="row g-0 mt-2">
              <div class="col-md-12 col-sm-6 mb-2 px-2">
                <button type="submit" class="btn btn-primary px-5 py-2">Search</button>
                <a href="{{url('operating-system')}}" class="btn btn-warning px-5 py-2 ms-2">Reset</a>
              </div>
            </div>

          </form>
        </div>
      </div>
    </div>
    <!-- end filter -->
  </div>

  <div class="row">
    <!-- Donut Chart -->
    <div class="col-md-6 col-12 mb-4">
      <div class="card">
        <div class="card-header d-flex align-items-center justify-content-between">
          <div>
            <h5 class="card-title mb-0">Perfomance</h5>
            <!-- <small class="text-muted">Spending on various categories</small> -->
          </div>
          <div class="dropdown d-none d-sm-flex">
            <h5 class="mb-0 me-3"><small class="text-muted">{{ (from != null) ? from|date('d F Y') : '' }} <span class="mx-2">{{ (to != null) ? '-' : '' }}</span> {{ (to != null) ? to|date('d F Y') : '' }}</small></h5>
          </div>
        </div>
        <div class="card-body">
          <div id="donutChart"></div>
        </div>
      </div>
    </div>
    <!-- /Donut Chart -->

    <!-- tracking pages -->
    <div class="col-12 col-xl-6 col-sm-12 mb-4">
      <div class="card">
        <div class="card-header header-elements">
          <h5 class="card-title mb-0">Operating System</h5>
        </div>
        <div class="card-body">
          <!-- <p class="text-end">
            <a href="{{url('product/add')}}" class="btn btn-success btn-sm" ><i class="fa fa-plus me-2"></i>Add</a>
          </p> -->
          <div class="card-datatable table-responsive">
            <table class="table border-top" id="recent-booking-list">
              <thead>
                <tr class="" >
                  <th class="fw-bold">Operating System</th>
                  <th class="fw-bold text-center">Total</th>
                </tr>
              </thead>
              <tbody>
                {% for key, os in os %}
                <tr>
                  <td><small>{{ os.os }}</small></td>
                  <td class="text-center"><small>{{ os.total }}</small></td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <!-- end tracking pages -->

  </div>
</div>
<!-- / Content -->


<!-- js -->
{% put scripts %}

<script type="text/javascript">
  //  For Datatable
  // --------------------------------------------------------------------
  var dt_projects_table = $('.datatables-projects');

  var dt_project = dt_projects_table.DataTable();

  // Flat Picker
  // --------------------------------------------------------------------
  const flatpickrDate1 = document.querySelector('#flatpickr-date-1'),
  flatpickrDate2 = document.querySelector('#flatpickr-date-2');

  // Initialize Flatpickr on flatpickrDate1
  if (flatpickrDate1) {
    flatpickrDate1.flatpickr({
      enableTime: false,
      dateFormat: 'Y-m-d',
      onChange: function(selectedDates, dateStr, instance) {
        // When a date is selected in flatpickrDate1, update the minDate of flatpickrDate2
        if (flatpickrDate2) {
          flatpickrDate2._flatpickr.set('minDate', dateStr);
        }
      }
    });
  }

  // Initialize Flatpickr on flatpickrDate2
  if (flatpickrDate2) {
    flatpickrDate2.flatpickr({
      enableTime: false,
      dateFormat: 'Y-m-d',
      minDate: flatpickrDate1 ? flatpickrDate1.value : null // Set initial minDate if a date is already selected in flatpickrDate1
    });
  }


// Line Chart
// --------------------------------------------------------------------
  // Data dari backend
  const trackingData = {{ os_by_date | json_encode | raw }};
  const devices = [];
  const totals = [];

  trackingData.forEach(item => {
    devices.push(item.os);
    totals.push(item.total);
  });

// Mencari nilai terbesar
  const maxTotal = Math.max(...totals);
  const maxTotalIndex = totals.indexOf(maxTotal);
  const maxTotalDevice = devices[maxTotalIndex];

  let cardColor, headingColor, labelColor, borderColor, legendColor;

  if (isDarkStyle) {
    cardColor = config.colors_dark.cardColor;
    headingColor = config.colors_dark.headingColor;
    labelColor = config.colors_dark.textMuted;
    legendColor = config.colors_dark.bodyColor;
    borderColor = config.colors_dark.borderColor;
  } else {
    cardColor = config.colors.cardColor;
    headingColor = config.colors.headingColor;
    labelColor = config.colors.textMuted;
    legendColor = config.colors.bodyColor;
    borderColor = config.colors.borderColor;
  }

// Color constant
  const chartColors = {
    column: {
      series1: '#826af9',
      series2: '#d2b0ff',
      bg: '#f8d3ff'
    },
    donut: {
      series1: '#fee802',
      series2: '#3fd0bd',
      series3: '#826bf8',
      series4: '#2b9bf4'
    },
    area: {
      series1: '#29dac7',
      series2: '#60f2ca',
      series3: '#a5f8cd'
    }
  };

  const donutChartEl = document.querySelector('#donutChart'),
  donutChartConfig = {
    chart: {
      height: 390,
      type: 'donut'
    },
    labels: devices,
    series: totals,
    colors: [
      chartColors.donut.series1,
      chartColors.donut.series4,
      chartColors.donut.series3,
      chartColors.donut.series2
      ],
    stroke: {
      show: false,
      curve: 'straight'
    },
    dataLabels: {
      enabled: true,
      formatter: function (val, opt) {
        return parseInt(val, 10) + '%';
      }
    },
    legend: {
      show: true,
      position: 'bottom',
      markers: { offsetX: -3 },
      itemMargin: {
        vertical: 3,
        horizontal: 10
      },
      labels: {
        colors: legendColor,
        useSeriesColors: false
      }
    },
    plotOptions: {
      pie: {
        donut: {
          labels: {
            show: true,
            name: {
              fontSize: '2rem',
              fontFamily: 'Public Sans'
            },
            value: {
              fontSize: '1.2rem',
              color: legendColor,
              fontFamily: 'Public Sans',
              formatter: function (val) {
                return parseInt(val, 10);
              }
            },
            total: {
              show: true,
              fontSize: '1.5rem',
              color: headingColor,
              label: maxTotalDevice,
              formatter: function (w) {
                return maxTotal ;
              }
            }
          }
        }
      }
    },
    responsive: [
    {
      breakpoint: 992,
      options: {
        chart: {
          height: 380
        },
        legend: {
          position: 'bottom',
          labels: {
            colors: legendColor,
            useSeriesColors: false
          }
        }
      }
    },
    {
      breakpoint: 576,
      options: {
        chart: {
          height: 320
        },
        plotOptions: {
          pie: {
            donut: {
              labels: {
                show: true,
                name: {
                  fontSize: '1.5rem'
                },
                value: {
                  fontSize: '1rem'
                },
                total: {
                  fontSize: '1.5rem'
                }
              }
            }
          }
        },
        legend: {
          position: 'bottom',
          labels: {
            colors: legendColor,
            useSeriesColors: false
          }
        }
      }
    },
    {
      breakpoint: 420,
      options: {
        chart: {
          height: 280
        },
        legend: {
          show: false
        }
      }
    },
    {
      breakpoint: 360,
      options: {
        chart: {
          height: 250
        },
        legend: {
          show: false
        }
      }
    }
    ]
  };

  if (typeof donutChartEl !== undefined && donutChartEl !== null) {
    const donutChart = new ApexCharts(donutChartEl, donutChartConfig);
    donutChart.render();
  }

</script>
{% endput %}
<!-- end js -->