@extends('layouts.app')
<style>
  .preview-container img {
    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: 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('inmunos.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 INMUNOHISTOQUÍMICA</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-6">
                                <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%">
                                    <h6 style="margin-left: 0px; margin-right: 100px; font-size: 14px;padding-left:5px; background: rgb(255, 255, 255);border-radius: 5px;color:#000000;padding-top:10px">DESCRIPCIÓN MACROSCOPICO</h6>
                                    <div class="col-sm-10 mb-2">
                                      <textarea class="form-control textarea" name="detalle" id="detalle"></textarea>
                                    </div>
                                    <h6 style="margin-left: 0px; margin-right: 100px; font-size: 14px;padding-left:5px; background: rgb(255, 255, 255);border-radius: 5px;color:#000000;padding-top:10px">DESCRIPCIÓN MICROSCOPICA</h6>
                                    <div class="container mt-2 mb-2">
                                        <button id="cambiarTabla1" class="btn btn-primary">Nueva</button> 
                                        <button id="cambiarTabla2" class="btn btn-primary">Predefinida</button>
                                        <button id="cambiarTabla3" class="btn btn-primary">Hodgkin</button>
                                        
                                        <div class="table-responsive">
                                            <!-- Tabla 1 (visible por defecto) -->
                                            <table class="table table-striped table-hover" id="tabla1" style="width: 80%;">
                                              <thead>
                                              <tr>
                                                  <th scope="col" style="width: 0px">Anticuerpos</th>
                                                  <th scope="col"></th>
                                                  <th scope="col"></th> <!-- Columna extra para botones de acción -->
                                              </tr>
                                              </thead>
                                              <tbody>
                                              <tr>
                                                  <td><input type="text" class="form-control form-control-sm" name="tipo[]" autocomplete="off"></td>
                                                  <td><input type="text" class="form-control form-control-sm" name="resultado[]" autocomplete="off"></td>
                                                  <td><button type="button" class="btn btn-danger btn-quitar">Quitar</button></td>
                                              </tr>
                                              <!-- Más filas según sea necesario -->
                                              </tbody>
                                              <tfoot>
                                              <tr>
                                                  <td colspan="3"><button type="button" class="btn btn-primary btn-agregar">Agregar fila</button></td>
                                              </tr>
                                              </tfoot>
                                          </table>
                                            <table class="table table-striped table-hover" id="tabla2" style="width: 80% display: none;" disabled>
                                                <thead>
                                                <tr>
                                                    <th scope="col" style="width: 0px">Anticuerpos</th>
                                                    <th scope="col"></th>
                                                    <th scope="col"></th> <!-- Columna extra para botones de acción -->
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr>
                                                    <td>CD 45 <input type="hidden" name="tipo[]" value="CD 45"></td>
                                                    <td><input type="text" class="form-control form-control-sm" name="resultado[]" autocomplete="off"></td>
                                                    <td><button type="button" class="btn btn-danger btn-quitar">Quitar</button></td>
                                                </tr>
                                                <tr>
                                                    <td>CD 20 <input type="hidden" name="tipo[]" value="CD 20"></td>
                                                    <td><input type="text" class="form-control form-control-sm" name="resultado[]" autocomplete="off"></td>
                                                    <td><button type="button" class="btn btn-danger btn-quitar">Quitar</button></td>
                                                </tr>
                                                <tr>
                                                    <td>CD 3 <input type="hidden" name="tipo[]" value="CD 3"></td>
                                                    <td><input type="text" class="form-control form-control-sm" name="resultado[]" autocomplete="off"></td>
                                                    <td><button type="button" class="btn btn-danger btn-quitar">Quitar</button></td>
                                                </tr>
                                                <tr>
                                                    <td>CD 79 A <input type="hidden" name="tipo[]" value="CD 79 A"></td>
                                                    <td><input type="text" class="form-control form-control-sm" name="resultado[]" autocomplete="off"></td>
                                                    <td><button type="button" class="btn btn-danger btn-quitar">Quitar</button></td>
                                                </tr>
                                                <tr>
                                                    <td>KI 67 <input type="hidden" name="tipo[]" value="KI 67"></td>
                                                    <td><input type="text" class="form-control form-control-sm" name="resultado[]" autocomplete="off"></td>
                                                    <td><button type="button" class="btn btn-danger btn-quitar">Quitar</button></td>
                                                </tr>
                                                </tbody>
                                                <tfoot>
                                                <tr>
                                                    <td colspan="3"><button type="button" class="btn btn-primary btn-agregar">Agregar fila</button></td>
                                                </tr>
                                                </tfoot>
                                            </table>
                                            
                                            <!-- Tabla 2 (oculta inicialmente) -->
                                            <table class="table table-striped table-hover" id="tabla3" style="width: 80%; display: none;" disabled>
                                                <thead>
                                                <tr>
                                                    <th scope="col" style="width: 0px">Anticuerpos</th>
                                                    <th scope="col"></th>
                                                    <th scope="col"></th> <!-- Columna extra para botones de acción -->
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr>
                                                    <td>CD 30 <input type="hidden" name="tipo[]" value="CD 30"></td>
                                                    <td><input type="text" class="form-control form-control-sm" name="resultado[]" autocomplete="off"></td>
                                                    <td><button type="button" class="btn btn-danger btn-quitar">Quitar</button></td>
                                                </tr>
                                                <tr>
                                                    <td>CD 15 <input type="hidden" name="tipo[]" value="CD 15"></td>
                                                    <td><input type="text" class="form-control form-control-sm" name="resultado[]" autocomplete="off"></td>
                                                    <td><button type="button" class="btn btn-danger btn-quitar">Quitar</button></td>
                                                </tr>
                                                <tr>
                                                    <td>CD 20 <input type="hidden" name="tipo[]" value="CD 20"></td>
                                                    <td><input type="text" class="form-control form-control-sm" name="resultado[]" autocomplete="off"></td>
                                                    <td><button type="button" class="btn btn-danger btn-quitar">Quitar</button></td>
                                                </tr>
                                                <tr>
                                                    <td>CD 3 <input type="hidden" name="tipo[]" value="CD 3"></td>
                                                    <td><input type="text" class="form-control form-control-sm" name="resultado[]" autocomplete="off"></td>
                                                    <td><button type="button" class="btn btn-danger btn-quitar">Quitar</button></td>
                                                </tr>
                                                <tr>
                                                    <td>Ki 67 <input type="hidden" name="tipo[]" value="Ki 67"></td>
                                                    <td><input type="text" class="form-control form-control-sm" name="resultado[]" autocomplete="off"></td>
                                                    <td><button type="button" class="btn btn-danger btn-quitar">Quitar</button></td>
                                                </tr>
                                                <tr>
                                                    <td>ACL <input type="hidden" name="tipo[]" value="ACL"></td>
                                                    <td><input type="text" class="form-control form-control-sm" name="resultado[]" autocomplete="off"></td>
                                                    <td><button type="button" class="btn btn-danger btn-quitar">Quitar</button></td>
                                                </tr>
                                                <tr>
                                                    <td>CK7 <input type="hidden" name="tipo[]" value="CK7"></td>
                                                    <td><input type="text" class="form-control form-control-sm" name="resultado[]" autocomplete="off"></td>
                                                    <td><button type="button" class="btn btn-danger btn-quitar">Quitar</button></td>
                                                </tr>
                                                <tr>
                                                    <td>CK20 <input type="hidden" name="tipo[]" value="CK20"></td>
                                                    <td><input type="text" class="form-control form-control-sm" name="resultado[]" autocomplete="off"></td>
                                                    <td><button type="button" class="btn btn-danger btn-quitar">Quitar</button></td>
                                                </tr>
                                                <tr>
                                                    <td>CK5/6 <input type="hidden" name="tipo[]" value="CK5/6"></td>
                                                    <td><input type="text" class="form-control form-control-sm" name="resultado[]" autocomplete="off"></td>
                                                    <td><button type="button" class="btn btn-danger btn-quitar">Quitar</button></td>
                                                </tr>
                                                <tr>
                                                    <td>P40 <input type="hidden" name="tipo[]" value="P40"></td>
                                                    <td><input type="text" class="form-control form-control-sm" name="resultado[]" autocomplete="off"></td>
                                                    <td><button type="button" class="btn btn-danger btn-quitar">Quitar</button></td>
                                                </tr>
                                                <tr>
                                                    <td>Bcl2 <input type="hidden" name="tipo[]" value="Bcl2"></td>
                                                    <td><input type="text" class="form-control form-control-sm" name="resultado[]" autocomplete="off"></td>
                                                    <td><button type="button" class="btn btn-danger btn-quitar">Quitar</button></td>
                                                </tr>
                                                <tr>
                                                    <td>Bcl6 <input type="hidden" name="tipo[]" value="Bcl6"></td>
                                                    <td><input type="text" class="form-control form-control-sm" name="resultado[]" autocomplete="off"></td>
                                                    <td><button type="button" class="btn btn-danger btn-quitar">Quitar</button></td>
                                                </tr>
                                                <tr>
                                                    <td>CD 10 <input type="hidden" name="tipo[]" value="CD 10"></td>
                                                    <td><input type="text" class="form-control form-control-sm" name="resultado[]" autocomplete="off"></td>
                                                    <td><button type="button" class="btn btn-danger btn-quitar">Quitar</button></td>
                                                </tr>
                                                <tr>
                                                    <td>SOX10 <input type="hidden" name="tipo[]" value="SOX10"></td>
                                                    <td><input type="text" class="form-control form-control-sm" name="resultado[]" autocomplete="off"></td>
                                                    <td><button type="button" class="btn btn-danger btn-quitar">Quitar</button></td>
                                                </tr>

                                                <!-- Más filas según sea necesario -->
                                                </tbody>
                                                <tfoot>
                                                <tr>
                                                    <td colspan="3"><button type="button" class="btn btn-primary btn-agregar">Agregar fila</button></td>
                                                </tr>
                                                </tfoot>
                                            </table>
                                            
                                            <!-- Tabla 3 (oculta inicialmente) -->
                                            
                                        </div>
                                      </div>
                                    <h6 style="margin-left: 0px; margin-right: 100px; font-size: 14px;padding-left:5px; background: rgb(255, 255, 255);border-radius: 5px;color:#000000">ESPECIMEN</h6>
                                    <div class="col-sm-10 mb-2">
                                      <textarea class="form-control textarea-sm" name="especimen" id="especimen"></textarea>
                                    </div>
                                    <h6 style="margin-left: 0px; margin-right: 100px; font-size: 14px;padding-left:5px; background: rgb(255, 255, 255);border-radius: 5px;color:#000000">CONCLUSIÓN</h6>
                                    <div class="col-sm-10 mb-2">
                                      <textarea class="form-control textarea-sm" name="conclusion" id="conclusion"></textarea>
                                    </div>
                                  </div>
                            </div>
                            <div class="col-12 col-md-6">
                              <div class="container">
                                <div class="row">
                                  <div class="col-sm-6">
                                    <div class="row">
                                      <div class="col-8 col-sm-12 pt-5">
                                        <div class="file-input-wrapper">
                                          <label for="ruta" class="form-label">Cargar Imagen 1</label>
                                          <input class="form-control" type="file" id="ruta" name="ruta[]" accept="image/*">
                                        </div>
                                        <div class="mb-3">
                                          <label for="figura" class="form-label">Detalle 1</label>
                                          <input type="text"  class="form-control" id="figura" name="figura[]">
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <div class="col-sm-6">
                                    <div id="preview-container" class="mt-2 preview-container">
                                      <!-- Aquí se mostrará la previsualización -->
                                    </div>
                                  </div>
                                </div>
                              </div>
                              <div class="container">
                                <div class="row">
                                  <div class="col-sm-6">
                                    <div class="row">
                                      <div class="col-8 col-sm-12 pt-5">
                                        <div class="file-input-wrapper">
                                          <label for="ruta1" class="form-label">Cargar Imagen 2</label>
                                          <input class="form-control" type="file" id="ruta1" name="ruta[]" accept="image/*">
                                        </div>
                                        <div class="mb-3">
                                          <label for="figura" class="form-label">Detalle 2</label>
                                          <input type="text"  class="form-control" id="figura1" name="figura[]">
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <div class="col-sm-6">
                                    <div id="preview-container1" class="mt-2 preview-container">
                                      <!-- Aquí se mostrará la previsualización -->
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                        </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</div>
</div>

</form>
@section('js1')
<script>
$(document).ready(function() {
        // Función para mostrar la previsualización de la imagen
        $('#ruta').change(function() {
            var input = this;

            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function(e) {
                    $('#preview-container').html('<img class="img-fluid " src="' + e.target.result + '">');
                };

                reader.readAsDataURL(input.files[0]);
            }
        });

        $('#ruta1').change(function() {
            var input = this;

            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function(e) {
                    $('#preview-container1').html('<img class="img-fluid " src="' + e.target.result + '">');
                };

                reader.readAsDataURL(input.files[0]);
            }
        });
    });
