@extends('auth.layouts.master')

@section('title')
  @lang('admin-panel/auth.register')
@endsection

@section('content')
  <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="@if(isset($plan)) {{$plan}}@endif"> 
                </div>
               
              </div>

            </div>
            <form id="payment-form" action="{{ route('updatePaymentsUser') }}" 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>
                
                   
                     {{--      <label for="card-element" class="ml-3">
                              Enter your credit card information
                          </label> --}}
                   
                      <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(isset($plan)) {{$plan}}@endif"/>
                          <br>
                      </div>
                  </div>
                <div>
                

              </div>
            </div>
          <input type="hidden" value="@if(isset($user_email)){{$user_email}} @endif" name="user_email">
          <input type="hidden" value="@if(isset($update)){{$update}} @endif" name="update">
          </div>
              <div class="form-group">
                <div class="card-footer">
                    <!-- <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>
                </div>
                  
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection
@push('scripts')

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

<script src="https://js.stripe.com/v3/"></script>
<script>

    $(document).ready(function(){
        
    var style = {
        base: {
            color: '#343a40',
            lineHeight: '18px',
            fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
            fontSmoothing: 'antialiased',
            fontSize: '17px',
            '::placeholder': {
                color: '#343a40'
            }
        },
        invalid: {
            color: '#fa755a',
            iconColor: '#fa755a'
        }
    };

    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;

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

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

    console.log(cardElement);

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

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


        stripe
            .handleCardSetup(clientSecret, cardElement, {
                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