{% 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 %}

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

<p id="itemId" class="hidden">{{item.id}}</p>


<div class="w-full px-5 s:px-9 flex flex-col gap-5 mt-5 font-poppinsLight">
    <div class="w-full h-fit bg-white rounded-md shadow-md">
        <div class="grid grid-cols-1 xxlg1:grid-cols-2">
            <div
                class="w-full flex flex-col items-center justify-center rounded-l-md h-full p-9 gap-8 overflow-hidden relative bg-gradient-to-b from-gray-400 via-gray-500 to-blue-950">
                <div
                    class="absolute top-0 left-32 w-[400px] h-[400px] bg-slate-800 filter blur-xl opacity-70 animate-blob animation-delay-2000">
                </div>
                <div
                    class="absolute top-20 right-0 w-[400px] h-[400px] bg-osiblue filter blur-xl opacity-70 animate-blob animation-delay-2000">
                </div>
                <div
                    class="absolute bottom-0 left-10 w-[400px] h-[400px] bg-blue-900 filter blur-xl opacity-70 animate-blob animation-delay-2000">
                </div>
                <div
                    class="absolute bottom-0 right-36 w-[400px] h-[400px] bg-gray-400 filter blur-xl opacity-70 animate-blob animation-delay-2000">
                </div>


                <div class="hidden s:flex z-10">
                    <img src="{% static 'images/ositcom_logos/full-logo-white.png' %}" class="w-[150px]">
                </div>

                <div class="w-full s:w-fit flex flex-col justify-center items-center gap-5 text-center border border-white border-opacity-10 rounded-md py-10 px-10 s:px-20 shadow-md bg-white z-10">
                    <p class="text-secondosiblue font-poppinsExtraBold uppercase text-xl s:text-2xl">{{item.title}}</p>
                    <p class="text-secondosiblue text-xl s:text-2xl">${{item.amount}}</p>
    
                    <select class="w-full s:w-[300px] bg-white border border-gray-200 rounded-md px-3 py-3 text-secondosiblue outline-none flex justify-center items-center text-center cursor-pointer" id="cycle">
                        {% for cycle in cycles %}
                        <option value="{{cycle.id}}">{{cycle.months}} {% if cycle.months == 1 %}month {% else %}months{% endif %}</option>
                        {% endfor %}
                    </select>
                </div>

            </div>


            <!-- EMBEDDED PAYMENT FORM -->
            <div class="p-5">
                <div id="paymentContent">

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



<!---------------------- JS SCRIPTS -------------------->
<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>

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


{% endblock %}