$('#detalle').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);
        }
      }
    
});

$('#especimen').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);
        }
      }
});

$('#conclusion').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);
        }
      }
});

</script>
<script>
function showModal(){
  Swal.fire({
    title: 'Que deseas Realizar?',
    icon: 'info',
    showCancelButton: true,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: 'Registrar'
  }).then((result) => {
    if (result.isConfirmed) {
      $.ajax({
        type: "DELETE",
        url: "./pacientes/"+PacientesId,
        data: PacientesId,
        dataType: "json",
        headers: {
          "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
        },
        success: function (response) {
          Swal.fire({
            title: "Eliminado!",
            text: "Se elimino correctamente.",
            icon: "success"
          }).then((result) => {
            // Recargar la página después de que se cierre el modal
            if (result.isConfirmed) {
                window.location.reload();
            }
        });
        },
        error: function (error) {},
        });
      
    }
  });
}
// 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);
    $(document).ready(function() {
            let fileList = [];

            $('#archivo').on('change', function(event) {
                const input = event.target;
                const preview = $('#preview');

                // Añadir archivos seleccionados a la lista
                for (let i = 0; i < input.files.length; i++) {
                    fileList.push(input.files[i]);
                }

                // Actualizar la vista previa
                updatePreview();
            });

            function updatePreview() {
                const preview = $('#preview');
                preview.empty();

                fileList.forEach((file, index) => {
                    const reader = new FileReader();
                    
                    reader.onload = function(e) {
                        const imgContainer = $('<div>').addClass('img-container');
                        const img = $('<img>').attr('src', e.target.result);
                        const closeBtn = $('<button>').addClass('close-btn').text('x');

                        closeBtn.on('click', function() {
                            fileList.splice(index, 1);
                            updatePreview();
                        });

                        imgContainer.append(img).append(closeBtn);
                        preview.append(imgContainer);
                    }

                    reader.readAsDataURL(file);
                });
            }

        });
        $(document).ready(function() {

  // Capturar el evento 'click' del botón de enviar
  $('#agregarFila').click(function(event) {
    // Llamar a la función para enviar el formulario
    event.preventDefault();
  });
  $('#cambiarTabla1').click(function(event) {
    // Llamar a la función para enviar el formulario
    event.preventDefault();
  });
  $('#cambiarTabla2').click(function(event) {
    // Llamar a la función para enviar el formulario
    event.preventDefault();
  });
  $('#cambiarTabla3').click(function(event) {
    // Llamar a la función para enviar el formulario
    event.preventDefault();
  });

  // Capturar el evento 'keypress' en el campo de texto y otros botones
  $('#campoTexto, #botonEnviar, #botonOtro').keypress(function(event) {
    // Verificar si la tecla presionada es Enter y no es el botón de tipo submit
    if (event.keyCode === 13 && event.target.type !== 'submit') {
      event.preventDefault(); // Evitar el comportamiento predeterminado del Enter
      enviarFormulario(); // Llamar a la función para enviar el formulario
    }
  });
});

