{# @var ea \EasyCorp\Bundle\EasyAdminBundle\Context\AdminContext #}
{# @var entity \EasyCorp\Bundle\EasyAdminBundle\Dto\EntityDto #}
{% extends ea.templatePath('layout') %}

{% trans_default_domain ea.i18n.translationDomain %}

{% block body_id 'ea-detail-' ~ entity.name ~ '-' ~ entity.primaryKeyValue %}
{% block body_class 'ea-detail ea-detail-' ~ entity.name %}

{% block content_title %}
    {%- apply spaceless -%}
        {% set custom_page_title = ea.crud.customPageTitle(pageName, entity ? entity.instance : null) %}
        {{ custom_page_title is null
            ? (ea.crud.defaultPageTitle|trans(ea.i18n.translationParameters, 'EasyAdminBundle'))|raw
            : (custom_page_title|trans(ea.i18n.translationParameters))|raw }}
    {%- endapply -%}
{% endblock %}

{% block page_actions %}
    {% for action in entity.actions %}
        {{ include(action.templatePath, { action: action }, with_context = false) }}
    {% endfor %}
{% endblock %}

{% block content_footer_wrapper '' %}

{% block main %}

{% set order = entity.instance %}




<style>
#invoice{
    padding: 30px;
}

.invoice {
    position: relative;
    background-color: #FFF;
    min-height: 680px;
    padding: 15px
}

.invoice header {
    padding: 10px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #3989c6
}

.invoice .company-details {
    text-align: right
}

.invoice .company-details .name {
    margin-top: 0;
    margin-bottom: 0
}

.invoice .contacts {
    margin-bottom: 20px
}

.invoice .invoice-to {
    text-align: left
}

.invoice .invoice-to .to {
    margin-top: 0;
    margin-bottom: 0
}

.invoice .invoice-details {
    text-align: right
}

.invoice .invoice-details .invoice-id {
    margin-top: 0;
    color: #3989c6
}

.invoice main {
    padding-bottom: 50px
}

.invoice main .thanks {
    margin-top: -100px;
    font-size: 2em;
    margin-bottom: 50px
}

.invoice main .notices {
    padding-left: 6px;
    border-left: 6px solid #3989c6
}

.invoice main .notices .notice {
    font-size: 1.2em
}

.invoice table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin-bottom: 20px
}

.invoice table td,.invoice table th {
    padding: 15px;
    background: #eee;
    border-bottom: 1px solid #fff
}

.invoice table th {
    white-space: nowrap;
    font-weight: 400;
    font-size: 16px
}

.invoice table td h3 {
    margin: 0;
    font-weight: 400;
    color: #3989c6;
    font-size: 1.2em
}

.invoice table .qty,.invoice table .total,.invoice table .unit {
    text-align: right;
    font-size: 1.2em
}

.invoice table .no {
    color: #fff;
    font-size: 1.6em;
    background: #3989c6
}

.invoice table .unit {
    background: #ddd
}

.invoice table .total {
    background: #3989c6;
    color: #fff
}

.invoice table tbody tr:last-child td {
    border: none
}

.invoice table tfoot td {
    background: 0 0;
    border-bottom: none;
    white-space: nowrap;
    text-align: right;
    padding: 10px 20px;
    font-size: 1.2em;
    border-top: 1px solid #aaa
}

.invoice table tfoot tr:first-child td {
    border-top: none
}

.invoice table tfoot tr:last-child td {
    color: #3989c6;
    font-size: 1.4em;
    border-top: 1px solid #3989c6
}

.invoice table tfoot tr td:first-child {
    border: none
}

.invoice footer {
    width: 100%;
    text-align: center;
    color: #777;
    border-top: 1px solid #aaa;
    padding: 8px 0
}

@media print {
    .invoice {
        font-size: 11px!important;
        overflow: hidden!important
    }

    .invoice footer {
        position: absolute;
        bottom: 10px;
        page-break-after: always
    }

    .invoice>div:last-child {
        page-break-before: always
    }
}
</style>





