@extends('layouts.app')
<style>
      .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: 115px;
                    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: 115px;
                    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('citologicos.store')}}" method="post" enctype="multipart/form-data">
  @csrf
<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="nk-block">
            <div class="row g-gs">
              <div class="col-xxl-12 col-sm-12">
                <div class="card border shadow-sm rounded-5 p-2">
                  <div class="nk-ecwg nk-ecwg6">
                    <div class="card-inner">
                      <div class="card-title-group">
                        <div class="card-title">
                            <h6 class="titulo"><em class="icon ni ni-user-alt"></em><span>INFORME DE ESTUDIO CITOLÓGICO</span></h6>
                        </div>
                      </div>
                      <div class="container-fluid">
                        <div class="row justify-content-center">
                          <div class="container-fluid">
                            <div>
                              <div class="flex-item1">
                                <p class="vertical-text encabezado">MEDICO</p>
                              </div>
                              <div class="flex-item2">
                                <h5 class="encabezadoTitulo" style="text-transform: uppercase;"> {{$medico[0]->nombreMedico}}</h5>
                                <h5 class="encabezadoTitulo"><small class="negrillaTitulo">{{$medico[0]->colegialo}}</small></h5>
                                <h5 class="encabezadoTitulo"><small class="negrillaTitulo">{{$medico[0]->direccion}}</small></h5>
                                <h5 class="encabezadoTitulo"><small class="negrillaTitulo">{{$medico[0]->telefono}}</small></h5>
                              </div>
                            </div>
                            <div>
                              <div>
                                <div class="flex-item1">
                                  <p class="vertical-text encabezado">PACIENTE</p>
                              </div>
                                                            <div class="flex-item2">
                                  <h5 class="encabezadoTitulo">{{$datos[0]->paterno}} {{$datos[0]->materno}} {{$datos[0]->nombre}}</h5>
                                  @if ($datos[0]->nacimiento !=NULL)
                                  <h5 class="encabezadoTitulo">FN: <small class="encabezadoDetalle"><input class="estiloEntrada" type="date" name ="nacimiento" id ="nacimiento" value="{{$datos[0]->nacimiento}}"></small>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Edad:<small class="encabezadoDetalle"> {{$diferenciaAnios}}</small></h5>
                                  @else
                                  <h5 class="encabezadoTitulo"> Edad:<small class="encabezadoDetalle"><input  class="estiloEntrada" type="number" name="edad" id="edad" style="text-transform: uppercase" autocomplete="off" value="{{$datos[0]->edad}}"></small></h5>
                                  @endif
                                  @if ($datos[0]->idinstitucion == 4)
                                  <h5 class="encabezadoTitulo">Mat. Asegurado: <small class="encabezadoDetalle"><input  class="estiloEntrada" type="text" name="asegurado1" id="asegurado1" style="text-transform: uppercase" autocomplete="off" value="{{$datos[0]->asegurado1}}"></small></h5>
                                  @else
                                  <h5 class="encabezadoTitulo">N° Historial: <small class="encabezadoDetalle"><input  class="estiloEntrada" type="text" name="asegurado1" id="asegurado1" style="text-transform: uppercase" autocomplete="off" value="{{$datos[0]->historial}}"></small></h5>
                                  @endif
                                  <h5 class="encabezadoTitulo">Sexo: <small class="encabezadoDetalle"><input  class="estiloEntrada" type="text" name="sexo" id="sexo" style="text-transform: uppercase" autocomplete="off" value="{{$datos[0]->sexo}}"></small></h5>
                                  <h5 class="encabezadoTitulo">Diagnostico:<small class="encabezadoDetalle"><input  class="estiloEntrada" type="text" name="diagnostico" id="diagnostico" style="text-transform: uppercase" autocomplete="off"></small></h5>
                              </div>
                              </div>
                            </div>
                            <div>
                              <div>
                                <div class="flex-item1">
                                  <p class="vertical-text encabezado">MUESTRA</p>
                              </div>
                              <div class="flex-item2">
                                  <h5 class="encabezadoTitulo">Muestra ID: <em class="icon ni ni-pen2"></em><small class="encabezadoDetalle"><input class="estiloEntrada" type="text" name="registro" id="registro" value="" style="text-transform: uppercase" autocomplete="off"></small></h5>
                                 
                                  <h5 class="encabezadoTitulo">Fecha de Recibido: <small class="encabezadoDetalle">  </small><input class="estiloEntrada" type="date" name="visita" id="visita" style="text-transform: uppercase" autocomplete="off"></h5>
                                  <h5 class="encabezadoTitulo">Fecha de Reporte: <small class="encabezadoDetalle">  </small><input class="estiloEntrada" type="date" name="validado" id="validado" style="text-transform: uppercase" autocomplete="off"></h5>
                                  @if ($datos[0]->idinstitucion == 4)
                                  <h5 class="encabezadoTitulo">Unidad: <em class="icon ni ni-pen2"></em><small class="encabezadoDetalle"><input  class="estiloEntrada" type="text" name="proveniencia" id="proveniencia" style="text-transform: uppercase" autocomplete="off"></small></h5>
                                  @else
                                  <h5 class="encabezadoTitulo">Proveniencia: <em class="icon ni ni-pen2"></em><small class="encabezadoDetalle"><input  class="estiloEntrada" type="text" name="proveniencia" id="proveniencia" style="text-transform: uppercase" autocomplete="off"></small></h5>
                                  @endif
                                  <h5 class="encabezadoTitulo">Remitente: <em class="icon ni ni-pen2"></em><small class="encabezadoDetalle"><input class="estiloEntrada" type="text" name="remitente" id="remitente" style="text-transform: uppercase" autocomplete="off"></small></h5>
                              </div>
                              </div>
                            </div>
                          </div>
                            <div class="col-12 col-md-12">
                                <input type="hidden" name="idpaciente" id="idpaciente" value="{{$id}}">
                                <input type="datetime-local" class="form-control form-control-sm" id="visita" name="visita" hidden>
                                  <div class="container-fluid" style="width: 100%">
                                    <div style="margin-top: 15px">
                                        <h6 style="margin-left: 0px; margin-right: 100px; font-size: 14px;padding-left:5px; background: rgb(255, 255, 255);border-radius: 5px;color:#000000">HALLAZGOS MICROSCÓPICOS E INTERPRETACIÓN</h6>
                                        <div class="mb-3 row">
                                            <label for="examen" class="col-sm-2 col-form-label">Examen citólogico de: </label>
                                            <div class="col-sm-6">
                                              <input type="text" class="form-control" id="examen" name="examen" value="Exocervix - Endocervix">
                                            </div>
                                        </div>
                                        <div class="mb-3 row">
                                            <label for="calidad" class="col-sm-2 col-form-label">Calidad de muestra: </label>
                                            <div class="col-sm-6">
                                              <input type="text" class="form-control" id="calidad" name="calidad" value="Satisfactoria">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="container-fluid">
                                        <div class="row">
                                          <div class="col-md-4">
                                            <table class="table table-sm">
                                                <thead class="table-light">
                                                  <tr>
                                                    <th scope="col">CLASIFICACIÓN BEHESDA</th>
                                                    <th scope="col" style="width: 0px"></th>
                                                  </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                      <td class="celdaPersonalizada">Negativo para lesión intraepitelial o malignidad <input type="hidden" name="descripcion[]" value="Negativo para lesión intraepitelial o malignidad"></td>
                                                      <td class="celdaPersonalizada"><input class="form-check-input" type="checkbox" name="estado1" onchange="this.value = this.checked ? 1 : 0;"></td>
                                                    </tr>
                                                    <tr class="row2">
                                                      <td colspan="2" rowspan="3">
                                                        <p style="margin: 0;padding:0"> <strong>ANOMALÍA EN CÉLULAS EPITELIALES</strong></p> 
                                                        <p style="margin: 0;padding:0; text-decoration: underline"><strong>ESCAMOSAS</strong></p>
                                                        <ul class="list list-sm">
                                                          <li><strong>Celulas escamosas atípicas (ASC)</strong></li> 
                                                        </ul>
                                                      </td>
                                                    </tr>
                                                    <tr class="row3">
                                                     
                                                      
                                                    </tr>
                                                    <tr class="row4">
                                                      
                                                      
                                                    </tr>
                                                    <tr class="row5">
                                                      <td>
                                                        <ul class="list list-sm" style="padding-left: 15px">
                                                          <li> De significado indeterminado (ASC US) <input type="hidden" name="descripcion[]" value="De significado indeterminado (ASC US)"></li>
                                                        </ul>
                                                       </td>
                                                      <td ><input class="form-check-input estado-checkbox" type="checkbox" name="estado2"></td>
                                                      
                                                    </tr>
                                                    <tr class="row6">
                                                      <td>
                                                        <ul class="list list-sm" style="padding-left: 15px">
                                                          <li>No puede excluirse H-SIL (ASC-H)<input type="hidden" name="descripcion[]" value="No puede excluirse H-SIL (ASC-H)"></li> 
                                                        </ul>
                                                      </td>
                                                      <td ><input class="form-check-input estado-checkbox" type="checkbox" name="estado3" onchange="this.value = this.checked ? 1 : 0;"></td>
                                                      
                                                    </tr>
                                                    <tr class="row7">
                                                      <td colspan="2">
                                                        <ul class="list list-sm">
                                                          <li><strong>Lesión intraepitelial escamosa de bajo grado (L-SIL)</strong></li> 
                                                        </ul>
                                                      </td>
                                                    </tr>
                                                    <tr class="row8">
                                                      <td>
                                                        <ul class="list list-sm" style="padding-left: 15px">
                                                          <li> NIC: Displasia leve<input type="hidden" name="descripcion[]" value="NIC: Displasia leve"></li>
                                                        </ul>
                                                      </td>
                                                      <td ><input class="form-check-input" type="checkbox" value="" name="estado4" onchange="this.value = this.checked ? 1 : 0;"></td>
                                                      
                                                    </tr>
                                                    <tr class="row9">
                                                      <td>
                                                        <ul class="list list-sm" style="padding-left: 15px">
                                                          <li>Papiloma Virus Humano (HPV)<input type="hidden" name="descripcion[]" value="Papiloma Virus Humano (HPV)"></li>
                                                        </ul>
                                                      </td>
                                                      <td ><input class="form-check-input" type="checkbox" value="" name="estado5" onchange="this.value = this.checked ? 1 : 0;"></td>
                                                    </tr>
                                                    <tr class="row10">
                                                      <td colspan="2">
                                                        <ul class="list list-sm">
                                                          <li><strong>Lesión intraepitelial escamosa de alto grado (H-SIL)</strong></li>
                                                        </ul>
                                                      </td>
                                                    </tr>
                                                    <tr class="row11">
                                                      <td>
                                                        <ul class="list list-sm" style="padding-left: 15px">
                                                          <li>NIC2 : Displasia Moderada<input type="hidden" name="descripcion[]" value="NIC2 : Displasia Moderada"></li>
                                                        </ul>
                                                      </td>
                                                      <td><input class="form-check-input" type="checkbox" value="" name="estado6" onchange="this.value = this.checked ? 1 : 0;"></td>
                                                      
                                                    </tr>
                                                    <tr class="row12">
                                                      <td>
                                                        <ul class="list list-sm" style="padding-left: 15px">
                                                        <li>NIC3  : Displasia severa y carcinoma in situ (SIC)<input type="hidden" name="descripcion[]" value="NIC3  : Displasia severa y carcinoma in situ (SIC)"></li>
                                                        </ul>
                                                        </td>
                                                      <td><input class="form-check-input" type="checkbox" value="" name="estado7" onchange="this.value = this.checked ? 1 : 0;"></td>
                                                    </tr>
                                                    <tr class="row13">
                                                      <td><ul class="list list-sm" style="padding-left: 15px">
                                                          <li>Con caracteristicas sugestivas De invasión<input type="hidden" name="descripcion[]" value="Con caracteristicas sugestivas De invasión"></li>
                                                        </ul>
                                                        </td>
                                                      <td><input class="form-check-input" type="checkbox" value="" name="estado8" onchange="this.value = this.checked ? 1 : 0;"></td>
                                                    </tr>
                                                    <tr class="row14">
                                                      <td>
                                                        <ul class="list list-sm">
                                                          <li><strong>Carcinoma escamoso</strong><input type="hidden" name="descripcion[]" value="Carcinoma escamoso"></li>
                                                        </ul>
                                                      </td>
                                                      <td><input class="form-check-input" type="checkbox" value="" name="estado9" onchange="this.value = this.checked ? 1 : 0;"></td>
                                                    </tr>
                                                    <tr class="row15">
                                                      <td colspan="2" rowspan="3">
                                                        <p style="margin: 0;padding:0"><strong>ANOMALÍA EN CÉLULAS EPITELIALES GLANDULARES</strong></p>
                                                        <p style="margin: 0;padding:0; text-decoration: underline"><strong>GLANDULARES</strong></p>
                                                        <ul class="list list-sm">
                                                          <li><strong>Células glandulares atípicas (AGC)</strong></li>
                                                        </ul>
                                                      </td>
                                                    </tr>
                                                    <tr class="row15">
                                                      </tr>
                                                    <tr class="row16">
                                                    </tr>
                                                    <tr class="row17">
                                                      <td>
                                                        <ul class="list list-sm" style="padding-left: 15px">
                                                          <li>Endocervicales<input type="hidden" name="descripcion[]" value="Endocervicales"></li>
                                                        </ul>
                                                      </td>
                                                      <td ><input class="form-check-input" type="checkbox" value="" name="estado10" onchange="this.value = this.checked ? 1 : 0;"></td>
                                                      
                                                    </tr>
                                                    <tr class="row18">
                                                      <td>
                                                        <ul class="list list-sm" style="padding-left: 15px">
                                                          <li>Endometriales<input type="hidden" name="descripcion[]" value="Endometriales"></li>
                                                        </ul>
                                                      </td>
                                                      <td><input class="form-check-input" type="checkbox" value="" name="estado11" onchange="this.value = this.checked ? 1 : 0;"></td>
                                                      
                                                    </tr>
                                                    <tr class="row19">
                                                      <td><ul class="list list-sm" style="padding-left: 15px">
                                                        <li>Glandulares<input type="hidden" name="descripcion[]" value="Glandulares"></li></ul></td>
                                                      <td><input class="form-check-input" type="checkbox" value="" name="estado12" onchange="this.value = this.checked ? 1 : 0;"></td>
                                                      
                                                    </tr>
                                                    <tr class="row20">
                                                      <td>
                                                        <ul class="list list-sm">
                                                          <li><strong>Células atípicas sugestivas de neoplasia</strong></li></ul></td>
                                                      <td ></td>
                                                      
                                                    </tr>
                                                    <tr class="row21">
                                                      <td ><ul class="list list-sm" style="padding-left: 15px">
                                                        <li>Endocervicales<input type="hidden" name="descripcion[]" value="Endocervicales"></li></ul></td>
                                                      <td ><input class="form-check-input" type="checkbox" value="" name="estado13" onchange="this.value = this.checked ? 1 : 0;"></td>
                                                      
                                                    </tr>
                                                    <tr class="row22">
                                                      <td><ul class="list list-sm" style="padding-left: 15px">
                                                        <li>Glandulares<input type="hidden" name="descripcion[]" value="Glandulares"></li></ul></td>
                                                      <td ><input class="form-check-input" type="checkbox" value="" name="estado14" onchange="this.value = this.checked ? 1 : 0;"></td>
                                                      
                                                    </tr>
                                                    <tr class="row23">
                                                      <td><ul class="list list-sm">
                                                        <li><strong>Adenocarcinoma endocervical in situ (AIS)</strong></li></ul></td>
                                                      <td></td>
                                                    </tr>
                                                    <tr class="row24">
                                                      <td><ul class="list list-sm" style="padding-left: 15px">
                                                        <li>Adenocarcinoma<input type="hidden" name="descripcion[]" value="Adenocarcinoma"></li></ul></td>
                                                      <td><input class="form-check-input" type="checkbox" value="" name="estado15" onchange="this.value = this.checked ? 1 : 0;"></td>
                                                      
                                                    </tr>
                                                    <tr class="row25">
                                                      <td><ul class="list list-sm" style="padding-left: 15px">
                                                        <li>Endocervical<input type="hidden" name="descripcion[]" value="Endocervical"></li></ul></td>
                                                      <td><input class="form-check-input" type="checkbox" value="" name="estado16" onchange="this.value = this.checked ? 1 : 0;"></td>
                                                      
                                                    </tr>
                                                    <tr class="row26">
                                                      <td><ul class="list list-sm" style="padding-left: 15px">
                                                        <li>Endometrial<input type="hidden" name="descripcion[]" value="Endometrial"></li></ul></td>
                                                      <td ><input class="form-check-input" type="checkbox" value="" name="estado17" onchange="this.value = this.checked ? 1 : 0;"></td>
                                                      
                                                    </tr>
                                                    <tr class="row27">
                                                      <td ><ul class="list list-sm" style="padding-left: 15px">
                                                        <li>Extrauterino<input type="hidden" name="descripcion[]" value="Extrauterino"></li></td>
                                                      <td ><input class="form-check-input" type="checkbox" value="" name="estado18" onchange="this.value = this.checked ? 1 : 0;"></td>
                                                      
                                                    </tr>
                                                    <tr class="row28">
                                                      <td><ul class="list list-sm">
                                                        <li><strong>No específico (NOS)</strong></li></ul></td>
                                                      <td ></td>
                                                      
                                                    </tr>
                                                    <tr class="row29">
                                                      <td><ul class="list list-sm" style="padding-left: 15px">
                                                        <li>Otras neoplasias<input type="hidden" name="descripcion[]" value="Otras neoplasias"></li></ul></td>
                                                      <td ><input class="form-check-input" type="checkbox" value="" name="estado19" onchange="this.value = this.checked ? 1 : 0;"></td>
                                                      
                                                    </tr>
                                                </tbody>
                                            </table>
                                          </div>
                                          <div class="col-md-4">
                                            <table class="table table-sm">
                                                <thead class="table-light">
                                                  <tr>
                                                    <th scope="col">CÉLULAS Y MICROORGANISMOS</th>
                                                    <th scope="col" style="width: 90px"></th>
                                                  </tr>
                                                </thead>
                                                <tbody>
                                                    <tr class="row1">
                                                      <td>Neutrófilos<input type="hidden" name="descripcion[]" value="Neutrófilos"></td>
                                                      <td >
                                                        <input class="form-check-input" type="checkbox" name="estado201" id="estado201" onchange="this.value = this.checked ? 1 : 0;">
                                                        <input class="form-check-input" type="checkbox" name="estado202" id="estado202" onchange="this.value = this.checked ? 1 : 0;">
                                                        <input class="form-check-input" type="checkbox" name="estado203" id="estado203" onchange="this.value = this.checked ? 1 : 0;">
                                                      </td>
                                                      
                                                    </tr>
                                                    <tr class="row2">
                                                      <td>Linfocitos<input type="hidden" name="descripcion[]" value="Linfocitos"></td>
                                                      <td >
                                                        <input class="form-check-input" type="checkbox" name="estado211" id="estado211" onchange="this.value = this.checked ? 1 : 0;">
                                                        <input class="form-check-input" type="checkbox" name="estado212" id="estado212" onchange="this.value = this.checked ? 1 : 0;">
                                                        <input class="form-check-input" type="checkbox" name="estado213" id="estado213" onchange="this.value = this.checked ? 1 : 0;">
                                                      </td>
                                                    </tr>
                                                    <tr class="row3">
                                                      <td>Eritrocitos<input type="hidden" name="descripcion[]" value="Eritrocitos"></td>
                                                      <td >
                                                        <input class="form-check-input" type="checkbox" name="estado221" id="estado221" onchange="this.value = this.checked ? 1 : 0;">
                                                        <input class="form-check-input" type="checkbox" name="estado222" id="estado222" onchange="this.value = this.checked ? 1 : 0;">
                                                        <input class="form-check-input" type="checkbox" name="estado223" id="estado223" onchange="this.value = this.checked ? 1 : 0;">
                                                      </td>
                                                    </tr>
                                                    <tr class="row4">
                                                      <td>Eosinofilos<input type="hidden" name="descripcion[]" value="Eosinofilos"></td>
                                                      <td >
                                                        <input class="form-check-input" type="checkbox" name="estado231" id="estado231" onchange="this.value = this.checked ? 1 : 0;">
                                                        <input class="form-check-input" type="checkbox" name="estado232" id="estado232" onchange="this.value = this.checked ? 1 : 0;">
                                                        <input class="form-check-input" type="checkbox" name="estado233" id="estado233" onchange="this.value = this.checked ? 1 : 0;">
                                                      </td>
                                                    </tr>
                                                    <tr class="row5">
                                                      <td class="column0">&nbsp;</td>
                                                      <td ></td>
                                                    </tr>
                                                    <tr class="row6">
                                                      <td>Doederlein (Lactobacilo)<input type="hidden" name="descripcion[]" value="Doederlein (Lactobacilo)"></td>
                                                      <td >
                                                        <input class="form-check-input" type="checkbox" name="estado241" id="estado241" onchange="this.value = this.checked ? 1 : 0;">
                                                        <input class="form-check-input" type="checkbox" name="estado242" id="estado242" onchange="this.value = this.checked ? 1 : 0;">
                                                        <input class="form-check-input" type="checkbox" name="estado243" id="estado243" onchange="this.value = this.checked ? 1 : 0;">
                                                      </td>
                                                    </tr>
                                                    <tr class="row7">
                                                      <td>Flora bacteriana mixta<input type="hidden" name="descripcion[]" value="Flora bacteriana mixta"></td>
                                                      <td>
                                                        <input class="form-check-input" type="checkbox" name="estado251" id="estado251" onchange="this.value = this.checked ? 1 : 0;">
                                                        <input class="form-check-input" type="checkbox" name="estado252" id="estado252" onchange="this.value = this.checked ? 1 : 0;">
                                                        <input class="form-check-input" type="checkbox" name="estado253" id="estado253" onchange="this.value = this.checked ? 1 : 0;">
                                                      </td>
                                                    </tr>
                                                    <tr class="row8">
                                                      <td>Cocos<input type="hidden" name="descripcion[]" value="Cocos"></td>
                                                      <td>
                                                        <input class="form-check-input" type="checkbox" name="estado261" id="estado261" onchange="this.value = this.checked ? 1 : 0;">
                                                        <input class="form-check-input" type="checkbox" name="estado262" id="estado262" onchange="this.value = this.checked ? 1 : 0;">
                                                        <input class="form-check-input" type="checkbox" name="estado263" id="estado263" onchange="this.value = this.checked ? 1 : 0;">
                                                      </td>
                                                    </tr>
                                                    <tr class="row9">
                                                      <td>Bacilos<input type="hidden" name="descripcion[]" value="Bacilos"></td>
                                                      <td>
                                                        <input class="form-check-input" type="checkbox" name="estado271" id="estado271" onchange="this.value = this.checked ? 1 : 0;">
                                                        <input class="form-check-input" type="checkbox" name="estado272" id="estado272" onchange="this.value = this.checked ? 1 : 0;">
                                                        <input class="form-check-input" type="checkbox" name="estado273" id="estado273" onchange="this.value = this.checked ? 1 : 0;">
                                                      </td>
                                                    </tr>
                                                    <tr class="row10">
                                                      <td>Gardenella Vaginalis<input type="hidden" name="descripcion[]" value="Gardenella Vaginalis"></td>
                                                      <td>
                                                        <input class="form-check-input" type="checkbox" name="estado281" id="estado281" onchange="this.value = this.checked ? 1 : 0;">
                                                        <input class="form-check-input" type="checkbox" name="estado282" id="estado282" onchange="this.value = this.checked ? 1 : 0;">
                                                        <input class="form-check-input" type="checkbox" name="estado283" id="estado283" onchange="this.value = this.checked ? 1 : 0;">
                                                      </td>
                                                    </tr>
                                                    <tr class="row11">
                                                      <td>Trichomona vaginalis<input type="hidden" name="descripcion[]" value="Trichomona vaginalis"></td>
                                                      <td>
                                                        <input class="form-check-input" type="checkbox" name="estado291" id="estado291" onchange="this.value = this.checked ? 1 : 0;">
                                                        <input class="form-check-input" type="checkbox" name="estado292" id="estado292" onchange="this.value = this.checked ? 1 : 0;">
                                                        <input class="form-check-input" type="checkbox" name="estado293" id="estado293" onchange="this.value = this.checked ? 1 : 0;">
                                                      </td>
                                                    </tr>
                                                    <tr class="row12">
                                                      <td>Candida albicans<input type="hidden" name="descripcion[]" value="Candida albicans"></td>
                                                      <td >
                                                        <input class="form-check-input" type="checkbox" name="estado301" id="estado301" onchange="this.value = this.checked ? 1 : 0;">
                                                        <input class="form-check-input" type="checkbox" name="estado302" id="estado302" onchange="this.value = this.checked ? 1 : 0;">
                                                        <input class="form-check-input" type="checkbox" name="estado303" id="estado303" onchange="this.value = this.checked ? 1 : 0;">
                                                      </td>
                                                    </tr>
                                                    <tr class="row13">
                                                      <td>Candida glabrata<input type="hidden" name="descripcion[]" value="Candida glabrata"></td>
                                                      <td >
                                                        <input class="form-check-input" type="checkbox" name="estado311" id="estado311" onchange="this.value = this.checked ? 1 : 0;">
                                                        <input class="form-check-input" type="checkbox" name="estado312" id="estado312" onchange="this.value = this.checked ? 1 : 0;">
                                                        <input class="form-check-input" type="checkbox" name="estado313" id="estado313" onchange="this.value = this.checked ? 1 : 0;">
                                                      </td>
                                                    </tr>
                                                    <tr class="row14">
                                                      <td>Herpes virus (HSV)<input type="hidden" name="descripcion[]" value="Herpes virus (HSV)"></td>
                                                      <td >
                                                        <input class="form-check-input" type="checkbox" name="estado321" id="estado321" onchange="this.value = this.checked ? 1 : 0;">
                                                        <input class="form-check-input" type="checkbox" name="estado322" id="estado322" onchange="this.value = this.checked ? 1 : 0;">
                                                        <input class="form-check-input" type="checkbox" name="estado323" id="estado323" onchange="this.value = this.checked ? 1 : 0;">
                                                      </td>
                                                    </tr>
                                                    <tr class="row15">
                                                      <td>Leptotix<input type="hidden" name="descripcion[]" value="Leptotix"></td>
                                                      <td>
                                                        <input class="form-check-input" type="checkbox" name="estado331" id="estado331" onchange="this.value = this.checked ? 1 : 0;">
                                                        <input class="form-check-input" type="checkbox" name="estado332" id="estado332" onchange="this.value = this.checked ? 1 : 0;">
                                                        <input class="form-check-input" type="checkbox" name="estado333" id="estado333" onchange="this.value = this.checked ? 1 : 0;">
                                                      </td>
                                                    </tr>
                                                    <tr class="row16">
                                                      <td>Chlamydia<input type="hidden" name="descripcion[]" value="Chlamydia"></td>
                                                      <td>
                                                        <input class="form-check-input" type="checkbox"  name="estado341" id="estado341" onchange="this.value = this.checked ? 1 : 0;">
                                                        <input class="form-check-input" type="checkbox"  name="estado342" id="estado342" onchange="this.value = this.checked ? 1 : 0;">
                                                        <input class="form-check-input" type="checkbox"  name="estado343" id="estado343" onchange="this.value = this.checked ? 1 : 0;">
                                                      </td>
                                                    </tr>
                                                    <tr class="row17">
                                                      <td>Otros<input type="hidden" name="descripcion[]" value="Otros"></td>
                                                      <td >
                                                        <input class="form-check-input" type="checkbox" name="estado351" id="estado351" onchange="this.value = this.checked ? 1 : 0;">
                                                        <input class="form-check-input" type="checkbox" name="estado352" id="estado352" onchange="this.value = this.checked ? 1 : 0;">
                                                        <input class="form-check-input" type="checkbox" name="estado353" id="estado353" onchange="this.value = this.checked ? 1 : 0;">
                                                      </td>
                                                    </tr>
                                                    <tr class="row18">
                                                      <td class="column0">&nbsp;</td>
                                                      <td></td>
                                                    </tr>
                                                    <tr class="row19">
                                                      <td colspan="2">
                                                        <p style="margin: 0;padding:0"><strong>PATRON HORMONAL</strong></p></td>
                                                    </tr>
                                                    <tr class="row20">
                                                      <td><ul class="list list-sm" style="padding-left: 15px">
                                                        <li>Superficiales<input type="hidden" name="descripcion[]" value="Superficiales"></li></ul></td>
                                                      <td ><input class="form-check-input" type="checkbox"  name="estado36"  onchange="this.value = this.checked ? 1 : 0;"></td>
                                                    </tr>
                                                    <tr class="row21">
                                                      <td><ul class="list list-sm" style="padding-left: 15px">
                                                        <li>Intermedias<input type="hidden" name="descripcion[]" value="Intermedias"></li></ul></td>
                                                      <td ><input class="form-check-input" type="checkbox"  name="estado37"  onchange="this.value = this.checked ? 1 : 0;"></td>
                                                    </tr>
                                                    <tr class="row22">
                                                      <td><ul class="list list-sm" style="padding-left: 15px">
                                                        <li>Basales<input type="hidden" name="descripcion[]" value="Basales"></li></ul></td>
                                                      <td ><input class="form-check-input" type="checkbox"  name="estado38"  onchange="this.value = this.checked ? 1 : 0;"></td>
                                                    </tr>
                                                    <tr class="row23">
                                                      <td><ul class="list list-sm" style="padding-left: 15px">
                                                        <li>Zona De transición<input type="hidden" name="descripcion[]" value="Zona De transición"></li></ul></td>
                                                      <td ><input class="form-check-input" type="checkbox"  name="estado39"  onchange="this.value = this.checked ? 1 : 0;"></td>
                                                    </tr>
                                                    <tr class="row24">
                                                      <td><ul class="list list-sm" style="padding-left: 15px">
                                                        <li>Áreas De metaplasia<input type="hidden" name="descripcion[]" value="Áreas De metaplasia"></li></ul></td>
                                                      <td ><input class="form-check-input" type="checkbox"  name="estado40"  onchange="this.value = this.checked ? 1 : 0;"></td>
                                                    </tr>
                                                  </tbody>
                                            </table>
                                          </div>
                                        </div>
                                    </div>
                                    <div class="mt-2">
                                        <h6 style="margin-left: 0px; margin-right: 100px; font-size: 14px;padding-left:5px; background: rgb(255, 255, 255);border-radius: 5px;color:#000000">COMENTARIO Y/O SUGERENCIAS</h6>
                                    </div> 
                                    <div class="col-sm-10 mb-2" style="width: 65%">
                                      <textarea class="form-control textarea-sm" name="comentario" id="comentario">Negativo para lesión intraepitelial o malignidad</textarea>
                                    </div>
                                  </div>
                            </div>
                        </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</div>
