<!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 - Nueva Medición</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;
            --borde: #e2ebe8;
            --presion: #b86666;
            --glucosa: #4f8b72;
        }

        * {
            box-sizing: border-box;
        }

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

        /* =========================
           NAVBAR
           ========================= */

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

        .navbar-brand {
            font-size: 1.15rem;
        }


        /* =========================
           TARJETA PRINCIPAL
           ========================= */

        .form-card {
            border: none;
            border-radius: 18px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, .06);
        }


        /* =========================
           SECCIONES
           ========================= */

        .section-card {
            border-radius: 14px;
            border: 1px solid var(--borde);
            background: #f8faf9;
        }

        .section-title {
            font-weight: 700;
        }

        .titulo-principal {
            color: #344740;
        }

        .titulo-presion {
            color: var(--presion);
        }

        .titulo-glucosa {
            color: var(--glucosa);
        }


        /* =========================
           CAMPOS
           ========================= */

        .form-label {
            font-weight: 600;
            color: #3e4d48;
        }

        .form-control,
        .form-select {
            border-radius: 10px;
            padding: 10px 12px;
            border-color: #d8e2df;
            background-color: #ffffff;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: #6fae9f;

            box-shadow:
                0 0 0 .2rem
                rgba(47, 125, 109, .15);
        }

        .input-group-text {
            background: #edf3f1;
            border-color: #d8e2df;
            color: #52645e;
        }


        /* =========================
           BOTONES
           ========================= */

        .btn {
            border-radius: 10px;
        }
        .footer-sistema {
    margin-top: 35px;
    padding: 20px 10px;
    border-top: 1px solid var(--borde);
    text-align: center;
    color: #71807c;
    font-size: .85rem;
}

.footer-sistema strong {
    color: #52635e;
}

@media (max-width: 767.98px) {
    .footer-sistema {
        margin-top: 25px;
        padding: 18px 8px;
        font-size: .78rem;
    }
}

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

        .btn-primary:hover,
        .btn-primary:focus {
            background-color: var(--principal-oscuro);
            border-color: var(--principal-oscuro);
        }


        /* =========================
           FECHA Y HORA
           ========================= */

        #fecha_hora {
            cursor: pointer;
        }


        /* =========================
           MÓVIL
           ========================= */

        @media (max-width: 767.98px) {

            .navbar-custom {
                padding: 8px 0;
            }

            .container {
                padding-left: 14px;
                padding-right: 14px;
            }

            .form-card {
                border-radius: 14px;
            }

            .card-body {
                padding: 20px !important;
            }

            .section-card {
                padding: 18px !important;
            }

            .titulo-principal {
                font-size: 1.4rem;
            }

            .section-title {
                font-size: 1.05rem;
            }

            .botones {
                flex-direction: column-reverse;
            }

            .botones .btn {
                width: 100%;
            }

            .navbar .btn {
                font-size: .85rem;
            }

        }

    </style>

</head>


<body>


{{-- ==========================================
     NAVBAR
     ========================================== --}}

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

    <div class="container">

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

        <a
            href="{{ route('mediciones.index') }}"
            class="btn btn-light btn-sm"
        >
            ← Volver
        </a>

    </div>

</nav>



{{-- ==========================================
     CONTENIDO
     ========================================== --}}

