<!DOCTYPE html>
<html lang="es">
<head>

    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >

    <title>Flia López - Vista previa - Excel</title>
     {{-- FAVICON --}}
    {{-- ICONO DE LA PÁGINA --}}
    <link
        rel="icon"
        type="image/png"
        sizes="32x32"
        href="{{ asset('images/medicina.png') }}?v=10"
    >

    <link
        rel="shortcut icon"
        type="image/png"
        href="{{ asset('images/medicina.png') }}?v=10"
    >

    <link
        rel="apple-touch-icon"
        href="{{ asset('images/medicina.png') }}?v=10"
    >



    <link
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
        rel="stylesheet"
    >


    <style>

        :root {
            --principal: #2f7d6d;
            --principal-oscuro: #25665a;
            --fondo: #f4f7f6;
            --texto: #26332f;
        }


        body {
            background: var(--fondo);
            color: var(--texto);
            font-family: Arial, sans-serif;
        }


        .navbar-custom {
            background: linear-gradient(
                135deg,
                var(--principal),
                var(--principal-oscuro)
            );
        }


        .contenedor {
            max-width: 1200px;
            margin: 30px auto;
            padding: 0 15px;
        }


        .card-custom {
            background: white;
            border: none;
            border-radius: 16px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, .05);
            overflow: hidden;
        }


        .tabla-contenedor {
            overflow-x: auto;
        }


        .table {
            margin-bottom: 0;
            min-width: 850px;
        }


        .table thead th {
            background: #edf3f1;
            color: #40534d;
            white-space: nowrap;
            padding: 13px;
        }


        .table tbody td {
            vertical-align: middle;
            padding: 13px;
        }


        .badge-presion {
            background: #b86666;
            color: white;
            padding: 6px 9px;
            border-radius: 8px;
        }


        .badge-glucosa {
            background: #4f8b72;
            color: white;
            padding: 6px 9px;
            border-radius: 8px;
        }


        .acciones {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }


        .btn {
            border-radius: 10px;
        }


        .btn-descargar {
            background: var(--principal);
            border-color: var(--principal);
            color: white;
        }


        .btn-descargar:hover {
            background: var(--principal-oscuro);
            border-color: var(--principal-oscuro);
            color: white;
        }


        .vacio {
            padding: 60px 20px;
            text-align: center;
        }


        @media (max-width: 767.98px) {

            .contenedor {
                margin-top: 20px;
            }


            .titulo {
                font-size: 1.3rem;
            }


            .acciones {
                flex-direction: column;
            }


            .acciones .btn {
                width: 100%;
            }

        }

    </style>

</head>


<body>


<nav class="navbar navbar-dark navbar-custom">

    <div class="container">

        <span class="navbar-brand fw-bold">
            🩺 Control de Salud - Familia López
        </span>

    </div>

</nav>


<div class="contenedor">


    {{-- CABECERA --}}
    <div class="card-custom p-4 mb-4">

        <div
            class="d-flex justify-content-between align-items-center flex-wrap gap-3"
        >

            <div>

                <h1 class="titulo h3 fw-bold mb-1">
                    Vista previa de Excel
                </h1>

                <p class="text-muted mb-0">
                    Revise los registros antes de descargar el archivo.
                </p>

            </div>


            <div class="acciones">

                {{-- VOLVER --}}
                <a
                    href="{{ route(
                        'mediciones.index',
                        request()->query()
                    ) }}"
                    class="btn btn-outline-secondary"
                >
                    ← Volver
                </a>


                {{-- DESCARGAR --}}
                <a
                    href="{{ route(
                        'mediciones.exportar.excel.descargar',
                        request()->query()
                    ) }}"
                    class="btn btn-descargar"
                >
                    📊 Descargar Excel
                </a>

            </div>

        </div>

    </div>


    {{-- TABLA --}}
    <div class="card-custom">

        <div class="tabla-contenedor">

            @if ($mediciones->count())

                <table class="table table-hover">

                    <thead>

                        <tr>

                            <th>
                                Fecha y hora
                            </th>

                            <th>
                                Paciente
                            </th>

                            <th>
                                Tipo
                            </th>

                            <th>
                                Resultado
                            </th>

                            <th>
                                Responsable
                            </th>

                            <th>
                                Observaciones
                            </th>

                        </tr>

                    </thead>


                    <tbody>

                    @foreach ($mediciones as $medicion)

                        <tr>

                            {{-- FECHA --}}
                            <td>

                                <strong>
                                    {{ $medicion->fecha_hora->format('d/m/Y') }}
                                </strong>

                                <br>

                                <small class="text-muted">
                                    {{ $medicion->fecha_hora->format('H:i') }}
                                </small>

                            </td>


                            {{-- PACIENTE --}}
                            <td>

                                {{ $medicion->paciente->nombre_completo }}

                            </td>


                            {{-- TIPO --}}
                            <td>

                                @if ($medicion->tipo === 'presion')

                                    <span class="badge-presion">
                                        Presión
                                    </span>

                                @else

                                    <span class="badge-glucosa">
                                        Glucosa
                                    </span>

                                @endif

                            </td>


                            {{-- RESULTADO --}}
                            <td>

                                @if ($medicion->tipo === 'presion')

                                    {{ $medicion->presion_sistolica }}/{{ $medicion->presion_diastolica }}
                                    mmHg

                                    @if ($medicion->pulso)

                                        <br>

                                        <small class="text-muted">
                                            Pulso:
                                            {{ $medicion->pulso }}
                                            lpm
                                        </small>

                                    @endif

                                @else

                                    {{ $medicion->glucosa }}
                                    mg/dL

                                    @if ($medicion->momento_glucosa)

                                        <br>

                                        <small class="text-muted">
                                            {{ str_replace(
                                                '_',
                                                ' ',
                                                $medicion->momento_glucosa
                                            ) }}
                                        </small>

                                    @endif

                                @endif

                            </td>


                            {{-- RESPONSABLE --}}
                            <td>

                                {{ $medicion->responsable->nombre_completo }}

                            </td>


                            {{-- OBSERVACIONES --}}
                            <td>

                                {{ $medicion->observaciones ?: 'Sin observaciones' }}

                            </td>

                        </tr>

                    @endforeach

                    </tbody>

                </table>

            @else

                <div class="vacio">

                    <div style="font-size: 45px;">
                        📋
                    </div>

                    <h5 class="mt-3">
                        No existen mediciones
                    </h5>

                    <p class="text-muted">
                        No hay registros que coincidan con los filtros seleccionados.
                    </p>

                </div>

            @endif

        </div>

    </div>

</div>


</body>
</html>