<%-include('navbar.ejs')%>

<div class="pbmit-title-bar-wrapper login-title-bar">
    <div class="container">
        <div class="pbmit-title-bar-content">
            <div class="pbmit-title-bar-content-inner">
                <div class="pbmit-tbar">
                    <div class="pbmit-tbar-inner container">
                        <h1 class="pbmit-tbar-title">Login / Register</h1>
                    </div>
                </div>
                <div class="pbmit-breadcrumb">
                    <div class="pbmit-breadcrumb-inner">
                        <span><a href="/" class="home">Home</a></span>
                        <span class="sep"><i class="pbmit-base-icon-angle-right"></i></span>
                        <span>Login / Register</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

    <style>


        .checkout-wrapper {
            max-width: 1100px;
            margin: 50px auto;
        }

        .checkout-card {
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 5px 25px rgba(0,0,0,0.08);
            padding: 30px;
        }

        .checkout-title {
            color: #005b85;
            font-weight: 700;
        }

        .service-row {
            border-bottom: 1px solid #eee;
            padding: 15px 0;
        }

        .total-box {
            background: #f1f7fb;
            border-radius: 10px;
            padding: 20px;
        }

        .grand-total {
            font-size: 25px;
            font-weight: 700;
            color: #005b85;
        }

        .pay-btn {
            background: #005b85;
            border: none;
            color: white;
            padding: 14px;
            font-size: 17px;
            font-weight: 600;
            border-radius: 8px;
        }

        .pay-btn:hover {
            background: #00486a;
            color: white;
        }

    </style>




<div class="container checkout-wrapper">


    <div class="checkout-card">


        <!-- Heading -->

        <div class="mb-4">

            <h2 class="checkout-title">

                <i class="fa fa-shopping-cart"></i>

                Verification Package Checkout

            </h2>

            <p class="text-muted mb-0">

                Review your selected verification services before payment.

            </p>

        </div>


        <div class="row g-4">


            <!-- LEFT -->

            <div class="col-lg-7">


                <h5 class="mb-3">

                    Selected Verification Services

                </h5>


                <% if (package.services.length > 0) { %>


                    <% package.services.forEach(function(service) { %>


                        <div class="service-row">


                            <div class="d-flex justify-content-between">


                                <div>

                                    <strong>
                                        <%= service.name %>
                                    </strong>

                                    <div class="text-muted small">

                                        ₹<%= service.price %>
                                        ×
                                        <%= service.quantity %>

                                    </div>

                                </div>


                                <strong>

                                    ₹<%= service.total %>

                                </strong>


                            </div>


                        </div>


                    <% }); %>


                <% } else { %>


                    <p class="text-muted">

                        No services selected.

                    </p>


                <% } %>


            </div>


            <!-- RIGHT -->

            <div class="col-lg-5">


                <div class="total-box">


                    <h5 class="mb-4">

                        Order Summary

                    </h5>


                    <div class="d-flex justify-content-between mb-3">

                        <span>
                            Subtotal
                        </span>

                        <strong>
                            ₹<%= package.subtotal %>
                        </strong>

                    </div>


                    <div class="d-flex justify-content-between mb-3">

                        <span>
                            GST (18%)
                        </span>

                        <strong>
                            ₹<%= package.gst %>
                        </strong>

                    </div>


                    <hr>


                    <div class="d-flex justify-content-between align-items-center">

                        <span>
                            Total
                        </span>

                        <span class="grand-total">

                            ₹<%= package.grandTotal %>

                        </span>

                    </div>


                    <button
                        type="button"
                        id="payNowBtn"
                        class="btn pay-btn w-100 mt-4">

                        <i class="fa fa-credit-card me-2"></i>

                        Proceed to Payment

                    </button>


                    <a
                        href="/makeown-package"
                        class="btn btn-outline-secondary w-100 mt-2">

                        <i class="fa fa-arrow-left me-2"></i>

                        Modify Package

                    </a>


                </div>


            </div>


        </div>


    </div>


</div>


<script>

document.getElementById("payNowBtn").addEventListener(
    "click",
    function () {

        Swal.fire({

            icon: "info",

            title: "Payment Gateway",

            text: "Payment integration will be available here."

        });

    }
);

</script>

<%-include('footer.ejs')%>  