{% extends 'stela_control/index.html' %}
{% load i18n %}
{% load l10n %}
{% load crispy_forms_tags %}
{% load static %}
{% load hosts %}
{% load stelatags %}
{% load humanize %}
{% block styles %}
    <style>
        .email-box {
            max-width: 600px;
            box-shadow: 1px 2px 17px #ffe5e5;
        }
        @import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@300&display=swap');
        .bg {
            background: #f9f9f9;
            overflow-x: hidden;
        }
        @import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Exo+2&display=swap');
        .vh-10 {
            height: 10vh;
        }
        .vh-20 {
            height: 20vh;
        }
        .oxanium {
            font-family: 'Oxanium', cursive;
        }
        .varela {
            font-family: 'Varela Round', sans-serif;
        }
        .exo {
            font-family: 'Exo 2', sans-serif;
        }
        .vh-30 {
            height: 30vh;
        }
        .vh-40 {
            height: 40vh;
        }
        .vh-50 {
            height: 50vh;
        }
        .vh-60 {
            height: 60vh;
        }
        .vh-70 {
            height: 70vh;
        }
        .vh-80 {
            height: 80vh;
        }
        .vh-90 {
            height: 90vh;
        }
        .absolute{
            position:absolute;
        }
        .decor-none {
            text-decoration: none;
        }
        .backdrop {
            backdrop-filter: blur(4px);
        }     
        .text-justify {
            text-align: justify;
        }
        .black {
            background: #000;
        }
        .bg-footer {
            background: linear-gradient(0deg, #000000 -87%, #120430 163%, #0133ff70 123%)!important;
        }
        .h-90 {
            height: 105%;
        }
        .min-vh-30 {
            min-height: 30vh
        }
        .bg-footer .footer-content {
            position: relative;
            bottom:10vh;
        }
        ul a {
            color: #272727;
            cursor: pointer;
            transition: all .3s ease;
        }
        ul a:hover {
            color: #cec9c9;
        }
        .h-30 {
            height: 35%;
        }
        .t-20 {
            top: -2%;
        }
        .blur {
            filter: blur(4px)
        }
        .b-25px {
            border-radius: 25px;
            box-shadow: 1px 1px 12px #b5c3ed3d;
        }
        .list-none {
            list-style: none;
        }
        hr {
            margin-top: 1rem;
            margin-bottom: 0rem;
            border: 0;
            border-top: 3px dashed black !important;
        }
        .social-links a {
            font-size: 24px;
            padding: 0 10px;
            line-height: 38px;
        }
        @media only screen and (min-width: 360px) and (max-width: 500px) {
            .elipse-mobile {
                position: relative;
                left: -90px;
                top:5%;
            }
            .t-20 {
                top: 7%;
                left: 16%;
            }
            .social-links a {
                font-size: 17px;
            }
            .h-30 {
                height: 24%;
            }
            .text-xmall {
                font-size: 12px !important;
                text-align: center !important;
            }
        }
        @media only screen and (min-width: 360px) and (max-width: 1000px) {
            .speace-top {
                margin-top: 50px
            }
        }
        @media only screen and (min-width: 500px) and (max-width: 1000px) {
            .h-30 {
                height: 36%;
            } 
            .t-20 {
                top:0%;
            }
            .h-90 {
                height: 120%;
            }
        }
    </style>
{% endblock  %}
{% block bsCall %}
    
{% endblock  %}
{% block section %}
    {% block title %}
                <h1 class="oxanium text-dark pt-3 ml-4">{% trans "Billings" %} <i class='bx bxs-wallet' ></i></h1>
    {% endblock  %}
    {% block side_title %}
                <h3 class="oxanium d-flex justify-content-end mr-4"><b>STELA {% trans "CONTROL DYNAMIC" %} | {% trans "finances" %}</b></h3>
    {% endblock  %}
    <div class="row justify-content-evenly mt-3">
        <div class="col-lg-6">
            <h1 class="oxanium fw-bold text-center fs-4 py-3">{% trans "Billing Recipt Preview" %}</h1> 
        </div>
        <div class="col-sm-6 col-md-6 col-lg-2">
            <a href="/billings/edit-bill/{{recipt.id}}" class="btn btn-shappire">{% trans "Edit Recipt" %}</a>
        </div>
        <div class="col-sm-6 col-md-6 col-lg-2">
            <input type="hidden" value="{{recipt.id}}" id="reciptid">
            <button class="btn btn-shappire" onclick="generateInvoice()">{% trans "Generate" %}</button>
        </div>
    </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.option == "budget_design" %}
                            <h1 class="text-danger text-right">{% trans "BUDGET" %}</h1>
                        {% elif recipt.option == "budget_marketing" %}
                            <h1 class="text-danger text-right">{% trans "BUDGET" %}</h1>
                        {% elif 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.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.created}}</b></li>
                            <li>{% trans "Address" %}:<b class="fw-bold oxanium" > {{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.customer.full_name}}</b></li>
                            <li>N°: <b class="btn btn-shappire btn-sm">{% trans "Not asigned" %}</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.service_recipt.all %}
                                {% for item in 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.product_recipt.all %}
                                {% for item in 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.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.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.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.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.amount}}</b></td>
                                </tr>
                                {% if recipt.custom_discounts.all %}
                                    <tr>
                                        <td class="text-right">{% trans "Discounts" %}:</td>
                                        <td class="text-center oxanium"> <b>-${{recipt.discount}}</b></td>
                                    </tr>
                                {% elif recipt.discounts.all %}
                                    <tr>
                                        <td class="text-right">{% trans "Discounts" %}:</td>
                                        <td class="text-center oxanium"> <b>-${{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.option == 'Budget' %}
                                {% else %}
                                    <tr>
                                        <td class="text-right">{% trans "Tax" %}:</td>
                                        <td class="text-center oxanium"> <b>${{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">
                                    {% 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>
    <script>
        const useralert = 'Confirm {{user.username}}'
        const budgetdenied = '{% trans "Request denied" %}'
        const invoicedenied = '{% trans "Request denied" %}'
        const success = '{% trans "Success" %}'
        const url ="/billings/preview/{{recipt.id}}"
        const titletext = '{% trans "Invoice Header Updated" %}'
        const textbtn = '{% trans "Continue" %}'
        const successUrl = "{% host_url 'billing' host 'stela' %}"
        const question = '{% trans "Generate Number? Cannot be reversed." %}'
        const confirm = "{% trans 'Yes, asign it!' %}"
        const cancel = '{% trans "Cancel" %}'
    </script>
        <script src="https://emmerutcdn.s3.amazonaws.com/static/js/stela/billing/previewBill.js"></script>
{% endblock  %}