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

{% block stylesheets %}
<style>
    .picking-header { width:100%; margin-bottom:15px; }
    .picking-header td { vertical-align:top; }
    .picking-title { font-size:24px; font-weight:bold; text-align:center; }
    .picking-meta { font-size:12px; text-align:right; }
    table.picking-lines { width:100%; border-collapse:collapse; font-size:13px; }
    table.picking-lines th, table.picking-lines td { border:1px solid #000; padding:4px 6px; }
    table.picking-lines th { background:#f5f5f5; }
    .signature-zone { margin-top:25px; font-size:12px; }
    .signature-zone td { height:60px; vertical-align:bottom; }
    .logo img { max-height:70px; }
</style>
{% endblock %}

{% block body %}
<div style="width:100%;">
    <table class="picking-header">
        <tr>
            <td class="logo" style="width:30%;">
                {% if reparation.getMagasin().photo %}
                    <img src="{{ asset('uploads/magasins/' ~ reparation.getMagasin().photo) }}" alt="Logo">
                {% endif %}
            </td>
            <td class="picking-title" style="width:40%;">Bon de Picking</td>
            <td class="picking-meta" style="width:30%;">
                <b>Magasin:</b> {{ reparation.getMagasin().titre }}<br>
                <b>Date:</b> {{ dateImpression|date('d/m/Y') }}<br>
                <b>Utilisateur:</b> {{ utilisateur }}<br>
                <b>O.R. N°:</b> {{ reparation.numReparation() }}
            </td>
        </tr>
    </table>

    <table class="picking-lines">
        <thead>
            <tr>
                <th style="width:10%;">Qté</th>
                <th style="width:25%;">Référence</th>
                <th>Designation</th>
                <th>Notes</th>
            </tr>
        </thead>
        <tbody>
        {% set nb = 0 %}
        {% for ligne in reparation.produits %}
            {% if ligne.produit %}
                {% set nb = nb + 1 %}
                <tr>
                    <td style="text-align:center;">{{ ligne.quantite }}</td>
                    <td>{{ ligne.produit.reference }}</td>
                    <td>{{ ligne.produit.titre }}</td>
                    <td>{{ ligne.notes }}</td>
                </tr>
            {% endif %}
        {% endfor %}
        {% if nb == 0 %}
            <tr><td colspan="4" style="text-align:center;font-style:italic;">Aucun produit à préparer.</td></tr>
        {% endif %}
        </tbody>
    </table>

    <table class="signature-zone" style="width:100%; border-collapse:collapse; margin-top:30px;">
        <thead>
            <tr><th colspan="3" style="text-align:left;">Signatures</th></tr>
        </thead>
        <tbody>
            <tr>
                <td style="width:33%;">Demandeur:<br><br>__________________________</td>
                <td style="width:33%;">Responsable:<br><br>__________________________</td>
                <td style="width:33%;">Magasinier:<br><br>__________________________</td>
            </tr>
        </tbody>
    </table>
</div>
{% endblock %}