<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <title>Factura</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/select/1.2.7/css/select.dataTables.min.css">
</head>

<body style="font-family: Arial; font-size: small;">

    <div class="container">
        <div style="float: left;">
            <img src="<%=empresa.logo%>" height="<%=empresa.tamanio%>" width="<%=empresa.tamanio%>" />
        </div>
        <div class="container" style="text-align: center;">
            <h1><b><%=empresa.nombre%></b></h1>
            <h4><%=empresa.direccion%></h4>
            <h5><%=empresa.slogan%></h5>
        </div>
    </div>

    <div class="container" style="text-align: right;">
        <h4><b><%=encabezado.factura%></b></h4>
    </div>

    <div class="container">
        <div class="col-10 table-responsive">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <td><b>NOMBRE</b></td>
                        <td><%=encabezado.nombre%></td>
                        <td><b>NIT</b></td>
                        <td><%=encabezado.nit%></td>
                    </tr>
                    <tr>
                        <td><b>DIRECCIÓN</b></td>
                        <td><%=encabezado.direccion%></td>
                        <td><b>FECHA</b></td>
                        <td><%=encabezado.fecha%></td>
                    </tr>
                    <tr>
                        <td><b>ESTADO</b></td>
                        <td><%=encabezado.estatus%></td>
                        <td><b>CONFIRMACIÓN</b></td>
                        <td><%=encabezado.confirmacion%></td>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    <div class="container">
        <div class="col-10 table-responsive">
            <table class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th style="width: 10%;">CANTIDAD</th>
                        <th style="text-align: center; width: 80%;">DESCRIPCIÓN</th>
                        <th style="width: 10%;">VALOR</th>
                    </tr>
                </thead>
                <tbody>
                    <%detalle.forEach(function(dto) {%>
                    <tr>
                        <td><%=dto.cantidad%></td>
                        <td><%=dto.descripcion%></td>
                        <td style="text-align: right;"><%=dto.subtotal%></td>
                    </tr>
                    <%});%>
                </tbody>
            </table>
        </div>
    </div>

    <div class="container" style="text-align: right;">
        <h4><b><%=encabezado.total%></b></h4>
    </div>

    <div class="container" style="text-align: left; margin-bottom: 10px;">
        <%=encabezado.certificado%>
    </div>

    <div class="container">
        <div style="float: right;" class="col-lg-12">
            <img src="<%=empresa.qr%>" height="80" />
        </div>
        <div style="float: right;" class="col-lg-12">
            Para ver el estado actual de la factura, debe leer el código QR desde un dispositivo móvil
        </div>
    </div>
    <br />
    <br />

</body>

</html>