@extends('layouts.admin')

@section('title', 'Gestión de Reservas')
@section('page-title', 'Gestión de Reservas')

@section('content')
<div class="row mb-4">
    <!-- Filtros y búsqueda -->
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <form action="{{ route('admin.reservas.index') }}" method="GET" class="row g-3">
                    <div class="col-md-2">
                        <label class="form-label">Fecha Inicio</label>
                        <input type="date" class="form-control" name="fecha_inicio" value="{{ request('fecha_inicio', date('Y-m-d')) }}">
                    </div>
                    
                    <div class="col-md-2">
                        <label class="form-label">Fecha Fin</label>
                        <input type="date" class="form-control" name="fecha_fin" value="{{ request('fecha_fin', date('Y-m-d', strtotime('+7 days'))) }}">
                    </div>
                    
                    <div class="col-md-2">
                        <label class="form-label">Cancha</label>
                        <select class="form-select" name="cancha_id">
                            <option value="">Todas las canchas</option>
                            @foreach($canchas as $cancha)
                                <option value="{{ $cancha->id }}" {{ request('cancha_id') == $cancha->id ? 'selected' : '' }}>
                                    {{ $cancha->nombre }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    
                    <div class="col-md-2">
                        <label class="form-label">Estado</label>
                        <select class="form-select" name="estado">
                            <option value="">Todos los estados</option>
                            <option value="pendiente" {{ request('estado') == 'pendiente' ? 'selected' : '' }}>Pendiente</option>
                            <option value="confirmada" {{ request('estado') == 'confirmada' ? 'selected' : '' }}>Confirmada</option>
                            <option value="completada" {{ request('estado') == 'completada' ? 'selected' : '' }}>Completada</option>
                            <option value="cancelada" {{ request('estado') == 'cancelada' ? 'selected' : '' }}>Cancelada</option>
                        </select>
                    </div>
                    
                    <div class="col-md-2">
                        <label class="form-label">Cliente</label>
                        <input type="text" class="form-control" name="cliente" placeholder="Nombre o email" value="{{ request('cliente') }}">
                    </div>
                    
                    <div class="col-md-2 d-flex align-items-end">
                        <button type="submit" class="btn btn-primary w-100">
                            <i class="fas fa-filter me-2"></i>Filtrar
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h6 class="mb-0">Lista de Reservas</h6>
                <div>
                    <a href="{{ route('admin.reservas.exportar', request()->all()) }}" class="btn btn-sm btn-outline-primary me-2">
                        <i class="fas fa-download me-1"></i>Exportar CSV
                    </a>
                    <a href="{{ route('admin.reservas.create') }}" class="btn btn-sm btn-primary">
                        <i class="fas fa-plus me-1"></i>Nueva Reserva
                    </a>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover" id="tablaReservas">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Cliente</th>
                                <th>Cancha</th>
                                <th>Fecha</th>
                                <th>Horario</th>
                                <th>Precio</th>
                                <th>Estado</th>
                                <th>Pago</th>
                                <th>Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($reservas as $reserva)
                                <tr>
                                    <td>{{ $reserva->id }}</td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="avatar-sm me-2">
                                                @if($reserva->usuario->avatar)
                                                    <img src="{{ asset('storage/' . $reserva->usuario->avatar) }}" alt="{{ $reserva->usuario->name }}" class="rounded-circle user-avatar" style="object-fit: cover;">
                                                @else
                                                    <div class="avatar-circle bg-primary text-white d-flex align-items-center justify-content-center rounded-circle fw-bold" style="width: 40px; height: 40px; font-size: 1.2rem;">
                                                        {{ strtoupper(substr($reserva->usuario->name, 0, 1)) }}
                                                    </div>
                                                @endif
                                            </div>
                                            <div>
                                                <h6 class="mb-0 fw-medium">{{ $reserva->usuario->name }}</h6>
                                                <small class="text-muted">{{ $reserva->usuario->email }}</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="cancha-mini-icon me-2 
                                                @if($reserva->cancha->categoria->nombre == 'Fútbol 5' || $reserva->cancha->categoria->nombre == 'Fútbol 11') bg-success
                                                @elseif($reserva->cancha->categoria->nombre == 'Tenis') bg-warning
                                                @elseif($reserva->cancha->categoria->nombre == 'Básquet') bg-danger
                                                @else bg-info @endif">
                                            </div>
                                            <span>{{ $reserva->cancha->nombre }}</span>
                                        </div>
                                    </td>
                                    <td>{{ format_date_es($reserva->fecha) }}</td>
                        <td>{{ format_time_range_12h($reserva->hora_inicio, $reserva->hora_fin) }}</td>
                                    <td>{{ format_currency($reserva->precio_total, 2) }}</td>
                                    <td>
                                        @if($reserva->estado == 'pendiente')
                                            <span class="badge bg-warning">Pendiente</span>
                                        @elseif($reserva->estado == 'confirmada')
                                            <span class="badge bg-success">Confirmada</span>
                                        @elseif($reserva->estado == 'completada')
                                            <span class="badge bg-info">Completada</span>
                                        @else
                                            <span class="badge bg-secondary">Cancelada</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($reserva->pago && $reserva->pago->estado == 'completado')
                                            <span class="badge bg-success">Pagado</span>
                                        @elseif($reserva->pago && $reserva->pago->estado == 'pendiente')
                                            <span class="badge bg-warning">Pendiente</span>
                                        @elseif($reserva->pago && $reserva->pago->estado == 'rechazado')
                                            <span class="badge bg-danger">Rechazado</span>
                                        @else
                                            <span class="badge bg-secondary">Sin pago</span>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            <!-- Ver detalles -->
                                            <a href="{{ route('admin.reservas.show', $reserva->id) }}" 
                                               class="btn btn-sm btn-outline-info" 
                                               title="Ver Detalles">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            
                                            <!-- Editar -->
                                            <a href="{{ route('admin.reservas.edit', $reserva->id) }}" 
                                               class="btn btn-sm btn-outline-primary" 
                                               title="Editar">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            
                                            <!-- Acciones según estado -->
                                            @if($reserva->estado == 'pendiente')
                                                <form action="{{ route('admin.reservas.cambiarEstado', $reserva->id) }}" 
                                                      method="POST" class="d-inline">
                                                    @csrf
                                                    @method('PUT')
                                                    <input type="hidden" name="estado" value="confirmada">
                                                    <button type="submit" 
                                                            class="btn btn-sm btn-outline-success" 
                                                            title="Confirmar Reserva">
                                                        <i class="fas fa-check-circle"></i>
                                                    </button>
                                                </form>
                                            @endif
                                            
                                            @if($reserva->estado == 'confirmada')
                                                <form action="{{ route('admin.reservas.cambiarEstado', $reserva->id) }}" 
                                                      method="POST" class="d-inline">
                                                    @csrf
                                                    @method('PUT')
                                                    <input type="hidden" name="estado" value="completada">
                                                    <button type="submit" 
                                                            class="btn btn-sm btn-outline-info" 
                                                            title="Marcar como Completada">
                                                        <i class="fas fa-check-double"></i>
                                                    </button>
                                                </form>
                                            @endif
                                            
                                            @if($reserva->estado != 'cancelada' && $reserva->estado != 'completada')
                                                <form action="{{ route('admin.reservas.cambiarEstado', $reserva->id) }}" 
                                                      method="POST" class="d-inline">
                                                    @csrf
                                                    @method('PUT')
                                                    <input type="hidden" name="estado" value="cancelada">
                                                    <button type="submit" 
                                                            class="btn btn-sm btn-outline-warning" 
                                                            title="Cancelar Reserva">
                                                        <i class="fas fa-ban"></i>
                                                    </button>
                                                </form>
                                            @endif
                                            
                                            @if(!$reserva->pago || $reserva->pago->estado != 'completado')
                                                <form action="{{ route('admin.reservas.marcar-como-pagada', $reserva->id) }}" 
                                                      method="POST" class="d-inline">
                                                    @csrf
                                                    @method('PUT')
                                                    <button type="submit" 
                                                            class="btn btn-sm btn-outline-success" 
                                                            title="Marcar como Pagada">
                                                        <i class="fas fa-dollar-sign"></i>
                                                    </button>
                                                </form>
                                            @endif
                                            
                                            <!-- Eliminar -->
                                            <form action="{{ route('admin.reservas.destroy', $reserva->id) }}" 
                                                  method="POST" class="delete-form d-inline">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" 
                                                        class="btn btn-sm btn-outline-danger" 
                                                        title="Eliminar Reserva">
                                                    <i class="fas fa-trash-alt"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="9" class="text-center py-4">
                                        <i class="fas fa-calendar-alt text-muted mb-2" style="font-size: 2.5rem;"></i>
                                        <p class="mb-0 text-muted">No se encontraron reservas</p>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                
                <div class="d-flex justify-content-end mt-3">
                    {{ $reservas->links('pagination.custom') }}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Estadísticas rápidas -->
<div class="row">
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-left-primary h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                            Total Reservas (Periodo)</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $estadisticas['total'] }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-calendar fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-left-success h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                            Ingresos (Periodo)</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ format_currency($ingresos['mes_actual'], 2) }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-left-info h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                            Tasa de Ocupación</div>
                        <div class="row no-gutters align-items-center">
                            <div class="col-auto">
                                <div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">{{ $estadisticas['tasa_ocupacion'] }}%</div>
                            </div>
                            <div class="col">
                                <div class="progress progress-sm mr-2">
                                    <div class="progress-bar bg-info" role="progressbar" style="width: {{ $estadisticas['tasa_ocupacion'] }}%"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-clipboard-list fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-left-warning h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                            Reservas Pendientes</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $estadisticas['pendientes'] }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-clock fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Calendario de Reservas -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0">Calendario de Reservas</h6>
            </div>
            <div class="card-body">
                <div id="calendario"></div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.css">
