@extends('front.include.app')

@section('content')
    <style>
        .paypal-container {
            width: 50%;
            margin: auto;
        }
    </style>
    <!-- Begin: Main Slider -->
    <div class="innerBan">
        <img src="{{ asset('front/images/innerbnr1.png') }}" class="w-100" alt="">
        <div class="overlay">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-12">
                        <h2>Payment</h2>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End: Main Slider -->

    <section class="check-out-section">
        <div class="container">
            <div class="check-out-form check-out-3">
                <h2 class="primary-heading">Payment Methods</h2>

                <div class="my-5">

                    <button class="themeBtn stripe">Stripe</button>

                    <button class="themeBtn paypal">Paypal</button>
                </div>

                <form method="POST" action="{{ route('admin.payment.process') }}" id="stripe-payment">
                    @csrf
                    <div class="col-12 offset-lg-1 col-lg-10">
                        <div class="row tabs-row fields-row">
                            <div class="col-12 text-center mb-4">
                                <img src="images/card-img.png" alt="">
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>CARD NUMBER</label>
                                    <input autocomplete='off' class='form-control card-number' maxlength="19" required>
                                    <div id="card-errors" role="alert" style="color: red;"></div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>NAME ON CARD</label>
                                    <input type="text" class="form-control" placeholder="NAME ON CARD" required>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>CVV</label>
                                    <input type="text" size="4" autocomplete='off' class='form-control card-cvc'
                                        placeholder='ex. 311' required>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>EXPIRATION MONTH</label>
                                    <input class='form-control card-expiry-month' placeholder='MM' size='2'
                                        type="text" maxlength="2" required>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>EXPIRATION YEAR</label>
                                    <input class='form-control card-expiry-year' maxlength="4" placeholder='YYYY'
                                        size='4' type='text' required>
                                </div>
                            </div>
                            <div class="col-md-6 mt-25">
                                <div class="col-md-12 checkbox">
                                    <input type="checkbox" id="box-2">
                                    <label for="box-2">
                                        <h5>Save Card</h5>
                                        Information is encrypted and securely stored.
                                    </label>
                                </div>
                            </div>
                            <div class="col-12 mt-20">
                                <button type="submit" class="themeBtn w-100" id="submit">Place Order</button>
                            </div>
                        </div>
                    </div>
                </form>

                <div id="paypal-button-container" class="paypal-container" style="display: none;"></div>
            </div>
        </div>
    </section>
    @php
        $grandTotal = session()->get('grand_total', []);
    @endphp
@endsection

@section('script')
    <script src="https://js.stripe.com/v2/"></script>
    <script src="https://www.paypal.com/sdk/js?client-id={{ env('PAYPAL_CLIENT_ID') }}&currency=CAD"></script>

    <script>
        $(document).ready(function() {
            let CartTotal = '{{ $grandTotal }}';

            $('.stripe').click(function() {
                $('#stripe-payment').show();
                $('#paypal-button-container').hide();
            });

            $('.paypal').click(function() {
                $('#stripe-payment').hide();
                $('#paypal-button-container').show();
                if (!$('#paypal-button-container').data('loaded')) {

                    if (!$('#paypal-button-container').data('loaded')) {
                        paypal.Buttons({
                            createOrder: function(data, actions) {
                                return actions.order.create({
                                    purchase_units: [{
                                        amount: {
                                            value: CartTotal
                                        }
                                    }]
                                });
                            },
                            onApprove: function(data, actions) {
                                return actions.order.capture().then(function(details) {
                                    // Send payment info to server
                                    $.ajax({
                                        url: '{{ route('admin.payment.process') }}',
                                        type: 'POST',
                                        data: {
                                            paypal_order_id: data.orderID,
                                            paypal_payer_id: details.payer
                                                .payer_id
                                        },
                                        success: function(response) {
                                            window.location.href =
                                                response.route;
                                            toastr.success(
                                                'Order has been successfully placed'
                                            );
                                        },
                                        error: function() {
                                            alert(
                                                'Payment failed, please try again.'
                                            );
                                        }
                                    });
                                });
                            }
                        }).render('#paypal-button-container');

                        $('#paypal-button-container').data('loaded', true);
                    }
                }

            });

            var $form = $('#stripe-payment');
            let PublishableKey = '{{ env('STRIPE_KEY') }}';

            $form.on('submit', function(e) {
                e.preventDefault();

                let cardNumber = $('.card-number').val();
                let cardCVC = $('.card-cvc').val();
                let cardExpMonth = $('.card-expiry-month').val();
                let cardExpYear = $('.card-expiry-year').val();

                // Reset error state
                var $errorMessage = $('#card-errors');
                $errorMessage.text('');

                if (cardNumber === '' || cardCVC === '' || cardExpMonth === '' ||
                    cardExpYear === '') {
                    $errorMessage.text(
                        "Please fill in all fields."); // Alert if validation fails
                    return; // Don't submit if validation fails
                }

                cardNumber = cardNumber.split(' ');
                cardNumber = cardNumber.join('');
                console.log(cardNumber)

                let stripePublishableKey = PublishableKey;
                Stripe.setPublishableKey(stripePublishableKey);

                Stripe.card.createToken({
                    number: cardNumber,
                    cvc: cardCVC,
                    exp_month: cardExpMonth,
                    exp_year: cardExpYear,
                }, function(status, response) {
                    if (response.error) {
                        $errorMessage.text(response.error.message);
                    } else {
                        $form.append(
                            "<input type='hidden' name='stripe_token' value='" +
                            response
                            .id + "'/>");

                        var formData = $form.serialize();
                        $.ajax({
                            url: $form.attr('action'),
                            type: 'POST',
                            data: formData,
                            success: function(response) {
                                if (response.success == true) {
                                    window.location.href = response.route;
                                    toastr.success(
                                        'Order has been successfully place'
                                    );
                                } else {
                                    alert(response.message ||
                                        'Payment failed. Please try again.'
                                    );
                                }
                            },
                            error: function(xhr, status, error) {
                                alert(
                                    'Payment failed! Please try again.'
                                );
                            },
                            complete: function() {
                                $('.card-number').val('');
                                $('.card-cvc').val('');
                                $('.card-expiry-month').val('');
                                $('.card-expiry-year').val('');
                            }
                        });
                    }
                });
            });
            $('.card-number').on('input', function() {
                let value = $(this).val().replace(/\D/g, ''); // Remove non-digits
                let formatted = value.replace(/(.{4})/g, '$1 ').trim(); // Add space after every 4 digits
                $(this).val(formatted);
            });
        });
    </script>
@endsection