@extends('front.layout.app')

@section('css')
    <script src="https://js.stripe.com/v3/"></script>
    <style>
        .checkout-container {
            max-width: 900px;
            margin: 50px auto;
        }
        .billing-form {
            /*background-color: #f9f9f9;*/
            padding: 20px;
            border-radius: 5px;
        }
        .order-summary {
            /*background-color: #fff;*/
            padding: 20px;
            border: 1px solid #eaeaea;
            border-radius: 5px;
        }
        .total-text {
            color: #6444ef;
            font-weight: bold;
            font-size: 1.5rem;
        }
        .form-label {
            font-weight: bold;
        }


        #payment-form {
            /*background: white;*/
            padding: 20px;
            /*border-radius: 8px;*/
            /*box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);*/
            /*width: 100%;*/
            min-height: 400px;

        }

        h1 {
            text-align: center;
            color: #333;
        }

        #card-element {
            margin-bottom: 15px;
            padding: 10px;
            border: 1px solid #ccc;
            /*border-radius: 4px;*/
        }

        .payment-button {
            width: 100%;
            padding: 10px;
            background-color: #6772e5;
            border: none;
            border-radius: 4px;
            color: white;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .payment-button:hover {
            background-color: #5469d4;
        }

        #payment-result {
            margin-top: 10px;
            text-align: center;
            color: green;
        }

        .success-container {
            margin-top: 50px;
            text-align: center;
        }
        .success-icon {
            font-size: 100px;
            color: #28a745;
        }
        .card {
            margin: auto;
            width: 100%; /* Set width to 1/3 */
        }

    </style>
@endsection

@section('content')

    <div class="container checkout-container" id="paymentInProgress">


        <div class="row">
            <h4>Checkout</h4>
            <div class="col-lg-8">

                <div class="card billing-form mb-4" id="billing">
                    <div class="card-body">
                        <h4 class="card-title mb-4">Billing Information</h4>
                        <form id="checkoutForm">
                            @csrf {{-- Include CSRF Token --}}

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="firstName" class="form-label">First Name :</label>
                                    <input type="text" name="firstName" class="form-control">
                                    <span class="error" id="firstNameError"></span>
                                </div>

                                <div class="col-md-6">
                                    <label for="lastName" class="form-label">Last Name :</label>
                                    <input type="text" name="lastName" class="form-control">
                                    <span class="error" id="lastNameError"></span>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="address" class="form-label">Address : *</label>
                                <input type="text" name="address" class="form-control">
                                <span class="error" id="addressError"></span>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <label for="city" class="form-label">City : *</label>
                                    <input type="text" name="city" class="form-control">
                                    <span class="error" id="cityError"></span>
                                </div>
                                <div class="col-md-4">
                                    <label for="state" class="form-label">State : *</label>
                                    <input type="text" name="state" class="form-control">
                                    <span class="error" id="stateError"></span>
                                </div>
                                <div class="col-md-4">
                                    <label for="postalCode" class="form-label">Postal Code : *</label>
                                    <input type="text" name="postalCode" class="form-control">
                                    <span class="error" id="postalCodeError"></span>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="country" class="form-label">Country : *</label>
                                <select name="country" class="form-select">
                                    <option value="India">India</option>
                                    <option value="USA">USA</option>
                                    <option value="UK">UK</option>
                                    <option value="Australia">Australia</option>
                                </select>
                                <span class="error" id="countryError"></span>
                            </div>

                            <div class="mb-3">
                                <label for="subdomain" class="form-label">Subdomain</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text" id="basic-addon1">https://</span>
                                    </div>
                                    <input type="text" name="subdomain" class="form-control" id="subdomain" style="height: 38px" placeholder="example" aria-label="Subdomain" aria-describedby="basic-addon1">
                                    <div class="input-group-append">
                                        <span class="input-group-text">.nuksy.com</span>
                                    </div>
                                </div>
                                <span class="error" id="subdomainError"></span>
                            </div>

                            <button type="button" id="submit-button" class="btn btn-primary">Continue ➔</button>
                        </form>

                        {{-- Success message --}}
                        <div id="successMessage" class="alert alert-success mt-3" style="display: none;">
                            Form submitted successfully!
                        </div>

                        {{-- Error message --}}
                        <div id="errorMessage" class="alert alert-danger mt-3" style="display: none;">
                            There was an error submitting the form.
                        </div>
                    </div>
                </div aside>

                <div class="card billing-form mb-4 d-none" id="paymentCard">

                <form id="payment-form" style="padding-top: 3%">

                    <h4>Stripe Payment</h4>
                    <div id="card-element"></div>
                    <button type="submit" class="payment-button">Pay</button>
                </form>
                <div id="payment-result"></div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="card order-summary">
                    <div class="card-body">
                        <h4 class="card-title mb-4">Order Summary</h4>
                        <p><strong>Template : </strong> {{$template->name}} <span class="float-end">£{{$template->price}}</span></p>
                        <p><strong>Plugins : </strong> {{implode(",",collect($plugins)->pluck('name')->toArray())}} <span class="float-end">£{{$pluginsPrices}}</span></p>
                        <p><strong>Hosting Plan : </strong> Premium <span class="float-end">£{{$hostingPackage->price}}</span></p>
                        <p><strong>Sub Total</strong> <span class="float-end">£{{$totalPrice}}</span></p>
                        <hr>
                        <p class="total-text">Total <span class="float-end">£{{$totalPrice}}</span></p>
                    </div>
                </div>
            </div>
        </div>


    </div>

    <div class="container success-container d-none" id="paymentSuccess">
        <div class="card">
            <div class="card-body">
                <h1 class="success-icon">✔️</h1>
                <h2>Payment Successful!</h2>
                <p>Thank you for your payment. Your transaction has been completed successfully.</p>

                <div class="transaction-details table-responsive text-center row  mt-4">
                    <h4>Transaction Details</h4>
                    <table class="table table-bordered table-striped" style="text-align: left;
    width: 600px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);">
                        <tr>
                            <td>
                                <strong>Transaction ID:</strong>
                            </td>
                            <td>
                                <span id="transId">34123412342134123412</span>
                            </td>

                        </tr>
                        <tr>
                            <td>
                                <strong>Amount:</strong>
                            </td>
                            <td>
                                £<span id="amount">100.00</span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <strong>Date:</strong>
                            </td>
                            <td>
                                <span id="dateTime"></span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <strong>Template Name:</strong>
                            </td>
                            <td>
                                <span id="templateName"></span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <strong>Hosing Package:</strong>
                            </td>
                            <td>
                                <span id="packageName"></span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <strong>Addon:</strong>
                            </td>
                            <td>
                                <span id="plugins"></span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <strong>Payment Status:</strong>
                            </td>
                            <td>
                               Completed
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <strong>Order Status:</strong>
                            </td>
                            <td>
                                Pending
                            </td>
                        </tr>
                    </table>
                </div>

                <a href="/" class="btn btn-success mt-4">Return to Homepage</a>
            </div>
        </div>
    </div>

