{% 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 hidden xxlg1:flex flex-col items-center justify-center rounded-l-md h-full bg-osiblue bg-opacity-70 p-9 gap-8 relative overflow-hidden">
            </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 %}