@extends('layouts.app')
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
<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: 103px;
                background-color: rgb(136, 136, 136);
                margin: 0px;
                float: left;
                border-left: 0.5px solid rgb(51, 51, 51); /* Línea izquierda */
                border-top: 0.5px solid rgb(51, 51, 51); /* Línea superior */
                border-bottom: 0.5px solid rgb(51, 51, 51); /* Línea inferior */
                border-top-left-radius: 10px;
                border-bottom-left-radius: 10px;
            }
            .flex-item2 {
                    width: 300px;
                    height: 103px;
                    background-color: rgb(255, 255, 255);
                    margin-left: 0px;
                    float: left;
                    border-right: 0.5px solid rgb(51, 51, 51); /* Línea izquierda */
                    border-top: 0.5px solid rgb(51, 51, 51); /* Línea superior */
                    border-bottom: 0.5px solid rgb(51, 51, 51); /* Línea inferior */
                    border-top-right-radius: 10px;
                    border-bottom-right-radius: 10px;
                    margin-right: 40px;
                }
            .vertical-text {
                transform: rotate(270deg); /* Rotar 270 grados */
                text-align: center;
            }
            .title {
                page-break-after: always;
                }

            .encabezado{
              height:100px;
              width: 114px;
              position: relative;
              right: 8px;
              color: aliceblue;
            }
/* Estilos para teléfonos (hasta 600px) */
@media (max-width: 600px) {
  .flex-item2 {
                    width: 250px;
                    height: 98px;
                    background-color: rgb(255, 255, 255);
                    margin-left: 0px;
                    float: left;
                    border-right: 0.5px solid rgb(51, 51, 51); /* Línea izquierda */
                    border-top: 0.5px solid rgb(51, 51, 51); /* Línea superior */
                    border-bottom: 0.5px solid rgb(51, 51, 51); /* Línea inferior */
                    border-top-right-radius: 10px;
                    border-bottom-right-radius: 10px;
                    margin-right: 40px;
                    margin-bottom: 10px;
                }
}
 .encabezadoTitulo{
    margin:5px 10px ; 
    font-size:12px;
    text-transform: uppercase;
  }
  .negrillaTitulo{
    font-size:12px;
    font-weight: normal
  }
  .encabezadoDetalle{
    font-size: 12px
  }
