@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="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" >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="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</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="ci" class="col-lg-4 col-form-label"> Ocupación</label>
                            <div class="col-lg-8">
                              <input type="text" class="form-control form-control-sm mayusculaTexto" id="civil" name="civil" value="{{ old('civil') }}" autocomplete="off">
                            </div>
                          </div>
                        </div>
                    </div>
                    <div id="inputs-container">
                      
                        <!-- Aquí se agregarán los inputs -->
                      </div>
                    <div class="d-flex flex-row-reverse bd-highlight">
                        <button type="button" class="btn btn-white btn-dim btn-outline-dark m-1" id="toggle-input">Adicionar Esposo</button>
                      <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(){
  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() {
    $('#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(''); 
      }
    });
  });

  $(document).ready(function() {
    var contadorInputs = 0;

    $('#toggle-input').click(function() {
      console.log($(this).text())
        if ($(this).text() === 'Adicionar Esposo') {
            // Creamos un nuevo conjunto de inputs
            var nuevoInput = $(`
                <div class="nuevo-input">
                    <hr>
                    <h6><em class="icon ni ni-setting-alt"></em><span>Adicionar Datos del Esposo</span></h6>
                    <input type="hidden" name="existe" value="1">
                    <div class="card-body px-5">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="mb-3 row">
                                    <label for="paterno_esposo" 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_esposo" name="paterno_esposo" autocomplete="off">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="mb-3 row">
                                    <label for="materno_esposo" 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_esposo" name="materno_esposo" autocomplete="off">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="mb-3 row">
                                    <label for="nombre_esposo" 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_esposo" name="nombre_esposo" autocomplete="off">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="mb-3 row">
                                    <label for="ocupacion" class="col-lg-2 col-form-label">Ocupación</label>
                                    <div class="col-lg-10">
                                        <input type="text" class="form-control form-control-sm mayusculaTexto" id="ocupacion" name="ocupacion" autocomplete="off">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                          <div class="col-lg-6">
                            <div class="mb-3 row">
                              <label for="nacimiento_esposo" 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_esposo" name="nacimiento_esposo" autocomplete="off">
                              </div>
                            </div>
                          </div>
                          <div class="col-lg-3">
                            <div class="mb-3 row">
                              <label for="edad_esposo" 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_esposo" name="edad_esposo" autocomplete="off">
                              </div>
                            </div>
                          </div>
                          <div class="col-lg-3">
                            <div class="mb-3 row">
                              <label for="ci_esposo" class="col-lg-4 col-form-label">CI</label>
                              <div class="col-lg-8">
                                <input type="text" class="form-control form-control-sm mayusculaTexto" id="ci_esposo" name="ci_esposo" autocomplete="off">
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="mb-3 row">
                                    <label for="telefono_esposo" class="col-lg-2 col-form-label">Telefono</label>
                                    <div class="col-lg-10">
                                        <input type="text" class="form-control form-control-sm mayusculaTexto" id="telefono_esposo" name="telefono_esposo" autocomplete="off">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="mb-3 row">
                                    <label for="direccion_esposo" 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="direccion_esposo" name="direccion_esposo" autocomplete="off">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Añade aquí los otros campos de entrada según tu estructura -->
                    </div>
                </div>
            `);
            
            // Agregamos el nuevo input al contenedor
            $('#inputs-container').append(nuevoInput);

            // Incrementamos el contador de inputs
            contadorInputs++;

            // Cambiamos el texto del botón a "Quitar Campos"
            $(this).text('Quitar Campos');
        } else {
            // Eliminamos todos los inputs agregados
            $('#inputs-container').empty();

            // Reiniciamos el contador de inputs
            contadorInputs = 0;

            // Cambiamos el texto del botón a "Agregar Campos"
            $(this).text('Adicionar Esposo');
        }
    });

    // Evento delegado para eliminar campos al hacer clic en un botón de eliminar
    $('#inputs-container').on('click', '.eliminar-input', function() {
        $(this).closest('.nuevo-input').remove();
    });
});
</script>
@endsection
@endsection