@model foundation_system.Models.ViewModels.ExpedienteViewModel
@{
    Layout = null;
    var antecedentes = ViewBag.Antecedentes as List<foundation_system.Models.AntecedenteNino>;
}

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Imprimir Expediente - @Model.CodigoInscripcion</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
    <style>
        @@media print {
            .no-print { display: none !important; }
            body { padding: 0; margin: 0; }
            .container { width: 100% !important; max-width: none !important; }
            .card { border: none !important; }
            .badge { border: 1px solid #000; color: #000 !important; background: none !important; }
        }
        body {
            background-color: white;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .print-header {
            border-bottom: 2px solid #0d6efd;
            margin-bottom: 2rem;
            padding-bottom: 1rem;
        }
        .photo-box {
            width: 120px;
            height: 120px;
            border: 2px solid #dee2e6;
            border-radius: 8px;
            overflow: hidden;
        }
        .photo-box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .section-title {
            background-color: #f8f9fa;
            padding: 0.5rem 1rem;
            border-left: 4px solid #0d6efd;
            margin-top: 1.5rem;
            margin-bottom: 1rem;
            font-weight: bold;
            text-transform: uppercase;
            font-size: 0.9rem;
        }
        .info-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
        }
        .info-item {
            margin-bottom: 0.5rem;
        }
        .info-label {
            font-weight: 600;
            font-size: 0.8rem;
            color: #6c757d;
            display: block;
        }
        .info-value {
            font-size: 1rem;
            color: #212529;
        }
        .table-antecedentes {
            font-size: 0.85rem;
        }
    </style>
</head>
<body>
    <div class="container my-4">
        <div class="no-print text-end mb-4">
            <button onclick="window.print()" class="btn btn-primary">
                <i class="bi bi-printer me-2"></i>Imprimir Ahora
            </button>
            <button onclick="window.close()" class="btn btn-outline-secondary">
                <i class="bi bi-x-lg me-2"></i>Cerrar
            </button>
        </div>

        <div class="print-header d-flex justify-content-between align-items-center">
            <div>
                <h1 class="h3 mb-0 text-primary">EXPEDIENTE</h1>
                <p class="text-muted mb-0">Fundación MIES - Sistema de Gestión</p>
            </div>
            <div class="text-end">
                <div class="fw-bold">Código: @Model.CodigoInscripcion</div>
                <div class="small text-muted">Fecha Impresión: @DateTime.Now.ToString("dd/MM/yyyy HH:mm")</div>
            </div>
        </div>

        <div class="row">
            <div class="col-3">
                <div class="photo-box mx-auto">
                    @if (!string.IsNullOrEmpty(Model.FotoUrl))
                    {
                        <img src="@Model.FotoUrl" alt="Foto" />
                    }
                    else
                    {
                        <img src="/Assets/default_avatar.png" alt="Foto" />
                    }
                </div>
                <div class="text-center mt-2">
                    <span class="badge @(Model.Estado == "ACTIVO" ? "bg-success" : "bg-secondary")">
                        @Model.Estado
                    </span>
                </div>
            </div>
            <div class="col-9">
                <div class="section-title">Información Personal</div>
                <div class="info-grid">
                    <div class="info-item">
                        <span class="info-label">Nombres</span>
                        <span class="info-value">@Model.Nombres</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Apellidos</span>
                        <span class="info-value">@Model.Apellidos</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Fecha de Nacimiento</span>
                        <span class="info-value">@Model.FechaNacimiento?.ToString("dd/MM/yyyy")</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Género</span>
                        <span class="info-value">@(Model.Genero == "M" ? "Masculino" : "Femenino")</span>
                    </div>
                    <div class="info-item" style="grid-column: span 2;">
                        <span class="info-label">Dirección</span>
                        <span class="info-value">@Model.Direccion</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-6">
                <div class="section-title">Padres y Encargados</div>
                <div class="info-item">
                    <span class="info-label">Padre</span>
                    <span class="info-value">@(Model.PadreNombre ?? "N/A")</span>
                </div>
                <div class="info-item">
                    <span class="info-label">Madre</span>
                    <span class="info-value">@(Model.MadreNombre ?? "N/A")</span>
                </div>
                <div class="info-item">
                    <span class="info-label">Encargado Principal</span>
                    <span class="info-value">@(Model.EncargadoNombre ?? "N/A")</span>
                </div>
            </div>
            <div class="col-6">
                <div class="section-title">Inscripción y Salud</div>
                <div class="info-item">
                    <span class="info-label">Fecha de Inscripción</span>
                    <span class="info-value">@Model.FechaInscripcion.ToString("dd/MM/yyyy")</span>
                </div>
                <div class="info-item">
                    <span class="info-label">Nivel / Grado</span>
                    <span class="info-value">@Model.NivelGrado</span>
                </div>
                <div class="info-item">
                    <span class="info-label">Alergias / Condiciones</span>
                    <span class="info-value">@(Model.Alergias ?? "Ninguna")</span>
                </div>
            </div>
        </div>

        <div class="section-title">Historial de Antecedentes</div>
        @if (antecedentes != null && antecedentes.Any())
        {
            <table class="table table-bordered table-sm table-antecedentes">
                <thead class="table-light">
                    <tr>
                        <th>Fecha</th>
                        <th>Tipo</th>
                        <th>Descripción</th>
                        <th>Gravedad</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in antecedentes)
                    {
                        <tr>
                            <td>@item.FechaIncidente.ToString("dd/MM/yyyy")</td>
                            <td>@item.TipoAntecedente</td>
                            <td>@item.Descripcion</td>
                            <td>
                                <span class="badge @(item.Gravedad == "Alta" ? "bg-danger" : item.Gravedad == "Media" ? "bg-warning text-dark" : "bg-info text-dark")">
                                    @item.Gravedad
                                </span>
                            </td>
                        </tr>
                    }
                </tbody>
            </table>
        }
        else
        {
            <p class="text-muted italic">No se registran antecedentes para este niño(a).</p>
        }

        <div class="mt-5 pt-5">
            <div class="row text-center">
                <div class="col-4">
                    <div style="border-top: 1px solid #000; width: 80%; margin: 0 auto;"></div>
                    <div class="small">Firma del Encargado</div>
                </div>
                <div class="col-4">
                    <div style="border-top: 1px solid #000; width: 80%; margin: 0 auto;"></div>
                    <div class="small">Firma Director(a)</div>
                </div>
                <div class="col-4">
                    <div style="border-top: 1px solid #000; width: 80%; margin: 0 auto;"></div>
                    <div class="small">Sello de la Fundación</div>
                </div>
            </div>
        </div>
    </div>

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
