<!DOCTYPE html>
<html>
<head>
    
    <style>
        body {
            font-family: "DejaVu Sans", Arial, sans-serif;
            font-size: 12px;
            margin: 20px;
        }

        h2 {
            line-height: 2;
            margin: 0;
            padding: 0;
            text-align: center;
        }
        h3 {
            line-height: 1.1;
            margin: 0;
            padding: 0;
            text-align: center;
        }
        .boleta {
            line-height: 1;
            border: 1px solid #000;
            padding: 20px;
            width: 90%;
            margin: 20px auto;
        }

        .datos-cabecera, .detalle {
            width: 100%;
            margin-top: 15px;
            border-collapse: collapse;
        }

        .datos-cabecera td, .detalle td {
            padding: 5px;
        }

        .detalle th {
            background-color: #eee;
            border: 1px solid #000;
        }

        .detalle td {
            border: 1px solid #000;
        }

        .firma-datos td {
            border-top: 2px solid black;
            border-left: none;
            border-right: none;
            border-bottom: none;
        }

        .separator {
            margin: 40px 0;
            border-top: 2px dashed #000;
        }
    </style>
    <style>
        @page {
            margin-bottom: 10mm; /* Puedes ajustar el valor: 5mm, 10mm, etc. */
        }
    </style>

</head>
<body>

     <!-- Encabezado con imagen a la izquierda -->
     <table style="width: 100%; border-collapse: collapse; margin-bottom: 10px;">
        <tr>
            <td style="width: 80px; text-align: left;">
                <img src="{{ public_path('imagen_comprobante/'.$imagen) }}" alt="Logo" style="height: 140px;">
            </td>
            <td style="text-align: center;">
                <h2 style="margin:0; line-height:1;">{{$encabezado}}</h2>
                 @if(Auth::user()->nombre_capilla)
                <h4 style="margin:0; line-height:1;">CAPILLA {{Auth::user()->nombre_capilla}}</h4>
                 @endif
                <div style="border-top: 3px double #000; margin: 5px 0;"></div>
                <h3>{{$direccion}}</h3>
                <h2>RECIBO DE EGRESOS {{$ano}}</h2>
            </td>
        </tr>
    </table>
    <!-- Primera tabla: Fecha, Serie, Número, Código -->
    <table class="datos-cabecera" style="line-height: 0.5; padding: 0; margin: 0 auto; border-collapse: collapse; font-size: 14px; text-align: center; width: 100%;">
    <tr>
        <td><strong>Fecha:</strong> {{$fecha_hora ?? $fecha}}</td>
        <td><strong>Serie:</strong> {{$serie}}</td>
        <td><strong>Número:</strong> {{$numero}}</td>
        <td><strong>Código:</strong> {{$codigo}}</td>
    </tr>
</table>

<!-- Espacio mínimo entre tablas -->
<div style="height: 1px;"></div>

<!-- Segunda tabla: Boleta -->
<div class="boleta" style="margin-top: 0; padding-top: 0;">
    <table class="datos-cabecera" style="line-height: 0.7; padding: 0; margin: 0; border-collapse: collapse;">
        <tr>
            <td colspan="3" style="text-align: left;"><strong>Cargado A:</strong> {{$concepto}}</td>
        </tr>
        <tr>
            <td colspan="3" style="text-align: left;"><strong>La Suma De:</strong> {{$montoletras}}</td>
        </tr>
        <tr>
            <td colspan="3" style="text-align: left;"><strong>Por:</strong> {{$detalle}}</td>
        </tr>
        <tr>
            <td colspan="2" style="text-align: left;"></td>
            <td style="text-align: right; border: 1px solid #000; width: 100px;">
                <strong>S/.</strong> {{number_format($monto, 2, '.', ',')}}
            </td>
        </tr>
        <tr>
            <td colspan="2" style="text-align: left;"></td>
            <td style="text-align: right; border: 1px solid #000; width: 100px;">
                <strong>$/.</strong> {{number_format($monto_dolar, 2, '.', ',')}}
            </td>
        </tr>
    </table>
</div>


        <br><br><br>

<table class="datos-cabecera" style="border: none; border-collapse: collapse; font-size: 13px; line-height: 1; padding: 0; margin: 0;">
    <tr style="line-height: 0.7; padding: 0;">
        <td colspan="3" style="border-top: 2px solid black; border-left: none; border-right: none; border-bottom: none; padding: 2px;">
            <strong>CAJA:</strong> {{$nombrecaja}}
        </td>
        <td style="border: none; padding: 2px;"></td>
        <td style="border: none; padding: 2px;"></td>
        <td style="border: none; padding: 2px;"></td>
        <td style="border: none; padding: 2px;"></td>
        <td colspan="3" style="border-top: 2px solid black; border-left: none; border-right: none; border-bottom: none; padding: 2px;">
            <strong>USUARIO:</strong> {{$cliente_nombre}} 
        </td>
    </tr>
    <tr style="line-height: 0.7; padding: 0;">
        <td colspan="3" style="padding: 2px;">
            <strong>DNI:</strong> {{$dnicaja}}
        </td>
        <td style="border: none; padding: 2px;"></td>
        <td style="border: none; padding: 2px;"></td>
        <td style="border: none; padding: 2px;"></td>
        <td style="border: none; padding: 2px;"></td>
        <td colspan="3" style="padding: 2px;">
            
        </td>
    </tr>
