@extends('cr_blank')

@section('content')
    <div class="contenedor-pdf">
        @foreach ($datos as $index => $data)
            <div class="boleta-wrapper">
                @include('reportes.components.boleta-pago', ['data' => $data, 'zona' => $zona, 'title' => $title])
            </div>

            {{-- Clearfix después de cada 2 boletas para formar nuevas filas --}}
            @if (($index + 1) % 2 === 0)
                <div style="clear: both;"></div>
            @endif

            {{-- Salto de página después de cada 6 boletas --}}
            @if (($index + 1) % 6 === 0)
                <div class="page-break"></div>
            @endif
        @endforeach
    </div>
@endsection

@section('scripts')
    <style>
        body {
            font-size: 10px;
            margin: 10px;
        }

        .contenedor-pdf {
            width: 100%;
        }

        .boleta-wrapper {
            width: 49%;
            float: left;
            margin: 0.5% 0.5% 5px 0.5%;
            box-sizing: border-box;
        }

        .boleta-titulo {
            text-transform: uppercase;
            border: 1px solid #000;
            padding: 1px;
            margin: 0px 0;
            text-align: center;
            font-weight: bold;
            font-size: 10px;
        }

        .boleta {
            border: 1px solid #000;
            padding: 3px;
        }

        .title {
            text-transform: uppercase;
            font-weight: bold;
            text-align: center;
            font-size: 11px;
        }

        .tabla-datos td {
            /* padding: 2px 4px; */
            vertical-align: top;
        }

        .tabla-pago td {
            font-size: 10px;
        }

        .subtitulo {
            text-transform: uppercase;
            text-align: center;
            font-weight: bold;
            margin: 4px 0 4px;
            font-size: 11px;
        }

        .tabla-pago td .pago-bs {
            padding-right: 15px;
        }

        .total {
            text-align: right;
            font-weight: bold;
            /* margin-top: 5px; */
            font-size: 11px;
        }

        .nota {
            /* margin-top: 10px; */
            font-style: italic;
            font-size: 10px;
            height: 35px;
            line-height: 1.2;
            border-top: 1px dashed #000;
            /* padding-top: 4px; */
        }
        .nota-text {
            font-size: 11px;
            color: #e43f16
        }

        .page-break {
            page-break-after: always;
            clear: both;
        }
    </style>
@endsection