@extends('layouts.landing')

@section('content')
<style>
    .content-wrapper {
        border-bottom: 1px solid #ccc;
    }

    .price-content h3,
    .total-content h3 {
        font-size: 20px;
    }

    .price-content p {
        font-size: 16px;
    }

    .priceing-content h3 {
        font-size: 18px;
        font-weight: 600;
    }

    .total-content {
        margin-top: 20px;
    }

    .usr-info {
        border: none;
        border-bottom: 1px solid #ccc;
        margin-bottom: 20px;
        border-radius: 0px;
    }

    .pkg-content h3 {
        font-size: 22px;
        font-weight: 600;
        color: #ccc;
    }

    .buy-btn {
        background-color: var(--accent-color);
        color: #fff;
    }

    .buy-btn,
    .send-btn {
        padding: 10px;
        border-radius: 6px;
        width: 100%;
        display: block;
        text-align: center;
        margin: 20px auto 0 auto;
    }

    .buy-btn:hover {
        background-color: #000;
        color: #fff;
    }

    .send-btn {
        background-color: #000;
        color: #fff;
    }

    .send-btn:hover {
        background-color: var(--accent-color);
        color: #fff;
    }
    .form-control:focus{
        box-shadow: none;
        outline: 0;
    }
</style>
<section class="container-fluid">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="signup-content">
                    <div class="signwraper">
                    <div class="card-header">
                        <h2 class="mb-0 text-center"><strong class="text-warning">Pricing</strong> Plan</h2>
                    </div>
                    <div class="row mt-4">
                        <div class="col-md-5">
                            <div class="pkg-content">
                                <h3 class="text-warning">{{ isset($subscription)?$subscription->name:'-'}}</h3>
                                <ul class="list-inline">
                                    {!! html_entity_decode($subscription->description) !!}
                                    <!-- <li><i class="bi bi-check"></i> <span>Quam adipiscing vitae proin</span></li>
                        <li><i class="bi bi-check"></i> <span>Quam adipiscing vitae proin</span></li>
                        <li><i class="bi bi-check"></i> <span>Quam adipiscing vitae proin</span></li> -->
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-7">
                            <div class="row content-wrapper">
                                <div class="col-12">
                                    <div class="n-user">
                                        <form action="">
                                            <label for="Number of users">Number of users</label>
                                            <input type="number" min="1" class="form-control usr-info" name="no_of_users" id="no_of_users" value="1">
                                        </form>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="price-content">
                                        <h3><span id="user_span">1</span> Users</h3>
                                        <p class="mb-0"> Discount Amount</p>
                                    </div>
                                </div>
                                <div class="col-6 d-flex justify-content-end">
                                    <div class="priceing-content">
                                        <h3 id="per_user_price">
                                            {{ App\Models\Subscription::getAmount($subscription->id)['per_user_month_price'] }} Rs
                                        </h3>
                                        <h3 id="discount_price" class="discount text-success">- {{ App\Models\Subscription::getAmount($subscription->id)['discount_amt'] }} Rs</h3>
                                    </div>
                                </div>
                                <div class="brd"></div>
                            </div>
                            <div class="row total-content">
                                <div class="col-6">
                                    <h3 class="mb-3">GST Amount</h3>
                                </div>
                                <div class="col-6 d-flex justify-content-end">
                                    <h3 id="gst_price">{{ App\Models\Subscription::getAmount($subscription->id)['gst_amt'] }} Rs</h3>
                                </div>
                                <div class="col-6">
                                    <h3><strong>Total Amount</strong></h3>
                                </div>
                                <div class="col-6 d-flex justify-content-end">
                                    <h3 id="total_price">{{ App\Models\Subscription::getAmount($subscription->id)['total'] }} Rs</h3>
                                </div>
                                <!-- <div class="col-12">
                            <p class="mb-0 mt-2 text-center">(*) Billed annually: 580.00 Rs</p>
                         </div> -->
                                <div class="col-12">
                                <!-- <a  href="#collapseExample"  class="buy-btn" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="collapseExample">Buy Now</a> -->
                                <!-- <a  href="{{ route('create.order') }}"  class="buy-btn" >Buy Now</a> -->
                                <button id="pay-button" class="buy-btn">Pay Now</button>
                                </div>
                                <!-- <div class="col-12">
                             <a href="#" class="send-btn">Send / Print the quote</a>
                         </div> -->
                            </div>
                        </div>
                    </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
            <!-- <div class="signup-content">
                <div class="collapse" id="collapseExample">
                    <div class="card card-body">
                        <div class="card-header-title">
                            <h3>Payment Details</h3>
                        </div>
                        <ul class="list-inline mb-0 d-flex justify-content-between">
                            <li class="list-inline-item"><p class="mb-0">User Name</p></li>
                            <li class="list-inline-item"><p class="mb-0 font-weight-bold">Nimesh Lad</p></li>
                        </ul>
                        <ul class="list-inline mb-0 d-flex justify-content-between">
                        <li class="list-inline-item"><p class="mb-0">Plan Name</p></li>
                        <li class="list-inline-item"><p class="mb-0 font-weight-bold">Basic</p</li>
                        </ul>
                        <ul class="list-inline mb-0 d-flex justify-content-between">
                        <li class="list-inline-item"><p class="mb-0">Price</p></li>
                        <li class="list-inline-item"><p class="mb-0 font-weight-bold">300</p></li>
                        </ul>
                         <a href="{{ route('create.order') }}" class="buy-btn">Pay Now</a>  
                    </div>
                </div>
            </div> -->
            </div>
        </div>

