@extends('layouts/blankLayout')

@section('title', 'Subscribe')

@section('page-style')
<!-- Page -->
<link rel="stylesheet" href="{{asset('assets/vendor/css/pages/page-auth.css')}}">
<style>
  /* Add some basic styling for the form */
  .container {
      width: 400px;
      margin: 50px auto;
  }
  input, button {
      margin-top: 10px;
      width: 100%;
      padding: 8px;
      box-sizing: border-box;
  }
  #card-element {
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 4px;
  }
</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="#" class="app-brand-link gap-2">
            {{-- <span class="app-brand-logo demo"><img src="/assets/img/logo/Logo_with_bg.png" /></span> --}}
            <br/>
            {{-- <span class="app-brand-text demo text-heading fw-semibold">{{config('variables.templateName')}}</span> --}}
          </a>
        </div>
        <!-- /Logo -->

        <div class="card-body mt-2">
          {{-- <h4 class="mb-2">Welcome to {{config('variables.templateName')}}! 👋</h4> --}}
          <h6>Guest name: <b>{{ $guest->name }}</b> (Email: {{ $guest->email }}) (Contact No: {{ $guest->phone_number }})</h6>
          <h6>Vehicle number plate: <b>{{ $guest->vehicle_plate_no }} </b><br>
            In: <b>{{ $guest->parking_in }}</b> <br> Out: <b>{{ $guest->parking_out }}</b></h6>
          <h6 class="mb-4">Total hours: <b>{{ $guest->parking_hour }}</b></h6>

          @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 id="payment-form" class="mb-3" method="POST" action="/guests/payment">
              @csrf
              <div class="form-floating form-floating-outline mb-3">
                <input type="email" class="form-control" id="email" value="{{ $guest->email }}" readonly name="email" required>
                <label for="email">Email</label>
                <input type="hidden" name="amount" value="{{$guest->amount}}">
                <input type="hidden" name="id" value="{{$guest->id}}">
                <input type="hidden" name="payment_id" id="payment_id">
              <!-- Placeholder for Elements -->
              <div id="card-element" class="my-3 ">
                  <!-- A Stripe Element will be inserted here. -->
              </div>

              <!-- Used to display form errors. -->
              <div id="card-errors" role="alert"></div>

              <div class="mb-3">
                <button type="submit" class="btn btn-primary d-grid w-100" id="payment-btn">
                  Pay {{ $guest->amount }} {{ $guest->currency }}
                </button>
              </div>
            </form>

          </div>
        </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>

<script src="https://js.stripe.com/v3/"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>
  var stripe = Stripe('{{ env("STRIPE_KEY") }}');
  var elements = stripe.elements();
  var card = elements.create('card');
  card.mount('#card-element');

  card.on('change', function(event) {
      var displayError = document.getElementById('card-errors');
      if (event.error) {
          displayError.textContent = event.error.message;
      } else {
          displayError.textContent = '';
      }
  });

  var form = document.getElementById('payment-form');
  form.addEventListener('submit', function(event) {
      event.preventDefault();

      stripe.confirmCardPayment('{{ $clientSecret }}', {
          payment_method: { card: card }
      }).then(function(result) {
          if (result.error) {
              // Show error in your form's payment processing
              alert(result.error.message);
          } else {
              if (result.paymentIntent.status === 'succeeded') {
                  // The payment is complete!
                  $("#payment_id").val(result.paymentIntent.id);
                  form.submit();
                  alert('Payment complete');
              }
          }
      });
  });
</script>
@endsection