@model foundation_system.Models.ViewModels.ExpedienteViewModel
@{
    ViewData["Title"] = "Detalles del Expediente";
}

@section Styles {
    <style>
        .gender-group {
            display: flex;
            gap: 20px;
            padding: 8px 12px;
            background: #f8f9fa;
            border-radius: 8px;
            border: 1px solid #dee2e6;
        }
        .photo-container {
            width: 150px;
            height: 150px;
            margin: 0 auto 20px;
            border-radius: 50%;
            overflow: hidden;
            border: 3px solid #dee2e6;
            background: #f8f9fa;
        }
        .photo-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .info-label {
            font-weight: 600;
            color: #495057;
            font-size: 0.9rem;
            margin-bottom: 0.2rem;
        }
        .info-value {
            padding: 0.5rem 0.75rem;
            background-color: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 0.375rem;
            min-height: 2.5rem;
            display: flex;
            align-items: center;
        }
    </style>
}

<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h2 class="mb-1">Detalles del Expediente</h2>
        <p class="text-muted small mb-0">Información completa de: <strong>@Model.Nombres @Model.Apellidos</strong></p>
    </div>
    <div class="d-flex gap-2">
        <a asp-action="Index" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left me-2"></i>Volver
        </a>
        <a asp-action="Edit" asp-route-id="@Model.Id" class="btn btn-outline-primary">
            <i class="bi bi-pencil me-2"></i>Editar
        </a>
        <a asp-action="Print" asp-route-id="@Model.Id" target="_blank" class="btn btn-primary">
            <i class="bi bi-printer me-2"></i>Imprimir
        </a>
    </div>
</div>

<div class="row">
    <!-- Datos Personales -->
    <div class="col-md-8">
        <div class="card-custom mb-4">
            <h5 class="card-title mb-4"><i class="bi bi-person-vcard me-2 text-primary"></i>Datos Personales</h5>
            <div class="row g-3">
                <div class="col-md-12">
                    <div class="text-center mb-4">
                        <div class="photo-container">
                            @if (!string.IsNullOrEmpty(Model.FotoUrl))
                            {
                                <img src="@Model.FotoUrl" alt="Foto de perfil" />
                            }
                            else
                            {
                                <img src="/Assets/default_avatar.png" alt="Foto de perfil" />
                            }
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="info-label">Nombres</div>
                    <div class="info-value">@Model.Nombres</div>
                </div>
                <div class="col-md-6">
                    <div class="info-label">Apellidos</div>
                    <div class="info-value">@Model.Apellidos</div>
                </div>
                <div class="col-md-6">
                    <div class="info-label">Fecha de Nacimiento</div>
                    <div class="info-value">@Model.FechaNacimiento?.ToString("dd/MM/yyyy")</div>
                </div>
                <div class="col-md-6">
                    <div class="info-label">Género</div>
                    <div class="info-value">@(Model.Genero == "M" ? "Masculino" : "Femenino")</div>
                </div>
                <div class="col-md-12">
                    <div class="info-label">Dirección</div>
                    <div class="info-value">@Model.Direccion</div>
                </div>
            </div>
        </div>

        <!-- Padres / Encargados -->
        <div class="card-custom mb-4">
            <h5 class="card-title mb-4"><i class="bi bi-people me-2 text-info"></i>Padres / Encargados</h5>
            <div class="row g-3">
                <div class="col-md-4">
                    <div class="info-label">Padre</div>
                    <div class="info-value">@(Model.PadreNombre ?? "No registrado")</div>
                </div>
                <div class="col-md-4">
                    <div class="info-label">Madre</div>
                    <div class="info-value">@(Model.MadreNombre ?? "No registrada")</div>
                </div>
                <div class="col-md-4">
                    <div class="info-label">Encargado Principal</div>
                    <div class="info-value">@(Model.EncargadoNombre ?? "No registrado")</div>
                </div>
            </div>
        </div>

        <div class="card-custom">
            <h5 class="card-title mb-4"><i class="bi bi-telephone-outbound me-2 text-danger"></i>Contacto de Emergencia</h5>
            <div class="row g-3">
                <div class="col-md-7">
                    <div class="info-label">Nombre del Responsable</div>
                    <div class="info-value">@(Model.ContactoEmergenciaNombre ?? "No registrado")</div>
                </div>
                <div class="col-md-5">
                    <div class="info-label">Teléfono de Contacto</div>
                    <div class="info-value">@(Model.ContactoEmergenciaTelefono ?? "No registrado")</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Datos de Inscripción -->
    <div class="col-md-4">
        <div class="card-custom mb-4">
            <h5 class="card-title mb-4"><i class="bi bi-clipboard-check me-2 text-success"></i>Inscripción</h5>
            <div class="row g-3">
                <div class="col-md-12">
                    <div class="info-label">Código de Inscripción</div>
                    <div class="info-value fw-bold text-primary">@Model.CodigoInscripcion</div>
                </div>
                <div class="col-md-12">
                    <div class="info-label">Fecha de Inscripción</div>
                    <div class="info-value">@Model.FechaInscripcion.ToString("dd/MM/yyyy")</div>
                </div>
                <div class="col-md-12">
                    <div class="info-label">Nivel / Grado</div>
                    <div class="info-value">@Model.NivelGrado</div>
                </div>
                <div class="col-md-12">
                    <div class="info-label">Estado</div>
                    <div class="info-value">
                        @if (Model.Estado == "ACTIVO")
                        {
                            <span class="badge bg-success">Activo</span>
                        }
                        else if (Model.Estado == "GRADUADO")
                        {
                            <span class="badge bg-primary">Graduado</span>
                        }
                        else
                        {
                            <span class="badge bg-danger">Inactivo</span>
                        }
                    </div>
                </div>
            </div>
        </div>

        <div class="card-custom">
            <h5 class="card-title mb-4"><i class="bi bi-heart-pulse me-2 text-warning"></i>Salud</h5>
            <div class="col-md-12">
                <div class="info-label">Alergias / Condiciones</div>
                <div class="info-value" style="min-height: 100px; align-items: flex-start;">@(Model.Alergias ?? "Ninguna registrada")</div>
            </div>
        </div>
    </div>
</div>
