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

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

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

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

  .encabezadoTitulo{
    margin:5px 10px ; 
    font-size:12px;
    text-transform: uppercase;
  }
  .negrillaTitulo{
    font-size:12px;
    font-weight: normal
  }
  .encabezadoDetalle{
    font-size: 12px
  }
  </style>
@section('content')
<form id="miFormulario" action="{{ route('guardarInformacion')}}" method="post" enctype="multipart/form-data">
  @csrf
  <input type="hidden" name="tipo" value="1">
  <input type="hidden" name="estado" value="0">
<div class="nk-content">
  <div class="nk-block-head-sub">
    <a href="{{route('dashboard')}}" class="btn btn-white btn-dim btn-outline-dark m-1">
      <em class="icon ni ni-home"></em><span>Home</span>
    </a>
    <a href="{{URL::previous()}}" class="btn btn-white btn-dim btn-outline-dark m-1">
      <em class="icon ni ni-arrow-left"></em><span>Retornar</span>
    </a>
    <button type="submit" class="btn btn-white btn-dim btn-outline-dark m-1">
      <em class="icon ni ni-save"></em><span>Guardar</span>
    </button>
    <a href="{{route('informaciones')}}" class="btn btn-white btn-dim btn-outline-danger m-1">
      <em class="icon ni ni-cross-circle"></em><span>Salir</span>
    </a>
  </div>
    <div class="container-fluid">
      <div class="nk-content-inner">
        <div class="nk-content-body">
          <div class="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 PATOLOGICO</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"> {{$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">{{$datos[0]->nacimiento}}</small></small>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Edad:<small class="encabezadoDetalle"> {{$datos[0]->edad}}</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: <em class="icon ni ni-pen2"></em><small class="encabezadoDetalle"><input class="estiloEntrada" type="text" name="registro" id="registro" value="{{$hoy}}" style="text-transform: uppercase" autocomplete="off"></small></h5>
                                      <h5 class="encabezadoTitulo">Fecha de Recibido: <small class="encabezadoDetalle"> {{$fechaActualFormateada}} </small></h5>
                                      <h5 class="encabezadoTitulo">Fecha de Informe: <small class="encabezadoDetalle" style="color: red">Pendiente</small></h5>
                                      <h5 class="encabezadoTitulo">Institución: <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" value="{{$datos[0]->nombreInstituto}}"></small></h5>
                                      <h5 class="encabezadoTitulo">Solicitud: <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">INTERPRETACIÓN</h6>
                                    <div class="col-sm-10 mb-2">
                                      <textarea class="form-control textarea" name="interpretacion" id="interpretacion"></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">COMENTARIO</h6>
                                    <div class="col-sm-10 mb-2">
                                      <textarea class="form-control textarea-sm" name="comentario" id="comentario"></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">MACROSCOPICO</h6>

                                    <div class="col-sm-10 mb-2">
                                      <textarea class="form-control textarea-sm" name="macroscopico" id="macroscopico"></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">MICROSCOPICO</h6>
                                    <div class="col-sm-10 mb-2">
                                      <textarea class="form-control textarea-sm" name="microscopico" id="microscopico"></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"><span><em class="icon ni ni-camera"></em></span>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[]">
                                          <!-- Button trigger modal -->
                                          
                                        </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"><span><em class="icon ni ni-camera"></em></span>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>

<!-- Modal -->
<div class="modal fade" id="imagenModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Editor de Imagen</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <img id="imagenModalContenido" src="" class="img-fluid">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
        <button type="button" class="btn btn-primary">Guardar Cambios</button>
      </div>
    </div>
  </div>
</div>

</form>
@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
        $('#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 rounded-circle preview-img" src="' + e.target.result + '">');
                };
                $('.close-btn').click(function() {
                    $('#preview-container').empty();
                    $('#ruta').val('');
                });

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

         // Función para abrir el modal y mostrar la imagen cuando se hace clic en la imagen previsualizada
        $(document).on('click', '.preview-img', function() {
            var src = $(this).attr('src');
            $('#imagenModalContenido').attr('src', src);
            $('#imagenModal').modal('show');
        });

        $('#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 rounded-circle" src="' + e.target.result + '">');
                };

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

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

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

$('#microscopico').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);
</script>
@endsection
@endsection