<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Servicio Nº <?= $numeroServicio ?></title>
</head>
<body>

<table class="header-table">
    <tr>
        <!-- IZQUIERDA: Logo con nombre y datos de empresa-->

        <td class="header-left">
            <img src="<?= $datosEmpresa['logo_ruta'] ?>" class="logo-marca">

            <div class="empresa-datos">
                <?= htmlspecialchars($datosEmpresa['direccion']) ?><br>
                <?= htmlspecialchars($datosEmpresa['ciudad']) ?>
                (<?= htmlspecialchars($datosEmpresa['codigo_postal']) ?>) -
                <?= htmlspecialchars($datosEmpresa['provincia']) ?><br>
                Tel.: <?= htmlspecialchars($datosEmpresa['telefono']) ?><br>
                Email: <?= htmlspecialchars($datosEmpresa['email']) ?>
            </div>
        </td>

        <!-- DERECHA: Venta y datos fiscales -->

        <td class="header-right">
            <div class="venta-titulo">Resumen Servicio</div>

            <div class="venta-datos">
                <div><strong>Nº:</strong> <?= $numeroServicio ?></div>
                <div><strong>Fecha:</strong> <?= date('d/m/Y') ?></div>
            </div>

            <div class="datos-fiscales">
                <br>
                <div><strong>IVA:</strong> <?= htmlspecialchars($datosEmpresa['cond_iva']) ?></div>
                <div><strong>CUIT:</strong> <?= htmlspecialchars($datosEmpresa['cuit']) ?></div>
                <div><strong>Inicio actividades:</strong> <?= htmlspecialchars($datosEmpresa['inicio_act']) ?></div>
            </div>
        </td>
    </tr>
</table>

<hr class="separator">

<table class="box-cliente">
    <tr>
        <td>
            <table class="box-cliente-contenido">

                <!-- FILA SUPERIOR -->

                <tr>
                    <td class="box-cliente-left">
                        <strong>Cliente:</strong>
                        <?= htmlspecialchars($cliente['nombre'] . ' ' . $cliente['apellido']) ?><br>

                        <strong>Teléfono:</strong>
                        <?= htmlspecialchars($cliente['telefono']) ?><br>

                        <strong>Email:</strong>
                        <?= htmlspecialchars($cliente['email']) ?><br>
                    </td>
                </tr>

                <!-- SEPARADOR -->

                <tr>
                    <td colspan="2">
                        <div class="box-cliente-separador"></div>
                    </td>
                </tr>

                <!-- FILA INFERIOR -->

                <tr>
                    <td class="box-cliente-right">
                        <strong>Atendió:</strong>
                        <?= htmlspecialchars($vendedor['nombre'] . ' ' . $vendedor['apellido']) ?>
                    </td>
                </tr>

            </table>
        </td>
    </tr>
</table>

<!-- DATOS DEL EQUIPO Y DEMÁS -->

<table class="box-cliente">
    <tr>
        <td>
            <table class="box-cliente-contenido">

                <!-- EQUIPO Y CUENTA -->

                <tr>
                    <td class="box-cliente-left">
                        <strong>Descripcion del Equipo:</strong>
                        <?= htmlspecialchars($datosServicio['descripcion_equipo']) ?><br>

                        <strong>Contraseña del Equipo:</strong>
                        <?= htmlspecialchars($datosServicio['contrasenia_equipo']) ?><br>

                        <strong>Cuenta Gmail/Apple:</strong>
                        <?= htmlspecialchars($datosServicio['cuenta']) ?><br>

                        <strong>Contraseña Gmail/Apple:</strong>
                        <?= htmlspecialchars($datosServicio['contrasenia_cuenta']) ?><br>
                    </td>
                </tr>

            </table>
        </td>
    </tr>
</table>

<!-- PROBLEMA -->

<table class="box-cliente">
    <tr>
        <td>
            <table class="box-cliente-contenido">

                <tr>
                    <td class="box-cliente-left">

                        <strong>Descripción del Problema:</strong>
                        <?= htmlspecialchars($datosServicio['descripcion_problema']) ?><br>

                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

<!-- OBSERVACION -->

<table class="box-cliente">
    <tr>
        <td>
            <table class="box-cliente-contenido">

                <tr>
                    <td class="box-cliente-left">

                        <strong>Observaciones/Detalles:</strong>
                        <?= htmlspecialchars($datosServicio['observacion']) ?><br>

                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

<!-- TEXTO IMPORTANTE -->

<table class="footer-table">
    <tr>
        <!-- IZQUIERDA: NOTA DE USO DE COMPROBANTE -->

        <td class="footer-left">
            
            <div class="box-titulo">Importante</div>
                <div class="box-contenido">

                Se deberá presentar este comprobante para cualquier consulta, trámite o retirar el equipo del local de Bytecenter.
                <br>
                El ingreso de cualquier dispositivo para ser revisado tiene un costo base de $<?= number_format($datosEmpresa['cargo_cancelacion_servicio'], 2, ',', '.') ?>,
                incluso si luego el cliente decide llevar a cabo el servicio o no.
                <br>
                Cualquier reparación realizada en ByteCenter posee una garantía de 3 meses,
                pasado este periodo cualquier daño causado en el dispositivo es responsabilidad exclusiva del usuario.
                    
                </div>
            
        </td>
    </tr>
</body>

<!-- FIRMAS -->

<!-- FOOTER DEL REMITO PARA CONFORMIDAD -->

<div class="footer-fixed">

    <div class="footer-content">

        <div class="footer-right">
            <div class="firma-row">
                <span>Firma Cliente:</span>
                <div class="firma-line"></div>
            </div>

            <div class="firma-row">
                <span>Firma Operador:</span>
                <div class="firma-line"></div>
            </div>
        </div>
    </div>

    <div class="footer-line"></div>
    <div class="footer-brand">Bytecenter</div>

</div>

</html>