@extends('layouts.app')

@section('title', 'Mi Panel - OnAPB')

@section('content')

<div class="container-fluid py-5" style="background: var(--surface);">
    <div class="container py-4">
        <div class="mb-5 d-flex justify-content-between align-items-end">
            <div>
                <span class="text-primary fw-bold tracking-widest text-uppercase d-block mb-2">Mi Perfil</span>
                <h1 class="display-1 fw-bold mb-0" style="line-height: 0.9;">{{ $user->nombre }}<span class="text-primary">.</span></h1>
            </div>
            <div class="text-end">
                <span class="badge bg-dark px-3 py-2 text-uppercase">{{ $userTipo }}</span>
            </div>
        </div>

        @if(session('panel_msg'))
            <div class="bg-white p-4 mb-4 border-start border-success border-5 shadow-sm">
                <p class="mb-0 fw-bold text-success"><i class="bi bi-check-circle-fill me-2"></i> {{ session('panel_msg') }}</p>
            </div>
        @endif

        <div class="row g-4">
            <!-- Columna Izquierda: Datos y Config -->
            <div class="col-lg-4">
                <div class="kinetic-card p-4 mb-4">
                    <h3 class="fw-bold mb-4 text-uppercase border-bottom pb-2">Datos Personales</h3>
                    <form method="POST" action="{{ route('panel.actualizar') }}">
                        @csrf
                        <div class="mb-3">
                            <label class="small fw-bold text-muted text-uppercase d-block mb-1">Nombre Completo</label>
                            <div class="fs-5 fw-bold">{{ $user->nombre }} {{ $user->apellido }}</div>
                        </div>
                        <div class="mb-3">
                            <label class="small fw-bold text-muted text-uppercase d-block mb-1">DNI / Documento</label>
                            <div class="fs-5">{{ $userTipo === 'jugador' ? $user->documento : $user->dni }}</div>
                        </div>
                        @if($userTipo === 'jugador')
                        <div class="mb-3">
                            <label class="small fw-bold text-muted text-uppercase d-block mb-1">Categoría</label>
                            <div class="fs-5 fw-bold text-primary">{{ $user->categoria_calculada }}</div>
                        </div>
                        @endif
                        <hr class="my-4">
                        <div class="mb-3">
                            <label class="small fw-bold text-muted text-uppercase d-block mb-1">Email</label>
                            <input type="email" name="email" class="form-control border-0 bg-light p-3" value="{{ $user->email }}" required style="border-radius: 0;">
                        </div>
                        <div class="mb-3">
                            <label class="small fw-bold text-muted text-uppercase d-block mb-1">Teléfono</label>
                            <input type="text" name="telefono" class="form-control border-0 bg-light p-3" value="{{ $user->telefono }}" required style="border-radius: 0;">
                        </div>
                        <button type="submit" class="btn-kinetic-primary w-100 py-3 mt-2">ACTUALIZAR DATOS</button>
                    </form>
                </div>

                <div class="kinetic-card p-4">
                    <h3 class="fw-bold mb-4 text-uppercase border-bottom pb-2">Seguridad</h3>
                    <form method="POST" action="{{ route('panel.password') }}">
                        @csrf
                        <div class="mb-3">
                            <input type="password" name="password_actual" class="form-control border-0 bg-light p-3" placeholder="Contraseña actual" required style="border-radius: 0;">
                        </div>
                        <div class="mb-3">
                            <input type="password" name="password_nueva" class="form-control border-0 bg-light p-3" placeholder="Nueva contraseña" required style="border-radius: 0;">
                        </div>
                        <button type="submit" class="btn btn-dark w-100 py-3" style="border-radius: 0;">CAMBIAR CONTRASEÑA</button>
                    </form>
                </div>
            </div>

            <!-- Columna Derecha: Actividad y QRs -->
            <div class="col-lg-8">
                @if($userTipo === 'jugador')
                <div class="kinetic-card p-4 mb-4" style="background: var(--primary-container);">
                    <h3 class="fw-bold mb-4 text-uppercase">Mi Club</h3>
                    <div class="d-flex align-items-center bg-white p-4 shadow-sm">
                        <div class="me-4" style="width: 80px; height: 80px;">
                            @if($user->clubActual && $user->clubActual->imagen)
                                <img src="{{ asset($user->clubActual->imagen) }}" alt="{{ $user->clubActual->nombre }}" class="w-100 h-100" style="object-fit: contain;">
                            @else
                                <div class="w-100 h-100 bg-primary d-flex align-items-center justify-content-center text-white">
                                    <i class="bi bi-shield-fill fs-1"></i>
                                </div>
                            @endif
                        </div>
                        <div>
                            <h2 class="fw-bold mb-0">{{ $user->clubActual->nombre ?? 'Sin Club Asignado' }}</h2>
                            @if($user->equipos && $user->equipos->count() > 0)
                                <p class="text-muted mb-0">{{ $user->equipos->count() }} equipos registrados</p>
                            @endif
                        </div>
                    </div>
                </div>
                @endif

                <!-- Mis Entradas -->
                <div class="mb-4">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h3 class="fw-bold mb-0 text-uppercase">Mis Entradas (QRs)</h3>
                        <a href="{{ route('panel.mis.qrs') }}" class="text-primary fw-bold text-decoration-none">VER TODAS <i class="bi bi-arrow-right"></i></a>
                    </div>
                    
                    @if($qrCodes->isEmpty())
                        <div class="bg-white p-5 text-center shadow-sm border-dashed">
                            <p class="text-muted mb-0">No tenés entradas activas.</p>
                            <a href="{{ route('eventos.index') }}" class="btn-kinetic-primary mt-3 px-4">BUSCAR EVENTOS</a>
                        </div>
                    @else
                        <div class="row g-3">
                            @foreach($qrCodes->take(4) as $qr)
                            <div class="col-md-6">
                                <div class="bg-white p-4 shadow-sm border-start border-primary border-5 d-flex justify-content-between align-items-center">
                                    <div>
                                        <h5 class="fw-bold mb-1">{{ $qr->evento ? $qr->evento->nombre_evento : 'Evento' }}</h5>
                                        <span class="badge {{ $qr->escaneos_restantes > 0 ? 'bg-success' : 'bg-danger' }} text-uppercase">
                                            {{ $qr->escaneos_restantes > 0 ? 'Disponible' : 'Usado' }}
                                        </span>
                                    </div>
                                    <a href="{{ route('panel.mis.qrs', ['evento' => $qr->id_evento]) }}" class="btn btn-outline-dark btn-sm" style="border-radius: 0;">VER QR</a>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    @endif
                </div>

                <!-- Mis Beneficios -->
                <div>
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h3 class="fw-bold mb-0 text-uppercase">Mis Beneficios</h3>
                        <a href="{{ route('promos.index') }}" class="text-primary fw-bold text-decoration-none">BUSCAR MÁS <i class="bi bi-arrow-right"></i></a>
                    </div>

                    @if($promoQrs->isEmpty())
                        <div class="bg-white p-5 text-center shadow-sm border-dashed">
                            <p class="text-muted mb-0">No reclamaste beneficios aún.</p>
                        </div>
                    @else
                        <div class="table-responsive bg-white shadow-sm p-3">
                            <table class="table table-hover align-middle mb-0">
                                <thead class="bg-light">
                                    <tr>
                                        <th class="border-0 text-uppercase small fw-bold">Promoción</th>
                                        <th class="border-0 text-uppercase small fw-bold text-center">Estado</th>
                                        <th class="border-0 text-uppercase small fw-bold text-end">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($promoQrs->take(5) as $pq)
                                    <tr>
                                        <td>
                                            <div class="fw-bold">{{ $pq->promocion ? $pq->promocion->nombre : 'Beneficio' }}</div>
                                            <div class="small text-muted">{{ $pq->promocion->direccion ?? '' }}</div>
                                        </td>
                                        <td class="text-center">
                                            <span class="badge {{ $pq->usado ? 'bg-light text-muted' : 'bg-primary' }} text-uppercase">
                                                {{ $pq->usado ? 'Usado' : 'Disponible' }}
                                            </span>
                                        </td>
                                        <td class="text-end">
                                            @if(!$pq->usado)
                                            <a href="{{ route('panel.promo.qr.ver', $pq->id_qr) }}" class="btn btn-link text-primary p-0">Ver QR</a>
                                            @else
                                            <span class="text-muted small">—</span>
                                            @endif
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        {{-- ═══════════════════════════════════════════ --}}
        {{-- SECCIÓN: MIS EQUIPOS SEGUIDOS              --}}
        {{-- ═══════════════════════════════════════════ --}}
        <div class="mt-5" id="mis-equipos-seguidos">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2 class="fw-bold text-uppercase mb-0">
                    <i class="bi bi-star-fill text-warning me-2"></i>Equipos Seguidos
                </h2>
                <a href="{{ route('eventos.index') }}" class="text-primary fw-bold text-decoration-none small">
                    Ver todos los partidos <i class="bi bi-arrow-right"></i>
                </a>
            </div>

            <div id="equipos-seguidos-container">
                <div class="text-center py-4 text-muted">
                    <div class="spinner-border spinner-border-sm me-2" role="status"></div> Cargando...
                </div>
            </div>

            {{-- Si es jugador, mostrar sus equipos propios --}}
            @if($userTipo === 'jugador' && $user->equipos && $user->equipos->count() > 0)
            <div class="mt-4">
                <h5 class="fw-bold text-muted text-uppercase small border-bottom pb-2 mb-3">Mis Equipos (asignados)</h5>
                <div class="row g-3">
                    @foreach($user->equipos as $eq)
                    <div class="col-md-4">
                        <div class="bg-white p-3 shadow-sm d-flex align-items-center gap-3">
                            <div class="bg-primary bg-opacity-10 rounded p-2">
                                <i class="bi bi-shield-fill text-primary fs-4"></i>
                            </div>
                            <div>
                                <div class="fw-bold">{{ $eq->club->nombre ?? '?' }}</div>
                                <div class="small text-muted">{{ $eq->categoria }} {{ $eq->division }}</div>
                            </div>
                            <a href="{{ route('equipos.show', $eq->id_equipo) }}" class="ms-auto btn btn-sm btn-outline-primary">Ver</a>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
            @endif

            {{-- Buscar más equipos para seguir --}}
            <div class="text-center mt-4">
                <p class="text-muted small">¿Querés seguir más equipos?</p>
                <a href="{{ route('torneos.standings', ['id' => optional(\App\Models\Torneo::latest('fecha_inicio')->first())->id ?? 0]) }}" class="btn btn-outline-dark btn-sm">
                    <i class="bi bi-trophy me-1"></i> Ver torneos y equipos
                </a>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
