{% extends 'base.html.twig' %}

{% block localstyle %}
<style>
    body {
        zoom:70%;
    }
    body, .table>:not(caption)>*>* {
        background-color: #fff !important;
        color: #000;
    
    }

    .company, .client {
        width: 400px;
        border: 1px solid #000;
        padding: 10px;
    }

    .logo {
        width:150px;
    }

    td {
        vertical-align: middle;
    }



</style>

{% endblock %}

{% block body %}
    <div class="d-flex">
        <center><img src="{{ asset(bill.company.logo)}}" class="logo mb-3"></center>
        <h1 class="ms-auto">{{bill.isBill?'Facture FA':'Devis DE' }}{{bill.billDate|date("Ymd")}}</h1>
    </div>
    <div class="company">
        <h4>{{bill.company.title}}</h4>
        {{bill.company.adress|nl2br}}<br><br>
        {{bill.company.email}}
    </div>

    <div class="client ms-auto ms-3 mt-3">
        <h4>{{bill.clientName}}</h4>
        {{bill.clientAddress|nl2br}}
    </div>    

    <table class="table table-bordered mt-3">
        <thead>
            <tr>
                <th>Description</th>
                <th style="width:100px;text-align:center;">Qte</th>
                <th style="width:100px;text-align:center;">PU</th>
                <th style="width:100px;text-align:center;">Rem</th>
                <th style="width:100px;text-align:center;">Total</th>
            </tr>
        </thead>
        <tbody>
            {% for billDetail in bill.billDetails %}
                <tr class="bill-detail">
                    <td>{{ billDetail.description }}</td>
                    <td style="text-align:center">{{ billDetail.quantity }}</td>
                    <td style="text-align:center">{{ billDetail.price }}</td>
                    <td style="text-align:center">{{ billDetail.discount }}</td>
                    <td style="text-align:center">{{ billDetail.total }}</td>
                </tr>
            {% endfor %}
        </tbody>
        <tfoot>
            <tr>
                <td style="text-align:right" colspan="4">Total</td>
                <td style="text-align:center">{{bill.total}}</td>
            </tr>
        </tfoot>
    </table>

{% endblock %}