@extends('layouts.admin')

@section('title')
    @lang('translation.Detalles de Cancha')
@endsection

@section('css')
    <!-- Magnific Popup -->
    <link href="{{ URL::asset('build/libs/magnific-popup/magnific-popup.css') }}" rel="stylesheet" type="text/css" />
    <!-- Chart.js -->
    <link href="{{ URL::asset('build/libs/chart.js/Chart.min.css') }}" rel="stylesheet" type="text/css" />
    <style>
        .bg-light-success {
            background-color: rgba(40, 167, 69, 0.1) !important;
            border: 1px solid rgba(40, 167, 69, 0.2);
        }
        .bg-light-danger {
            background-color: rgba(220, 53, 69, 0.1) !important;
            border: 1px solid rgba(220, 53, 69, 0.2);
        }
        
        /* Estilos para la galería de imágenes */
        .gallery-container {
            position: relative;
        }
        
        .main-image-container {
            position: relative;
            overflow: hidden;
            border-radius: 8px;
        }
        
        .main-image {
            transition: transform 0.3s ease;
            cursor: pointer;
        }
        
        .image-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .main-image-container:hover .image-overlay,
        .gallery-item:hover .thumbnail-overlay {
            opacity: 1;
        }
        
        .main-image-container:hover .main-image,
        .gallery-item:hover .gallery-thumbnail {
            transform: scale(1.05);
        }
        
        .gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 6px;
        }
        
        .gallery-thumbnail {
            transition: transform 0.3s ease;
            cursor: pointer;
        }
        
        .thumbnail-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        /* Estilos para el modal */
        .modal-thumbnail {
            width: 60px;
            height: 60px;
            object-fit: cover;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }
        
        .modal-thumbnail:hover {
            transform: scale(1.1);
            border-color: #007bff;
        }
        
        .modal-thumbnail.active {
            border-color: #007bff;
            box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
        }
        
        #modalImage {
            max-width: 100%;
            max-height: 70vh;
            object-fit: contain;
        }
        
        /* Botones de navegación del modal */
        #prevImageBtn, #nextImageBtn {
            border-radius: 50%;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
        
        #prevImageBtn:hover, #nextImageBtn:hover {
            opacity: 1 !important;
            transform: scale(1.1);
        }
    </style>
@endsection