<style>
.avatar-sm {
    width: 40px;
    height: 40px;
    overflow: hidden;
}

.avatar-sm img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
}

.user-avatar {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border: 2px solid #e3e6f0;
    transition: all 0.3s ease;
}

.user-avatar:hover {
    border-color: #4e73df;
    transform: scale(1.05);
}

.cancha-mini-icon {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.border-left-primary {
    border-left: 4px solid #4e73df;
}

.border-left-success {
    border-left: 4px solid #1cc88a;
}

.border-left-info {
    border-left: 4px solid #36b9cc;
}

.border-left-warning {
    border-left: 4px solid #f6c23e;
}

.fc-event {
    cursor: pointer;
}

.fc-event-title {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fc-day-today {
    background-color: rgba(78, 115, 223, 0.1) !important;
}
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/locales/es.js"></script>
<script>
$(document).ready(function() {
    // Inicializar DataTable
    $('#tablaReservas').DataTable({
        "paging": false,
        "info": false,
        "searching": false,
        "language": {
            "emptyTable": "No hay datos disponibles",
            "zeroRecords": "No se encontraron coincidencias"
        }
    });
    
    // Confirmación de eliminación
    $('.delete-form').on('submit', function(e) {
        e.preventDefault();
        
        const form = this;
        
        Swal.fire({
            title: '¿Estás seguro?',
            text: "Esta acción no se puede revertir",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Sí, eliminar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                form.submit();
            }
        });
    });
    
    // Inicializar calendario
    const calendarEl = document.getElementById('calendario');
    const calendar = new FullCalendar.Calendar(calendarEl, {
        locale: 'es',
        initialView: 'dayGridMonth',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        buttonText: {
            today: 'Hoy',
            month: 'Mes',
            week: 'Semana',
            day: 'Día'
        },
        events: @json($eventosCalendario),
        eventClick: function(info) {
            // Redirigir a la página de detalles de la reserva
            window.location.href = `/admin/reservas/${info.event.id}`;
        },
        eventDidMount: function(info) {
            // Añadir tooltip con información
            $(info.el).tooltip({
                title: info.event.extendedProps.descripcion,
                placement: 'top',
                trigger: 'hover',
                container: 'body'
            });
        }
    });
    
    calendar.render();
});
</script>
@endpush