</style>
@section('content')
<div class="nk-content">
    <div class="container-fluid">
      <div class="nk-content-inner">
        <div class="nk-content-body">
          <div class="d-flex justify-content-center w-55">
            <div class="w-100 bd-highlight">
              <a href="{{route('dashboard')}}" class="btn btn-white btn-dim btn-outline-dark m-1">
                <em class="icon ni ni-home"></em><span>Home</span>
              </a>
              <a href="{{route('informaciones')}}" class="btn btn-white btn-dim btn-outline-dark m-1">
                <em class="icon ni ni-arrow-left"></em><span>Retornar</span>
              </a>
              <button type="button" class="btn btn-white btn-dim btn-outline-dark m-1" onclick="guardarEdicion({{$id}})"><em class="icon ni ni-save"></em><span>Guardar</span></button>
              <a href="{{route('informaciones')}}" class="btn btn-white btn-dim btn-outline-danger m-1">
                <em class="icon ni ni-cross-circle"></em><span>Salir</span>
              </a>
            </div>
              <div class="bd-highlight"><button type="button" class="btn btn-white btn-dim btn-outline-dark m-1" onclick="validar({{$id}})"><em class="icon ni ni-check-thick"></em><span>Informar</span></button></div>
              <div class="bd-highlight"><button type="button" class="btn btn-white btn-dim btn-outline-dark m-1" onclick="generarPdf({{$id}})"><em class="icon ni ni-file-pdf"></em><span>Generar</span></button></div>
          </div>
          <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>
                                  <div class="flex-item1">
                                      <p class="vertical-text encabezado">MEDICO</p>
                                  </div>
                                  <div class="flex-item2">
                                    <h5 class="encabezadoTitulo"> {{$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>
                                  <div class="flex-item1">
                                      <p class="vertical-text encabezado">PACIENTE</p>
                                  </div>
                                                                    <div class="flex-item2">
                                    <h5 class="encabezadoTitulo" style="text-transform: uppercase;">{{$datos[0]->paterno}} {{$datos[0]->materno}} {{$datos[0]->nombre}}</h5>
                                    @if ($datos[0]->nacimiento !=NULL)
                                      <h5 class="encabezadoTitulo">FN: <small class="encabezadoDetalle">{{$datos[0]->nacimiento}}</small></small>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Edad:<small class="encabezadoDetalle"> {{$datos[0]->nacimiento}}</small></h5>
                                      @else
                                      <h5 class="encabezadoTitulo"> Edad:<small class="encabezadoDetalle"> {{$datos[0]->edad}}</small></h5>
                                      @endif
                                      @if ($datos[0]->asegurado1 !=NULL)
                                      <h5 class="encabezadoTitulo">Mat. Asegurado: <small class="encabezadoDetalle">{{$datos[0]->asegurado1}}</small></h5>
                                      @else
                                      <h5 class="encabezadoTitulo">ID Historial: <small class="encabezadoDetalle">{{$datos[0]->historial}}</small></h5>
                                      @endif
                                    <h5 class="encabezadoTitulo">Sexo: <small class="encabezadoDetalle">{{$datos[0]->sexo}}</small></h5>
                                    <h5 class="encabezadoTitulo">Diagnostico:<small class="encabezadoDetalle">{{$datos[0]->diagnostico}}</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: <small class="encabezadoDetalle"><input class="estiloEntrada" type="text" name="registro" id="registro" value="{{$datos[0]->registro}} "style="text-transform: uppercase" autocomplete="off"></small></h5>
                                    <h5 class="encabezadoTitulo">Fecha de Recibido: <small class="encabezadoDetalle"> {{$fechavisita}} </small></h5>
                                    @if ($datos[0]->estado == 0 || $datos[0]->estado ==NULL )
                                    <h5 class="encabezadoTitulo">Fecha de Informe: <small class="encabezadoDetalle" style="color:red">Pendiente</small></h5>
                                    @else
                                    <h5 class="encabezadoTitulo">Fecha de Informe: <small class="encabezadoDetalle" style="color:green">{{$fechaInforme}}</small></h5>
                                    @endif
                                    <h5 class="encabezadoTitulo">Institución: <small class="encabezadoDetalle"><input  class="estiloEntrada" type="text" name="proveniencia" id="proveniencia" value="{{$datos[0]->proveniencia}}" style="text-transform: uppercase" autocomplete="off"></small></h5>
                                    <h5 class="encabezadoTitulo">Solicitud: <small class="encabezadoDetalle"><input class="estiloEntrada" type="text" name="remitente" id="remitente" value="{{$datos[0]->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}}">
                                                                <div class="container-fluid" style="width: 100%;padding-top:10px">
                                    <h6 style="margin-left: 0px; margin-right: 100px; font-size: 14px;padding-left:5px; background: rgb(136, 136, 136);border-radius: 5px;color:#ffff">DESCRIPCIÓN MACROSCOPICO</h6>
                                    <div class="col-sm-10 mb-2 ms-3">
                                        <textarea class="form-control textarea-sm" name="detalle" id="detalle">{!!$informeInmunos[0]->detalle!!}</textarea>
                                    </div>
                                  </div>
                                  <div class="container mt-2 mb-2">
                                    <div class="table-responsive">
                                        <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>
                                            @foreach ($inmunos as $item)
                                            <tr>
                                                <td>{{$item->tipo}} <input type="hidden" name="tipo[]" value="{{$item->id}}"></td>
                                                <td><input type="text" class="form-control form-control-sm" name="resultado[]" value="{{$item->resultado}}"></td>
                                                <td><button type="button" class="btn btn-danger btn-quitar">Quitar</button></td>
                                            </tr>  
                                            @endforeach
                                            </tbody>
                                            <tfoot>
                                            <tr>
                                                <td colspan="3"><button type="button" class="btn btn-primary btn-agregar">Agregar fila</button></td>
                                            </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                  </div>
                                  <div class="container-fluid" style="width: 100%;padding-top:10px">
                                    <h6 style="margin-left: 0px; margin-right: 100px; font-size: 14px;padding-left:5px; background: rgb(136, 136, 136);border-radius: 5px;color:#ffff">DESCRIPCIÓN MACROSCOPICO</h6>
                                    <div class="col-sm-10 mb-2 ms-3">
                                        <textarea class="form-control textarea-sm" name="especimen" id="especimen">{!!$informeInmunos[0]->especimen!!}</textarea>
                                    </div>
                                  </div>
                                  <div class="container-fluid" style="width: 100%;padding-top:10px">
                                    <h6 style="margin-left: 0px; margin-right: 100px; font-size: 14px;padding-left:5px; background: rgb(136, 136, 136);border-radius: 5px;color:#ffff">DESCRIPCIÓN MACROSCOPICO</h6>
                                    <div class="col-sm-10 mb-2 ms-3">
                                        <textarea class="form-control textarea-sm" name="conclusion" id="conclusion">{!!$informeInmunos[0]->conclusion!!}</textarea>
                                    </div>
                                  </div> 
                            </div>
                            <div class="col-12 col-md-6">
                              <div class="container">
                                <div class="row">
                                                                    @foreach ( $imagenes as $item)
                                  <div class="col-sm-6">
                                    <div class="row">
                                      <div class="col-8 col-sm-12">
                                        <div class="mb-3">
                                          <label for="ruta" class="form-label">Cargar Imagen {{$loop->iteration}}</label>
                                          <input class="form-control" type="file" id="ruta{{$loop->iteration}}" name="ruta[]" accept="image/*">
                                        </div>
                                        <div class="mb-3">
                                          <label for="figura" class="form-label">Detalle {{$loop->iteration}}</label>
                                          <input type="text"  class="form-control" id="figura{{$loop->iteration}}" name="figura[]" value="{{$item->figura}}">
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <div class="col-sm-6">
                                    <div id="preview-container{{$loop->iteration}}" class="mt-2 preview-container">
                                      <img src="{{asset($item->ruta)}}"  alt="logo" style="height: 250px; width: 250px; object-fit: cover; border:2px solid #fff">
                                    </div>
                                  </div>
                                                                    @endforeach
                                  @if ($sw===0)
                                  <div class="col-sm-6">
                                    <div class="row">
                                      <div class="col-8 col-sm-12">
                                        <div class="mb-3">
                                          <label for="ruta" class="form-label">Cargar Imagen 1</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 1</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">
                                      
                                    </div>
                                  </div>
                                  <div class="col-sm-6">
                                    <div class="row">
                                      <div class="col-8 col-sm-12">
                                        <div class="mb-3">
                                          <label for="ruta" class="form-label">Cargar Imagen 2</label>
                                          <input class="form-control" type="file" id="ruta2" 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="figura2" name="figura[]">
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <div class="col-sm-6">
                                    <div id="preview-container2" class="mt-2 preview-container">
                                      
                                    </div>
                                  </div>
                                  @endif
                                  @if ($sw===1)
                                  <div class="col-sm-6">
                                    <div class="row">
                                      <div class="col-8 col-sm-12">
                                        <div class="mb-3">
                                          <label for="ruta" class="form-label">Cargar Imagen 2</label>
                                          <input class="form-control" type="file" id="ruta2" 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="figura2" name="figura[]">
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <div class="col-sm-6">
                                    <div id="preview-container2" class="mt-2 preview-container">
                                      
                                    </div>
                                  </div>
                                  @endif
                                </div>
                              </div>
                            </div>
                        </div>    
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</div>
</div>
@section('js1')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>
<script>
  $(document).ready(function() {
        // Función para mostrar la previsualización de la imagen
        $('#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]);
            }
        });

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

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

                reader.onload = function(e) {
                    $('#preview-container2').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>
$(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);
                });
            }

        });

