title = "Browser"
url = "/browser"
layout = "Dashboard"
is_hidden = 0

[session]
security = "user"
allowedUserGroups[] = "admin"
allowedUserGroups[] = "supplier"
redirect = "dashboard/login"
==
<?php
  use Yuren\BaliTiket\Models\Browser;
  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; 

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

      $browser_by_date = Browser::selectRaw('browser, COUNT(*) as total')->where('vendor', $user->vendor)->groupBy('browser')->orderBy('total', 'desc');
      if ($from != null) {
        $browser_by_date->where('created_at', '>=', $from);
      }
      if ($to != null) {
        $browser_by_date->where('created_at', '<=', $to);
      }
      $this['browser_by_date'] = $browser_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('browser')}}" 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('browser')}}" class="btn btn-warning px-5 py-2 ms-2">Reset</a>
              </div>
            </div>

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

  <div class="row">
    <!-- Bar Chart -->
    <div class="col-md-6 col-12 mb-4">
      <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
          <div>
            <h5 class="card-title mb-0">Perfomance</h5>
          </div>
          <div class="dropdown">
            <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="horizontalBarChart"></div>
        </div>
      </div>
    </div>
    <!-- /Bar 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">Browser</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">Browser</th>
                  <th class="fw-bold text-center">Total</th>
                </tr>
              </thead>
              <tbody>
                {% for key, browser in browsers %}
                <tr>
                  <td><small>{{ browser.browser }}</small></td>
                  <td class=" text-center"><small>{{ browser.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
    });
  }



  // Horizontal Bar Chart
  // --------------------------------------------------------------------
  
  // Data dari backend
  const trackingData = {{ browser_by_date | json_encode | raw }};
  const browsers = [];
  const totals = [];

  trackingData.forEach(item => {
    browsers.push(item.browser);
    totals.push(item.total);
  });

  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 horizontalBarChartEl = document.querySelector('#horizontalBarChart'),
    horizontalBarChartConfig = {
      chart: {
        height: 400,
        type: 'bar',
        toolbar: {
          show: false
        }
      },
      plotOptions: {
        bar: {
          horizontal: true,
          barHeight: '30%',
          startingShape: 'rounded',
          borderRadius: 8
        }
      },
      grid: {
        borderColor: borderColor,
        xaxis: {
          lines: {
            show: false
          }
        },
        padding: {
          top: -20,
          bottom: -12
        }
      },
      colors: config.colors.info,
      dataLabels: {
        enabled: false
      },
      series: [
        {
          data: totals
        }
      ],
      xaxis: {
        categories: browsers,
        axisBorder: {
          show: false
        },
        axisTicks: {
          show: false
        },
        labels: {
          style: {
            colors: labelColor,
            fontSize: '13px'
          }
        }
      },
      yaxis: {
        labels: {
          style: {
            colors: labelColor,
            fontSize: '13px'
          }
        }
      }
    };
  if (typeof horizontalBarChartEl !== undefined && horizontalBarChartEl !== null) {
    const horizontalBarChart = new ApexCharts(horizontalBarChartEl, horizontalBarChartConfig);
    horizontalBarChart.render();
  }

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