@extends('website.layouts.master')
@section('css')
    <style>
        body {
            background-color: #f8f9fa;
        }

        .order-details {
            background-color: #ffffff;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        }

        .form-group label {
            font-weight: bold;
        }

        .pay-now-btn {
            background-color: #2e409a;
            border: none;
        }

        .pay-now-btn:hover {
            background-color: #1c2e5e;
        }

        .invoice-info {
            font-weight: bold;
        }

        .name-address {
            margin-bottom: 20px;
        }

        .order-table {
            border-collapse: collapse;
            width: 100%;
        }

        .order-table th,
        .order-table td {
            border: 1px solid #dee2e6;
            padding: 8px;
            text-align: left;
        }

        .order-table th {
            background-color: #de0100;
            color: white;
        }

        .logo {
            width: 100px;
        }

        .overlay-pay {
            display: block;
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.8);
            z-index: 1000;
        }

        .overlay-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            color: white;
            font-size: 1.5em;
        }

        .spinner {
            border: 12px solid #f3f3f3;
            border-top: 12px solid #2e409a;
            border-radius: 50%;
            width: 80px;
            height: 80px;
            animation: spin 2s linear infinite;
            margin-bottom: 20px;
            text-align: center;
            margin: auto;
        }

        .sub-btn button {
            background-color: #DE0100;
            border-color: #DE0100;
            color: #fff !Important;
            font-family: 'Gilroy-Bold';
            padding: 8px 15px;
            border-radius: 5px;
        }

        .sub-btn button:active {
            border-color: #716f71;
            color: #fff !Important;
            font-family: 'Gilroy-Bold';
            padding: 8px 15px;
            border-radius: 5px;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    </style>
@endsection

@section('content')
    <!-- Loading message container -->
    <div id="loading-message" style="display:none;">
        <div id="loading-overlay" class="overlay-pay">
            <div class="overlay-content">
                <div class="spinner"></div>
                <p><span style="color:red;font-size:20px;">Do not refresh the page</span> <br> Redirecting in <span
                        id="countdown">10</span> seconds...</p>
            </div>
        </div>
    </div>
    {{-- <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="order-details">
                    <div class="row">
                        <div class="col-md-12">
                            <img src="{{ asset('img/logo.png') }}" alt="Company Logo" class="logo mb-2">
                            <h3>Order Details</h3>
                            <div><strong>Order Number:</strong>{{ '#' . $data['order_number'] }}</div>
                            <div><strong>Total Amount:</strong>{{ '$' . $data['amount'] }}</div>
                        </div>
                    </div>
                    <hr>
                    <form id="payment-form" style="margin-top:10px;">
                        <div class="row">
                            <div class="col">
                                <label for="formGroupExampleInput" class="form-label">Name</label>
                                <input type="hidden" value="{{ $data['customer_id'] }}" id="customer-id"
                                    name="customer_id">
                                <input type="text" class="form-control __capitalize" name="first_name"
                                    value="{{ $data['name'] }}" id="name" placeholder="Name" required>
                            </div>
                            <div class="col">
                                <label for="formGroupExampleInput" class="form-label">Email</label>
                                <input type="email" class="form-control __lowercase" value="{{ $data['email'] }}"
                                    id="email" name="email" placeholder="Email" required>
                            </div>
                        </div>


                        <br>
                        <div id="payment-element"></div>
                        <br>
                        <div class="sub-btn">
                            <button id="submit" class="btn-read hvr-shutter-out-horizontal">Pay
                                {{ '$'. $data['amount'] }}</button>
                        </div>
                        <div id="card-errors" style="color: red;"></div>
                        <div id="card-success" style="color: green;"></div>
                    </form>
                </div>
            </div>
        </div>
    </div> --}}

    <section id="main-form">
        <div class="container">
            <div class="row">
                <div class="col-lg-7 offset-lg-3">
                    <form id="payment-form" method="POST">
                        @csrf
                        <div class="company-form mb-3">
                            <h3>ORDER PAYMENT</h3>
                            <div class="row">
                                <div class="col-md-6">
                                    <a class="navbar-brand"><img src="{{ asset('website/assets/img/nfc_logo.png') }}" class="img-fluid"/></a>  
                                </div>

                                <div class="col-md-6" style="text-align: right;padding:20px;">
                                    <div><strong>Plan Name:</strong>{{ $data['plan_name'] ?? '' }}</div>
                                    <div><strong>Total Amount:</strong>{{ '$' . $data['amount'] }}</div>
                                </div>

                            </div>
                            <hr>
                            <div class="row">
                                <div class="col-lg-6 col-sm-12">
                                    <input type="hidden" value="{{ $data['customer_id'] }}" id="customer-id"
                                        name="customer_id">
                                    <input type="hidden" value="{{ $data['plan_id'] }}" id="plan_id"
                                        name="plan_id">
                                    <input type="text" name="name" id="name" class="form-control __capitalize"
                                        id="exampleInputEmail1" value="{{ $data['name'] }}" aria-describedby="emailHelp"
                                        placeholder="Enter Name">

                                </div>

                                <div class="col-lg-6 col-sm-12">
                                    <input type="email" class="form-control __lowercase" id="email" name="email"
                                        value="{{ $data['email'] }}" aria-describedby="emailHelp">

                                </div>
                            </div>
                            <br>
                            <div id="payment-element"></div>
                            <br>


                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="sub_btn mb-2">
                                        <button id="submit" class="btn btn-primary">Pay
                                            {{ '$' . $data['amount'] }}</button>
                                    </div>
                                </div>
                                <div id="card-errors" style="color: red;"></div>
                                <div id="card-success" style="color: green;"></div>

                            </div>
                        </div>

                </div>

            </div>
            </form>
        </div>
        </div>
        </div>
    </section>
@endsection

@section('bottom_script')
    <script>
        function showLoadingMessage() {
            document.getElementById('loading-message').style.display = 'block';
            let countdown = 10;
            const interval = setInterval(() => {
                countdown--;
                document.getElementById('countdown').textContent = countdown;
                if (countdown === 0) {
                    clearInterval(interval);
                }
            }, 1000);
        }
    </script>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://js.stripe.com/v3/"></script>
    <script>
        $('#card-success').text('');
        $('#card-errors').text('');
        var stripe = Stripe("{{ env('STRIPE_PUBLIC_KEY') }}");
        var elements = stripe.elements({
            clientSecret: '{{ $data['client_secret'] }}'
        });

        $('#submit').prop('disabled', true);

        var style = {
            base: {
                fontWeight: 400,
                fontFamily: 'Roboto, Open Sans, Segoe UI, sans-serif',
                fontSize: '16px',
                lineHeight: '1.4',
                color: '#212529',
                backgroundColor: '#fff',
                '::placeholder': {
                    color: '#2E409A',
                }
            },
            invalid: {
                color: '#eb1c26',
            }
        };

        // var paymentElement = elements.create("payment", { style: style });
        var paymentElement = elements.create('payment', {
            style: style,
            fields: {
                billingDetails: {
                    name: 'never',
                    address: {
                        country: 'never'
                    }
                }
            }
        });
        paymentElement.mount("#payment-element");

        paymentElement.on('change', function(event) {
            if (event.error) {
                $('#card-errors').text(event.error.message);
                $('#submit').prop('disabled', true);
            } else {
                $('#card-errors').text('');
                $('#submit').prop('disabled', false);
            }
        });

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

        form.addEventListener('submit', function(ev) {
            ev.preventDefault();
            $('#card-errors').text('');
            $('#card-success').text('');
            showLoadingMessage();
            stripe.confirmPayment({
                elements,
                confirmParams: {
                    return_url: "{{ $data['confirm_return_url'] }}",
                    payment_method_data: {
                        billing_details: {
                            name: '{{ $data['name'] }}',
                            email: '{{ $data['email'] }}',
                            address: {
                                country: 'US' // Provide the country or other necessary billing details
                            }
                        }
                    },
                },
            }).then(function(result) {
                if (result.error) {
                    document.getElementById('loading-message').style.display = 'none';
                    $('#card-errors').text(result.error.message);
                } else {}
            });
        });

//     window.addEventListener('beforeunload', function (e) {
//         e.preventDefault(); // For older browsers
//         e.returnValue = 'Are you sure you want to refresh the data?';
//   });
    </script>
@endsection