<div id="invoice">

    <div class="toolbar hidden-print">
        <div class="text-right">
            <button id="printInvoice" class="btn btn-info"><i class="fa fa-print"></i> Print</button>
            <button class="btn btn-info"><i class="fa fa-file-pdf-o"></i> Export as PDF</button>
        </div>
        <hr>
    </div>
    <div class="invoice overflow-auto">
        <div style="min-width: 600px">
            <header>
                <div class="row">
                    <div class="col">
                        
                            <img  style="margin:16px 0 20px 30px" src="https://www.taxiciel.atafrance.com/assets/img/logo-tlcs.png" width="120px" />
                            
                    </div>
                    <div class="col company-details">
                        <h2 class="name">
                            
                            {{order.firstName}} {{order.lastName}}
                            
                        </h2>
                        <div>{{order.recoveryAddress}}</div>
                        <div>{{order.receiveDate}}</div>
                    </div>
                </div>
            </header>
            <main>
                <div class="row contacts">
                    <div class="col invoice-to">
                        <div class="text-gray-light">INVOICE TO:</div>
                        <h2 class="to">{{order.firstName}} {{order.lastName}}</h2>
                        <div class="address">{{order.recoveryAddress}}</div>
                        <div class="email"><a href="mailto:{{order.email}}">{{order.email}}</a></div>
                    </div>
                    <div class="col invoice-details">
                        <h1 class="invoice-id">{{order.orderNumber}}</h1>
                        <div class="date">Date of Invoice: {{order.createdDate|date("Y-m-d H:i")}}</div>
                        
                    </div>
                </div>
                <table border="0" cellspacing="0" cellpadding="0">
                    <thead>
                        <tr>
                            <th class="text-left">Produit</th>
                            <th class="text-left">Service</th>
                            <th class="text-right">Prix</th>
                            <th class="text-right">Qte</th>
                            <th class="text-right">Remise</th>
                            <th class="text-right">TOTAL</th>
                        </tr>
                    </thead>
                    <tbody>

                    {% set totalOrder = 0 %}
                        {% for singleCateg in order.panier %}
                        {% for singleProduct in singleCateg %}
                        <tr>
                            <td class="no">
                              <h3 class="text-white">
                                {{singleProduct["product_name"]}}
                                
                                </h3>
                            </td>
                            <td class="text-left">
                            
                            
                                {{singleProduct["category_name"]  }} ({{singleProduct["subcategory_name"]}})
                                
                                
                               
                               
                            </td>
                            <td class="unit">{{singleProduct["base_price"]}} DH</td>
                            <td class="qty">{{singleProduct["quentity"]}}</td>
                            <td class="total">{{singleProduct["desc_price"]}} DH</td>
                            <td class="total">
                            {% set totalProduct = singleProduct["quentity"] * singleProduct["base_price"] %}

                            {{totalProduct - singleProduct["desc_price"]}} DH
                            </td>
                        </tr>

                        {% set totalOrder =totalOrder + (totalProduct - singleProduct["desc_price"]) %}
                        {% endfor %}
                        {% endfor %}
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="3"></td>
                            <td colspan="2">Montant Total</td>
                            <td>{{totalOrder}} DH</td>
                        </tr>
                        <tr class="d-none">
                            <td colspan="3"></td>
                            <td colspan="2">TAX 25%</td>
                            <td>$1,300.00</td>
                        </tr>
                        <tr class="d-none">
                            <td colspan="3"></td>
                            <td colspan="2">GRAND TOTAL</td>
                            <td>$6,500.00</td>
                        </tr>
                    </tfoot>
                </table>
                
            </main>
            
        </div>
        <!--DO NOT DELETE THIS div. IT is responsible for showing footer always at the bottom-->
        <div></div>
    </div>
</div>
{% endblock %}

{% macro open_form_field_panel(field = null) %}
    {% set panel_name = field is null ? null : 'content-' ~ field.uniqueId %}
    {% set collapsible = field is null ? false : field.customOption('collapsible') %}
    {% set collapsed = field is null ? false : field.customOption('collapsed') %}
    {% set panel_icon = field is null ? null : (field.customOptions.get('icon')|default(false)) %}
    {% set panel_label = field is null ? null : field.label %}
    {% set panel_help = field is null ? null : field.help|default(false)%}
    {% set panel_has_header = collapsible or panel_icon or panel_label or panel_help %}

    <div class="{{ field.cssClass ?? '' }}">
        <div class="form-panel">
            {% if panel_has_header %}
                <div class="form-panel-header {{ collapsible ? 'collapsible' }} {{ panel_help is not empty ? 'with-help' }}">
                    <div class="form-panel-title">
                        <a {% if not collapsible %}
                            href="#" class="not-collapsible"
                        {% else %}
                            href="#{{ panel_name }}" data-bs-toggle="collapse"
                            class="form-panel-collapse {{ collapsed ? 'collapsed' }}"
                            aria-expanded="{{ collapsed ? 'false' : 'true' }}" aria-controls="{{ panel_name }}"
                        {% endif %}
                        >
                            {% if collapsible %}
                                <i class="fas fw fa-chevron-right form-panel-collapse-marker"></i>
                            {% endif %}

                            {% if panel_icon %}
                                <i class="form-panel-icon {{ panel_icon }}"></i>
                            {% endif %}
                            {{ panel_label|raw }}
                        </a>

                        {% if panel_help %}
                            <div class="form-panel-help">{{ panel_help|raw }}</div>
                        {% endif %}
                    </div>
                </div>
            {% endif %}

            <div {% if panel_name %}id="{{ panel_name }}"{% endif %} class="form-panel-body {{ collapsible ? 'collapse' }} {{ not collapsed ? 'show'}}">
                <dl class="datalist">
{% endmacro %}

{% macro close_form_field_panel() %}
            </dl>
        </div>
    </div>
</div>
{% endmacro %}

{% macro render_field(entity, field) %}
    <div class="data-row {{ field.cssClass }}">
        <dt>
            {{ field.label|raw }}

            {% if field.help is not empty %}
                <span class="data-help">
                    <i class="far fa-question-circle" data-bs-toggle="tooltip" title="{{ field.help|e('html_attr') }}"></i>
                </span>
            {% endif %}
        </dt>
        <dd>
            {{ include(field.templatePath, { field: field, entity: entity }, with_context = false) }}
        </dd>
    </div>
{% endmacro %}