{% extends 'stela_control/index.html' %}
{% load i18n %}
{% load l10n %}
{% load crispy_forms_tags %}
{% load static %}
{% load hosts %}
{% load stelatags %}
{% load humanize %}
{% block styles %}
    <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
    <style>
        .ck-content {
            height: 200px;
            border-radius: 0px 0px 20px 20px !important;
            padding: 10px 30px !important;
            box-shadow: 1px 1px 9px #00000042;
            background-color: #ffffff !important;
            border: none !important;
        }
    </style>
{% endblock  %}
{% block bsCall %}
{% endblock  %}
{% block section %}
{% block title %}
{% if site_data.company_public %}
        
{% else %}
    <script>
        window.location.replace('/console/home')
    </script>
{% endif %}
            <h1 class="oxanium mx-4 text-dark pt-3">{% trans "Billings" %} <i class='bx bxs-wallet' ></i></h1>
{% endblock  %}
{% block side_title %}
            <h3 class="oxanium mx-4 d-flex justify-content-end"><b>STELA {% trans "CONTROL DYNAMIC" %} | {% trans "finances" %}</b></h3>
{% endblock  %}
        {% if call == "home" %}
        <div class="container">
            <div class="homebrew wow fadeIn" data-wow-duration="1s" data-wow-delay="0.5s">
                <div class="row justify-content-between m-3 align-items-center">
                    {% if total > 0 %}
                        <div class="col-lg-6">
                            <div class="rounded background text-center p-2">
                                <h4 class="fs-5 p-0 oxanium">{% trans "Billing Total Pending" %}</h4>
                                <div class="row">
                                    <div class="col-12">
                                        <span id="total-billing" class="oxanium text-danger fw-bold">${{total}}</span>
                                    </div>
                                </div>
                            </div>
                        </div> 
                    {% else %}
                        <div class="col-lg-6">
                            <div class="rounded bg-successfull text-center p-3">
                                <h4 class="fs-5 p-0 oxanium">{% trans "You have no pending charges" %}</h4>
                            </div>
                        </div>
                    {% endif %} 
                    <div class="col-lg-3 my-2 budget-btn">
                        <button onclick="showBudget()" class="btn btn-shappire btn-block fw-bold oxanium budget-btn">{% trans "Budgets" %}</button>
                    </div>
                    <div class="col-lg-3 my-2 billing-btn d-none">
                        <button onclick="showBilling()" class="btn btn-shappire btn-block fw-bold oxanium billing-btn ">{% trans "Billings" %}</button>
                    </div>
                    <div class="col-lg-3 my-2">
                        <a href="{% host_url 'bill_new' host 'stela' %}" class="btn btn-shappire btn-block fw-bold oxanium">{% trans "Create Dynamic Billing" %} <i class="fa-solid fa-plus"></i></a>
                    </div>
                </div>
                <div class="col-12 d-flex justify-content-end add-btn-product">
                    <button type="submit" data-bs-toggle="modal" data-bs-target="#removeObj" onclick="removeObjRequest()" class="btn btn-danger px-3 mb-3 mx-2 delete-product hide" id="delete_btn">{% trans "Remove" %} <i class="fas fa-trash"></i></button>
                    <button type="submit" data-bs-toggle="modal" data-bs-target="#removeObj2" onclick="removeObjRequest2()" class="btn btn-danger px-3 mb-3 mx-2 delete-product hide" id="delete_btn2">{% trans "Remove" %} <i class="fas fa-trash"></i></button>
                </div>
                <div class="row justify-content-center">
                    <div class="col-lg-10 b-25px background billing-table p-4 wow fadeIn" data-wow-duration="1s" data-wow-delay="0.5s">
                        <table id="billings" class="compact table table-borderless table-hover billing-table">
                            <thead>
                                <tr class="text-center">
                                    <th style="width: 15%;">{% trans "Type" %}</th>
                                    <th style="width: 20%;">{% trans "Client" %}</th>
                                    <th style="width: 15%;">{% trans "Billing" %} N°</th>
                                    <th style="width: 15%;">{% trans "Status" %}</th>
                                    <th style="width: 15%;">{% trans "Amount" %}</th>
                                    <th style="width: 5%;" class="text-center"> <input type="checkbox"  name="" id="parent"></th> 
                                </tr>
                            </thead>
                            <tbody>
                                {% for item in pages %}
                                    {% if item.option == 'Billing receipt' %}
                                        {% if item.billing_control.all %}
                                            {% for get in item.billing_control.all %}
                                                <tr>
                                                    <td scope="row">{{get.recipt.option}}</td>
                                                    <td class="my-1">{{get.recipt.customer.full_name}}</td>
                                                    {% if get.recipt.status == 'Dynamic Billing' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.recipt.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% elif get.recipt.status == 'Cancelled' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.recipt.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% elif get.recipt.status == 'Payeed' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.recipt.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% else %}
                                                        <td class="my-1"><a href="/billings/preview/{{get.recipt.id}}" class="btn-sm btn-shappire">{% trans "Pending" %}</a></td> 
                                                    {% endif %}                                  
                                                    {% if get.recipt.status == 'Payeed' %}
                                                        <td class="my-1">{% trans "Payeed" %} <i class="fa-solid fa-circle-check color-green"></i></td>
                                                    {% elif get.recipt.status == 'Cancelled' %}
                                                        <td class="my-1">{% trans "Cancelled" %} <i class="fa-solid fa-triangle-exclamation color-red"></i></td>
                                                    {% else %}
                                                        <td class="my-1">{% trans "Pending" %} <i class="fa-solid fa-exclamation"></i></td>
                                                    {% endif %}
                                                    <td class="my-1">${{get.recipt.amount}}</td>
                                                    <td class="text-center check-product my-1"><input type="checkbox" class="child" name="product_id[]" value="{{get.recipt.id}}" id="delete_product"></td>
                                                </tr>
                                            {% endfor %}
                                        {% elif item.control.all %}
                                            {% for get in item.control.all %}
                                                <tr>
                                                    <td scope="row">{{get.origin.option}}</td>
                                                    <td class="my-1">{{get.origin.customer.full_name}}</td>
                                                    {% if get.origin.status == 'Dynamic Billing' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% elif get.origin.status == 'Cancelled' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% elif get.origin.status == 'Payeed' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% else %}
                                                        <td class="my-1"><a href="/billings/preview/{{get.origin.id}}" class="btn-sm btn-shappire">{% trans "Pending" %}</a></td> 
                                                    {% endif %}                                  
                                                    {% if get.origin.status == 'Payeed' %}
                                                        <td class="my-1">{% trans "Payeed" %} <i class="fa-solid fa-circle-check color-green"></i></td>
                                                    {% elif get.origin.status == 'Canceled' %}
                                                        <td class="my-1">{% trans "Canceled" %} <i class="fa-solid fa-triangle-exclamation color-red"></i></td>
                                                    {% else %}
                                                        <td class="my-1">{% trans "Pending" %} <i class="fa-solid fa-exclamation"></i></td>
                                                    {% endif %}
                                                    <td class="my-1">Bs. {{get.total}}</td>
                                                    <td class="text-center check-product my-1"><input type="checkbox" class="child" name="product_id[]" value="{{get.origin.id}}" id="delete_product"></td>
                                                </tr>
                                            {% endfor %}
                                        {% else %}
                                            <tr>
                                                <td scope="row">{{item.option}}</td>
                                                <td class="my-1">{{item.customer.full_name}}</td>
                                                {% if item.status == 'Dynamic Billing' %}
                                                    <td class="my-1"><a href="/billings/get-billing/{{item.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                {% elif item.status == 'Payeed' %}
                                                    <td class="my-1"><a href="/billings/get-billing/{{item.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                {% elif item.status == 'Cancelled' %}
                                                    <td class="my-1"><a href="/billings/get-billing/{{item.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                {% else %}
                                                    <td class="my-1"><a href="/billings/preview/{{item.id}}" class="btn-sm btn-shappire">{% trans "Pending" %}</a></td> 
                                                {% endif %}                                  
                                                {% if item.status == 'Payeed' %}
                                                    <td class="my-1">{% trans "Payeed" %} <i class="fa-solid fa-circle-check color-green"></i></td>
                                                {% elif item.status == 'Canceled' %}
                                                    <td class="my-1">{% trans "Canceled" %} <i class="fa-solid fa-triangle-exclamation color-red"></i></td>
                                                {% else %}
                                                    <td class="my-1">{% trans "Pending" %} <i class="fa-solid fa-exclamation"></i></td>
                                                {% endif %}
                                                <td class="my-1">${{item.amount}}</td>
                                                <td class="text-center check-product my-1"><input type="checkbox" class="child" name="product_id[]" value="{{item.id}}" id="delete_product"></td>
                                            </tr>
                                        {% endif %}
                                    {% elif item.option == 'Monthly charge' %}
                                        {% if item.billing_control.all %}
                                            {% for get in item.billing_control.all %}
                                                <tr>
                                                    <td scope="row">{{get.recipt.option}}</td>
                                                    <td class="my-1">{{get.recipt.customer.full_name}}</td>
                                                    {% if get.recipt.status == 'Dynamic Billing' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.recipt.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% elif get.recipt.status == 'Cancelled' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.recipt.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% elif get.recipt.status == 'Payeed' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.recipt.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% else %}
                                                        <td class="my-1"><a href="/billings/preview/{{get.recipt.id}}" class="btn-sm btn-shappire">{% trans "Pending" %}</a></td> 
                                                    {% endif %}                                  
                                                    {% if get.recipt.status == 'Payeed' %}
                                                        <td class="my-1">{% trans "Payeed" %} <i class="fa-solid fa-circle-check color-green"></i></td>
                                                    {% elif get.recipt.status == 'Cancelled' %}
                                                        <td class="my-1">{% trans "Cancelled" %} <i class="fa-solid fa-triangle-exclamation color-red"></i></td>
                                                    {% else %}
                                                        <td class="my-1">{% trans "Pending" %} <i class="fa-solid fa-exclamation"></i></td>
                                                    {% endif %}
                                                    <td class="my-1">${{get.recipt.amount}}</td>
                                                    <td class="text-center check-product my-1"><input type="checkbox" class="child" name="product_id[]" value="{{get.recipt.id}}" id="delete_product"></td>
                                                </tr>
                                            {% endfor %}
                                        {% elif item.control.all %}
                                            {% for get in item.control.all %}
                                                <tr>
                                                    <td scope="row">{{get.origin.option}}</td>
                                                    <td class="my-1">{{get.origin.customer.full_name}}</td>
                                                    {% if get.origin.status == 'Dynamic Billing' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% elif get.origin.status == 'Cancelled' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% elif get.origin.status == 'Payeed' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% else %}
                                                        <td class="my-1"><a href="/billings//preview/{{get.origin.id}}" class="btn-sm btn-shappire">{% trans "Pending" %}</a></td> 
                                                    {% endif %}                                  
                                                    {% if get.origin.status == 'Payeed' %}
                                                        <td class="my-1">{% trans "Payeed" %} <i class="fa-solid fa-circle-check color-green"></i></td>
                                                    {% elif get.origin.status == 'Canceled' %}
                                                        <td class="my-1">{% trans "Canceled" %} <i class="fa-solid fa-triangle-exclamation color-red"></i></td>
                                                    {% else %}
                                                        <td class="my-1">{% trans "Pending" %} <i class="fa-solid fa-exclamation"></i></td>
                                                    {% endif %}
                                                    <td class="my-1">Bs. {{get.total}}</td>
                                                    <td class="text-center check-product my-1"><input type="checkbox" class="child" name="product_id[]" value="{{get.origin.id}}" id="delete_product"></td>
                                                </tr>
                                            {% endfor %}
                                        {% else %}
                                            <tr>
                                                <td scope="row">{{item.option}}</td>
                                                <td class="my-1">{{item.customer.full_name}}</td>
                                                {% if item.status == 'Dynamic Billing' %}
                                                    <td class="my-1"><a href="/billings/get-billing/{{item.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                {% elif item.status == 'Payeed' %}
                                                    <td class="my-1"><a href="/billings/get-billing/{{item.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                {% elif item.status == 'Cancelled' %}
                                                    <td class="my-1"><a href="/billings/get-billing/{{item.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                {% else %}
                                                    <td class="my-1"><a href="/billings/preview/{{item.id}}" class="btn-sm btn-shappire">{% trans "Pending" %}</a></td> 
                                                {% endif %}                                   
                                                {% if item.status == 'Payeed' %}
                                                    <td class="my-1">{% trans "Payeed" %} <i class="fa-solid fa-circle-check color-green"></i></td>
                                                {% elif item.status == 'Canceled' %}
                                                    <td class="my-1">{% trans "Canceled" %} <i class="fa-solid fa-triangle-exclamation color-red"></i></td>
                                                {% else %}
                                                    <td class="my-1">{% trans "Pending" %} <i class="fa-solid fa-exclamation"></i></td>
                                                {% endif %}
                                                <td class="my-1">${{item.amount}}</td>
                                                <td class="text-center check-product my-1"><input type="checkbox" class="child" name="product_id[]" value="{{item.id}}" id="delete_product"></td>
                                                
                                            </tr>
                                        {% endif %}
                                    {% elif item.option == 'Basic Subscription' %}
                                        {% if item.billing_control.all %}
                                               {% for get in item.billing_control.all %}
                                                <tr>
                                                    <td scope="row">{{get.recipt.option}}</td>
                                                    <td class="my-1">{{get.recipt.customer.full_name}}</td>
                                                    {% if get.recipt.status == 'Dynamic Billing' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.recipt.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% elif get.recipt.status == 'Cancelled' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.recipt.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% elif get.recipt.status == 'Payeed' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.recipt.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% else %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.recipt.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% endif %}                                  
                                                    {% if get.recipt.status == 'Payeed' %}
                                                        <td class="my-1">{% trans "Payeed" %} <i class="fa-solid fa-circle-check color-green"></i></td>
                                                    {% elif get.recipt.status == 'Cancelled' %}
                                                        <td class="my-1">{% trans "Cancelled" %} <i class="fa-solid fa-triangle-exclamation color-red"></i></td>
                                                    {% else %}
                                                        <td class="my-1">{% trans "Pending" %} <i class="fa-solid fa-exclamation"></i></td>
                                                    {% endif %}
                                                    <td class="my-1">${{get.recipt.amount}}</td>
                                                    <td class="text-center check-product my-1"><input type="checkbox" class="child" name="product_id[]" value="{{get.recipt.id}}" id="delete_product"></td>
                                                </tr>
                                            {% endfor %}
                                        {% elif item.control.all %}
                                            {% for get in item.control.all %}
                                                <tr>
                                                    <td scope="row">{{get.origin.option}}</td>
                                                    <td class="my-1">{{get.origin.customer.full_name}}</td>
                                                    {% if get.origin.status == 'Dynamic Billing' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% elif get.origin.status == 'Cancelled' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% elif get.origin.status == 'Payeed' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% else %}
                                                        <td class="my-1"><a href="/billings/checkout/{{get.origin.id}}" class="btn-sm btn-shappire">{% trans "Pending" %}</a></td> 
                                                    {% endif %}                                  
                                                    {% if get.origin.status == 'Payeed' %}
                                                        <td class="my-1">{% trans "Payeed" %} <i class="fa-solid fa-circle-check color-green"></i></td>
                                                    {% elif get.origin.status == 'Canceled' %}
                                                        <td class="my-1">{% trans "Canceled" %} <i class="fa-solid fa-triangle-exclamation color-red"></i></td>
                                                    {% else %}
                                                        <td class="my-1">{% trans "Pending" %} <i class="fa-solid fa-exclamation"></i></td>
                                                    {% endif %}
                                                    <td class="my-1">Bs. {{get.total}}</td>
                                                    <td class="text-center check-product my-1"><input type="checkbox" class="child" name="product_id[]" value="{{get.origin.id}}" id="delete_product"></td>
                                                </tr>
                                            {% endfor %}
                                        {% else %}
                                            <tr>
                                                <td scope="row">{{item.option}}</td>
                                                <td class="my-1">{{item.customer.full_name}}</td>
                                                {% if item.status == 'Payeed' %}
                                                    <td class="my-1"><a href="#" class="blue-link"></a></td>
                                                {% else %}
                                                    <td class="my-1"><a href="/billings/checkout/{{item.id}}" class="btn-sm btn-shappire">{% trans "Pending" %}</a></td> 
                                                {% endif %}                                   
                                                {% if item.status == 'Payeed' %}
                                                    <td class="my-1">{% trans "Payeed" %} <i class="fa-solid fa-circle-check color-green"></i></td>
                                                {% elif item.status == 'Canceled' %}
                                                    <td class="my-1">{% trans "Canceled" %} <i class="fa-solid fa-triangle-exclamation color-red"></i></td>
                                                {% else %}
                                                    <td class="my-1">{% trans "Pending" %} <i class="fa-solid fa-exclamation"></i></td>
                                                {% endif %}
                                                <td class="my-1">${{item.amount}}</td>
                                                <td class="text-center check-product my-1"><input type="checkbox" class="child" name="product_id[]" value="{{item.id}}" id="delete_product"></td>
                                            </tr>
                                        {% endif %}
                                    {% elif item.option == 'Business Subscription' %}
                                        {% if item.billing_control.all %}
                                            {% for get in item.billing_control.all %}
                                                <tr>
                                                    <td scope="row">{{get.recipt.option}}</td>
                                                    <td class="my-1">{{get.recipt.customer.full_name}}</td>
                                                    {% if get.recipt.status == 'Dynamic Billing' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.recipt.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% elif get.recipt.status == 'Cancelled' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.recipt.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% elif get.recipt.status == 'Payeed' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.recipt.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% else %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.recipt.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% endif %}                                  
                                                    {% if get.recipt.status == 'Payeed' %}
                                                        <td class="my-1">{% trans "Payeed" %} <i class="fa-solid fa-circle-check color-green"></i></td>
                                                    {% elif get.recipt.status == 'Cancelled' %}
                                                        <td class="my-1">{% trans "Cancelled" %} <i class="fa-solid fa-triangle-exclamation color-red"></i></td>
                                                    {% else %}
                                                        <td class="my-1">{% trans "Pending" %} <i class="fa-solid fa-exclamation"></i></td>
                                                    {% endif %}
                                                    <td class="my-1">${{get.recipt.amount}}</td>
                                                    <td class="text-center check-product my-1"><input type="checkbox" class="child" name="product_id[]" value="{{get.recipt.id}}" id="delete_product"></td>
                                                </tr>
                                            {% endfor %}
                                        {% elif item.control.all %}
                                            {% for get in item.control.all %}
                                                <tr>
                                                    <td scope="row">{{get.origin.option}}</td>
                                                    <td class="my-1">{{get.origin.customer.full_name}}</td>
                                                    {% if get.origin.status == 'Dynamic Billing' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% elif get.origin.status == 'Cancelled' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% elif get.origin.status == 'Payeed' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% else %}
                                                        <td class="my-1"><a href="/billings/checkout/{{get.origin.id}}" class="btn-sm btn-shappire">{% trans "Pending" %}</a></td> 
                                                    {% endif %}                                  
                                                    {% if get.origin.status == 'Payeed' %}
                                                        <td class="my-1">{% trans "Payeed" %} <i class="fa-solid fa-circle-check color-green"></i></td>
                                                    {% elif get.origin.status == 'Canceled' %}
                                                        <td class="my-1">{% trans "Canceled" %} <i class="fa-solid fa-triangle-exclamation color-red"></i></td>
                                                    {% else %}
                                                        <td class="my-1">{% trans "Pending" %} <i class="fa-solid fa-exclamation"></i></td>
                                                    {% endif %}
                                                    <td class="my-1">Bs. {{get.total}}</td>
                                                    <td class="text-center check-product my-1"><input type="checkbox" class="child" name="product_id[]" value="{{get.origin.id}}" id="delete_product"></td>                                                   
                                                </tr>
                                            {% endfor %}
                                        {% else %}
                                            <tr>
                                                <td scope="row">{{item.option}}</td>
                                                <td class="my-1">{{item.customer.full_name}}</td>
                                                {% if item.status == 'Payeed' %}
                                                    <td class="my-1"><a href="#" class="blue-link"></a></td>
                                                {% else %}
                                                    <td class="my-1"><a href="/billings/checkout/{{item.id}}" class="btn-sm btn-shappire">{% trans "Pending" %}</a></td> 
                                                {% endif %}                                   
                                                {% if item.status == 'Payeed' %}
                                                    <td class="my-1">{% trans "Payeed" %} <i class="fa-solid fa-circle-check color-green"></i></td>
                                                {% elif item.status == 'Canceled' %}
                                                    <td class="my-1">{% trans "Canceled" %} <i class="fa-solid fa-triangle-exclamation color-red"></i></td>
                                                {% else %}
                                                    <td class="my-1">{% trans "Pending" %} <i class="fa-solid fa-exclamation"></i></td>
                                                {% endif %}
                                                <td class="my-1">${{item.amount}}</td>
                                                <td class="text-center check-product my-1"><input type="checkbox" class="child" name="product_id[]" value="{{item.id}}" id="delete_product"></td>                                              
                                            </tr>
                                        {% endif %}
                                    {% elif item.option == 'Basic Year Subscription' %}
                                        {% if item.billing_control.all %}
                                            {% for get in item.billing_control.all %}
                                                <tr>
                                                    <td scope="row">{{get.recipt.option}}</td>
                                                    <td class="my-1">{{get.recipt.customer.full_name}}</td>
                                                    {% if get.recipt.status == 'Dynamic Billing' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.recipt.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% elif get.recipt.status == 'Cancelled' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.recipt.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% elif get.recipt.status == 'Payeed' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.recipt.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% else %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.recipt.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% endif %}                                  
                                                    {% if get.recipt.status == 'Payeed' %}
                                                        <td class="my-1">{% trans "Payeed" %} <i class="fa-solid fa-circle-check color-green"></i></td>
                                                    {% elif get.recipt.status == 'Cancelled' %}
                                                        <td class="my-1">{% trans "Cancelled" %} <i class="fa-solid fa-triangle-exclamation color-red"></i></td>
                                                    {% else %}
                                                        <td class="my-1">{% trans "Pending" %} <i class="fa-solid fa-exclamation"></i></td>
                                                    {% endif %}
                                                    <td class="my-1">${{get.recipt.amount}}</td>
                                                    <td class="text-center check-product my-1"><input type="checkbox" class="child" name="product_id[]" value="{{get.recipt.id}}" id="delete_product"></td>                                                  
                                                </tr>
                                            {% endfor %}
                                        {% elif item.control.all %}
                                            {% for get in item.control.all %}
                                                <tr>
                                                    <td scope="row">{{get.origin.option}}</td>
                                                    <td class="my-1">{{get.origin.customer.full_name}}</td>
                                                    {% if get.origin.status == 'Dynamic Billing' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% elif get.origin.status == 'Cancelled' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% elif get.origin.status == 'Payeed' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% else %}
                                                        <td class="my-1"><a href="/billings/checkout/{{get.origin.id}}" class="btn-sm btn-shappire">{% trans "Pending" %}</a></td> 
                                                    {% endif %}                                  
                                                    {% if get.origin.status == 'Payeed' %}
                                                        <td class="my-1">{% trans "Payeed" %} <i class="fa-solid fa-circle-check color-green"></i></td>
                                                    {% elif get.origin.status == 'Canceled' %}
                                                        <td class="my-1">{% trans "Canceled" %} <i class="fa-solid fa-triangle-exclamation color-red"></i></td>
                                                    {% else %}
                                                        <td class="my-1">{% trans "Pending" %} <i class="fa-solid fa-exclamation"></i></td>
                                                    {% endif %}
                                                    <td class="my-1">Bs. {{get.total}}</td>
                                                    <td class="text-center check-product my-1"><input type="checkbox" class="child" name="product_id[]" value="{{get.origin.id}}" id="delete_product"></td>                                                 
                                                </tr>
                                            {% endfor %}
                                        {% else %}
                                            <tr>
                                                <td scope="row">{{item.option}}</td>
                                                <td class="my-1">{{item.customer.full_name}}</td>
                                                {% if item.status == 'Payeed' %}
                                                    <td class="my-1"><a href="#" class="blue-link"></a></td>
                                                {% else %}
                                                    <td class="my-1"><a href="/billings/checkout/{{item.id}}" class="btn-sm btn-shappire">{% trans "Pending" %}</a></td> 
                                                {% endif %}                                   
                                                {% if item.status == 'Payeed' %}
                                                    <td class="my-1">{% trans "Payeed" %} <i class="fa-solid fa-circle-check color-green"></i></td>
                                                {% elif item.status == 'Canceled' %}
                                                    <td class="my-1">{% trans "Canceled" %} <i class="fa-solid fa-triangle-exclamation color-red"></i></td>
                                                {% else %}
                                                    <td class="my-1">{% trans "Pending" %} <i class="fa-solid fa-exclamation"></i></td>
                                                {% endif %}
                                                <td class="my-1">${{item.amount}}</td>
                                                <td class="text-center check-product my-1"><input type="checkbox" class="child" name="product_id[]" value="{{item.id}}" id="delete_product"></td>                                               
                                            </tr>
                                        {% endif %}
                                    {% elif item.option == 'Business Year Subscription' %}
                                        {% if item.billing_control.all %}
                                            {% for get in item.billing_control.all %}
                                                <tr>
                                                    <td scope="row">{{get.recipt.option}}</td>
                                                    <td class="my-1">{{get.recipt.customer.full_name}}</td>
                                                    {% if get.recipt.status == 'Dynamic Billing' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.recipt.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% elif get.recipt.status == 'Cancelled' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.recipt.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% elif get.recipt.status == 'Payeed' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.recipt.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% else %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.recipt.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% endif %}                                  
                                                    {% if get.recipt.status == 'Payeed' %}
                                                        <td class="my-1">{% trans "Payeed" %} <i class="fa-solid fa-circle-check color-green"></i></td>
                                                    {% elif get.recipt.status == 'Cancelled' %}
                                                        <td class="my-1">{% trans "Cancelled" %} <i class="fa-solid fa-triangle-exclamation color-red"></i></td>
                                                    {% else %}
                                                        <td class="my-1">{% trans "Pending" %} <i class="fa-solid fa-exclamation"></i></td>
                                                    {% endif %}
                                                    <td class="my-1">${{get.recipt.amount}}</td>
                                                    <td class="text-center check-product my-1"><input type="checkbox" class="child" name="product_id[]" value="{{get.recipt.id}}" id="delete_product"></td>                                                 
                                                </tr>
                                            {% endfor %}
                                        {% elif item.control.all %}
                                            {% for get in item.control.all %}
                                                <tr>
                                                    <td scope="row">{{get.origin.option}}</td>
                                                    <td class="my-1">{{get.origin.customer.full_name}}</td>
                                                    {% if get.origin.status == 'Dynamic Billing' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% elif get.origin.status == 'Cancelled' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% elif get.origin.status == 'Payeed' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% else %}
                                                        <td class="my-1"><a href="/billings/checkout/{{get.origin.id}}" class="btn-sm btn-shappire">{% trans "Pending" %}</a></td> 
                                                    {% endif %}                                  
                                                    {% if get.origin.status == 'Payeed' %}
                                                        <td class="my-1">{% trans "Payeed" %} <i class="fa-solid fa-circle-check color-green"></i></td>
                                                    {% elif get.origin.status == 'Canceled' %}
                                                        <td class="my-1">{% trans "Canceled" %} <i class="fa-solid fa-triangle-exclamation color-red"></i></td>
                                                    {% else %}
                                                        <td class="my-1">{% trans "Pending" %} <i class="fa-solid fa-exclamation"></i></td>
                                                    {% endif %}
                                                    <td class="my-1">Bs. {{get.total}}</td>
                                                    <td class="text-center check-product my-1"><input type="checkbox" class="child" name="product_id[]" value="{{get.origin.id}}" id="delete_product"></td>                                                   
                                                </tr>
                                            {% endfor %}
                                        {% else %}
                                            <tr>
                                                <td scope="row">{{item.option}}</td>
                                                <td class="my-1">{{item.customer.full_name}}</td>
                                                {% if item.status == 'Payeed' %}
                                                    <td class="my-1"><a href="#" class="blue-link"></a></td>
                                                {% else %}
                                                    <td class="my-1"><a href="/billings/checkout/{{item.id}}" class="btn-sm btn-shappire">{% trans "Pending" %}</a></td> 
                                                {% endif %}                                   
                                                {% if item.status == 'Payeed' %}
                                                    <td class="my-1">{% trans "Payeed" %} <i class="fa-solid fa-circle-check color-green"></i></td>
                                                {% elif item.status == 'Canceled' %}
                                                    <td class="my-1">{% trans "Canceled" %} <i class="fa-solid fa-triangle-exclamation color-red"></i></td>
                                                {% else %}
                                                    <td class="my-1">{% trans "Pending" %} <i class="fa-solid fa-exclamation"></i></td>
                                                {% endif %}
                                                <td class="my-1">${{item.amount}}</td>
                                                <td class="text-center check-product my-1"><input type="checkbox" class="child" name="product_id[]" value="{{item.id}}" id="delete_product"></td>                                               
                                            </tr>
                                        {% endif %}
                                    {% elif item.option == 'Stela Website' %}
                                        {% if item.billing_control.all %}
                                            {% for get in item.billing_control.all %}
                                                <tr>
                                                    <td scope="row">{{get.recipt.option}}</td>
                                                    <td class="my-1">{{get.recipt.customer.full_name}}</td>
                                                    {% if get.recipt.status == 'Dynamic Billing' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.recipt.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% elif get.recipt.status == 'Cancelled' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.recipt.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% elif get.recipt.status == 'Payeed' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.recipt.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% else %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.recipt.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% endif %}                                  
                                                    {% if get.recipt.status == 'Payeed' %}
                                                        <td class="my-1">{% trans "Payeed" %} <i class="fa-solid fa-circle-check color-green"></i></td>
                                                    {% elif get.recipt.status == 'Cancelled' %}
                                                        <td class="my-1">{% trans "Cancelled" %} <i class="fa-solid fa-triangle-exclamation color-red"></i></td>
                                                    {% else %}
                                                        <td class="my-1">{% trans "Pending" %} <i class="fa-solid fa-exclamation"></i></td>
                                                    {% endif %}
                                                    <td class="my-1">${{get.recipt.amount}}</td>
                                                    <td class="text-center check-product my-1"><input type="checkbox" class="child" name="product_id[]" value="{{get.recipt.id}}" id="delete_product"></td>                                                  
                                                </tr>
                                            {% endfor %}
                                        {% elif item.control.all %}
                                            {% for get in item.control.all %}
                                                <tr>
                                                    <td scope="row">{{get.origin.option}}</td>
                                                    <td class="my-1">{{get.origin.customer.full_name}}</td>
                                                    {% if get.origin.status == 'Dynamic Billing' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% elif get.origin.status == 'Cancelled' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% elif get.origin.status == 'Payeed' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% else %}
                                                        <td class="my-1"><a href="/billings/checkout/{{get.origin.id}}" class="btn-sm btn-shappire">{% trans "Pending" %}</a></td> 
                                                    {% endif %}                                  
                                                    {% if get.origin.status == 'Payeed' %}
                                                        <td class="my-1">{% trans "Payeed" %} <i class="fa-solid fa-circle-check color-green"></i></td>
                                                    {% elif get.origin.status == 'Canceled' %}
                                                        <td class="my-1">{% trans "Canceled" %} <i class="fa-solid fa-triangle-exclamation color-red"></i></td>
                                                    {% else %}
                                                        <td class="my-1">{% trans "Pending" %} <i class="fa-solid fa-exclamation"></i></td>
                                                    {% endif %}
                                                    <td class="my-1">Bs. {{get.total}}</td>
                                                    <td class="text-center check-product my-1"><input type="checkbox" class="child" name="product_id[]" value="{{get.origin.id}}" id="delete_product"></td>                                                   
                                                </tr>
                                            {% endfor %}
                                        {% else %}
                                            <tr>
                                                <td scope="row">{{item.option}}</td>
                                                <td class="my-1">{{item.customer.full_name}}</td>
                                                {% if item.status == 'Payeed' %}
                                                    <td class="my-1"><a href="#" class="blue-link"></a></td>
                                                {% else %}
                                                    <td class="my-1"><a href="/billings/checkout/{{item.id}}" class="btn-sm btn-shappire">{% trans "Pending" %}</a></td> 
                                                {% endif %}                                   
                                                {% if item.status == 'Payeed' %}
                                                    <td class="my-1">{% trans "Payeed" %} <i class="fa-solid fa-circle-check color-green"></i></td>
                                                {% elif item.status == 'Canceled' %}
                                                    <td class="my-1">{% trans "Canceled" %} <i class="fa-solid fa-triangle-exclamation color-red"></i></td>
                                                {% else %}
                                                    <td class="my-1">{% trans "Pending" %} <i class="fa-solid fa-exclamation"></i></td>
                                                {% endif %}
                                                <td class="my-1">${{item.amount}}</td>
                                                <td class="text-center check-product my-1"><input type="checkbox" class="child" name="product_id[]" value="{{item.id}}" id="delete_product"></td>
                                            </tr>
                                        {% endif %}
                                    {% elif item.option == 'Final Stela Websites' %}
                                        {% if item.billing_control.all %}
                                            {% for get in item.billing_control.all %}
                                                <tr>
                                                    <td scope="row">{{get.recipt.option}}</td>
                                                    <td class="my-1">{{get.recipt.customer.full_name}}</td>
                                                    {% if get.recipt.status == 'Dynamic Billing' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.recipt.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% elif get.recipt.status == 'Cancelled' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.recipt.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% elif get.recipt.status == 'Payeed' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.recipt.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% else %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.recipt.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% endif %}                                  
                                                    {% if get.recipt.status == 'Payeed' %}
                                                        <td class="my-1">{% trans "Payeed" %} <i class="fa-solid fa-circle-check color-green"></i></td>
                                                    {% elif get.recipt.status == 'Cancelled' %}
                                                        <td class="my-1">{% trans "Cancelled" %} <i class="fa-solid fa-triangle-exclamation color-red"></i></td>
                                                    {% else %}
                                                        <td class="my-1">{% trans "Pending" %} <i class="fa-solid fa-exclamation"></i></td>
                                                    {% endif %}
                                                    <td class="my-1">${{get.recipt.amount}}</td>
                                                    <td class="text-center check-product my-1"><input type="checkbox" class="child" name="product_id[]" value="{{get.recipt.id}}" id="delete_product"></td>
                                                </tr>
                                            {% endfor %}
                                        {% elif item.control.all %}
                                            {% for get in item.control.all %}
                                                <tr>
                                                    <td scope="row">{{get.origin.option}}</td>
                                                    <td class="my-1">{{get.origin.customer.full_name}}</td>
                                                    {% if get.origin.status == 'Dynamic Billing' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% elif get.origin.status == 'Cancelled' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% elif get.origin.status == 'Payeed' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% else %}
                                                        <td class="my-1"><a href="/billings/checkout/{{get.origin.id}}" class="btn-sm btn-shappire">{% trans "Pending" %}</a></td> 
                                                    {% endif %}                                  
                                                    {% if get.origin.status == 'Payeed' %}
                                                        <td class="my-1">{% trans "Payeed" %} <i class="fa-solid fa-circle-check color-green"></i></td>
                                                    {% elif get.origin.status == 'Canceled' %}
                                                        <td class="my-1">{% trans "Canceled" %} <i class="fa-solid fa-triangle-exclamation color-red"></i></td>
                                                    {% else %}
                                                        <td class="my-1">{% trans "Pending" %} <i class="fa-solid fa-exclamation"></i></td>
                                                    {% endif %}
                                                    <td class="my-1">Bs. {{get.total}}</td>
                                                    <td class="text-center check-product my-1"><input type="checkbox" class="child" name="product_id[]" value="{{get.origin.id}}" id="delete_product"></td>
                                                </tr>
                                            {% endfor %}
                                        {% else %}
                                            <tr>
                                                <td scope="row">{{item.option}}</td>
                                                <td class="my-1">{{item.customer.full_name}}</td>
                                                {% if item.status == 'Payeed' %}
                                                    <td class="my-1"><a href="#" class="blue-link"></a></td>
                                                {% else %}
                                                    <td class="my-1"><a href="/billings/checkout/{{item.id}}" class="btn-sm btn-shappire">{% trans "Pending" %}</a></td> 
                                                {% endif %}                                   
                                                {% if item.status == 'Payeed' %}
                                                    <td class="my-1">{% trans "Payeed" %} <i class="fa-solid fa-circle-check color-green"></i></td>
                                                {% elif item.status == 'Canceled' %}
                                                    <td class="my-1">{% trans "Canceled" %} <i class="fa-solid fa-triangle-exclamation color-red"></i></td>
                                                {% else %}
                                                    <td class="my-1">{% trans "Pending" %} <i class="fa-solid fa-exclamation"></i></td>
                                                {% endif %}
                                                <td class="my-1">${{item.amount}}</td>
                                                <td class="text-center check-product my-1"><input type="checkbox" class="child" name="product_id[]" value="{{item.id}}" id="delete_product"></td>
                                            </tr>
                                        {% endif %}
                                    {% elif item.option == 'Cloud Subscription' %}
                                        {% if item.billing_control.all %}
                                            {% for get in item.billing_control.all %}
                                                <tr>
                                                    <td scope="row">{{get.recipt.option}}</td>
                                                    <td class="my-1">{{get.recipt.customer.full_name}}</td>
                                                    {% if get.recipt.status == 'Dynamic Billing' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.recipt.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% elif get.recipt.status == 'Cancelled' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.recipt.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% elif get.recipt.status == 'Payeed' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.recipt.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% else %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.recipt.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% endif %}                                  
                                                    {% if get.recipt.status == 'Payeed' %}
                                                        <td class="my-1">{% trans "Payeed" %} <i class="fa-solid fa-circle-check color-green"></i></td>
                                                    {% elif get.recipt.status == 'Cancelled' %}
                                                        <td class="my-1">{% trans "Cancelled" %} <i class="fa-solid fa-triangle-exclamation color-red"></i></td>
                                                    {% else %}
                                                        <td class="my-1">{% trans "Pending" %} <i class="fa-solid fa-exclamation"></i></td>
                                                    {% endif %}
                                                    <td class="my-1">${{get.recipt.amount}}</td>
                                                    <td class="text-center check-product my-1"><input type="checkbox" class="child" name="product_id[]" value="{{get.recipt.id}}" id="delete_product"></td>
                                                </tr>
                                            {% endfor %}
                                        {% elif item.control.all %}
                                            {% for get in item.control.all %}
                                                <tr>
                                                    <td scope="row">{{get.origin.option}}</td>
                                                    <td class="my-1">{{get.origin.customer.full_name}}</td>
                                                    {% if get.origin.status == 'Dynamic Billing' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% elif get.origin.status == 'Cancelled' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% elif get.origin.status == 'Payeed' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% else %}
                                                        <td class="my-1"><a href="/billings/checkout/{{get.origin.id}}" class="btn-sm btn-shappire">{% trans "Pending" %}</a></td> 
                                                    {% endif %}                                  
                                                    {% if get.origin.status == 'Payeed' %}
                                                        <td class="my-1">{% trans "Payeed" %} <i class="fa-solid fa-circle-check color-green"></i></td>
                                                    {% elif get.origin.status == 'Canceled' %}
                                                        <td class="my-1">{% trans "Canceled" %} <i class="fa-solid fa-triangle-exclamation color-red"></i></td>
                                                    {% else %}
                                                        <td class="my-1">{% trans "Pending" %} <i class="fa-solid fa-exclamation"></i></td>
                                                    {% endif %}
                                                    <td class="my-1">Bs. {{get.total}}</td>
                                                    <td class="text-center check-product my-1"><input type="checkbox" class="child" name="product_id[]" value="{{get.origin.id}}" id="delete_product"></td>
                                                </tr>
                                            {% endfor %}
                                        {% else %}
                                            <tr>
                                                <td scope="row">{{item.option}}</td>
                                                <td class="my-1">{{item.customer.full_name}}</td>
                                                {% if item.status == 'Payeed' %}
                                                    <td class="my-1"><a href="#" class="blue-link"></a></td>
                                                {% else %}
                                                    <td class="my-1"><a href="/billings/checkout/{{item.id}}" class="btn-sm btn-shappire">{% trans "Pending" %}</a></td> 
                                                {% endif %}                                   
                                                {% if item.status == 'Payeed' %}
                                                    <td class="my-1">{% trans "Payeed" %} <i class="fa-solid fa-circle-check color-green"></i></td>
                                                {% elif item.status == 'Canceled' %}
                                                    <td class="my-1">{% trans "Canceled" %} <i class="fa-solid fa-triangle-exclamation color-red"></i></td>
                                                {% else %}
                                                    <td class="my-1">{% trans "Pending" %} <i class="fa-solid fa-exclamation"></i></td>
                                                {% endif %}
                                                <td class="my-1">${{item.amount}}</td>
                                                <td class="text-center check-product my-1"><input type="checkbox" class="child" name="product_id[]" value="{{item.id}}" id="delete_product"></td>
                                            </tr>
                                        {% endif %}
                                    {% endif %}
                                {% endfor %} 
                            </tbody>
                            <tfoot>
                                
                            </tfoot>
                        </table>                    
                    </div>
                    <div class="col-lg-10 rounded background budget-table p-4 d-none wow fadeInRight" data-wow-duration="1s" data-wow-delay="0.5s">
                        <table id="budgets" class="compact table table-borderless table-hover billing-table ">
                            <thead>
                                <tr class="text-center">
                                    <th style="width: 15%;">{% trans "Type" %}</th>
                                    <th style="width: 20%;">{% trans "Client" %}</th>
                                    <th style="width: 15%;">{% trans "Billing" %} N°</th>
                                    <th style="width: 15%;">{% trans "Status" %}</th>
                                    <th style="width: 15%;">{% trans "Amount" %}</th>
                                    <th style="width: 5%;" class="text-center"> <input type="checkbox"  name="" id="parent2"></th> 
                                </tr>
                            </thead>
                            <tbody>
                                {% for item in pages %}
                                    {% if item.option == 'budget_design' %}
                                        {% if item.billing_control.all %}
                                            {% for get in item.billing_control.all %}
                                                <tr>
                                                    <td scope="row">{{get.recipt.option}}</td>
                                                    <td class="my-1">{{get.recipt.customer.full_name}}</td>
                                                    {% if get.recipt.status == 'Dynamic Billing' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.recipt.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% elif get.recipt.status == 'Cancelled' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.recipt.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% elif get.recipt.status == 'Payeed' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.recipt.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% else %}
                                                        <td class="my-1"><a href="/billings/preview/{{get.recipt.id}}" class="btn-sm btn-shappire">{% trans "Pending" %}</a></td> 
                                                    {% endif %}                                  
                                                    {% if get.recipt.status == 'Payeed' %}
                                                        <td class="my-1">{% trans "Payeed" %} <i class="fa-solid fa-circle-check color-green"></i></td>
                                                    {% elif get.recipt.status == 'Cancelled' %}
                                                        <td class="my-1">{% trans "Cancelled" %} <i class="fa-solid fa-triangle-exclamation color-red"></i></td>
                                                    {% else %}
                                                        <td class="my-1">{% trans "Pending" %} <i class="fa-solid fa-exclamation"></i></td>
                                                    {% endif %}
                                                    <td class="my-1">${{get.recipt.amount}}</td>
                                                    <td class="text-center check-product my-1"><input type="checkbox" class="child2" name="product_id[]" value="{{get.recipt.id}}" id="delete_product"></td>
                                                </tr>
                                            {% endfor %}
                                        {% elif item.control.all %}
                                            {% for get in item.control.all %}
                                                <tr>
                                                    <td scope="row">{{get.origin.option}}</td>
                                                    <td class="my-1">{{get.origin.customer.full_name}}</td>
                                                    {% if get.origin.status == 'Dynamic Billing' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% elif get.origin.status == 'Cancelled' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% elif get.origin.status == 'Payeed' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% else %}
                                                        <td class="my-1"><a href="/billings/preview/{{get.origin.id}}" class="btn-sm btn-shappire">{% trans "Pending" %}</a></td> 
                                                    {% endif %}                                  
                                                    {% if get.origin.status == 'Payeed' %}
                                                        <td class="my-1">{% trans "Payeed" %} <i class="fa-solid fa-circle-check color-green"></i></td>
                                                    {% elif get.origin.status == 'Canceled' %}
                                                        <td class="my-1">{% trans "Canceled" %} <i class="fa-solid fa-triangle-exclamation color-red"></i></td>
                                                    {% else %}
                                                        <td class="my-1">{% trans "Pending" %} <i class="fa-solid fa-exclamation"></i></td>
                                                    {% endif %}
                                                    <td class="my-1">Bs. {{get.total}}</td>
                                                    <td class="text-center check-product my-1"><input type="checkbox" class="child2" name="product_id[]" value="{{get.origin.id}}" id="delete_product"></td>
                                                </tr>
                                            {% endfor %}
                                        {% else %}
                                            <tr>
                                                <td scope="row">{{item.option}}</td>
                                                <td class="my-1">{{item.customer.full_name}}</td>
                                                {% if item.status == 'Dynamic Billing' %}
                                                    <td class="my-1"><a href="/billings/get-billing/{{item.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                {% elif item.status == 'Payeed' %}
                                                    <td class="my-1"><a href="/billings/get-billing/{{item.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                {% elif item.status == 'Cancelled' %}
                                                    <td class="my-1"><a href="/billings/get-billing/{{item.id}}" class="blue-link">{{get.control_id}}</a></td>>
                                                {% else %}
                                                    <td class="my-1"><a href="/billings/preview/{{item.id}}" class="btn-sm btn-shappire">{% trans "Pending" %}</a></td> 
                                                {% endif %}                                   
                                                {% if item.status == 'Payeed' %}
                                                    <td class="my-1">{% trans "Payeed" %} <i class="fa-solid fa-circle-check color-green"></i></td>
                                                {% elif item.status == 'Canceled' %}
                                                    <td class="my-1">{% trans "Canceled" %} <i class="fa-solid fa-triangle-exclamation color-red"></i></td>
                                                {% else %}
                                                    <td class="my-1">{% trans "Pending" %} <i class="fa-solid fa-exclamation"></i></td>
                                                {% endif %}
                                                <td class="my-1">${{item.amount}}</td>
                                                <td class="text-center check-product my-1"><input type="checkbox" class="child2" name="product_id[]" value="{{item.id}}" id="delete_product"></td>
                                            </tr>
                                        {% endif %}
                                    {% elif item.option == 'budget_marketing' %}
                                        {% if item.billing_control.all %}
                                            {% for get in item.billing_control.all %}
                                                <tr>
                                                    <td scope="row">{{get.recipt.option}}</td>
                                                    <td class="my-1">{{get.recipt.customer.full_name}}</td>
                                                    {% if get.recipt.status == 'Dynamic Billing' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.recipt.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% elif get.recipt.status == 'Cancelled' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.recipt.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% elif get.recipt.status == 'Payeed' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.recipt.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% else %}
                                                        <td class="my-1"><a href="/billings/preview/{{get.recipt.id}}" class="btn-sm btn-shappire">{% trans "Pending" %}</a></td> 
                                                    {% endif %}                                  
                                                    {% if get.recipt.status == 'Payeed' %}
                                                        <td class="my-1">{% trans "Payeed" %} <i class="fa-solid fa-circle-check color-green"></i></td>
                                                    {% elif get.recipt.status == 'Cancelled' %}
                                                        <td class="my-1">{% trans "Cancelled" %} <i class="fa-solid fa-triangle-exclamation color-red"></i></td>
                                                    {% else %}
                                                        <td class="my-1">{% trans "Pending" %} <i class="fa-solid fa-exclamation"></i></td>
                                                    {% endif %}
                                                    <td class="my-1">${{get.recipt.amount}}</td>
                                                    <td class="text-center check-product my-1"><input type="checkbox" class="child2" name="product_id[]" value="{{get.recipt.id}}" id="delete_product"></td>
                                                </tr>
                                            {% endfor %}
                                        {% elif item.control.all %}
                                            {% for get in item.control.all %}
                                                <tr>
                                                    <td scope="row">{{get.origin.option}}</td>
                                                    <td class="my-1">{{get.origin.customer.full_name}}</td>
                                                    {% if get.origin.status == 'Dynamic Billing' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% elif get.origin.status == 'Cancelled' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% elif get.origin.status == 'Payeed' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% else %}
                                                        <td class="my-1"><a href="/billings/preview/{{get.origin.id}}" class="btn-sm btn-shappire">{% trans "Pending" %}</a></td> 
                                                    {% endif %}                                  
                                                    {% if get.origin.status == 'Payeed' %}
                                                        <td class="my-1">{% trans "Payeed" %} <i class="fa-solid fa-circle-check color-green"></i></td>
                                                    {% elif get.origin.status == 'Canceled' %}
                                                        <td class="my-1">{% trans "Canceled" %} <i class="fa-solid fa-triangle-exclamation color-red"></i></td>
                                                    {% else %}
                                                        <td class="my-1">{% trans "Pending" %} <i class="fa-solid fa-exclamation"></i></td>
                                                    {% endif %}
                                                    <td class="my-1">Bs. {{get.total}}</td>
                                                    <td class="text-center check-product my-1"><input type="checkbox" class="child2" name="product_id[]" value="{{get.origin.id}}" id="delete_product"></td>
                                                </tr>
                                            {% endfor %}
                                        {% else %}
                                            <tr>
                                                <td scope="row">{{item.option}}</td>
                                                <td class="my-1">{{item.customer.full_name}}</td>
                                                {% if item.status == 'Dynamic Billing' %}
                                                    <td class="my-1"><a href="/billings/get-billing/{{item.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                {% elif item.status == 'Payeed' %}
                                                    <td class="my-1"><a href="/billings/get-billing/{{item.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                {% elif item.status == 'Cancelled' %}
                                                    <td class="my-1"><a href="/billings/get-billing/{{item.id}}" class="blue-link">{{get.control_id}}</a></td>>
                                                {% else %}
                                                    <td class="my-1"><a href="/billings/preview/{{item.id}}" class="btn-sm btn-shappire">{% trans "Pending" %}</a></td> 
                                                {% endif %}                                   
                                                {% if item.status == 'Payeed' %}
                                                    <td class="my-1">{% trans "Payeed" %} <i class="fa-solid fa-circle-check color-green"></i></td>
                                                {% elif item.status == 'Canceled' %}
                                                    <td class="my-1">{% trans "Canceled" %} <i class="fa-solid fa-triangle-exclamation color-red"></i></td>
                                                {% else %}
                                                    <td class="my-1">{% trans "Pending" %} <i class="fa-solid fa-exclamation"></i></td>
                                                {% endif %}
                                                <td class="my-1">${{item.amount}}</td>
                                                <td class="text-center check-product my-1"><input type="checkbox" class="child2" name="product_id[]" value="{{item.id}}" id="delete_product"></td>
                                            </tr>
                                        {% endif %}    
                                    {% elif item.option == 'budget_development' %}
                                        {% if item.billing_control.all %}
                                            {% for get in item.billing_control.all %}
                                                <tr>
                                                    <td scope="row">{{get.recipt.option}}</td>
                                                    <td class="my-1">{{get.recipt.customer.full_name}}</td>
                                                    {% if get.recipt.status == 'Dynamic Billing' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.recipt.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% elif get.recipt.status == 'Cancelled' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.recipt.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% elif get.recipt.status == 'Payeed' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.recipt.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% else %}
                                                        <td class="my-1"><a href="/billings/preview/{{get.recipt.id}}" class="btn-sm btn-shappire">{% trans "Pending" %}</a></td> 
                                                    {% endif %}                                  
                                                    {% if get.recipt.status == 'Payeed' %}
                                                        <td class="my-1">{% trans "Payeed" %} <i class="fa-solid fa-circle-check color-green"></i></td>
                                                    {% elif get.recipt.status == 'Cancelled' %}
                                                        <td class="my-1">{% trans "Cancelled" %} <i class="fa-solid fa-triangle-exclamation color-red"></i></td>
                                                    {% else %}
                                                        <td class="my-1">{% trans "Pending" %} <i class="fa-solid fa-exclamation"></i></td>
                                                    {% endif %}
                                                    <td class="my-1">${{get.recipt.amount}}</td>
                                                    <td class="text-center check-product my-1"><input type="checkbox" class="child2" name="product_id[]" value="{{get.recipt.id}}" id="delete_product"></td>
                                                </tr>
                                            {% endfor %}
                                        {% elif item.control.all %}
                                            {% for get in item.control.all %}
                                                <tr>
                                                    <td scope="row">{{get.origin.option}}</td>
                                                    <td class="my-1">{{get.origin.customer.full_name}}</td>
                                                    {% if get.origin.status == 'Dynamic Billing' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% elif get.origin.status == 'Cancelled' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% elif get.origin.status == 'Payeed' %}
                                                        <td class="my-1"><a href="/billings/get-billing/{{get.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                    {% else %}
                                                        <td class="my-1"><a href="/billings/preview/{{get.origin.id}}" class="btn-sm btn-shappire">{% trans "Pending" %}</a></td> 
                                                    {% endif %}                                  
                                                    {% if get.origin.status == 'Payeed' %}
                                                        <td class="my-1">{% trans "Payeed" %} <i class="fa-solid fa-circle-check color-green"></i></td>
                                                    {% elif get.origin.status == 'Canceled' %}
                                                        <td class="my-1">{% trans "Canceled" %} <i class="fa-solid fa-triangle-exclamation color-red"></i></td>
                                                    {% else %}
                                                        <td class="my-1">{% trans "Pending" %} <i class="fa-solid fa-exclamation"></i></td>
                                                    {% endif %}
                                                    <td class="my-1">Bs. {{get.total}}</td>
                                                    <td class="text-center check-product my-1"><input type="checkbox" class="child2" name="product_id[]" value="{{get.origin.id}}" id="delete_product"></td>
                                                </tr>
                                            {% endfor %}
                                        {% else %}
                                            <tr>
                                                <td scope="row">{{item.option}}</td>
                                                <td class="my-1">{{item.customer.full_name}}</td>
                                                {% if item.status == 'Dynamic Billing' %}
                                                    <td class="my-1"><a href="/billings/get-billing/{{item.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                {% elif item.status == 'Payeed' %}
                                                    <td class="my-1"><a href="/billings/get-billing/{{item.id}}" class="blue-link">{{get.control_id}}</a></td>
                                                {% elif item.status == 'Cancelled' %}
                                                    <td class="my-1"><a href="/billings/get-billing/{{item.id}}" class="blue-link">{{get.control_id}}</a></td>>
                                                {% else %}
                                                    <td class="my-1"><a href="/billings/preview/{{item.id}}" class="btn-sm btn-shappire">{% trans "Pending" %}</a></td> 
                                                {% endif %}                                   
                                                {% if item.status == 'Payeed' %}
                                                    <td class="my-1">{% trans "Payeed" %} <i class="fa-solid fa-circle-check color-green"></i></td>
                                                {% elif item.status == 'Canceled' %}
                                                    <td class="my-1">{% trans "Canceled" %} <i class="fa-solid fa-triangle-exclamation color-red"></i></td>
                                                {% else %}
                                                    <td class="my-1">{% trans "Pending" %} <i class="fa-solid fa-exclamation"></i></td>
                                                {% endif %}
                                                <td class="my-1">${{item.amount}}</td>
                                                <td class="text-center check-product my-1"><input type="checkbox" class="child2" name="product_id[]" value="{{item.id}}" id="delete_product"></td>
                                            </tr>
                                        {% endif %}                                
                                    {% endif %}
                                {% endfor %} 
                            </tbody>
                            <tfoot>
                                
                            </tfoot>
                        </table>                
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="removeObj" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="mb-3">
                  <div class="container">
                    <div class="row p-2">
                        <div class="col-12"> 
                            <h3 class="text-center alert-title">{% trans "Are you sure?" %}</h3>
                            <div class="iconhigh">
                                <div id="anicon">
        
                                </div> 
                            </div>
                            <div id="contentAlert">
                                <p class="text-center text-dark">{% trans "This option cannot be reversed" %}.</p>   
                                <div class="d-flex justify-content-center">
                                    <input type="hidden" id="removeData">
                                    <button onclick="removeObjComplete()" class="btn btn-danger remove-btn">{% trans "Remove" %}</button>
                                </div>
                            </div>
                        </div>
                    </div>
                  </div>
                </div>                   
              </div>
            </div>
        </div>
        <div class="modal fade" id="removeObj2" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="mb-3">
                  <div class="container">
                    <div class="row p-2">
                        <div class="col-12"> 
                            <h3 class="text-center alert-title">{% trans "Are you sure?" %}</h3>
                            <div class="iconhigh">
                                <div id="anicon2">
        
                                </div> 
                            </div>
                            <div id="contentAlert2">
                                <p class="text-center text-dark">{% trans "This option cannot be reversed" %}.</p>   
                                <div class="d-flex justify-content-center">
                                    <input type="hidden" id="removeData">
                                    <button onclick="removeObjComplete2()" class="btn btn-danger remove-btn">{% trans "Remove" %}</button>
                                </div>
                            </div>
                        </div>
                    </div>
                  </div>
                </div>                   
              </div>
            </div>
        </div>
        {% endif %}

        {% if call == "billing" %}
            <div class="container">
                <form class="w-100" action="" method="post" onsubmit="btnDisabled5()">
                    {% csrf_token %}
                    <div class="new-billing m-3 wow fadeInRight" data-wow-duration="1s" data-wow-delay="0.5s">
                        <div class="row justify-content-center align-items-center my-3">
                            <div class="col-lg-7">
                                <h2 class="fs-3 oxanium my-4 text-center fw-bold">{% trans "Dynamic Billing" %}</h2>
                            </div>
                            <div class="col-lg-2">
                                <a href="{% host_url 'billing' host 'stela' %}" class="btn btn-shappire btn-block" type="button" onclick="backHome()">{% trans "Back" %}</a>
                            </div>
                        </div>
                        <div class="row justify-content-center">
                            <div class="col-lg-10">
                                <div class="rounded black-box bg-stela-sidebar label-light">
                                    <div class="row justify-content-between data-render">
                                        <div class="form-group col-md-6 col-lg-4 my-2">
                                            <label for="client">{% trans "Client ID" %}</label>
                                            <div class="d-flex">
                                                <input class="form-control" placeholder='{% trans "Search ID" %}' type="search" name="userid" id="custid"><button class="btn btn-shappire search-btn center-btn" type="button" onclick="searchCustBill()"><i class="fa-solid fa-magnifying-glass"></i></button>
                                            </div>
                                            <p class="text-small text-danger fw-bold ml-4" id="response"></p>
                                        </div>
                                        <div class="form-group col-md-6 col-lg-4 my-2">
                                            <label for="email">{% trans "Client" %}</label>
                                            <input class="form-control" type="text" name="full_name">
                                        </div>
                                        <div class="form-group col-md-6 col-lg-4 my-2">
                                            <label for="email">Email</label>
                                            <input class="form-control" type="email" name="email">
                                        </div>
                                        <div class="form-group col-md-6 col-lg-3 my-2">
                                            <label for="phone">{% trans "Phone" %}</label>
                                            <input class="form-control" type="text" name="phone">
                                        </div>
                                        <div class="form-group col-md-6 col-lg-2 my-2">
                                            {{form.option | as_crispy_field}}
                                        </div>
                                        <div class="form-group col-md-6 col-lg-3 my-2">
                                            <label for="address">{% trans "Location" %}</label>
                                            <select name="country" class="select form-control">
                                                <option value="" selected>----</option>
                                                {% for country in countries %}
                                                    <option value="{{country.name}}">{{country.name}}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                        <div class="form-group col-md-6 col-lg-4 my-2">
                                            <label for="address">{% trans "Address Line" %}</label>
                                            <input class="form-control" type="text" name="address" id="">
                                        </div>
                                        </div>
                                        <div class="form-group col-lg-12 my-2">
                                            <div class="row justify-content-center">
                                        <div class="form-group col-lg-12 my-2">
                                            {{form.report | as_crispy_field}}
                                        </div>
                                    <div class="row justify-content-center">
                                        <div class="col-lg-10">
                                            <h3 class="ff-21 oxanium fw-bold mt-4 text-center text-light">{% trans "Recipt Charges" %}</h3>
                                            <div id="formset">
                                                {{ formset.management_form }}
                                                    {% for form in formset %}
                                                    <div id="form-0" class="formset input-flex justify-content-between pt-2">
                                                        {{form}}
                                                    </div>
                                                    {% endfor %}
                                                <div id="empty-form" class="d-none">
                                                    {{formset.empty_form}}
                                                </div>
                                            </div>
                                            <div class="d-flex justify-content-between my-3 text-light">
                                                <button class="btn-clear text-light" id="add-form" type="button"><i class="fa-solid fa-plus"></i> {% trans "Add" %}</button>
                                                <button class="btn-clear text-light" id="erase-form" type="button"><i class="fa-solid fa-minus"></i> {% trans "Remove" %}</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row justify-content-center">
                                        <div class="col-lg-10">
                                            <h3 class="ff-21 oxanium fw-bold mt-4 text-center text-light">{% trans "Recipt Discounts" %}</h3>
                                            <div id="formset2">
                                                {{ formset2.management_form }}
                                                    {% for form in formset2 %}
                                                    <div id="form-0" class="formset2 input-flex justify-content-between pt-2">
                                                        {{form}}
                                                    </div>
                                                    {% endfor %}
                                                <div id="empty-form2" class="d-none">
                                                    {{formset2.empty_form}}
                                                </div>
                                            </div>
                                            <div class="d-flex justify-content-between my-3 text-light">
                                                <button class="btn-clear text-light" id="add-formset2" type="button"><i class="fa-solid fa-plus"></i> {% trans "Add" %}</button>
                                                <button class="btn-clear text-light" id="erase-formset2" type="button"><i class="fa-solid fa-minus"></i> {% trans "Remove" %}</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="d-flex justify-content-end mt-4 mr-3">
                                    <button type="submit" class="btn btn-shappire center-btn form-btn5 d-flex">{% trans "Get Preview" %} <i class="fa-solid fa-paper-plane mx-2"></i></button>
                                </div> 
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        {% endif %}

        {% if call == "load" %}
            <div class="container">
                <form action="" method="post">
                    {% csrf_token %}
                    <div class="load-data m-3 wow fadeInRight" data-wow-duration="1s" data-wow-delay="0.5s">
                        <div class="row justify-content-center align-items-center my-3">
                            <div class="col-lg-7">
                                <h2 class="fs-3 oxanium my-4 text-center fw-bold">{% trans "Payment System" %}</h2>
                            </div>
                            <div class="col-lg-2">
                                <a href="{% host_url 'business:billing' host 'stela' %}" class="btn btn-shappire btn-block" type="button" onclick="backHome()">{% trans "Back" %}</a>
                            </div>
                        </div>
                        <div class="row justify-content-between">
                            <div class="col-lg-7">
                                <div class="rounded bg-stela-sidebar label-light p-2">            
                                    <div class="row justify-content-center">
                                        <div class="col-lg-10">
                                            <h3 class="ff-21 oxanium fw-bold mt-4 text-center text-light">{% trans "Recipt Charges" %}</h3>
                                            <div id="formset">
                                                {{ formset.management_form }}
                                                    {% for form in formset %}
                                                    <div id="form-0" class="formset input-flex justify-content-between pt-2">
                                                        {{form}}
                                                    </div>
                                                    {% endfor %}
                                                <div id="empty-form" class="d-none">
                                                    {{formset.empty_form}}
                                                </div>
                                            </div>
                                            <div class="d-flex justify-content-between my-3 text-light">
                                                <button class="btn-clear text-light" id="add-form" type="button"><i class="fa-solid fa-plus"></i> {% trans "Add" %}</button>
                                                <button class="btn-clear text-light" id="erase-form" type="button"><i class="fa-solid fa-minus"></i> {% trans "Remove" %}</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row justify-content-center">
                                        <div class="col-lg-10">
                                            <h3 class="ff-21 oxanium fw-bold mt-4 text-center text-light">{% trans "Recipt Discounts" %}</h3>
                                            <div id="formset2">
                                                {{ formset2.management_form }}
                                                    {% for form in formset2 %}
                                                    <div id="form-0" class="formset2 input-flex justify-content-between pt-2">
                                                        {{form}}
                                                    </div>
                                                    {% endfor %}
                                                <div id="empty-form2" class="d-none">
                                                    {{formset2.empty_form}}
                                                </div>
                                            </div>
                                            <div class="d-flex justify-content-between my-3 text-light">
                                                <button class="btn-clear text-light" id="add-formset2" type="button"><i class="fa-solid fa-plus"></i> {% trans "Add" %}</button>
                                                <button class="btn-clear text-light" id="erase-formset2" type="button"><i class="fa-solid fa-minus"></i> {% trans "Remove" %}</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="d-flex justify-content-end mt-4 mr-3">
                                    <button type="submit" class="btn btn-shappire">{% trans "Checkout" %} <i class="fa-solid fa-credit-card"></i></button>
                                </div> 
                            </div>
                            <div class="col-lg-5">
                                <div class="rounded bg-stela-sidebar label-light p-2">
                                    <h3 class="ff-21 oxanium fw-bold mt-4 text-center text-light">{% trans "Search Customer" %}</h3>
                                    <div class="d-flex mx-4 my-2">
                                        <input class="form-control" type="search" id="custid"><button class="btn btn-shappire search-btn center-btn" type="button" onclick="searchCust()"><i class="fa-solid fa-magnifying-glass"></i></button>
                                    </div>
                                    <p class="text-small text-danger fw-bold ml-4" id="response"></p>
                                    <h3 class="ff-21 oxanium fw-bold mt-4 text-center text-light">{% trans "Customer Data" %}</h3>
                                    <div class="data-render">
                                        <div class="form-group mx-4 my-2">
                                            <label for="client">{% trans "Full Name" %}</label>
                                            <input class="form-control" type="text" name="client" id="client">
                                        </div>
                                        <div class="form-group mx-4 my-2">
                                            <label for="client">{% trans "ID or EIN" %}</label>
                                            <input class="form-control" type="text" name="userid" id="userid">
                                        </div>
                                        <div class="form-group mx-4 my-2">
                                            <label for="client">{% trans "Phone" %}</label>
                                            <input class="form-control" type="text" name="phone" id="phone">
                                        </div>
                                        <div class="form-group mx-4 mt-2 mb-4">
                                            <label for="client">{% trans "Address" %}</label>
                                            <input class="form-control" type="text" name="address" id="address">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        {% endif %}

        {% if call == "error"  %}
            <div class="container">
                <form action="" method="post">
                    {% csrf_token %}
                    <div class="load-data m-3 wow fadeInRight" data-wow-duration="1s" data-wow-delay="0.5s">
                        <div class="row justify-content-center align-items-center my-3">
                            <div class="col-lg-7">
                                <h2 class="fs-3 oxanium my-4 text-center fw-bold">{% trans "Payment System" %}</h2>
                                <p class="fw-bold text-danger">{% trans "System Error" %}: {{error}}</p>
                            </div>
                            <div class="col-lg-2">
                                <a href="/billings/home" class="btn btn-shappire btn-block" type="button">{% trans "Back" %}</a>
                            </div>
                        </div>
                        <div class="row justify-content-between">
                            <div class="col-lg-7">
                                <div class="rounded bg-stela-sidebar label-light p-2">            
                                    <div class="row justify-content-center">
                                        <div class="col-lg-10">
                                            <h3 class="ff-21 oxanium fw-bold mt-4 text-center text-light">{% trans "Recipt Charges" %}</h3>
                                            <div id="formset">
                                                {{ formset.management_form }}
                                                    {% for form in formset %}
                                                    <div id="form-0" class="formset input-flex justify-content-between pt-2">
                                                        {{form}}
                                                    </div>
                                                    
                                                    {% endfor %}
                                                <div id="empty-form" class="d-none">
                                                    {{formset.empty_form}}
                                                </div>
                                            </div>
                                            <div class="d-flex justify-content-between my-3 text-light">
                                                <button class="btn-clear text-light" id="add-form" type="button"><i class="fa-solid fa-plus"></i> {% trans "Add" %}</button>
                                                <button class="btn-clear text-light" id="erase-form" type="button"><i class="fa-solid fa-minus"></i> {% trans "Remove" %}</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row justify-content-center">
                                        <div class="col-lg-10">
                                            <h3 class="ff-21 oxanium fw-bold mt-4 text-center text-light">{% trans "Recipt Discounts" %}</h3>
                                            <div id="formset2">
                                                {{ formset2.management_form }}
                                                    {% for form in formset2 %}
                                                    <div id="form-0" class="formset2 input-flex justify-content-between pt-2">
                                                        {{form}}
                                                    </div>
                                                    {% endfor %}
                                                <div id="empty-form2" class="d-none">
                                                    {{formset2.empty_form}}
                                                </div>
                                            </div>
                                            <div class="d-flex justify-content-between my-3 text-light">
                                                <button class="btn-clear text-light" id="add-formset2" type="button"><i class="fa-solid fa-plus"></i> {% trans "Add" %}</button>
                                                <button class="btn-clear text-light" id="erase-formset2" type="button"><i class="fa-solid fa-minus"></i> {% trans "Remove" %}</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="d-flex justify-content-end mt-4 mr-3">
                                    <button type="submit" class="btn btn-shappire">{% trans "Checkout" %} <i class="fa-solid fa-credit-card"></i></button>
                                </div> 
                            </div>
                            <div class="col-lg-5">
                                <div class="rounded bg-stela-sidebar label-light p-2">
                                    <h3 class="ff-21 oxanium fw-bold mt-4 text-center text-light">{% trans "Search Customer" %}</h3>
                                    <div class="d-flex mx-4 my-2">
                                        <input class="form-control" type="search" id="custid"><button class="btn btn-shappire search-btn center-btn" type="button" onclick="searchCust()"><i class="fa-solid fa-magnifying-glass"></i></button>
                                    </div>
                                    <p class="text-small text-danger fw-bold ml-4" id="response"></p>
                                    <h3 class="ff-21 oxanium fw-bold mt-4 text-center text-light">{% trans "Customer Data" %}</h3>
                                    <div class="data-render">
                                        <div class="form-group mx-4 my-2">
                                            <label for="client">{% trans "Full Name" %}</label>
                                            <input class="form-control" type="text" name="client" id="client">
                                        </div>
                                        <div class="form-group mx-4 my-2">
                                            <label for="client">{% trans "ID or EIN" %}</label>
                                            <input class="form-control" type="text" name="userid" id="userid">
                                        </div>
                                        <div class="form-group mx-4 my-2">
                                            <label for="client">{% trans "Phone" %}</label>
                                            <input class="form-control" type="text" name="phone" id="phone">
                                        </div>
                                        <div class="form-group mx-4 mt-2 mb-4">
                                            <label for="client">{% trans "Address" %}</label>
                                            <input class="form-control" type="text" name="address" id="address">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        {% endif %}

        {% if call == "checkout" %}
            <div class="container overflow-hidden"  id=payments>
                <h1 class="fs-3 text-uppercase oxanium text-center my-5 wow fadeIn" id="items" data-wow-duration="1s" data-wow-delay="0s">{% trans "Checkout" %}</h1>
                <div class="row justify-content-between">
                    <div class="col-lg-8">
                        <div class="check-card-stela check-lg wow fadeInLeft items sm-scroll" data-wow-duration="1s" data-wow-delay=".5s">
                            <div class="col-12 data-purchase">
                                <h3 class="fs-5 mb-2" id="title">{% trans "Customer" %}: {{inv.customer.full_name}}</h3>
                                <h3 class="my-1 fw-bold">{% trans "List Items" %}</h3>
                                <ul class="flexlist mb-3">
                                    {% if inv.service_recipt.all %}
                                        {% for item in inv.service_recipt.all %}
                                            <li>{{item.field}} x {{item.qty}}</li>
                                        {% endfor %}
                                    {% elif inv.product_recipt.all %}
                                        {% for item in inv.product_recipt.all %}
                                            <li>{{item.field}} x {{item.qty}} x ${{item.field.price}}</li>
                                        {% endfor %}
                                    {% endif %}
                                   
                                </ul>
                                {% if inv.discounts.all %}
                                    <h3 class="my-1 fw-bold">{% trans "List Discounts" %}</h3>
                                    <ul class="flexlist mb-3">
                                        {% for item in inv.discounts.all %}
                                            <li>{{item.field}} ${{item.amount}}</li>
                                        {% endfor %}
                                    </ul>
                                {% endif %}
                            </div>
                            <div class="d-flex justify-content-end">
                                {% if user.is_authenticated %}
                                    <div class="col-4">
                                        <a href="/billings/edit-recipt/{{inv.id}}" class="btn btn-shappire oxanium">{% trans "Edit Recipt" %}<i class="fa-solid fa-pen-to-square fs-5 mx-2"></i></a>
                                    </div>
                                {% endif %}
                            </div>
                                <script>
                                                function removeCart() {
                                                    Swal.fire({
                                                        title: '{% trans "Remove selection" %}',
                                                        text: '{% trans "This option cannot be reversed!" %}',
                                                        icon: 'warning',
                                                        showCancelButton: true,
                                                        confirmButtonColor: '#050225',
                                                        cancelButtonColor: '#d33',
                                                        confirmButtonText: '{% trans "Yes, remove!" %}',
                                                        cancelButtonText: '{% trans "Cancel" %}'
                                                    }).then((result) => {
                                                        if (result.isConfirmed) {
                                                            $.ajax({
                                                                url: "",
                                                                method:"POST",
                                                                data: {
                                                                    item: $('#item-{{select.id}}').val(),
                                                                    csrfmiddlewaretoken:CSRF_TOKEN,
                                                                    action: 'removeCart'
                                                                },
                                                                    success:function(json){
                                                                        Swal.fire({
                                                                            icon: 'success',
                                                                            title: '{% trans "Request Complete." %}',
                                                                            text:'{% trans "were successfully removed." %}',
                                                                            confirmButtonText: '{% trans "Continue" %}',
                                                                            confirmButtonColor: '#050225',
                                                                        })
                                                                        window.location.replace("/stela/checkout")
                                                                    }
                                                                }) 
                                                        }
                                                    })
                                                }
                                </script>
                        </div> 
                        <div class="check-card-stela wow fadeInLeft mercantil sm-scroll d-none" data-wow-duration="1s" data-wow-delay=".5s">
                                <h2 class="fs-5 mb-3 text-center title-c2p-step1 wow fadeIn" data-wow-duration="1s" data-wow-delay=".5s">Bienvenidos a nuestra pasarela de Pago Movil Interbancario</h2>
                                <h2 class="fs-5 mb-3 text-center title-c2p-step2 wow fadeIn d-none" data-wow-duration="1s" data-wow-delay=".5s">¡Ahora completa tu pago!</h2>
                                <div class="row justify-content-center">
                                    <h3 class="mb-3 text-center sub-text1">Primero solicita la clave OTP para proceder</h3>
                                    <div class="col-lg-6 clave-c2p wow fadeIn" data-wow-duration="1.5s" data-wow-delay="1.5s">
                                        <label class="d-block" for="">Cedula o RIF</label>
                                        <input type="text" class="form-control mb-3" id="clientid" placeholder="V987654321 o J987654321">
                                        <label class="d-block" for="">Telefono afiliado</label>
                                        <input type="text" class="form-control mb-3" id="phone" placeholder="4249876543">
                                        <label class="d-block" for="">Seleccione el Banco</label>
                                        <select class="form-control" name="" id="bank">
                                            <option value="">-----</option>
                                            <option value="0102">Banco de Venezuela, S.A. </option>
                                            <option value="0104">Banco Venezolano de Crédito, S.A.</option>
                                            <option value="0105">Banco Mercantil C.A.</option>
                                            <option value="0108">Banco Provincial, S.A.</option>
                                            <option value="0114">Banco del Caribe C.A.</option>
                                            <option value="0115">Banco Exterior C.A.</option>
                                            <option value="0128">Banco Caroní C.A.</option>
                                            <option value="0134">Banesco Banco Universal, C.A.</option>
                                            <option value="0137">Banco Sofitasa</option>
                                            <option value="0138">Banco Plaza</option>
                                            <option value="0146">Banco de la Gente Emprendedora C.A</option>
                                            <option value="0151">Banco Fondo Común, C.A</option>
                                            <option value="0156">DelSur, Banco Universal C.A.</option>
                                            <option value="0163">Banco del Tesoro C.A.</option>
                                            <option value="0166">Banco Agrícola de Venezuela C.A.</option>
                                            <option value="0168">Bancrecer S.A., Banco Microfinanciero</option>
                                            <option value="0169">Mi Banco, Banco Microfinanciero, C.A.</option>
                                            <option value="0171">Banco Activo C.A.</option>
                                            <option value="0172">Bancamiga Banco Universal, C.A.</option>
                                            <option value="0173">Banco Internacional de Desarrollo C.A.</option>
                                            <option value="0174">Banplus Banco Universal, C.A.</option>
                                            <option value="0175">Banco Bicentenario del Pueblo, Banco Universal C.A.</option>
                                            <option value="0177"> Banco de la Fuerza Armada Nacional Bolivariana, B.U.</option>
                                            <option value="0191">Banco Nacional de Crédito C.A.</option>
                                        </select>
                                        <button class="btn btn-shappire mt-3 btn-block key-button center-btn" onclick="phoneTrigger()">Solicitar Clave</button>
                                        <p class="error-text1 text-center text-red fw-bold mt-2 wow fadeIn" data-wow-duration="1s" data-wow-delay="1.5s"></p>
                                    </div>
                                    <div class="col-lg-8 confirmar-clave mt-5 d-none wow fadeIn" data-wow-duration="1s" data-wow-delay="1.5s">
                                        <h3 class="mb-3 wow fadeIn" data-wow-duration="1.5s" data-wow-delay="1s">Introduzca el codigo recibido via SMS en su telefono</h3>
                                        <input type="text" class="form-control" id="opt">
                                        <button class="btn btn-shappire mt-3 btn-block center-btn pay-button" onclick="triggerPay()">Efectuar el Pago</button>
                                        <p class="error-text text-red fw-bold mt-4 wow fadeIn text-center" data-wow-duration="1s" data-wow-delay="1.5s"></p>
                                    </div>
                                </div>
                        </div>    
                        <div class="check-card-stela wow fadeInLeft payments d-none" data-wow-duration="1s" data-wow-delay=".5s">
                                <div class="row justify-content-between align-items-center my-3">
                                    <div class="col-lg-8">
                                        <div class="row justify-content-center">
                                            <div class="col-8">
                                                <img class="cover w-100" src="https://emmerutcdn.s3.amazonaws.com/static/img/stela/cart/paypal.png" alt="">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <button class="btn btn-shappire oxanium btn-block" id="paypal" data-bs-toggle="modal" data-bs-target="#staticBackdropPaypal">{% trans "Make Payment" %}</button>
                                    </div>
                                </div>
                                <div class="row justify-content-between my-3">
                                    <div class="col-lg-8">
                                        <div class="row justify-content-center align-items-center">
                                            <div class="col-2">
                                                <img class="w-100 cover" src="https://emmerutcdn.s3.amazonaws.com/static/img/stela/cart/visa.png" alt="">
                                            </div>
                                            <div class="col-2">
                                                <img class="w-100 cover" src="https://emmerutcdn.s3.amazonaws.com/static/img/stela/cart/master.png" alt="">
                                            </div>
                                            <div class="col-2">
                                                <img class="w-100 cover" src="https://emmerutcdn.s3.amazonaws.com/static/img/stela/cart/discover.png" alt="">
                                            </div>
                                            <div class="col-2">
                                                <img class="w-100 cover" src="https://emmerutcdn.s3.amazonaws.com/static/img/stela/cart/american.png" alt="">
                                            </div>
                                            <div class="col-2">
                                                <img class="w-100 cover" src="https://emmerutcdn.s3.amazonaws.com/static/img/stela/cart/diners.png" alt="">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <button class="btn btn-shappire oxanium btn-block" id="stripe" data-bs-toggle="modal" data-bs-target="#staticBackdropStripe">{% trans "Make Payment" %}</button>
                                    </div>
                                </div>
                                <div class="row justify-content-between align-items-center my-3">
                                    <div class="col-lg-8">
                                        <div class="row justify-content-center">
                                            <div class="col-lg-8">
                                                <img class="cover w-100" src="https://emmerutcdn.s3.amazonaws.com/static/img/stela/cart/pago-movil.png" alt="">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <button class="btn btn-shappire oxanium btn-block" onclick="mercantilBox()">Pagar en Bs.</button>
                                    </div>
                                </div>
                                <h3 class="text-center mt-5 fs-4">Stela {% trans "Secure Payments" %} <i class='bx bxs-credit-card-front fs-5'></i></h3>
                        </div>
                        <!-- Modal -->
                        <div class="modal fade" id="staticBackdropPaypal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <div id="paypal-button-container"></div>
                                        <script>
                                        
                                        </script>
                                    </div>
                                    <div class="modal-footer">
                                    
                                    </div>
                                </div>
                                </div>
                        </div>
                        <!-- Modal -->
                        <div class="modal fade" id="staticBackdropStripe" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                                <div class="modal-dialog modal-stripe">
                                <div class="modal-content">
                                    <div class="modal-header">
                                    <span class="fw-bold oxanium">{% trans "Purchase amount" %}: <span class="fw-bold fs-5 text-violet">${{total|unlocalize}}</span></span>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <form id="payment-form">
                                            <div id="payment-element">
                                            <!--Stripe.js injects the Payment Element-->
                                            </div>
                                            <button id="submitStripe" data-secret="{{ client_secret }}"><div class="spinner hidden" id="spinner"></div><span id="button-text">{% trans "Pay now" %}</span></button>
                                            <div id="payment-message" class="hidden"></div>
                                            <div class="a" id="card-errors" role="alert"></div>
                                        </form>
                                    </div>
                                    <div class="modal-footer">
                                    </div>
                                </div>
                                </div>
                        </div>
                    </div>
                        <div class="col-lg-4">
                            <div class="check-card-stela payment-import wow fadeInRight" data-wow-duration="1s" data-wow-delay=".5s">
                                    <h3 class="import-text text-center text-grey text-uppercase">{% trans "Payment amount" %}</h3>
                                        <ul class="list my-5">
                                            <li class="my-2 fs-5">
                                                <label class="awide fs-6 text-grey" for="breed">{% trans "Subtotal" %}: </label>
                                                <span class=" oxanium fw-bold color-secondary" id="breed"> ${{inv.amount|unlocalize}}</span>
                                            </li>
                                            <li class="my-2 fs-5">
                                                <label class="awide fs-6 text-grey" for="breed">{% trans "Payment Fee" %}: </label>
                                                <span class=" oxanium fw-bold color-secondary" id="breed"> ${{fee|unlocalize}}</span>
                                            </li>
                                            <li class="my-2 fs-5">
                                                <label class="awide fs-6 text-grey" for="breed">{% trans "Tax" %}: </label>
                                                <span class=" oxanium fw-bold color-secondary" id="breed"> ${{inv.tax|unlocalize}}</span>
                                            </li>
                                            <li class="my-2 fs-5">
                                                {% if inv.parent_discounts.all %}
                                                    <label class="awide fs-6 text-grey" for="breed">{% trans "Discounts" %}: </label>
                                                    <span class=" oxanium fw-bold color-secondary" id="breed"> -${{inv.discount|unlocalize}}</span>
                                                {% else %}
                                                    <label class="awide fs-6 text-grey" for="breed">{% trans "Discounts" %}: </label>
                                                    <span class=" oxanium fw-bold color-secondary" id="breed"> ------ </span>
                                                {% endif %}
                                            </li>
                                            <li class="my-2 fs-5">l
                                                <label class="awide fs-6 text-grey" for="breed">{% trans "Total" %}: </label>
                                                <span class=" oxanium fw-bold color-secondary" id="breed"> ${{total|unlocalize}}</span>
                                            </li>
                                        </ul>
                                        <div class="d-grid gap-2 mb-4">
                                            {% if user.is_authenticated %}
                                                <input type="hidden" id="recipt" value="{{inv.id}}">
                                                <input type="hidden" id="fee" value="{{fee}}">
                                                <input type="hidden" id="total" value="{{total}}">
                                                <button class="btn btn-shappire" onclick="processPurchase()">{% trans "Proccess Purchase" %}</button>
                                            {% else %}
                                                <a class="btn btn-block btn-shappire btn-payments" href="#payments" type="button" onclick="paymentMethod()">{% trans "Digital Payment" %} </a>
                                                <a class="btn btn-shappire btn-items d-none" href="#payments" type="button" onclick="listItems()">{% trans "List of Products" %}</a>
                                            {% endif %}
                                        </div>
                                        <script>
                                            const get_amount = {{total|unlocalize}};
                                            const reciptid = '{{inv.id}}';
                                            const url = "/billings/checkout/{{inv.id}}"
                                            var confirmTitle = '{{user.username}} {% trans "Confirm?" %}'
                                            var consultText = '{% trans "This option cannot be reversed!" %}'
                                            var confirmButton = '{% trans "Yes, delete it!" %}'
                                            var cancelButton = '{% trans "Cancel" %}'
                                            var titleResponse = '{% trans "Selection removed." %}'
                                            var textResponse = '{% trans "The records were erased." %}'
                                            const purchaseSuccess = '{% trans "Purchase Completed" %}'
                                            const purchaseSuccessText = '{% trans "Purchase processed successfully" %}'
                                            var confirmResponse = '{% trans "Continue" %}'
                                        </script> 
                                        <script>
                                            function getCookie(name) {
                                                var cookieValue = null;
                                                if (document.cookie && document.cookie !== '') {
                                                    var cookies = document.cookie.split(';'); 
                                                    for (var i = 0; i < cookies.length; i++) {
                                                        var cookie = cookies[i].trim();
                                                        if (cookie.subtring(0, name.length + 1) === (name + '=')) {
                                                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); 
                                                        break; 
                                                        }
                                                    }
                                                }
                                                return cookieValue
                                            }
                                            function initPayPalButton(){
                                                paypal.Buttons({
                                                    style: {
                                                        shape: 'rect',
                                                        color: 'gold',
                                                        layout: 'horizontal',
                                                        label: 'paypal',
                                                    },
                                                    createOrder: function (data, actions) {
                                                        return actions.order.create({
                                                            purchase_units: [{
                                                                "amount": {
                                                                    "currency_code": "USD",
                                                                    "value": '{{total|unlocalize}}'
                                                                }
                                                            }]
                                                        });
                                                    },
                                                    onApprove: function (data){
                                                        $.ajax({
                                                            url: url,
                                                            method:"POST",
                                                            data: {
                                                                orderID: data.orderID,
                                                                csrfmiddlewaretoken:CSRF_TOKEN,
                                                                action: 'paypal'
                                                              },
                                                            success:function(json){
                                                                if(json.success){
                                                                    Swal.fire({
                                                                        icon: 'success',
                                                                        title: '{% trans "Successful Payment!." %}',
                                                                        text: json.success,
                                                                        confirmButtonText: 'Continue',
                                                                      }).then(function(isConfirm) {
                                                                        if (isConfirm) {
                                                                            window.location.replace('/billings/new-pop/')
                                                                        }
                                                                      })
                                                                }
                                                                if(json.failed){
                                                                    Swal.fire({
                                                                        icon: 'error',
                                                                        title: '{% trans "Failed Payment!." %}',
                                                                        text: json.failed,
                                                                        confirmButtonText: 'Continue',
                                                                      }).then(function(isConfirm) {
                                                                        if (isConfirm) {
                                                                            window.location.reload()
                                                                        }
                                                                      })

                                                                }
                                                                
                                                            }
                                                          }) 
                                                    },
                                                    
                                                }).render('#paypal-button-container');
                                            }
                                            initPayPalButton();
                                        </script>
                                         
                            </div>
                            <div class="check-card min-lg importe wow fadeInRight d-none" data-wow-duration="1s" data-wow-delay=".5s">
                                    <h3 class="ff-18 text-center text-grey">Importe de Pago</h3>
                                        <ul class="list my-5">
                                            <li class="my-2 fs-5">
                                                <label class="awide fs-6 text-grey" for="breed">{% trans "Subtotal" %}: </label>
                                                <span class=" oxanium fw-bold color-secondary"> Bs. {{base}}</span>
                                            </li>
                                            <li class="my-2 fs-5">
                                                <label class="awide fs-6 text-grey" for="breed">{% trans "Payment Fee" %}: </label>
                                                <span class=" oxanium fw-bold color-secondary" id="breed"> ------- </span>
                                            </li>
                                            <li class="my-2 fs-5">
                                                <label class="awide fs-6 text-grey" for="breed">IVA: </label>
                                                <span class=" oxanium fw-bold color-secondary"> Bs. {{iva}}</span>
                                            </li>
                                            <li class="my-2 fs-5">
                                                {% if inv.parent_discounts.all %}
                                                    <label class="awide fs-6 text-grey" for="breed">{% trans "Discounts" %}: </label>
                                                    <span class=" oxanium fw-bold color-secondary" id="breed"> ${{descuento}}</span>
                                                {% else %}
                                                    <label class="awide fs-6 text-grey" for="breed">{% trans "Discounts" %}: </label>
                                                    <span class=" oxanium fw-bold color-secondary" id="breed"> ------ </span>
                                                {% endif %}
                                            </li>
                                            <li class="my-2 fs-5">
                                                <input type="hidden" value="{{base|unlocalize}}" id="base">
                                                <input type="hidden" value="{{total_ves|unlocalize}}" id="total_ves">
                                                <label class="awide fs-6 text-grey" for="breed">Total: </label>
                                                <span class=" oxanium fw-bold color-secondary"> Bs. {{total_ves}}</span>
                                            </li>
                                        </ul>
                                        <div class="d-grid gap-2 mb-4">
                                            <a class="btn btn-shappire btn-payments" type="button" onclick="paymentsBox()">Metodos de Pago</a>
                                        </div>
                                        <script> 
                                            const get_amount = {{total}};
                                        </script>
                            </div>
                        </div>
                        <script src="https://emmerutcdn.s3.amazonaws.com/static/js/stelabusiness/stripeCustom.js" defer></script>     
                        <script src="https://emmerutcdn.s3.amazonaws.com/static/js/stelabusiness/pago.js" defer></script>
                </div>
            </div>
        {% endif %}

        {% if call == "edit bill" %}
            <div class="container">
                <form class="w-100" action="" method="post" onsubmit="btnDisabled6()">
                    {% csrf_token %}
                    <div class="new-billing m-3 wow fadeInRight" data-wow-duration="1s" data-wow-delay="0.5s">
                        <div class="row justify-content-center align-items-center my-3">
                            <div class="col-lg-7">
                                <h2 class="fs-3 oxanium my-4 text-center fw-bold">{% trans "Edit Billing" %}</h2>
                            </div>
                            <div class="col-lg-2">
                                <a href="{% host_url 'billing' host 'stela' %}" class="btn btn-shappire btn-block" type="button" onclick="backHome()">{% trans "Back" %}</a>
                            </div>
                        </div>
                        <div class="row justify-content-center">
                            <div class="col-lg-10">
                                <div class="rounded black-box bg-stela-sidebar label-light">
                                    <div class="row justify-content-between data-render">
                                        <div class="form-group col-md-6 col-lg-4 my-2">
                                            <label for="client">{% trans "Client ID" %}</label>
                                            <div class="d-flex">
                                                <input class="form-control" value="{{recipt.customer.userid}}" placeholder='{% trans "Search ID" %}' type="search" name="userid" id="custid"><button class="btn btn-shappire search-btn center-btn" type="button" onclick="searchCustBill()"><i class="fa-solid fa-magnifying-glass"></i></button>
                                            </div>
                                            <p class="text-small text-danger fw-bold ml-4" id="response"></p>
                                        </div>
                                        <div class="form-group col-md-6 col-lg-4 my-2">
                                            <label for="email">{% trans "Client" %}</label>
                                            <input class="form-control" value="{{recipt.customer.full_name}}" type="text" name="full_name">
                                        </div>
                                        <div class="form-group col-md-6 col-lg-4 my-2">
                                            <label for="email">Email</label>
                                            <input class="form-control" value="{{recipt.customer.email}}" type="email" name="email">
                                        </div>
                                        <div class="form-group col-md-6 col-lg-3 my-2">
                                            <label for="phone">{% trans "Phone" %}</label>
                                            <input class="form-control" value="{{recipt.customer.phone}}" type="text" name="phone">
                                        </div>
                                        <div class="form-group col-md-6 col-lg-2 my-2">
                                            {{form.option | as_crispy_field}}
                                        </div>
                                        <div class="form-group col-md-6 col-lg-7 my-2">
                                            <label for="address">{% trans "Address Line" %}</label>
                                            <input class="form-control" value="{{recipt.customer.address}}" type="text" name="address" id="">
                                        </div>
                                        </div>
                                        <div class="form-group col-lg-12 my-2">
                                            <div class="row justify-content-center">
                                        <div class="form-group col-lg-10 my-2">
                                            {{form.media}}
                                            {{form.report | as_crispy_field}}
                                        </div>
                                    <div class="row justify-content-center">
                                        <div class="col-lg-10">
                                            <h3 class="ff-21 oxanium fw-bold mt-4 text-center text-light">{% trans "Recipt Charges" %}</h3>
                                            <div id="formset">
                                                {{ formset.management_form }}
                                                    {% for form in formset %}
                                                    <div id="form-0" class="formset input-flex justify-content-between pt-2">
                                                        {{form}}
                                                    </div>
                                                    {% endfor %}
                                                <div id="empty-form" class="d-none">
                                                    {{formset.empty_form}}
                                                </div>
                                            </div>
                                            <div class="d-flex justify-content-between my-3 text-light">
                                                <button class="btn-clear text-light" id="add-form" type="button"><i class="fa-solid fa-plus"></i> {% trans "Add" %}</button>
                                                <button class="btn-clear text-light" id="erase-form" type="button"><i class="fa-solid fa-minus"></i> {% trans "Remove" %}</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row justify-content-center">
                                        <div class="col-lg-10">
                                            <h3 class="ff-21 oxanium fw-bold mt-4 text-center text-light">{% trans "Recipt Discounts" %}</h3>
                                            <div id="formset2">
                                                {{ formset2.management_form }}
                                                    {% for form in formset2 %}
                                                    <div id="form-0" class="formset2 input-flex justify-content-between pt-2">
                                                        {{form}}
                                                    </div>
                                                    {% endfor %}
                                                <div id="empty-form2" class="d-none">
                                                    {{formset2.empty_form}}
                                                </div>
                                            </div>
                                            <div class="d-flex justify-content-between my-3 text-light">
                                                <button class="btn-clear text-light" id="add-formset2" type="button"><i class="fa-solid fa-plus"></i> {% trans "Add" %}</button>
                                                <button class="btn-clear text-light" id="erase-formset2" type="button"><i class="fa-solid fa-minus"></i> {% trans "Remove" %}</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="d-flex justify-content-end mt-4 mr-3">
                                    <button type="submit" class="btn btn-shappire form-btn6 center-btn d-flex">{% trans "Get Preview" %} <i class="fa-solid fa-paper-plane mx-2"></i></button>
                                </div> 
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        {% endif %}

        {% if call == "errorUpdatePop" %}
            <div class="container">
                <form action="" method="post">
                    {% csrf_token %}
                    <div class="load-data m-3 wow fadeInRight" data-wow-duration="1s" data-wow-delay="0.5s">
                        <div class="row justify-content-center align-items-center my-3">
                            <div class="col-lg-7">
                                <h2 class="fs-3 oxanium my-4 text-center fw-bold">{% trans "Edit Charges" %}</h2>
                                <p class="fw-bold text-danger">{% trans "System Error" %}: {{error}}</p>
                            </div>
                        </div>
                        <div class="row justify-content-between">
                            <div class="col-lg-7">
                                <div class="rounded bg-stela-sidebar label-light p-2">            
                                    <div class="row justify-content-center">
                                        <div class="col-lg-10">
                                            <h3 class="ff-21 oxanium fw-bold mt-4 text-center text-light">{% trans "Recipt Charges" %}</h3>
                                            <div id="formset">
                                                {{ formset.management_form }}
                                                    {% for form in formset %}
                                                    <div id="form-0" class="formset input-flex justify-content-between pt-2">
                                                        {{form}}
                                                    </div>
                                                    {% endfor %}
                                                <div id="empty-form" class="d-none">
                                                    {{formset.empty_form}}
                                                </div>
                                            </div>
                                            <div class="d-flex justify-content-between my-3 text-light">
                                                <button class="btn-clear text-light" id="add-form" type="button"><i class="fa-solid fa-plus"></i> {% trans "Add" %}</button>
                                                <button class="btn-clear text-light" id="erase-form" type="button"><i class="fa-solid fa-minus"></i> {% trans "Remove" %}</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row justify-content-center">
                                        <div class="col-lg-10">
                                            <h3 class="ff-21 oxanium fw-bold mt-4 text-center text-light">{% trans "Recipt Discounts" %}</h3>
                                            <div id="formset2">
                                                {{ formset2.management_form }}
                                                    {% for form in formset2 %}
                                                    <div id="form-0" class="formset2 input-flex justify-content-between pt-2">
                                                        {{form}}
                                                    </div>
                                                    {% endfor %}
                                                <div id="empty-form2" class="d-none">
                                                    {{formset2.empty_form}}
                                                </div>
                                            </div>
                                            <div class="d-flex justify-content-between my-3 text-light">
                                                <button class="btn-clear text-light" id="add-formset2" type="button"><i class="fa-solid fa-plus"></i> {% trans "Add" %}</button>
                                                <button class="btn-clear text-light" id="erase-formset2" type="button"><i class="fa-solid fa-minus"></i> {% trans "Remove" %}</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="d-flex justify-content-end mt-4 mr-3">
                                    <button type="submit" class="btn btn-shappire">{% trans "Checkout" %} <i class="fa-solid fa-credit-card"></i></button>
                                </div> 
                            </div>
                            <div class="col-lg-5">
                                <div class="rounded bg-stela-sidebar label-light p-2">
                                    <p class="text-small text-danger fw-bold ml-4" id="response"></p>
                                    <h3 class="ff-21 oxanium fw-bold mt-4 text-center text-light">{% trans "Customer Data" %}</h3>
                                    <div class="data-render">
                                        <div class="form-group mx-4 my-2">
                                            <label for="client">{% trans "Full Name" %}</label>
                                            <input class="form-control" value="{{recipt.costumer.full_name}}" type="text" name="client" id="client" disabled>
                                        </div>
                                        <div class="form-group mx-4 my-2">
                                            <label for="client">{% trans "ID or EIN" %}</label>
                                            <input class="form-control" value="{{recipt.costumer.userid}}" type="text" name="userid" id="userid" disabled>
                                        </div>
                                        <div class="form-group mx-4 my-2">
                                            <label for="client">{% trans "Phone" %}</label>
                                            <input class="form-control" value="{{recipt.costumer.phone}}" type="text" name="phone" id="phone" disabled>
                                        </div>
                                        <div class="form-group mx-4 mt-2 mb-4">
                                            <label for="client">{% trans "Address" %}</label>
                                            <input class="form-control" value="{{recipt.costumer.address}}" type="text" name="address" id="address" disabled>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>         
            </div>
        {% endif %}

        {% if call == "errorUpdateBill" %}
            <div class="container">
                <form class="w-100" action="" method="post">
                    {% csrf_token %}
                    <div class="new-billing m-3 wow fadeInRight" data-wow-duration="1s" data-wow-delay="0.5s">
                        <div class="row justify-content-center align-items-center my-3">
                            <div class="col-lg-7">
                                <h2 class="fs-3 oxanium my-4 text-center fw-bold">{% trans "Edit Billing" %}</h2>
                                <p class="fw-bold text-danger">{% trans "System Error" %}: {{error}}</p>
                            </div>
                            <div class="col-lg-2">
                                <a href="{% host_url 'billing' host 'stela' %}" class="btn btn-shappire btn-block" type="button" onclick="backHome()">{% trans "Back" %}</a>
                            </div>
                        </div>
                        <div class="row justify-content-center">
                            <div class="col-lg-10">
                                <div class="rounded black-box bg-stela-sidebar label-light">
                                    <div class="row justify-content-between data-render">
                                        <div class="form-group col-md-6 col-lg-4 my-2">
                                            <label for="client">{% trans "Client ID" %}</label>
                                            <div class="d-flex">
                                                <input class="form-control" value="{{recipt.customer.userid}}" placeholder='{% trans "Search ID" %}' type="search" name="userid" id="custid"><button class="btn btn-shappire search-btn center-btn" type="button" onclick="searchCustBill()"><i class="fa-solid fa-magnifying-glass"></i></button>
                                            </div>
                                            <p class="text-small text-danger fw-bold ml-4" id="response"></p>
                                        </div>
                                        <div class="form-group col-md-6 col-lg-4 my-2">
                                            <label for="email">{% trans "Client" %}</label>
                                            <input class="form-control" value="{{recipt.customer.full_name}}" type="text" name="full_name">
                                        </div>
                                        <div class="form-group col-md-6 col-lg-4 my-2">
                                            <label for="email">Email</label>
                                            <input class="form-control" value="{{recipt.customer.email}}" type="email" name="email">
                                        </div>
                                        <div class="form-group col-md-6 col-lg-3 my-2">
                                            <label for="phone">{% trans "Phone" %}</label>
                                            <input class="form-control" value="{{recipt.customer.phone}}" type="text" name="phone">
                                        </div>
                                        <div class="form-group col-md-6 col-lg-2 my-2">
                                            {{form.option | as_crispy_field}}
                                        </div>
                                        <div class="form-group col-md-6 col-lg-7 my-2">
                                            <label for="address">{% trans "Address Line" %}</label>
                                            <input class="form-control" value="{{recipt.customer.address}}" type="text" name="address" id="">
                                        </div>
                                        </div>
                                        <div class="form-group col-lg-12 my-2">
                                            <div class="row justify-content-center">
                                        <div class="form-group col-lg-10 my-2">
                                            {{form.media}}
                                            {{form.report | as_crispy_field}}
                                        </div>
                                    <div class="row justify-content-center">
                                        <div class="col-lg-10">
                                            <h3 class="ff-21 oxanium fw-bold mt-4 text-center text-light">{% trans "Recipt Charges" %}</h3>
                                            <div id="formset">
                                                {{ formset.management_form }}
                                                    {% for form in formset %}
                                                    <div id="form-0" class="formset input-flex justify-content-between pt-2">
                                                        {{form}}
                                                    </div>
                                                    {% endfor %}
                                                <div id="empty-form" class="d-none">
                                                    {{formset.empty_form}}
                                                </div>
                                            </div>
                                            <div class="d-flex justify-content-between my-3 text-light">
                                                <button class="btn-clear text-light" id="add-form" type="button"><i class="fa-solid fa-plus"></i> {% trans "Add" %}</button>
                                                <button class="btn-clear text-light" id="erase-form" type="button"><i class="fa-solid fa-minus"></i> {% trans "Remove" %}</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row justify-content-center">
                                        <div class="col-lg-10">
                                            <h3 class="ff-21 oxanium fw-bold mt-4 text-center text-light">{% trans "Recipt Discounts" %}</h3>
                                            <div id="formset2">
                                                {{ formset2.management_form }}
                                                    {% for form in formset2 %}
                                                    <div id="form-0" class="formset2 input-flex justify-content-between pt-2">
                                                        {{form}}
                                                    </div>
                                                    {% endfor %}
                                                <div id="empty-form2" class="d-none">
                                                    {{formset2.empty_form}}
                                                </div>
                                            </div>
                                            <div class="d-flex justify-content-between my-3 text-light">
                                                <button class="btn-clear text-light" id="add-formset2" type="button"><i class="fa-solid fa-plus"></i> {% trans "Add" %}</button>
                                                <button class="btn-clear text-light" id="erase-formset2" type="button"><i class="fa-solid fa-minus"></i> {% trans "Remove" %}</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="d-flex justify-content-end mt-4 mr-3">
                                    <button type="submit" class="btn btn-shappire">{% trans "Get Preview" %} <i class="fa-solid fa-paper-plane"></i></button>
                                </div> 
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        {% endif %}

        {% if call == "payload" %}
            <div class="min-vh-80">
                <div class="center-box row justify-content-center">
                    <div class="col-lg-6">
                        <div class="row">
                            <h2 class="awide text-dark text-capitalize text-center">{% trans "payment in process" %}</h2>
                        </div>
                        <div class="row">
                            <div class="atom-loader"></div>
                        </div>
                        <div class="row">
                            <p class="oxanium text-dark fw-bold text-center">{% trans "Stela Payments" %}</p>
                            <small class="text-center py-2"><i class='bx bx-error'></i> {% trans "do not interrupt this process" %}</small>
                        </div>
                        <div class="row">
                            <p class="oxanium text-dark text-center"><i class='bx bxs-lock-alt'></i> {% trans "safe redirect" %}</p>
                        </div>
                    </div>  
                </div>
            </div>
            <script>
                const stripeUrl='/billings/checkout/{{inv.id}}';
            </script>
            <script src="https://emmerutcdn.s3.amazonaws.com/static/js/stelabusiness/payload.js"></script> 
        {% endif %}

        {% if call == "purchase" %}
            <script>
                setTimeout(window.location.replace('/billings/new-billing'), 10000);
            </script>
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-10">
                        <div class="order-placed text-center">
                            <div class="row justify-content-center">
                                <div class="col-lg-3">
                                    <img class="w-100" src="https://emmerutcdn.s3.amazonaws.com/static/img/stela/success.png" alt="">
                                </div>
                            </div>
                            <h1 class="fs-4 mb-3">{% trans "Payment Complete Successfully" %}</h1>
                            <p>{% trans "Congratulations, you have completed your purchase" %} 
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}

        {% if call == "getRecipt" %}
            <div class="container">
                <div class="row justify-content-evenly mt-3">
                    {% if recipt.recipt.option == "Budget" %}
                        <div class="col-lg-6">
                            <h1 class="oxanium fw-bold text-center fs-4 py-3">{% trans "Budget Recipt Details" %}</h1> 
                        </div>
                        <div class="col-sm-6 col-md-6 col-lg-2">
                            <button class="btn btn-success" onclick="ReciptPayeed()">{% trans "Approved" %}</button>
                        </div>
                        <div class="col-sm-6 col-md-6 col-lg-2">
                            <input type="hidden" id="get_recipt" value="{{recipt.recipt.id}}">
                            <button class="btn btn-danger" onclick="cancelRecipt()">{% trans "Rejected" %}</button>
                        </div>
                        <div class="col-sm-6 col-md-6 col-lg-2">
                            <button class="btn btn-shappire" onclick="printDiv()">{% trans "Get Budget" %}</button>
                        </div>
                    {% else %}
                        <div class="col-lg-6">
                            <h1 class="oxanium fw-bold text-center fs-4 py-3">{% trans "Billing Recipt Details" %}</h1> 
                        </div>
                        <div class="col-sm-6 col-md-6 col-lg-2">
                            <button class="btn btn-success" onclick="ReciptPayeed()">{% trans "Recipt Payeed" %}</button>
                        </div>
                        <div class="col-sm-6 col-md-6 col-lg-2">
                            <input type="hidden" id="get_recipt" value="{{recipt.recipt.id}}">
                            <button class="btn btn-danger" onclick="cancelRecipt()">{% trans "Cancel Recipt" %}</button>
                        </div>
                        <div class="col-sm-6 col-md-6 col-lg-2">
                            <button class="btn btn-shappire" onclick="printDiv()">{% trans "Get Invoice" %}</button>
                        </div>
                    {% endif %}
                    
                    <div class="col-sm-6 col-md-6 col-lg-2">
                        <input type="hidden" value="{{recipt.id}}" id="reciptid">
                        <input type="hidden" value="{{recipt.email}}" id="email">
                        <button class="btn btn-shappire" onclick="sendEmail()">{% trans "Send Email" %}</button>
                    </div>
                    <script>
                        function printDiv() {
                            var printContents = document.getElementById('recipt').innerHTML;
                            var originalContents = document.body.innerHTML;
                    
                            document.body.innerHTML = printContents;
                    
                            window.print();
                    
                            document.body.innerHTML = originalContents;
                    }
                        function sendEmail() {
                            Swal.fire({
                                title: '{% trans "Confirm" %} {{user.username}}',
                                text: '{% trans "You want to send the receipt?" %}',
                                icon: 'warning',
                                showCancelButton: true,
                                confirmButtonColor: '#050225',
                                cancelButtonColor: '#d33',
                                confirmButtonText: '{% trans "Yes, send it!" %}',
                                cancelButtonText: '{% trans "Cancel" %}'
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    $.ajax({
                                        type: 'POST',
                                        url: "/billings/get-billing/{{recipt.recipt.id}}",
                                        data: {
                                            csrfmiddlewaretoken: CSRF_TOKEN,
                                            action: 'emailSend'
                                        },
                                        success:function(json){
                                            Swal.fire({
                                                icon: 'success',
                                                title: '{% trans "Recipt Send." %}',
                                                text:'{% trans "Your client will receive shortly." %}',
                                                confirmButtonText: '{% trans "Continue" %}',
                                                confirmButtonColor: '#050225',
                                            })
                                        }
                                    }) 
                                }
                            })
                        }
                    </script>
                </div>
                <div id="recipt" class="container email-box min-vh-100 scroll-auto">
                    <div class="row justify-content-center">
                        <div class="col-12">
                            <div class="row justify-content-center mt-3">
                                <div class="col-2 p-0">
                                    {% if site_data.company_public %}
                                        <img class="w-100 banner" src="{{site_data.company_public.logo.url}}" alt="aqui esta la imagen">
                                    {% else %}                  
                                        <img class="w-100" src="https://539e79f747.imgdist.com/public/users/Integrators/BeeProAgency/1033577_1018641/mobile-stela.png" alt=""> 
                                    {% endif %}
                                </div>
                                <div class="col-9">
                                    {% if recipt.recipt.option == "budget_design" %}
                                        <h1 class="text-danger text-right">{% trans "BUDGET" %}</h1>
                                    {% elif recipt.recipt.option == "budget_marketing" %}
                                        <h1 class="text-danger text-right">{% trans "BUDGET" %}</h1>
                                    {% elif recipt.recipt.option == "budget_development" %}
                                        <h1 class="text-danger text-right">{% trans "BUDGET" %}</h1>
                                    {% else %}
                                        <h1 class="text-danger text-right">{% trans "INVOICE" %}</h1>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="row justify-content-center">
                                <h1 class="text-capitalize oxanium fw-bold text-center fs-3 py-3">{{recipt.recipt.option}}</h1>
                            </div>
                            <div class="row justify-content-between">
                                <div class="col-md-6 col-lg-7">
                                    <ul class="list-none p-2">
                                        <li>{% trans "Created" %}:<b class="small"> {{recipt.recipt.created}}</b></li>
                                        <li>{% trans "Address" %}:<b class="fw-bold oxanium" > {{recipt.recipt.customer.address}}</b></li>
                                    </ul>
                                </div>
                                <div class="col-md-6 col-lg-5">
                                    <ul class="list-none p-2">
                                        <li>{% trans "Client" %}:<b class="fw-bold oxanium"> {{recipt.recipt.customer.full_name}}</b></li>
                                        <li>N°: <b>{{recipt.control_id}}</b></li>
                                    </ul>    
                                </div>
                            </div>
                            <hr>
                            <div class="row justify-content-center">
                                <h1 class="text-capitalize oxanium fw-bold text-center fs-5 py-3">{% trans "Cost items" %}</h1>
                            </div>
                            <div class="row">
                                <table id="example" class="compact table table-borderless table-hover">
                                    <thead>
                                        <tr class="text-center">
                                            <th style="width: 70%;"></th>
                                            <th style="width: 30%;"></th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                        {% if recipt.recipt.service_recipt.all %}
                                            {% for item in recipt.recipt.service_recipt.all %}
                                                {% if item.qty > 1 %}
                                                    <tr>
                                                        <td class="text-center">{{item.field}} x {{item.qty}} {% trans "units" %}</td>
                                                        <td class="text-center oxanium"> <b>${{item.amount}}</b></td>
                                                    </tr>
                                                {% else %}
                                                    <tr>
                                                        <td class="text-center">{{item.field}}</td>
                                                        <td class="text-center oxanium"> <b>${{item.amount}}</b></td>
                                                    </tr>
                                                {% endif %}
                                            {% endfor %} 
                                        {% elif recipt.recipt.product_recipt.all %}
                                            {% for item in recipt.recipt.product_recipt.all %}
                                                {% if item.qty > 1 %}
                                                    <tr>
                                                        <td class="text-center">{{item.field}} x {{item.qty}} {% trans "units" %}</td>
                                                        <td class="text-center oxanium"> <b>${{item.amount}}</b></td>
                                                    </tr>
                                                {% else %}
                                                    <tr>
                                                        <td class="text-center">{{item.field}}</td>
                                                        <td class="text-center oxanium"> <b>${{item.amount}}</b></td>
                                                    </tr>
                                                {% endif %}
                                            {% endfor %} 
                                        {% endif %}                               
                                    </tbody>
                                </table>
                            </div>
                            <hr>
                            {% if recipt.recipt.custom_discounts.all %}            
                                <div class="row justify-content-center">
                                    <h1 class="text-capitalize oxanium fw-bold text-center fs-5 py-3">{% trans "Discounts" %}</h1>
                                </div>
                                <div class="row">
                                    <table id="example" class="compact table table-borderless table-hover">
                                        <thead>
                                            <tr class="text-center">
                                                <th style="width: 70%;"></th>
                                                <th style="width: 30%;"></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for item in recipt.recipt.custom_discounts.all %}
                                            <tr>
                                                <td class="text-center">{{item.field}}</td>
                                                <td class="text-center oxanium"> <b>-${{item.amount}}</b></td>
                                            </tr>
                                            {% endfor %} 
                                        </tbody>
                                    </table>
                                </div>
                                <hr>
                            {% else %}
                                {% if recipt.recipt.discounts.all  %}
                                    <div class="row justify-content-center">
                                        <h1 class="text-capitalize oxanium fw-bold text-center fs-5 py-3">{% trans "Discounts" %}</h1>
                                    </div>
                                    <div class="row">
                                        <table id="example" class="compact table table-borderless table-hover">
                                            <thead>
                                                <tr class="text-center">
                                                    <th style="width: 70%;"></th>
                                                    <th style="width: 30%;"></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {% for item in recipt.recipt.discounts.all %}
                                                <tr>
                                                    <td class="text-center">{{item.field}}</td>
                                                    <td class="text-center oxanium"> <b>-${{item.amount}}</b></td>
                                                </tr>
                                                {% endfor %} 
                                            </tbody>
                                        </table>
                                    </div>
                                    <hr>
                                {% endif %}
                            {% endif %}
                            <div class="row">
                                <table id="example" class="compact table table-borderless table-hover">
                                    <thead>
                                        <tr class="text-center">
                                            <th style="width: 70%;"></th>
                                            <th style="width: 30%;"></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                            <tr>                 
                                                <td class="text-right">{% trans "Subtotal" %}:</td>
                                                <td class="text-center oxanium"> <b>${{recipt.recipt.amount}}</b></td>
                                            </tr>
                                            {% if recipt.recipt.discounts.all %}
                                                <tr>
                                                    <td class="text-right">{% trans "Discounts" %}:</td>
                                                    <td class="text-center oxanium"> <b>-${{recipt.recipt.discount}}</b></td>
                                                </tr>
                                            {% else %}
                                                <tr>
                                                    <td class="text-right">{% trans "Discounts" %}:</td>
                                                    <td class="text-center oxanium"> <b>-------</b></td>
                                                </tr>
                                            {% endif %}
                                            {% if recipt.recipt.option == 'Budget' %}
                                            {% else %}
                                                <tr>
                                                    <td class="text-right">{% trans "Tax" %}:</td>
                                                    <td class="text-center oxanium"> <b>${{recipt.recipt.tax}}</b></td>
                                                </tr>
                                            {% endif %}
                                            <tr>
                                                <td class="text-right">{% trans "Total Amount" %}:</td>
                                                <td class="text-center oxanium"> <b>${{total}}</b></td>
                                            </tr>
                                    </tbody>
                                </table>
                            </div>
                            {% if recipt.recipt.report %}
                                <div class="row report">
                                    <h1 class="text-capitalize oxanium fw-bold fs-5 py-3 mx-2">{% trans "Service Report" %}:</h1>
                                    {{recipt.recipt.report|safe}}
                                    
                                </div>    
                                <div class="text-terms">
                                    {% if recipt.recipt.option == 'Monthly charge' %}
                                       {% for get in site_data.admin.site_docs.all %}
                                       
                                            {% if get.section == "monthly_terms" %}
                                                
                                                {% if get.lang == "en" %}
                                                    <h1 class="oxanium fw-bold text-center py-3 fs-5">{{get.title}} ({{get.section}})</h1>
                                                    {% for row in get.content.all %}
                                                        <h3 class="fs-4 fw-bold py-4" id="doc-{{row.id}}">{{row.clause}}</h3>
                                                        <script>
                                                            function scrollToElement{{row.id}}() {
                                                                var elemento = document.getElementById("doc-{{row.id}}");
                                                                var cajaHija = document.querySelector(".doc-cage");
                                                                cajaHija.scrollTop = elemento.offsetTop;
                                                                }
                                                        </script>
                                                        {{row.clause_content|safe}}
                                                    {% endfor %}
                                                {% elif get.lang == "es-ve"  %}
                                                    <h1 class="oxanium fw-bold text-center py-3 fs-5">{{get.title}} ({{get.section}})</h1>
                                                    {% for row in get.content.all %}
                                                        <h3 class="fs-4 fw-bold py-4" id="doc-{{row.id}}">{{row.clause}}</h3>
                                                        <script>
                                                            function scrollToElement{{row.id}}() {
                                                                var elemento = document.getElementById("doc-{{row.id}}");
                                                                var cajaHija = document.querySelector(".doc-cage");
                                                                cajaHija.scrollTop = elemento.offsetTop;
                                                                }
                                                        </script>
                                                        {{row.clause_content|safe}}
                                                    {% endfor %}
                                                {% endif %}
                                            {% endif %}
                                       {% endfor %}
                                    {% elif recipt.recipt.option == 'Billing receipt' %}
                                        {% for get in site_data.admin.site_docs.all %}
                                            {% if get.section == "billing_terms" %}
                                                {% if get.lang == "en" %}
                                                    <h1 class="oxanium fw-bold text-center py-3 fs-5">{{get.title}} ({{get.section}})</h1>
                                                    {% for row in get.content.all %}
                                                        <h3 class="fs-4 fw-bold py-4" id="doc-{{row.id}}">{{row.clause}}</h3>
                                                        <script>
                                                            function scrollToElement{{row.id}}() {
                                                                var elemento = document.getElementById("doc-{{row.id}}");
                                                                var cajaHija = document.querySelector(".doc-cage");
                                                                cajaHija.scrollTop = elemento.offsetTop;
                                                                }
                                                        </script>
                                                        {{row.clause_content|safe}}
                                                    {% endfor %}
                                                {% elif get.lang == "es-ve"  %}
                                                <h1 class="oxanium fw-bold text-center py-3 fs-5">{{get.title}} ({{get.section}})</h1>
                                                    {% for row in get.content.all %}
                                                        <h3 class="fs-4 fw-bold py-4" id="doc-{{row.id}}">{{row.clause}}</h3>
                                                        <script>
                                                            function scrollToElement{{row.id}}() {
                                                                var elemento = document.getElementById("doc-{{row.id}}");
                                                                var cajaHija = document.querySelector(".doc-cage");
                                                                cajaHija.scrollTop = elemento.offsetTop;
                                                                }
                                                        </script>
                                                        {{row.clause_content|safe}}
                                                    {% endfor %}
                                                {% endif %}
                                            {% endif %}
                                        {% endfor %}
                                    {% elif recipt.recipt.option == 'budget_design' %}
                                        {% for get in site_data.admin.site_docs.all %}
                                            {% if get.section == "budget_design_terms" %}
                                                {% if get.lang == "en" %}
                                                    <h1 class="oxanium fw-bold text-center py-3 fs-5">{{get.title}} ({{get.section}})</h1>
                                                    {% for row in get.content.all %}
                                                        <h3 class="fs-4 fw-bold py-4" id="doc-{{row.id}}">{{row.clause}}</h3>
                                                        <script>
                                                            function scrollToElement{{row.id}}() {
                                                                var elemento = document.getElementById("doc-{{row.id}}");
                                                                var cajaHija = document.querySelector(".doc-cage");
                                                                cajaHija.scrollTop = elemento.offsetTop;
                                                                }
                                                        </script>
                                                        {{row.clause_content|safe}}
                                                    {% endfor %}
                                                {% elif get.lang == "es-ve"  %}
                                                    <h1 class="oxanium fw-bold text-center py-3 fs-5">{{get.title}} ({{get.section}})</h1>
                                                    {% for row in get.content.all %}
                                                        <h3 class="fs-4 fw-bold py-4" id="doc-{{row.id}}">{{row.clause}}</h3>
                                                        <script>
                                                            function scrollToElement{{row.id}}() {
                                                                var elemento = document.getElementById("doc-{{row.id}}");
                                                                var cajaHija = document.querySelector(".doc-cage");
                                                                cajaHija.scrollTop = elemento.offsetTop;
                                                                }
                                                        </script>
                                                        {{row.clause_content|safe}}
                                                    {% endfor %}
                                                {% endif %}
                                            {% endif %}
                                        {% endfor %}
                                    {% elif recipt.recipt.option == 'budget_marketing' %}
                                        {% for get in site_data.admin.site_docs.all %}
                                            {% if get.section == "budget_marketing_terms" %}
                                                {% if get.lang == "en" %}
                                                    <h1 class="oxanium fw-bold text-center py-3 fs-5">{{get.title}} ({{get.section}})</h1>
                                                    {% for row in get.content.all %}
                                                        <h3 class="fs-4 fw-bold py-4" id="doc-{{row.id}}">{{row.clause}}</h3>
                                                        <script>
                                                            function scrollToElement{{row.id}}() {
                                                                var elemento = document.getElementById("doc-{{row.id}}");
                                                                var cajaHija = document.querySelector(".doc-cage");
                                                                cajaHija.scrollTop = elemento.offsetTop;
                                                                }
                                                        </script>
                                                        {{row.clause_content|safe}}
                                                    {% endfor %}
                                                {% elif get.lang == "es-ve"  %}
                                                    <h1 class="oxanium fw-bold text-center py-3 fs-5">{{get.title}} ({{get.section}})</h1>
                                                    {% for row in get.content.all %}
                                                        <h3 class="fs-4 fw-bold py-4" id="doc-{{row.id}}">{{row.clause}}</h3>
                                                        <script>
                                                            function scrollToElement{{row.id}}() {
                                                                var elemento = document.getElementById("doc-{{row.id}}");
                                                                var cajaHija = document.querySelector(".doc-cage");
                                                                cajaHija.scrollTop = elemento.offsetTop;
                                                                }
                                                        </script>
                                                        {{row.clause_content|safe}}
                                                    {% endfor %}
                                                {% endif %}
                                            {% endif %}
                                        {% endfor %}
                                    {% elif recipt.recipt.option == 'budget_development' %}
                                        {% for get in site_data.admin.site_docs.all %}
                                            {% if get.section == "budget_development_terms" %}
                                                {% if get.lang == "en" %}
                                                    <h1 class="oxanium fw-bold text-center py-3 fs-5">{{get.title}} ({{get.section}})</h1>
                                                    {% for row in get.content.all %}
                                                        <h3 class="fs-4 fw-bold py-4" id="doc-{{row.id}}">{{row.clause}}</h3>
                                                        <script>
                                                            function scrollToElement{{row.id}}() {
                                                                var elemento = document.getElementById("doc-{{row.id}}");
                                                                var cajaHija = document.querySelector(".doc-cage");
                                                                cajaHija.scrollTop = elemento.offsetTop;
                                                                }
                                                        </script>
                                                        {{row.clause_content|safe}}
                                                    {% endfor %}
                                                {% elif get.lang == "es-ve"  %}
                                                    <h1 class="oxanium fw-bold text-center py-3 fs-5">{{get.title}} ({{get.section}})</h1>
                                                    {% for row in get.content.all %}
                                                        <h3 class="fs-4 fw-bold py-4" id="doc-{{row.id}}">{{row.clause}}</h3>
                                                        <script>
                                                            function scrollToElement{{row.id}}() {
                                                                var elemento = document.getElementById("doc-{{row.id}}");
                                                                var cajaHija = document.querySelector(".doc-cage");
                                                                cajaHija.scrollTop = elemento.offsetTop;
                                                                }
                                                        </script>
                                                        {{row.clause_content|safe}}
                                                    {% endfor %}
                                                {% endif %}
                                            {% endif %}
                                        {% endfor %}
                                    {% endif %}                                    
                                </div>
                            {% else %}
                                <div class="text-terms">
                                    {% if recipt.recipt.option == 'Monthly charge' %}
                                    {% for get in site_data.admin.site_docs.all %}                                   
                                            {% if get.section == "monthly_terms" %}                                           
                                                {% if get.lang == "en" %}
                                                    <h1 class="oxanium fw-bold text-center py-3 fs-5">{{get.title}} ({{get.section}})</h1>
                                                    {% for row in get.content.all %}
                                                        <h3 class="fs-4 fw-bold py-4" id="doc-{{row.id}}">{{row.clause}}</h3>
                                                        <script>
                                                            function scrollToElement{{row.id}}() {
                                                                var elemento = document.getElementById("doc-{{row.id}}");
                                                                var cajaHija = document.querySelector(".doc-cage");
                                                                cajaHija.scrollTop = elemento.offsetTop;
                                                                }
                                                        </script>
                                                        {{row.clause_content|safe}}
                                                    {% endfor %}
                                                {% elif get.lang == "es-ve"  %}
                                                    <h1 class="oxanium fw-bold text-center py-3 fs-5">{{get.title}} ({{get.section}})</h1>
                                                    {% for row in get.content.all %}
                                                        <h3 class="fs-4 fw-bold py-4" id="doc-{{row.id}}">{{row.clause}}</h3>
                                                        <script>
                                                            function scrollToElement{{row.id}}() {
                                                                var elemento = document.getElementById("doc-{{row.id}}");
                                                                var cajaHija = document.querySelector(".doc-cage");
                                                                cajaHija.scrollTop = elemento.offsetTop;
                                                                }
                                                        </script>
                                                        {{row.clause_content|safe}}
                                                    {% endfor %}
                                                {% endif %}
                                            {% endif %}
                                    {% endfor %}
                                    {% elif recipt.recipt.option == 'Billing receipt' %}
                                        {% for get in site_data.admin.site_docs.all %}
                                            {% if get.section == "billing_terms" %}
                                                {% if get.lang == "en" %}
                                                    <h1 class="oxanium fw-bold text-center py-3 fs-5">{{get.title}} ({{get.section}})</h1>
                                                    {% for row in get.content.all %}
                                                        <h3 class="fs-4 fw-bold py-4" id="doc-{{row.id}}">{{row.clause}}</h3>
                                                        <script>
                                                            function scrollToElement{{row.id}}() {
                                                                var elemento = document.getElementById("doc-{{row.id}}");
                                                                var cajaHija = document.querySelector(".doc-cage");
                                                                cajaHija.scrollTop = elemento.offsetTop;
                                                                }
                                                        </script>
                                                        {{row.clause_content|safe}}
                                                    {% endfor %}
                                                {% elif get.lang == "es-ve"  %}
                                                <h1 class="oxanium fw-bold text-center py-3 fs-5">{{get.title}} ({{get.section}})</h1>
                                                    {% for row in get.content.all %}
                                                        <h3 class="fs-4 fw-bold py-4" id="doc-{{row.id}}">{{row.clause}}</h3>
                                                        <script>
                                                            function scrollToElement{{row.id}}() {
                                                                var elemento = document.getElementById("doc-{{row.id}}");
                                                                var cajaHija = document.querySelector(".doc-cage");
                                                                cajaHija.scrollTop = elemento.offsetTop;
                                                                }
                                                        </script>
                                                        {{row.clause_content|safe}}
                                                    {% endfor %}
                                                {% endif %}
                                            {% endif %}
                                        {% endfor %}
                                    {% elif recipt.recipt.option == 'budget_design' %}
                                        {% for get in site_data.admin.site_docs.all %}
                                            {% if get.section == "budget_design_terms" %}
                                                {% if get.lang == "en" %}
                                                    <h1 class="oxanium fw-bold text-center py-3 fs-5">{{get.title}} ({{get.section}})</h1>
                                                    {% for row in get.content.all %}
                                                        <h3 class="fs-4 fw-bold py-4" id="doc-{{row.id}}">{{row.clause}}</h3>
                                                        <script>
                                                            function scrollToElement{{row.id}}() {
                                                                var elemento = document.getElementById("doc-{{row.id}}");
                                                                var cajaHija = document.querySelector(".doc-cage");
                                                                cajaHija.scrollTop = elemento.offsetTop;
                                                                }
                                                        </script>
                                                        {{row.clause_content|safe}}
                                                    {% endfor %}
                                                {% elif get.lang == "es-ve"  %}
                                                    <h1 class="oxanium fw-bold text-center py-3 fs-5">{{get.title}} ({{get.section}})</h1>
                                                    {% for row in get.content.all %}
                                                        <h3 class="fs-4 fw-bold py-4" id="doc-{{row.id}}">{{row.clause}}</h3>
                                                        <script>
                                                            function scrollToElement{{row.id}}() {
                                                                var elemento = document.getElementById("doc-{{row.id}}");
                                                                var cajaHija = document.querySelector(".doc-cage");
                                                                cajaHija.scrollTop = elemento.offsetTop;
                                                                }
                                                        </script>
                                                        {{row.clause_content|safe}}
                                                    {% endfor %}
                                                {% endif %}
                                            {% endif %}
                                        {% endfor %}
                                    {% elif recipt.recipt.option == 'budget_marketing' %}
                                        {% for get in site_data.admin.site_docs.all %}
                                            {% if get.section == "budget_marketing_terms" %}
                                                {% if get.lang == "en" %}
                                                    <h1 class="oxanium fw-bold text-center py-3 fs-5">{{get.title}} ({{get.section}})</h1>
                                                    {% for row in get.content.all %}
                                                        <h3 class="fs-4 fw-bold py-4" id="doc-{{row.id}}">{{row.clause}}</h3>
                                                        <script>
                                                            function scrollToElement{{row.id}}() {
                                                                var elemento = document.getElementById("doc-{{row.id}}");
                                                                var cajaHija = document.querySelector(".doc-cage");
                                                                cajaHija.scrollTop = elemento.offsetTop;
                                                                }
                                                        </script>
                                                        {{row.clause_content|safe}}
                                                    {% endfor %}
                                                {% elif get.lang == "es-ve"  %}
                                                    <h1 class="oxanium fw-bold text-center py-3 fs-5">{{get.title}} ({{get.section}})</h1>
                                                    {% for row in get.content.all %}
                                                        <h3 class="fs-4 fw-bold py-4" id="doc-{{row.id}}">{{row.clause}}</h3>
                                                        <script>
                                                            function scrollToElement{{row.id}}() {
                                                                var elemento = document.getElementById("doc-{{row.id}}");
                                                                var cajaHija = document.querySelector(".doc-cage");
                                                                cajaHija.scrollTop = elemento.offsetTop;
                                                                }
                                                        </script>
                                                        {{row.clause_content|safe}}
                                                    {% endfor %}
                                                {% endif %}
                                            {% endif %}
                                        {% endfor %}
                                    {% elif recipt.recipt.option == 'budget_development' %}
                                        {% for get in site_data.admin.site_docs.all %}
                                            {% if get.section == "budget_development_terms" %}
                                                {% if get.lang == "en" %}
                                                    <h1 class="oxanium fw-bold text-center py-3 fs-5">{{get.title}} ({{get.section}})</h1>
                                                    {% for row in get.content.all %}
                                                        <h3 class="fs-4 fw-bold py-4" id="doc-{{row.id}}">{{row.clause}}</h3>
                                                        <script>
                                                            function scrollToElement{{row.id}}() {
                                                                var elemento = document.getElementById("doc-{{row.id}}");
                                                                var cajaHija = document.querySelector(".doc-cage");
                                                                cajaHija.scrollTop = elemento.offsetTop;
                                                                }
                                                        </script>
                                                        {{row.clause_content|safe}}
                                                    {% endfor %}
                                                {% elif get.lang == "es-ve"  %}
                                                    <h1 class="oxanium fw-bold text-center py-3 fs-5">{{get.title}} ({{get.section}})</h1>
                                                    {% for row in get.content.all %}
                                                        <h3 class="fs-4 fw-bold py-4" id="doc-{{row.id}}">{{row.clause}}</h3>
                                                        <script>
                                                            function scrollToElement{{row.id}}() {
                                                                var elemento = document.getElementById("doc-{{row.id}}");
                                                                var cajaHija = document.querySelector(".doc-cage");
                                                                cajaHija.scrollTop = elemento.offsetTop;
                                                                }
                                                        </script>
                                                        {{row.clause_content|safe}}
                                                    {% endfor %}
                                                {% endif %}
                                            {% endif %}
                                        {% endfor %}
                                    {% endif %}                                    
                                </div>
                            {% endif %}
                            <div class="row">
                                <div class="col-12 footer-content">
                                    <div class="row">
                                            <div class="col-lg-8 text-dark text-justify address-billing">
                                                {% if site_data.company_public %}
                                                    <h3 class="small text-dark oxanium m-0"><i class="fa-solid fa-location-dot mx-1"></i>{{site_data.company_public.address|safe}}</h3>
                                                    <h3 class="small text-dark oxanium">{{site_data.company_public.city_legal}}</h3>
                                                    <h3 class="small text-dark oxanium"><i class="fa-brands fa-whatsapp mx-1"></i>{{site_data.company_public.phone}}</h3> 
                                                {% else %}
                                                    <h3 class="small text-dark oxanium"><i class="fa-solid fa-location-dot mx-1"></i> Deere Park Cir, Apt 306, Bartlett IL United States</h3>
                                                    <h3 class="small text-dark oxanium"><i class="fa-brands fa-whatsapp mx-1"></i> +1 (619) 432-0711</h3>
                                                {% endif %}
                                            </div>
                                        <div class="col-lg-4">
                                            <div class="row">
                                                <ul class="d-flex list-none fs-3 p-0 justify-content-evenly m-0">
                                                    {% for get in site_data.company_public.socialmedia.alll %}
                                                        {% if get.social == "Instagram" %}
                                                            <li>
                                                                <a href="{{get.url}}" target=_blank><i class="fa-brands fa-instagram mx-1"></i></a>    
                                                            </li>
                                                        {% elif get.social == "Tiktok" %}
                                                            <li>
                                                                <a href="{{get.url}}" target=_blank><i class="fa-brands fa-tiktok mx-1"></i></a>    
                                                            </li>
                                                        {% elif get.social == "Facebook" %}
                                                            <li>
                                                                <a href="{{get.url}}}" target=_blank><i class="fa-brands fa-facebook mx-1"></i></a>    
                                                            </li>
                                                        {% elif get.social == "Linkedin" %}
                                                            <li>
                                                                <a href="{{get.url}}" target=_blank><i class="fa-brands fa-linkedin mx-1"></i></a>    
                                                            </li>
                                                        {% elif get.social == "Youtube" %}
                                                            <li>
                                                                <a href="{{get.url}}" target=_blank><i class="fa-brands fa-youtube mx-1"></i></a>    
                                                            </li>
                                                        {% elif get.social == "X" %}
                                                            <li>
                                                                <a href="{{get.url}}" target=_blank><i class="fa-brands fa-twitter mx-1"></i></a>    
                                                            </li>
                                                        {% endif %}       
                                                    {% empty %}
                                                        <li>
                                                            <a href="https://www.instagram.com/usemmerut/" target=_blank><i class="fa-brands fa-instagram mx-1"></i></a>    
                                                        </li>
                                                        <li>
                                                            <a href="https://www.linkedin.com/company/usemmerut/" target=_blank><i class="fa-brands fa-linkedin mx-1"></i></a>
                                                        </li>
                                                        <li>
                                                            <a href="https://github.com/emmerut" target=_blank><i class="fa-brands fa-github mx-1"></i></a>
                                                        </li>
                                                        <li>
                                                            <a href="https://www.tiktok.com/@emmerut.com?is_from_webapp=1&sender_device=pc" target=_blank><i class="fa-brands fa-tiktok mx-1"></i></a>
                                                        </li>
                                                    {% endfor %}
                                                </ul>
                                                {% if site_data.company_public %}
                                                    <a href="{{site_data.company_public.url}}" class="fs-6 text-dark oxanium decor-none text-center">{{site_data.company_public.web}}</a>  
                                                {% else %} 
                                                    <a href="https://emmerut.com" class="fs-4 text-dark oxanium decor-none text-center">emmerut.com</a>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <h1 class="text-dark text-center fs-5 mb-5">&#169; <span class="oxanium">Stela Control Dynamic | 2023</span></h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div> 
        {% endif %}
        <script>
            var id = []
            var confirmTitle = '{{user.first_name}} {% trans "Confirm?" %}'
            var consultText = '{% trans "This option cannot be reversed!" %}'
            const reportFieldText = '{% trans "Write your report here..." %}'
            var confirmButton = '{% trans "Yes, delete it!" %}'
            var cancelButton = '{% trans "Cancel" %}'
            var titleResponse = '{% trans "Selection removed." %}'
            var textResponse = '{% trans "The records were erased." %}'
            const billingFailed = '{% trans "Something Wrong." %}'
            var confirmResponse = '{% trans "Continue" %}' 
            const billingCancelled = '{% trans "Billing Cancelled" %}'
            const billingPayeed = '{% trans "Billing Payeed" %}'
            const url = '/billings/home'
        </script>
        <script src="https://emmerutcdn.s3.amazonaws.com/static/js/stela/functions.js"></script>
        <script src="https://emmerutcdn.s3.amazonaws.com/static/js/stela/billing/core.js"></script>
{% endblock  %}
{% block scripts %}
{% endblock  %}