@extends('layouts.home')

@section('content')
    <style type="text/css">
        .panel-title {
        display: inline;
        font-weight: bold;
        }
        .display-table {
            display: table;
        }
        .display-tr {
            display: table-row;
        }
        .display-td {
            display: table-cell;
            vertical-align: middle;
            width: 61%;
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Navigation -->
     <nav class="navbar navbar-expand-lg  fixed-top text-uppercase" id="mainNav">
      <div class="container">
         <a class="navbar-brand js-scroll-trigger" href="/learnspanish/">Learn Spanish</a>
        <button class="navbar-toggler navbar-toggler-right text-uppercase bg-primary text-white rounded" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          Menu
          <i class="fas fa-bars"></i>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="https://www.acaexplorers.com/donate.html">Donate<span class="sr-only">(current)</span></a>
      </li>
      
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Charity Art Store
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="https://store.acaexplorers.com/product-category/art-store/original-paintings/">Original Paintings </a>
            <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="https://store.acaexplorers.com/product-category/art-store/canvas-prints/">Canvas/Framed Prints/Posters</a>
            <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="https://store.acaexplorers.com/product-category/art-products/">Art Laptop Sleeves/Bags/Mugs</a>
            <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="https://store.acaexplorers.com/product-category/art-products/">Collectible Mugs/Bags</a>
            
            
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="https://store.acaexplorers.com">Shop All - Front Page</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="https://www.acaexplorers.com/events/">Fundraising Events</a>
      </li>
        <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Connect With Us!
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#contact">Contact Us!</a>
            <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="https://www.instagram.com/acaexplorers/">Instagram</a>
            <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="https://www.facebook.com/acaexplorers/">Facebook</a>
            <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="https://www.youtube.com/channel/UCSdDG_FXqYnTF93M5SVq1ew">YouTube</a>
            <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="https://www.acaexplorers.com/blog/">Blog</a>
            
        </div>
      </li>
        <li class="nav-item">
        <a class="nav-link" href="https://www.acaexplorers.com/explorers/">Student Log-In</a>
      </li>
        
    </ul>
        </div>
      </div>
    </nav>
  
    <div class="container text-dark" >
    
        
        <div class="row">
            <div class="col-md-6">
               <!-- <h1><b> {{$Event->title}}</b></h1>
                <p style="color: black !important; font-size: 18px;">{{$Event->detail}}</p>-->
                <h1>Custom Donation</h1>
                <br>
          <center><img src="/explorers/img/ACA-Banner.jpg" width="75%" height="100%"></center>

	  <h1 class="text-uppercase mb-0">Make A Donation.  Change A Life.</h1>
		        <h2 class="font-weight-light mb-0">ACA Explorers: Creating New Generations of Learners and Teachers in Colombia</h2><br />
                <h4><i>Secure payments through <a href=https://www.Stripe.com target="_blank">Stripe</a></i></h4>
                <div class="panel panel-default credit-card-box">
                    <div class="panel-heading display-table" > 
                        <div class="row display-tr" >
                            <h3 class="panel-title display-td" >Payment Details</h3>
                            <div class="display-td" >                            
                                <img class="img-responsive pull-right" src="https://www.acaexplorers.com/images/accepted_c22e0.png">
                            </div>
                        </div>    
                    </div>

                    <div class="panel-body">
                        <form role="form" action="{{ url('event/'. $Event->id . '/story/' . $Story->id  . '/' . $type) }}" method="post" class="require-validation"
                                                        data-cc-on-file="false"
                                                        data-stripe-publishable-key="{{env('STRIPE_KEY')}}"
                                                        id="payment-form">
                            @csrf
                            
                            <div class='form-row row'>
                                <div class='col-xs-12 form-group required'>
                                    <label class='control-label'>First Name*</label> <input
                                        class='form-control' name="firstName" type='text'>
                                </div>
                            </div>

                            <div class='form-row row'>
                                <div class='col-xs-12 form-group required'>
                                    <label class='control-label'>Last Name*</label> <input
                                        class='form-control'  name="lastName" type='text'>
                                </div>
                            </div>

                            <div class='form-row row'>
                                <div class='col-xs-12 form-group required'>
                                    <label class='control-label'>Country*</label> <input
                                        class='form-control'  name="country" type='text' id="country">
                                </div>
                            </div>

                            <div class='form-row row'>
                                <div class='col-xs-12 form-group required'>
                                    <label class='control-label'>State/Province*</label> <input
                                        class='form-control'  name="state" type='text' id="region">
                                </div>
                            </div>

                            <div class='form-row row'>
                                <div class='col-xs-12 form-group required'>
                                    <label class='control-label'>City*</label> <input
                                        class='form-control'  name="city" type='text' id="city">
                                </div>
                            </div>

                            <div class='form-row row'>
                                <div class='col-xs-12 form-group required'>
                                    <label class='control-label'>Postal Code*</label> <input
                                        class='form-control'  name="code" type='text' id="postal">
                                </div>
                            </div>

                            <div class='form-row row'>
                                <div class='col-xs-12 form-group required'>
                                    <label class='control-label'>Email address*</label> <input
                                        class='form-control'  name="email" type='email'>
                                </div>
                            </div>
                            
                            <div class='form-row row'>
                                <div class='col-xs-12 form-group required'>
                                    <label class='control-label'>Amount*</label>
                                    @if ($Story->id != 1)
                                        <input class='form-control'  name="amount" type='number' value="{{$Story->price}}">
                                    @else
                                        <input class='form-control'  name="amount" type='number' >
                                    @endif
                                    @error('amount')
                                        <span class="invalid-feedback" style="display: block;" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class='form-row row'>
                                <div class='col-xs-12 form-group required'>
                                    <label class='control-label'>Name on Card*</label> <input
                                        class='form-control'  name="name" type='text'>
                                </div>
                            </div>
    
                            <div class='form-row row'>
                                <div class='col-xs-12 form-group card required' style="border: none;">
                                    <label class='control-label'>Card Number*</label> <input
                                        autocomplete='off' class='form-control card-number' size='20'
                                        type='text'>
                                </div>
                            </div>
    
                            <div class='form-row row'>
                                <div class='col-xs-12 col-md-4 form-group cvc required'>
                                    <label class='control-label'>CVC*</label> <input autocomplete='off'
                                        class='form-control card-cvc' placeholder='ex. 311' size='4'
                                        type='text'>
                                </div>
                                <div class='col-xs-12 col-md-4 form-group expiration required'>
                                    <label class='control-label'>Expiration Month*</label> <input
                                        class='form-control card-expiry-month' placeholder='MM' size='2'
                                        type='text'>
                                </div>
                                <div class='col-xs-12 col-md-4 form-group expiration required'>
                                    <label class='control-label'>Expiration Year*</label> <input
                                        class='form-control card-expiry-year' placeholder='YYYY' size='4'
                                        type='text'>
                                </div>
                            </div>
    
                            <div class='form-row row'>
                                <div class='col-md-12 error form-group hide'>
                                    <div class='alert-danger alert'>Please correct the errors and try
                                        again.</div>
                                </div>
                            </div>
    
                            <div class="row">
                                <div class="col-xs-12">
                                    <button class="btn btn-primary btn-lg btn-block" type="submit">Pay Now</button>
                                </div>
                            </div>
                            
                        </form>
                    </div>
                </div>        
            </div>
        </div>
        
    </div>
  
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
  
<script type="text/javascript">
$(function() {
    var $form         = $(".require-validation");
  $('form.require-validation').bind('submit', function(e) {
    var $form         = $(".require-validation"),
        inputSelector = ['input[type=email]', 'input[type=password]',
                         'input[type=text]', 'input[type=file]',
                         'textarea'].join(', '),
        $inputs       = $form.find('.required').find(inputSelector),
        $errorMessage = $form.find('div.error'),
        valid         = true;
        $errorMessage.addClass('hide');
 
        $('.has-error').removeClass('has-error');
    $inputs.each(function(i, el) {
      var $input = $(el);
      if ($input.val() === '') {
        $input.parent().addClass('has-error');
        $errorMessage.removeClass('hide');
        e.preventDefault();
      }
    });
  
    if (!$form.data('cc-on-file')) {
      e.preventDefault();
      Stripe.setPublishableKey($form.data('stripe-publishable-key'));
      Stripe.createToken({
        number: $('.card-number').val(),
        cvc: $('.card-cvc').val(),
        exp_month: $('.card-expiry-month').val(),
        exp_year: $('.card-expiry-year').val()
      }, stripeResponseHandler);
    }
  
  });
  
  function stripeResponseHandler(status, response) {
        if (response.error) {
            $('.error')
                .removeClass('hide')
                .find('.alert')
                .text(response.error.message);
        } else {
            // token contains id, last4, and card type
            var loading_txt = '<i class="fa fa-spinner fa-spin text-light" style="font-size:24px"></i>';
            $form.find("button[type='submit']").html(loading_txt);
            $form.find("button[type='submit']").prop('disabled',true);
            var token = response['id'];
            // insert the token into the form so it gets submitted to the server
            $form.find('input[type=text]').empty();
            $form.append("<input type='hidden' name='stripeToken' value='" + token + "'/>");
            $form.get(0).submit();
        }
    }

    $.getJSON('https://ipapi.co/json/', function(data) { 
        $('#country').val(data.country_name);
        $('#region').val(data.region);
        $('#postal').val(data.postal);
        $('#city').val(data.city);
    });

});
</script>
@endsection