@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.update',$Datos[0]->id) }}" class="" enctype="multipart/form-data">
                @csrf
                @method('PUT')
              <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>Editar Paciente</span></h6></div>
                      <div class="col-sm-2"><h6><span>ID: {{$Datos[0]->historial}}</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="{{$Datos[0]->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="{{$Datos[0]->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="{{$Datos[0]->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="{{$Datos[0]->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="{{$Datos[0]->edad}}">
                          </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="{{$Datos[0]->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" >Seguro</label>
                          <div class="col-lg-8">
                            <select class="form-select" aria-label="Default select example" id="institucion" name="idinstitucion">
                              <option value="{{$Datos[0]->idinstitucion}}">{{$Datos[0]->nombreInstituto}}</option>
                              @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="{{$Datos[0]->procedencia}}">{{$Datos[0]->procedencia}}</option>
                              <option value="RRSS">RRSS</option>
                              <option value="Referencia Medic">Referencia Medico</option>
                              <option value="Recomendaciones">Recomendaciones</option>
                              <option value="Internet">Internet</option>
                            </select>
                          </div> 
                        </div>
                        <input type="hidden" class="form-control form-control-sm mayusculaTexto" name="historial" value="{{$Datos[0]->historial}}">
                      </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="{{$Datos[0]->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="{{$Datos[0]->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="{{$Datos[0]->alergia}}" autocomplete="off">
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-lg-6">
                        <div class="mb-3 row">
                          <label for="alergia" 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="{{$Datos[0]->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="{{$Datos[0]->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" value="{{$Datos[0]->familiar1}}"></td>
                              <td><input type="number" class="contactoPaciente" name="telefono1" id="telefono1" value="{{$Datos[0]->telefono1}}" ></td>
                            </tr>
                            <tr>
                              <th scope="row">2</th>
                              <td><input type="text" class="contactoPaciente" name="familiar2" id="familiar2" value="{{$Datos[0]->familiar2}}" ></td>
                              <td><input type="number" class="contactoPaciente" name="telefono2" id="telefono2" value="{{$Datos[0]->telefono2}}" ></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).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){
        console.log('Valor seleccionado:', selectedValue);
        $('#institucionLabel').text('N° Asegurado');
      }
      else{
        $('#institucionLabel').text('ID Historial');
      }
    });
  });

</script>
@endsection
@endsection