</table>

    </table>
    <br>
    <!-- Espacio mínimo entre tablas -->
    <div style="height: 10px;"></div>
    
    <!-- Separador -->
    <div class="separator"></div>

    <div style="height: 40px;"></div>
    <!-- Segunda copia -->
     <!-- Encabezado con imagen a la izquierda -->
     <!-- Encabezado con imagen a la izquierda -->
      <!-- Encabezado con imagen a la izquierda -->
      <table style="width: 100%; border-collapse: collapse; margin-bottom: 10px;">
        <tr>
            <td style="width: 80px; text-align: left;">
                <img src="{{ public_path('imagen_comprobante/'.$imagen) }}" alt="Logo" style="height: 140px;">
            </td>
            <td style="text-align: center;">
                <h2 style="margin:0; line-height:1;">{{$encabezado}}</h2>
                 @if(Auth::user()->nombre_capilla)
                <h4 style="margin:0; line-height:1;">CAPILLA {{Auth::user()->nombre_capilla}}</h4>
                 @endif
                <div style="border-top: 3px double #000; margin: 5px 0;"></div>
                <h3>{{$direccion}}</h3>
                <h2>RECIBO DE EGRESOS {{$ano}}</h2>
            </td>
        </tr>
    </table>
    <!-- Primera tabla: Fecha, Serie, Número, Código -->
    <table class="datos-cabecera" style="line-height: 0.5; padding: 0; margin: 0 auto; border-collapse: collapse; font-size: 14px; text-align: center; width: 100%;">
    <tr>
        <td><strong>Fecha:</strong> {{$fecha_hora ?? $fecha}}</td>
        <td><strong>Serie:</strong> {{$serie}}</td>
        <td><strong>Número:</strong> {{$numero}}</td>
        <td><strong>Código:</strong> {{$codigo}}</td>
    </tr>
</table>

<!-- Espacio mínimo entre tablas -->
<div style="height: 1px;"></div>

<!-- Segunda tabla: Boleta -->
<div class="boleta" style="margin-top: 0; padding-top: 0;">
    <table class="datos-cabecera" style="line-height: 0.7; padding: 0; margin: 0; border-collapse: collapse;">
        <tr>
            <td colspan="3" style="text-align: left;"><strong>Cargado A:</strong> {{$concepto}}</td>
        </tr>
        <tr>
            <td colspan="3" style="text-align: left;"><strong>La Suma De:</strong> {{$montoletras}}</td>
        </tr>
        <tr>
            <td colspan="3" style="text-align: left;"><strong>Por:</strong> {{$detalle}}</td>
        </tr>
        <tr>
            <td colspan="2" style="text-align: left;"></td>
            <td style="text-align: right; border: 1px solid #000; width: 100px;">
                <strong>S/.</strong> {{number_format($monto, 2, '.', ',')}}
            </td>
        </tr>
        <tr>
            <td colspan="2" style="text-align: left;"></td>
            <td style="text-align: right; border: 1px solid #000; width: 100px;">
                <strong>$/.</strong> {{number_format($monto_dolar, 2, '.', ',')}}
            </td>
        </tr>
    </table>
</div>
        <br><br><br>

        <table class="datos-cabecera" style="border: none; border-collapse: collapse; font-size: 13px; line-height: 1; padding: 0; margin: 0;">
    <tr style="line-height: 0.7; padding: 0;">
        <td colspan="3" style="border-top: 2px solid black; border-left: none; border-right: none; border-bottom: none; padding: 2px;">
            <strong>CAJA:</strong> {{$nombrecaja}}
        </td>
        <td style="border: none; padding: 2px;"></td>
        <td style="border: none; padding: 2px;"></td>
        <td style="border: none; padding: 2px;"></td>
        <td style="border: none; padding: 2px;"></td>
        <td colspan="3" style="border-top: 2px solid black; border-left: none; border-right: none; border-bottom: none; padding: 2px;">
            <strong>USUARIO:</strong> {{$cliente_nombre}} 
        </td>
    </tr>
    <tr style="line-height: 0.7; padding: 0;">
        <td colspan="3" style="padding: 2px;">
            <strong>DNI:</strong> {{$dnicaja}}
        </td>
        <td style="border: none; padding: 2px;"></td>
        <td style="border: none; padding: 2px;"></td>
        <td style="border: none; padding: 2px;"></td>
        <td style="border: none; padding: 2px;"></td>
        <td colspan="3" style="padding: 2px;">
            
        </td>
    </tr>
</table>
    </div>
</body>
</html>
