@extends('auth.layouts.master')


@push('head-stylesheets')
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="{{ mix('css/bootstrap.min.css') }}">
  <link rel="stylesheet" href="{{ mix('css/theme-style.css')}}">
@endpush

@section('title')
  @lang('Payment')
@endsection

@section('header')
	@include('landing-page.partials.header')
@endsection

@section('content')

  <div class="menu-specer"></div>
    <div class="show-menu-now"><span class="sr-only">Viewpoint for menu pin class add</span></div>
    <section class="mb-4 mb-md-5 join-reef-now join-reef-now-height mb-4 mb-md-5 mt-0 mt-md-5" id="signup-div">
      <div class="container py-0 py-md-2 py-xl-3">
          <div class="w-100 position-relative text-center text-md-left">
              <div class="box rounded shadow-smaller" data-aos="fade-right" data-aos-offset="1" data-aos-delay="0" data-aos-duration="1000" data-aos-once="true">
                <input type="hidden" class="stipe" value="{{Session::get('plan')}}">
                  <div class="form-div">
                      <form  id="payment-form" action="{{ route('paymentStripe') }}" method="POST">
                        {{ csrf_field() }}
                          <p class="h4 mb-4">Payment</p>
                          <label>
                            <input name="group1" type="hidden" value="stripe" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne" checked  />
                          </label>
                          <div id="card-element">
                            <div class="single single-nolp d-flex align-items-center justify-content-between mb-4">
                                <div class="smaller-font">
                                    Card number
                                </div>
                                <div class="right">
                                    <div id="card-number-element" class="field"></div>
                                </div>
                            </div>

                            <input type="hidden" value="{{$user_email}}" name="user_email">
                            <input type="hidden" value="{{$mobileApp}}" name="mobileApp">
                            <div class="single single-nolp d-flex align-items-center justify-content-between mb-4">
                                <div class="smaller-font">
                                    Expiry
                                </div>
                                <div class="right">
                                    <div id="card-expiry-element" class="field"></div>
                                </div>
                            </div>

                            <div class="d-flex justify-content-between mb-4">

                              <div class="d-flex justify-content-start single single-payment single-nolp">
                                  <div class="smaller-font">
                                      CVV
                                  </div>
                                  <div class="right right-payment">
                                      <div id="card-cvc-element" class="field"></div>
                                  </div>
                              </div>
                                <div class="d-flex justify-content-end single single-payment single-nolp">
                                  <div class="smaller-font">
                                      ZIP
                                  </div>
                                  <div class="right right-payment">
                                      <div id="card-zip-code" class="field"></div>
                                  </div>
                                </div>

                            </div>
                            <!-- Used to display form errors. -->
                            <div class="pb-2 text-error invalid-feedback" id="card-errors" role="alert"></div>
                            <input type="hidden" name="plan" class="stripePlan" value="@if(session('plan')){{Session::get('plan')}} @else {{$plan}}@endif"/>
                          </div>
                          <p class="text-center mb-0">
                            <button  id="card-button" type="submit"  data-secret="@if($intent){{ $intent->client_secret }}@endif" class="btn">Pay</button>
                          </p>
                      </form>
                  </div>

                  <div class="text-center pt-2">
                    @if(session()->has('success_payment'))
                        <small class="success-msg text-success text-center">Your account has been successfully created. Please check your email to complete the registration.</small>
                    @endif
                  </div>

              </div>
              <div class="image image-payment d-none d-md-block rounded" style="background-image: url('{{ asset('images/pexels-andrea-piacquadio-3768894.jpg')}}');"  data-aos="fade-left" data-aos-offset="1" data-aos-delay="0" data-aos-duration="1000" data-aos-once="true"></div>
              <p class="pt-3 mb-0 d-block d-md-none"><img src="{{ asset('images/pexels-andrea-piacquadio-3768894.jpg')}}" alt="#" class="image-auto"></p>

          </div>

          <div class="clearfix"></div>
      </div>
    </section>