<div class="container pb-5">

    <div class="row justify-content-center">

        <div class="col-lg-8">


            <div class="card form-card">

                <div class="card-body p-4 p-md-5">


                    {{-- ==================================
                         TÍTULO
                         ================================== --}}

                    <div class="mb-4">

                        <h1 class="h3 fw-bold titulo-principal mb-1">
                            Nueva medición
                        </h1>

                        <p class="text-muted mb-0">
                            Registre los datos de presión arterial o glucosa.
                        </p>

                    </div>



                    {{-- ==================================
                         ERRORES
                         ================================== --}}

                    @if ($errors->any())

                        <div class="alert alert-danger">

                            <strong>
                                Revise la información:
                            </strong>

                            <ul class="mb-0 mt-2">

                                @foreach ($errors->all() as $error)

                                    <li>
                                        {{ $error }}
                                    </li>

                                @endforeach

                            </ul>

                        </div>

                    @endif



                    {{-- ==================================
                         FORMULARIO
                         ================================== --}}

                    <form
                        method="POST"
                        action="{{ route('mediciones.store') }}"
                    >

                        @csrf



                        {{-- ==================================
                             DATOS GENERALES
                             ================================== --}}

                        <div class="section-card p-4 mb-4">

                            <h5 class="section-title titulo-principal mb-3">
                                👤 Datos generales
                            </h5>


                            <div class="row g-3">


                                {{-- PACIENTE --}}
                                <div class="col-md-6">

                                    <label
                                        for="paciente_id"
                                        class="form-label"
                                    >
                                        Paciente
                                    </label>

                                    <select
                                        id="paciente_id"
                                        name="paciente_id"
                                        class="form-select"
                                        required
                                    >

                                        <option value="">
                                            Seleccione un paciente
                                        </option>

                                        @foreach ($pacientes as $paciente)

                                            <option
                                                value="{{ $paciente->id }}"
                                                @selected(old('paciente_id') == $paciente->id)
                                            >
                                                {{ $paciente->nombre_completo }}
                                            </option>

                                        @endforeach

                                    </select>

                                </div>



                                {{-- RESPONSABLE --}}
                                <div class="col-md-6">

                                    <label
                                        for="responsable_id"
                                        class="form-label"
                                    >
                                        Persona que tomó la medición
                                    </label>

                                    <select
                                        id="responsable_id"
                                        name="responsable_id"
                                        class="form-select"
                                        required
                                    >

                                        <option value="">
                                            Seleccione
                                        </option>

                                        @foreach ($responsables as $responsable)

                                            <option
                                                value="{{ $responsable->id }}"
                                                @selected(old('responsable_id') == $responsable->id)
                                            >
                                                {{ $responsable->nombre_completo }}
                                            </option>

                                        @endforeach

                                    </select>

                                </div>



                                {{-- ==================================
                                     FECHA Y HORA
                                     ================================== --}}

                                <div class="col-md-6">

                                    <label
                                        for="fecha_hora"
                                        class="form-label"
                                    >
                                        📅 Fecha y hora
                                    </label>

                                    <input
                                        id="fecha_hora"
                                        type="datetime-local"
                                        name="fecha_hora"
                                        class="form-control"
                                        value="{{ old('fecha_hora') }}"
                                        required
                                    >

                                    <small class="text-muted">
                                        Se colocará automáticamente la fecha y hora actual.
                                    </small>

                                </div>



                                {{-- TIPO --}}
                                <div class="col-md-6">

                                    <label
                                        for="tipo"
                                        class="form-label"
                                    >
                                        Tipo de medición
                                    </label>

                                    <select
                                        id="tipo"
                                        name="tipo"
                                        class="form-select"
                                        required
                                        onchange="mostrarCampos()"
                                    >

                                        <option
                                            value="presion"
                                            @selected(old('tipo', 'presion') === 'presion')
                                        >
                                            🩸 Presión arterial
                                        </option>

                                        <option
                                            value="glucosa"
                                            @selected(old('tipo') === 'glucosa')
                                        >
                                            🧪 Glucosa
                                        </option>

                                    </select>

                                </div>

                            </div>

                        </div>



                        {{-- ==================================
                             PRESIÓN ARTERIAL
                             ================================== --}}

                        <div
                            id="campos-presion"
                            class="section-card p-4 mb-4"
                        >

                            <h5 class="section-title titulo-presion mb-3">
                                ❤️ Presión arterial
                            </h5>


                            <div class="row g-3">


                                {{-- SISTÓLICA --}}
                                <div class="col-md-4">

                                    <label
                                        for="presion_sistolica"
                                        class="form-label"
                                    >
                                        Presión sistólica
                                    </label>

                                    <div class="input-group">

                                        <input
                                            id="presion_sistolica"
                                            type="number"
                                            name="presion_sistolica"
                                            class="form-control"
                                            value="{{ old('presion_sistolica') }}"
                                            min="0"
                                        >

                                        <span class="input-group-text">
                                            mmHg
                                        </span>

                                    </div>

                                </div>



                                {{-- DIASTÓLICA --}}
                                <div class="col-md-4">

                                    <label
                                        for="presion_diastolica"
                                        class="form-label"
                                    >
                                        Presión diastólica
                                    </label>

                                    <div class="input-group">

                                        <input
                                            id="presion_diastolica"
                                            type="number"
                                            name="presion_diastolica"
                                            class="form-control"
                                            value="{{ old('presion_diastolica') }}"
                                            min="0"
                                        >

                                        <span class="input-group-text">
                                            mmHg
                                        </span>

                                    </div>

                                </div>



                                {{-- PULSO --}}
                                <div class="col-md-4">

                                    <label
                                        for="pulso"
                                        class="form-label"
                                    >
                                        Pulso
                                    </label>

                                    <div class="input-group">

                                        <input
                                            id="pulso"
                                            type="number"
                                            name="pulso"
                                            class="form-control"
                                            value="{{ old('pulso') }}"
                                            min="0"
                                        >

                                        <span class="input-group-text">
                                            lpm
                                        </span>

                                    </div>

                                </div>

                            </div>

                        </div>



                        {{-- ==================================
                             GLUCOSA
                             ================================== --}}

                        <div
                            id="campos-glucosa"
                            class="section-card p-4 mb-4"
                        >

                            <h5 class="section-title titulo-glucosa mb-3">
                                🧪 Glucosa
                            </h5>


                            <div class="row g-3">


                                {{-- GLUCOSA --}}
                                <div class="col-md-6">

                                    <label
                                        for="glucosa"
                                        class="form-label"
                                    >
                                        Nivel de glucosa
                                    </label>

                                    <div class="input-group">

                                        <input
                                            id="glucosa"
                                            type="number"
                                            step="0.01"
                                            name="glucosa"
                                            class="form-control"
                                            value="{{ old('glucosa') }}"
                                            min="0"
                                        >

                                        <span class="input-group-text">
                                            mg/dL
                                        </span>

                                    </div>

                                </div>



                                {{-- MOMENTO DE GLUCOSA --}}
                                <div class="col-md-6">

                                    <label
                                        for="momento_glucosa"
                                        class="form-label"
                                    >
                                        Momento de la medición
                                    </label>

                                    <select
                                        id="momento_glucosa"
                                        name="momento_glucosa"
                                        class="form-select"
                                    >

                                        <option value="">
                                            Seleccione
                                        </option>

                                        <option
                                            value="ayunas"
                                            @selected(old('momento_glucosa') === 'ayunas')
                                        >
                                            En ayunas
                                        </option>

                                        <option
                                            value="antes_comida"
                                            @selected(old('momento_glucosa') === 'antes_comida')
                                        >
                                            Antes de comer
                                        </option>

                                        <option
                                            value="despues_comida"
                                            @selected(old('momento_glucosa') === 'despues_comida')
                                        >
                                            Después de comer
                                        </option>

                                        <option
                                            value="aleatoria"
                                            @selected(old('momento_glucosa') === 'aleatoria')
                                        >
                                            Aleatoria
                                        </option>

                                    </select>

                                </div>

                            </div>

                        </div>



                        {{-- ==================================
                             OBSERVACIONES
                             ================================== --}}

                        <div class="mb-4">

                            <label
                                for="observaciones"
                                class="form-label fw-bold"
                            >
                                Observaciones
                            </label>

                            <textarea
                                id="observaciones"
                                name="observaciones"
                                rows="4"
                                class="form-control"
                                placeholder="Escriba alguna observación..."
                            >{{ old('observaciones') }}</textarea>

                        </div>



                        {{-- ==================================
                             BOTONES
                             ================================== --}}

                        <div class="d-flex justify-content-end gap-2 botones">

                            <a
                                href="{{ route('mediciones.index') }}"
                                class="btn btn-outline-secondary"
                            >
                                Cancelar
                            </a>

                            <button
                                type="submit"
                                class="btn btn-primary px-4"
                            >
                                ✓ Guardar medición
                            </button>

                        </div>


                    </form>

                </div>

            </div>

        </div>

    </div>

