@extends('layouts.app')
<style>
      .preview-container img {
        border-radius: 50%;
        width: 250px; /* Ajusta el tamaño de la imagen según sea necesario */
        height: 250px;
        object-fit: cover; /* Ajusta la imagen para cubrir el contenedor */
    }
    .note-editor.note-frame .note-editing-area .note-editable p {
    margin: 0; /* Ajusta este valor según sea necesario */
  }
  .note-editor .note-toolbar .note-btn {
      font-size: 10px; /* Reduce el tamaño de la fuente de los botones */
      padding: 4px 9px; /* Ajusta el padding para reducir el tamaño del botón */
    }

    .note-editor .note-toolbar i {
      font-size: 10px; /* Reduce el tamaño de los iconos */
    }
  input[type="file"] {
              display: block;
              margin: 0 auto 20px;
              padding: 10px;
              border: 1px solid #ccc;
              border-radius: 4px;
              width: 100%;
              cursor: pointer;
          }
          .preview {
              display: flex;
              flex-wrap: wrap;
              gap: 10px;
              justify-content: center;
              margin-bottom: 20px;
          }
  
          .preview .img-container {
              position: relative;
              width: 250px;
              height: 250px;
          }
  
          .preview img {
              width: 250px;
              height: 250px;
              border-radius: 8px;
              object-fit: cover;
          }
  
          .preview .close-btn {
              position: absolute;
              top: 5px;
              right: 5px;
              background-color: rgba(255, 255, 255, 0.7);
              border: none;
              border-radius: 50%;
              width: 20px;
              height: 20px;
              font-size: 14px;
              cursor: pointer;
              line-height: 20px;
              text-align: center;
              padding: 0;
          }
  
          .preview .close-btn:hover {
              background-color: rgba(255, 0, 0, 0.7);
              color: #fff;
          }
          .verticalText {
                transform: rotate(270deg);
                }
            .estilotabla{
                border: 1px solid black;
                border-collapse: collapse;
                border-radius: 10px;
                float: left;
                margin-right: 15px;
                width: 30%; /* ajusta el ancho según tu necesidad */
                overflow: hidden;

            }
            .clearfix::after {
			content: "";
			clear: both;
			display: block;
		    }
                    .table1 {
                    border-collapse: collapse;
                    border-radius: 10px;
                    overflow: hidden;
                }
                
                .th1, .td1 {
                    border: 1px solid #ccc;
                    padding: 10px;
                    text-align: center;
                }
                
                .th1 {
                    background-color: #ccc;
                    border-top: none;
                    border-left: none;
                    border-right: none;
                }
                .flex-container {
                    display: -webkit-flex;
                    display: flex;
                    -webkit-flex-direction: row;
                    flex-direction: row;
                    -webkit-justify-content: space-around;
                    justify-content: space-around;
                }
                .flex-item {
                    float: left;
                }
                .flex-item1 {
                    width: 20px;
                    height: 103px;
                    background-color: rgb(136, 136, 136);
                    margin: 0px;
                    float: left;
                    border-left: 0.5px solid rgb(51, 51, 51); /* Línea izquierda */
                    border-top: 0.5px solid rgb(51, 51, 51); /* Línea superior */
                    border-bottom: 0.5px solid rgb(51, 51, 51); /* Línea inferior */
                    border-top-left-radius: 10px;
                    border-bottom-left-radius: 10px;
                }
                .flex-item2 {
                    width: 350px;
                    height: 130px;
                    background-color: rgb(255, 255, 255);
                    margin-left: 0px;
                    float: left;
                    border-right: 0.5px solid rgb(51, 51, 51); /* Línea izquierda */
                    border-top: 0.5px solid rgb(51, 51, 51); /* Línea superior */
                    border-bottom: 0.5px solid rgb(51, 51, 51); /* Línea inferior */
                    border-top-right-radius: 10px;
                    border-bottom-right-radius: 10px;
                    margin-right: 40px;
                }
                .vertical-text {
                    transform: rotate(270deg); /* Rotar 270 grados */
                    text-align: center;
                }
                .title {
                    page-break-after: always;
                    }

                .encabezado{
                  height: 100px;
                  width: 114px;
                  position: relative;
                  right: 8px;
                  color: aliceblue;
                }
