title = "Edit Guests"
url = "/guests-list/:id?/edit"
layout = "Dashboard"
is_hidden = 0

[session]
security = "user"
allowedUserGroups[] = "admin"
allowedUserGroups[] = "supplier"
redirect = "dashboard/login"
==
<?php
  use Yuren\BaliTiket\Models\Guests;
  use System\Models\File;

  use Winter\Storm\Auth\AuthManager;
  use Auth;
  use Illuminate\Support\Facades\Hash;

  function onStart()
  {
    $user = Auth::getUser();
    if ($user) {
      $this['guest'] = Guests::where('id', $this->param('id'))->first();
    } 
  }

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

    $query = Guests::where('id', $this->param('id'))->first();
    $query->firstname = Input::get('firstname');
    $query->lastname = Input::get('lastname');
    $query->username = Input::get('username');
    $query->email = Input::get('email');
    $query->phone = Input::get('phone');
    $query->country = Input::get('country');

    if(Input::get('password') != null){
      $query->password = Hash::make(Input::get('password'));
    } 
    
    //verified
    if(Input::get('verified') == 'on'){
      $query->verified = 1;
    } else {
      $query->verified = 0;
    }

    $query->updated_at = $dateNow;
    $query->save();

    Session::flash('success', 'Guest has been update successfully.');

    return redirect('/guests-list');
  }

//   public function onDeleteImg()
//   {
//     // Get the image ID from the post data
//     $imageId = post('id_img');

//     // Find the image and delete it
//     $image = File::find($imageId);
//     if ($image) {
//       $image->delete();
//     }

//     // Re-fetch the images
//     $category = Category::find($this->param('id'));
//     if (Input::post('type') == 'main'){
//       $images = $category->icon_desktop;
//     } 

//     if (Input::post('type') == 'other'){
//       $images = $category->icon_mobile;
//     } 

//     // Return the updated partial
//     if (Input::post('type') == 'main'){
//       return ['#main-img-container' => $this->renderPartial('category/icon_desktop', ['images' => $images])];
//     } 

//     if (Input::post('type') == 'other'){
//       return ['#other-img-container' => $this->renderPartial('category/icon_mobile', ['images' => $images])];
//     } 
//   }
?>
==
<!-- 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">Edit Guest</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">Guest Details</span>
                <span class="bs-stepper-subtitle">Edit Guest Details</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">2</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">

            <!-- 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="verified" id="verified" class="switch-input" {{ (guest.verified == 1) ? 'checked' : '' }} />
                    <span class="switch-toggle-slider">
                      <span class="switch-on"></span>
                      <span class="switch-off"></span>
                    </span>
                    <span class="switch-label">Verified this guest</span>
                  </label>
                </div>

                <div class="col-sm-6 mb-2">
                  <label class="form-label">First Name</label>
                  <input type="text" name="firstname" class="form-control" placeholder="First Name" value="{{ guest.firstname }}" />
                </div>

                <div class="col-sm-6 mb-2">
                  <label class="form-label">Last Name</label>
                  <input type="text" name="lastname" class="form-control" placeholder="Last Name" value="{{ guest.lastname }}" />
                </div>

                <div class="col-sm-6 mb-2">
                  <label class="form-label">Username</label>
                  <input type="text" name="username" class="form-control" placeholder="Username" value="{{ guest.username }}" />
                </div>

                <div class="col-sm-6 mb-2">
                  <label class="form-label">Email</label>
                  <input type="email" name="email" class="form-control" placeholder="Email" value="{{ guest.email }}" />
                </div>

                <div class="col-sm-6 mb-2">
                  <label class="form-label">Phone</label>
                  <input type="text" name="phone" class="form-control" placeholder="Phone" value="{{ guest.phone }}" />
                </div>

                <div class="col-sm-6 mb-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="{{guest.country}}">{{guest.country}}</option>
                    </select>
                </div>

                <div class="col-sm-6 mb-2">
                  <label class="form-label">New Password</label>
                  <input type="text" name="password" class="form-control" placeholder="New Password" value="" />
                </div>

                <div class="col-12 d-flex justify-content-end">
                    <button type="submit" class="btn btn-success btn-submit">Save</button>
                </div>
              </div>
            </div>

            <!-- facilities -->
            {# <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">Icon Desktop</label>

                  <div class="row g-0 w-100 mb-3 mt-2" id="main-img-container">
                    {% partial 'category/icon_desktop' images=categorys.icon_desktop %}
                  </div>

                  <div class="w-100">
                    <label class="mb-2">Upload New Images</label>
                    <input name="icon_desktop" type="file" class="form-control" />
                  </div>
                </div>

                <div class="col-sm-12 col-12 mb-2">
                  <label class="form-label" for="images">Icon Mobile</label>

                  <div class="row g-0 w-100 mb-3 mt-2" id="other-img-container">
                    {% partial 'category/icon_mobile' images=categorys.icon_mobile %}
                  </div>

                  <div class="w-100">
                    <label class="mb-2">Upload New Images</label>
                    <input name="icon_mobile" type="file" class="form-control" />
                  </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('category')}}" 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 -->

    <!-- modal delete main image  -->
    <div class="modal fade" id="delete-img1" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-body">
            <div class="ratio ratio-1x1">
              <img src="" class="w-100 h-100" style="object-fit: cover">
            </div>
          </div>
          <div class="modal-footer justify-content-between">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
            <form data-request="onDeleteImg" method="POST">
              <input type="hidden" name="id_img" value="">
              <input type="hidden" name="type" value="main">
              <button type="submit" class="btn btn-danger" data-bs-dismiss="modal">Delete</button>
            </form>
          </div>
        </div>
      </div>
    </div>
    <!-- end modal -->

    


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

  'use strict';

  (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..!!');
        });
      }
    }
  })();

    // 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/refs/heads/master/json/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 -->