{% if document is not defined %}
{% set document = document_vierge %}
{% endif %}
{% if app_logo is not defined %}
{% set app_logo = societe.logo_path %}
{% endif %}
<input class="id-document" type="number" value="{% if document.getId is not null %}{{ document.getId }}{% else %}0{% endif %}" style="display: none">
<input class="id-projet" type="number" value="{{ document.getProjet.getId }}" style="display: none">
<input class="type-document" type="text" value="{{ document.getTypeDocument }}" style="display: none">
<div class="row font-boston">
<div class="col-12 col-sm-12 col-md-12 col-lg-10">
<div class="card card-bordered">
<div class="card-header">
<div class="row">
<div class="col-12 text-center">
<h5>{{ document.getTypeDocument }}</h5>
</div>
</div>
<div class="row">
<div class="col-6">
<img class="brand-logo" alt="logo-societe" src="{{ asset('build/images/logo/' ~ app_logo ) }}" height="75">
<p>{{ societe.rue }} - {{ societe.code_postal }} {{ societe.ville }}</p>
<p>{{ societe.telephone }}</p>
<p>{{ societe.site_web }}</p>
</div>
<div class="col-6 text-right mt-3">
<div class="row">
<div class="col-4">
<p>{{ document.getTypeDocument|replace({' PROFORMA': ''}) }} N° :</p>
</div>
<div class="col-8">
<p>{{ document.getNumPiece }}</p>
</div>
</div>
<div class="row mt-1">
<div class="col-4">
<p>Date :</p>
</div>
<div class="col-8">
{# <p>{{ document.getDateCrea|date('d/m/Y') }}</p>#}
<input type="date" class="input-date-crea-document"
style="border: 0; border-bottom: 1px solid lightgrey; width: 100px"
value="{{ document.getDateCrea|date('Y-m-d') }}">
<i class="fa fa-check text-success ico-saved-date-crea" style="display: none"></i>
<i class="fa fa-pencil text-warning ico-writing-date-crea" style="display: none"></i>
</div>
</div>
<div class="row mt-1">
<div class="col-4">
<p>Client :</p>
</div>
<div class="col-8 div-btn-client">
<button class="btn-client btn btn-outline-dark btn-block text-right" style="padding: 0; border-color: lightgrey;">{{ document.getTiers.getLibSociete }}</button>
</div>
<div class="col-8 div-select-client" style="display: none">
<select class="select-client-document select2 form-control select2-hidden-accessible"></select>
</div>
</div>
<div class="row mt-1">
<div class="col-4">
<p>Adresse :</p>
</div>
<div class="col-8">
<select class="adresse-document" style="border: 0; border-bottom: 1px solid lightgrey;">
{% for adresse in document.getTiers.serializeAdresse %}
<option value="{{ adresse.id_adresse }}" {% if adresse.id_adresse == document.getAdresse.getId %}selected{% endif %}>{{ adresse.lib_adresse }}</option>
{% endfor %}
</select>
</div>
</div>
<div class="row mt-1">
<div class="col-12 label-adresse">
<p>{{ document.getAdresse.getLigne1 }}</p>
<p>{{ document.getAdresse.getLigne2 }}</p>
<p>{{ document.getAdresse.getCodePostal }} {{ document.getAdresse.getVille }}</p>
<p>{{ document.getAdresse.getPays }}</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="row">
<div class="col-4">
<p>Projet :</p>
</div>
<div class="col-8">
{% set lib_projet = document.getProjet.getLibProjet %}
{% if document.libProjet != null %} {% set lib_projet = document.libProjet %} {% endif %}
<input type="text" class="input-lib-projet-document"
style="border: 0; border-bottom: 1px solid lightgrey; width: 95%;"
value="{{ lib_projet }}"/>
<i class="fa fa-check text-success ico-saved-lib-projet" style="display: none"></i>
<i class="fa fa-pencil text-warning ico-writing-lib-projet" style="display: none"></i>
</div>
</div>
<div class="row">
<div class="col-4">
<p>Date BDC :</p>
</div>
<div class="col-8">
<input type="date" class="input-date-bdc-document"
style="border: 0; border-bottom: 1px solid lightgrey; width: 100px"
value="{{ document.getDateBdc|date('Y-m-d') }}">
<i class="fa fa-check text-success ico-saved-date-bdc" style="display: none"></i>
<i class="fa fa-pencil text-warning ico-writing-date-bdc" style="display: none"></i>
</div>
</div>
<div class="row">
<div class="col-4">
<p>N° commande :</p>
</div>
<div class="col-8">
<input type="text" class="input-reference-document"
style="border: 0; border-bottom: 1px solid lightgrey; width: 95%;"
value="{{ document.getReference }}"/>
<i class="fa fa-check text-success ico-saved-reference" style="display: none"></i>
<i class="fa fa-pencil text-warning ico-writing-reference" style="display: none"></i>
</div>
</div>
<div class="row">
<div class="col-4">
<p>Contact :</p>
</div>
<div class="col-8">
<input type="text" class="input-contact-document"
style="border: 0; border-bottom: 1px solid lightgrey; width: 95%;"
value="{{ document.getContact }}"/>
<i class="fa fa-check text-success ico-saved-contact" style="display: none"></i>
<i class="fa fa-pencil text-warning ico-writing-contact" style="display: none"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Désignation</th>
<th class="text-right">Qté</th>
<th class="text-right">PU HT</th>
<th class="text-right">Montant HT</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for ligne in document.getDocumentLignes %}
<tr class="tr-doc-ligne-visible">
<td>
{{ ligne.getLibelle }}<br>
<i>{{ ligne.getDescription }}</i>
</td>
<td class="text-right">{{ ligne.getQte }}</td>
<td class="text-right">{{ ligne.getPuht|format_euro }}</td>
<td class="text-right">{{ ligne.getMontantHt|format_euro }}</td>
<td class="text-center">
<a class="btn-edit-ligne-doc primary mr-1" style="font-size: 1.5rem"
data-id-ligne-doc="{{ ligne.getId }}">
<i class="fa fa-edit"></i>
</a>
<a class="btn-delete-ligne-doc danger mr-1" style="font-size: 1.5rem"
data-id-ligne-doc="{{ ligne.getId }}">
<i class="fa fa-trash-o"></i>
</a>
</td>
</tr>
<tr class="bg-light-primary tr-doc-ligne-hidden tr-doc-ligne-{{ ligne.getId }}" style="display: none">
<td>
<input class="input-update-libelle-ligne" type="text" style="border: 0; border-bottom: 1px solid lightgrey; width: 100%" placeholder="libellé" value="{{ ligne.getLibelle }}"/>
<textarea class="input-update-description-ligne" style="border: 0; border-bottom: 1px solid lightgrey; width: 100%" rows="3" placeholder="description">{{ ligne.getDescription }}</textarea>
</td>
<td class="text-right">
<input class="input-update-qte-ligne" type="number" style="border: 0; border-bottom: 1px solid lightgrey; width: 100px" value="{{ ligne.getQte }}"/>
</td>
<td class="text-right">
PU HT : <input class="input-update-puht-ligne" type="number" style="border: 0; border-bottom: 1px solid lightgrey; width: 100px" value="{{ ligne.getPuht }}"/>
<br>
Taux TVA :
<select class="input-update-taux-tva-ligne" style="border: 0; border-bottom: 1px solid lightgrey; width: 100px">
<option value="0.2" {% if ligne.getTauxTva == 0.2 %}selected{% endif %}>20%</option>
<option value="0" {% if ligne.getTauxTva == 0 %}selected{% endif %}>Sans TVA</option>
</select>
</td>
<td class="text-right label-montant-ht-ligne-update">{{ ligne.getMontantHt|format_euro }}</td>
<td class="text-center">
<a class="btn-update-ligne primary mr-1" style="font-size: 1.5rem" data-id-ligne-doc="{{ ligne.getId }}"><i class="fa fa-save"></i></a>
</td>
</tr>
{% endfor %}
{# INPUT LIGNE #}
<tr>
<td>
<input class="input-libelle-ligne" type="text" style="border: 0; border-bottom: 1px solid lightgrey; width: 100%" placeholder="libellé"/>
<textarea class="input-description-ligne" style="border: 0; border-bottom: 1px solid lightgrey; width: 100%" rows="3" placeholder="description"></textarea>
</td>
<td class="text-right">
<input class="input-qte-ligne" type="number" style="border: 0; border-bottom: 1px solid lightgrey; width: 100px" value="1"/>
</td>
<td class="text-right">
PU HT : <input class="input-puht-ligne" type="number" style="border: 0; border-bottom: 1px solid lightgrey; width: 100px"/>
<br>
Taux TVA :
<select class="input-taux-tva-ligne" style="border: 0; border-bottom: 1px solid lightgrey; width: 100px">
<option value="0.2" selected>20%</option>
<option value="0">Sans TVA</option>
</select>
</td>
<td class="text-right label-montant-ht-ligne">0,00 €</td>
<td class="text-center"><a class="btn-add-ligne-to-doc primary mr-1" style="font-size: 1.5rem"><i class="fa fa-plus-square"></i></a></td>
</tr>
{# INPUT LIGNE #}
</tbody>
<tfoot>
<tr>
<td class="text-right" colspan="4">{{ document.getMontantHT|format_euro }}</td>
<th class="text-right">Total HT</th>
</tr>
{% for tva in document.getVentilationTVA %}
<tr>
<td class="text-right" colspan="4">{{ tva.montant_tva|format_euro }}</td>
<td class="text-right">TVA {{ tva.taux_tva }}%</td>
</tr>
{% endfor %}
<tr>
<td class="" colspan="3">
<input type="text" class="input-condition-reglement-document"
style="border: 0; border-bottom: 1px solid lightgrey; width: 95%;"
placeholder="le client n'a pas de conditions de réglement enregistrées"
value="{% if document.getConditionReglement is not null %}{{ document.getConditionReglement }}{% else %}{{ document.getTiers.getConditionReglement }}{% endif %}"/>
<i class="fa fa-check text-success ico-saved-condition-reglement" style="display: none"></i>
<i class="fa fa-pencil text-warning ico-writing-condition-reglement" style="display: none"></i>
</td>
<td class="text-right">{{ (document.getMontantHT + document.getMontantTVA)|format_euro }}</td>
<th class="text-right">Total TTC</th>
</tr>
</tfoot>
</table>
</div>
</div>
<div class="card-footer text-center">
<p>
{{ societe.lib_societe }}, {{ societe.rue }} - {{ societe.code_postal }} {{ societe.ville }}<br>
{{ societe.statut }} au capital de {{ societe.capital }} Euros /
Code APE - {{ societe.code_ape }} /
{{ societe.registre_commerce }} {{ societe.siret }}
</p>
</div>
</div>
</div>
<div class="col-12 col-sm-12 col-md-12 col-lg-2">
<div class="card card-bordered">
<div class="card-body">
<button type="button" class="btn btn-primary btn-back-doc btn-block" style="display: none">Retour</button>
<button type="button" class="btn btn-primary btn-print-doc btn-block" data-id-doc="{{ document.getId }}">Imprimer</button>
<button type="button" class="btn btn-danger btn-cancel-doc btn-block">{{ label_btn_cancel }}</button>
<button type="button" class="btn btn-success btn-valid-doc btn-block">Valider</button>
</div>
</div>
</div>
</div>