@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="{{url('/')}}" 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>Plan name: <b>{{ $subscription->name }}</b> ({{ $subscription->description }})</h6>
          <h6>Make Payment of: <b>{{ $subscription->price }} {{ $subscription->currency }} / {{ $subscription->duration }}</b></h6>
          <h6 class="mb-4">Spots Count: <b>{{ $subscription->spots }} Spots</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="subscription-form" class="mb-3">
              @csrf
              <div class="form-floating form-floating-outline mb-3">
                <input type="email" class="form-control" id="email" value="{{ $user->email }}" readonly name="email" required>
                <label for="email">Email</label>

              <!-- 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="button" class="btn btn-primary d-grid w-100" id="subscribe-btn">
                  Subscribe & Pay {{ $subscription->price }} {{ $subscription->currency }} / {{ $subscription->duration }}
                </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>
      // Create a Stripe client.
      var stripe = Stripe('{{ env("STRIPE_KEY") }}');

      // Create an instance of Elements.
      var elements = stripe.elements();

      // Custom styling can be passed to options when creating an Element.
      var style = {
          base: {
              // Add your base input styles here. For example:
              fontSize: '16px',
              color: "#32325d",
          },
      };

      // Create an instance of the card Element.
      var card = elements.create('card');

      // Add an instance of the card Element into the `card-element` div.
      card.mount('#card-element');

      // Handle real-time validation errors from the card Element.
      card.addEventListener('change', function(event) {
          var displayError = document.getElementById('card-errors');
          if (event.error) {
              displayError.textContent = event.error.message;
          } else {
              displayError.textContent = '';
          }
      });

      // Handle form submission.
      $('#subscribe-btn').click(function() {
        event.preventDefault();

        const queryParams = new URLSearchParams(window.location.search);
        const subscription = queryParams.get('subscription');

          stripe.createPaymentMethod({
              type: 'card',
              card: card,
          }).then(function(result) {
              console.log(result)
              if (result.error) {
                  // Show error to user
                  alert(result.error.message);
              } else {
                  // Send payment method to server to create subscription

                  $.ajax({
                      url: '{{ route('community.subscription') }}',
                      type: 'POST',
                      headers: {
                          'Content-Type': 'application/json',
                          'X-CSRF-TOKEN': $('#subscription-form input[name="_token"]').val()
                      },
                      dataType: 'json',
                      data: JSON.stringify({
                          payment_method: result.paymentMethod.id,
                          plan_id: subscription,
                      }),
                      success: function(data) {
                          console.log(data)
                          if (data.success) {
                              alert('Thanks for subscription');
                              window.location.href = data.redirect_url;
                          } else {
                              alert('Error:'+ data.error);
                          }
                      },
                      error: function(error) {
                          alert('Error:'+ JSON.stringify(error.responseJSON.error));
                      }
                  });
              }
          });
      });
  </script>
@endsection