<div>
    <style>
        #contenedor-vista {
            display: flex;
            /* grid-template-columns: auto repeat(18, 5fr); */
            width: fit-content;
        }

        .tabla-hexagonos {
            display: grid;
            /* grid-template-columns: repeat(18, 1fr); */
            /* grid-template-rows: repeat(6, 1fr); */
            grid-gap: 2px;
        }
        .encabezado-filas, .encabezado-columnas, .tabla-hexagonos {
            display: grid;
            grid-gap: 2px;
            transform: scale(1);
        }

        .numero {
            text-align: center;
            padding: 5px; 
            transform: scale(1);
            width: 64px;
            display: flex;
            align-items: center;
            vertical-align: middle;
            justify-content: center;
            font-weight: bold;
            font-size: 14px;
        }

        .encabezado-filas {
            display: grid;
            grid-template-columns: 1fr;
            grid-gap: 2px;
            transform: scale(1);
        }
        
        .encabezado-columnas {
            padding-left : 58px;
            margin : 5px;
            display: flex;
            flex-direction: row;
            transform: scale(1);
        }

        .encabezado-celda {
            background-color: #64C7CC;
            height: 12px;
            width: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 14px;
        }
    </style>
    <div class="col-12">                                       
        <div class="row justify-content-center">
            <div class="col-md-5">
                <div class="row">
                    <div class="col-md-12">
                        <label style="text-align: center; display: block;">PABELLON<strong style="color:red">*</strong> </label>                                    
                        <?php if (isset($component)) { $__componentOriginal325d3d6934803fba81e0289d299b9960546803c2 = $component; } ?>
<?php $component = $__env->getContainer()->make(JeroenNoten\LaravelAdminLte\View\Components\Form\Select::class, ['name' => 'pabellonId']); ?>
<?php $component->withName('adminlte-select'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php $component->withAttributes(['wire:change' => 'selectPabellon','wire:model' => 'pabellonId']); ?>
                            <option value="">-- Seleccione --</option>
                            <?php $__currentLoopData = $pabellones; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $pabellon): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <option value="<?php echo e($pabellon->id); ?>"><?php echo e($pabellon->nombre); ?></option>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                         <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal325d3d6934803fba81e0289d299b9960546803c2)): ?>
<?php $component = $__componentOriginal325d3d6934803fba81e0289d299b9960546803c2; ?>
<?php unset($__componentOriginal325d3d6934803fba81e0289d299b9960546803c2); ?>
<?php endif; ?>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-12">
        <div class="row">
            <div class="col-md-12">
                <div class="encabezado-columnas">
                    <?php for($j = 1; $j <= $columnas; $j++): ?>
                        <div class="numero"><?php echo e($j); ?></div>
                    <?php endfor; ?>
                </div>
                <div id="contenedor-vista">
                    <div class="encabezado-filas">
                        <?php for($i = 0; $i < $filas; $i++): ?>
                            <?php $letras = ['A', 'B', 'C', 'D', 'E', 'F', 'G']; ?>
                            <div class="numero"><?php echo e($letras[$i]); ?></div>
                        <?php endfor; ?>
                    </div>

                    <div class="tabla-hexagonos" style="grid-template-columns: repeat(<?php echo e($columnas); ?>, 1fr);">
                        <!-- Aquí puedes mostrar los hexágonos dinámicamente según tus datos -->
                        <?php if(empty($tumbas)): ?>
                            <p>No hay datos disponibles</p>
                        <?php else: ?>
                            <!-- Iterar sobre los datos de $tumbas -->
                            <?php $__currentLoopData = $tumbas; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $tumba): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <a
                                    wire:click="updateDetalleTumba(<?php echo e($tumba->id); ?>, <?php echo e($tumba->estado); ?>)"
                                    type="button"
                                    class="btn-datos-<?php echo e($tumba->estado); ?>"
                                    id="tumba-<?php echo e($tumba->letra); ?>-<?php echo e($tumba->numero); ?>"
                                    data-toggle="modal"
                                    data-target="#Tumba3"
                                    title= "<?php echo e($tumba->nombreDifunto); ?>"
                                >
                                    <img src="vendor/adminlte/dist/img/tumba<?php echo e($tumba->estado); ?>.png" alt="Hexagono">
                                </a>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br><br>
        <!-- <p>Titular: <?php echo e($datoTitular); ?></p>
        <p>TumbaId: <?php echo e($tumbaId); ?></p>
        <p>DNI: <?php echo e($datoDni); ?></p>
        <p>TumbaId: <?php echo e($montoTumba); ?></p>
        <p>TumbaId: <?php echo e($datoEstado); ?></p>
        <p>TumbaId: <?php echo e($nombrePabellon); ?></p> -->
        <?php echo $__env->make('livewire.pabellon.modal.detalleDatos', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
</div>
<?php /**PATH C:\xampp\htdocs\cementerioLivewire\resources\views/livewire/pabellon/pabellones.blade.php ENDPATH**/ ?>