title = "Create Booking"
url = "/booking/create/1"
layout = "Dashboard"
is_hidden = 0

[session]
security = "user"
allowedUserGroups[] = "admin"
allowedUserGroups[] = "supplier"
redirect = "dashboard/login"
==
<?php
  use Yuren\BaliTiket\Models\Ticket;
  use Yuren\BaliTiket\Models\Vendor;
  use Yuren\BaliTiket\Models\Rateplan;
  use Yuren\BaliTiket\Models\Allocation;

  use Winter\Storm\Auth\AuthManager;
  use Auth;

  function onStart()
  {
    date_default_timezone_set('Asia/Singapore');
    $this['arrival_date'] = date('Y-m-d');

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

      $this['vendors'] = Vendor::where('id', $user->vendor)->first();

      $this['tickets'] = Ticket::orderBy('created_at', 'desc')->where('vendor_id', $user->vendor)->get();

      $this['rateplans'] = Rateplan::orderBy('created_at', 'desc')->where('vendor_id', $user->vendor)->get();

      $this['allocations'] = Allocation::where('vendor_id', $user->vendor)->get();
    } 

    $this['ticket'] = Ticket::make();
    $this['allocation'] = Allocation::make();
  }

  function onUpdate()
  {
    date_default_timezone_set('Asia/Singapore');

    $vendor = Input::post('vendor2');
    $arrival_date = Input::post('arrival_date');
    $this['arrival_date'] = Input::post('arrival_date');

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

      $this['vendors'] = Vendor::where('id', $user->vendor)->first();

      $this['tickets'] = Ticket::orderBy('created_at', 'desc')->where('vendor_id', $user->vendor)->get();

      $this['rateplans'] = Rateplan::orderBy('created_at', 'desc')->where('vendor_id', $user->vendor)->get();

      $this['allocations'] = Allocation::where('vendor_id', $user->vendor)->get();
    } 

    $this['ticket'] = Ticket::make();
    $this['allocation'] = Allocation::make();

    return ['#list-ticket-container' => $this->renderPartial('booking/list_ticket')];
  }
  
?>
==
<!-- Content -->

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

    <!-- Select Date -->
    <div class="modal fade" id="selectDate" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered modal-sm">
        <form class="modal-content" method="POST" enctype="multipart/form-data" id="form-select-date" data-request="onUpdate">
          <div class="modal-header">
            <h1 class="modal-title fs-5" id="staticBackdropLabel">Select Date</h1>
          </div>
          <div class="modal-body">
            <div class="row g-0">
              <div class="col-md-12 col-12">
                <label for="arrival-date" class="form-label">Arrival Date<span class="text-danger">*</span></label>
                <input required type="text" class="form-control" id="arrival-date" placeholder="yyyy-mm-dd" name="arrival_date" />
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <input type="hidden" value="{{user.vendor}}" name="vendor2">
            <button type="submit" class="btn btn-primary" data-bs-dismiss="modal">Submit</button>
          </div>
        </form>
      </div>
    </div>

    <!-- Default -->
    <div class="col-12">
      <div class="card">
        <div class="card-body">
          <h5 class="text-dark bg-light fw-medium fs-4 mb-3 p-3 rounded-3"> 
            <span class="badge badge-center rounded-3 bg-dark text-white me-1 align-middle fw-bold">1</span>
            Select Ticket
          </h5>
          <div class="row g-0">
            <div class="col-md-12 row g-0 align-items-center p-2 pb-3 border-1 border-bottom border-secondary">
              <div class="col-6 fw-bold fs-5 list-ticket">
                List Ticket
              </div>
              <div class="col-6 text-end">
                <button class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#selectDate">Select Other Date</button>
              </div>
            </div>
          </div>
          <section id="list-ticket-container">
            {% partial 'booking/list_ticket' tickets=tickets allocations=allocations rateplans=rateplans %}
          </section>
        </div>
      </div>
    </div>
    <!-- /Default -->


    <!-- end recent bookings -->

  </div>
</div>
<!-- / Content -->



<style>
  .w-md-100{
    width: 50%;
  }
  @media (max-width: 678px) {
    .w-md-100{
      width: 100%;
    }
  }
</style>

<!-- js -->
{% put scripts %}
<script type="text/javascript">
  document.addEventListener('DOMContentLoaded', function () {
    const selectDate = new bootstrap.Modal(document.getElementById('selectDate'));
    selectDate.show();
  });

  $("#arrival-date").flatpickr({
    enableTime: false,
    dateFormat: "Y-m-d",
    defaultDate: new Date(),
  });


  $(document).ready(function () {
    const $dataSaveInput = $('input[name="data_save"]');

    function updateDataSave() {
      const dataSave = $('.person').map(function () {
        const $input = $(this);
        return {
          rateplan_id: $input.data('rateplan'),
          price: $input.data('price'),
          person: $input.data('person') 
        };
      }).get();
      $dataSaveInput.val(JSON.stringify(dataSave));
    }

    $('.btn-min-person').on('click', function () {
      const $input = $(this).siblings('input[name="person"]');
      let currentValue = parseInt($input.val(), 10) || 0;

      if (currentValue > 0) {
        currentValue -= 1;
        $input.val(currentValue); 
        $input.data('person', currentValue); 
        updateDataSave(); 
      }
    });

    $('.btn-plus-person').on('click', function () {
      const $input = $(this).siblings('input[name="person"]'); 
      let currentValue = parseInt($input.val(), 10) || 0;

      currentValue += 1;
      $input.val(currentValue); 
      $input.data('person', currentValue); 
      updateDataSave(); 
    });

    $('.person').on('input', function () {
      let currentValue = parseInt($(this).val(), 10) || 0;

      if (currentValue < 0) {
        currentValue = 0; 
        $(this).val(currentValue);
      }
      $(this).data('person', currentValue); 
      updateDataSave(); 
    });
  });




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