<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reporte</title>
    <style>
    table {
        border-collapse: collapse; /* Essential for removing cell spacing */
        border: none; /* Removes the table's outer border */
    }
    td, th {
        border: none; /* Removes individual cell borders */
        padding: 0px; /* Add some padding for readability */
    }

    </style>
</head>

<body>

<table style='width:100%;'>
    <tr>
        <td style='width:50%;font-size:3mm;padding:2mm;background-color:#<?= $data['empresa']['color4']?>; color:#000;'><?= $data['producto']['marca'] ?></td>
        <td style='width:50%;font-size:3mm;padding:2mm;background-color:#<?= $data['empresa']['color3']?>; color:#fff;'><?= $data['producto']['categoria'] ?></td>
    </tr>
</table>
<table>
    <tr>
        <td style='padding:6mm;'><img src='data:image/webp;base64,<?=base64_encode(file_get_contents('Assets/img/pdf/logo.webp'))?>' style='width:30mm;'/></td>
        <td style=''>
            <h1 style='color:#000;'>DISTINSA</h1>
            <p><?= $data['empresa']['nombre'] ?></p>
        </td>
    </tr>
</table>
<table style='width:100%;'>
    <tr>
        <td style='text-align:center;'>
            <img src='data:image/webp;base64,<?=base64_encode(file_get_contents('Assets/img/pro/webp/'.$data['producto']['foto']))?>' style='width:90mm;'/>
        </td>
    </tr>
</table>

<table style='width:100%;margin-top:10mm;'>
    <tr style='border:1px solid #<?= $data['empresa']['color1']?>;'>
        <td style=' padding:2mm;color:#<?= $data['empresa']['color1']?>;font-weight:bold;'>CÓDIGO</td>
        <td style='padding:2mm;color:#<?= $data['empresa']['color1']?>;'><?=$data['producto']['codigo']?></td>
    </tr>
    <tr style='border:1px solid #<?= $data['empresa']['color1']?>;'>
        <td style='padding:2mm;color:#<?= $data['empresa']['color1']?>;font-weight:bold;'>PRODUCTO</td>
        <td style='padding:2mm;color:#<?= $data['empresa']['color1']?>;'><?=$data['producto']['descripcion']?></td>
    </tr>    
</table>

<table style='width:100%;margin-top:10mm;background-color:#aeaaaa;color:#000;'>
    <tr>
        <td style=' padding:2mm;font-weight:bold;'>DATOS TECNICOS</td>
    </tr>
</table>

<table style='width:100%;margin-top:5mm;background-color:#aeaaaa;color:#000;font-size:3mm;'>
    <tr style='border:1px solid #858282;'>
        <td style='width:40mm;padding:2mm;color:#000;font-weight:bold;vertical-align:top;'>Detalles</td>
        <td style='padding:2mm;color:#000;'><?=(trim($data['producto']['detalles']) != '') ? $data['producto']['detalles'] : 'N/A'?></td>
    </tr>
    <tr style='border:1px solid #858282;'>
        <td style='padding:2mm;color:#000;font-weight:bold;vertical-align:top;'>Observaciones</td>
        <td style='padding:2mm;color:#000;'><?=(trim($data['producto']['observaciones'].'') != '') ? $data['producto']['observaciones'].'' : 'N/A'?><?=$data['producto']['observaciones']?></td>
    </tr>    
</table>


</body>
</html>