@section('content')
    @component('components.breadcrumb')
        @slot('li_1')
            <a href="{{ route('admin.canchas.index') }}">Canchas</a>
        @endslot
        @slot('title')
            {{ $cancha->nombre }}
        @endslot
    @endcomponent

    <div class="row">
        <!-- Información principal -->
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <div class="row align-items-center">
                        <div class="col">
                            <h4 class="card-title mb-0">{{ $cancha->nombre }}</h4>
                            @if($cancha->categoria)
                                <span class="badge" style="background-color: {{ $cancha->categoria->color ?? '#6c757d' }}">
                                    {{ $cancha->categoria->nombre }}
                                </span>
                            @else
                                <span class="badge bg-secondary">Sin categoría</span>
                            @endif
                        </div>
                        <div class="col-auto">
                            <div class="dropdown">
                                <button class="btn btn-primary dropdown-toggle" type="button" 
                                        data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="bx bx-cog me-1"></i> Acciones
                                </button>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a class="dropdown-item" href="{{ route('admin.canchas.edit', $cancha) }}">
                                            <i class="bx bx-edit me-2"></i> Editar
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="{{ route('admin.canchas.horarios', $cancha) }}">
                                            <i class="bx bx-time me-2"></i> Gestionar Horarios
                                        </a>
                                    </li>
                                    <li>
                                        <button class="dropdown-item" onclick="cambiarEstado('{{ $cancha->estado }}')">
                                            <i class="bx bx-refresh me-2"></i> Cambiar Estado
                                        </button>
                                    </li>
                                    <li><hr class="dropdown-divider"></li>
                                    <li>
                                        <button class="dropdown-item text-danger" 
                                                onclick="confirmarEliminacion()">
                                            <i class="bx bx-trash me-2"></i> Eliminar
                                        </button>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <!-- Estado y información básica -->
                    <div class="row mb-4">
                        <div class="col-md-3">
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                    @switch($cancha->estado)
                                        @case('activa')
                                            <div class="avatar-sm bg-success rounded-circle d-flex align-items-center justify-content-center">
                                                <i class="bx bx-check text-white"></i>
                                            </div>
                                            @break
                                        @case('inactiva')
                                            <div class="avatar-sm bg-danger rounded-circle d-flex align-items-center justify-content-center">
                                                <i class="bx bx-x text-white"></i>
                                            </div>
                                            @break
                                        @case('mantenimiento')
                                            <div class="avatar-sm bg-warning rounded-circle d-flex align-items-center justify-content-center">
                                                <i class="bx bx-wrench text-white"></i>
                                            </div>
                                            @break
                                    @endswitch
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <h6 class="mb-1">Estado</h6>
                                    <p class="text-muted mb-0">{{ ucfirst($cancha->estado) }}</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                    <div class="avatar-sm bg-primary rounded-circle d-flex align-items-center justify-content-center">
                                        <i class="bx bx-group text-white"></i>
                                    </div>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <h6 class="mb-1">Capacidad</h6>
                                    <p class="text-muted mb-0">{{ $cancha->capacidad }} personas</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                    <div class="avatar-sm bg-success rounded-circle d-flex align-items-center justify-content-center">
                                        <i class="bx bx-dollar text-white"></i>
                                    </div>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <h6 class="mb-1">Precio/Hora</h6>
                                    <p class="text-muted mb-0">{{ format_currency($cancha->precio_por_hora, 0) }}</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                    <div class="avatar-sm bg-info rounded-circle d-flex align-items-center justify-content-center">
                                        <i class="bx bx-calendar text-white"></i>
                                    </div>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <h6 class="mb-1">Creada</h6>
                                    <p class="text-muted mb-0">{{ $cancha->created_at->format('d/m/Y') }}</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Descripción -->
                    @if($cancha->descripcion)
                        <div class="mb-4">
                            <h6>Descripción</h6>
                            <p class="text-muted">{{ $cancha->descripcion }}</p>
                        </div>
                    @endif

                    <!-- Ubicación y Mapa -->
                    <div class="mb-4">
                        <div class="card border-0 shadow-sm">
                            <div class="card-header bg-gradient-primary text-white">
                                <div class="d-flex align-items-center">
                                    <div class="avatar-sm bg-white bg-opacity-20 rounded me-3">
                                        <i class="ri-map-pin-line fs-16 text-white"></i>
                                    </div>
                                    <div>
                                        <h6 class="mb-0 text-white">Ubicación</h6>
                                        <small class="text-white-50">{{ $cancha->direccion }}</small>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body p-0 position-relative">
                                <div id="map" style="height: 350px; width: 100%; border-radius: 0 0 0.375rem 0.375rem;"></div>
                                
                                <!-- Overlay con información -->
                                <div class="position-absolute top-0 end-0 m-3">
                                    <div class="bg-white rounded shadow-sm p-2" style="backdrop-filter: blur(10px); background-color: rgba(255, 255, 255, 0.95);">
                                        <div class="d-flex gap-2">
                                            <button type="button" class="btn btn-sm btn-outline-primary" onclick="centerMap()" title="Centrar mapa">
                                                <i class="ri-focus-3-line"></i>
                                            </button>
                                            <button type="button" class="btn btn-sm btn-outline-success" onclick="getDirections()" title="Cómo llegar">
                                                <i class="ri-direction-line"></i>
                                            </button>
                                            <a href="https://maps.google.com/?q={{ urlencode($cancha->direccion) }}" 
                                               target="_blank" class="btn btn-sm btn-outline-info" title="Abrir en Google Maps">
                                                <i class="ri-external-link-line"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Información adicional en la parte inferior -->
                                <div class="position-absolute bottom-0 start-0 end-0 bg-gradient-dark text-white p-3" 
                                     style="background: linear-gradient(transparent, rgba(0,0,0,0.7)); border-radius: 0 0 0.375rem 0.375rem;">
                                    <div class="row align-items-center">
                                        <div class="col">
                                            <div class="d-flex align-items-center">
                                                <i class="ri-map-pin-fill text-danger me-2 fs-18"></i>
                                                <div>
                                                    <div class="fw-medium">{{ $cancha->nombre }}</div>
                                                    <small class="text-white-50">{{ $cancha->direccion }}</small>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-auto">
                                            @if($cancha->telefono)
                                                <a href="tel:{{ $cancha->telefono }}" class="btn btn-sm btn-light me-2">
                                                    <i class="ri-phone-line me-1"></i> Llamar
                                                </a>
                                            @endif
                                            <button type="button" class="btn btn-sm btn-primary" onclick="shareLocation()">
                                                <i class="ri-share-line me-1"></i> Compartir
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Características -->
                    @if($cancha->caracteristicas && is_array($cancha->caracteristicas) && count($cancha->caracteristicas) > 0)
                        <div class="mb-4">
                            <h6>Características</h6>
                            <div class="row">
                                @foreach($cancha->caracteristicas as $caracteristica)
                                    <div class="col-md-4 mb-2">
                                        <span class="badge bg-light text-dark">
                                            <i class="bx bx-check-circle text-success me-1"></i>
                                            {{ ucfirst($caracteristica) }}
                                        </span>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif

                    <!-- Propietario -->
                    <div class="mb-4">
                        <h6>Propietario</h6>
                        <div class="d-flex align-items-center">
                            <div class="flex-shrink-0">
                                @if($cancha->propietario->avatar)
                                    <img src="{{ Storage::url($cancha->propietario->avatar) }}" 
                                         class="rounded-circle" width="40" height="40">
                                @else
                                    <div class="avatar-sm bg-primary rounded-circle d-flex align-items-center justify-content-center">
                                        <span class="text-white">{{ substr($cancha->propietario->name, 0, 1) }}</span>
                                    </div>
                                @endif
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <h6 class="mb-1">{{ $cancha->propietario->name }}</h6>
                                <p class="text-muted mb-0">{{ $cancha->propietario->email }}</p>
                                @if($cancha->propietario->telefono)
                                    <p class="text-muted mb-0">{{ $cancha->propietario->telefono }}</p>
                                @endif
                            </div>
                            <div class="flex-shrink-0">
                                <a href="{{ route('admin.usuarios.show', $cancha->propietario) }}" 
                                   class="btn btn-outline-primary btn-sm">
                                    <i class="bx bx-user me-1"></i> Ver Perfil
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Galería de Imágenes -->
            <div class="card shadow-sm border-0">
                <div class="card-header bg-gradient-primary text-white d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-images me-2"></i>Galería de Imágenes
                    </h5>
                    <a href="{{ route('admin.canchas.edit', $cancha) }}" class="btn btn-light btn-sm">
                        <i class="fas fa-edit me-1"></i>Gestionar Imágenes
                    </a>
                </div>
                <div class="card-body p-0">
                    @if($cancha->imagen_principal || ($cancha->galeria_imagenes_urls && count($cancha->galeria_imagenes_urls) > 0))
                        <div class="gallery-container">
                            <!-- Imagen Principal -->
                            @if($cancha->imagen_principal)
                                <div class="main-image-container position-relative mb-3">
                                    <a href="{{ $cancha->imagen_principal_url }}" 
                                       class="image-popup-link imagen-principal" 
                                       title="Imagen Principal de {{ $cancha->nombre }}">
                                        <img src="{{ $cancha->imagen_principal_url }}"
                                             alt="Imagen principal"
                                             class="main-image img-fluid w-100"
                                             style="height: 400px; object-fit: cover; cursor: pointer;">
                                        <div class="image-overlay">
                                            <i class="fas fa-search-plus text-white"></i>
                                        </div>
                                    </a>
                                    <span class="badge bg-primary position-absolute top-0 start-0 m-3 px-3 py-2">
                                        <i class="fas fa-star me-1"></i>Principal
                                    </span>
                                </div>
                            @endif

                            <!-- Galería de Imágenes Adicionales -->
                            @if($cancha->galeria_imagenes_urls && count($cancha->galeria_imagenes_urls) > 0)
                                <div class="p-3">
                                    <h6 class="text-muted mb-3">
                                        <i class="fas fa-th me-2"></i>Imágenes Adicionales ({{ count($cancha->galeria_imagenes_urls) }})
                                    </h6>
                                    <div class="row g-2">
                                        @foreach($cancha->galeria_imagenes_urls as $index => $imagen_url)
                                            <div class="col-md-3 col-sm-4 col-6">
                                                <div class="gallery-item position-relative">
                                                    <a href="{{ $imagen_url }}" 
                                                       class="image-popup-link" 
                                                       title="Imagen {{ $index + 1 }} de {{ $cancha->nombre }}">
                                                        <img src="{{ $imagen_url }}"
                                                             alt="Imagen {{ $index + 1 }}"
                                                             class="gallery-thumbnail img-fluid w-100 rounded"
                                                             style="height: 120px; object-fit: cover; cursor: pointer;">
                                                        <div class="thumbnail-overlay">
                                                            <i class="fas fa-expand text-white"></i>
                                                        </div>
                                                    </a>
                                                    <!-- Botón de eliminar imagen -->
                                                    <button type="button" 
                                                            class="btn btn-danger btn-sm delete-gallery-image-btn position-absolute top-0 end-0 m-1"
                                                            data-image-url="{{ $imagen_url }}"
                                                            data-image-index="{{ $index }}"
                                                            title="Eliminar imagen">
                                                        <i class="bx bx-trash" style="font-size: 14px;"></i>
                                                    </button>
                                                    <span class="badge bg-dark position-absolute bottom-0 end-0 m-2 small">
                                                        {{ $index + 1 }}
                                                    </span>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @endif
                        </div>
                    @else
                        <div class="text-center py-5">
                            <div class="empty-gallery-icon mb-3">
                                <i class="fas fa-camera text-muted" style="font-size: 4rem; opacity: 0.3;"></i>
                            </div>
                            <h6 class="text-muted">No hay imágenes disponibles</h6>
                            <p class="text-muted small mb-4">Agrega imágenes para mostrar tu cancha a los usuarios</p>
                            <a href="{{ route('admin.canchas.edit', $cancha) }}" class="btn btn-primary btn-lg">
                                <i class="fas fa-plus me-2"></i>Agregar Imágenes
                            </a>
                        </div>
                    @endif
                </div>
            </div>

            <style>
                .gallery-container {
                    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
                }
                
                .main-image {
                    border-radius: 0;
                    transition: transform 0.3s ease;
                }
                
                .main-image-container:hover .main-image {
                    transform: scale(1.02);
                }
                
                .image-overlay, .thumbnail-overlay {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background: rgba(0, 0, 0, 0.5);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    opacity: 0;
                    transition: opacity 0.3s ease;
                    border-radius: inherit;
                }
                
                .main-image-container:hover .image-overlay,
                .gallery-item:hover .thumbnail-overlay {
                    opacity: 1;
                }
                
                .gallery-thumbnail {
                    transition: transform 0.3s ease, box-shadow 0.3s ease;
                    border: 2px solid transparent;
                }
                
                .gallery-item:hover .gallery-thumbnail {
                    transform: translateY(-2px);
                    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
                    border-color: #007bff;
                }
                
                /* Estilos para el botón de eliminar imagen de galería */
                .delete-gallery-image-btn {
                    width: 28px;
                    height: 28px;
                    padding: 0;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    opacity: 0;
                    transition: all 0.3s ease;
                    z-index: 10;
                    border: 2px solid white;
                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
                }
                
                .gallery-item:hover .delete-gallery-image-btn {
                    opacity: 1;
                }
                
                .delete-gallery-image-btn:hover {
                    transform: scale(1.1);
                    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
                }
                
                .bg-gradient-primary {
                    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
                }
                
                .empty-gallery-icon {
                    animation: pulse 2s infinite;
                }
                
                @keyframes pulse {
                    0% { transform: scale(1); }
                    50% { transform: scale(1.05); }
                    100% { transform: scale(1); }
                }
            </style>
        </div>

        <!-- Estadísticas y información adicional -->
        <div class="col-lg-4">
            <!-- Estadísticas rápidas -->
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Estadísticas</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-6">
                            <div class="text-center">
                                <h4 class="text-primary mb-1">{{ $estadisticas['total_reservas'] ?? 0 }}</h4>
                                <p class="text-muted mb-0 small">Total Reservas</p>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="text-center">
                                <h4 class="text-success mb-1">{{ $estadisticas['reservas_mes'] ?? 0 }}</h4>
                                <p class="text-muted mb-0 small">Este Mes</p>
                            </div>
                        </div>
                        <div class="col-6 mt-3">
                            <div class="text-center">
                                <h4 class="text-info mb-1">{{ format_currency($estadisticas['ingresos_total'] ?? 0, 0) }}</h4>
                                <p class="text-muted mb-0 small">Ingresos Total</p>
                            </div>
                        </div>
                        <div class="col-6 mt-3">
                            <div class="text-center">
                                <h4 class="text-warning mb-1">{{ number_format($estadisticas['ocupacion_promedio'] ?? 0, 1) }}%</h4>
                                <p class="text-muted mb-0 small">Ocupación</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Disponibilidad Hoy -->
            <div class="card shadow-sm border-0">
                <div class="card-header bg-gradient-success text-white">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-calendar-check me-2"></i>Disponibilidad Hoy
                        </h5>
                        <div class="availability-date">
                            <i class="fas fa-calendar-day me-1"></i>
                            {{ \Carbon\Carbon::now()->format('d/m/Y') }}
                        </div>
                    </div>
                </div>
                <div class="card-body p-0">
                    @if(isset($disponibilidad_hoy) && count($disponibilidad_hoy) > 0)
                        <div class="availability-container p-4">
                            <!-- Leyenda -->
                            <div class="availability-legend mb-4">
                                <div class="row text-center">
                                    <div class="col-6">
                                        <div class="legend-item">
                                            <div class="legend-color bg-success"></div>
                                            <span class="legend-text">Disponible</span>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="legend-item">
                                            <div class="legend-color bg-danger"></div>
                                            <span class="legend-text">Ocupado</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Slots de Horarios -->
                            <div class="availability-grid">
                                @foreach($disponibilidad_hoy as $index => $slot)
                                    <div class="availability-slot {{ $slot['disponible'] ? 'available' : 'occupied' }}" 
                                         data-bs-toggle="tooltip" 
                                         data-bs-placement="top" 
                                         title="{{ $slot['disponible'] ? 'Horario disponible para reservar' : 'Horario ya reservado' }}">
                                        <div class="slot-time">
                                            <i class="fas fa-clock me-1"></i>
                                            {{ $slot['hora'] }} - {{ $slot['hora_fin'] }}
                                        </div>
                                        <div class="slot-status">
                                            @if($slot['disponible'])
                                                <i class="fas fa-check-circle text-success"></i>
                                                <span class="status-text">Libre</span>
                                            @else
                                                <i class="fas fa-times-circle text-danger"></i>
                                                <span class="status-text">Reservado</span>
                                            @endif
                                        </div>
                                        <div class="slot-indicator"></div>
                                    </div>
                                @endforeach
                            </div>

                            <!-- Estadísticas -->
                            <div class="availability-stats mt-4">
                                <div class="row text-center">
                                    <div class="col-4">
                                        <div class="stat-item">
                                            <div class="stat-number text-primary">{{ count($disponibilidad_hoy) }}</div>
                                            <div class="stat-label">Total Slots</div>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="stat-item">
                                            <div class="stat-number text-success">
                                                {{ collect($disponibilidad_hoy)->where('disponible', true)->count() }}
                                            </div>
                                            <div class="stat-label">Disponibles</div>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="stat-item">
                                            <div class="stat-number text-danger">
                                                {{ collect($disponibilidad_hoy)->where('disponible', false)->count() }}
                                            </div>
                                            <div class="stat-label">Ocupados</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @else
                        <div class="text-center py-5">
                            <div class="empty-schedule-icon mb-3">
                                <i class="fas fa-calendar-times text-muted" style="font-size: 4rem; opacity: 0.3;"></i>
                            </div>
                            <h6 class="text-muted">No hay horarios configurados</h6>
                            <p class="text-muted small mb-4">Configura los horarios de disponibilidad para esta cancha</p>
                            <a href="{{ route('admin.canchas.horarios', $cancha) }}" class="btn btn-primary btn-lg">
                                <i class="fas fa-clock me-2"></i>Configurar Horarios
                            </a>
                        </div>
                    @endif
                </div>
            </div>

            <style>
                .bg-gradient-success {
                    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
                }
                
                .availability-container {
                    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
                    border-radius: 10px;
                    margin: 0;
                }
                
                .availability-legend {
                    border-bottom: 1px solid #dee2e6;
                    padding-bottom: 1rem;
                }
                
                .legend-item {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 0.5rem;
                }
                
                .legend-color {
                    width: 16px;
                    height: 16px;
                    border-radius: 50%;
                    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                }
                
                .legend-text {
                    font-size: 0.9rem;
                    font-weight: 500;
                    color: #6c757d;
                }
                
                .availability-grid {
                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                    gap: 1rem;
                    margin-bottom: 2rem;
                }
                
                .availability-slot {
                    background: white;
                    border-radius: 12px;
                    padding: 1.5rem 1rem;
                    text-align: center;
                    transition: all 0.3s ease;
                    border: 2px solid transparent;
                    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
                    position: relative;
                    overflow: hidden;
                    cursor: pointer;
                }
                
                .availability-slot:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
                }
                
                .availability-slot.available {
                    border-color: #28a745;
                }
                
                .availability-slot.available:hover {
                    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
                }
                
                .availability-slot.occupied {
                    border-color: #dc3545;
                }
                
                .availability-slot.occupied:hover {
                    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
                }
                
                .slot-time {
                    font-size: 1.1rem;
                    font-weight: 600;
                    color: #495057;
                    margin-bottom: 0.5rem;
                }
                
                .slot-status {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 0.5rem;
                    font-size: 0.9rem;
                    font-weight: 500;
                }
                
                .slot-indicator {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    height: 4px;
                    background: linear-gradient(90deg, transparent 0%, currentColor 50%, transparent 100%);
                }
                
                .availability-slot.available .slot-indicator {
                    color: #28a745;
                }
                
                .availability-slot.occupied .slot-indicator {
                    color: #dc3545;
                }
                
                .availability-stats {
                    border-top: 1px solid #dee2e6;
                    padding-top: 1.5rem;
                }
                
                .stat-item {
                    padding: 0.5rem;
                }
                
                .stat-number {
                    font-size: 2rem;
                    font-weight: 700;
                    line-height: 1;
                }
                
                .stat-label {
                    font-size: 0.85rem;
                    color: #6c757d;
                    font-weight: 500;
                    text-transform: uppercase;
                    letter-spacing: 0.5px;
                }
                
                .availability-date {
                    font-size: 0.9rem;
                    opacity: 0.9;
                }
                
                .empty-schedule-icon {
                    animation: pulse 2s infinite;
                }
                
                @media (max-width: 768px) {
                    .availability-grid {
                        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
                        gap: 0.75rem;
                    }
                    
                    .availability-slot {
                        padding: 1rem 0.75rem;
                    }
                    
                    .slot-time {
                        font-size: 1rem;
                    }
                    
                    .stat-number {
                        font-size: 1.5rem;
                    }
                }
            </style>

            <!-- Últimas reservas -->
            <div class="card">
                <div class="card-header">
                    <div class="row align-items-center">
                        <div class="col">
                            <h5 class="card-title mb-0">Últimas Reservas</h5>
                        </div>
                        <div class="col-auto">
                            <a href="{{ route('admin.reservas.index', ['cancha_id' => $cancha->id]) }}" 
                               class="btn btn-outline-primary btn-sm">
                                Ver Todas
                            </a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    @if(isset($ultimas_reservas) && count($ultimas_reservas) > 0)
                        @foreach($ultimas_reservas as $reserva)
                            <div class="d-flex align-items-center mb-3 p-3 border rounded">
                                <div class="flex-shrink-0">
                                    <div class="avatar-sm bg-{{ $reserva->estado == 'confirmada' ? 'success' : ($reserva->estado == 'pendiente' ? 'warning' : 'danger') }} rounded-circle d-flex align-items-center justify-content-center">
                                        <i class="ri-calendar-line text-white"></i>
                                    </div>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <h6 class="mb-1">{{ $reserva->usuario->name ?? 'Usuario no disponible' }}</h6>
                                    <p class="text-muted mb-1 small">
                                        <i class="ri-calendar-2-line me-1"></i>
                                        {{ \Carbon\Carbon::parse($reserva->fecha)->format('d/m/Y') }} - 
                                        {{ \Carbon\Carbon::parse($reserva->hora_inicio)->format('H:i') }} a 
                                        {{ \Carbon\Carbon::parse($reserva->hora_fin)->format('H:i') }}
                                    </p>
                                    <p class="text-muted mb-1 small">
                                        <i class="ri-money-dollar-circle-line me-1"></i>
                                        {{ format_currency($reserva->precio_total, 2) }}
                                    </p>
                                    <div class="d-flex align-items-center justify-content-between">
                                        <span class="badge bg-{{ $reserva->estado == 'confirmada' ? 'success' : ($reserva->estado == 'pendiente' ? 'warning' : 'danger') }}">
                                            {{ ucfirst($reserva->estado) }}
                                        </span>
                                        <small class="text-muted">
                                            {{ $reserva->created_at->diffForHumans() }}
                                        </small>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @else
                        <div class="text-center py-4">
                            <i class="ri-calendar-line text-muted" style="font-size: 3rem;"></i>
                            <p class="text-muted mt-2">No hay reservas recientes</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Modal cambiar estado -->
    <div class="modal fade" id="modalCambiarEstado" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Cambiar Estado de la Cancha</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form action="{{ route('admin.canchas.cambiar-estado', $cancha) }}" method="POST">
                    @csrf
                    @method('PATCH')
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="nuevo_estado" class="form-label">Nuevo Estado</label>
                            <select class="form-select" id="nuevo_estado" name="estado" required>
                                <option value="activa" {{ $cancha->estado == 'activa' ? 'selected' : '' }}>Activa</option>
                                <option value="inactiva" {{ $cancha->estado == 'inactiva' ? 'selected' : '' }}>Inactiva</option>
                                <option value="mantenimiento" {{ $cancha->estado == 'mantenimiento' ? 'selected' : '' }}>Mantenimiento</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="motivo" class="form-label">Motivo del cambio (opcional)</label>
                            <textarea class="form-control" id="motivo" name="motivo" rows="3" 
                                      placeholder="Explique el motivo del cambio de estado..."></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-primary">Cambiar Estado</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Modal de confirmación de eliminación -->
    <div class="modal fade" id="modalEliminar" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Confirmar Eliminación</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>¿Está seguro que desea eliminar la cancha <strong>{{ $cancha->nombre }}</strong>?</p>
                    <p class="text-muted small">Esta acción no se puede deshacer y eliminará todas las reservas asociadas.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <form action="{{ route('admin.canchas.destroy', $cancha) }}" method="POST" style="display: inline;">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger">Eliminar</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal para visualizar imágenes -->
    <div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="imageModalLabel">
                        <i class="fas fa-images me-2"></i>Galería de Imágenes
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <!-- Imagen principal del modal -->
                    <img id="modalImage" src="" alt="" class="img-fluid" style="max-height: 70vh; width: auto;">
                    
                    <!-- Título de la imagen -->
                    <h6 class="mt-3 mb-2" id="modalImageTitle">Imagen</h6>
                    
                    <!-- Indicador de imagen actual -->
                    <span class="badge bg-primary px-3 py-2" id="imageCounter">1 / 1</span>
                </div>
                <div class="modal-footer justify-content-between">
                    <!-- Botones de navegación -->
                    <button type="button" class="btn btn-secondary" id="prevImageBtn">
                        <i class="fas fa-chevron-left me-1"></i>Anterior
                    </button>
                    
                    <!-- Miniaturas para navegación rápida -->
                    <div class="d-flex justify-content-center flex-wrap gap-2" id="modalThumbnails">
                        <!-- Las miniaturas se generarán dinámicamente -->
                    </div>
                    
                    <button type="button" class="btn btn-secondary" id="nextImageBtn">
                        Siguiente<i class="fas fa-chevron-right ms-1"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
    <!-- Lightbox -->
    <script src="{{ URL::asset('build/libs/magnific-popup/jquery.magnific-popup.min.js') }}"></script>

    <!-- Google Maps -->
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC4HyU8sTd9d40XCMjxJJM2i8z9mRQ-xMQ&callback=initMap"></script>
    
    <script>
        // Variables globales para el mapa
        let map;
        let marker;
        let directionsService;
        let directionsRenderer;
        const canchaAddress = "{{ $cancha->direccion }}";
        const canchaLat = @json($cancha->latitud);
        const canchaLng = @json($cancha->longitud);
        const googleMapsUrl = "{{ $cancha->google_maps_url }}";

        function getQueryFromGoogleMapsUrl(url) {
            try {
                if (!url) return null;
                const u = new URL(url);
                const q = u.searchParams.get('query');
                return q || null;
            } catch (e) {
                return null;
            }
        }

        // LIGHTBOX CON BOTÓN DE ELIMINAR - VERSIÓN SIMPLIFICADA PARA PRUEBAS
        $(document).ready(function() {
            console.log('🖼️ Inicializando jQuery y event listeners...');
            console.log('📋 jQuery version:', $.fn.jquery);
            
            // Verificar que existen botones de eliminar
            const deleteButtons = $('.delete-gallery-image-btn');
            console.log('🔍 Botones de eliminar encontrados:', deleteButtons.length);
            
            // Mostrar información de cada botón
            deleteButtons.each(function(index) {
                console.log(`🔘 Botón ${index + 1}:`, {
                    element: this,
                    imageUrl: $(this).data('image-url'),
                    imageIndex: $(this).data('image-index'),
                    classes: this.className
                });
            });
            
            // Event delegation SIMPLIFICADO para pruebas
            $(document).on('click', '.delete-gallery-image-btn', function(e) {
                console.log('🎯 ¡CLICK DETECTADO! Event listener funcionando correctamente');
                e.preventDefault();
                e.stopPropagation();
                
                const $button = $(this);
                const imageUrl = $button.data('image-url');
                const imageIndex = $button.data('image-index');
                
                // PRUEBA BÁSICA: Solo mostrar alert
                alert('🎉 ¡Funciona! \n\nBotón clickeado:\n' + 
                      'Imagen: ' + imageIndex + '\n' + 
                      'URL: ' + imageUrl + '\n\n' +
                      '¿Deseas eliminar esta imagen?');
                
                console.log('📊 Datos del botón:', {
                    imageUrl: imageUrl,
                    imageIndex: imageIndex,
                    element: this
                });
                
                // TODO: Aquí irá la lógica AJAX una vez confirmado que funciona
                console.log('✅ Event listener funcionando correctamente. Listo para implementar AJAX.');
            });
            
            // Log de confirmación
            console.log('✅ Event delegation configurado correctamente');
            
            // Inicializar Magnific Popup para todas las imágenes
            $('.image-popup-link').magnificPopup({
                type: 'image',
                gallery: {
                    enabled: true,
                    navigateByImgClick: true,
                    preload: [0,1]
                },
                image: {
                    titleSrc: function(item) {
                        const title = item.el.attr('title') || 'Imagen';
                        const deleteBtn = '<button class="mfp-delete-btn" onclick="eliminarImagen(this)" data-image="' + item.el.attr('href') + '" data-tipo="' + (item.el.hasClass('imagen-principal') ? 'principal' : 'galeria') + '"><i class="bx bx-trash"></i> Eliminar</button>';
                        return title + deleteBtn;
                    },
                    verticalFit: true
                },
                zoom: {
                    enabled: true,
                    duration: 300
                },
                callbacks: {
                    open: function() {
                        console.log('✅ Lightbox abierto');
                        // Agregar estilos al botón de eliminar
                        $('<style>')
                            .prop('type', 'text/css')
                            .html(`
                                .mfp-delete-btn {
                                    position: absolute;
                                    top: 10px;
                                    right: 10px;
                                    background: rgba(220, 53, 69, 0.9);
                                    color: white;
                                    border: none;
                                    padding: 8px 12px;
                                    border-radius: 5px;
                                    cursor: pointer;
                                    font-size: 14px;
                                    z-index: 9999;
                                    transition: background 0.3s;
                                }
                                .mfp-delete-btn:hover {
                                    background: rgba(220, 53, 69, 1);
                                }
                                .mfp-title {
                                    position: relative;
                                }
                            `)
                            .appendTo('head');
                    },
                    close: function() {
                        console.log('✅ Lightbox cerrado');
                    }
                }
            });
            
            console.log('🎉 Lightbox configurado correctamente!');
        });

        // Función para eliminar imagen
        function eliminarImagen(btn) {
            const imageUrl = $(btn).data('image');
            const tipoImagen = $(btn).data('tipo');
            
            if (!confirm('¿Estás seguro de que quieres eliminar esta imagen?')) {
                return;
            }
            
            console.log('🗑️ Eliminando imagen:', imageUrl, 'Tipo:', tipoImagen);
            
            // Extraer el nombre del archivo de la URL
            const imagePath = imageUrl.replace('{{ asset("storage/") }}/', '');
            
            // Realizar petición AJAX
            $.ajax({
                url: '{{ route("admin.canchas.delete-foto", [$cancha->id, "FOTO_PLACEHOLDER"]) }}'.replace('FOTO_PLACEHOLDER', encodeURIComponent(imagePath)),
                method: 'DELETE',
                data: {
                    _token: '{{ csrf_token() }}',
                    tipo: tipoImagen
                },
                success: function(response) {
                    if (response.success) {
                        console.log('✅ Imagen eliminada exitosamente');
                        
                        // Cerrar lightbox
                        $.magnificPopup.close();
                        
                        // Mostrar mensaje de éxito
                        alert('Imagen eliminada exitosamente');
                        
                        // Recargar la página para actualizar la galería
                        window.location.reload();
                    } else {
                        alert('Error: ' + response.message);
                    }
                },
                error: function(xhr) {
                    console.error('❌ Error eliminando imagen:', xhr);
                    alert('Error al eliminar la imagen');
                }
            });
        }

        function initMap() {
            // Inicializar servicios de Google Maps
            directionsService = new google.maps.DirectionsService();
            directionsRenderer = new google.maps.DirectionsRenderer();
            
            // Si tenemos coordenadas, usar directamente; de lo contrario geocodificar la dirección
            const initializeMapWithLocation = (location) => {
                map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 15,
                    center: location,
                    mapTypeControl: true,
                    streetViewControl: true,
                    fullscreenControl: true
                });

                marker = new google.maps.Marker({
                    position: location,
                    map: map,
                    title: "{{ $cancha->nombre }}",
                    animation: google.maps.Animation.DROP
                });

                const infoWindow = new google.maps.InfoWindow({
                    content: `
                        <div style="max-width: 220px;">
                            <h6 class="mb-1">{{ $cancha->nombre }}</h6>
                            <p class="mb-1 small text-muted">{{ $cancha->direccion }}</p>
                            <p class="mb-1 small"><strong>Precio:</strong> {{ format_currency($cancha->precio_por_hora, 2) }}/hora</p>
                            ${googleMapsUrl ? `<p class="mb-0 small"><a href="${googleMapsUrl}" target="_blank">Ver en Google Maps</a></p>` : ''}
                        </div>
                    `
                });

                marker.addListener('click', function() {
                    infoWindow.open(map, marker);
                });

                directionsRenderer.setMap(map);
            };

            if (canchaLat !== null && canchaLng !== null) {
                const location = new google.maps.LatLng(canchaLat, canchaLng);
                initializeMapWithLocation(location);
            } else {
                const geocoder = new google.maps.Geocoder();
                const candidate = getQueryFromGoogleMapsUrl(googleMapsUrl) || canchaAddress;
                geocoder.geocode({ address: candidate }, function(results, status) {
                    if (status === 'OK') {
                        const location = results[0].geometry.location;
                        initializeMapWithLocation(location);
                    } else {
                        console.error('Geocoding failed: ' + status);
                        document.getElementById('map').innerHTML = 
                            '<div class="d-flex align-items-center justify-content-center h-100">' +
                            '<p class="text-muted">No se pudo cargar el mapa para esta dirección</p>' +
                            '</div>';
                    }
                });
            }
        }

        function getDirections() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    const userLocation = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    };

                    const destination = (canchaLat !== null && canchaLng !== null) 
                        ? new google.maps.LatLng(canchaLat, canchaLng) 
                        : (getQueryFromGoogleMapsUrl(googleMapsUrl) || canchaAddress);
                    const request = {
                        origin: userLocation,
                        destination: destination,
                        travelMode: google.maps.TravelMode.DRIVING
                    };

                    directionsService.route(request, function(result, status) {
                        if (status === 'OK') {
                            directionsRenderer.setDirections(result);
                            
                            // Mostrar información de la ruta
                            const route = result.routes[0];
                            const leg = route.legs[0];
                            
                            Swal.fire({
                                title: 'Ruta calculada',
                                html: `
                                    <div class="text-start">
                                        <p><strong>Distancia:</strong> ${leg.distance.text}</p>
                                        <p><strong>Tiempo estimado:</strong> ${leg.duration.text}</p>
                                        <p class="small text-muted">Las direcciones se muestran en el mapa</p>
                                    </div>
                                `,
                                icon: 'info',
                                confirmButtonText: 'Entendido'
                            });
                        } else {
                            Swal.fire({
                                title: 'Error',
                                text: 'No se pudo calcular la ruta. Intenta nuevamente.',
                                icon: 'error'
                            });
                        }
                    });
                }, function() {
                    Swal.fire({
                        title: 'Ubicación requerida',
                        text: 'Para calcular la ruta necesitamos acceso a tu ubicación.',
                        icon: 'warning'
                    });
                });
            } else {
                Swal.fire({
                    title: 'Geolocalización no soportada',
                    text: 'Tu navegador no soporta geolocalización.',
                    icon: 'error'
                });
            }
        }

        // Función para centrar el mapa
        function centerMap() {
            if (map && marker) {
                map.setCenter(marker.getPosition());
                map.setZoom(15);
                marker.setAnimation(google.maps.Animation.BOUNCE);
                setTimeout(() => {
                    marker.setAnimation(null);
                }, 2000);
            }
        }

        // Función para compartir ubicación
        function shareLocation() {
            const shareData = {
                title: '{{ $cancha->nombre }}',
                text: 'Ubicación de {{ $cancha->nombre }}',
                url: `https://maps.google.com/?q={{ urlencode($cancha->direccion) }}`
            };

            if (navigator.share) {
                navigator.share(shareData).catch(console.error);
            } else {
                // Fallback para navegadores que no soportan Web Share API
                navigator.clipboard.writeText(shareData.url).then(() => {
                    Swal.fire({
                        title: 'Enlace copiado',
                        text: 'El enlace de la ubicación se ha copiado al portapapeles',
                        icon: 'success',
                        timer: 2000,
                        showConfirmButton: false
                    });
                }).catch(() => {
                    Swal.fire({
                        title: 'Compartir ubicación',
                        html: `<input type="text" class="form-control" value="${shareData.url}" readonly onclick="this.select()">`,
                        text: 'Copia el enlace para compartir la ubicación',
                        icon: 'info'
                    });
                });
            }
        }

        // Variables globales para el modal de imágenes
        let currentImageIndex = 0;
        let allImages = [];
        
        // Recopilar todas las imágenes disponibles
        function collectAllImages() {
            allImages = [];
            
            // Agregar imagen principal si existe
            @if($cancha->imagen_principal)
            allImages.push({
                url: '{{ $cancha->imagen_principal_url }}',
                title: 'Imagen Principal'
            });
            @endif
            
            // Agregar imágenes de la galería
            @if($cancha->galeria_imagenes_urls && count($cancha->galeria_imagenes_urls) > 0)
            @foreach($cancha->galeria_imagenes_urls as $index => $imagen_url)
            allImages.push({
                url: '{{ $imagen_url }}',
                title: 'Imagen {{ $index + 1 }}'
            });
            @endforeach
            @endif
            
            console.log('Images collected:', allImages.length);
        }

        // Función para mostrar imagen en el modal
        function showImageInModal(imageUrl, imageTitle, imageIndex = 0) {
            currentImageIndex = imageIndex;
            
            $('#modalImage').attr('src', imageUrl);
            $('#modalImageTitle').text(imageTitle);
            $('#imageCounter').text(`${currentImageIndex + 1} de ${allImages.length}`);
            
            // Mostrar/ocultar botones de navegación
            $('#prevImageBtn').toggle(allImages.length > 1);
            $('#nextImageBtn').toggle(allImages.length > 1);
            
            // Actualizar miniaturas
            updateThumbnails();
            
            $('#imageModal').modal('show');
        }


        
        // Función para actualizar miniaturas
        function updateThumbnails() {
            const thumbnailsContainer = $('#modalThumbnails');
            thumbnailsContainer.empty();
            
            if (allImages.length > 1) {
                allImages.forEach((image, index) => {
                    const isActive = index === currentImageIndex ? 'active' : '';
                    const thumbnail = `
                        <img src="${image.url}" 
                             class="modal-thumbnail ${isActive}" 
                             data-index="${index}"
                             alt="${image.title}">
                    `;
                    thumbnailsContainer.append(thumbnail);
                });
            }
        }

        $(document).ready(function() {
            // Inicializar las imágenes al cargar la página
            collectAllImages();
            
            // Event listener para abrir modal - SIMPLIFICADO
            $('.image-modal-trigger').on('click', function(e) {
                e.preventDefault();
                
                const imageUrl = $(this).data('image');
                const imageTitle = $(this).data('title') || 'Imagen';
                
                console.log('Clicked image:', imageUrl);
                
                // Encontrar el índice de la imagen clickeada
                const imageIndex = allImages.findIndex(img => img.url === imageUrl);
                const finalIndex = imageIndex >= 0 ? imageIndex : 0;
                
                showImageInModal(imageUrl, imageTitle, finalIndex);
            });
            
            // Navegación anterior
            $('#prevImageBtn').on('click', function() {
                if (currentImageIndex > 0) {
                    currentImageIndex--;
                } else {
                    currentImageIndex = allImages.length - 1;
                }
                const image = allImages[currentImageIndex];
                showImageInModal(image.url, image.title, currentImageIndex);
            });
            
            // Navegación siguiente
            $('#nextImageBtn').on('click', function() {
                if (currentImageIndex < allImages.length - 1) {
                    currentImageIndex++;
                } else {
                    currentImageIndex = 0;
                }
                const image = allImages[currentImageIndex];
                showImageInModal(image.url, image.title, currentImageIndex);
            });
            
            // Click en miniatura
            $(document).on('click', '.modal-thumbnail', function() {
                const index = parseInt($(this).data('index'));
                const image = allImages[index];
                showImageInModal(image.url, image.title, index);
            });
            
            // Navegación con teclado
            $(document).keydown(function(e) {
                if ($('#imageModal').hasClass('show')) {
                    if (e.key === 'ArrowLeft') {
                        $('#prevImageBtn').click();
                    } else if (e.key === 'ArrowRight') {
                        $('#nextImageBtn').click();
                    } else if (e.key === 'Escape') {
                        $('#imageModal').modal('hide');
                    }
                }
            });

            // Inicializar tooltips para los slots de disponibilidad
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
            var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl);
            });
        });

        function cambiarEstado(estadoActual) {
            $('#modalCambiarEstado').modal('show');
        }

        function confirmarEliminacion() {
            $('#modalEliminar').modal('show');
        }

        // Mostrar mensajes de éxito/error
        @if(session('success'))
            Swal.fire({
                icon: 'success',
                title: '¡Éxito!',
                text: '{{ session('success') }}',
                timer: 3000,
                showConfirmButton: false
            });
        @endif

        @if(session('error'))
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: '{{ session('error') }}'
            });
        @endif
    </script>
@endsection