@php
if (!function_exists('formatear_documento')) {
    function formatear_documento($tipo, $cedula) {
        if (!$cedula) return '';
        $num = number_format((int) $cedula, 0, '', '.');
        return $tipo . '-' . $num;
    }
}
@endphp
<div class="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-iesaLight to-gray-200 dark:from-[#1B365D] dark:to-zinc-900 p-4 font-sans">
    <div class="max-w-md w-full">
        <!-- Encabezado -->
        <div class="text-center mb-6">
            <h1 class="text-3xl font-bold text-iesaBlue">IESA</h1>
            <p class="text-gray-600 font-medium">Instituto de Estudios Superiores de Administración</p>
        </div>
        <!-- Carnet Digital -->
        <div class="bg-white rounded-2xl shadow-2xl overflow-hidden border-8 border-white transform transition-transform hover:scale-[1.02]">
            <!-- Cabecera del carnet -->
            <div class="bg-iesaBlue text-white py-4 px-6 flex justify-between items-center">
                <div>
                    <h2 class="text-xl font-bold">Carnet Digital</h2>
                    <p class="text-iesaGold text-sm font-medium">Identificación Institucional</p>
                </div>
                <div class="bg-white rounded-full p-1">
                    <div class="bg-iesaBlue rounded-full p-2">
                        <i class="fas fa-graduation-cap text-white text-xl"></i>
                    </div>
                </div>
            </div>
            <!-- Cuerpo del carnet -->
            <div class="p-6">
                <div class="flex flex-col md:flex-row gap-6">
                    <!-- Foto y datos principales -->
                    <div class="flex-1">
                        <div class="mb-4 flex flex-col items-center">
                            <div class="bg-gray-200 border-2 border-dashed rounded-xl w-32 h-32 mb-3 flex items-center justify-center overflow-hidden">
                                @if($member->foto)
                                    <img src="{{ asset('storage/' . $member->foto) }}" class="object-cover w-full h-full" alt="Foto">
                                @else
                                    <i class="fas fa-user text-gray-400 text-4xl"></i>
                                @endif
                            </div>
                            <div class="text-center">
                                <div class="h-1 w-16 bg-iesaGold mx-auto mb-2"></div>
                                <h3 class="text-xl font-bold text-iesaBlue">{{ $member->name }}</h3>
                                <p class="text-gray-600">{{ $member->profesion }}</p>
                            </div>
                        </div>
                        <div class="space-y-3">
                            <div class="flex items-center">
                                <div class="bg-iesaBlue text-white p-2 rounded-lg mr-3">
                                    <i class="fas fa-id-card"></i>
                                </div>
                                <div>
                                    <p class="text-xs text-gray-500">ID Miembro</p>
                                    <p class="font-mono font-bold text-iesaBlue">{{ formatear_documento($member->tipo_documento ?? 'V', $member->cedula) }}</p>
                                </div>
                            </div>
                            <div class="flex items-center">
                                <div class="bg-iesaBlue text-white p-2 rounded-lg mr-3">
                                    <i class="fas fa-calendar"></i>
                                </div>
                                <div>
                                    <p class="text-xs text-gray-500">Fecha de Expiración</p>
                                    <p class="font-bold text-iesaBlue">{{ $member->fecha_vencimiento }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Información adicional -->
                    <div class="flex-1 border-t md:border-t-0 md:border-l border-gray-200 pl-0 md:pl-6 pt-6 md:pt-0">
                        <div class="mb-6">
                            <h4 class="font-bold text-iesaBlue mb-2 flex items-center">
                                <i class="fas fa-qrcode mr-2 text-iesaGold"></i>
                                Código QR
                            </h4>
                            <div class="bg-gray-200 border-2 border-dashed rounded-xl w-32 h-32 flex items-center justify-center overflow-hidden">
                                @if($member->qr_code)
                                    <img src="{{ asset('storage/qr/' . $member->qr_code) }}" class="object-contain w-28 h-28" alt="QR">
                                @else
                                    <i class="fas fa-qrcode text-gray-400 text-4xl"></i>
                                @endif
                            </div>
                        </div>
                        <div>
                            <h4 class="font-bold text-iesaBlue mb-2 flex items-center">
                                <i class="fas fa-shield-alt mr-2 text-iesaGold"></i>
                                Medidas de Seguridad
                            </h4>
                            <ul class="text-xs space-y-1">
                                <li class="flex items-start">
                                    <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                    <span>Holograma digital IESA</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                    <span>Microtexto de seguridad</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                    <span>QR válido solo en sistema institucional</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Pie del carnet -->
            <div class="bg-iesaGold py-3 px-6">
                <div class="flex justify-between items-center">
                    <div class="text-iesaBlue text-xs">
                        <p>Válido solo con documento de identidad oficial</p>
                        <p class="font-bold">www.iesa.edu.ve</p>
                    </div>
                    <div class="text-iesaBlue">
                        <i class="fas fa-lock text-lg"></i>
                    </div>
                </div>
            </div>
        </div>
        <!-- Información adicional -->
        <div class="mt-8 bg-white rounded-xl shadow-md p-6">
            <h3 class="font-bold text-iesaBlue text-lg mb-3 flex items-center">
                <i class="fas fa-info-circle mr-2 text-iesaGold"></i>
                Instrucciones de Uso
            </h3>
            <ul class="text-sm text-gray-700 space-y-2">
                <li class="flex items-start">
                    <i class="fas fa-check text-iesaGold mt-1 mr-2"></i>
                    <span>Presente este carnet digital para acceder a instalaciones y servicios del IESA</span>
                </li>
                <li class="flex items-start">
                    <i class="fas fa-check text-iesaGold mt-1 mr-2"></i>
                    <span>El código QR contiene información de identidad verificada</span>
                </li>
                <li class="flex items-start">
                    <i class="fas fa-check text-iesaGold mt-1 mr-2"></i>
                    <span>En caso de pérdida, reporte inmediatamente en control de acceso</span>
                </li>
            </ul>
        </div>
    </div>
</div>