title = "Country"
url = "/country"
layout = "Dashboard"
is_hidden = 0

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

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

      $bookings = Bookings::selectRaw('country, SUM(total_price) as revenue')->where('vendor_id', $user->vendor)->where('status_payment', 'paid')->groupBy('country');
      if ($from != null) {
        $bookings->where('invoice_date', '>=', $from);
      }
      if ($to != null) {
        $bookings->where('invoice_date', '<=', $to);
      }
      $this['bookings'] = $bookings->get();

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

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

    $this['booking'] = Bookings::make();
    
  }

?>
==
<!-- 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('country')}}" 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('country')}}" class="btn btn-warning px-5 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 -->

    <!-- country -->
    <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">Country</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">Country</th>
                  <th class="fw-bold text-center">Total Visitor</th>
                  <th class="fw-bold text-center">Total Revenue</th>
                </tr>
              </thead>
              <tbody>
                {% for key, country in country %}
                <tr>
                  <td><small>{{ country.country }}</small></td>
                  <td class=" text-center"><small>{{ country.total }}</small></td>
                  <td class=" text-center"><small>
                    {% for booking in bookings %}
                    {% if booking.country == country.country %}
                    IDR {{ booking.priceFormat(booking.revenue) }}
                    {% endif %}
                    {% endfor %}
                  </small></td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <!-- end country -->

  </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 = {{ country_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 -->