@extends('layouts.app')

@section('title', 'QR de Beneficio - OnAPB')

@section('content')
<div class="container mt-4 mb-5">
    <div class="text-center">
        <h2 class="mb-3">🎟️ QR de beneficio</h2>

        @if(session('panel_msg'))
            <div class="alert alert-success alert-dismissible fade show mx-auto" style="max-width: 450px;" role="alert">
                {{ session('panel_msg') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        @php
            $club = ($userTipo === 'jugador' && $user->clubActual) ? $user->clubActual : 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="qr-ticket-container my-4 mx-auto" 
             style="max-width: 400px; border-radius: 25px; overflow: hidden; position: relative; min-height: 550px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);
                    {{ $bgPath ? "background: url('$bgPath') no-repeat center center; background-size: cover;" : "background: #fff; border: 1px solid #eee;" }}">
            
            @if($bgPath)
                <div style="position: absolute; inset: 0; background: rgba(255,255,255,0.1); z-index: 1;"></div>
            @endif

            <div class="d-flex flex-column align-items-center justify-content-between p-4 h-100 text-center" style="position: relative; z-index: 5; color: {{ $textColor }}; min-height: 550px;">
                
                <div class="mt-2 d-flex align-items-center justify-content-center gap-2">
                    <img src="{{ asset('logo.png') }}" alt="OnAPB" style="height: 40px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));">
                    @if($userTipo === 'jugador' && $user->clubActual && $user->clubActual->imagen)
                        <div style="height: 40px; width: 40px; background: #fff; border-radius: 50%; padding: 4px; 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>
                <h5 class="mt-3 fw-bold" style="font-family: 'Bebas Neue', cursive; letter-spacing: 1px; font-size: 1.5rem;">CÓDIGO DE BENEFICIO</h5>

                <div class="qr-box p-3 bg-white shadow-lg" style="border-radius: 25px;">
                    <img src="https://api.qrserver.com/v1/create-qr-code/?size=300x300&data={{ urlencode($promoQr->id_qr) }}"
                         alt="QR Promoción"
                         class="img-fluid"
                         style="max-width: 250px;">
                </div>

                <div class="w-100 mt-4">
                    <h6 class="fw-bold mb-1" style="text-transform: uppercase;">{{ $user->nombre }} {{ $user->apellido }}</h6>
                    <p class="small mb-2 opacity-75">Válido en: {{ $promoQr->promocion->nombre ?? 'Comercio adherido' }}</p>
                    
                    <div class="alert alert-warning py-2 px-3 mb-0" style="font-size: 0.75rem; border-radius: 15px; border: none; background: rgba(255, 193, 7, 0.9);">
                        <strong>⚠️ IMPORTANTE:</strong> Presentalo únicamente en el local. Si se escanea por error, se pierde.
                    </div>
                    <div class="mt-2 small opacity-50" style="font-family: monospace; font-size: 0.65rem;">{{ $promoQr->id_qr }}</div>
                </div>
            </div>
        </div>

        @if($promoQr->promocion)
            <div class="card shadow-sm mx-auto" style="max-width: 450px;">
                <div class="card-body">
                    <h5>{{ $promoQr->promocion->nombre }}</h5>
                    @if($promoQr->promocion->descripcion)
                        <p class="mb-1"><strong>Beneficio:</strong> {{ $promoQr->promocion->descripcion }}</p>
                    @endif
                    @if($promoQr->promocion->direccion)
                        <p class="mb-0 text-muted"><i class="bi bi-geo-alt"></i> {{ $promoQr->promocion->direccion }}</p>
                    @endif
                </div>
            </div>
        @endif

        <div class="mt-4">
            <a href="{{ route('panel.usuario') }}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left"></i> Volver a Mi Panel
            </a>
        </div>
    </div>
</div>
@endsection