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


<div class="w-full flex flex-col gap-3">
    <div class="w-full bg-white rounded-md h-fit shadow-md p-5">
        <div
            class="w-full bg-secondosiblue shadow-md rounded-md px-5 py-5 flex flex-wrap items-center gap-8 text-fifthosiblue text-base xl:text-xl uppercase">
            <p class="selectedProductCategory cursor-pointer" id="solutions">Solutions</p>

            <p class="cursor-pointer" id="hostingSolutions">Cloud Hosting</p>
        </div>

        
        <!-- OSITCOM SOLUTIONS CONTAINER -->
        <div class="w-full flex flex-col gap-10 mt-10" id="solutionsContainer">
            <div class="w-full p-5 bg-gray-50 border-gray-100 shadow-md">
                <div class="flex justify-between items-center">
                    <img src="{% static 'images/ositcom_logos/osimenublue.png' %}" class="w-[140px] s:w-[180px]">

                    <a href="{% url 'osimenuplans' %}">
                        <button
                            class="bg-osiblue border border-osiblue text-white px-5 py-2 rounded-md cursor-pointer hover:bg-white hover:text-osiblue duration-300">More
                            Details</button>
                    </a>
                </div>


                <div class="w-full grid grid-cols-1 l:grid-cols-3 gap-5 mt-5">
                    <a href="{% url 'osimenuplans' %}">
                        <div
                            class="w-full h-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white hover:scale-105 duration-300">
                            <p class="text-secondosiblue uppercase font-poppinsBold text-xl s:text-2xl text-center">Basic
                            </p>

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

                    <a href="{% url 'osimenuplans' %}">
                        <div
                            class="w-full h-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white hover:scale-105 duration-300">
                            <p class="text-secondosiblue uppercase font-poppinsBold text-xl s:text-2xl text-center">Standard
                            </p>

                            <div class="w-full flex flex-col justify-center items-center text-center">
                                <p class="text-osiblue font-poppinsLight text-[17px] s:text-2xl font-semibold">$9</p>
                                <p class="text-gray-500">monthly/restaurant</p>
                            </div>
                        </div>
                    </a>

                    <a href="{% url 'osimenuplans' %}">
                        <div
                            class="w-full h-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white hover:scale-105 duration-300">
                            <p class="text-secondosiblue uppercase font-poppinsBold text-xl s:text-2xl text-center">Premium
                            </p>

                            <div class="w-full flex flex-col justify-center items-center text-center">
                                <p class="text-osiblue font-poppinsLight text-[17px] s:text-2xl font-semibold">$29</p>
                                <p class="text-gray-500">monthly/restaurant</p>
                            </div>
                        </div>
                    </a>
                </div>
            </div>

            <div class="w-full p-5 bg-gray-50 border-gray-100 shadow-md">
                <div class="flex justify-between items-center">
                    <img src="{% static 'images/ositcom_logos/osicardblue.png' %}" class="w-[180px]">

                    <a href="{% url 'osicardplans' %}">
                        <button
                        class="bg-osiblue border border-osiblue text-white px-5 py-2 rounded-md cursor-pointer hover:bg-white hover:text-osiblue duration-300">More
                        Details</button>
                    </a>
                </div>


                <div class="w-full grid grid-cols-1 l:grid-cols-3 gap-5 mt-5">
                    <a href="{% url 'osicardplans' %}">
                        <div
                            class="w-full h-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white hover:text-osiblue hover:scale-105 duration-300">
                            <p class="text-secondosiblue uppercase font-poppinsBold text-2xl 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</p>
                            </div>
                        </div>
                    </a>

                    <a href="{% url 'osicardplans' %}">
                        <div
                            class="w-full h-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white hover:text-osiblue hover:scale-105 duration-300">
                            <p class="text-secondosiblue uppercase font-poppinsBold text-2xl 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">$6</p>
                                <p class="text-gray-500">monthly</p>
                            </div>
                        </div>
                    </a>


                    <a href="{% url 'osicardplans' %}">
                        <div
                            class="w-full h-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white hover:text-osiblue hover:scale-105 duration-300">
                            <p class="text-secondosiblue uppercase font-poppinsBold text-2xl text-center">Business</p>

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


        <!-- HOSTING SOLUTIONS CONTAINER -->
        <div class="w-full flex flex-col gap-10 mt-10 hidden" id="hostingSolutionsContainer">
            <div class="w-full p-5 bg-gray-50 border-gray-100 shadow-md">
                <div class="flex justify-between items-center">
                    <p class="font-poppinsExtraBold text-base s:text-2xl text-osiblue">Shared Hosting</p>

                    <a href="{% url 'sharedhostingplans' %}">
                        <button
                        class="bg-osiblue border border-osiblue text-white px-5 py-2 rounded-md cursor-pointer hover:bg-white hover:text-osiblue duration-300">More
                        Details</button>
                    </a>

                </div>


                <div class="w-full grid grid-cols-1 l:grid-cols-3 gap-5 mt-5">
                    <a href="{% url 'sharedhostingplans' %}">
                        <div
                            class="w-full h-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white hover:scale-105 duration-300">
                            <p class="text-secondosiblue uppercase font-poppinsBold text-xl xll:text-2xl text-center">Shared
                                Basic</p>

                            <div class="w-full flex flex-col justify-center items-center text-center">
                                <p class="text-osiblue font-poppinsLight text-base s:text-xl font-semibold">80%</p>
                                <p class="text-osiblue font-poppinsLight text-base s:text-xl font-semibold">$2.40/month</p>
                                <p class="text-gray-500">Regular Price: $12.00/month</p>
                            </div>
                        </div>
                    </a>

                    <a href="{% url 'sharedhostingplans' %}">
                        <div
                            class="w-full h-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white hover:scale-105 duration-300">
                            <p class="text-secondosiblue uppercase font-poppinsBold text-xl xll:text-2xl text-center">Shared
                                Plus
                            </p>

                            <div class="w-full flex flex-col justify-center items-center text-center">
                                <p class="text-osiblue font-poppinsLight text-base s:text-xl font-semibold">80%</p>
                                <p class="text-osiblue font-poppinsLight text-base s:text-xl font-semibold">$3.50/month</p>
                                <p class="text-gray-500">Regular Price: $17.50/month</p>
                            </div>
                        </div>
                    </a>

                    <a href="{% url 'sharedhostingplans' %}">
                        <div
                            class="w-full h-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white hover:scale-105 duration-300">
                            <p class="text-secondosiblue uppercase font-poppinsBold text-xl xll:text-2xl text-center">Shared
                                Power</p>

                            <div class="w-full flex flex-col justify-center items-center text-center">
                                <p class="text-osiblue font-poppinsLight text-base s:text-xl font-semibold">80%</p>
                                <p class="text-osiblue font-poppinsLight text-base s:text-xl font-semibold">$4.80/month</p>
                                <p class="text-gray-500">Regular Price: $24.00/month</p>
                            </div>
                        </div>
                    </a>
                </div>
            </div>


            <div class="w-full p-5 bg-gray-50 border-gray-100 shadow-md">
                <div class="flex justify-between items-center">
                    <p class="font-poppinsExtraBold text-base s:text-2xl text-osiblue">Cloud VPS Hosting</p>

                    <a href="{% url 'cloudvpshostingplans' %}">
                        <button
                        class="bg-osiblue border border-osiblue text-white px-5 py-2 rounded-md cursor-pointer hover:bg-white hover:text-osiblue duration-300">More
                        Details</button>
                    </a>

                </div>


                <div class="w-full grid grid-cols-1 l:grid-cols-2 xxlg:grid-cols-4 gap-5 mt-5">
                    <a href="{% url 'cloudvpshostingplans' %}">
                        <div
                            class="w-full h-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white hover:scale-105 duration-300">
                            <p class="text-secondosiblue uppercase font-poppinsBold text-xl xll:text-2xl text-center">
                                OSICLOUD 1</p>

                            <div class="w-full flex flex-col justify-center items-center text-center">
                                <p class="text-osiblue font-poppinsLight text-base s:text-xl font-semibold">30%</p>
                                <p class="text-osiblue font-poppinsLight text-base s:text-xl font-semibold">$46.16/month</p>
                                <p class="text-gray-500">Regular Price: $65.95/month</p>
                            </div>
                        </div>
                    </a>

                    <a href="{% url 'cloudvpshostingplans' %}">
                        <div
                            class="w-full h-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white hover:scale-105 duration-300">
                            <p class="text-secondosiblue uppercase font-poppinsBold text-xl xll:text-2xl text-center">
                                OSICLOUD 2</p>

                            <div class="w-full flex flex-col justify-center items-center text-center">
                                <p class="text-osiblue font-poppinsLight text-base s:text-xl font-semibold">30%</p>
                                <p class="text-osiblue font-poppinsLight text-base s:text-xl font-semibold">$53.86/month
                                </p>
                                <p class="text-gray-500">Regular Price: $76.95/month</p>
                            </div>
                        </div>
                    </a>

                    <a href="{% url 'cloudvpshostingplans' %}">
                        <div
                            class="w-full h-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white hover:scale-105 duration-300">
                            <p class="text-secondosiblue uppercase font-poppinsBold text-xl xll:text-2xl text-center">
                                OSICLOUD 3</p>

                            <div class="w-full flex flex-col justify-center items-center text-center">
                                <p class="text-osiblue font-poppinsLight text-base s:text-xl font-semibold">30%</p>
                                <p class="text-osiblue font-poppinsLight text-base s:text-xl font-semibold">$69.26/month</p>
                                <p class="text-gray-500">Regular Price: $98.95/month</p>
                            </div>
                        </div>
                    </a>

                    <a href="{% url 'cloudvpshostingplans' %}">
                        <div
                            class="w-full h-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white hover:scale-105 duration-300">
                            <p class="text-secondosiblue uppercase font-poppinsBold text-xl xll:text-2xl text-center">
                                OSICLOUD 4</p>

                            <div class="w-full flex flex-col justify-center items-center text-center">
                                <p class="text-osiblue font-poppinsLight text-base s:text-xl font-semibold">30%</p>
                                <p class="text-osiblue font-poppinsLight text-base s:text-xl font-semibold">$107.76/month
                                </p>
                                <p class="text-gray-500">Regular Price: $153.95/month</p>
                            </div>
                        </div>
                    </a>
                </div>
            </div>


            <div class="w-full p-5 bg-gray-50 border-gray-100 shadow-md">
                <div class="flex justify-between items-center">
                    <p class="font-poppinsExtraBold text-base s:text-2xl text-osiblue">Dedicated CPU Servers</p>

                    <a href="{% url 'dedicatedserversplans' %}">
                        <button
                        class="bg-osiblue border border-osiblue text-white px-5 py-2 rounded-md cursor-pointer hover:bg-white hover:text-osiblue duration-300">More
                        Details</button>
                    </a>
                </div>


                <div class="w-full grid grid-cols-1 l:grid-cols-2 xxlg:grid-cols-4 gap-5 mt-5">
                    <a href="{% url 'dedicatedserversplans' %}">
                        <div
                            class="w-full h-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white hover:scale-105 duration-300">
                            <p class="text-secondosiblue uppercase font-poppinsBold text-xl xll:text-2xl text-center">
                                DEDICATED 1</p>

                            <div class="w-full flex flex-col justify-center items-center text-center">
                                <p class="text-osiblue font-poppinsLight text-base s:text-xl font-semibold">30%</p>
                                <p class="text-osiblue font-poppinsLight text-base s:text-xl font-semibold">$103.06/month
                                </p>
                                <p class="text-gray-500">Regular Price: $143.95/month</p>
                            </div>
                        </div>
                    </a>

                    <a href="{% url 'dedicatedserversplans' %}">
                        <div
                            class="w-full h-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white hover:scale-105 duration-300">
                            <p class="text-secondosiblue uppercase font-poppinsBold text-xl xll:text-2xl text-center">
                                DEDICATED 2
                            </p>

                            <div class="w-full flex flex-col justify-center items-center text-center">
                                <p class="text-osiblue font-poppinsLight text-base s:text-xl font-semibold">30%</p>
                                <p class="text-osiblue font-poppinsLight text-base s:text-xl font-semibold">
                                    $127.16/month</p>
                                <p class="text-gray-500">Regular Price: $184.95/month</p>
                            </div>
                        </div>
                    </a>

                    <a href="{% url 'dedicatedserversplans' %}">
                        <div
                            class="w-full h-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white hover:scale-105 duration-300">
                            <p class="text-secondosiblue uppercase font-poppinsBold text-xl xll:text-2xl text-center">
                                DEDICATED 3</p>

                            <div class="w-full flex flex-col justify-center items-center text-center">
                                <p class="text-osiblue font-poppinsLight text-base s:text-xl font-semibold">30%</p>
                                <p class="text-osiblue font-poppinsLight text-base s:text-xl font-semibold">$173.63/month
                                </p>
                                <p class="text-gray-500">Regular Price: $252.95/month</p>
                            </div>
                        </div>
                    </a>

                    <a href="{% url 'dedicatedserversplans' %}">
                        <div
                            class="w-full h-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white hover:scale-105 duration-300">
                            <p class="text-secondosiblue uppercase font-poppinsBold text-xl xll:text-2xl text-center">
                                DEDICATED 4</p>

                            <div class="w-full flex flex-col justify-center items-center text-center">
                                <p class="text-osiblue font-poppinsLight text-base s:text-xl font-semibold">30%</p>
                                <p class="text-osiblue font-poppinsLight text-base s:text-xl font-semibold">$265.76/month
                                </p>
                                <p class="text-gray-500">Regular Price: $374.95/month</p>
                            </div>
                        </div>
                    </a>
                </div>
            </div>


            <div class="w-full p-5 bg-gray-50 border-gray-100 shadow-md">
                <div class="flex justify-between items-center">
                    <p class="font-poppinsExtraBold text-base s:text-2xl text-osiblue">cPanel Licenses</p>

                    <a href="{% url 'cpanellicenses' %}">
                        <button
                        class="bg-osiblue border border-osiblue text-white px-5 py-2 rounded-md cursor-pointer hover:bg-white hover:text-osiblue duration-300">More
                        Details</button>
                    </a>
                </div>


                <div class="w-full grid grid-cols-1 l:grid-cols-2 xxlg:grid-cols-4 gap-5 mt-5">
                    <a href="{% url 'cpanellicenses' %}">
                        <div
                            class="w-full h-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white hover:scale-105 duration-300">
                            <p class="text-secondosiblue uppercase font-poppinsBold text-xl xll:text-2xl text-center">
                                CPANEL ADMIN CLOUD</p>

                            <div class="w-full flex flex-col justify-center items-center text-center">
                                <p class="text-osiblue font-poppinsLight text-base s:text-xl font-semibold">$20/month
                                </p>
                                <p class="text-gray-500">Regular Price: $30/month</p>
                            </div>
                        </div>
                    </a>

                    <a href="{% url 'cpanellicenses' %}">
                        <div
                            class="w-full h-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white hover:scale-105 duration-300">
                            <p class="text-secondosiblue uppercase font-poppinsBold text-xl xll:text-2xl text-center">
                                CPANEL PRO CLOUD
                            </p>

                            <div class="w-full flex flex-col justify-center items-center text-center">
                                <p class="text-osiblue font-poppinsLight text-base s:text-xl font-semibold">
                                    $31/month</p>
                                <p class="text-gray-500">Regular Price: $43/month</p>
                            </div>
                        </div>
                    </a>

                    <a href="{% url 'cpanellicenses' %}">
                        <div
                            class="w-full h-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white hover:scale-105 duration-300">
                            <p class="text-secondosiblue uppercase font-poppinsBold text-xl xll:text-2xl text-center">
                                CPANEL PREMIER CLOUD</p>

                            <div class="w-full flex flex-col justify-center items-center text-center">
                                <p class="text-osiblue font-poppinsLight text-base s:text-xl font-semibold">$42/month
                                </p>
                                <p class="text-gray-500">Regular Price: $60/month</p>
                            </div>
                        </div>
                    </a>

                    <a href="{% url 'cpanellicenses' %}">
                        <div
                            class="w-full h-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white hover:scale-105 duration-300">
                            <p class="text-secondosiblue uppercase font-poppinsBold text-xl xll:text-2xl text-center">
                                CPANEL PREMIER METAL</p>

                            <div class="w-full flex flex-col justify-center items-center text-center">
                                <p class="text-osiblue font-poppinsLight text-base s:text-xl font-semibold">$42/month
                                </p>
                                <p class="text-gray-500">Regular Price: $60/month</p>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>


<!---------------------- JS SCRIPTS -------------------->
<script src="{% static 'js/customer_dashboard/products.js' %}"></script>

{% endblock %}