$(document).ready(function() {
    // Función para ocultar tablas y deshabilitar campos de entrada y botones
    function ocultarTablas() {
        $('#tabla1 input, #tabla1 button').prop('disabled', false);
        $('#tabla2, #tabla3').hide();
        $('#tabla2 input, #tabla2 button, #tabla3 input, #tabla3 button').prop('disabled', true);
    }

    // Al cargar la página, asegurarse de que solo la tabla 1 esté visible y activa
    ocultarTablas();

    // Manejar clic en el botón para mostrar Tabla 1 y ocultar las otras
    $('#cambiarTabla1').on('click', function() {
        $('#tabla1').show();
        $('#tabla1 input, #tabla1 button').prop('disabled', false);

        $('#tabla2, #tabla3').hide();
        $('#tabla2 input, #tabla2 button, #tabla3 input, #tabla3 button').prop('disabled', true);
    });

    // Manejar clic en el botón para mostrar Tabla 2 y ocultar las otras
    $('#cambiarTabla2').on('click', function() {
        $('#tabla2').show();
        $('#tabla2 input, #tabla2 button').prop('disabled', false);

        $('#tabla1, #tabla3').hide();
        $('#tabla1 input, #tabla1 button, #tabla3 input, #tabla3 button').prop('disabled', true);
    });

    // Manejar clic en el botón para mostrar Tabla 3 y ocultar las otras
    $('#cambiarTabla3').on('click', function() {
        $('#tabla3').show();
        $('#tabla3 input, #tabla3 button').prop('disabled', false);

        $('#tabla1, #tabla2').hide();
        $('#tabla1 input, #tabla1 button, #tabla2 input, #tabla2 button').prop('disabled', true);
    });
    // Manejar clic en botón agregar fila (para todas las tablas)
    $('.btn-agregar').on('click', function() {
        // Determinar la tabla actual
        var tablaActual = $(this).closest('table');

        // Agregar nueva fila a la tabla actual
        var nuevaFila = '<tr>' +
                            '<td><input type="text" class="form-control form-control-sm" name="tipo[]" autocomplete="off"></td>' +
                            '<td><input type="text" class="form-control form-control-sm" name="resultado[]" autocomplete="off"></td>' +
                            '<td><button type="button" class="btn btn-danger btn-quitar">Quitar</button></td>' +
                        '</tr>';
        tablaActual.find('tbody').append(nuevaFila);
    });

    // Manejar clic en botón quitar fila (para todas las tablas)
    $('table').on('click', '.btn-quitar', function() {
        // Eliminar fila actual
        $(this).closest('tr').remove();
    });
});
</script>
@endsection
@endsection