</div>



{{-- ==========================================
     JAVASCRIPT
     ========================================== --}}

<script>

    /*
     * Mostrar los campos correspondientes
     * según el tipo de medición.
     */
    function mostrarCampos() {

        const tipo =
            document.getElementById('tipo').value;

        const camposPresion =
            document.getElementById('campos-presion');

        const camposGlucosa =
            document.getElementById('campos-glucosa');


        if (tipo === 'presion') {

            camposPresion.style.display = 'block';

            camposGlucosa.style.display = 'none';

        } else {

            camposPresion.style.display = 'none';

            camposGlucosa.style.display = 'block';

        }

    }



    /*
     * Colocar automáticamente la fecha y hora
     * actual del dispositivo.
     *
     * Solo se ejecuta si el campo está vacío.
     *
     * Esto permite que old('fecha_hora') se conserve
     * cuando Laravel devuelve el formulario con errores.
     */
    function colocarFechaHoraActual() {

        const campoFecha =
            document.getElementById('fecha_hora');


        if (!campoFecha.value) {

            const ahora = new Date();


            const año =
                ahora.getFullYear();


            const mes =
                String(
                    ahora.getMonth() + 1
                ).padStart(2, '0');


            const dia =
                String(
                    ahora.getDate()
                ).padStart(2, '0');


            const hora =
                String(
                    ahora.getHours()
                ).padStart(2, '0');


            const minutos =
                String(
                    ahora.getMinutes()
                ).padStart(2, '0');


            campoFecha.value =
                `${año}-${mes}-${dia}T${hora}:${minutos}`;

        }

    }



    /*
     * Ejecutar cuando se carga la página.
     */
    document.addEventListener(
        'DOMContentLoaded',
        function () {

            mostrarCampos();

            colocarFechaHoraActual();

        }
    );

</script>

<footer class="footer-sistema">
    <div>
        <strong>Control de Salud</strong>
    </div>

    <div>
        Elaborado por <strong>Familia López</strong>
        · Todos los derechos reservados © {{ now()->format('Y') }}
    </div>
</footer>

<script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js">
</script>


</body>

</html>