@extends('front.layouts.app', ['title' => 'Stripe Payment'])

@section('content')
    @include('front.layouts.app-header')
@section('header-js')
    {{-- <script src="https://js.stripe.com/v2/"></script> --}}
    <script src="https://js.stripe.com/v3/"></script>
@endsection

<style>

#loader-custom {
    display: none; /* Hide it by default */
    font-size: 20px;
    color: #A73D45;
    margin-top: 10px;
}
</style>
<section class="online_payment_sec off_bg">
    <div class="container">
        <div class="row">
            <div class="col col-12">
                <div class="section_title">
                    <h2>Make the Payment & Cheers Your Wine.</h2>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col col-12">
                @if (Session::has('success'))
                    <div class="alert alert-success text-center">
                        <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                        <p>{{ Session::get('success') }}</p>
                    </div>
                @endif
                <div class="online_payment_form_wrapper">
                    {{-- <form role="form" action="{{ route('stripe-post') }}" method="post" class="require-validation" data-cc-on-file="false" data-stripe-publishable-key="{{ Config::get('constant.STRIPE_KEY') }}" id="payment-form">
                        <div class="online_payment_form_inner_wrapper card">
                            <div class="card_title">
                                <h3>Payment Details</h3>
                                <div class="card_link">
                                    <ul>
                                        <li><img src="/images/visa_logo.svg" alt=""></li>
                                        <li><img src="/images/mc_logo.svg" alt=""></li>
                                        <li><img src="/images/discover_logo.svg" alt=""></li>
                                        <li><img src="/images/ae_logo.svg" alt=""></li>
                                    </ul>
                                </div>
                            </div>
                            @csrf
                            <input class='form-control' size='4' name="order_id" value="{{$order->id}}" type='hidden'>
                            <div class="row">
                                <div class="col col-12">
                                    <div class="c_filed required">
                                        <label class='control-label'>Name on Card</label> 
                                        <input class='form-control card-name' id="card-name" size='4' type='text'>
                                    </div>
                                </div>
                                <div class="col col-12">
                                    <div class="c_filed required">
                                        <label class='control-label'>Card Number</label> 
                                        <input autocomplete='off' class='form-control card-number' size='20' type='number'>
                                    </div>
                                </div>
                                <div class="col col-4">
                                    <div class="c_filed required">
                                        <label class='control-label'>Month</label> 
                                        <input class='form-control card-expiry-month' placeholder='MM' size='2' type='number'>
                                    </div>
                                </div>
                                <div class="col col-4">
                                    <div class="c_filed required">
                                        <label class='control-label'>Year</label> 
                                        <input class='form-control card-expiry-year' placeholder='YYYY' size='4' type='number'>
                                    </div>
                                </div>
                                <div class="col col-4">
                                    <div class="c_filed required">
                                        <label class='control-label'>CVC</label> 
                                        <input autocomplete='off' class='form-control card-cvc' placeholder='ex. 311' size='4' type='number'>
                                    </div>
                                </div>
                                <div class="col col-12">
                                    <div class="invalid-feedback error d-none">
                                        <p><strong><span class="alert"> </span></strong></p>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col col-12">
                                    <div class="c_btn c_btn_red">
                                        <button class="btn btn-primary btn-lg btn-block" type="submit">Pay Now ($ {{$order->total}} )</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>  --}}

                    <form id="payment-form">
                        @csrf
                        <div class="online_payment_form_inner_wrapper card">
                            <div class="card_title">
                                <h3>Payment Details</h3>
                                <div class="card_link">
                                    <ul>
                                        <li><img src="/images/visa_logo.svg" alt=""></li>
                                        <li><img src="/images/mc_logo.svg" alt=""></li>
                                        <li><img src="/images/discover_logo.svg" alt=""></li>
                                        <li><img src="/images/ae_logo.svg" alt=""></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col col-12">
                                    <div class="c_filed required">
                                        <label class="control-label">Name on Card</label>
                                        <input class="form-control card-name" id="card-name" size="4"
                                            type="text">
                                    </div>
                                </div>
                                <div class="col col-12">
                                    <div class="c_filed required">
                                        <label for="card-number">Card Number</label>
                                        <div id="card-number" class='form-control card-number custom-card-elements'>
                                        </div>
                                    </div>
                                </div>

                                <div class="col col-6">
                                    <div class="c_filed required">
                                        <label for="card-expiry">Expiration Date</label>
                                        <div id="card-expiry"
                                            class='form-control card-expiry-month custom-card-elements'></div>
                                    </div>
                                </div>

                                <div class="col col-6">
                                    <div class="c_filed required">
                                        <label for="card-cvc">CVC</label>
                                        {{-- <input class='form-control card-expiry-year' placeholder='YYYY' size='4' type='number'> --}}
                                        <div id="card-cvc" class='form-control card-expiry-year custom-card-elements'>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- A Stripe Element will be inserted here. -->

                            <div class="row">
                                <div class="col col-12">
                                    <div class="c_btn c_btn_red">
                                        <input class='form-control' size='4' id="order_id" name="order_id"
                                            value="{{ $order->id }}" type='hidden'>
                                        <button id="submit">Pay Now (${{ $order->total }})</button>
                                        <div id="loader-custom" style="display: none;">Your payment is ounder processing, Please wait a while.</div> 
                                        <div id="error-message"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>


    {{-- </div> --}}

