@extends('layouts/blankLayout')

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

@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 {{ $community->name }}! 👋</h4>
            <p class="mb-4">Powered by {{config('variables.templateName')}}.</p>
            <p class="mb-4"><b>Please fill the details and make payment.</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-form/$community->id", 'class' => 'p-4 progress-form', 'id' => 'progress-form', 'lang' => 'en', 'files' => true]) !!}
            @csrf
            <input type="hidden" value="{{ $community->id }}" name="community_id">
            <div class="col-md">
              <div class="card mb-4">
                <h5 class="card-header">Personal Information</h5>
                <div class="card-body">
                  <div class="row">
                    <div class="col-sm-6">
                        {!! Form::label('name', 'Full Name', ['class' => 'form-label']) !!}
                        {!! Form::text('name', $guest->name, ['class' => 'form-control', 'id' => 'name', 'placeholder' => 'John Bell', 'required']) !!}
                    </div>

                    <div class="col-sm-6">
                        {!! Form::label('email', 'Email Address', ['class' => 'form-label']) !!}
                        {!! Form::email('email', $guest->email, ['class' => 'form-control', 'id' => 'email', 'placeholder' => 'abc@xyz.com', 'required']) !!}
                    </div>

                    <div class="col-sm-6">
                        {!! Form::label('phone_number', 'Phone Number', ['class' => 'form-label']) !!}
                        {!! Form::tel('phone_number', $guest->phone_number, ['class' => 'form-control', 'id' => 'phone_number', 'placeholder' => '1231231231', 'required']) !!}
                    </div>

                    <div class="col-sm-6">
                      {!! Form::label('vehicle_plate_no', 'Vehicle Plate No', ['class' => 'form-label']) !!}
                      {!! Form::text('vehicle_plate_no', $guest->vehicle_plate_no, ['class' => 'form-control', 'id' => 'vehicle_plate_no', 'required']) !!}
                    </div>

                    <div class="col-sm-6">
                      {!! Form::label('parking_in', 'Vehicle In Time', ['class' => 'form-label']) !!}
                      {!! Form::input('datetime-local','parking_in', $guest->parking_in, ['class' => 'form-control', 'id' => 'parking_in', 'required']) !!}
                    </div>

                    <div class="col-sm-6">
                      {!! Form::label('parking_hour', 'Parking Hour', ['class' => 'form-label']) !!}
                      {!! Form::select('parking_hour', range(1, 100), 1, ['class' => 'form-control', 'id' => 'parking_hour', 'readonly', 'required']) !!}
                    </div>

                    <div class="col-sm-6">
                      {!! Form::label('parking_out', 'Vehicle Out Time', ['class' => 'form-label']) !!}
                      {!! Form::input('datetime-local','parking_out', now()->addHour()->format('Y-m-d\TH:i'), ['class' => 'form-control', 'id' => 'parking_out', 'onchange'=>'getHoursBetween()', 'required']) !!}
                    </div>

                    <div class="col-sm-6">
                      {!! Form::label('amount', 'Amount in ($)', ['class' => 'form-label']) !!}
                      <input type="hidden" value="{{ $community->guest_fees }}" id="hidden_amount" name="hidden_amount" min="0.01" step="0.01" required>
                      <div class="input-group">
                          <span class="input-group-text">$</span>
                          {!! Form::number('amount', $community->guest_fees, ['class' => 'form-control', 'id' => 'amount', 'readonly', 'min' => '0.01', 'step'=>'0.01', 'required']) !!}
                      </div>
                  </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="mb-3">
              {!! Form::button('Make Payment', ['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 src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    
    $(document).ready(function () {
      getHoursBetween();
    });
    function getHoursBetween() {

      var dateTimeStart = $("#parking_in").val();
      var dateTimeEnd = $("#parking_out").val();
      // Parse both date-time strings into Date objects
      const startDate = new Date(dateTimeStart);
      const endDate = new Date(dateTimeEnd);
      // Calculate the difference in milliseconds
      const diffInMs = endDate.getTime() - startDate.getTime();
      console.log(diffInMs);

      // Convert milliseconds to hours
      const hours = diffInMs / 3600000;

      $("#parking_hour").val(Math.ceil(hours));
      console.log(Math.ceil(hours));
      $("#amount").val($("#parking_hour").val() * $("#hidden_amount").val());
    }
  </script>