@php
    // Obtener los datos reales de la base de datos para este sorteo específico
    $total = $record->total_tickets > 0 ? $record->total_tickets : 0;
    $sold = $record->sold_tickets;
    $percentage = $total > 0 ? round(($sold / $total) * 100) : 0;
@endphp

<div class="flex justify-center items-center py-4 bg-gray-900 rounded-xl overflow-hidden">
    <!-- Contenedor del Mockup del Celular -->
    <div class="w-[375px] h-[780px] bg-[#0E121E] text-white rounded-[40px] shadow-2xl border-[8px] border-gray-800 relative overflow-y-auto overflow-x-hidden scrollbar-thin scrollbar-thumb-gray-800 scrollbar-track-transparent">
        
        <!-- Notch de Cámara -->
        <div class="absolute top-2 left-1/2 transform -translate-x-1/2 w-28 h-4 bg-gray-800 rounded-full z-50"></div>
        
        <!-- Cabecera / Botones superiores (Atrás y Compartir) -->
        <div class="absolute top-8 left-4 right-4 flex justify-between z-10">
            <button class="w-9 h-9 rounded-full bg-black/40 flex items-center justify-center border border-white/10 hover:bg-black/60 transition">
                <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                </svg>
            </button>
            <button class="w-9 h-9 rounded-full bg-black/40 flex items-center justify-center border border-white/10 hover:bg-black/60 transition">
                <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 10.742l5.263-2.63m0 7.776l-5.263-2.63m8.956-6.066a3 3 0 11-6 0 3 3 0 016 0zm-6 11.25a3 3 0 11-6 0 3 3 0 016 0zm6-5.625a3 3 0 11-6 0 3 3 0 016 0z"/>
                </svg>
            </button>
        </div>

        <!-- Banner del Premio (Mitad superior) -->
        <div class="relative w-full h-[280px] bg-[#0E121E]">
            @if($record->images_json && count($record->images_json) > 0)
                <img src="/storage/{{ $record->images_json[0] }}" class="w-full h-full object-cover" />
            @else
                <!-- Imagen de fondo mockeada si no hay subida -->
                <div class="w-full h-full bg-gradient-to-br from-gray-800 to-indigo-950 flex flex-col justify-center items-center">
                    <svg class="w-16 h-16 text-gray-600 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                    </svg>
                    <span class="text-xs text-gray-500">Sin imágenes. Sube una en el formulario.</span>
                </div>
            @endif
            <!-- Gradiente degradado hacia abajo -->
            <div class="absolute inset-0 bg-gradient-to-t from-[#0E121E] via-[#0E121E]/30 to-black/30"></div>
        </div>

        <!-- Información y detalles (Flotando sobre la imagen) -->
        <div class="px-5 -mt-12 relative z-10">
            <!-- Tipo de Sorteo / Subtítulo -->
            <span class="text-[11px] text-gray-400 font-semibold tracking-wider uppercase block">
                {{ $record->type === 'main' ? 'Deportivo edición limitada' : 'Sorteo Rápido Semanal' }}
            </span>
            
            <!-- Título del Premio -->
            <h1 class="text-2xl font-bold tracking-tight text-white mt-0.5 leading-snug">
                {{ $record->title ?? 'Sorteo de Ejemplo' }}
            </h1>

            <!-- Fila de Estadísticas (Tarjetas) -->
            <div class="mt-4 bg-[#181D2E] border border-[#272F47] rounded-2xl py-3 px-1 flex justify-around text-center shadow-lg">
                <div class="flex-1">
                    <span class="text-[9px] text-gray-400 block uppercase font-bold tracking-wider">Por Número</span>
                    <span class="text-sm font-extrabold text-white mt-0.5 block">
                        {{ $record->commercial_value > 0 ? '₡' . number_format($record->commercial_value, 0, ',', ' ') : '₡0' }}
                    </span>
                </div>
                <div class="w-[1px] bg-[#272F47] self-stretch"></div>
                <div class="flex-1 px-1">
                    <span class="text-[9px] text-gray-400 block uppercase font-bold tracking-wider">Sorteo</span>
                    <span class="text-[10px] font-extrabold text-white mt-1 flex items-center justify-center gap-1">
                        <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                        {{ $record->draw_date ? $record->draw_date->format('d M Y') : 'Pendiente' }}
                    </span>
                </div>
                <div class="w-[1px] bg-[#272F47] self-stretch"></div>
                <div class="flex-1">
                    <span class="text-[9px] text-gray-400 block uppercase font-bold tracking-wider">Vendido</span>
                    <span class="text-sm font-extrabold text-white mt-0.5 block">{{ $percentage }}%</span>
                </div>
            </div>

            <!-- Barra de Progreso de Urgencia -->
            <div class="mt-5">
                <div class="w-full h-2 bg-[#22283A] rounded-full overflow-hidden">
                    <!-- Gradiente Naranja-Rojo igual que el screenshot -->
                    <div class="h-full bg-gradient-to-r from-yellow-500 to-orange-500 rounded-full transition-all duration-500" style="width: {{ $percentage }}%"></div>
                </div>
                <div class="flex justify-between items-center mt-2 text-[10px] text-gray-400 font-medium">
                    <span>{{ number_format($sold) }} vendidos</span>
                    <span>{{ number_format($total) }} totales</span>
                </div>
            </div>

            <!-- Sección Sobre el Premio -->
            <div class="mt-6">
                <h3 class="text-sm font-bold text-white uppercase tracking-wider">Sobre el premio</h3>
                <p class="text-xs text-gray-300 mt-2 leading-relaxed">
                    {{ $record->description ?? 'Sin descripción ingresada.' }}
                </p>
                
                <!-- Viñetas de Reglas/Transparencia con Checkmarks Naranjas -->
                <div class="mt-4 space-y-2">
                    @if($record->rules)
                        @foreach(explode("\n", $record->rules) as $rule)
                            @if(trim($rule))
                                <div class="flex items-start gap-2.5 text-xs text-gray-300">
                                    <div class="w-4 h-4 rounded-full bg-orange-500/20 text-orange-500 flex items-center justify-center flex-shrink-0 mt-0.5">
                                        <svg class="w-2.5 h-2.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/>
                                        </svg>
                                    </div>
                                    <span>{{ trim($rule) }}</span>
                                </div>
                            @endif
                        @endforeach
                    @endif
                </div>
            </div>

            <!-- Detalle de Cofres (Mockup del nuevo sistema) -->
            <div class="mt-6 mb-8">
                <div class="bg-[#181D2E] border border-[#272F47] rounded-2xl p-4 text-center shadow-lg mb-6">
                    <span class="text-xs text-gray-400 block mb-1">Tus Llaves Disponibles</span>
                    <span class="text-3xl font-extrabold text-orange-500 block mb-3">🔑 5 Llaves</span>
                    <button class="w-full py-2.5 bg-gradient-to-r from-orange-500 to-yellow-500 rounded-xl text-xs font-bold text-black uppercase tracking-wider hover:brightness-110 transition shadow-md shadow-orange-500/20">
                        📦 Abrir Cofre (Consume 1)
                    </button>
                </div>

                <div class="flex justify-between items-center mb-3">
                    <h3 class="text-xs font-bold text-white uppercase tracking-wider">Contenido de los Cofres</h3>
                    <span class="text-[10px] text-gray-400">Stock Limitado</span>
                </div>
                
                <div class="space-y-2">
                    @php
                        $prizes = \App\Models\ChestPrize::where('raffle_id', $record->id)->get();
                    @endphp
                    @if(count($prizes) > 0)
                        @foreach($prizes as $p)
                            <div class="flex items-center justify-between p-2.5 bg-[#121624] border border-[#1e253b] rounded-xl">
                                <div class="flex items-center gap-2">
                                    <div class="w-8 h-8 rounded-lg bg-orange-500/10 flex items-center justify-center text-orange-500 text-sm font-bold">
                                        🎁
                                    </div>
                                    <div>
                                        <span class="text-xs font-bold text-white block">{{ $p->name }}</span>
                                        <span class="text-[10px] text-gray-400 block capitalize">Tipo: {{ $p->type }} (Probabilidad: {{ $p->probability }}%)</span>
                                    </div>
                                </div>
                                <span class="text-xs font-bold text-orange-500">{{ $p->remaining_quantity }} / {{ $p->total_quantity }} disp.</span>
                            </div>
                        @endforeach
                    @else
                        <div class="p-4 text-center border border-dashed border-gray-700 rounded-xl">
                            <span class="text-xs text-gray-500">No hay premios configurados en el cofre aún.</span>
                        </div>
                    @endif
                </div>
            </div>
            
        </div>
    </div>
</div>