</section>
@endsection

@push('scripts')
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
    $(document).ready(function() {
        function updatePricing() {
            let noOfUsers = $("#no_of_users").val();

            $.ajax({
                url: "{{ route('update.pricing') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    subscription_id: "{{ $subscription->id }}",
                    no_of_users: noOfUsers
                },
                success: function(response) {
                    $("#user_span").text(noOfUsers);
                    $("#per_user_price").text(response.per_user_price + " Rs");
                    $("#discount_price").text("-" + response.discount_amt + " Rs");
                    $("#gst_price").text(response.gst_amt + " Rs");
                    $("#total_price").text(response.total_price + " Rs");
                }
            });
        }

        // Call function on page load
        updatePricing();

        // Call function when input changes
        $("#no_of_users").on("input", function() {
            updatePricing();
        });
    });

</script>

<script>
    document.getElementById('pay-button').addEventListener('click', function (e) {
        e.preventDefault();

        // Fetch order details from the Laravel backend
        fetch("{{ route('create.order') }}", {
            method: "GET",
            headers: {
                "Accept": "application/json"
            }
        })
        .then(response => response.json())
        .then(data => {
            if (!data.order_id) {
                console.error("Order ID is missing in response:", data);
                alert("Error creating order. Please try again.");
                return;
            }

            var options = {
                "key": "rzp_test_9eJ4E4sFDcVC0N", // Your Razorpay Key
                "amount": data.amount, // Amount in paise
                "currency": "INR",
                "name": "Your Company Name",
                "description": "Subscription Payment",
                "order_id": data.order_id, // Razorpay Order ID
                "handler": function (response) {
                    console.log("Payment Success:", response);
 
                    // Send the payment details to Laravel for verification
                    fetch("/verify-payment", {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/json",
                            "X-CSRF-TOKEN": "{{ csrf_token() }}"
                        },
                        body: JSON.stringify(response)
                    })
                    .then(res => res.json())
                    .then(data => {
                        if (data.success) {
                            window.location.href = "{{ route('payment.success') }}";
                        } else {
                            alert("Payment verification failed. Please contact support.");
                        }
                    })
                    .catch(error => {
                        console.error("Error verifying payment:", error);
                        alert("Payment verification error. Please try again.");
                    });
                },
                "prefill": { // Pre-fill customer details
                    "name": data.name,
                    "email": data.email,
                    "contact": data.mobile_number
                },
                "theme": {
                    "color": "#3399cc"
                }
            };

            var rzp1 = new Razorpay(options);
            rzp1.open();
        })
        .catch(error => {
            console.error("Error creating order:", error);
            alert("Order creation failed. Please try again.");
        });
    });
</script>

@endpush