@extends('layouts/contentNavbarLayout')

@section('title', 'Checkout - Checkout Page')

@section('page-style')
    <style>
        .product-details,
        .card-details {
            width: 48%;
            padding: 20px;
        }

        h2 {
            margin-bottom: 20px;
            color: #333;
        }

        .product-item {
            display: flex;
            gap: 15px;
        }

        .product-item img {
            width: 100px;
            height: 100px;
            object-fit: cover;
            border-radius: 10px;
        }

        .product-item div {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .card-details form {
            display: flex;
            flex-direction: column;
        }

        label {
            margin-top: 10px;
            color: #555;
        }

        input {
            padding: 10px;
            margin-top: 5px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
        }

        button {
            margin-top: 20px;
            padding: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 5px;
            font-size: 18px;
            cursor: pointer;
        }

        button:hover {
            background-color: #0056b3;
        }

        .has-error {
            border: 1px solid red;
        }

        .error {
            color: red;
        }

        .card-input-container {
            display: flex;
            gap: 25px;
            flex-wrap: wrap;
        }

        .card-input-container .card-input {
            width: 48%;
        }

        #card-element,
        #expiry-element,
        #cvc-element {
            background-color: #fff;
            padding: 5px;
            border-radius: 8px;
            border: 1px solid #ddd;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        #card-element:hover,
        #expiry-element:hover,
        #cvc-element:hover {
            border: 1px solid #aaa;
        }

        /* Style for the submit button */
        /* #submit-button {
                                                                                                                                                                                                        background-color: #4CAF50;
                                                                                                                                                                                                        color: white;
                                                                                                                                                                                                        border: none;
                                                                                                                                                                                                        padding: 10px 20px;
                                                                                                                                                                                                        border-radius: 4px;
                                                                                                                                                                                                        cursor: pointer;
                                                                                                                                                                                                        font-size: 16px;
                                                                                                                                                                                                        margin-top: 20px;
                                                                                                                                                                                                        width: 100%;
                                                                                                                                                                                                    }

                                                                                                                                                                                                    #submit-button:hover {
                                                                                                                                                                                                        background-color: #45a049;
                                                                                                                                                                                                    } */
    </style>
@endsection

