title = "Add Ticket"
url = "/ticket/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\Blog;
  use Yuren\BaliTiket\Models\Addon;

  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['addons'] = Addon::where('vendor_id', $user->vendor)->get();

      $this['blogs'] = Blog::orderBy('created_at', 'desc')->where('published', 1)->get();
    } 

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

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

    $query = new Ticket();
    $query->vendor_id = Input::get('vendor');
    $query->blog_id = Input::get('blog');
    $query->name = Input::get('name');
    $query->slug = Input::get('slug');
    $query->description = Input::get('description');
    $query->short_desc = Input::get('short_desc');
    $query->highlight = Input::get('highlight');
    $query->start_time = Input::get('start_time');
    $query->end_time = Input::get('end_time');
    $query->cancellation = Input::get('cancellation');
    $query->terms = Input::get('terms');
    $query->availability = Input::get('availability');
    $query->images = Input::file('images');
    $query->other_img = Input::file('other_img');
    $query->created_at = $dateNow;
    
    //published
    if(Input::get('published') == 'on'){
      $query->published = 1;
    } else {
      $query->published = 0;
    }

    //addon
    $addons = Input::get('Ticket')['addons'];
    $formattedAddons = [];
    foreach ($addons as $addon) {
      $formattedAddons[] = ['addon' => $addon['addon'], 'type' => $addon['type'], 'cost' => $addon['cost']];
    }
    $query->addons = $formattedAddons;

    //inclusion
    $items = Input::get('Ticket')['inclusion'];
    $formattedItems = [];
    foreach ($items as $item) {
      $formattedItems[] = ['item' => $item['item']];
    }
    $query->inclusion = $formattedItems;

    //facilities
    $names = Input::get('Ticket')['facilities'];
    $formattedItems = [];
    foreach ($names as $name) {
      $formattedItems[] = ['name' => $name['name']];
    }
    $query->facilities = $formattedItems;

    $location = [
    'address' => Input::get('address'),
    'address_link' => Input::get('address_link')
    ];
    $query->location = $location;

    $query->save();

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

    // Redirect to the product 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">Add Ticket</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">Ticket Details</span>
                <span class="bs-stepper-subtitle">Add Product Details</span>
              </span>
            </button>
          </div>
          <div class="line">
            <i class="ti ti-chevron-right"></i>
          </div>
          <div class="step" data-target="#pricing">
            <button type="button" class="step-trigger">
              <span class="bs-stepper-circle">2</span>
              <span class="bs-stepper-label">
                <span class="bs-stepper-title">Add On</span>
                <span class="bs-stepper-subtitle">Add Add On</span>
              </span>
            </button>
          </div>
          <div class="line">
            <i class="ti ti-chevron-right"></i>
          </div>
          <div class="step" data-target="#inclusion">
            <button type="button" class="step-trigger">
              <span class="bs-stepper-circle">3</span>
              <span class="bs-stepper-label">
                <span class="bs-stepper-title">Inclusion</span>
                <span class="bs-stepper-subtitle">Add inclusions</span>
              </span>
            </button>
          </div>
          <div class="line">
            <i class="ti ti-chevron-right"></i>
          </div>
          <div class="step" data-target="#facilities">
            <button type="button" class="step-trigger">
              <span class="bs-stepper-circle">4</span>
              <span class="bs-stepper-label">
                <span class="bs-stepper-title">Facilities</span>
                <span class="bs-stepper-subtitle">Add facilities</span>
              </span>
            </button>
          </div>
          <div class="line">
            <i class="ti ti-chevron-right"></i>
          </div>
          <div class="step" data-target="#images">
            <button type="button" class="step-trigger">
              <span class="bs-stepper-circle">5</span>
              <span class="bs-stepper-label">
                <span class="bs-stepper-title">Images</span>
                <span class="bs-stepper-subtitle">Add images</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="vendor" 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 ticket</span>
                  </label>
                </div>
                <div class="col-sm-6 mb-2">
                  <label class="form-label" for="name">Ticket Name</label>
                  <input type="text" name="name" id="name" class="form-control" placeholder="Ticket 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="blog">Blog Title</label>
                  <select class="select2" name="blog" required id="blog">
                    <option label=" " value="" disabled selected></option>
                    {% for blog in blogs %}
                    <option value="{{blog.id}}">{{blog.title}}</option>
                    {% endfor %}
                  </select>
                </div>

                <div class="col-sm-6 mb-2">
                  <label class="form-label" for="cancellation">Cancellation Policy</label>
                  <select class="select2" name="cancellation" id="cancellation">
                    <option label=" " disabled></option>
                    <option value="refundable">refundable</option>
                    <option value="non-refundable">non-refundable</option>
                    <option value="1 day before arrival">1 day before arrival</option>
                    <option value="2 days before arrival">2 days before arrival</option>
                    <option value="3 days before arrival">3 days before arrival</option>
                  </select>
                </div>

                <div class="col-sm-12 mb-2">
                  <label class="form-label" for="short-desc">Short Description</label>
                  <textarea class="form-control" id="short-desc" name="short_desc" rows="4"></textarea>
                </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-sm-12 mb-2">
                  <label class="form-label" for="highlight">Highlight</label>
                  <div class="">
                    <div id="highlight-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="highlight-editor">
                    </div>
                    <input type="hidden" name="highlight" id="highlight-input">
                  </div>
                </div>

                <div class="col-sm-12 mb-2">
                  <label class="form-label" for="terms">Terms & Conditions</label>
                  <div class="">
                    <div id="terms-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="terms-editor">
                    </div>
                    <input type="hidden" name="terms" id="terms-input">
                  </div>
                </div>

                <div class="col-sm-12 col-12 mb-2">
                  <label class="form-label" for="">Availability per Day</label>
                  <input type="text" class="form-control " id="availability" name="availability" placeholder="Enter Availability" />
                </div>

                <div class="col-sm-6 col-6 mb-2">
                  <label for="flatpickr-time" class="form-label">Start Session</label>
                  <input type="text" class="form-control" id="flatpickr-time" placeholder="HH:MM" name="start_time" />
                </div>

                <div class="col-sm-6 col-6 mb-2">
                  <label for="flatpickr-time" class="form-label">End Session</label>
                  <input type="text" class="form-control" id="flatpickr-time-2" placeholder="HH:MM" name="end_time" />
                </div>

                <div class="col-sm-12 mb-2">
                  <label class="form-label" for="address">Address</label>
                  <textarea class="form-control" id="address" name="address" rows="4"></textarea>
                </div>

                <div class="col-sm-12 mb-2">
                  <label class="form-label" for="address_link">Address Link</label>
                  <textarea class="form-control" id="address_link" name="address_link" rows="2"></textarea>
                </div>

                <div class="col-12 d-flex justify-content-between">
                  <button type="button" class="btn btn-label-secondary btn-prev" disabled>
                    <i class="ti ti-arrow-left me-sm-1 me-0"></i>
                    <span class="align-middle d-sm-inline-block d-none">Previous</span>
                  </button>
                  <button type="button" class="btn btn-primary btn-next">
                    <span class="align-middle d-sm-inline-block d-none me-sm-1">Next</span>
                    <i class="ti ti-arrow-right"></i>
                  </button>
                </div>
              </div>
            </div>

            <!-- pricing -->
            <div id="pricing" class="content">
              <div class="row g-3">

                <div class="col-12 mb-3">
                  <div class="form-group">
                    <label for="items" class="mb-2">List Add On</label>
                    <div id="repeater-addon">
                      <div class="row g-0 mb-3 input-addon">
                        <div class="col-md-4 pe-md-3">
                          <select name="Ticket[addons][0][addon]" class="form-control">
                            <option disabled selected>Choose Add On</option>
                            {% for addon in addons %}
                            <option value="{{addon.id}}">{{addon.name}}</option>
                            {% endfor %}
                          </select>
                        </div>
                        <div class="col-md-3 pe-md-3">
                          <select name="Ticket[addons][0][type]" class="form-control">
                            <option disabled selected>Choose Type Add On</option>
                            <option value="Per Person">Per Person</option>
                            <option value="Combo">Combo</option>
                          </select>
                        </div>
                        <div class="col-md-3 pe-md-3">
                          <input type="text" name="Ticket[addons][0][cost]" value="" class="form-control" placeholder="Enter cost">
                        </div>
                        <div class="col-md-2 ps-md-3">
                          <button type="button" class="btn btn-danger remove-addon">Remove</button>
                        </div>
                      </div>  
                    </div>
                    <button type="button" class="btn btn-primary" id="add-addon">Add Item</button>
                  </div>
                </div>

              </div>
              <div class="row g-3">

                <div class="col-12 d-flex justify-content-between">
                  <button type="button" class="btn btn-label-secondary btn-prev">
                    <i class="ti ti-arrow-left me-sm-1 me-0"></i>
                    <span class="align-middle d-sm-inline-block d-none">Previous</span>
                  </button>
                  <button type="button" class="btn btn-primary btn-next">
                    <span class="align-middle d-sm-inline-block d-none me-sm-1">Next</span>
                    <i class="ti ti-arrow-right"></i>
                  </button>
                </div>
              </div>
            </div>

            <!-- inclusions -->
            <div id="inclusion" class="content">
              <div class="row g-3">
                <!-- Form Repeater -->
                <div class="col-12 mb-3">
                  <div class="form-group">
                    <label for="items" class="mb-2">List Inclusion</label>
                    <div id="repeater">
                      <div class="input-group mb-2">
                        <input type="text" name="Ticket[inclusion][0][item]" class="form-control" placeholder="Enter inclusion">
                        <div class="input-group-append ps-2">
                          <button type="button" class="btn btn-danger remove">Remove</button>
                        </div>
                      </div>
                    </div>
                    <button type="button" class="btn btn-primary" id="add">Add Item</button>
                  </div>
                </div>
                <!-- /Form Repeater -->

                <div class="col-12 d-flex justify-content-between">
                  <button type="button" class="btn btn-label-secondary btn-prev">
                    <i class="ti ti-arrow-left me-sm-1 me-0"></i>
                    <span class="align-middle d-sm-inline-block d-none">Previous</span>
                  </button>
                  <button type="button" class="btn btn-primary btn-next">
                    <span class="align-middle d-sm-inline-block d-none me-sm-1">Next</span>
                    <i class="ti ti-arrow-right"></i>
                  </button>
                </div>
              </div>
            </div>

            <!-- facilities -->
            <div id="facilities" class="content">
              <div class="row g-3">
                <!-- Form Repeater -->
                <div class="col-12 mb-3">
                  <div class="form-group">
                    <label for="items" class="mb-2">List Facilities</label>
                    <div id="repeater-facilities">
                      <div class="input-group mb-2">
                        <input type="text" name="Ticket[facilities][0][name]" class="form-control" placeholder="Enter facilities">
                        <div class="input-group-append ps-2">
                          <button type="button" class="btn btn-danger remove-facilities">Remove</button>
                        </div>
                      </div>
                    </div>
                    <button type="button" class="btn btn-primary" id="add-facilities">Add Item</button>
                  </div>
                </div>
                <!-- /Form Repeater -->

                <div class="col-12 d-flex justify-content-between">
                  <button type="button" class="btn btn-label-secondary btn-prev">
                    <i class="ti ti-arrow-left me-sm-1 me-0"></i>
                    <span class="align-middle d-sm-inline-block d-none">Previous</span>
                  </button>
                  <button type="button" class="btn btn-primary btn-next">
                    <span class="align-middle d-sm-inline-block d-none me-sm-1">Next</span>
                    <i class="ti ti-arrow-right"></i>
                  </button>
                </div>
              </div>
            </div>

            <!-- images -->
            <div id="images" class="content">
              <div class="row g-3">
                <div class="col-sm-12 col-12 mb-2">
                  <label class="form-label" for="images">Main Images</label>
                  <div class="w-100">
                    <input name="images[]" type="file" class="form-control" multiple />
                  </div>
                </div>

                <div class="col-sm-12 col-12 mb-2">
                  <label class="form-label" for="images">Other Images</label>
                  <div class="w-100">
                    <input name="other_img[]" type="file" class="form-control" multiple />
                  </div>
                </div>

                <div class="col-12 d-flex justify-content-between">
                  <div>
                    <button type="button" class="btn btn-label-secondary btn-prev">
                      <i class="ti ti-arrow-left me-sm-1 me-0"></i>
                      <span class="align-middle d-sm-inline-block d-none">Previous</span>
                    </button>
                  </div>
                  <div>
                    <a href="{{url('ticket')}}" class="btn btn-secondary me-2">Cancel</a>
                    <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>
  /* Custom CSS to display uploaded images side-by-side */
  .upload-facilities .filepond--item {
    width: calc((100%/4) - 0.5em);
  }

  .upload-map .filepond--item {
    width: calc((100%/3) - 0.5em);
  }

  .filepond--credits{
    display: none!important;
  }
  .filepond--panel-root{
    background-color: white!important;
    border: 2px dashed lightgrey;
    border-radius: 5px;
  }
  .filepond--root .filepond--drop-label label{
    cursor: pointer!important;
  }


  .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 productName = this.value;
    var slug = productName
    .toLowerCase()
    .replace(/ /g, '-')           // Replace spaces with -
    .replace(/[^\w-]+/g, '');     // Remove all non-word chars
    document.getElementById('slug').value = slug;
  });

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


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

    var quill2 = new Quill('#highlight-editor', {
      modules: {
        toolbar: '#highlight-toolbar'
      },
      theme: 'snow'
    });

    var quill3 = new Quill('#terms-editor', {
      modules: {
        toolbar: '#terms-toolbar'
      },
      theme: 'snow'
    });

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

    var highlightInput = document.getElementById('highlight-input');

    var termsInput = document.getElementById('terms-input');

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

    quill2.on('text-change', function() {
      highlightInput.value = quill2.root.innerHTML;
    });

    quill3.on('text-change', function() {
      termsInput.value = quill3.root.innerHTML;
    });
  });

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

    highlightInput.value = quill2.root.innerHTML;
    
    termsInput.value = quill3.root.innerHTML;
  });


  // Add On Repeater
  // ! Using jQuery each loop to add dynamic id and class for inputs. You may need to improve it based on form fields.
  // -----------------------------------------------------------------------------------------------------------------
  $(document).ready(function(){
    {% set keys = tickets.addons|keys %}
    {% set last_key = keys|last + 1 %}

    let itemIndex = {{last_key}};
    

    $("#add-addon").click(function(){
      $("#repeater-addon").append(
        `<div class="row g-0 mb-3 input-addon">
        <div class="col-md-4 pe-md-3">
        <select name="Ticket[addons][${itemIndex}][addon]" class="form-control">
        <option disabled selected>Choose Add On</option>
        {% for addon in addons %}
        <option value="{{addon.id}}">{{addon.name}}</option>
        {% endfor %}
        </select>
        </div>
        <div class="col-md-3 pe-md-3">
        <select name="Ticket[addons][${itemIndex}][type]" class="form-control">
        <option disabled selected>Choose Type Add On</option>
        <option value="Per Person">Per Person</option>
        <option value="Combo">Combo</option>
        </select>
        </div>
        <div class="col-md-3 pe-md-3">
        <input type="text" name="Ticket[addons][${itemIndex}][cost]" value="" class="form-control" placeholder="Enter cost">
        </div>
        <div class="col-md-2 ps-md-3">
        <button type="button" class="btn btn-danger remove-addon">Remove</button>
        </div>
        </div>`
        );
      itemIndex++;
    });

    $(document).on('click', '.remove-addon', function(){
      $(this).closest('.input-addon').remove();
    });
  }); 


  // Inclusion Repeater
  // ! Using jQuery each loop to add dynamic id and class for inputs. You may need to improve it based on form fields.
  // -----------------------------------------------------------------------------------------------------------------
  $(document).ready(function(){
    let itemIndex = 1;

    $("#add").click(function(){
      $("#repeater").append(
        `<div class="input-group mb-2">
        <input type="text" name="Ticket[inclusion][${itemIndex}][item]" class="form-control" placeholder="Enter inclusion">
        <div class="input-group-append ps-2">
        <button type="button" class="btn btn-danger remove">Remove</button>
        </div>
        </div>`
        );
      itemIndex++;
    });

    $(document).on('click', '.remove', function(){
      $(this).closest('.input-group').remove();
    });
  });


  // Facilities Repeater
  // ! Using jQuery each loop to add dynamic id and class for inputs. You may need to improve it based on form fields.
  // -----------------------------------------------------------------------------------------------------------------
  $(document).ready(function(){
    let itemIndex = 1;

    $("#add-facilities").click(function(){
      $("#repeater-facilities").append(
        `<div class="input-group mb-2">
        <input type="text" name="Ticket[facilities][${itemIndex}][name]" class="form-control" placeholder="Enter facilities">
        <div class="input-group-append ps-2">
        <button type="button" class="btn btn-danger remove-facilities">Remove</button>
        </div>
        </div>`
        );
      itemIndex++;
    });

    $(document).on('click', '.remove-facilities', function(){
      $(this).closest('.input-group').remove();
    });
  });


  document.addEventListener('DOMContentLoaded', function() {
    var discountCheckbox = document.querySelector('input[name="discount"]');
    var percentageContainer = document.getElementById('percentage-container');

    // Function to toggle the visibility of the percentage container
    function togglePercentageContainer() {
      if (discountCheckbox.checked) {
        percentageContainer.style.display = 'block';
      } else {
        percentageContainer.style.display = 'none';
      }
    }

    // Initial check to set the correct state on page load
    togglePercentageContainer();

    // Add event listener to the checkbox
    discountCheckbox.addEventListener('change', togglePercentageContainer);
  });
  

  (function () {
  // Flat Picker
  // --------------------------------------------------------------------
    const flatpickrTime = document.querySelector('#flatpickr-time'),
    flatpickrTime2 = document.querySelector('#flatpickr-time-2');

  // Time
    if (flatpickrTime) {
      flatpickrTime.flatpickr({
        enableTime: true,
        noCalendar: true
      });
    }

    if (flatpickrTime2) {
      flatpickrTime2.flatpickr({
        enableTime: true,
        noCalendar: true
      });
    }

  })();

  // price
  document.addEventListener('DOMContentLoaded', function() {
    var numeralMask = document.getElementById('adult-price');
    var numeralMask2 = document.getElementById('children-price');
    var numeralMask3 = document.getElementById('infant-price');

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

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

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

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


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