{% extends 'pdf/base-pdf.html.twig' %}

{% block title %}
    Salida de Almacén
{% endblock %}

{% block style %}
    <style>
        table {
            width: 100%;
        }

        .dropdown-divider {
            height: 0;
            margin: .5rem 0;
            overflow: hidden;
            border-top: 2px solid #555555 !important;
        }

        .pageStyle {
            background-color: #fff;
            /*padding: 32px;*/
            padding-right: 32px;
            padding-left: 32px;
            /*padding-top: 32px;*/
            position: relative
        }

        .div-row {
            min-height: 32px;
            width: 100%;
            padding: 8px
        }

        thead {
            background: #415164;
            display: table-header-group;
            color: white;
        }

        .page {
            page-break-after: always;
            page-break-inside: avoid;
        }

        :last-child {
            page-break-after: avoid;
            page-break-inside: avoid;
        }

        body {
            font-size: 13px !important;
        }

        h5 {
            font-size: 18px !important;
            font-weight: bold;
        }

        tfoot {
            display: table-row-group;
        }

        tr {
            page-break-inside: avoid !important;
        }
    </style>

{% endblock %}

{% block body %}

    <div class="pageStyle div-row" style="margin: 0 auto">

        <h4 class="text-center mt-4 mb-4">SALIDA ALMACÉN #{{ tblDeliveriesEX.numberDelivery }}</h4>

        <div class="div-row">
            <div class="card-body">
                <table class="table table-bordered">
                    <tbody>
                    <tr>
                        <th>FECHA:</th>
                        <td>{{ tblDeliveriesEX.createdAt|date('Y-m-d') }}</td>
                    </tr>
                    <tr>
                        <th>NOMBRE CLIENTE:</th>
                        <td>{{ tblDeliveriesEX.nameCliente }}</td>
                    </tr>
                    <tr>
                        <th>DIRECCIÓN DE LA OBRA:</th>
                        <td>{{ tblDeliveriesEX.address }}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="div-row">
            <div class="card-body">
                <table class="table table-striped table-bordered">
                    <thead>
                    <tr>
                        <th>DETALLE MATERIALES</th>
                        <th>CANTIDAD</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for item in items %}
                        <tr>
                            <td>{{ item.item }}</td>
                            <td>{{ item.quantitiy_delivery_receipt }}</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        <div class="div-row row">
            <div class="col-6">
                <div class="card-body">
                    <div class="card-body">
                        <h6 class="card-title">ENTREGADO POR:</h6>
                        <p class="card-text" style="margin-bottom: 0;">
                            <b>*</b>
                        </p>
                        <div tabindex="-1" class="dropdown-divider"></div>
                        <label>NOMBRE</label>
                        <p class="card-text" style="margin-bottom: 0;">
                            <b>*</b>
                        </p>
                        <div tabindex="-1" class="dropdown-divider"></div>
                        <label>CÉDULA</label>
                    </div>
                </div>
            </div>

            <div class="col-6">
                <div class="card-body">
                    <div class="card-body">
                        <h6 class="card-title">RECIBIDO POR:</h6>
                        <p class="card-text" style="margin-bottom: 0;">
                            <b>*</b>
                        </p>
                        <div tabindex="-1" class="dropdown-divider"></div>
                        <label>NOMBRE</label>
                        <p class="card-text" style="margin-bottom: 0;">
                            <b>*</b>
                        </p>
                        <div tabindex="-1" class="dropdown-divider"></div>
                        <label>CÉDULA</label>
                    </div>
                </div>
            </div>
        </div>

        <div class="div-row">
            <div class="form-group">
                <label for="note" class="control-label">
                    OBSERVACIONES:
                </label>
                <textarea id="note" disabled class="form-control" rows="4">{{ tblDeliveriesEX.note }}</textarea>
            </div>
        </div>

    </div>


{% endblock %}