/* Estilos para teléfonos (hasta 600px) */
@media (max-width: 600px) {
  .flex-item2 {
                    width: 250px;
                    height: 98px;
                    background-color: rgb(255, 255, 255);
                    margin-left: 0px;
                    float: left;
                    border-right: 0.5px solid rgb(51, 51, 51); /* Línea izquierda */
                    border-top: 0.5px solid rgb(51, 51, 51); /* Línea superior */
                    border-bottom: 0.5px solid rgb(51, 51, 51); /* Línea inferior */
                    border-top-right-radius: 10px;
                    border-bottom-right-radius: 10px;
                    margin-right: 40px;
                    margin-bottom: 10px;
                }
}
  /*encabezado contenido*/

  .encabezadoTitulo{
    margin:5px 10px ; 
    font-size:12px;
    text-transform: uppercase;
  }
  .negrillaTitulo{
    font-size:12px;
    font-weight: normal
  }
  .encabezadoDetalle{
    font-size: 12px
  }
  </style>
@section('content')
<form id="miFormulario" action="{{ route('guardarInformacion')}}" method="post" enctype="multipart/form-data">
  @csrf
  <input type="hidden" name="tipo" value="1">
  <input type="hidden" name="estado" value="0">
<div class="nk-content">
  <div class="nk-block-head-sub">
    <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>
    <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>
    <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>
  </div>
    <div class="container-fluid">
      <div class="nk-content-inner">
        <div class="nk-content-body">
            <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" style="background: black">
                    <h6><em class="icon ni ni-setting-alt"></em><span>INFORME PATOLOGICO S.S.U. - LA PAZ</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="{{$datos[0]->paterno}}" name="paterno" autocomplete="off" disabled>
                          </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" disabled>
                          </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" disabled>
                          </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" disabled>
                          </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}}" autocomplete="off" disabled>
                          </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" disabled>
                          </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" disabled>
                              <option value="4">S.S.U. - LA PAZ</option>
                            </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">N° Asegurado</label>
                          <div class="col-lg-8">
                            <input type="text" class="form-control form-control-sm mayusculaTexto" id="asegurado1" name="asegurado1" value="{{$datos[0]->asegurado1}}" autocomplete="off" disabled>
                          </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"> ID Muestra</label>
                          <div class="col-lg-8">
                            <input type="text" class="form-control form-control-sm mayusculaTexto" id="registro" name="registro"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">Tipo de Muestra</label>
                          <div class="col-lg-8">
                            <input type="text" class="form-control form-control-sm mayusculaTexto" id="tipo_muestra" name="tipo_muestra" 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"> Fecha de Ingreso</label>
                            <div class="col-lg-8">
                              <input type="date" class="form-control form-control-sm mayusculaTexto" id="visita" name="visita"autocomplete="off" value="{{now()}}">
                            </div>
                          </div>
                        </div>
                        <div class="col-lg-6">
                          <div class="mb-3 row">
                            <label for="telefono" class="col-lg-4 col-form-label">Servicio</label>
                            <div class="col-lg-8">
                              <input type="text" class="form-control form-control-sm mayusculaTexto" id="proveniencia" name="proveniencia" 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">Solicitud</label>
                            <div class="col-lg-8">
                              <input type="text" class="form-control form-control-sm mayusculaTexto" id="remitente" name="remitente"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">Diagnostico</label>
                            <div class="col-lg-8">
                              <input type="text" class="form-control form-control-sm mayusculaTexto" id="diagnostico" name="diagnostico" autocomplete="off">
                            </div>
                          </div>
                        </div>
                    </div>
                    <input type="hidden" name="idpaciente" id="idpaciente" value="{{$id}}">
                    <input type="hidden" name="idusuario" id="idusuario" value="{{Auth::user()->id}}">
                    <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>
        </div>
      </div>
    </div>
</div>
</div>
</form>
@section('js1')
<script>
var now = new Date();
    // Formatear la fecha y hora para el input datetime-local
    var year = now.getFullYear();
    var month = String(now.getMonth() + 1).padStart(2, '0');
    var day = String(now.getDate()).padStart(2, '0');
    var hours = String(now.getHours()).padStart(2, '0');
    var minutes = String(now.getMinutes()).padStart(2, '0');
    
    var formattedDateTime = `${year}-${month}-${day}T${hours}:${minutes}`;
    // Establecer el valor del input
    $('#visita').val(formattedDateTime);
</script>
@endsection
@endsection