@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="{{URL::previous()}}" class="btn btn-white btn-dim btn-outline-dark m-1">
              <em class="icon ni ni-arrow-left"></em><span>Retornar</span>
            </a>
            <form method="post" action="{{ route('pacientes.store') }}" class="" enctype="multipart/form-data">
              @csrf
              <div id="mensaje"></div>
              <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">
                    <div class="row">
                      <div class="col-sm-10"><h6><em class="icon ni ni-setting-alt"></em><span>Crear Nuevo Paciente</span></h6></div>
                      <div class="col-sm-2"><h6><span>ID: {{ $idHistorial->historial+1}}</span></h6></div>
                    </div>
                  </div>
                  <div class="card-body px-5">
                    <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="text" 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" >Seguros</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="procedencia" class="col-lg-4 col-form-label" >Procedencia</label>
                          <div class="col-lg-8">
                            <select class="form-select" aria-label="Default select example" id="procedencia" name="procedencia">
                              <option value="">Seleccione una Procedencia</option>
                              <option value="RRSS">RRSS</option>
                              <option value="Referencia Medico">Referencia Medico</option>
                              <option value="Recomendaciones">Recomendaciones</option>
                              <option value="Internet">Internet</option>
                            </select>
                          </div> 
                        </div>
                      </div>
                      <div class="col-lg-6">
                        <div class="mb-3 row">
                          <div class="col-lg-10">
                            <input type="hidden" class="form-control form-control-sm mayusculaTexto" name="historial" value="{{ $idHistorial->historial+1}}">
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-lg-12">
                        <div class="mb-3 row">
                          <label for="lugar" class="col-lg-2 col-form-label">Dirección</label>
                          <div class="col-lg-10">
                            <input type="text" class="form-control form-control-sm mayusculaTexto" id="lugar" name="lugar" value="{{ old('lugar') }}" 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</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-12">
                        <div class="mb-3 row">
                          <label for="alergia" class="col-lg-2 col-form-label">Alergia</label>
                          <div class="col-lg-10">
                            <input type="text" class="form-control form-control-sm mayusculaTexto" id="alergia" name="alergia" value="{{ old('alergia') }}" 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="number" class="form-control form-control-sm" id="telefono" name="telefono" value="{{ old('telefono') }}" autocomplete="off">
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-lg-12">
                        <table class="table">
                          <thead>
                            <tr>
                              <th scope="col">#</th>
                              <th scope="col">Contacto Familiar</th>
                              <th scope="col">Telefono</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                              <th scope="row">1</th>
                              <td><input type="text" class="contactoPaciente" name="familiar1" id="familiar1" autocomplete="off"></td>
                              <td><input type="number" class="contactoPaciente" name="telefono1" id="telefono1" autocomplete="off"></td>
                            </tr>
                            <tr>
                              <th scope="row">2</th>
                              <td><input type="text" class="contactoPaciente" name="familiar2" id="familiar2" autocomplete="off"></td>
                              <td><input type="number" class="contactoPaciente" name="telefono2" id="telefono2" autocomplete="off"></td>
                            </tr>
                          </tbody>
                        </table>
                      </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.addEventListener('DOMContentLoaded', () => {
      document.querySelectorAll('input[type=text]').forEach( node => node.addEventListener('keypress', e => {
        if(e.keyCode == 13) {
          e.preventDefault();
        }
      }))
    });
$(document).ready(function(){
  var nacimiento = $("#nacimiento").val();
  console.log(nacimiento)
  $('#nacimiento').on('keydown', function(event) {
    if (event.which === 9) {  
      var valorInput = $(this).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--;
      }
      $('#edad').val(edad);
      console.log("Edad: " + edad);
    }
  });
})
$(document).ready(function(){
  $('#nombre').on('keydown', function(event) {
    if (event.which === 9) {  
      var paterno = $("#paterno").val();
      var materno = $("#materno").val();
      var nombre = $(this).val();
      console.log(nombre,paterno,materno)
      $.ajax({
        type: "GET",
        url: "../homonimo",
        data: { paterno:paterno,
                materno:materno,
                nombre:nombre},
        dataType: "json",
        success: function (response) {
          console.log(response)
          // Limpia el div #mensaje antes de añadir un nuevo contenido
          $('#mensaje').empty();

          // Si hay pacientes encontrados, muestra un mensaje de éxito con los datos
          if (response.message ==="PACIENTE HOMONIMO ENCONTRADO") {
            $('#mensaje').append('<div class="alert alert-danger" role="alert">'+response.message+'</div>');
              // Aquí puedes agregar más lógica para mostrar los datos de los pacientes si es necesario
          } else {
              // Si no se encontraron pacientes, muestra un mensaje de alerta
              $('#mensaje').append('');
          }
        },
        error: function (error) {
          console.error("Error en la solicitud AJAX:", error);
        },
        });
    }
  });
})

$(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(''); 
      }
    });
  });

</script>
@endsection
@endsection