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

<head>
    <meta charset="UTF-8">
    <title>Factura POS</title>
    <style>
        body {
            font-size: 8px;
            padding: 0;
            margin: 0;
        }
        p {
            text-align: center;
        }
        body div {
            border-bottom: 1px dashed black;
        }
        .header {
            text-align: center;
            padding: 0;
            margin: 0;
        }

           .title{
            font-size: 9px;
            text-align: center;
            width: 100px;
            padding: 10px;
        } 
        .table-content-cliente .data-client{
            width: 70px;
        }

        
        .table-content-productos .ct-um{
            width: 15px;
        }
        .table-content-productos .des-value-prod{
            width: 70px;
        }

        .content-valor-sub-total{
            border-bottom: 1px solid black;
        }



    </style>
</head>

<body>
    <div class="header">
        <span class="title">{%nombre-de-cliente%}</span>
        <br>
        <span>{%numero-identificacion%}</span>
        <br>
        <span>RESPONSABLE DEL IVA</span>
        <br>
        <span>TEL. {%numero-de-responsable%}</span>
        <br>
        <span>{%correo-de-responsable%}</span>
        <br>
        <span>AV PEDRO DE HEREDIA SEC BOSTON CR 31
        48 15, CARTAGENA (BOLIVAR)</span>
        <br>
    </div>
    <div class="content-detail-factura">
        <span class="title"> Factura Electrónica de Venta </span>
        <br>
        <table class="table-detail-venta">
            <thead>
                <tr>
                    <th>Numero</th>
                    <th>{%numero-factura%}</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Fecha de operacion</td>
                    <td>{%fecha-operacion%}</td>
                </tr>
                <tr>
                    <td>Fecha de Generacion</td>
                    <td>{%fecha-generacion%}</td>
                </tr>
                <tr>
                    <td>Fecha de Vencimiento</td>
                    <td>{%fecha-vencimiento%}</td>
                </tr>
                <tr>
                    <td>Fecha de Validacion</td>
                    <td>{%fecha-validacion%}</td>
                </tr>
                <tr>
                    <td>Forma de Pago</td>
                    <td>{%forma-pago%}</td>
                </tr>
                <tr>
                    <td>Medio de Pago</td>
                    <td>{%medio-pago%}</td>
                </tr>
                <tr>
                    <td>Orden de compra</td>
                    <td>{%orden-compra%}</td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="content-cliente">
        <table class="table-content-cliente">
            <thead>
                <tr>
                    <th class="data-client">Cliente</th>
                    <th>{%nombre-cliente%}</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="data-client">NIT/CC</td>
                    <td>{%identificacion%}</td>
                </tr>
                <tr>
                    <td class="data-client">Telefono</td>
                    <td>{%telegono-cliente%}</td>
                </tr>
                <tr>
                    <td class="data-client">Direccion</td>
                    <td>{%direccion-cliente%}</td>
                </tr>
                <tr>
                    <td class="data-client">Ciudad.Dep.</td>
                    <td>{%ciudad-dep%}</td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="content-datos-produtos">
        <table class="table-content-productos">
            <thead>
                <tr>
                    <th class="ct-um">CT</th>
                    <th class="ct-um">U/M</th>
                    <th class="des-value-prod">DESCRIPCION</th>
                    <th class="des-value-prod">VALOR</th>

                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="ct-um">#</td>
                    <td class="ct-um">niu</td>
                    <td class="des-value-prod">
                     {%des-prod%}

                    </td>
                    <td class="des-value-prod">${%valProducto%}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="content-valor-sub-total">
        <table class="table">
            <tr>
                <th>SubTotal</th>
                <th>${%valor-sub-total%}</th>
            </tr>
        </table>
    </div>
    <div class="content-valor-total">
        <table class="table">
            <tr>
                <th>TOTAL A PAGAR</th>
                <th>${%valor-pago-total%}</th>
            </tr>
        </table>
    </div>

    <p>Unidades de medida: NIU = número de unidades
        internacionales</p>
    <p>Autorización Numeración de Facturación
        No. {%numero-facturacion%} de {%fecha-facturacion-inicial%} - {%fecha-facuturacion-final%}
        autoriza FVE-201 a FVE-5000
    </p>
    <p>
        OBSERVACIONES
    </p>
    <p>A esta factura de venta aplican las normas
        relativas a la letra de cambio (Art 5 Ley 1231 de
        2008), el Comprador declara haber recibido real y
        materialmente las mercancías o servicios
        descritos en este título-Valor. Responsable de IVA
    </p>
</body>

</html>