@endsection

@section('script')

    <script>
        $(document).ready(function() {
            $('#submit-button').click(function(event) {
                event.preventDefault(); // Prevent the default form submission behavior

                let formData = $("#checkoutForm").serialize(); // Serialize form data

                console.log(formData)

                // Clear previous errors
                $('.error').text('');
                $('#successMessage').hide();
                $('#errorMessage').hide();

                // AJAX call
                $.ajax({
                    url: "{{ route('savePurchase', ['token' => $token]) }}", // Replace 'sara-jones' dynamically as needed
                    method: 'POST',
                    data: formData,
                    success: function(response) {
                        if (response.success) {

                            $("#billing").addClass('d-none');
                            $("#paymentCard").removeClass('d-none');
                            // $('#successMessage').show();
                            // $('#checkoutForm')[0].reset(); // Clear form
                        }
                    },
                    error: function(xhr) {
                        $('#errorMessage').show();
                        let errors = xhr.responseJSON.errors;

                        if (errors) {
                            // Show validation errors
                            if (errors.address) {
                                $('#addressError').text(errors.address[0]);
                            }
                            if (errors.city) {
                                $('#cityError').text(errors.city[0]);
                            }
                            if (errors.state) {
                                $('#stateError').text(errors.state[0]);
                            }
                            if (errors.postalCode) {
                                $('#postalCodeError').text(errors.postalCode[0]);
                            }
                            if (errors.country) {
                                $('#countryError').text(errors.country[0]);
                            }
                        }
                    }
                });
            });
        });
    </script>

    <script>
        const stripe = Stripe('{{ env('STRIPE_KEY') }}'); // Your Stripe publishable key
        const elements = stripe.elements();
        const cardElement = elements.create('card');
        cardElement.mount('#card-element');

        document.getElementById('payment-form').addEventListener('submit', async (event) => {
            event.preventDefault();

            const {token, error} = await stripe.createToken(cardElement);


            if (error) {
                console.error(error.message);
            } else {
                const csrfToken = '{{csrf_token()}}';

                const response = await fetch('{{route('checkout',$token)}}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrfToken, // Include CSRF token
                    },
                    body: JSON.stringify({ stripeToken: token.id }),
                });

                const data = await response.json();

                if (data.status == 'true') {
                    $("#paymentInProgress").addClass('d-none');
                    $("#paymentSuccess").removeClass('d-none');
                    $("#transId").text(data.paymentIntent.id)
                    $("#amount").text(data.paymentIntent.amount_received/100)
                    $("#dateTime").text(data.now);
                    $("#templateName").text(data.templateName);
                    $("#packageName").text(data.hostingPackageName);
                    $("#plugins").text(data.pluginsName);
                }

                console.log(data);
                if (data.requires_action) {
                    // Handle 3D Secure authentication
                    const result = await stripe.confirmCardPayment(data.client_secret);
                    if (result.error) {
                        console.error(result.error.message);
                    } else {
                        if (result.paymentIntent.status === 'succeeded') {

                            document.getElementById('payment-result').innerText = 'Payment Successful!';
                        }
                    }
                } else {
                    document.getElementById('payment-result').innerText = data.status;
                }
            }
        });
    </script>

@endsection