@extends('member.layouts.master')
@section('member-body')
    <div>
        @include('layouts.message')
        <div class="board">
            <div class="board-header mb-3 d-flex justify-content-between">
                <div class="board-title">
                    <h3>{{$heading}}</h3>
                </div>
                <div class="board-toolbar">
                    <a href="/members/orders" class="btn btn-light"><i class="bi bi-backspace"></i> Back</a>
                </div>
            </div>
            <div class="board-body">
                <div class="card">
                    <div class="card-header d-flex justify-content-between">
                        <div class="card-title fs-20 fw-bolder">
                            Enter Card Details
                        </div>
                        <div class="card-toolbar">
                            <ul class="nav">
                                <li class="nav-item me-1">
                                    <div class="border">
                                        <img src="/paymentmethod/visa.png" width="50">
                                    </div>
                                </li>
                                <li class="nav-item me-1">
                                    <div class="border">
                                        <img src="/paymentmethod/master_card.png" width="50">
                                    </div>
                                </li>
                                <li class="nav-item me-1">
                                    <div class="border">
                                        <img src="/paymentmethod/american.jpg" width="50">
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-body">
                        <p>
                            To pay the total amount using your credit card or debit card, click on the "<b>Pay Now</b>" button below. Please <b>do not close the browser window</b> until your payment is complete and your purchase has been finalised.
                        </p>
                        <b><i class="bi bi-file-lock"></i> Payments are processed through a secure checkout powered by Stripe.</b>
                        <form
                                role="form"
                                action=""
                                method="post"
                                class="require-validation mt-3"
                                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'>Name on Card</label>
                                    <input class='form-control' size='4' type='text'>
                                </div>
                            </div>

                            <div class='form-row row mt-2'>
                                <div class='col-xs-12 form-group required'>
                                    <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 mt-2'>
                                <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 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='password'>
                                </div>
                            </div>

                            <div class='form-row row mt-3'>
                                <div class='col-md-12 form-group error hide'>
                                    <div class='alert-danger alert'>Please correct the errors and try again.</div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-lg-6">
                                    <button class="w-100 btn btn-danger btn-lg btn-block" type="submit">
                                        Pay Now ({{default_currency()->sign}}{{number_format($order->total,2)}})
                                    </button>
                                </div>
                                <div class="col-lg-6">
                                    <a href="/members/orders" class="w-100 btn btn-light btn-lg btn-block">
                                        Cancel
                                    </a>
                                </div>
                            </div>

                        </form>

                    </div>
                    <div class="card-footer d-flex justify-content-between">
                        <div class="card-title fs-20 fw-bolder">
                            <ul class="nav">
                                <li class="nav-item me-1">
                                    <div class="border">
                                        <img src="/paymentmethod/visa.png" width="50">
                                    </div>
                                </li>
                                <li class="nav-item me-1">
                                    <div class="border">
                                        <img src="/paymentmethod/master_card.png" width="50">
                                    </div>
                                </li>
                                <li class="nav-item me-1">
                                    <div class="border">
                                        <img src="/paymentmethod/american.jpg" width="50">
                                        <img src="/paymentmethod/safe_key.png" width="50">
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="card-toolbar">
                            {{--<nav class="nav social social-white text-end">--}}
                                {{--@foreach(get_socials() as $social_icon)--}}
                                    {{--<a class="p-2 text-white" href="{{$social_icon->link}}" target="_blank">@if($social_icon->type=='image')<img src="/{{get_image($social_icon->image)}}" width="20px"> @else <i class="{{$social_icon->icon}}"></i> @endif</a>--}}
                                {{--@endforeach--}}
                            {{--</nav>--}}
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

@endsection
@section('after_css')
    <style>
        .has-error .form-control{
            border:1px solid red;
        }
        .error.hide{
            display: none;
        }
    </style>
@endsection
@section('stripe_scripts')
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js"
            integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ" crossorigin="anonymous">
    </script>
    <script type="text/javascript" src="https://js.stripe.com/v2/"></script>

    <script type="text/javascript">

        $(function() {

            /*------------------------------------------
             --------------------------------------------
             Stripe Payment Code
             --------------------------------------------
             --------------------------------------------*/

            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);
                }

            });

            /*------------------------------------------
             --------------------------------------------
             Stripe Response Handler
             --------------------------------------------
             --------------------------------------------*/
            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 token = response['id'];

                    $form.find('input[type=text]').empty();
                    $form.append("<input type='hidden' name='stripeToken' value='" + token + "'/>");
                    $form.get(0).submit();
                }
            }

        });
    </script>
@endsection