@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="nichos-container">
        <div class="d-flex">
            <!-- Column for Row Labels -->
            <div class="row-labels d-flex flex-column justify-content-between">
                @foreach(['G','F', 'E', 'D', 'C', 'B', 'A'] as $rowLabel)
                    <div class="row-label">{{ $rowLabel }}</div>
                @endforeach
            </div>

            <!-- Nicho Buttons Grid -->
            <div class="nichos-grid">
                @php
                    $itemsPerRow = 42;
                    $rows = ['G','F', 'E', 'D', 'C', 'B', 'A'];
                    $rowIndex = 0;
                @endphp

                @foreach($nichos->chunk($itemsPerRow) as $chunk)
                    @php
                        $buttonIndex = 1;
                    @endphp
                    <div class="nicho-row mb-4">
                        @foreach($chunk as $nicho)
                            <div class="nicho-item mb-2">
                                @php
                                    $buttonClass = '';
                                    switch($nicho->estado_nicho) {
                                        case 'Ocupado':
                                            $buttonClass = 'btn-danger';
                                            $route = ''; // No se necesita ruta porque se muestra alerta
                                            break;
                                        case 'Reservado':
                                            $buttonClass = 'btn-warning';
                                            $route = route('nichos.create', ['id_nicho' => $nicho->id]);
                                            break;
                                        case 'Libre':
                                            $buttonClass = 'btn-success';
                                            $route = route('recibo.create', ['id_nicho' => $nicho->id]);
                                            break;
                                    }
                                @endphp
                                <a href="{{ $route }}"
                                    class="btn {{ $buttonClass }} w-100 open-modal nicho-button"
                                    type="button"
                                    data-estado="{{ $nicho->estado_nicho }}">
                                    <div class="button-number">{{ $buttonIndex }}</div>
                                    <i class="fas fa-cross fa-2x"></i>
                                </a>
                            </div>
                            @php
                                $buttonIndex++;
                            @endphp
                        @endforeach
                    </div>
                    @php
                        $rowIndex++;
                    @endphp
                @endforeach
            </div>
        </div>
    </div>
</div>


@stop

@section('css')
    <style>
        .custom-checkbox {
            transform: scale(1);
            margin-left: 150px;
            margin-right: 20px;
        }
        .form-check-input {
            width: 1.25em;
            height: 1.25em;
            margin-top: 0.25em;
            vertical-align: middle;
            background-color: #fff;
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            border: 1px solid rgba(0, 0, 0, 0.25);
            appearance: none;
            -webkit-print-color-adjust: exact;
            color-adjust: exact;
        }

        .form-check-input:checked {
            background-color: #007bff;
            border-color: #007bff;
        }

        .pabellon-item {
            flex: 1 0 calc(100% / 5); /* 5 pabellones por fila */
            max-width: calc(100% / 5);
            box-sizing: border-box;
            padding: 0.25rem;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .nicho-row {
            display: flex;
            font-weight: normal;
            margin-bottom: 5px;
            font-size: 5px;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .nicho-item {
            flex: 1 0 calc(100% / 42);
            max-width: calc(100% / 42);
            box-sizing: border-box;
            padding: 0.25rem;
            display: flex;
            justify-content: flex-end;
            margin-left: auto;
        }
        .nicho-item a {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            height: 50px;
            text-align: center;
            border: none;
            border-radius: 0.25rem;
            transition: background-color 0.3s;
            position: relative;
            padding-top: 15px;
            padding-bottom: 10px;
        }

        .nicho-item i {
            font-size: 1.2rem;
            margin-top: 0.5rem;
        }

        .button-number {
            position: absolute;
            top: 5px;
            font-size: 0.8rem;
            font-weight: bold;
        }

        .row-labels {
            margin-right: 10px;
        }

        .row-label {
            font-weight: bold;
            text-align: center;
            flex: 1;
            margin-top: 10px; /* Adjust this value to move the labels up or down */
            margin-bottom: 10px; /* Adjust this value to move the labels up or down */
        }

        @media (min-width: 992px) {
            .modal-dialog.modal-custom-width {
                max-width: 70%;
            }
        }

        form h5 {
            margin-top: 10px;
            margin-bottom: 10px;
            font-weight: bold;
        }

        .form-group {
            margin-bottom: 15px;
        }
    </style>
@stop

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

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

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


@stop