title = "Create Rateplan"
url = "/ticket/rateplan/:id?/add"
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 Winter\Storm\Auth\AuthManager;
  use Auth;

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

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

      $this['ticket'] = Ticket::where('id', $this->param('id'))->first();
    } 

    $this['tickets'] = Ticket::make();
  }

  function onSave()
  {
    date_default_timezone_set('Asia/Singapore');
    $dateNow = date('Y-m-d H:i:s');

    $query = new Rateplan();
    $query->name = Input::get('name');
    $query->slug = Input::get('slug');
    $query->min_purchase = Input::get('min_purchase');
    $query->max_purchase = Input::get('max_purchase');
    $query->ticket_id = Input::get('ticket_id');
    $query->vendor_id = Input::get('vendor_id');
    $query->fixed_price = Input::get('fixed_price');
    $query->description = Input::get('description');
    
    //published
    if(Input::get('published') == 'on'){
      $query->published = 1;
    } else {
      $query->published = 0;
    }

    $query->created_at = $dateNow;

    $query->save();

    // Set flash message
    Session::flash('success', 'Rateplan has been added successfully.');

    // Redirect to the location page
    return redirect('/ticket');
  }
?>
==
<!-- Content -->

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

    <!-- recent bookings -->
    

    <!-- Default Wizard -->
    <div class="col-12 mb-4">
      <h5 class="text-light fw-medium">Create Rateplan for {{ticket.name}}</h5>

      <div class="bs-stepper wizard-numbered mt-2">
        <div class="bs-stepper-header">
          <div class="step" data-target="#details">
            <button type="button" class="step-trigger">
              <span class="bs-stepper-circle">1</span>
              <span class="bs-stepper-label">
                <span class="bs-stepper-title">Rateplan Details</span>
                <span class="bs-stepper-subtitle">Add Rateplan Details</span>
              </span>
            </button>
          </div>
        </div>

        <div class="bs-stepper-content">
          <form data-request="onSave" method="get" enctype="multipart/form-data" id="my-form">

            <input type="hidden" name="ticket_id" value="{{ticket.id}}">
            <input type="hidden" name="vendor_id" value="{{vendors.id}}">

            <!-- details -->
            <div id="details" class="content">
              <div class="row g-3">
                <div class="col-sm-12 mb-2">
                  <label class="switch">
                    <input type="checkbox" name="published" id="published" class="switch-input" />
                    <span class="switch-toggle-slider">
                      <span class="switch-on"></span>
                      <span class="switch-off"></span>
                    </span>
                    <span class="switch-label">Publish this rateplan</span>
                  </label>
                </div>
                
                <div class="col-sm-6 mb-2">
                  <label class="form-label" for="name">Rateplan Name</label>
                  <input type="text" name="name" id="name" class="form-control" placeholder="Rateplan Name" />
                </div>

                <div class="col-sm-6 mb-2">
                  <label class="form-label" for="slug">Slug</label>
                  <input type="text" name="slug" id="slug" class="form-control" placeholder="Slug" />
                </div>

                <div class="col-sm-6 mb-2">
                  <label class="form-label" for="min-purchase">Minimum Purchase</label>
                  <input type="number" name="min_purchase" id="min-purchase" class="form-control" placeholder="Minimum Purchase" />
                </div>

                <div class="col-sm-6 mb-2">
                  <label class="form-label" for="max-purchase">Maximum Purchase</label>
                  <input type="number" name="max_purchase" id="max-purchase" class="form-control" placeholder="Maximum Purchase" />
                </div>

                <div class="col-sm-12 mb-2">
                  <label class="form-label" for="numeral-mask">Price per Person</label>
                  <input type="text" class="form-control numeral-mask" id="fixed-price" value="0" name="fixed_price" placeholder="Enter Price" />
                </div>

                <div class="col-sm-12 mb-2">
                  <label class="form-label" for="description">Description</label>
                  <div class="">
                    <div id="description-toolbar">
                      <span class="ql-formats">
                        <select class="ql-font"></select>
                        <select class="ql-size"></select>
                      </span>
                      <span class="ql-formats">
                        <button class="ql-bold"></button>
                        <button class="ql-italic"></button>
                        <button class="ql-underline"></button>
                        <button class="ql-strike"></button>
                      </span>
                      <span class="ql-formats">
                        <select class="ql-color"></select>
                        <select class="ql-background"></select>
                      </span>
                      <span class="ql-formats">
                        <button class="ql-script" value="sub"></button>
                        <button class="ql-script" value="super"></button>
                      </span>
                      <span class="ql-formats">
                        <button class="ql-header" value="1"></button>
                        <button class="ql-header" value="2"></button>
                        <button class="ql-blockquote"></button>
                        <button class="ql-code-block"></button>
                      </span>
                    </div>
                    <div id="description-editor">
                    </div>
                    <input type="hidden" name="description" id="description-input">
                  </div>
                </div>

                <div class="col-12 d-flex justify-content-between">
                  <div>
                    <a href="{{url('ticket')}}" class="btn btn-secondary me-2">Cancel</a>
                  </div>
                  <div>
                    <button type="submit" class="btn btn-success btn-submit">Save</button>
                  </div>
                </div>
              </div>
            </div>

          </form>
        </div>
      </div>
    </div>
    <!-- /Default Wizard -->


    <!-- 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">

  'use strict';

  // slug generate
  document.getElementById('name').addEventListener('input', function() {
    var locationName = this.value;
    var slug = locationName
    .toLowerCase()
    .replace(/ /g, '-')           // Replace spaces with -
    .replace(/[^\w-]+/g, '');     // Remove all non-word chars
    document.getElementById('slug').value = slug;
  });



  document.addEventListener('DOMContentLoaded', function() {
    var numeralMask = document.getElementById('fixed-price');

    if (numeralMask) {
      new Cleave(numeralMask, {
        numeral: true,
        numeralThousandsGroupStyle: 'thousand'
      });
    }

    // Remove commas before form submission
    document.querySelector('form').addEventListener('submit', function(event) {
      numeralMask.value = numeralMask.value.replace(/,/g, '');
    });
  });


  // editor
  document.addEventListener('DOMContentLoaded', function() {
    var quill = new Quill('#description-editor', {
      modules: {
        toolbar: '#description-toolbar'
      },
      theme: 'snow'
    });

    // Simpan referensi ke input tersembunyi
    var descriptionInput = document.getElementById('description-input');

    // Update input tersembunyi saat Quill berubah
    quill.on('text-change', function() {
      descriptionInput.value = quill.root.innerHTML;
    });
  });

  // collect data form editor
  document.querySelector('form').addEventListener('submit', function() {
    descriptionInput.value = quill.root.innerHTML;
  });



  (function () {
    // bs-stepper atau nav tab
    const wizardNumbered = document.querySelector('.wizard-numbered'),
    wizardNumberedBtnNextList = [].slice.call(wizardNumbered.querySelectorAll('.btn-next')),
    wizardNumberedBtnPrevList = [].slice.call(wizardNumbered.querySelectorAll('.btn-prev')),
    wizardNumberedBtnSubmit = wizardNumbered.querySelector('.btn-submit');

    if (typeof wizardNumbered !== undefined && wizardNumbered !== null) {
      const numberedStepper = new Stepper(wizardNumbered, {
        linear: false
      });
      if (wizardNumberedBtnNextList) {
        wizardNumberedBtnNextList.forEach(wizardNumberedBtnNext => {
          wizardNumberedBtnNext.addEventListener('click', event => {
            numberedStepper.next();
          });
        });
      }
      if (wizardNumberedBtnPrevList) {
        wizardNumberedBtnPrevList.forEach(wizardNumberedBtnPrev => {
          wizardNumberedBtnPrev.addEventListener('click', event => {
            numberedStepper.previous();
          });
        });
      }
      if (wizardNumberedBtnSubmit) {
        wizardNumberedBtnSubmit.addEventListener('click', event => {
          alert('Submitted..!!');
        });
      }
    }
  })();


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