function guardarEdicion(idPeticion) {
    var detalle = $("#detalle").val();
    var especimen = $("#especimen").val();
    var conclusion = $("#conclusion").val();
    var figura1 = $("#figura1").val();
    var figura2 = $("#figura2").val();
    var ruta1 = $("#ruta1")[0].files[0];
    var ruta2 = $("#ruta2")[0].files[0];

        // Serializar los datos de la tabla
    var datosTabla = [];
    $('#tabla1 tbody tr').each(function() {
        var id = $(this).find('input[name="tipo[]"]').val();
        var tipo = $(this).find('td:eq(0)').text(); // Obtener el texto del primer td (tipo)
        var resultado = $(this).find('input[name="resultado[]"]').val(); // Obtener el valor del input en la segunda columna
        datosTabla.push({ id:id,tipo: tipo, resultado: resultado });
    });
    console.log(datosTabla)
    var formData = new FormData();
    formData.append('id', idPeticion);
    formData.append('detalle', detalle);
    formData.append('especimen', especimen);
    formData.append('conclusion', conclusion);
    formData.append('figura1', figura1);
    formData.append('figura2', figura2);
    if (ruta1) {
        formData.append('ruta1', ruta1);
    }
    if (ruta2) {
        formData.append('ruta2', ruta2);
    }

    formData.append('datosTabla', JSON.stringify(datosTabla));
    $.ajax({
        type: "POST",
        url: "../editarInmuno/" + idPeticion,
        data: formData,
        processData: false, // Necesario para enviar archivos
        contentType: false, // Necesario para enviar archivos
        headers: {
            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
        },
        success: function(response) {
            console.log(response);
            Swal.fire({
                title: "Atención",
                text: 'Información editada correctamente',
                position: 'top-end',
                showConfirmButton: false,
                timer: 1000
            });
        },
        error: function(error) {
            console.error(error);
        }
    });
}

