@extends('layouts/blankLayout')

@section('title', 'Guest Entry')

@section('page-style')
<!-- Page -->
<link rel="stylesheet" href="{{asset('assets/vendor/css/pages/page-auth.css')}}">
<style>
  .authentication-wrapper.authentication-basic .authentication-inner {
    max-width: 75%;
}
</style>
@endsection

@section('content')
<div class="position-relative" style="background-color: #192360;">
  <div class="authentication-wrapper authentication-basic container-p-y">
    <div class="authentication-inner py-4">

      <!-- Login -->
      <div class="card p-2">
        <!-- Logo -->
        <div class="app-brand justify-content-center mt-5">
          <a href="{{url('/')}}" class="app-brand-link gap-2">
            <span class="app-brand-logo demo"><img src="/assets/img/logo/Logo_with_bg.png" /></span>
            <br/>
          </a>
        </div>
        <!-- /Logo -->

        <div class="card-body mt-2">
          <div style="display: grid; place-items: center;">
            <h4 class="mb-2">Welcome to {{ env('APP_NAME') }}! 👋</h4>
            <p class="mb-4">Powered by {{config('variables.templateName')}}.</p>
            <p class="mb-4"><b>Get guest details.</b></p>
          </div>

          @if(session()->has('success'))
              <div class="alert alert-success">
                  {{ session()->get('success') }}
              </div>
          @endif

          @if(session()->has('error'))
            <div class="alert alert-danger">
                {{ session()->get('error') }}
            </div>
          @endif

          @if($errors->any())
            <div class="alert alert-danger">
              @foreach ($errors->all() as $error)
                  <li>{{ $error }}</li>
              @endforeach
            </div>
          @endif

          {!! Form::open(['url' => "/guest-entry", 'class' => 'p-4 progress-form', 'id' => 'progress-form', 'lang' => 'en', 'files' => true]) !!}
            @csrf
            <div class="col-md">
              <div class="card mb-4">
                <h5 class="card-header">Guest Code</h5>
                <div class="card-body">
                  <div class="row">
                    <div class="otp-input-container d-flex justify-content-center">
                        @for ($i = 1; $i <= 6; $i++)
                            <input type="text" 
                                    name="guest_code[]" 
                                    id="otp-{{ $i }}" 
                                    maxlength="1" 
                                    class="form-control otp-input mx-1 text-center" 
                                    oninput="validateInput(this); moveToNext(this, '{{ $i }}')" 
                                    required>
                        @endfor
                    </div>

                  </div>
                </div>
              </div>
            </div>

            <div class="mb-3">
              {!! Form::button('Proceed', ['type' => 'submit', 'class' => 'btn btn-primary d-grid w-100']) !!}
            </div>
          {!! Form::close() !!}

        </div>
      </div>
      <!-- /Login -->
      <img src="{{asset('assets/img/illustrations/tree-3.png')}}" alt="auth-tree" class="authentication-image-object-left d-none d-lg-block">
      <img src="{{asset('assets/img/illustrations/auth-basic-mask-light.png')}}" style="background-color: #CA9B62;" class="authentication-image d-none d-lg-block" alt="triangle-bg">
      <img src="{{asset('assets/img/illustrations/tree.png')}}" alt="auth-tree" class="authentication-image-object-right d-none d-lg-block">
    </div>
  </div>
</div>
@endsection

<script>

    function moveToNext(element, index) {
        if (element.value.length === 1 && index < 6) {
            // Move to the next input if the current one is filled
            document.getElementById('otp-' + (parseInt(index) + 1)).focus();
        } else if (element.value.length === 0 && index > 1) {
            // Move to the previous input if the current one is empty
            document.getElementById('otp-' + (parseInt(index) - 1)).focus();
        }
    }

    function validateInput(element) {
        // Allow only capital letters (A-Z) and numbers (0-9)
        const regex = /[^A-Z0-9]/gi;
        element.value = element.value.toUpperCase().replace(regex, '');
    }

</script>