@section('content')
    <h4 class="py-3 mb-4">
        <span class="text-muted fw-light">
            <a href="{{ route('dashboard') }}" class="text-muted text-decoration-none">Dashboard</a> /
            <a href="{{ route('subscriptions') }}" class="text-muted text-decoration-none">Subscriptions</a> /
        </span>
        Check Out
    </h4>

    <div class="container">
        <div class="card px-4">
            <div class="row">
                <div class="col-lg-7 card-body border-end p-8 ps-7">
                    <h4 class="mb-2">Checkout</h4>
                    <p class="mb-0">All plans include 40+ advanced tools and features to boost your product. <br>
                        Choose the best plan to fit your needs.</p>
                    <div class="row my-8 gx-5 mb-2">
                        <div class="col-md mb-md-0 mb-2">
                            <div class="form-check custom-option custom-option-basic checked">
                                <label
                                    class="form-check-label custom-option-content form-check-input-payment d-flex gap-4 align-items-center"
                                    for="customRadioVisa">
                                    <input name="customRadioTemp" class="form-check-input payment-method" type="radio"
                                        value="credit-card" id="customRadioVisa" checked="">
                                    <span class="custom-option-body d-flex align-items-center gap-4 row-gap-2">
                                        <img src="{{ asset('assets/img/icons/misc/stripe.svg') }}" alt="stripe"
                                            width="25px">
                                        <span class="text-nowrap">Stripe</span>
                                    </span>
                                </label>
                            </div>
                        </div>
                        <div class="col-md mb-md-0 mb-2">
                            <div class="form-check custom-option custom-option-basic">
                                <label
                                    class="form-check-label custom-option-content form-check-input-payment d-flex gap-4 align-items-center"
                                    for="customRadioAuthorize">
                                    <input name="customRadioTemp" class="form-check-input payment-method" type="radio"
                                        value="authorize" id="customRadioAuthorize">
                                    <span class="custom-option-body">
                                        <img src="{{ asset('assets/img/icons/misc/authorize.jpeg') }}" alt="authorize"
                                            width="25px">
                                        <span class="ms-4">Authorize</span>
                                    </span>
                                </label>
                            </div>
                        </div>
                        <div class="col-md mb-md-0 mb-2">
                            <div class="form-check custom-option custom-option-basic">
                                <label
                                    class="form-check-label custom-option-content form-check-input-payment d-flex gap-4 align-items-center"
                                    for="customRadioPaypal">
                                    <input name="customRadioTemp" class="form-check-input payment-method" type="radio"
                                        value="paypal" id="customRadioPaypal">
                                    <span class="custom-option-body">
                                        <img src="{{ asset('assets/img/icons/misc/paypal.svg') }}" alt="paypal"
                                            width="25px">
                                        <span class="ms-4">Paypal</span>
                                    </span>
                                </label>
                            </div>
                        </div>
                    </div>

                    <div id="form-credit-card" class="">
                        <h4 class="mt-8 mb-2">Credit Card Info</h4>
                        <form action="{{ route('customer.processPayment') }}" method="POST" id="payment-form">
                            @csrf
                            <input type="hidden" name="product_id" value="{{ $productDetail['product_id'] ?? '' }}">
                            <input type="hidden" name="product_price" value="{{ $productDetail['price'] ?? '' }}">
                            <input type="hidden" id="hiddenInput" name="quantity" value="1" min="1">
                            <div class="form-group">
                                <label for="card-element mb-1">Card Number</label>
                                <div id="card-element"></div>
                            </div>

                            <div class="form-group">
                                <div class="card-input">
                                    <label for="expiry-element mb-1">Expiration Date</label>
                                    <div id="expiry-element"></div>
                                </div>

                                <div class="card-input">
                                    <label for="cvc-element mb-1">CVC</label>
                                    <div id="cvc-element"></div>
                                </div>
                            </div>

                        </form>
                    </div>

                    {{-- <div id="authorize-credit-card" style="display: none">
                        <h4 class="mt-8 mb-2">Credit Card Info</h4>
                        <form method="POST" action="{{ route('authorize.payment') }}" id="authorize-credit-card-form">
                            @csrf
                            <input type="hidden" name="product_id" value="{{ $productDetail['product_id'] ?? '' }}">
                            <input type="hidden" name="product_price" value="{{ $productDetail['price'] ?? '' }}">
                            <input type="hidden" id="hiddenInput" name="quantity" value="1" min="1">

                            <div class="col-md-12">
                                <label for="card_number"
                                    class="col-form-label text-md-right">{{ __('Card Number') }}</label>

                                <input id="card_number" type="text"
                                    class="form-control @error('card_number') is-invalid @enderror" name="card_number"
                                    required autocomplete="off" maxlength="16" placeholder="4111111111111111">

                                @error('card_number')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror

                            </div>

                            <div class="col-md-12">
                                <label for="expiration_date"
                                    class="col-form-label text-md-right">{{ __('Expiration Date (MM/YY)') }}</label>

                                <input id="expiration_date" type="text"
                                    class="form-control @error('expiration_date') is-invalid @enderror"
                                    name="expiration_date" required autocomplete="off" maxlength="5"
                                    placeholder="12/27">

                                @error('expiration_date')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror

                            </div>
                            <div class="col-md-12">
                                <label for="cvv" class="col-form-label text-md-right">{{ __('CVV') }}</label>

                                <input id="cvv" type="text"
                                    class="form-control @error('cvv') is-invalid @enderror" name="cvv" required
                                    autocomplete="off" maxlength="4" placeholder="1234">

                                @error('cvv')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror

                            </div>

                        </form>
                    </div> --}}

                    <div id="authorize-credit-card" style="display: none">
                        <h4 class="mt-8 mb-2">Credit Card Info</h4>
                        <form method="POST" action="{{ route('authorize.payment') }}" id="authorize-credit-card-form">
                            @csrf
                            <input type="hidden" name="product_id" value="{{ $productDetail['product_id'] ?? '' }}">
                            <input type="hidden" name="product_price" value="{{ $productDetail['price'] ?? '' }}">
                            <input type="hidden" id="hiddenInput" name="quantity" value="1" min="1">

                            <!-- Card Number -->
                            <div class="col-md-12">
                                <label for="card_number"
                                    class="col-form-label text-md-right">{{ __('Card Number') }}</label>
                                <input id="card_number" type="text"
                                    class="form-control @error('card_number') is-invalid @enderror" name="card_number"
                                    value="{{ old('card_number') }}" required autocomplete="off" maxlength="16"
                                    placeholder="4111111111111111">
                                @error('card_number')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                                <span class="invalid-feedback" id="card_number_error" style="display: none;">
                                    <strong>Card number must be exactly 16 digits.</strong>
                                </span>
                            </div>

                            <!-- Expiration Date -->
                            <div class="col-md-12">
                                <label for="expiration_date"
                                    class="col-form-label text-md-right">{{ __('Expiration Date (MM/YY)') }}</label>
                                <input id="expiration_date" type="text"
                                    class="form-control @error('expiration_date') is-invalid @enderror"
                                    name="expiration_date" value="{{ old('expiration_date') }}" required
                                    autocomplete="off" maxlength="5" placeholder="MM/YY">
                                @error('expiration_date')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                                <span class="invalid-feedback" id="expiration_date_error" style="display: none;">
                                    <strong>Expiration date must be in MM/YY format.</strong>
                                </span>
                            </div>

                            <!-- CVV -->
                            <div class="col-md-12">
                                <label for="cvv" class="col-form-label text-md-right">{{ __('CVV') }}</label>
                                <input id="cvv" type="text"
                                    class="form-control @error('cvv') is-invalid @enderror" name="cvv"
                                    value="{{ old('cvv') }}" required autocomplete="off" maxlength="3"
                                    placeholder="123">
                                @error('cvv')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                                <span class="invalid-feedback" id="cvv_error" style="display: none;">
                                    <strong>CVV must be exactly 3 digits.</strong>
                                </span>
                            </div>
                        </form>
                    </div>


                </div>
                <div class="col-lg-5 card-body p-8 pe-7">
                    <h4 class="mb-2">Order Summary</h4>
                    <p class="mb-8">It can help you manage and service orders before,<br> during and after fulfilment.
                    </p>

                    <div class="bg-lightest p-6 rounded">
                        <div class="product-item">
                            <img src="https://images.unsplash.com/photo-1546793665-c74683f339c1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
                                alt="salad" class="img">
                            <div>
                                <h3>{{ $productDetail['product_name'] ?? '' }}</h3>
                                <p>{{ $productDetail['detail'] ?? 'Description of the product goes here. Lorem ipsum dolor sit amet.' }}
                                </p>
                            </div>
                        </div>

                        {{-- <div class="d-flex align-items-center">
                            <h1 class="text-heading">${{ number_format($productDetail['price'], 2) ?? '' }}</h1>
                            <sub class="h6 text-body mb-1">/month</sub>
                        </div> --}}

                    </div>
                    <div class="mt-5">
                        <div class="d-flex justify-content-between align-items-center">
                            <p class="mb-0">Subtotal</p>
                            <h6 class="mb-0">${{ number_format($productDetail['price'], 2) ?? '' }}</h6>
                        </div>
                        <div class="d-flex justify-content-between align-items-center mt-2">
                            <p class="mb-0">Tax</p>
                            <h6 class="mb-0">$0.00</h6>
                        </div>
                        <hr>
                        <div class="d-flex justify-content-between align-items-center pb-1">
                            <p class="mb-0">Total</p>
                            <h6 class="mb-0">${{ number_format($productDetail['price'], 2) ?? '' }}</h6>
                        </div>


                        <div id="credit-card-button" class="mt-5 col-12" style="display: block">
                            <button type="submit" id="submit-button"
                                class="btn btn-primary w-100 waves-effect waves-light">
                                <span class="me-2">Pay with Stripe</span>
                                <i class="ri-arrow-right-line ri-16px scaleX-n1-rtl"></i>
                            </button>
                        </div>


                        <div id="paypal-button" class="mt-5 col-12" style="display: none !important;">
                            <form id="paypal-form" action="{{ route('create-product') }}" method="POST">
                                @csrf
                                <input type="hidden" name="product_id"
                                    value="{{ $productDetail['product_id'] ?? '' }}">
                                <input type="hidden" name="product_price" value="{{ $productDetail['price'] ?? '' }}">
                                <input type="hidden" id="hiddenInput" name="quantity" value="1" min="1">
                                <button type="submit" class="w-100 btn btn-primary waves-effect waves-light">Pay with
                                    PayPal</button>
                            </form>
                        </div>

                        <div id="authorize-button" class="mt-5 col-12" style="display: none !important;">
                            <button type="submit" id="authorize-button-trigger"
                                class="w-100 btn btn-primary waves-effect waves-light">Pay with
                                Authorize</button>
                        </div>

                        <p class="mt-8 mb-0">By continuing, you accept to our Terms of Services and Privacy Policy. Please
                            note that payments are non-refundable.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://js.stripe.com/v3/"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const cardNumberInput = document.getElementById('card_number');
            const expirationDateInput = document.getElementById('expiration_date');
            const cvvInput = document.getElementById('cvv');

            const cardNumberError = document.getElementById('card_number_error');
            const expirationDateError = document.getElementById('expiration_date_error');
            const cvvError = document.getElementById('cvv_error');

            // Validation for Card Number
            cardNumberInput.addEventListener('input', function() {
                const cardNumber = this.value.replace(/\D/g, ''); // Remove non-digit characters
                if (cardNumber.length === 16) {
                    this.classList.remove('is-invalid');
                    cardNumberError.style.display = 'none';
                } else {
                    this.classList.add('is-invalid');
                    cardNumberError.style.display = 'block';
                }
                this.value = cardNumber.slice(0, 16); // Limit to 16 digits
            });

            // Validation for Expiration Date
            expirationDateInput.addEventListener('input', function() {
                let value = this.value.replace(/\D/g, ''); // Remove non-digit characters
                if (value.length > 2) {
                    value = value.slice(0, 2) + '/' + value.slice(2, 4);
                }
                this.value = value.slice(0, 5); // Limit to 5 characters (MM/YY)

                const expirationRegex = /^(0[1-9]|1[0-2])\/\d{2}$/;
                if (expirationRegex.test(this.value)) {
                    this.classList.remove('is-invalid');
                    expirationDateError.style.display = 'none';
                } else {
                    this.classList.add('is-invalid');
                    expirationDateError.style.display = 'block';
                }
            });

            // Validation for CVV
            cvvInput.addEventListener('input', function() {
                const cvv = this.value.replace(/\D/g, ''); // Remove non-digit characters
                if (cvv.length === 3) {
                    this.classList.remove('is-invalid');
                    cvvError.style.display = 'none';
                } else {
                    this.classList.add('is-invalid');
                    cvvError.style.display = 'block';
                }
                this.value = cvv.slice(0, 3); // Limit to 3 digits
            });
        });
        // document.addEventListener('DOMContentLoaded', function() {
        //     const formCreditCard = document.getElementById('form-credit-card');
        //     const authorizeCreditCard = document.getElementById('authorize-credit-card');
        //     const paymentMethods = document.querySelectorAll('.payment-method');
        //     const submitButtonContainer = document.getElementById('credit-card-button');
        //     const paypalButton = document.getElementById('paypal-button');
        //     const authorizeButton = document.getElementById('authorize-button');
        //     const submitButton = submitButtonContainer.querySelector(
        //         '#submit-button'); // Initially, it's the submit button

        //     paymentMethods.forEach(method => {
        //         method.addEventListener('change', function() {
        //             if (this.value === 'credit-card') {
        //                 formCreditCard.style.display = 'block'; // Show the credit card form
        //                 submitButtonContainer.style.display = 'block';
        //                 paypalButton.style.display = 'none';
        //                 authorizeCreditCard.style.display = 'none';
        //                 authorizeButton.style.display = 'none';

        //             } else if (this.value === 'authorize') {
        //                 // alert('ok')
        //                 formCreditCard.style.display = 'none'; // Hide the credit card form
        //                 submitButtonContainer.style.display = 'none';
        //                 paypalButton.style.display = 'none';
        //                 authorizeCreditCard.style.display = 'block';
        //                 authorizeButton.style.display = 'block';

        //             } else {
        //                 formCreditCard.style.display = 'none'; // Hide the credit card form
        //                 submitButtonContainer.style.display = 'none';
        //                 paypalButton.style.display = 'block';
        //                 authorizeCreditCard.style.display = 'none';
        //                 authorizeButton.style.display = 'none';


        //             }
        //         });
        //     });

        //     // Trigger change event on page load to set the initial visibility
        //     document.querySelector('.payment-method:checked').dispatchEvent(new Event('change'));
        // });

        document.addEventListener('DOMContentLoaded', function() {
            const formCreditCard = document.getElementById('form-credit-card');
            const authorizeCreditCard = document.getElementById('authorize-credit-card');
            const paymentMethods = document.querySelectorAll('.payment-method');
            const submitButtonContainer = document.getElementById('credit-card-button');
            const paypalButton = document.getElementById('paypal-button');
            const authorizeButton = document.getElementById('authorize-button');

            // Function to handle the visibility based on the selected payment method
            function handlePaymentMethodChange(selectedValue) {
                if (selectedValue === 'credit-card') {
                    formCreditCard.style.display = 'block'; // Show the credit card form
                    submitButtonContainer.style.display = 'block';
                    paypalButton.style.display = 'none';
                    authorizeCreditCard.style.display = 'none';
                    authorizeButton.style.display = 'none';
                } else if (selectedValue === 'authorize') {
                    formCreditCard.style.display = 'none'; // Hide the credit card form
                    submitButtonContainer.style.display = 'none';
                    paypalButton.style.display = 'none';
                    authorizeCreditCard.style.display = 'block';
                    authorizeButton.style.display = 'block';
                } else {
                    formCreditCard.style.display = 'none'; // Hide the credit card form
                    submitButtonContainer.style.display = 'none';
                    paypalButton.style.display = 'block';
                    authorizeCreditCard.style.display = 'none';
                    authorizeButton.style.display = 'none';
                }
            }

            // Add event listener to all payment method radio buttons
            paymentMethods.forEach(method => {
                method.addEventListener('change', function() {
                    handlePaymentMethodChange(this.value);
                });
            });

            // On page load, check which radio is preselected and apply the correct visibility
            const selectedMethod = document.querySelector('.payment-method:checked');
            if (selectedMethod) {
                handlePaymentMethodChange(selectedMethod.value);
            }
        });


        document.getElementById('authorize-button-trigger').addEventListener('click', function() {
            // Trigger the form submission
            document.getElementById('authorize-credit-card-form').submit();
        });

        // Using "oninput" attribute to mirror values between inputs
        document.getElementById('visibleInput').setAttribute('oninput',
            "document.getElementById('hiddenInput').value = this.value;");
    </script>
    <script>
        var stripe = Stripe('{{ config('services.stripe.key') }}');
        var elements = stripe.elements();

        var style = {
            base: {
                color: '#32325d',
                lineHeight: '30px',
                fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
                fontSmoothing: 'antialiased',
                fontSize: '16px',
                '::placeholder': {
                    color: '#aab7c4'
                },
                padding: '10px 12px',
                borderRadius: '4px',
                border: '1px solid #ccc',
                boxSizing: 'border-box'
            },
            invalid: {
                color: '#fa755a',
                iconColor: '#fa755a'
            }
        }
        // Create individual elements for card number, expiry, and CVC
        var card = elements.create('cardNumber', {
            style: style,
            showIcon: true
        });
        var expiry = elements.create('cardExpiry', {
            style: style
        });
        var cvc = elements.create('cardCvc', {
            style: style
        });

        // Mount each element
        card.mount('#card-element');
        expiry.mount('#expiry-element');
        cvc.mount('#cvc-element');

        document.getElementById('submit-button').addEventListener('click', async function() {
            event.preventDefault();

            var submitButton = document.getElementById('submit-button');
            submitButton.disabled = true;
            submitButton.innerHTML =
                '<span class="me-2">Processing...</span><i class="ri-loader-3-line ri-spin ri-16px"></i>';

            // Ensure button has the primary color
            submitButton.classList.add('btn-primary');
            submitButton.classList.remove('btn');

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

            // Prevent default form submission

            // Collect the token from Stripe
            var {
                token,
                error
            } = await stripe.createToken(card);
            if (error) {
                toastr.error(error.message); // Display error if there is one
                submitButton.disabled = false;
                submitButton.innerHTML = 'Proceed with Payment';
            } else {
                // Add the token to the form and submit it
                var hiddenInput = document.createElement('input');
                hiddenInput.setAttribute('type', 'hidden');
                hiddenInput.setAttribute('name', 'stripeToken');
                hiddenInput.setAttribute('value', token.id);
                form.appendChild(hiddenInput);
                form.submit(); // Submit the form with the token
            }
        });
    </script>


@endsection