function generarPdf(idPeticion){
  console.log(idPeticion)
  Swal.fire({
    html: `
    <div class="container-fluid swal2-miEstilo">Patología</div>
    <div class="swal2-contenido">¿En qué Formato desea Generar?</div>
    <div class="mt-2">
    <div class="mt-2">
    <a  class="btn btn-primary me-1" id="pdfPrivado"><em class="icon ni ni-file-pdf"></em><span>Privado</span></a>
    <a  class="btn btn-primary me-1" id="pdfUniversitario"><em class="icon ni ni-file-pdf"></em><span>S.S.U.</span></a>
    <a  class="btn btn-danger" id="swal2-cancel"><em class="icon ni ni-cross-sm"></em><span>Cancelar</span></a>
    </div>
    `,
    showCancelButton: false,
    showConfirmButton: false,
  }).then(() => {
    // Aquí puedes agregar cualquier acción que quieras realizar después de que el modal se cierre
  });

   // Agregar controladores de eventos para los botones personalizados después de que el modal se haya mostrado
   $(document).on('click', '#pdfPrivado', function() {
    // Acción para el botón "Editar"
    console.log(idPeticion);
    var url = "{{ route('inmunoPdf', ['dato' => 'ID_PLACEHOLDER']) }}";
    url = url.replace('ID_PLACEHOLDER', idPeticion);
    Swal.close();
    window.open(url, '_blank');
    
    // Aquí puedes agregar la lógica que quieras ejecutar para editar
  });
  $(document).on('click', '#pdfUniversitario', function() {
    // Acción para el botón "Editar"
    console.log(idPeticion);
    var url = "{{ route('inmunoPdfUniversitario', ['dato' => 'ID_PLACEHOLDER']) }}";
    url = url.replace('ID_PLACEHOLDER', idPeticion);
    Swal.close();
    window.open(url, '_blank');
    
    // Aquí puedes agregar la lógica que quieras ejecutar para editar
  });

  $(document).on('click', '#swal2-cancel', function() {
    // Acción para el botón "Cancelar"
    console.log('Cancelar');
    Swal.close(); // Cerrar el modal
  });
}

$(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 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[]"></td>' +
                            '<td><input type="text" class="form-control form-control-sm" name="resultado[]"></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();
    });
});
function validar(idPeticion){
  console.log(idPeticion)
  Swal.fire({
    html: `
    <div class="container-fluid swal2-miEstilo">Patología</div>
    <div class="swal2-contenido">¿Esta seguro de Informar la Petición?</div>
    <div class="mt-2">
    <div class="mt-2">
    <a class="btn btn-primary me-1" style="width:122px;padding-left:30px" id="informar"><em class="icon ni ni-check-thick"></em><span>Si</span></a>
    <a class="btn btn-danger" id="swal2-cancel"><em class="icon ni ni-cross-sm"></em><span>Cancelar</span></a>
    </div>
    `,
    showCancelButton: false,
    showConfirmButton: false,
  }).then(() => {
    // Aquí puedes agregar cualquier acción que quieras realizar después de que el modal se cierre
  });

   // Agregar controladores de eventos para los botones personalizados después de que el modal se haya mostrado
   $(document).on('click', '#informar', function() {
    console.log("ingreso")
    $.ajax({
        type: "POST",
        url: "../validarInformacion/" + idPeticion,
        data: idPeticion,
        processData: false, // Necesario para enviar archivos
        contentType: false, // Necesario para enviar archivos
        headers: {
            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
        },
        success: function(response) {
            console.log(response);
            Swal.fire({
                title: "Atención",
                text: 'Información editada correctamente',
                position: 'top-end',
                showConfirmButton: false,
                timer: 1000
            });
            location.reload(true);
        },
        error: function(error) {
            console.error(error);
        }
    });    
  });
  $(document).on('click', '#swal2-cancel', function() {
    // Acción para el botón "Cancelar"
    console.log('Cancelar');
     // Cerrar el modal
     location.reload(true);
  });
}
</script>
@endsection
@endsection