@extends('layouts.app')
@section('tituloModulo') Credencial Alumno @endsection
@section('contenido')
    <link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('assets/css/bootstrap.min.css') }}">
    <style>
        .student-card {
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 30px;
        }
        .student-header {
            background-color: #0a56ad;
            color: white;
            padding: 20px;
            position: relative;
        }
        .student-header h2 {
            margin: 0;
            font-size: 22px;
        }
        .student-header p {
            margin: 5px 0 0 0;
            font-size: 16px;
        }
        .student-body {
            padding: 20px;
        }
        .student-info {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
        }
        .student-photo-container {
            width: 100%;
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }
        .student-photo {
            width: 200px;
            height: 200px;
        }
        .student-photo img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 4px solid #1C9BC2;
            object-fit: cover;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        .student-details {
            flex: 1;
            min-width: 100%;
        }
        .student-qr-container {
            width: 100%;
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
        .student-qr {
            width: 200px;
            text-align: center;
        }
        .student-qr img {
            width: 100%;
            height: auto;
            background: white;
            padding: 10px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .info-group {
            margin-bottom: 30px;
        }
        .info-title {
            font-size: 18px;
            font-weight: 600;
            color: #1C9BC2;
            margin-bottom: 10px;
            border-bottom: 2px solid #A1ADB4;
            padding-bottom: 5px;
        }
        .info-row {
            display: flex;
            margin-bottom: 8px;
            flex-wrap: wrap;
        }
        .info-label {
            font-weight: 600;
            width: 140px;
            color: #555;
        }
        .info-value {
            flex: 1;
        }
        .verification-text {
            text-align: center;
            font-size: 14px;
            margin-top: 10px;
            color: #555;
        }
        .footer {
            text-align: center;
            padding: 15px;
            background-color: #A1ADB4;
            color: white;
            border-radius: 8px;
            font-size: 14px;
        }
        .footer p {
            margin: 5px 0;
        }
        .accent {
            color: #EE296A;
        }
        /* Media queries para responsive */
        @media (min-width: 768px) {
            .student-photo-container {
                width: auto;
                margin-right: 30px;
                flex: 0 0 auto;
                margin-bottom: 0;
            }
            .student-details {
                min-width: 300px;
                flex: 1;
            }
            .student-qr-container {
                width: auto;
                margin-top: 0;
                flex: 0 0 auto;
            }
            .header h1 {
                font-size: 28px;
            }
        }
    </style>
<div class="container">
    @if (isset($error))
        <div class="student-card">
            <div class="student-header">
                <h2>Estudiante no encontrado</h2>
            </div>
            <div class="student-body">
                <p class="text-danger">{{ $error }}</p>
            </div>
        </div>
    @elseif (isset($datos) && $datos)
        @if ($datos->estatus_alum == 'Activo')
            <div class="student-card">
                <div class="student-header">
                    <h2>{{ $datos->nombre_alumno }}</h2>
                    <p>Matrícula: {{ $datos->matricula_alum }}</p>
                </div>
                <div class="student-body">
                    <div class="student-qr-container">
                        <div class="student-qr">
                            <img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data={{ urlencode($qrUrl) }}" alt="QR de verificación">
                            <div class="verification-text">
                                <p><strong>Escanea el código QR para verificar la validez de esta credencial.</strong></p>
                            </div>
                        </div>
                    </div>
                    <div class="student-info">
                        <div class="student-photo-container">
                            <div class="student-photo">
                                @if(isset($datos->foto_usuario))
                                    <img src="{{ asset('assets/img/perfiles/' . $datos->foto_usuario) }}" alt="Foto de {{ $datos->nombre_alumno }}">
                                @else
                                    <img src="{{ asset('assets/img/usuario.png') }}" alt="Foto de perfil">
                                @endif
                            </div>
                        </div>
                        <div class="student-details">
                            <div class="info-group">
                                <div class="info-title text-center">Información Personal</div>
                                <div class="info-row">
                                    <div class="info-label">Nombre:</div>
                                    <div class="info-value">{{ $datos->nombre_alumno }}</div>
                                </div>
                                <div class="info-row">
                                    <div class="info-label">Matrícula:</div>
                                    <div class="info-value">{{ $datos->matricula_alum }}</div>
                                </div>
                                <div class="info-row">
                                    <div class="info-label">Correo:</div>
                                    <div class="info-value">{{ $datos->correo_electronico }}</div>
                                </div>
                                <div class="info-row">
                                    <div class="info-label">Teléfono:</div>
                                    <div class="info-value">{{ $datos->telefono_alum ?? 'No especificado' }}</div>
                                </div>
                                <div class="info-row">
                                    <div class="info-label">Estado:</div>
                                    <div class="info-value">{{ $datos->estatus_alum }}</div>
                                </div>
                            </div>
                            <div class="info-group">
                                <div class="info-title text-center">Información Académica</div>
                                <div class="info-row">
                                    <div class="info-label">Curso:</div>
                                    <div class="info-value">{{ $datos->nombre_curso }}</div>
                                </div>
                                <div class="info-row">
                                    <div class="info-label">Grupo:</div>
                                    <div class="info-value">{{ $datos->nombre_grupo }}</div>
                                </div>
                                <div class="info-row">
                                    <div class="info-label">Hora de entrada:</div>
                                    <div class="info-value">{{ $datos->horario_inicio_grupo ?? 'No especificado' }}</div>
                                </div>
                                <div class="info-row">
                                    <div class="info-label">Hora de salida:</div>
                                    <div class="info-value">{{ $datos->horario_termino_grupo ?? 'No especificado' }}</div>
                                </div>
                                <div class="info-row">
                                    <div class="info-label">Localidad:</div>
                                    <div class="info-value">{{ $datos->localidad_grupo ?? 'No especificado' }}</div>
                                </div>
                                <div class="info-row">
                                    <div class="info-label">Inicio:</div>
                                    <div class="info-value">{{ $datos->fecha_inicio_grupo ? \Carbon\Carbon::parse($datos->fecha_inicio_grupo)->format('d/m/Y') : 'No especificado' }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @else
            <div class="student-card">
                <div class="student-header">
                    <h2>{{ $datos->nombre_alumno }}</h2>
                    <p>Matrícula: {{ $datos->matricula_alum }}</p>
                </div>
                <div class="student-body">
                    <div class="alert alert-danger">
                        <p><strong>Esta credencial no es válida.</strong> El estudiante no está activo.</p>
                    </div>
                </div>
            </div>
        @endif
    @else
        <div class="student-card">
            <div class="student-header">
                <h2>Estudiante no encontrado</h2>
            </div>
            <div class="student-body">
                <p class="text-danger">No se encontraron datos para el estudiante solicitado.</p>
            </div>
        </div>
    @endif
</div>
@endsection