@extends('layouts.app')

@section('content')

<!-- START SECTION BREADCRUMB -->
<div class="breadcrumb_section bg_blue page-title-mini">
    <div class="container"><!-- STRART CONTAINER -->
        <div class="row align-items-center">
        	<div class="col-md-6">
                <div class="page-title">
            		<h1>Credit Card</h1>
                </div>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{route('index')}}">Gradstoc</a></li>
                    <li class="breadcrumb-item active">Credit Card</li>
                </ol>
            </div>
        </div>
    </div><!-- END CONTAINER-->
</div>
<!-- END SECTION BREADCRUMB -->

<!-- START LOGIN SECTION -->
<div class="login_register_wrap section mb-4">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-8 col-md-10">
                <div class="login_wrap">
            		<div class="padding_eight_all bg-white">
                        
                        @include('layouts.session')

                        {{--@if ($errors->any())
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif--}}

                        <div class="heading_s1  text-center">
                            <h3>Enter your Card Information</h3>
                        </div>

                        @if(Auth::user())
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <section class="question_status_section mb-2">
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <input type="radio" name="card_option" id="new_card" value="new_card" checked><label for="new_card">Add New Card</label>
                                                </div>
                                                @if(count($user_saved_card) > 0)
                                                    <div class="col-md-4">
                                                        <input type="radio" name="card_option" id="save_card" value="save_card"><label for="save_card">Saved Card</label>
                                                    </div>
                                                @endif
                                            </div>
                                        </section>
                                    </div>
                                </div>
                            </div>
                        @endif

                        <div class="row">
                            <div class="col-md-12 add_new_card_div pb-3">
                                <form action="{{ route('stripe.post') }}" method="post" id="payment-form">
                                    @csrf
                                    <div class="row">
                                        @if(Auth::user())
                                            <div class="col-md-12">
                                                <h5>Add New Card</h5>
                                            </div>
                                        @endif
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <input type="text" class="form-control" name="card_holder_name" id="card-holder-name" placeholder="Card Holder Name">
                                            </div>
                                        </div>
                                        <!-- <div class="col-md-6">
                                            <div class="form-group">
                                                <input type="email" class="form-control" name="card_holder_email" id="card-holder-email" placeholder="Card Holder Email">
                                            </div>
                                        </div> -->
                                        <div class="col-md-12 mt-2 mb-2">
                                            <div id="card-element"></div>
                                            <div class="invalid-feedback" id="card-errors"></div>
                                        </div>
                                    </div>
                                    {!! app('captcha')->display($attributes = ['data-theme' => 'light']) !!}
                                    @if ($errors->has('g-recaptcha-response'))
                                        <span class="help-block text-danger">
                                            <strong>{{ $errors->first('g-recaptcha-response') }}</strong>
                                        </span>
                                    @endif
                                    <div class="form-group pt-3">
                                        <button id="card-button" class="btn btn-fill-out submit_btn">Process Payment</button>
                                    </div>
                                    <div class="col">
                                        <ul class="footer_payment text-center text-md-right">                        
                                            <li><a href="javascript:void(0)"><img src="{{asset('frontend/assets/images/visa.png')}}" alt="visa"></a></li>                                            
                                            <li><a href="javascript:void(0)"><img src="{{asset('frontend/assets/images/master_card.png')}}" alt="master_card"></a></li>                                            
                                            <li><a href="javascript:void(0)"><img src="{{asset('frontend/assets/images/amarican_express.png')}}" alt="amarican_express"></a></li>
                                        </ul>                                        
                                    </div> 
                                </form>
                            </div>
                            @if(Auth::user() && count($user_saved_card) > 0)
                                <div class="col-md-12 saved_card_div pb-3" style="display:none">
                                    <form action="{{ route('stripe.post') }}" method="post">
                                        @csrf
                                        <div class="row card_section">
                                            <div class="col-md-12">
                                                <h5>Saved Card</h5>
                                            </div>
                                            @forelse($user_saved_card as $key => $card)
                                                                                        <div class="col-md-6 col-sm-6 col-xl-6 pb-3 card_div">
                                                <input type="radio" name="card_id" id="{{$card->card_id}}" value="{{$card->card_id}}" {{ ($card->is_default == 1) ? 'checked' : '' }} {{$key == 0 ? 'required' : ''}}>
                                                <label class="credit-card {{$card_class}} selectable" for="{{$card->card_id}}">
                                                    <div class="credit-card-last4">
                                                        {{ $card_detail['last4'] }}
                                                    </div>
                                                    <div class="credit-card-expiry">
                                                        {{$brand}}
                                                    </div>
                                                </label>
                                            </div>
                                            @empty
                                                <div class="col-md-12 pb-2"><p>No saved card</p></div>
                                            @endforelse
                                        </div>
                                        <div class="form-group pt-3">
                                            <button id="card-button" class="btn btn-fill-out submit_btn">Process Payment</button>
                                        </div> 
                                    </form>
                                </div>
                            @endif
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END LOGIN SECTION -->
@endsection


@push('js')

<script src="https://js.stripe.com/v3/"></script>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
    var stripe = Stripe("{{ env('STRIPE_KEY') }}"); // test publishable API key
    console.log("{{ env('STRIPE_KEY') }}");

    var style = {
        base: {
            color: '#000',
            lineHeight: '18px',
            fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
            fontSmoothing: 'antialiased',
            fontSize: '16px',
            '::placeholder': {
            color: '#aab7c4'
            }
        },
        invalid: {
            color: '#fa755a',
            iconColor: '#fa755a'
        }
    };

    var elements = stripe.elements();
    var card = elements.create('card', {style: style});
    // Add an instance of the card UI component into the `card-element` <div>
    card.mount('#card-element');

    // Handle events and errors
    card.addEventListener('change', function(event) {
      var displayError = document.getElementById('card-errors');
      if (event.error) {
        displayError.textContent = event.error.message;
      } else {
        displayError.textContent = '';
        $("input[name='card_id']").prop("checked", false);
      }
    });

    function stripeTokenHandler(token) {
        // 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', 'stripeToken');
        hiddenInput.setAttribute('value', token.id);
        form.appendChild(hiddenInput);

        showBtnLoader(".submit_btn");
        // Submit the form
        form.submit();
    }

    // Create a token when the form is submitted.
    var cardholderName = document.getElementById('card-holder-name');
	// var cardholderEmail = document.getElementById('card-holder-email');
    var form = document.getElementById('payment-form');

    // Add new card
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        
        var displayError = document.getElementById('card-errors');
        if(cardholderName.value == ''){
            displayError.textContent = 'Please Enter Card Holder name';
            return false;
        }else{
            displayError.textContent = '';
        }
        // if(cardholderEmail.value == ''){
        //     displayError.textContent = 'Please Enter Card Holder Email';
        //     return false;
        // }else{
        //     displayError.textContent = '';
        // }

        var extraDetails = {
            name: cardholderName.value,
            // email: cardholderEmail.value,
        };
        stripe.createToken(card, extraDetails).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
                showBtnLoader(".submit_btn");
                stripeTokenHandler(result.token);
            }
        });
    });
   
});
</script>

<script>
    $(function(){
        $(document.body).on('change', 'input[name="card_option"]', function (e) {
            e.preventDefault();
            var card_option = $("input[name='card_option']:checked").val();
            if(card_option == 'new_card'){
                $(".add_new_card_div").slideToggle(500);
                $(".saved_card_div").hide();
            }else if(card_option == 'save_card'){
                $(".saved_card_div").slideToggle(500);
                $(".add_new_card_div").hide();
                $("#card-errors").html('');
            }
        });
    });
</script>

@endpush