@php
use App\registerModel;
    $stipe_key_model_instance = new registerModel();
                        
    $stripe_publish_data = $stipe_key_model_instance->get_stripe_publish_key();

    $stripe_key = $stripe_publish_data->key_code;


@endphp
  <div class="modal fade" id="purchasemodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Lead Purchase</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        {{ Form::open(array('url' => '/accounts/insert-lead-payment','method' => 'POST','id'=>'lead_purchase_form'))  }}
            @csrf
        <div class="modal-body">
            <label>Name on Card</label>
            <input type="text" class="form-control" name="card_holder" required>
            <label> Street Address</label>
            <input type="textarea" class="form-control" name="address" required>
            <label>Country</label>
            <input type="text" class="form-control" name="country_code" required>
            <label>State</label>
            <input type="text" class="form-control" name="state_code" required>
            <label>City</label>
            <input type="text" class="form-control" name="city" required>
            <label>Postal code</label>
            <input type="text" class="form-control" name="zip_code" required>
            <input type="hidden" name="source" value="stripe">
            <input type="hidden" name="lead_id" id="lead_id" value="">
            <input type="hidden" name="sub_charges" id="lead_price" value="">
        </div>
        <div class="form-group">
            <div class="col-lg-12 mb-4">
                <h4>Enter Your Credit Card Information</h4>
            </div>
            <div class="card-body">
                
                <div id="card-element" class="form-control" >
                    <!-- Used to display form errors. -->
                    <div id="card-errors" role="alert"></div>
                   
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="submit" class="btn btn-primary" id="submit_btn">Save credit card and continue</button>
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          
        </div>
        {!! Form::close()!!} 
      </div>
    </div>
  </div>
  <script src="https://js.stripe.com/v3/"></script>
   <script>
       
       // Custom styling can be passed to options when creating an Element.
       // (Note that this demo uses a wider set of styles than the guide below.)

       var style = {
           base: {
               color: '#32325d',
               lineHeight: '18px',
               fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
               fontSmoothing: 'antialiased',
               fontSize: '16px',
               width: '500px',
               '::placeholder': {
                   color: '#aab7c4'
               }
           },
           invalid: {
               color: '#fa755a',
               iconColor: '#fa755a'
           }
       };
       
       const stripe = Stripe('{{ $stripe_key }}', { locale: 'en' }); // 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('submit_btn');
       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 = '';
            }
        });

       // Handle form submission.
       var form = document.getElementById('lead_purchase_form');
   
       form.addEventListener('submit', function(event) {
           event.preventDefault();
            stripe.createToken(cardElement).then(function(result) {
                if (result.error) {
                // Inform the customer that there was an error.
                var errorElement = document.getElementById('card-errors');
                errorElement.textContent = result.error.message;
                } else {
                // Send the token to your server.
                stripeTokenHandler(result.token);
                }
            });
        });
          
   </script>
  <script>
    function stripeTokenHandler(token) {
        // Insert the token ID into the form so it gets submitted to the server
        //var form = document.getElementById('register_form');
        var hiddenInput = document.createElement('input');
        hiddenInput.setAttribute('type', 'hidden');
        hiddenInput.setAttribute('name', 'stripeToken');
        hiddenInput.setAttribute('value', token.id);
        form.appendChild(hiddenInput);

        // Submit the form
        //form.submit();
        
        var myForm = $("#lead_purchase_form");
        if (myForm) {   
            $('#submit_btn').prop('disabled', true);   
            $(myForm).submit();   
        } 

        }
</script>