title = "Tracking Pages"
url = "/tracking-pages"
layout = "Dashboard"
is_hidden = 0

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

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

      $this['all_tracking'] = Tracking::where('vendor', $user->vendor)->count();

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


    } 

    
  }

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

<div class="container-xxl flex-grow-1 container-p-y">
  <div class="row">

    <!-- revenue -->
    <div class="col-6 col-xl-3 col-sm-6 mb-4">
      <div class="card">
        <div class="card-header header-elements pb-3">
          <h5 class="card-title mb-0">Total Clicks</h5>
        </div>
        <div class="card-body">
          <div class="d-flex gap-2 align-items-center">
            <div class="badge rounded bg-label-info p-1"><i class="ti ti-click ti-sm"></i></div>
            <h4 class="mb-0">{{ all_tracking }} {{ (all_tracking == 1) ? 'click' : 'clicks' }}</h4>
          </div>
        </div>
      </div>
    </div>
    <!-- end revenue -->

    <!-- filter -->
    <div class="col-12 col-xl-9 col-sm-8 mb-4">
      <div class="card">
        <div class="card-body">
          <form action="{{url('tracking-pages')}}" method="GET" enctype="multipart/form-data">
            <div class="row g-0">
              <div class="col-md-4 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-4 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 class="col-md-4 col-sm-6 mb-2 px-2">
                <label for="flatpickr-date-2" class="form-label">&ensp;</label><br>
                <button type="submit" class="btn btn-primary px-4 py-2">Search</button>
                <a href="{{url('tracking-pages')}}" class="btn btn-warning px-4 py-2 ms-2">Reset</a>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
    <!-- end filter -->

    <!-- Line Chart -->
    <div class="col-12 mb-4">
      <div class="card">
        <div class="card-header d-flex justify-content-between">
          <div>
            <h5 class="card-title mb-0">Perfomance</h5>
          </div>
          <div class="d-sm-flex d-none align-items-center">
            <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="lineChart"></div>
        </div>
      </div>
    </div>
    <!-- /Line Chart -->

    <!-- tracking pages -->
    <div class="col-12 col-xl-12 col-sm-12 mb-4">
      <div class="card">
        <div class="card-header header-elements">
          <h5 class="card-title mb-0">Tracking Pages</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">Title</th>
                  <th class="fw-bold">URL</th>
                  <th class="fw-bold text-center">Total Clicks</th>
                </tr>
              </thead>
              <tbody>
                {% for key, tracking in trackings %}
                <tr>
                  <td><small>{{ tracking.title }}</small></td>
                  <td><small>{{ tracking.url }}</small></td>
                  <td class="text-center"><small>{{ tracking.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
// --------------------------------------------------------------------
  const trackingData = {{ tracking_by_date|json_encode|raw }};
  const dates = [];
  const totals = [];

  trackingData.forEach(item => {
    dates.push(item.date);
    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 lineChartEl = document.querySelector('#lineChart'),
  lineChartConfig = {
    chart: {
      height: 400,
      type: 'line',
      parentHeightOffset: 0,
      zoom: {
        enabled: false
      },
      toolbar: {
        show: false
      }
    },
    series: [
    {
      name: 'Total',
      data: totals
    }
    ],
    markers: {
      strokeWidth: 4,
      strokeOpacity: 1,
      strokeColors: [cardColor],
      colors: [config.colors.warning]
    },
    dataLabels: {
      enabled: false
    },
    stroke: {
      curve: 'smooth' 
    },
    colors: [config.colors.warning],
    grid: {
      borderColor: borderColor,
      xaxis: {
        lines: {
          show: true
        }
      },
      padding: {
        top: -20
      }
    },
    tooltip: {
      custom: function ({ series, seriesIndex, dataPointIndex, w }) {
        return '<div class="px-3 py-2">' + '<span>' + series[seriesIndex][dataPointIndex] + ' Clicks</span>' + '</div>';
      }
    },
    xaxis: {
      categories: dates,
      axisBorder: {
        show: false
      },
      axisTicks: {
        show: false
      },
      labels: {
        style: {
          colors: labelColor,
          fontSize: '13px'
        }
      }
    },
    yaxis: {
      min: 0, 
      max: Math.max(...totals) * 1.5, 
      labels: {
        style: {
          colors: labelColor,
          fontSize: '13px'
        }
      }
    }
  };

  if (typeof lineChartEl !== undefined && lineChartEl !== null) {
    const lineChart = new ApexCharts(lineChartEl, lineChartConfig);
    lineChart.render();
  }

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