@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: 300px;
                    height: 103px;
                    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;
                }
}
 .encabezadoTitulo{
    margin:5px 10px ; 
    font-size:12px;
    text-transform: uppercase;
  }
  .negrillaTitulo{
    font-size:12px;
    font-weight: normal
  }
  .encabezadoDetalle{
    font-size: 12px
  }
</style>
@section('content')
<div class="nk-content">
    <div class="container-fluid">
      <div class="nk-content-inner">
        <div class="nk-content-body ">
          <div class="d-flex justify-content-center w-55">
            <div class="w-100 bd-highlight">
              <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>
              <button type="button" class="btn btn-white btn-dim btn-outline-dark m-1" onclick="guardarEdicion({{$id}})"><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>
          <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" value="{{$datos[0]->registro}}">
                                </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" value="{{$datos[0]->tipo_muestra}}">
                                </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="{{$datos[0]->visita}}">
                                  </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" value="{{$datos[0]->proveniencia}}">
                                  </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" value="{{$datos[0]->remitente}}">
                                  </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" value="{{$datos[0]->diagnostico_peticion}}">
                                  </div>
                                </div>
                              </div>
                          </div>
                          <input type="hidden" name="idpaciente" id="idpaciente" value="{{$id}}">
                          <input type="hidden" name="idpeticion" id="idpeticion" value="{{$id}}">
                          <input type="hidden" name="idusuario" id="idusuario" value="{{Auth::user()->id}}">
                        </div>
                      </div>
                    </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</div>
</div>
@section('js1')
<script>
function guardarEdicion(idPeticion) {
    var idpeticion=$("#idpeticion").val();
    var idInterpretacion=$("#idInterpretacion").val();
    var registro= $("#registro").val();
    var proveniencia= $("#proveniencia").val();
    var remitente= $("#remitente").val();
    var tipo_muestra = $("#tipo_muestra").val();
    var diagnostico_peticion=$("#diagnostico").val();
    var visita=$("#visita").val();
    $.ajax({
        type: "PUT",
        url: "../citologicos/"+1,
        data: {
              idpeticion:idpeticion,
              idInterpretacion:idInterpretacion,
              registro:registro,
              proveniencia:proveniencia,
              remitente:remitente,
              tipo_muestra:tipo_muestra,
              diagnostico_peticion:diagnostico_peticion,
              visita:visita,
            },
        dataType: "json",
        headers: {
            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
        },
        success: function(response) {
            console.log(response);
            Swal.fire({
                title: "Atención",
                text: 'Información editada correctamente',
                position: 'top-end',
                showConfirmButton: false,
                timer: 1000
            });
        },
        error: function(error) {
            console.error(error);
        }
    });
}

</script>
@endsection
@endsection