title = "Edit Booking"
url = "/booking/:id/edit/2"
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\Allocation;
  use Yuren\BaliTiket\Models\Bookings;

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

  function onStart()
  {
    $user = Auth::getUser();
    if ($user) {
      $ticket_id = Input::post('ticket');
      $arrival_date = Input::post('arrival_date');
      $this['arrival_date'] = Input::post('arrival_date');

      $this['vendor'] = $user->vendor;

      $this['bookings'] = Bookings::where('id', $this->param('id'))->first();

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

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

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

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

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

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

    <!-- 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">2</span>
            Detail Information
          </h5>
          <form action="{{url('booking/'~bookings.id~'/edit/3')}}" method="POST" enctype="multipart/form-data">
            <input type="hidden" value="{{vendors.id}}" name="vendor">
            <input type="hidden" value="{{vendors.slug}}" name="slug">
            <input type="hidden" value="{{arrival_date}}" name="arrival_date">
            <input type="hidden" value="{{tickets.id}}" name="ticket">
            <input type="hidden" value="{{ allocation.checkAdultPrice(vendor, tickets.id, arrival_date|date('Y-m-d')) }}" name="adult_price">
            <input type="hidden" value="{{ allocation.checkChildrenPrice(vendor, tickets.id, arrival_date|date('Y-m-d')) }}" name="children_price">

            <div class="row g-0">
              <div class="col-md-12 p-2 pb-0">
                <div class="divider text-start">
                  <div class="divider-text">General Information</div>
                </div>
              </div>
              {% if tickets.adult_price != 0 %}
              <div class="col-sm-6 col-12 p-2">
                <label class="form-label" for="adult">Adult<span class="text-danger">*</span></label>
                <input required type="number" min="1" placeholder="Adult" id="adult" value="{{ bookings.adult }}" class="form-control rounded-1" name="adult">
              </div>
              {% endif %}
              {% if tickets.children_price != 0 %}
              <div class="col-sm-6 col-12 p-2">
                <label class="form-label" for="children">Children<span class="text-danger">*</span></label>
                <input required type="number" min="0" placeholder="Children" id="children" value="{{ bookings.children }}" class="form-control rounded-1" name="children">
              </div>
              {% endif %}
              <div class="col-md-12 p-2 pb-0">
                <div class="divider text-start">
                  <div class="divider-text">Guest Information</div>
                </div>
              </div>
              <div class="col-sm-6 col-12 p-2">
                <label for="" class="form-label">Guest Name<span class="text-danger">*</span></label>
                <div class="row g-0">
                  <div class="col-6 pe-2">
                    <input type="text" class="form-control" id="first-name" placeholder="First name" value="{{ bookings.firstname }}" name="firstname" />
                  </div>
                  <div class="col-6 ps-2">
                    <input type="text" class="form-control" id="last-name" placeholder="Last name" value="{{ bookings.lastname }}" name="lastname" />
                  </div>
                </div>
              </div>
              <div class="col-sm-6 col-12 p-2">
                <label for="email" class="form-label">Email<span class="text-danger">*</span></label>
                <input type="email" class="form-control" id="email" value="{{ bookings.email }}" placeholder="Email" name="email" />
              </div>
              <div class="col-sm-6 col-12 p-2">
                <label for="phone-number" class="form-label">Phone Number<span class="text-danger">*</span></label>
                <input type="text" class="form-control" id="phone-number" value="{{ bookings.phone }}" placeholder="Phone number" name="phone" />
              </div>
              <div class="col-sm-6 col-12 p-2">
                <label for="country" class="form-label">Country<span class="text-danger">*</span></label>
                <select class="country-list select2" id="country" required name="country" onchange="filterStates(this.value)">
                  <option selected value="{{bookings.country}}">{{bookings.country}}</option>
                </select>
              </div>
            </div>
            <hr/>
            <div class="row g-0 justify-content-end">
              <div class="col-sm-12 col-12 p-2 d-flex justify-content-between">
                <button type="button" onclick="window.history.back()" class="btn btn-sm btn-secondary rounded-3 py-2 px-5"><i class="fa fa-arrow-left align-middle fs-tiny me-2"></i> Previous</button>
                <button type="submit" class="btn btn-sm btn-primary rounded-3 py-2 px-5">Next <i class="fa fa-arrow-right align-middle fs-tiny ms-2"></i></button>
              </div>
            </div>
          </form>
        </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 src="https://unpkg.com/lokijs@^1.5/build/lokijs.min.js"></script>

<script type="text/javascript">
  $("#arrival-date").flatpickr({
    enableTime: false,
    dateFormat: "Y-m-d",
  });

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

  var db = new loki('csc.db');

  const countriesJSON = 'https://raw.githubusercontent.com/dr5hn/countries-states-cities-database/master/countries.json';

  async function initializeData() {
    var countries = db.getCollection("countries");
    if (!countries) {
      countries = db.addCollection('countries');
      await fetch(countriesJSON)
      .then(response => response.json())
      .then(async (data) => {
        await data.forEach((c) => {
          countries.insert(c);
          $('.country-list').append(`
            <option value="${c.name}">${c.name}</option>
            `);
        });
      });
    }
  }

  initializeData();

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