</section>

@include('front.layouts.app-footer')
@endsection
@section('custom-js')
<script>
    const stripe = Stripe('{{ Config::get('constant.STRIPE_KEY') }}'); // Replace with your Stripe public key
    const loader = document.getElementById('loader-custom');
    const submitBtn = document.getElementById('submit');
    
    const elements = stripe.elements();
    // const cardElement = elements.create('card');
    // cardElement.mount('#card-element');
    const cardNumber = elements.create('cardNumber');
    const cardExpiry = elements.create('cardExpiry');
    const cardCvc = elements.create('cardCvc');

    cardNumber.mount('#card-number');
    cardCvc.mount('#card-cvc');
    cardExpiry.mount('#card-expiry');

    const form = document.getElementById('payment-form');

    form.addEventListener('submit', async (event) => {
        event.preventDefault();
        loader.style.display = 'block';
        document.getElementById('error-message').innerText = '';
        submitBtn.disabled = true;
        const {paymentMethod,error} = await stripe.createPaymentMethod({
            type: 'card',
            card: cardNumber
        });

        if (error) {
            // Display error.message in your UI.
            loader.style.display = 'none';
            submitBtn.disabled = false;
            document.getElementById('error-message').innerText = error.message;
        } else {
            // Send paymentMethod.id to your server
            const response = await fetch('/stripe-post', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}', // Laravel CSRF token
                },
                body: JSON.stringify({
                    stripeToken: paymentMethod.id,
                    amount: 10, // Replace with your actual amount
                    order_id: $('#order_id').val()
                }),
            });

            const paymentResponse = await response.json();
// console.log(paymentResponse);
            if (paymentResponse.requires_action) {
                const result = await stripe.confirmCardPayment(paymentResponse.client_secret);
                if (result.error) {
                    // Show error to your customer
                    loader.style.display = 'none';
                    submitBtn.disabled = false;
                    document.getElementById('error-message').innerText = result.error.message;
                } else {
                    // Payment succeeded
                    if (result.paymentIntent.status === 'succeeded') {
                        loader.style.display = 'none';
                        submitBtn.disabled = false;
                        window.location = "{{route('order-success')}}";
                        // alert('Payment succeeded!');
                    }
                }
            } else if (paymentResponse.status) {
                loader.style.display = 'none';
                submitBtn.disabled = false;
                window.location = "{{route('order-success')}}";
                // alert('Payment succeeded!');
            } else {
                loader.style.display = 'none';
                submitBtn.disabled = false;
                window.location = "{{route('order-cancel')}}";
                // document.getElementById('error-message').innerText = 'Payment failed.';
            }
        }
    });
</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=number]', '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('d-none');

            $('.has-error').removeClass('has-error');
            $inputs.each(function(i, el) {
                var $input = $(el);
                if ($input.val() === '') {
                    $input.parent().addClass('has-error');
                    $errorMessage.removeClass('d-none');
                    e.preventDefault();
                }
            });
            const name = $('#card-name').val();
            if (name == "") {
                $('.error')
                    .removeClass('d-none')
                    .find('.alert')
                    .text('Please enter your name');
                return;
            }

            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('d-none')
                    .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