{% extends "customer_main.html" %}
{%load static%}

{% block modules_section %}
<!-- This block is intentionally left empty to exclude the modules section -->
{% endblock modules_section %}

{% block content %}

<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> -->

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<style>
    #paymentContent {
        position: relative !important;
        height: 100% !important;
        overflow-y: auto !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }


</style>

<div class="w-full px-5 s:px-9 flex flex-col gap-5 mt-5">
    <div class="w-full h-fit bg-white rounded-md shadow-md px-5 py-9 flex flex-col justify-center items-center">
        <img src="{% static 'images/ositcom_logos/osimenublue.png' %}" class="w-[250px]">

        <!-- PRICING ON DESKTOP -->
        <div class="w-full hidden l:grid grid-cols-3 mt-24">
            <div class="w-full h-full border border-gray-200 border-r-transparent p-9 flex flex-col gap-5 items-center">
                <p class="text-secondosiblue uppercase font-poppinsBold text-3xl text-center">Basic</p>

                <div class="w-full flex flex-col justify-center items-center">
                    <p class="text-osiblue font-poppinsLight text-2xl font-semibold">$0</p>
                    <p class="text-gray-500">monthly/restaurant</p>
                </div>

                <div>
                    <button
                        class="w-fit px-9 py-2 bg-secondosiblue border border-secondosiblue text-white uppercase hover:bg-white hover:text-secondosiblue duration-300 displayPaymentModal">Get
                        Started</button>
                </div>

                <div class="w-full flex flex-col gap-3 mt-5">
                    <h1 class="text-gray-500 text-xl font-light">Features:</h1>

                    <div class="w-full flex flex-col">
                        <div class="flex justify-start items-center gap-2 py-1">
                            <img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
                            <p class="font-semibold text-secondosiblue">Online Ordering (75 Orders)</p>
                        </div>
                        <div class="flex justify-start items-center gap-2 py-1">
                            <img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
                            <p class="font-light text-secondosiblue">Restaurant Website</p>
                        </div>
                        <div class="flex justify-start items-center gap-2 py-1">
                            <img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
                            <p class="font-light text-secondosiblue">Branded Mobile App</p>
                        </div>
                        <div class="flex justify-start items-center gap-2 py-1">
                            <img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
                            <p class="font-light text-secondosiblue">QR Code Menu</p>
                        </div>
                        <div class="flex justify-start items-center gap-2 py-1">
                            <img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
                            <p class="font-light text-secondosiblue">Loyalty Program</p>
                        </div>
                        <div class="flex justify-start items-center gap-2 py-1">
                            <img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
                            <p class="font-light text-secondosiblue">50+ Free Website Templates</p>
                        </div>
                        <div class="flex justify-start items-center gap-2 py-1">
                            <img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
                            <p class="font-light text-secondosiblue">Multi Location</p>
                        </div>
                        <div class="flex justify-start items-center gap-2 py-1">
                            <img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
                            <p class="font-light text-secondosiblue">Online Payments</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="relative">
                <div
                    class="w-full bg-osiblue text-white text-center px-3 py-3 text-xl absolute -top-[54px] rounded-t-md border border-osiblue font-poppinsBold">
                    <p>Best Value</p>
                </div>

                <div class="border h-full border-osiblue w-full p-9 flex flex-col gap-5 items-center">
                    <p class="text-secondosiblue uppercase font-poppinsBold text-3xl text-center">Standard</p>

                    <div class="w-full flex flex-col justify-center items-center">
                        <p class="text-osiblue font-poppinsLight text-2xl font-semibold">$89</p>
                        <p class="text-gray-500">monthly/restaurant</p>
                    </div>

                    <div>
                        <button
                            class="w-fit px-9 py-2 bg-secondosiblue border border-secondosiblue text-white uppercase hover:bg-white hover:text-secondosiblue duration-300 displayPaymentModal">Get
                            Started</button>
                    </div>

                    <div class="w-full flex flex-col gap-3 mt-5">
                        <h1 class="text-gray-500 text-xl font-light">Features:</h1>

                        <div class="w-full flex flex-col">
                            <div class="flex justify-start items-center gap-2 py-1">
                                <img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
                                <p class="font-semibold text-secondosiblue">Online Ordering (75 Orders)</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
                                <p class="font-light text-secondosiblue">Tableside Ordering</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
                                <p class="font-light text-secondosiblue">Table Reservations</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
                                <p class="font-light text-secondosiblue">Premium Website Templates</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
                                <p class="font-light text-secondosiblue">Email & SMS marketing</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
                                <p class="font-light text-secondosiblue">Coupons & Promo Codes</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
                                <p class="font-light text-secondosiblue">Integrations</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
                                <p class="font-light text-secondosiblue">Ordering for the future</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="w-full h-full border border-gray-200 p-9 flex flex-col gap-5 items-center">
                <p class="text-secondosiblue uppercase font-poppinsBold text-3xl text-center">Premium</p>

                <div class="w-full flex flex-col justify-center items-center">
                    <p class="text-osiblue font-poppinsLight text-2xl font-semibold">$169</p>
                    <p class="text-gray-500">monthly/restaurant</p>
                </div>

                <div>
                    <button
                        class="w-fit px-9 py-2 bg-secondosiblue border border-secondosiblue text-white uppercase hover:bg-white hover:text-secondosiblue duration-300 displayPaymentModal">Get
                        Started</button>
                </div>

                <div class="w-full flex flex-col gap-3 mt-5">
                    <h1 class="text-gray-500 text-xl font-light">Features:</h1>

                    <div class="w-full flex flex-col">
                        <div class="flex justify-start items-center gap-2 py-1">
                            <img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
                            <p class="font-semibold text-secondosiblue">Online Ordering (Unlimited)</p>
                        </div>
                        <div class="flex justify-start items-center gap-2 py-1">
                            <img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
                            <p class="font-light text-secondosiblue">Marketing Automation</p>
                        </div>
                        <div class="flex justify-start items-center gap-2 py-1">
                            <img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
                            <p class="font-light text-secondosiblue">Gift Cards</p>
                        </div>
                        <div class="flex justify-start items-center gap-2 py-1">
                            <img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
                            <p class="font-light text-secondosiblue">Inventory</p>
                        </div>
                        <div class="flex justify-start items-center gap-2 py-1">
                            <img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
                            <p class="font-light text-secondosiblue">Item Recommendations</p>
                        </div>
                        <div class="flex justify-start items-center gap-2 py-1">
                            <img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
                            <p class="font-light text-secondosiblue">Multiple Menus</p>
                        </div>
                        <div class="flex justify-start items-center gap-2 py-1">
                            <img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
                            <p class="font-light text-secondosiblue">Remove ‘Powered by UpMenu’</p>
                        </div>
                        <div class="flex justify-start items-center gap-2 py-1">
                            <img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
                            <p class="font-light text-secondosiblue">API</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!-- PRICING ON MOBILE -->
        <div class="w-full flex l:hidden flex-col gap-10 mt-10">
            <div>
                <div class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-t-md">
                    <p class="text-secondosiblue uppercase font-poppinsBold text-3xl text-center">Basic</p>

                    <div class="w-full flex flex-col justify-center items-center">
                        <p class="text-osiblue font-poppinsLight text-2xl font-semibold">$0</p>
                        <p class="text-gray-500">monthly/restaurant</p>
                    </div>

                    <div>
                        <button
                            class="w-fit px-9 py-2 bg-secondosiblue border border-secondosiblue text-white uppercase hover:bg-white hover:text-secondosiblue duration-300"
                            data-toggle="modal" data-target="#exampleModal">Get
                            Started</button>
                    </div>
                </div>

                <div
                    class="w-full bg-secondosiblue text-white py-3 px-5 text-center flex justify-center items-center gap-2 border border-secondosiblue hover:bg-white hover:text-secondosiblue duration-300 openFeaturesDropdown">
                    <p>View Features</p>
                    <i class="fas fa-angle-down"></i>
                </div>

                <div class="w-full flex flex-col p-5 border border-gray-200 featuresContainer hidden">
                    <div class="flex justify-start items-center gap-2 py-1">
                        <img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
                        <p class="font-semibold text-secondosiblue">Online Ordering (75 Orders)</p>
                    </div>
                    <div class="flex justify-start items-center gap-2 py-1">
                        <img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
                        <p class="font-light text-secondosiblue">Restaurant Website</p>
                    </div>
                    <div class="flex justify-start items-center gap-2 py-1">
                        <img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
                        <p class="font-light text-secondosiblue">Branded Mobile App</p>
                    </div>
                    <div class="flex justify-start items-center gap-2 py-1">
                        <img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
                        <p class="font-light text-secondosiblue">QR Code Menu</p>
                    </div>
                    <div class="flex justify-start items-center gap-2 py-1">
                        <img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
                        <p class="font-light text-secondosiblue">Loyalty Program</p>
                    </div>
                    <div class="flex justify-start items-center gap-2 py-1">
                        <img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
                        <p class="font-light text-secondosiblue">50+ Free Website Templates</p>
                    </div>
                    <div class="flex justify-start items-center gap-2 py-1">
                        <img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
                        <p class="font-light text-secondosiblue">Multi Location</p>
                    </div>
                    <div class="flex justify-start items-center gap-2 py-1">
                        <img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
                        <p class="font-light text-secondosiblue">Online Payments</p>
                    </div>
                </div>
            </div>


            <div>
                <div class="w-full px-5 py-3 text-white text-center font-semibold text-xl bg-osiblue rounded-t-md">
                    <p>Best Value</p>
                </div>

                <div class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-t-md">
                    <p class="text-secondosiblue uppercase font-poppinsBold text-3xl text-center">Standard</p>

                    <div class="w-full flex flex-col justify-center items-center">
                        <p class="text-osiblue font-poppinsLight text-2xl font-semibold">$89</p>
                        <p class="text-gray-500">monthly/restaurant</p>
                    </div>

                    <div>
                        <button
                            class="w-fit px-9 py-2 bg-secondosiblue border border-secondosiblue text-white uppercase hover:bg-white hover:text-secondosiblue duration-300"
                            data-toggle="modal" data-target="#exampleModal">Get
                            Started</button>
                    </div>
                </div>

                <div
                    class="w-full bg-osiblue text-white py-3 px-5 text-center flex justify-center items-center gap-2 border border-osiblue hover:bg-white hover:text-osiblue duration-300 openFeaturesDropdown">
                    <p>View Features</p>
                    <i class="fas fa-angle-down"></i>
                </div>

                <div class="w-full flex flex-col p-5 border border-gray-200 featuresContainer hidden">
                    <div class="flex justify-start items-center gap-2 py-1">
                        <img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
                        <p class="font-semibold text-secondosiblue">Online Ordering (75 Orders)</p>
                    </div>
                    <div class="flex justify-start items-center gap-2 py-1">
                        <img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
                        <p class="font-light text-secondosiblue">Tableside Ordering</p>
                    </div>
                    <div class="flex justify-start items-center gap-2 py-1">
                        <img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
                        <p class="font-light text-secondosiblue">Table Reservations</p>
                    </div>
                    <div class="flex justify-start items-center gap-2 py-1">
                        <img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
                        <p class="font-light text-secondosiblue">Premium Website Templates</p>
                    </div>
                    <div class="flex justify-start items-center gap-2 py-1">
                        <img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
                        <p class="font-light text-secondosiblue">Email & SMS marketing</p>
                    </div>
                    <div class="flex justify-start items-center gap-2 py-1">
                        <img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
                        <p class="font-light text-secondosiblue">Coupons & Promo Codes</p>
                    </div>
                    <div class="flex justify-start items-center gap-2 py-1">
                        <img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
                        <p class="font-light text-secondosiblue">Integrations</p>
                    </div>
                    <div class="flex justify-start items-center gap-2 py-1">
                        <img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
                        <p class="font-light text-secondosiblue">Ordering for the future</p>
                    </div>
                </div>
            </div>


            <div>
                <div class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-t-md">
                    <p class="text-secondosiblue uppercase font-poppinsBold text-3xl text-center">Premium</p>

                    <div class="w-full flex flex-col justify-center items-center">
                        <p class="text-osiblue font-poppinsLight text-2xl font-semibold">$169</p>
                        <p class="text-gray-500">monthly/restaurant</p>
                    </div>

                    <div>
                        <button
                            class="w-fit px-9 py-2 bg-secondosiblue border border-secondosiblue text-white uppercase hover:bg-white hover:text-secondosiblue duration-300"
                            data-toggle="modal" data-target="#exampleModal">Get
                            Started</button>
                    </div>
                </div>

                <div
                    class="w-full bg-secondosiblue text-white py-3 px-5 text-center flex justify-center items-center gap-2 border border-secondosiblue hover:bg-white hover:text-secondosiblue duration-300 openFeaturesDropdown">
                    <p>View Features</p>
                    <i class="fas fa-angle-down"></i>
                </div>

                <div class="w-full flex flex-col p-5 border border-gray-200 featuresContainer hidden">
                    <div class="flex justify-start items-center gap-2 py-1">
                        <img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
                        <p class="font-semibold text-secondosiblue">Online Ordering (Unlimited)</p>
                    </div>
                    <div class="flex justify-start items-center gap-2 py-1">
                        <img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
                        <p class="font-light text-secondosiblue">Marketing Automation</p>
                    </div>
                    <div class="flex justify-start items-center gap-2 py-1">
                        <img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
                        <p class="font-light text-secondosiblue">Gift Cards</p>
                    </div>
                    <div class="flex justify-start items-center gap-2 py-1">
                        <img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
                        <p class="font-light text-secondosiblue">Inventory</p>
                    </div>
                    <div class="flex justify-start items-center gap-2 py-1">
                        <img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
                        <p class="font-light text-secondosiblue">Item Recommendations</p>
                    </div>
                    <div class="flex justify-start items-center gap-2 py-1">
                        <img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
                        <p class="font-light text-secondosiblue">Multiple Menus</p>
                    </div>
                    <div class="flex justify-start items-center gap-2 py-1">
                        <img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
                        <p class="font-light text-secondosiblue">Remove ‘Powered by UpMenu’</p>
                    </div>
                    <div class="flex justify-start items-center gap-2 py-1">
                        <img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
                        <p class="font-light text-secondosiblue">API</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="w-full h-full fixed bg-black bg-opacity-50 flex justify-center items-center p-5 inset-0 hidden"
    id="paymentModal">
    <div class="w-[550px] h-[90%] bg-white shadow-md rounded-md p-5 relative">
        <div class="absolute w-[30px] h-[30px] bg-gray-300 rounded-full shadow-md top-5 right-5 flex justify-center items-center p-1 text-secondosiblue cursor-pointer hover:scale-110 transition-transform duration-500"
            id="closePaymentModalButton" type="button">
            <i class="fa fa-close"></i>
        </div>

        <div>
            <h1 class="text-secondosiblue text-center text-2xl font-poppinsBold mt-8">Process Payment</h1>

            <div id="paymentContent" class="h-[400px] mt-5 overflow-y-scroll">

            </div>
        </div>
    </div>
</div>



<!---------------------- JS SCRIPTS -------------------->

<script type="text/javascript" src='{% static "js/customer_dashboard/pricing-dropdown.js" %}'></script>
<script type="text/javascript" src='{% static "js/customer_dashboard/payment.js" %}'></script>


<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
    integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
<script src="https://creditlibanais-netcommerce.gateway.mastercard.com/static/checkout/checkout.min.js"></script>

{% endblock %}