@extends('layouts.app')

@section('title', 'Mis QRs - OnAPB')

@section('content')
<div class="container mt-4 mb-5">
    <div class="d-flex justify-content-between align-items-end mb-5">
        <div>
            <span class="text-primary fw-bold text-uppercase small d-block mb-1">Mi Panel</span>
            <h1 class="display-3 fw-bold mb-0" style="line-height:0.9;">Mis QRs<span class="text-primary">.</span></h1>
            @if($evento)<p class="text-muted mt-2 mb-0">{{ $evento->nombre_evento }}</p>@endif
        </div>
        <a href="{{ route('panel.usuario') }}" class="btn btn-outline-dark btn-sm text-uppercase fw-bold" style="border-radius:0;">
            <i class="bi bi-arrow-left me-1"></i> Volver
        </a>
    </div>


    @if($evento)
        <div class="kinetic-card p-4 mb-4 border-start border-primary border-4">
            <h5 class="mb-1 fw-bold">{{ $evento->nombre_evento }}</h5>
            <p class="text-muted mb-0 small">
                <i class="bi bi-calendar3 me-1"></i>{{ $evento->fecha_evento ? \Carbon\Carbon::parse($evento->fecha_evento)->format('d/m/Y') : '—' }}
                &nbsp;·&nbsp;
                <i class="bi bi-clock me-1"></i>{{ $evento->hora_inicio ? substr($evento->hora_inicio, 0, 5) : '' }} - {{ $evento->hora_fin ? substr($evento->hora_fin, 0, 5) : '' }}
                @if($evento->sede)
                    &nbsp;·&nbsp; <i class="bi bi-geo-alt me-1"></i>{{ $evento->sede }}
                @endif
            </p>
        </div>
    @endif

    @if($qrs->isEmpty())
        <div class="text-center py-5">
            <i class="bi bi-ticket-perforated text-muted" style="font-size: 3rem;"></i>
            <p class="text-muted mt-3">No tenés QRs{{ $evento ? ' para este evento' : '' }}.</p>
            <a href="{{ route('eventos.index') }}" class="btn btn-primary">Ver eventos disponibles</a>
        </div>
    @else
        <div class="row">
            @foreach($qrs as $qr)
            @php
                $agotado = (int)$qr->escaneos_restantes <= 0;
                $club = ($qr->evento && $qr->evento->equipoLocal && $qr->evento->equipoLocal->club) ? $qr->evento->equipoLocal->club : null;
                $bgPath = ($club && $club->qr_background) ? asset($club->qr_background) : null;
                $textColor = ($club && $club->qr_color_texto) ? $club->qr_color_texto : '#333';
            @endphp
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="qr-ticket-card {{ $agotado ? 'qr-agotado' : '' }}"
                     style="border: 1px solid var(--outline-variant); border-radius: var(--radius); overflow: hidden; position: relative; min-height: 480px;
                            {{ $bgPath ? "background: url('$bgPath') no-repeat center center; background-size: cover;" : "background: var(--surface-container-lowest);" }}">
                    
                    {{-- Overlay semi-transparente si hay fondo para legibilidad --}}
                    @if($bgPath)
                        <div style="position: absolute; inset: 0; background: rgba(255,255,255,0.1); z-index: 1;"></div>
                    @endif

                    <div class="card-body d-flex flex-column align-items-center justify-content-between text-center" style="position: relative; z-index: 5; color: {{ $textColor }};">
                        
                        {{-- Logo Cabecera --}}
                        <div class="mt-2 d-flex align-items-center justify-content-center gap-2">
                            <img src="{{ asset('logo.png') }}" alt="OnAPB" style="height: 35px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));">
                            @if($userTipo === 'jugador' && $user->clubActual && $user->clubActual->imagen)
                                <div style="height: 35px; width: 35px; background: #fff; border-radius: 50%; padding: 3px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                                    <img src="{{ asset($user->clubActual->imagen) }}" alt="{{ $user->clubActual->nombre }}" style="max-height: 100%; max-width: 100%; object-fit: contain;">
                                </div>
                            @endif
                        </div>

                        {{-- Datos Jugador / Evento --}}
                        <div class="my-2">
                            <h4 class="fw-bold mb-0" style="text-transform: uppercase; letter-spacing: 1px;">
                                {{ $user->nombre }} {{ $user->apellido }}
                            </h4>
                            <p class="small mb-1 opacity-75">{{ $qr->evento->nombre_evento ?? 'Partido - OnAPB' }}</p>
                            @if($qr->evento && $qr->evento->equipoLocal)
                                <p class="small mb-1 fw-bold opacity-75" style="font-size: 0.75rem;">
                                    CATEGORIA: {{ $qr->evento->grupo_nombre ?? ($qr->evento->equipoLocal->categoria . ($qr->evento->equipoLocal->division ? ' ' . $qr->evento->equipoLocal->division : '')) }}
                                </p>
                            @endif
                            @if($qr->tipo_qr === 'libre_50')
                                <span class="badge bg-warning text-dark px-3 py-2 rounded-pill shadow-sm">
                                    <i class="bi bi-percent"></i> 50% DESCUENTO
                                </span>
                            @endif
                        </div>

                        {{-- QR visual --}}
                        <div class="qr-container p-3 bg-white shadow-lg" style="border-radius: var(--radius); position: relative;">
                            @if($agotado)
                                <div style="position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 10; background: rgba(255,255,255,0.8); border-radius: var(--radius);">
                                    <span style="font-size: 5rem; transform: rotate(-15deg);">🚫</span>
                                </div>
                            @endif
                            <img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data={{ urlencode($qr->id_qr) }}"
                                 alt="QR {{ $qr->id_qr }}"
                                 class="img-fluid"
                                 style="max-width: 180px; {{ $agotado ? 'filter: grayscale(100%);' : '' }}">
                        </div>

                        {{-- Footer Ticket --}}
                        <div class="w-100 mt-3 p-2 rounded" style="background: rgba(0,0,0,0.05); backdrop-filter: blur(5px);">
                            @if($agotado)
                                <div class="text-danger fw-bold">❌ QR YA UTILIZADO</div>
                            @else
                                <div class="fw-bold mb-1">✅ QR VÁLIDO</div>
                                <div class="small opacity-75">Escaneos: {{ $qr->escaneos_restantes }} de 1</div>
                            @endif
                            @if($qr->evento && $qr->evento->equipoLocal)
                                <p class="small mb-0 opacity-75" style="font-size: 0.7rem; font-weight: bold;">
                                    CATEGORIA: {{ $qr->evento->grupo_nombre ?? ($qr->evento->equipoLocal->categoria . ($qr->evento->equipoLocal->division ? ' ' . $qr->evento->equipoLocal->division : '')) }}
                                </p>
                            @endif
                            <div class="mt-1 small" style="font-size: 0.7rem; font-family: monospace;">{{ $qr->id_qr }}</div>
                            
                            @if(!$agotado)
                                <div class="mt-2 pt-2 border-top">
                                    <a href="{{ route('panel.qr.descargar', $qr->id_qr) }}" class="btn btn-outline-dark btn-sm w-100" style="font-size: 0.75rem; font-weight: bold; border-radius: 0;">
                                        <i class="bi bi-file-earmark-pdf me-1"></i> DESCARGAR PDF
                                    </a>
                                </div>
                            @endif
                        </div>

                    </div>
                </div>
            </div>
            @endforeach
        </div>

        <div class="alert alert-info mt-3">
            <i class="bi bi-info-circle-fill"></i>
            Estos QRs ya están registrados en el sistema. Mostralos en la entrada para ingresar al partido.
        </div>
    @endif
</div>
@endsection