@extends('layouts.app')
<style>
    .bordados {
        border-radius: 15px !important;
        /* Radio del borde */
    }

    .bordados-header {
        border-top-left-radius: 15px !important;
        /* Borde superior izquierdo */
        border-top-right-radius: 15px !important;
        /* Borde superior derecho */
        padding: 16px 16px !important;
        background: #212121 !important;
    }
</style>

@section('content')
    <div class="nk-content">
        <div class="container-fluid">
            <div class="nk-content-inner">
                <div class="nk-content-body">
                    <div class="nk-block">
                        <a href="{{ route('dashboard') }}" class="btn btn-white btn-dim btn-outline-dark m-1">
                            <em class="icon ni ni-home"></em><span>Home</span>
                        </a>
                        <a href="{{ route('informaciones') }}" class="btn btn-white btn-dim btn-outline-dark m-1">
                            <em class="icon ni ni-arrow-left"></em><span>Retornar</span>
                        </a>

                        <a href="{{ route('informaciones') }}" class="btn btn-white btn-dim btn-outline-danger m-1">
                            <em class="icon ni ni-cross-circle"></em><span>Salir</span>
                        </a>
                        <form method="post" action="{{ route('pacientes.store') }}" class=""
                            enctype="multipart/form-data">
                            @csrf
                            <div class="container d-flex justify-content-center align-items-center mt-5">
                                <div class="card bordados border shadow-lg">
                                    <div class="card-header bordados-header text-white">
                                        <h6><em class="icon ni ni-setting-alt"></em><span>Crear Nuevo Paciente</span></h6>
                                    </div>

                                    <div class="card-body px-5">
                                        <div class="mb-3">
                                            <ul class="nav nav-tabs">
                                                <li class="nav-item"> <a class="nav-link active" data-bs-toggle="tab"
                                                        href="#form-paciente"><em class="icon ni ni-user"></em><span>Datos
                                                            Paciente</span></a> </li>
                                                <li class="nav-item"> <a class="nav-link" data-bs-toggle="tab"
                                                        href="#form-pareja"><em class="icon ni ni-users"></em><span>Datos
                                                            Pareja</span></a> </li>
                                            </ul>
                                        </div>
                                        {{-- CONTENIDO DE LOS FORMULARIOS --}}
                                        <div class="tab-content">
                                            {{-- FORMULARIO DEL PACIENTE --}}
                                            <div class="tab-pane active" id="form-paciente">
                                                <div class="row">
                                                    <div class="col-lg-12">
                                                        <div class="mb-3 row">
                                                            <label for="paterno" class="col-lg-2 col-form-label">Apellido
                                                                Pat.</label>
                                                            <div class="col-lg-10">
                                                                <input type="text"
                                                                    class="form-control form-control-sm mayusculaTexto"
                                                                    id="paterno" value="{{ old('paterno') }}"
                                                                    name="paterno" autocomplete="off">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-12">
                                                        <div class="mb-3 row">
                                                            <label for="materno" class="col-lg-2 col-form-label">Apellido
                                                                Mat.</label>
                                                            <div class="col-lg-10">
                                                                <input type="text"
                                                                    class="form-control form-control-sm mayusculaTexto"
                                                                    id="materno" value="{{ old('materno') }}"
                                                                    name="materno" autocomplete="off">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-12">
                                                        <div class="mb-3 row">
                                                            <label for="nombre"
                                                                class="col-lg-2 col-form-label">Nombre(s)</label>
                                                            <div class="col-lg-10">
                                                                <input type="text"
                                                                    class="form-control form-control-sm mayusculaTexto"
                                                                    id="nombre" value="{{ old('nombre') }}"
                                                                    name="nombre" autocomplete="off">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-6">
                                                        <div class="mb-3 row">
                                                            <label for="nacimiento" class="col-lg-4 col-form-label">F.
                                                                Nacimiento</label>
                                                            <div class="col-lg-8">
                                                                <input type="date"
                                                                    class="form-control form-control-sm mayusculaTexto"
                                                                    id="nacimiento" value="{{ old('nacimiento') }}"
                                                                    name="nacimiento" autocomplete="off">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-3">
                                                        <div class="mb-3 row">
                                                            <label for="edad"
                                                                class="col-lg-4 col-form-label">Edad</label>
                                                            <div class="col-lg-8">
                                                                <input type="number"
                                                                    class="form-control form-control-sm mayusculaTexto"
                                                                    id="edad" name="edad"
                                                                    value="{{ old('edad') }}" autocomplete="off">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-3">
                                                        <div class="mb-3 row">
                                                            <label for="sexo"
                                                                class="col-lg-4 col-form-label">Sexo</label>
                                                            <div class="col-lg-8">
                                                                <input type="text"
                                                                    class="form-control form-control-sm mayusculaTexto"
                                                                    id="sexo" value="{{ old('sexo') }}"
                                                                    name="sexo" autocomplete="off">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-6">
                                                        <div class="mb-3 row">
                                                            <label for="idinstitucion"
                                                                class="col-lg-4 col-form-label">Institución</label>
                                                            <div class="col-lg-8">
                                                                <select class="form-select"
                                                                    aria-label="Default select example" id="institucion"
                                                                    name="idinstitucion">
                                                                    @foreach ($institucion as $item)
                                                                        <option value="{{ $item->id }}">
                                                                            {{ $item->nombreInstituto }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="mb-3 row">
                                                            <label for="seguro"
                                                                class="col-lg-2 col-form-label">Seguro</label>
                                                            <div class="col-lg-10">
                                                                <select class="form-select"
                                                                    aria-label="Default select example" id="seguro"
                                                                    name="seguro">
                                                                    @foreach ($seguros as $seguro)
                                                                        <option value="{{ $seguro->id }}">
                                                                            {{ $seguro->nombre }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="mb-3 row">
                                                            <label for="edad" class="col-lg-4 col-form-label"
                                                                id="institucionLabel">ID Historial</label>
                                                            <div class="col-lg-8">
                                                                <input type="hidden"
                                                                    class="form-control form-control-sm mayusculaTexto"
                                                                    name="historial"
                                                                    value="{{ $idHistorial->historial + 1 }}">
                                                                <input type="text"
                                                                    class="form-control form-control-sm mayusculaTexto"
                                                                    id="historial" name="historial"
                                                                    value="{{ $idHistorial->historial + 1 }}" disabled
                                                                    autocomplete="off">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-12">
                                                        <div class="mb-3 row">
                                                            <label for="diagnostico"
                                                                class="col-lg-2 col-form-label">Diagnostico Inicial</label>
                                                            <div class="col-lg-10">
                                                                <input type="text"
                                                                    class="form-control form-control-sm mayusculaTexto"
                                                                    id="diagnostico" name="diagnostico"
                                                                    value="{{ old('diagnostico') }}" autocomplete="off">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-6">
                                                        <div class="mb-3 row">
                                                            <label for="ci" class="col-lg-4 col-form-label">
                                                                C.I.</label>
                                                            <div class="col-lg-8">
                                                                <input type="text"
                                                                    class="form-control form-control-sm mayusculaTexto"
                                                                    id="ci" name="ci"
                                                                    value="{{ old('ci') }}" autocomplete="off">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="mb-3 row">
                                                            <label for="telefono" class="col-lg-4 col-form-label">Celular
                                                                Paciente</label>
                                                            <div class="col-lg-8">
                                                                <input type="text"
                                                                    class="form-control form-control-sm mayusculaTexto"
                                                                    id="telefono" name="telefono"
                                                                    value="{{ old('telefono') }}" autocomplete="off">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-6">
                                                        <div class="mb-3 row">
                                                            <label for="direccion"
                                                                class="col-lg-4 col-form-label">Dirección</label>
                                                            <div class="col-lg-8">
                                                                <input type="text"
                                                                    class="form-control form-control-sm mayusculaTexto"
                                                                    id="direccion" name="direccion"
                                                                    value="{{ old('direccion') }}" autocomplete="off">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="mb-3 row">
                                                            <label for="profesion"
                                                                class="col-lg-4 col-form-label">Ocupación Paciente</label>
                                                            <div class="col-lg-8">
                                                                <input type="text"
                                                                    class="form-control form-control-sm mayusculaTexto"
                                                                    id="profesion" name="profesion"
                                                                    value="{{ old('profesion') }}" autocomplete="off">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>


                                            {{-- #region FORMULARIO DE LA PAREJA --}}

                                            <div class="tab-pane " id="form-pareja">
                                                <div class="row">
                                                    <div class="col-lg-12">
                                                        <div class="mb-3 row">
                                                            <label for="paterno_pareja"
                                                                class="col-lg-3 col-form-label">Apellido Pat.</label>
                                                            <div class="col-lg-9">
                                                                <input type="text"
                                                                    class="form-control form-control-sm mayusculaTexto"
                                                                    id="paterno_pareja"
                                                                    value="{{ old('paterno_pareja') }}"
                                                                    name="paterno_pareja" autocomplete="off">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-12">
                                                        <div class="mb-3 row">
                                                            <label for="materno_pareja"
                                                                class="col-lg-3 col-form-label">Apellido Mat.</label>
                                                            <div class="col-lg-9">
                                                                <input type="text"
                                                                    class="form-control form-control-sm mayusculaTexto"
                                                                    id="materno_pareja"
                                                                    value="{{ old('materno_pareja') }}"
                                                                    name="materno_pareja" autocomplete="off">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-12">
                                                        <div class="mb-3 row">
                                                            <label for="nombre_pareja"
                                                                class="col-lg-3 col-form-label">Nombre(s)</label>
                                                            <div class="col-lg-9">
                                                                <input type="text"
                                                                    class="form-control form-control-sm mayusculaTexto"
                                                                    id="nombre_pareja" value="{{ old('nombre_pareja') }}"
                                                                    name="nombre_pareja" autocomplete="off">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-7">
                                                        <div class="mb-3 row">
                                                            <label for="nacimiento_pareja"
                                                                class="col-lg-5 col-form-label">F. Nacimiento</label>
                                                            <div class="col-lg-7">
                                                                <input type="date"
                                                                    class="form-control form-control-sm mayusculaTexto"
                                                                    id="nacimiento_pareja"
                                                                    value="{{ old('nacimiento_pareja') }}"
                                                                    name="nacimiento_pareja" autocomplete="off">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-5">
                                                        <div class="mb-3 row">
                                                            <label for="edad_pareja"
                                                                class="col-lg-4 col-form-label">Edad</label>
                                                            <div class="col-lg-8">
                                                                <input type="number"
                                                                    class="form-control form-control-sm mayusculaTexto"
                                                                    id="edad_pareja" name="edad_pareja"
                                                                    value="{{ old('edad_pareja') }}" autocomplete="off">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-7">
                                                        <div class="mb-3 row">
                                                            <label for="ci_pareja" class="col-lg-5 col-form-label">
                                                                C.I.</label>
                                                            <div class="col-lg-7">
                                                                <input type="text"
                                                                    class="form-control form-control-sm mayusculaTexto"
                                                                    id="ci_pareja" name="ci_pareja"
                                                                    value="{{ old('ci') }}" autocomplete="off">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-5">
                                                        <div class="mb-3 row">
                                                            <label for="telefono_pareja"
                                                                class="col-lg-4 col-form-label">Celular</label>
                                                            <div class="col-lg-8">
                                                                <input type="text"
                                                                    class="form-control form-control-sm mayusculaTexto"
                                                                    id="telefono_pareja" name="telefono_pareja"
                                                                    value="{{ old('telefono_pareja') }}"
                                                                    autocomplete="off">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-12">
                                                        <div class="mb-3 row">
                                                            <label for="profesion_pareja"
                                                                class="col-lg-3 col-form-label">Ocupación</label>
                                                            <div class="col-lg-9">
                                                                <input type="text"
                                                                    class="form-control form-control-sm mayusculaTexto"
                                                                    id="profesion_pareja"
                                                                    value="{{ old('profesion_pareja') }}"
                                                                    name="profesion_pareja" autocomplete="off">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-12">
                                                        <div class="mb-3 row">
                                                            <label for="direccion_pareja"
                                                                class="col-lg-3 col-form-label">Dirección</label>
                                                            <div class="col-lg-9">
                                                                <input type="text"
                                                                    class="form-control form-control-sm mayusculaTexto"
                                                                    id="direccion_pareja"
                                                                    value="{{ old('direccion_pareja') }}"
                                                                    name="direccion_pareja" autocomplete="off">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="d-flex flex-row-reverse bd-highlight">
                                            <button type="submit" class="btn btn-white btn-dim btn-outline-dark m-1">
                                                <em class="icon ni ni-save"></em><span>Guardar</span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@section('js1')
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {

            //Para paciente
            $('#nacimiento').on('input', debounce(() => {
                calcularEdad('#nacimiento', '#edad');
            }, 500));

            // Aplicar debounce a la función
            $('#nacimiento_pareja').on('input', debounce(() => {
                calcularEdad('#nacimiento_pareja', '#edad_pareja');
            }, 500));

            /* Para la pareja */
            // Función para calcular la edad
            function calcularEdad(inputFecha, inputEdad) {
                var valorInput = $(inputFecha).val();
                console.log(valorInput);

                var fechaNacimiento = new Date(valorInput);
                var fechaActual = new Date();
                var edad = fechaActual.getFullYear() - fechaNacimiento.getFullYear();
                var mesActual = fechaActual.getMonth();
                var diaActual = fechaActual.getDate();
                var mesNacimiento = fechaNacimiento.getMonth();
                var diaNacimiento = fechaNacimiento.getDate();

                if (mesActual < mesNacimiento || (mesActual === mesNacimiento && diaActual < diaNacimiento)) {
                    edad--;
                }

                $(inputEdad).val(edad);
                console.log("Edad: " + edad);
            }



        })

        $(document).ready(function() {
            $('#institucion').change(function() {
                var selectedValue = $(this).val();
                if (selectedValue == 4) {
                    $('#institucionLabel').text('N° Asegurado');
                    $('#historial')
                        .prop('disabled', false) // Habilitar el input
                        .attr('name', 'asegurado1') // Cambiar el atributo name
                        .val('');
                } else {
                    $('#institucionLabel').text('ID Historial');
                    $('#historial')
                        .prop('disabled', false) // Habilitar el input
                        .attr('name', 'asegurado1') // Cambiar el atributo name
                        .val('');
                }
            });
        });

        function debounce(func, delay) {
            let timeout;
            return function(...args) {
                clearTimeout(timeout);
                timeout = setTimeout(() => func.apply(this, args), delay);
            };
        }
    </script>
@endsection
@endsection