title = "Dashboard"
url = "/dashboard"
layout = "Dashboard"
is_hidden = 0

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

  function onStart()
  {
    $user = Auth::getUser();
    if ($user) {
      $this['vendor'] = $user->vendor; 

      $thirtyDaysAgo = now()->subDays(30)->toDateString();

      $this['bookings'] = Bookings::orderBy('invoice_date', 'desc')->where('status_payment', 'paid')->where('vendor_id', $user->vendor)->take(10)->get();

      $this['countries'] = Bookings::selectRaw('country, SUM(total_price) as revenue')
      ->where('vendor_id', $user->vendor)
      ->where('status_payment', 'paid')
      ->where('invoice_date', '>=', $thirtyDaysAgo)
      ->groupBy('country')
      ->orderBy('revenue', 'desc')
      ->take(5) 
      ->get();

      $this['bestselling'] = Bookings::selectRaw('ticket_id, SUM(person) as amount, SUM(total_price) as revenue')
      ->where('vendor_id', $user->vendor)
      ->where('status_payment', 'paid')
      ->groupBy('ticket_id')
      ->orderBy('revenue', 'desc')
      ->take(5) 
      ->get();

    } 

    $this['booking'] = Bookings::make();
  }
?>
==
<!-- Content -->

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

    <!-- revenue -->
    <div class="col-6 col-xl-4 col-sm-6 mb-4">
      <div class="card">
        <div class="card-header header-elements">
          <h5 class="card-title mb-0">Last 30 Days Revenue</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-chart-pie-2 ti-sm"></i></div>
            <h4 class="mb-0">{{booking.revenueThirtyDays(vendor)}} IDR</h4>
          </div>
        </div>
      </div>
    </div>

    <div class="col-6 col-xl-4 col-sm-6 mb-4">
      <div class="card">
        <div class="card-header header-elements">
          <h5 class="card-title mb-0">Today's Revenue</h5>
        </div>
        <div class="card-body">
          <div class="d-flex gap-2 align-items-center">
            <div class="badge rounded bg-label-primary p-1">
              <i class="ti ti-currency-dollar ti-sm"></i>
            </div>
            <h4 class="mb-0">{{booking.revenueToday(vendor)}} IDR</h4>
          </div>
        </div>
      </div>
    </div>

    <div class="col-6 col-xl-4 col-sm-6 mb-4">
      <div class="card">
        <div class="card-header header-elements">
          <h5 class="card-title mb-0">Last 30 Days Tickets Sold</h5>
        </div>
        <div class="card-body">
          <div class="d-flex gap-2 align-items-center">
            <div class="badge rounded bg-label-warning p-1">
              <i class="ti ti-ticket ti-sm"></i>
            </div>
            <h4 class="mb-0">{{booking.saleThirtyDays(vendor)}} Tickets</h4>
          </div>
        </div>
      </div>
    </div>
    <!-- end revenue -->

    <!-- recent bookings -->
    <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">Recent Bookings</h5>
        </div>
        <div class="card-body">
          <div class="card-datatable table-responsive">
            <table class="table border-top" id="recent-booking-list">
              <thead>
                <tr class="" >
                  <th class="fw-bold">No. Invoice</th>
                  <th class="fw-bold">Booking Date</th>
                  <th class="fw-bold">Name</th>
                  <th class="fw-bold">Arrival Date</th>
                  <th class="fw-bold">Amount</th>
                  <th class="fw-bold">Status Payment</th>
                  <th class="fw-bold"></th>
                </tr>
              </thead>
              <tbody>
                {% for booking in bookings %}
                <tr>
                  <td>{{ booking.no_invoice }}</td>
                  <td>{{ booking.invoice_date }}</td>
                  <td>{{ booking.firstname }}</td>
                  <td>{{ booking.arrival_date }}</td>
                  <td>IDR {{ booking.priceFormat(booking.total_price) }}</td>
                  <td>
                    {% if booking.status_payment == 'pending' %}
                    <span class="badge bg-warning">pending</span>
                    {% elseif booking.status_payment == 'paid' %}
                    <span class="badge bg-success">paid</span>
                    {% elseif booking.status_payment == 'expired' %}
                    <span class="badge bg-danger">expired</span>
                    {% endif %}
                  </td>
                  <td class="text-end">
                    {% if booking.voucher_link != null and booking.status_payment == 'paid' %}
                    <a class="btn btn-primary btn-sm" href="https://main.tiketxplorer.com/bali_tiket/{{booking.voucher_link}}" target="_blank"><i class="fa fa-eye me-2"></i>view</a>
                    {% endif %}
                  </td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <!-- end recent bookings -->

    <!-- country -->
    <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">Last 30 Days Revenue by Country</h5>
          </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>
    <!-- end country -->

    <!-- country -->
    <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">Best-Selling Tickets in the Last 30 Days</h5>
        </div>
        <div class="card-body">
          <div class="card-datatable table-responsive">
            <table class="table border-top" id="recent-booking-list">
              <thead>
                <tr class="" >
                  <th class="fw-bold">Ticket</th>
                  <th class="fw-bold text-center">Amount</th>
                  <th class="fw-bold text-center">Total Revenue</th>
                </tr>
              </thead>
              <tbody>
                {% for key, ticket in bestselling %}
                <tr>
                  <td><small>{{ ticket.ticketName(ticket.ticket_id) }}</small></td>
                  <td class=" text-center"><small>{{ ticket.amount }}</small></td>
                  <td class=" text-center"><small>IDR {{ ticket.priceFormat(ticket.revenue) }}</small></td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <!-- end country -->

    <!-- lead time statistic -->
    <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">Lead Time Bookings</h5>
        </div>
        <div class="card-body">
          <canvas id="barChart" class="chartjs" data-height="400"></canvas>
        </div>
      </div>
    </div>
    <!-- end lead time statistic -->

  </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({

  });

  (function () {
    // Color Variables
    const purpleColor = '#836AF9',
    yellowColor = '#ffe800',
    cyanColor = '#28dac6',
    orangeColor = '#FF8132',
    orangeLightColor = '#FDAC34',
    oceanBlueColor = '#299AFF',
    greyColor = '#4F5D70',
    greyLightColor = '#EDF1F4',
    blueColor = '#2B9AFF',
    blueLightColor = '#84D0FF';

    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;
    }

    // Set height according to their data-height
    const chartList = document.querySelectorAll('.chartjs');
    chartList.forEach(function (chartListItem) {
      chartListItem.height = chartListItem.dataset.height;
    });

    // Prepare data for the chart
    const leadTimeData = {{ booking.leadTime(vendor) | raw }};
    const labels = [];
    const data = [];

    leadTimeData.forEach(item => {
      labels.push(item.lead_time_group);
      data.push(item.total_bookings);
    });

    // Bar Chart
    const barChart = document.getElementById('barChart');
    if (barChart) {
      const barChartVar = new Chart(barChart, {
        type: 'bar',
        data: {
          labels: labels,
          datasets: [
          {
            data: data,
            backgroundColor: cyanColor,
            borderColor: 'transparent',
            maxBarThickness: 50,
            borderRadius: {
              topRight: 0,
              topLeft: 0
            }
          }
          ]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          animation: {
            duration: 500
          },
          plugins: {
            tooltip: {
              rtl: isRtl,
              backgroundColor: cardColor,
              titleColor: headingColor,
              bodyColor: legendColor,
              borderWidth: 1,
              borderColor: borderColor
            },
            legend: {
              display: false
            }
          },
          scales: {
            x: {
              grid: {
                color: borderColor,
                drawBorder: false,
                borderColor: borderColor
              },
              ticks: {
                color: labelColor
              }
            },
            y: {
              min: 0,
              grid: {
                color: borderColor,
                drawBorder: false,
                borderColor: borderColor
              },
              ticks: {
                stepSize: Math.ceil((Math.max(...data) + 28.5) / 2),
                color: labelColor
              }
            }
          }
        }
      });
    }
  })();
