@extends('layouts.app')
<style>
  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;
          }
  </style>
@section('content')
<div class="nk-content">
    <div class="container-fluid">
      <div class="nk-content-inner">
        <div class="nk-content-body">
          <div class="nk-block">
            <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-danger m-1">
              <em class="icon ni ni-cross-circle"></em><span>Salir</span>
            </a>
            <div class="row g-gs">
              <div class="col-xxl-12 col-sm-12">
                <div class="card border m-1 shadow">
                  <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>HISTORIAL DEL PACIENTE</span></h6>
                        </div>
                      </div>
    
                      <div class="card-body">
                        <div class="row g-3">
                            <div class="col-12 col-lg-6">
                                <div class="border p-3 shadow rounded-5">
                                    <div class="row">
                                        <div class="col-12 col-md-6">
                                            <div class="mb-1 row">
                                                <label for="registro" class="col-sm-4 col-form-label">Código</label>
                                                <div class="col-sm-8">
                                                    <input type="text" class="form-control form-control-sm" id="registro" disabled value="{{$datos[0]->codigoPaciente}}" style="text-transform: uppercase">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <div class="mb-1 row">
                                                <label for="ci" class="col-sm-4 col-form-label">C.I.</label>
                                                <div class="col-sm-8">
                                                    <input type="text" class="form-control form-control-sm" id="ci" disabled value="{{$datos[0]->ci}}" style="text-transform: uppercase">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="mb-1 row">
                                                <label for="paterno" class="col-sm-2 col-form-label">Apellido Pat.</label>
                                                <div class="col-sm-10">
                                                    <input type="text" class="form-control form-control-sm" id="paterno" disabled value="{{$datos[0]->paterno}}" style="text-transform: uppercase">
                                                </div>
                                            </div>
                                            <div class="mb-1 row">
                                                <label for="materno" class="col-sm-2 col-form-label">Apellido Mat.</label>
                                                <div class="col-sm-10">
                                                    <input type="text" class="form-control form-control-sm" id="materno" disabled value="{{$datos[0]->materno}}" style="text-transform: uppercase">
                                                </div>
                                            </div>
                                            <div class="mb-1 row">
                                                <label for="nombre" class="col-sm-2 col-form-label">Nombre(s)</label>
                                                <div class="col-sm-10">
                                                    <input type="text" class="form-control form-control-sm" id="nombre" disabled value="{{$datos[0]->nombre}}" style="text-transform: uppercase">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <div class="mb-1 row">
                                                <label for="nacimiento" class="col-sm-4 col-form-label">F. Nacimiento</label>
                                                <div class="col-sm-8">
                                                    <input type="date" class="form-control form-control-sm" id="nacimiento" disabled value="{{$datos[0]->nacimiento}}" style="text-transform: uppercase">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-3">
                                            <div class="mb-1 row">
                                                <label for="edad" class="col-sm-5 col-form-label">Edad</label>
                                                <div class="col-sm-7">
                                                    <input type="text" class="form-control form-control-sm" id="edad" disabled value="{{$datos[0]->edad}}" style="text-transform: uppercase">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-3">
                                            <div class="mb-1 row">
                                                <label for="sexo" class="col-sm-5 col-form-label">Sexo</label>
                                                <div class="col-sm-7">
                                                    <input type="text" class="form-control form-control-sm" id="sexo" disabled value="{{$datos[0]->sexo}}" style="text-transform: uppercase">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="mb-1 row">
                                                <label for="alergia" class="col-sm-2 col-form-label">Diagnostico</label>
                                                <div class="col-sm-10">
                                                    <input type="text" class="form-control form-control-sm" id="alergia" disabled value="{{$datos[0]->diagnostico}}" style="text-transform: uppercase">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-lg-6 border p-3 shadow rounded-5">
                                <div class="card-inner">
                                    <ul class="nav nav-tabs mt-n3" role="tablist">
                                        <li class="nav-item" role="presentation">
                                            <a class="nav-link active px-3" data-bs-toggle="tab" href="#tabItem1" aria-selected="true" role="tab">HISTORIAL</a>
                                            <input type="hidden" name="idpaciente" id="idpaciente" value="{{$id}}">
                                        </li>
                                        <!--<li class="nav-item" role="presentation">
                                            <a class="nav-link px-3" data-bs-toggle="tab" href="#tabItem2" aria-selected="true" role="tab">DOCUMENTOS</a>
                                        </li>-->
                                    </ul>
                                    <div class="tab-content">
                                        <div class="tab-pane active show" id="tabItem1" role="tabpanel">
                                          <div id="miTabla" style="height: 400px; width: 100%;" class="ag-theme-alpine"></div>
                                        </div>
                                        <div class="tab-pane" id="tabItem2" role="tabpanel">
                                            
                                        </div>
                                    </div>
                                </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="{{asset("js/modulos/historialinmuno.js")}}"></script>
@endsection
@endsection