{{-- <div class="container">
    <div class="row">
      <div class="col-sm-9 col-md-7 col-lg-5 mx-auto">
        <div class="card card-signin my-5">
          <div class="card-body">
              <div class="container">
                <div class="row" class="displayPaymentPlans">
                  <div class="col-md-12 text-center">

                      <h3 >Payment</h3>
                      <input type="hidden" class="stipe" value="{{Session::get('plan')}}">
                  </div>

                </div>

              </div>
              <form id="payment-form" action="{{ route('paymentStripe') }}" method="POST">

                {{ csrf_field() }}



                <div class="col-md-12 m-0 p-0 mb-3 cardHolderStripe">
                  <div id="accordion">
                    <div class="card">
                      <div class="card-header" id="headingOne">
                        <h5 class="mb-0">
                          <label>
                            <input name="group1" type="radio" value="stripe" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne" checked  />
                            <span>Stripe card</span>
                          </label>

                        </h5>
                      </div>
                        <div class="card-body">
                            <div id="card-element">
                            <!-- A Stripe Element will be inserted here. -->
                            </div>
                            <!-- Used to display form errors. -->
                            <div id="card-errors" role="alert"></div>
                          <input type="hidden" name="plan" class="stripePlan" value="@if(session('plan')){{Session::get('plan')}} @else {{$plan}}@endif"/>
                            <br>
                        </div>
                    </div>
                  <div>


                </div>



          </div>
          <input type="hidden" value="{{$user_email}}" name="user_email">
          <input type="hidden" value="{{$mobileApp}}" name="mobileApp">
          </div>
              <div class="form-group">
                <div class="card-footer d-flex justify-content-between">
                    <!-- <button class="btn btn-dark" type="submit">Pay</button> -->

                    <button
                       id="card-button"
                       class="btn btn-dark"
                       type="submit"
                      data-secret="@if($intent){{ $intent->client_secret }}@endif"
                     > Pay </button>


                     @if($paymentUpdateMob == 1)
                     <a href="{{route('switchToFreePlan')}}">Switch to free plan </a>
                     @endif
                </div>

                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div> --}}
@endsection


@section('footer')
    @include('landing-page.partials.footer')
@endsection

@push('scripts')

<script src="{{ mix('/js/admin-panel/register/register.js') }}"></script>
<script> $('.collapse').collapse() </script>

<script type="text/javascript" src="{{ mix('js/jquery.maskedinput.js') }}"></script>
<script src="https://js.stripe.com/v3/"></script>
<script>

    $(document).ready(function(){

    const stripe = Stripe('{{ env("STRIPE_KEY") }}', { locale: 'uk' }); // Create a Stripe client.
    const elements = stripe.elements(); // Create an instance of Elements.
    // const cardElement = elements.create('card', { style: style }); // Create an instance of the card Element.

    const cardButton = document.getElementById('card-button');
    const clientSecret = cardButton.dataset.secret;

    var cardNumberElement = elements.create('cardNumber', {
      style: {
            base: {

              color: '#fff',
              fontFamily: 'Varela Round , sans-serif',
              textAlign: "right",
              fontSmoothing: 'antialiased',
              ':-webkit-autofill': {
                color: '#fff',
              },
              '::placeholder': {
                color: '#fff',
              },
            },
        },
      placeholder: '0000 0000 0000 0000',

      });
      cardNumberElement.mount('#card-number-element');


      var cardExpiryElement = elements.create('cardExpiry', {
        style: {
            base: {

              color: '#fff',
              fontFamily: 'Varela Round , sans-serif',
              textAlign: "right",
              fontSmoothing: 'antialiased',
              ':-webkit-autofill': {
                color: '#fff',
              },
              '::placeholder': {
                color: '#fff',
              },
            },
        },
      placeholder: 'MM/YY',
      });
      cardExpiryElement.mount('#card-expiry-element');


      var cardCvcElement = elements.create('cardCvc', {
        style: {
            base: {

              color: '#fff',
              fontFamily: 'Varela Round , sans-serif',
              textAlign: "right",
              fontSmoothing: 'antialiased',
              ':-webkit-autofill': {
                color: '#fff',
              },
              '::placeholder': {
                color: '#fff',
              },
            },
        },
      placeholder: 'xxx',
      });
      cardCvcElement.mount('#card-cvc-element');


      var cardCvcElement = elements.create('postalCode', {

        style: {
            base: {

              color: '#fff',
              fontFamily: 'Varela Round , sans-serif',
              textAlign: "right",
              fontSmoothing: 'antialiased',
              ':-webkit-autofill': {
                color: '#fff',
              },
              '::placeholder': {
                color: '#fff',
              },
            },
        },
        placeholder: 'abc123',
      });
      cardCvcElement.mount('#card-zip-code');

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

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

    // Handle form submission.
    var form = document.getElementById('payment-form');

    form.addEventListener('submit', function(event) {
        event.preventDefault();

        stripe
            .handleCardSetup(clientSecret, cardNumberElement, {
                payment_method_data: {
                    //billing_details: { name: cardHolderName.value }
                }
            })
            .then(function(result) {

                if (result.error) {
                    // Inform the user if there was an error.
                    var errorElement = document.getElementById('card-errors');
                    errorElement.textContent = result.error.message;
                } else {

                    // Send the token to your server.
                    stripeTokenHandler(result.setupIntent.payment_method);
                }
            });
    });

    // Submit the form with the token ID.
    function stripeTokenHandler(paymentMethod) {
        // Insert the token ID into the form so it gets submitted to the server
        var form = document.getElementById('payment-form');
        var hiddenInput = document.createElement('input');
        hiddenInput.setAttribute('type', 'hidden');
        hiddenInput.setAttribute('name', 'paymentMethod');
        hiddenInput.setAttribute('value', paymentMethod);
        form.appendChild(hiddenInput);

        // Submit the form
        form.submit();
    }

});

</script>
@endpush