@extends('layouts.app')

@section('title', 'Mis Reservas')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h3 class="card-title">
                            <i class="fas fa-calendar-check"></i> Mis Reservas
                        </h3>
                        <a href="{{ route('usuario.reservas.create') }}" class="btn btn-primary">
                            <i class="fas fa-plus"></i> Nueva Reserva
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    @if($reservas->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>Cancha</th>
                                        <th>Fecha</th>
                                        <th>Horario</th>
                                        <th>Estado</th>
                                        <th>Total</th>
                                        <th>Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($reservas as $reserva)
                                        <tr>
                                            <td>
                                                <strong>{{ $reserva->cancha->nombre }}</strong><br>
                                                <small class="text-muted">{{ $reserva->cancha->ubicacion }}</small>
                                            </td>
                                            <td>
                                                {{ format_date_es($reserva->fecha) }}
                                            </td>
                                            <td>
                                                {{ format_time_range_12h($reserva->hora_inicio, $reserva->hora_fin) }}
                                            </td>
                                            <td>
                                                @switch($reserva->estado)
                                                    @case('pendiente')
                                                        <span class="badge badge-warning">Pendiente</span>
                                                        @break
                                                    @case('confirmada')
                                                        <span class="badge badge-success">Confirmada</span>
                                                        @break
                                                    @case('cancelada')
                                                        <span class="badge badge-danger">Cancelada</span>
                                                        @break
                                                    @case('completada')
                                                        <span class="badge badge-info">Completada</span>
                                                        @break
                                                    @default
                                                        <span class="badge badge-secondary">{{ ucfirst($reserva->estado) }}</span>
                                                @endswitch
                                            </td>
                                            <td>
                                                <strong>${{ number_format($reserva->total, 0, ',', '.') }}</strong>
                                            </td>
                                            <td>
                                                <div class="btn-group btn-group-sm">
                                                    @if($reserva->estado == 'pendiente' && \Carbon\Carbon::parse($reserva->fecha)->isFuture())
                                                        <button onclick="cancelarReserva({{ $reserva->id }})" 
                                                                class="btn btn-outline-danger" 
                                                                title="Cancelar reserva">
                                                            <i class="fas fa-times"></i>
                                                        </button>
                                                    @endif
                                                    
                                                    @if($reserva->observaciones)
                                                        <button onclick="verObservaciones('{{ addslashes($reserva->observaciones) }}')" 
                                                                class="btn btn-outline-info" 
                                                                title="Ver observaciones">
                                                            <i class="fas fa-comment"></i>
                                                        </button>
                                                    @endif
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        
                        <div class="d-flex justify-content-center">
                            {{ $reservas->links() }}
                        </div>
                    @else
                        <div class="text-center py-5">
                            <i class="fas fa-calendar-times fa-3x text-muted mb-3"></i>
                            <h4 class="text-muted">No tienes reservas</h4>
                            <p class="text-muted">Aún no has realizado ninguna reserva.</p>
                            <a href="{{ route('usuario.reservas.create') }}" class="btn btn-primary">
                                <i class="fas fa-plus"></i> Crear Primera Reserva
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal para observaciones -->
<div class="modal fade" id="observacionesModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Observaciones</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p id="observaciones-content"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

<script>
function verObservaciones(observaciones) {
    document.getElementById('observaciones-content').textContent = observaciones;
    $('#observacionesModal').modal('show');
}

function cancelarReserva(reservaId) {
    if (confirm('¿Estás seguro de que quieres cancelar esta reserva?')) {
        // Aquí podrías implementar la lógica para cancelar la reserva
        // Por ahora solo mostramos un mensaje
        alert('Funcionalidad de cancelación en desarrollo. Contacta al administrador para cancelar tu reserva.');
    }
}
</script>
@endsection