</script>

{# donut chart #}
<script>
  // Data dari backend
  const trackingData = {{ countries | json_encode | raw }};
  const countries = trackingData.map(item => item.country);
  const totals = trackingData.map(item => parseInt(item.revenue, 10));

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

  // Formatter mata uang IDR
  const formatToIDR = (value) =>
    new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR' }).format(value);

  // Warna chart
  const chartColors = ['#FFB800', '#299AFF', '#836AF9', '#28DAC6'];

  // Konfigurasi Donut Chart
  const donutChartEl = document.querySelector('#donutChart');
  if (donutChartEl) {
    const donutChartConfig = {
      chart: {
        type: 'donut',
        height: 390,
      },
      labels: countries,
      series: totals,
      colors: chartColors,
      legend: {
        position: 'bottom',
      },
      plotOptions: {
        pie: {
          donut: {
            labels: {
              show: true,
              name: {
                fontSize: '1.5rem',
              },
              value: {
                fontSize: '1rem',
                formatter: val => formatToIDR(val), // Format ke IDR
              },
              total: {
                show: true,
                label: maxTotalDevice,
                formatter: () => formatToIDR(maxTotal), // Total juga diformat ke IDR
              },
            },
          },
        },
      },
      tooltip: {
        y: {
          formatter: (val) => formatToIDR(val), // Tooltip diformat ke IDR
        },
      },
    };

    const donutChart = new ApexCharts(donutChartEl, donutChartConfig);
    donutChart.render();
  }
</script>

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