</div>

</form>
@section('js1')
<script>
    // Obtener la fecha y hora actual
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);
    $('#comentario').summernote({
        height: 100,
        toolbar: [
            ['font', ['bold', 'underline']],
            ['color', ['color']],
            ['para', ['paragraph']],
        ],
        callbacks: {
            onPaste: function(e) {
            var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');
            e.preventDefault();
            document.execCommand('insertText', false, bufferText);
            }
        }
        
    });

$(document).ready(function() {
    $('#estado202').click(function() {
      var isChecked = $(this).prop('checked');
      $('#estado201').prop('checked', isChecked);
      if (isChecked) {
        $('#estado201').val("1");
      }
    });
    $('#estado203').click(function() {
      var valor = $(this).prop('checked');
      $('#estado201').prop('checked', valor);
      $('#estado202').prop('checked', valor);
      if(valor){
        $('#estado201').val("1")
        $('#estado202').val("1");
      }
    });

    $('#estado212').click(function() {
      var isChecked = $(this).prop('checked');
      $('#estado211').prop('checked', isChecked);
      if (isChecked) {
        $('#estado211').val("1");
      }
    });
    $('#estado213').click(function() {
      var valor = $(this).prop('checked');
      $('#estado211').prop('checked', valor);
      $('#estado212').prop('checked', valor);
      if(valor){
        $('#estado211').val("1")
        $('#estado212').val("1");
      }
    });

    $('#estado222').click(function() {
      var isChecked = $(this).prop('checked');
      $('#estado221').prop('checked', isChecked);
      if (isChecked) {
        $('#estado221').val("1");
      }
    });
    $('#estado223').click(function() {
      var valor = $(this).prop('checked');
      $('#estado221').prop('checked', valor);
      $('#estado222').prop('checked', valor);
      if(valor){
        $('#estado221').val("1")
        $('#estado222').val("1");
      }
    });

    $('#estado232').click(function() {
      var isChecked = $(this).prop('checked');
      $('#estado231').prop('checked', isChecked);
      if (isChecked) {
        $('#estado231').val("1");
      }
    });
    $('#estado233').click(function() {
      var valor = $(this).prop('checked');
      $('#estado231').prop('checked', valor);
      $('#estado232').prop('checked', valor);
      if(valor){
        $('#estado231').val("1")
        $('#estado232').val("1");
      }
    });

    $('#estado242').click(function() {
      var isChecked = $(this).prop('checked');
      $('#estado241').prop('checked', isChecked);
      if (isChecked) {
        $('#estado241').val("1");
      }
    });
    $('#estado243').click(function() {
      var valor = $(this).prop('checked');
      $('#estado241').prop('checked', valor);
      $('#estado242').prop('checked', valor);
      if(valor){
        $('#estado241').val("1")
        $('#estado242').val("1");
      }
    });

    $('#estado252').click(function() {
      var isChecked = $(this).prop('checked');
      $('#estado251').prop('checked', isChecked);
      if (isChecked) {
        $('#estado251').val("1");
      }
    });
    $('#estado253').click(function() {
      var valor = $(this).prop('checked');
      $('#estado251').prop('checked', valor);
      $('#estado252').prop('checked', valor);
      if(valor){
        $('#estado251').val("1")
        $('#estado252').val("1");
      }
    });

    $('#estado262').click(function() {
      var isChecked = $(this).prop('checked');
      $('#estado261').prop('checked', isChecked);
      if (isChecked) {
        $('#estado261').val("1");
      }
    });
    $('#estado263').click(function() {
      var valor = $(this).prop('checked');
      $('#estado261').prop('checked', valor);
      $('#estado262').prop('checked', valor);
      if(valor){
        $('#estado261').val("1")
        $('#estado262').val("1");
      }
    });
    $('#estado272').click(function() {
      var isChecked = $(this).prop('checked');
      $('#estado271').prop('checked', isChecked);
      if (isChecked) {
        $('#estado271').val("1");
      }
    });
    $('#estado273').click(function() {
      var valor = $(this).prop('checked');
      $('#estado271').prop('checked', valor);
      $('#estado272').prop('checked', valor);
      if(valor){
        $('#estado271').val("1")
        $('#estado272').val("1");
      }
    });
    $('#estado282').click(function() {
      var isChecked = $(this).prop('checked');
      $('#estado281').prop('checked', isChecked);
      if (isChecked) {
        $('#estado281').val("1");
      }
    });
    $('#estado283').click(function() {
      var valor = $(this).prop('checked');
      $('#estado281').prop('checked', valor);
      $('#estado282').prop('checked', valor);
      if(valor){
        $('#estado281').val("1")
        $('#estado282').val("1");
      }
    });
    $('#estado292').click(function() {
      var isChecked = $(this).prop('checked');
      $('#estado291').prop('checked', isChecked);
      if (isChecked) {
        $('#estado21').val("1");
      }
    });
    $('#estado293').click(function() {
      var valor = $(this).prop('checked');
      $('#estado291').prop('checked', valor);
      $('#estado292').prop('checked', valor);
      if(valor){
        $('#estado291').val("1")
        $('#estado292').val("1");
      }
    });
    $('#estado302').click(function() {
      var isChecked = $(this).prop('checked');
      $('#estado301').prop('checked', isChecked);
      if (isChecked) {
        $('#estado301').val("1");
      }
    });
    $('#estado303').click(function() {
      var valor = $(this).prop('checked');
      $('#estado301').prop('checked', valor);
      $('#estado302').prop('checked', valor);
      if(valor){
        $('#estado301').val("1")
        $('#estado302').val("1");
      }
    });

    $('#estado302').click(function() {
      var isChecked = $(this).prop('checked');
      $('#estado301').prop('checked', isChecked);
      if (isChecked) {
        $('#estado301').val("1");
      }
    });
    $('#estado303').click(function() {
      var valor = $(this).prop('checked');
      $('#estado301').prop('checked', valor);
      $('#estado302').prop('checked', valor);
      if(valor){
        $('#estado301').val("1")
        $('#estado302').val("1");
      }
    });

    $('#estado312').click(function() {
      var isChecked = $(this).prop('checked');
      $('#estado311').prop('checked', isChecked);
      if (isChecked) {
        $('#estado311').val("1");
      }
    });
    $('#estado313').click(function() {
      var valor = $(this).prop('checked');
      $('#estado311').prop('checked', valor);
      $('#estado312').prop('checked', valor);
      if(valor){
        $('#estado311').val("1")
        $('#estado312').val("1");
      }
    });

    $('#estado322').click(function() {
      var isChecked = $(this).prop('checked');
      $('#estado321').prop('checked', isChecked);
      if (isChecked) {
        $('#estado321').val("1");
      }
    });
    $('#estado323').click(function() {
      var valor = $(this).prop('checked');
      $('#estado321').prop('checked', valor);
      $('#estado322').prop('checked', valor);
      if(valor){
        $('#estado321').val("1")
        $('#estado322').val("1");
      }
    });

    $('#estado332').click(function() {
      var isChecked = $(this).prop('checked');
      $('#estado331').prop('checked', isChecked);
      if (isChecked) {
        $('#estado331').val("1");
      }
    });
    $('#estado333').click(function() {
      var valor = $(this).prop('checked');
      $('#estado331').prop('checked', valor);
      $('#estado332').prop('checked', valor);
      if(valor){
        $('#estado331').val("1")
        $('#estado332').val("1");
      }
    });

    $('#estado342').click(function() {
      var isChecked = $(this).prop('checked');
      $('#estado341').prop('checked', isChecked);
      if (isChecked) {
        $('#estado341').val("1");
      }
    });
    $('#estado343').click(function() {
      var valor = $(this).prop('checked');
      $('#estado341').prop('checked', valor);
      $('#estado342').prop('checked', valor);
      if(valor){
        $('#estado341').val("1")
        $('#estado342').val("1");
      }
    });

    $('#estado352').click(function() {
      var isChecked = $(this).prop('checked');
      $('#estado351').prop('checked', isChecked);
      if (isChecked) {
        $('#estado351').val("1");
      }
    });
    $('#estado353').click(function() {
      var valor = $(this).prop('checked');
      $('#estado351').prop('checked', valor);
      $('#estado352').prop('checked', valor);
      if(valor){
        $('#estado351').val("1")
        $('#estado352').val("1");
      }
    });

});
</script>
@endsection
@endsection