<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        @page { 
            margin: 0; 
            size: 320pt 500pt;
        }
        * { box-sizing: border-box; }
        body { 
            font-family: 'Helvetica', sans-serif; 
            margin: 0; 
            padding: 0; 
            width: 320pt;
            height: 500pt;
            color: {{ $club->qr_color_texto ?? '#333' }};
            overflow: hidden;
            background-color: #fff;
        }
        .ticket-container { 
            width: 320pt; 
            height: 500pt; 
            position: relative;
            margin: 0; padding: 0;
        }
        .background-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 320pt;
            height: 500pt;
            z-index: 1;
        }
        /* Tabla para centrado total */
        .main-table {
            position: absolute;
            top: 0;
            left: 0;
            width: 320pt;
            height: 500pt;
            z-index: 10;
            border-collapse: collapse;
        }
        .content-td {
            padding: 30pt 20pt;
            vertical-align: middle;
            text-align: center;
        }
        .header { margin-bottom: 20pt; }
        .logo { height: 40pt; margin-bottom: 5pt; }
        .title { font-size: 16pt; font-weight: bold; text-transform: uppercase; letter-spacing: 2pt; margin-top: 5pt; }
        
        .qr-box { 
            margin: 15pt auto; 
            padding: 8pt; 
            background: #fff; 
            display: inline-block; 
            border-radius: 12pt;
            box-shadow: 0 4pt 10pt rgba(0,0,0,0.15);
        }
        .qr-image { width: 145pt; height: 145pt; display: block; border: 1pt solid #eee; }
        
        .user-info { margin: 15pt 0; }
        .user-name { font-size: 19pt; font-weight: bold; text-transform: uppercase; margin-bottom: 5pt; }
        .event-details { font-size: 10pt; opacity: 1; line-height: 1.5; font-weight: bold; }
        
        .footer-info {
            position: absolute;
            bottom: 25pt;
            left: 0;
            right: 0;
            font-size: 8pt;
            text-align: center;
            opacity: 0.8;
            z-index: 20;
        }
        .badge { 
            display: inline-block; 
            padding: 4pt 12pt; 
            background: #ffc107; 
            color: #000; 
            border-radius: 15pt; 
            font-size: 9pt; 
            font-weight: bold; 
            margin-bottom: 15pt;
        }
    </style>
</head>
<body>
    <div class="ticket-container">
        @if($backgroundBase64)
            <img src="{{ $backgroundBase64 }}" class="background-image">
        @endif
        
        <table class="main-table">
            <tr>
                <td class="content-td">
                    <div class="header">
                        @if($logoBase64)
                            <img src="{{ $logoBase64 }}" class="logo">
                        @else
                            <div style="height: 40pt;"></div>
                        @endif
                        <div class="title">ENTRADA DIGITAL</div>
                    </div>

                    <div class="qr-box">
                        @if($qrImageBase64)
                            <img src="{{ $qrImageBase64 }}" class="qr-image">
                        @else
                            <div style="width: 145pt; height: 145pt; padding: 20pt; font-size: 9pt; color: #999;">Error QR</div>
                        @endif
                    </div>

                    <div class="user-info">
                        @if($qr->tipo_qr === 'libre_50')
                            <div class="badge">50% DESCUENTO - CAT. LIBRE</div>
                        @endif
                        
                        <div class="user-name">{{ $user->nombre }} {{ $user->apellido }}</div>
                        
                        <div class="event-details">
                            <div style="margin-bottom: 4pt; font-size: 11pt; text-decoration: underline;">
                                {{ $qr->evento->nombre_evento ?? 'EVENTO ONAPB' }}
                            </div>
                            FECHA: {{ $qr->evento->fecha_evento ? $qr->evento->fecha_evento->format('d/m/Y') : '—' }}<br>
                            HORA: {{ $qr->evento->hora_inicio ? $qr->evento->hora_inicio->format('H:i') : '—' }} - {{ $qr->evento->hora_fin ? $qr->evento->hora_fin->format('H:i') : '—' }}<br>
                            @if($qr->evento->sede)SEDE: {{ $qr->evento->sede }}<br>@endif
                            @if($qr->evento && $qr->evento->equipoLocal)
                                CATEGORÍA: {{ $qr->evento->equipoLocal->categoria }} {{ $qr->evento->equipoLocal->division }}<br>
                            @endif
                        </div>
                    </div>
                </td>
            </tr>
        </table>

        <div class="footer-info">
            ID TICKET: {{ $qr->id_qr }}<br>
            Generado por OnAPB Experience - {{ date('d/m/Y H:i') }}
        </div>
    </div>
</body>
</html>
