@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content_header')
    <h1></h1>
@stop

@section('content')
<div class="container-fluid">

    <div class="d-flex align-items-center justify-content-between mb-4">
    </div>

    <div id="cinerarios-container">
        <div class="d-flex">
            <!-- Nicho Buttons Grid -->
            <div class="cinerarios-grid">
                @php
                    $itemsPerRow = 15;
                    $buttonIndex = 1;  // Inicializar el índice del botón fuera del bucle
                @endphp

                @foreach($cinerarios->chunk($itemsPerRow) as $chunk)
                    <div class="cinerarios-row mb-4">
                        @foreach($chunk as $cinerario)
                            <div class="nicho-item mb-2">
                                @php
                                    $buttonClass = '';
                                    switch($cinerario->estado_cinerario) {
                                        case 'Ocupado':
                                            $buttonClass = 'btn-danger';
                                            $route = ''; // No se necesita ruta porque se muestra alerta
                                            break;
                                        case 'Reservado':
                                            $buttonClass = 'btn-warning';
                                            $route = route('cinerarios.create', ['id_cinerario' => $cinerario->id]);
                                            break;
                                        case 'Libre':
                                            $buttonClass = 'btn-success';
                                            $route = route('recibo_cinerario.create', ['id_cinerario' => $cinerario->id]);
                                            break;
                                        default:
                                            $buttonClass = 'btn-secondary'; // Por si hay un estado no reconocido
                                            break;
                                    }
                                @endphp
                               <a href="{{ $route }}"
                                   class="btn {{ $buttonClass }} w-100 open-modal nicho-button"
                                   type="button"
                                   data-estado="{{ $cinerario->estado_cinerario }}">
                                    <div class="button-number">{{ $buttonIndex }}</div>
                                    <i class="fas fa-church"></i> <!-- Ajustar el tamaño del ícono según sea necesario -->
                                </a>
                            </div>
                            @php
                                $buttonIndex++;  // Incrementar el índice del botón
                            @endphp
                        @endforeach
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div>

@stop

@section('css')
    <style>
        .nicho-item {
            flex: 1 0 calc(100% / 15); /* Ajustar según el número de columnas por fila */
            max-width: calc(100% / 15); /* Ajustar según el número de columnas por fila */
            box-sizing: border-box;
            padding: 0.5rem; /* Aumentar el espacio interior del botón */
            display: flex;
            justify-content: center; /* Centrar contenido horizontalmente */
            align-items: center; /* Centrar contenido verticalmente */
            margin-left: auto;
        }

        .nicho-item a {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 75px; /* Ajustar la altura del botón */
            text-align: center;
            border: none;
            border-radius: 0.5rem; /* Aumentar el radio de borde */
            transition: background-color 0.3s;
            position: relative;
        }

        .nicho-item i {
            font-size: 1.5rem; /* Ajustar el tamaño del ícono */
            margin-top: 0.5rem;
        }

        .button-number {
            font-size: 1rem; /* Ajustar el tamaño del número del botón */
            font-weight: bold;
        }

        .cinerarios-row {
            display: flex;
            flex-wrap: wrap; /* Ajustar según sea necesario */
            justify-content: space-between; /* Ajustar la alineación horizontal */
            margin-bottom: 10px; /* Ajustar el espaciado inferior */
        }
    </style>
@stop

@section('js')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Obtener todos los botones de cinerario
            const cinerarioButtons = document.querySelectorAll('.nicho-button');

            // Añadir evento de clic a cada botón
            cinerarioButtons.forEach(button => {
                button.addEventListener('click', function(event) {
                    // Obtener el estado del cinerario desde el atributo de datos
                    const estadoCinerario = this.getAttribute('data-estado');

                    // Verificar el estado del cinerario
                    if (estadoCinerario === 'Ocupado') {
                        // Mostrar mensaje de alerta para cinerario ocupado
                        Swal.fire({
                            icon: 'error',
                            title: 'Cinerario Ocupado',
                            text: 'Este cinerario ya está ocupado. Por favor, elija otro cinerario.',
                            confirmButtonText: 'OK'
                        });
                        event.preventDefault(); // Prevenir la acción por defecto del enlace
                    } else if (estadoCinerario === 'Reservado') {
                        // Dejar que el enlace funcione normalmente si el cinerario está reservado
                        window.location.href = this.getAttribute('href');
                    } else {
                        // Dejar que el enlace funcione normalmente si el cinerario está libre
                        window.location.href = this.getAttribute('href');
                    }
                });
            });
        });
    </script>
@stop