// Cargar equipos seguidos vía AJAX
fetch('/seguimiento/mis-equipos')
    .then(r => r.json())
    .then(data => {
        const container = document.getElementById('equipos-seguidos-container');
        if (!container) return;

        if (!data.equipos || data.equipos.length === 0) {
            container.innerHTML = `
                <div class="bg-white p-4 text-center shadow-sm">
                    <i class="bi bi-star display-4 text-muted opacity-50"></i>
                    <p class="mt-2 text-muted">No seguís ningún equipo todavía.</p>
                    <p class="text-muted small">Andá a la página de un equipo o torneo y presioná "Seguir".</p>
                </div>`;
            return;
        }

        // Próximos partidos
        let partidosHtml = '';
        if (data.proximos_partidos && data.proximos_partidos.length > 0) {
            partidosHtml = `<h6 class="text-uppercase fw-bold text-muted mt-4 mb-3 small">Próximos partidos</h6><div class="row g-3">`;
            data.proximos_partidos.forEach(p => {
                partidosHtml += `
                    <div class="col-md-6">
                        <div class="bg-white p-3 shadow-sm border-start border-3 border-primary">
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <div class="fw-bold">${p.local} <span class="text-muted">vs</span> ${p.visitante}</div>
                                    <div class="small text-muted mt-1">
                                        <i class="bi bi-calendar3 me-1"></i>${p.fecha}
                                        ${p.hora ? '<i class="bi bi-clock ms-2 me-1"></i>' + p.hora : ''}
                                        ${p.sede ? '<i class="bi bi-geo-alt ms-2 me-1"></i>' + p.sede : ''}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>`;
            });
            partidosHtml += `</div>`;
        } else {
            partidosHtml = `<p class="text-muted small mt-3"><i class="bi bi-calendar-x me-1"></i>No hay partidos próximos para tus equipos seguidos.</p>`;
        }

        // Cards de equipos seguidos
        let equiposHtml = `<div class="row g-3">`;
        data.equipos.forEach(eq => {
            equiposHtml += `
                <div class="col-md-4 col-6">
                    <div class="bg-white p-3 shadow-sm d-flex align-items-center justify-content-between gap-2">
                        <div class="d-flex align-items-center gap-2">
                            <i class="bi bi-star-fill text-warning"></i>
                            <div>
                                <div class="fw-bold small">${eq.club}</div>
                                <div class="text-muted" style="font-size:0.75rem;">${eq.categoria}${eq.division ? ' ' + eq.division : ''}</div>
                            </div>
                        </div>
                        <button class="btn btn-sm btn-outline-danger border-0 p-1 dejar-seguir"
                                data-id="${eq.id}" data-csrf="{{ csrf_token() }}"
                                title="Dejar de seguir">
                            <i class="bi bi-x-circle"></i>
                        </button>
                    </div>
                </div>`;
        });
        equiposHtml += `</div>`;

        container.innerHTML = equiposHtml + partidosHtml;

        // Botones "Dejar de seguir"
        document.querySelectorAll('.dejar-seguir').forEach(btn => {
            btn.addEventListener('click', function() {
                const id = this.dataset.id;
                fetch(`/seguimiento/equipo/${id}`, {
                    method: 'POST',
                    headers: { 'X-CSRF-TOKEN': this.dataset.csrf, 'Content-Type': 'application/json' }
                }).then(r => r.json()).then(data => {
                    if (data.ok) this.closest('.col-md-4, .col-6').remove();
                });
            });
        });
    })
    .catch(() => {
        const c = document.getElementById('equipos-seguidos-container');
        if (c) c.innerHTML = '<p class="text-muted small">No se pudieron cargar los equipos.</p>';
    });
</script>
@endsection