<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>                                    
                        <x-adminlte-select wire:change="selectPabellon" wire:model="pabellonId" name="pabellonId">
                            <option value="">-- Seleccione --</option>
                            @foreach ($pabellones as $pabellon)
                                <option value="{{ $pabellon->id }}">{{ $pabellon->nombre }}</option>
                            @endforeach
                        </x-adminlte-select>
                    </div>
                </div>
            </div>
        </div>
    </div>

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

                    <div class="tabla-hexagonos" style="grid-template-columns: repeat({{$columnas}}, 1fr);">
                        <!-- Aquí puedes mostrar los hexágonos dinámicamente según tus datos -->
                        @empty($tumbas)
                            <p>No hay datos disponibles</p>
                        @else
                            <!-- Iterar sobre los datos de $tumbas -->
                            @foreach ($tumbas as $tumba)
                                <a
                                    wire:click="updateDetalleTumba({{$tumba->id}}, {{$tumba->estado}})"
                                    type="button"
                                    class="btn-datos-{{ $tumba->estado }}"
                                    id="tumba-{{ $tumba->letra }}-{{ $tumba->numero }}"
                                    data-toggle="modal"
                                    data-target="#Tumba3"
                                    title= "{{ $tumba->nombreDifunto}}"
                                >
                                    <img src="vendor/adminlte/dist/img/tumba{{ $tumba->estado }}.png" alt="Hexagono">
                                </a>
                            @endforeach
                        @endempty
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br><br>
        <!-- <p>Titular: {{ $datoTitular }}</p>
        <p>TumbaId: {{ $tumbaId }}</p>
        <p>DNI: {{ $datoDni }}</p>
        <p>TumbaId: {{ $montoTumba }}</p>
        <p>TumbaId: {{ $datoEstado }}</p>
        <p>TumbaId: {{ $nombrePabellon }}</p> -->
        @include('livewire.pabellon.modal.detalleDatos')
</div>
