title = "Booking"
url = "/booking"
layout = "Dashboard"
is_hidden = 0

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

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

      $name = Input::get('name');
      $type = Input::get('type');
      $from = Input::get('from');
      $to = Input::get('to');
      $no_invoice = Input::get('no_invoice');
      $status = Input::get('status');
      $product = Input::get('product');

      $this['name'] = Input::get('name');
      $this['type'] = Input::get('type');
      $this['from'] = Input::get('from');
      $this['to'] = Input::get('to');
      $this['no_invoice'] = Input::get('no_invoice');
      $this['status'] = Input::get('status');
      $this['product'] = Input::get('product');

      $query = Bookings::where('vendor_id', $user->vendor);

      if ($name != null) {
        $query->where('name', 'like', '%' . $name . '%');
      }

      if ($type != null) {

        if ($type == 'Booking Date'){
          if ($from != null) {
            $query->where('invoice_date', '>=', $from);
          }

          if ($to != null) {
            $query->where('invoice_date', '<=', $to);
          }
        } elseif ($type == 'Arrival Date'){
          if ($from != null) {
            $query->where('arrival_date', '>=', $from);
          }

          if ($to != null) {
            $query->where('arrival_date', '<=', $to);
          }
        }
      }

      if ($no_invoice != null) {
        $query->where('no_invoice', 'like', '%' . $no_invoice . '%');
      }

      if ($status != null) {
        $query->where('status_payment', $status);
      }

      if ($product != null) {
        $query->where('product_id', $product);
      }

      // Clone query for total revenue calculation
      $revenueQuery = clone $query;

      // Clone query for lead time calculation
      $leadTimeQuery = clone $query;

      // Get bookings
      $this['bookings'] = $query->orderBy('invoice_date', 'desc')->get();

      // Calculate total revenue
      $totalRevenue = $revenueQuery->where('status_payment', 'paid')->sum('total_price');
      // Format total revenue
      $this['totalRevenue'] = number_format($totalRevenue, 0, ',', '.');

      // Calculate lead time booking
      $this['leadtime'] = $leadTimeQuery->selectRaw("
      CASE
      WHEN DATEDIFF(arrival_date, invoice_date) BETWEEN 0 AND 7 THEN '0-7 days'
      WHEN DATEDIFF(arrival_date, invoice_date) BETWEEN 8 AND 14 THEN '7-14 days'
      WHEN DATEDIFF(arrival_date, invoice_date) BETWEEN 15 AND 30 THEN '14-30 days'
      WHEN DATEDIFF(arrival_date, invoice_date) BETWEEN 31 AND 90 THEN '1-3 months'
      WHEN DATEDIFF(arrival_date, invoice_date) BETWEEN 91 AND 365 THEN '3 months - 1 year'
      ELSE 'More than 1 year'
      END AS lead_time_group,
      COUNT(*) AS total_bookings
      ")
      ->where('status_payment', 'paid')
      ->groupBy('lead_time_group')
      ->orderByRaw("
          CASE
          WHEN lead_time_group = '0-7 days' THEN 1
          WHEN lead_time_group = '7-14 days' THEN 2
          WHEN lead_time_group = '14-30 days' THEN 3
          WHEN lead_time_group = '1-3 months' THEN 4
          WHEN lead_time_group = '3 months - 1 year' THEN 5
          WHEN lead_time_group = 'More than 1 year' THEN 6
          END
      ")
      ->get();


    } 

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

  function onDelete()
  {
    $bookingId = Input::post('id_booking');

    $booking = Bookings::find($bookingId);
    if ($booking) {
      $booking->delete();
    }

    return redirect()->refresh();
  }
?>
==
<!-- Content -->

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

    <!-- revenue -->
    <div class="col-12 col-xl-12 col-sm-12 mb-4">
      <div class="card">
        <div class="card-body">
          <form action="{{url('booking')}}" method="GET" enctype="multipart/form-data">

            <div class="row g-0">
              <div class="col-md-3 col-sm-6 mb-2 px-2">
                <label for="name" class="form-label">Guest Name</label>
                <input type="text" class="form-control" id="name" value="{{ (name != null) ? name : '' }}" placeholder="name" name="name" />
              </div>
              <div class="col-md-3 col-sm-6 mb-2 px-2">
                <label class="form-label" for="type">Date Type</label>
                <select class="select2" name="type" id="type">
                  <option label=" " selected disabled></option>
                  <option value="Arrival Date" {{ (type == 'Arrival Date') ? 'selected' : '' }}>Arrival Date</option>
                  <option value="Booking Date" {{ (type == 'Booking Date') ? 'selected' : '' }}>Booking Date</option>
                </select>
              </div>
              <div class="col-md-2 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-2 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-2 col-sm-6 mb-2 px-2">
                <label class="form-label">&ensp;</label>
                <button type="button" id="show-filter" class="btn btn-secondary w-100 py-2">Advanced Filter</button>
                <button type="button" id="hide-filter" class="btn btn-secondary w-100 py-2 d-none">Hide Filter</button>
              </div>
            </div>
            <div class="row g-0 d-none" id="advanced-filter-container">
              <hr class="my-2" />
              <div class="col-md-3 col-sm-6 mb-2 px-2">
                <label for="no_invoice" class="form-label">No. Invoice</label>
                <input type="text" class="form-control" id="no_invoice" value="{{ (no_invoice != null) ? no_invoice : '' }}" placeholder="No. Invoice" name="no_invoice" />
              </div>
              <div class="col-md-3 col-sm-6 mb-2 px-2">
                <label class="form-label" for="status">Status Payment</label>
                <select class="select2" name="status" id="status">
                  <option label=" " selected disabled></option>
                  <option value="paid" {{ (status == 'paid') ? 'selected' : '' }}>Paid</option>
                  <option value="pending" {{ (status == 'pending') ? 'selected' : '' }}>Pending</option>
                  <option value="expired" {{ (status == 'expired') ? 'selected' : '' }}>Expired</option>
                </select>
              </div>
              <div class="col-md-3 col-sm-6 mb-2 px-2">
                <label class="form-label" for="product">Product</label>
                <select class="select2 fs-tiny" name="product" id="product">
                  <option label=" " disabled selected></option>
                  {% for list in products %}
                  <option value="{{list.id}}" {{ (product == list.id) ? 'selected' : '' }}>{{list.name}}</option>
                  {% endfor %}
                </select>
              </div>
            </div>
            <div class="row g-0">
              <div class="col-md-12 col-sm-12 mt-2 px-2">
                <button type="submit" class="btn btn-primary rounded-2 px-5 py-2">Search</button>
                <a href="{{url('booking')}}" class="btn btn-warning rounded-2 px-5 py-2 ms-2">Reset</a>
              </div>
            </div>

          </form>
        </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">List Bookings</h5>
          <div class="text-end w-100 mt-2">
            <!-- Icon Dropdown -->
            <div class="btn-group">
              <button type="button" class="btn btn-primary rounded-3 dropdown-toggle hide-arrow" data-bs-toggle="dropdown">
                <i class="ti ti-printer me-2"></i> Export
              </button>
              <ul class="dropdown-menu">
                <li>
                  <!-- export to pdf -->
                  <form action="{{url('bali_tiket/export-booking-pdf.php')}}" target="_blank" method="GET" enctype="multipart/form-data">
                    <input type="hidden" name="name" value="{{ name }}">
                    <input type="hidden" name="type" value="{{ type }}">
                    <input type="hidden" name="from" value="{{ from }}">
                    <input type="hidden" name="to" value="{{ to }}">
                    <input type="hidden" name="no_invoice" value="{{ no_invoice }}">
                    <input type="hidden" name="status" value="{{ status }}">
                    <input type="hidden" name="product" value="{{ product }}">
                    <input type="hidden" name="vendor" value="{{ vendor }}">

                    <button class="dropdown-item" type="submit"><i class="fa fa-file-pdf me-2"></i> PDF</button>
                  </form>
                  <!-- end export to pdf -->
                </li>
                <li>
                  <!-- export to excel -->
                  <form action="{{url('bali_tiket/export-booking-excel.php')}}" target="_blank" method="GET" enctype="multipart/form-data">
                    <input type="hidden" name="name" value="{{ name }}">
                    <input type="hidden" name="type" value="{{ type }}">
                    <input type="hidden" name="from" value="{{ from }}">
                    <input type="hidden" name="to" value="{{ to }}">
                    <input type="hidden" name="no_invoice" value="{{ no_invoice }}">
                    <input type="hidden" name="status" value="{{ status }}">
                    <input type="hidden" name="product" value="{{ product }}">
                    <input type="hidden" name="vendor" value="{{ vendor }}">

                    <button class="dropdown-item" type="submit"><i class="fa fa-file-excel me-2"></i> Excel</button>
                  </form>
                  <!-- end export to excel -->
                </li>
              </ul>
            </div>
          </div>
        </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">Ticket</th>
                  <th class="fw-bold">Amount</th>
                  <th class="fw-bold">Status</th>
                  <th class="fw-bold"></th>
                </tr>
              </thead>
              <tbody>
                {% for key, booking in bookings %}
                <tr>
                  <td><small>{{ booking.no_invoice }}</small></td>
                  <td><small>{{ booking.invoice_date }}</small></td>
                  <td><small>{{ booking.firstname }}</small></td>
                  <td><small>{{ booking.arrival_date }}</small></td>
                  <td><small>{{ booking.ticketName(booking.ticket_id) }}</small></td>
                  <td><small>IDR {{ booking.priceFormat(booking.total_price) }}</small></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">
                    <div class="d-flex flex-row">
                      {% if booking.voucher_link != null and booking.status_payment == 'paid' %}
                      <a class="btn btn-primary btn-xs px-2 m-1" href="https://main.tiketxplorer.com/bali_tiket/{{booking.voucher_link}}" target="_blank"><i class="fa fa-eye align-middle"></i></a>
                      {% endif %}
                      <!-- <a class="btn btn-warning btn-xs px-2 m-1" href="{{url('booking/'~booking.id~'/edit/1')}}"><i class="fa fa-edit align-middle"></i></a> -->

                      <button class="btn btn-danger btn-xs px-2 m-1" data-bs-toggle="modal" data-bs-target="#delete-booking-{{key}}"><i class="fa fa-trash align-middle"></i></button>
                    </div>

                    <div class="modal fade" id="delete-booking-{{key}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                      <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
                        <div class="modal-content">
                          <div class="modal-body text-start">
                            <p class="fs-big">Are you sure you want to delete this <b>{{ booking.no_invoice }}</b> ?</p>
                          </div>
                          <div class="modal-footer justify-content-between">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                            <form data-request="onDelete" method="POST">
                              <input type="hidden" name="id_booking" value="{{booking.id}}">
                              <button type="submit" class="btn btn-danger" data-bs-dismiss="modal">Delete</button>
                            </form>
                          </div>
                        </div>
                      </div>
                    </div>

                  </td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <!-- end recent bookings -->

    <!-- 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">Total Revenue</h5>
        </div>
        <div class="card-body">
          <div class="d-flex gap-2 align-items-center">
            <div class="badge rounded bg-label-success p-1"><i class="ti ti-currency-dollar ti-sm"></i></div>
            <h4 class="mb-0">IDR {{totalRevenue}}</h4>
          </div>
        </div>
      </div>
    </div>
    <!-- end revenue -->

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

  });

  // select2 option
  $(function () {
    const select2 = $('.select2'),
    selectPicker = $('.selectpicker');

    // Bootstrap select
    if (selectPicker.length) {
      selectPicker.selectpicker();
    }

    // select2
    if (select2.length) {
      select2.each(function () {
        var $this = $(this);
        $this.wrap('<div class="position-relative"></div>');
        $this.select2({
          placeholder: 'Select value',
          dropdownParent: $this.parent()
        });
      });
    }
  });

  (function () {
  // 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
    });
    }
  })();

  $(document).ready(function() {
    // Ketika tombol "Advanced Filter" diklik
    $('#show-filter').on('click', function() {
      $('#advanced-filter-container').removeClass('d-none'); // Tampilkan kontainer filter lanjutan
      $(this).addClass('d-none'); // Sembunyikan tombol "Advanced Filter"
      $('#hide-filter').removeClass('d-none'); // Tampilkan tombol "Hide Filter"
    });

    // Ketika tombol "Hide Filter" diklik
    $('#hide-filter').on('click', function() {
      $('#advanced-filter-container').addClass('d-none'); // Sembunyikan kontainer filter lanjutan
      $(this).addClass('d-none'); // Sembunyikan tombol "Hide Filter"
      $('#show-filter').removeClass('d-none'); // Tampilkan tombol "Advanced Filter"
    });
  });


  //lead time booking
  (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 = {{ leadtime | 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) + 20) / 2),
                color: labelColor
              }
            }
          }
        }
      });
    }
  })();
</script>
{% endput %}
<!-- end js -->