@extends('layouts.app')

@section('title', 'Dashboard Propietario')

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">Dashboard Propietario</h1>
        <div>
            <a href="{{ route('admin.canchas.create') }}" class="btn btn-primary btn-sm">
                <i class="fas fa-plus"></i> Nueva Cancha
            </a>
            <a href="{{ route('admin.eventos.create') }}" class="btn btn-success btn-sm">
                <i class="fas fa-calendar-plus"></i> Nuevo Evento
            </a>
        </div>
    </div>

    <!-- Estadísticas -->
    <div class="row">
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-primary shadow 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">
                                Mis Canchas
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $estadisticas['total_canchas'] }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-futbol 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 shadow 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">
                                Reservas Este Mes
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $estadisticas['reservas_mes'] }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-calendar-check 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 shadow 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">
                                Eventos Activos
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $estadisticas['eventos_activos'] }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-calendar-alt 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 shadow 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">
                                Ingresos Este Mes
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">${{ number_format($estadisticas['ingresos_mes'], 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>

    <div class="row">
        <!-- Mis Canchas -->
        <div class="col-lg-8">
            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">Mis Canchas</h6>
                    <a href="{{ route('admin.canchas.create') }}" class="btn btn-primary btn-sm">
                        <i class="fas fa-plus"></i> Agregar Cancha
                    </a>
                </div>
                <div class="card-body">
                    @if($misCanchas->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-bordered" width="100%" cellspacing="0">
                                <thead>
                                    <tr>
                                        <th>Nombre</th>
                                        <th>Tipo</th>
                                        <th>Estado</th>
                                        <th>Precio/Hora</th>
                                        <th>Reservas Hoy</th>
                                        <th>Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($misCanchas as $cancha)
                                        <tr>
                                            <td>{{ $cancha->nombre }}</td>
                                            <td>{{ $cancha->categoria->nombre }}</td>
                                            <td>
                                                <span class="badge badge-{{ $cancha->estado == 'activa' ? 'success' : 'warning' }}">
                                                    {{ ucfirst($cancha->estado) }}
                                                </span>
                                            </td>
                                            <td>${{ number_format($cancha->precio_por_hora, 2) }}</td>
                                            <td>{{ $cancha->reservas_hoy_count ?? 0 }}</td>
                                            <td>
                                                <a href="{{ route('admin.canchas.show', $cancha->id) }}" class="btn btn-info btn-sm">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                                <a href="{{ route('admin.canchas.edit', $cancha->id) }}" class="btn btn-warning btn-sm">
                                                    <i class="fas fa-edit"></i>
                                                </a>
                                                <button class="btn btn-success btn-sm" onclick="crearEvento({{ $cancha->id }})">
                                                    <i class="fas fa-calendar-plus"></i>
                                                </button>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="text-center py-4">
                            <i class="fas fa-futbol fa-3x text-muted mb-3"></i>
                            <p class="text-muted">No tienes canchas registradas aún.</p>
                            <a href="{{ route('admin.canchas.create') }}" class="btn btn-primary">
                                <i class="fas fa-plus"></i> Crear Primera Cancha
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Reservas Recientes -->
        <div class="col-lg-4">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Reservas Recientes</h6>
                </div>
                <div class="card-body">
                    @if($reservasRecientes->count() > 0)
                        @foreach($reservasRecientes as $reserva)
                            <div class="d-flex align-items-center border-bottom py-2">
                                <div class="flex-grow-1">
                                    <h6 class="mb-1">{{ $reserva->cancha->nombre }}</h6>
                                    <p class="mb-0 text-muted small">
                                        {{ $reserva->usuario->nombre }} - {{ format_date_es($reserva->fecha) }}
                                    </p>
                                    <p class="mb-0 text-muted small">
                                        {{ format_time_range_12h($reserva->hora_inicio, $reserva->hora_fin) }}
                                    </p>
                                </div>
                                <span class="badge badge-{{ $reserva->estado == 'confirmada' ? 'success' : ($reserva->estado == 'pendiente' ? 'warning' : 'danger') }}">
                                    {{ ucfirst($reserva->estado) }}
                                </span>
                            </div>
                        @endforeach
                    @else
                        <p class="text-muted mb-0">No hay reservas recientes</p>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Mis Eventos -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-success">Mis Eventos</h6>
                    <a href="{{ route('admin.eventos.create') }}" class="btn btn-success btn-sm">
                        <i class="fas fa-calendar-plus"></i> Crear Evento
                    </a>
                </div>
                <div class="card-body">
                    @if($misEventos->count() > 0)
                        <div class="row">
                            @foreach($misEventos as $evento)
                                <div class="col-md-4 mb-3">
                                    <div class="card border-left-success">
                                        <div class="card-body">
                                            <div class="d-flex justify-content-between align-items-start mb-2">
                                                <h6 class="card-title mb-0">{{ $evento->nombre }}</h6>
                                                <span class="badge badge-{{ $evento->estado == 'activo' ? 'success' : 'warning' }}">
                                                    {{ ucfirst($evento->estado) }}
                                                </span>
                                            </div>
                                            <p class="card-text small text-muted mb-1">
                                                <i class="fas fa-map-marker-alt"></i> {{ $evento->cancha->nombre }}
                                            </p>
                                            <p class="card-text small text-muted mb-1">
                                                <i class="fas fa-calendar"></i> {{ format_datetime_12h($evento->fecha_inicio) }}
                                            </p>
                                            <p class="card-text small text-muted mb-2">
                                                <i class="fas fa-users"></i> {{ $evento->participantes_count ?? 0 }}/{{ $evento->max_participantes ?? '∞' }} participantes
                                            </p>
                                            <div class="btn-group btn-group-sm w-100">
                                                <a href="{{ route('admin.eventos.show', $evento->id) }}" class="btn btn-info">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                                <a href="{{ route('admin.eventos.edit', $evento->id) }}" class="btn btn-warning">
                                                    <i class="fas fa-edit"></i>
                                                </a>
                                                <button class="btn btn-danger" onclick="eliminarEvento({{ $evento->id }})">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-4">
                            <i class="fas fa-calendar-times fa-3x text-muted mb-3"></i>
                            <p class="text-muted">No tienes eventos creados aún.</p>
                            <a href="{{ route('admin.eventos.create') }}" class="btn btn-success">
                                <i class="fas fa-calendar-plus"></i> Crear Primer Evento
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal para crear evento rápido -->
<div class="modal fade" id="crearEventoModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Crear Evento Rápido</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form id="crearEventoForm">
                <div class="modal-body">
                    <input type="hidden" id="cancha_id" name="cancha_id">
                    <div class="form-group">
                        <label>Nombre del Evento</label>
                        <input type="text" class="form-control" name="nombre" required>
                    </div>
                    <div class="form-group">
                        <label>Fecha y Hora de Inicio</label>
                        <input type="datetime-local" class="form-control" name="fecha_inicio" required>
                    </div>
                    <div class="form-group">
                        <label>Máximo de Participantes</label>
                        <input type="number" class="form-control" name="max_participantes" min="2">
                    </div>
                    <div class="form-group">
                        <label>Precio (opcional)</label>
                        <input type="number" class="form-control" name="precio" step="0.01" min="0">
                    </div>
                    <div class="form-group">
                        <label>Descripción</label>
                        <textarea class="form-control" name="descripcion" rows="3"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-success">Crear Evento</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function crearEvento(canchaId) {
    document.getElementById('cancha_id').value = canchaId;
    $('#crearEventoModal').modal('show');
}

function eliminarEvento(eventoId) {
    if (confirm('¿Estás seguro de que quieres eliminar este evento?')) {
        // Aquí iría la lógica para eliminar el evento
        fetch(`/admin/eventos/${eventoId}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Content-Type': 'application/json',
            },
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Error al eliminar el evento');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error al eliminar el evento');
        });
    }
}

document.getElementById('crearEventoForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    
    fetch('/admin/eventos', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            $('#crearEventoModal').modal('hide');
            location.reload();
        } else {
            alert('Error al crear el evento');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error al crear el evento');
    });
});
</script>
@endsection