@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'listarOrden'])
    <div class="container-fluid py-4">
{{--  buscar paciente con las ordenes Registrar Orden  --}}
<div class="row">
    <div class="col-md-4">
        {{-- para buscar al paciente --}}
        <div class="card mb-5 mb-xl-12 shadow show">
            <!--begin::Header-->
            <div class="card-header border-0 pt-3 pb-1">
                <!--begin::Card title-->
                <h3 class="card-title align-items-start flex-column">
                    <span class="card-label fw-boldest fs-3"> Buscar Paciente</span>
                    {{-- <span class="text-gray-400 fw-bold mt-2 fs-6">STUDIES</span> --}}
                </h3>
            </div>
            <div class="card-body pt-2 row">
                <div class="text-muted fw-bold mb-5 text-center">Complete todos los campos </div>
                    <!-- Modificar para usar dinamicamente-->
                    <form onsubmit="generate();return false">
                        <div class="d-flex flex-column mb-2 fv-row">
                            <label class="d-flex align-items-center fs-6 fw-bold form-label mb-2">
                                <span>Pacientes  <b class="text-danger" id="ncodigo"></b></span>
                                <i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="" data-bs-original-title="Seleccione Producto" aria-label="Seleccione Producto"></i>
                            </label>
                            <input class="form-control" type="text" name=""id='codigo'tabindex=-1 autofocus >
                        </div>
                        <div class="d-flex flex-column mb-2 fv-row">
                            <label class="d-flex align-items-center fs-6 fw-bold form-label mb-2">
                                <span>Orden <b class="text-danger" id="ncodigox"></b></span> <i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="" data-bs-original-title="Seleccione formato" aria-label="Seleccione formato"></i>
                            </label>
                            <input class="form-control  type="text" name=""id='codigo'tabindex=0>
                        </div>

                    </form>
                    <!-- fin Modificar para usar dinamicamente-->
                    <div class="text-center ">
                        <button id="idregis" type="submit" class="btn btn-primary btn-lg" tabindex=1>
                            <span class="indicator-label"> <i class="fa fa-plus"></i> Buscar Paciente </span>
                            {{-- <span class="indicator-progress">Cargando
                                <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                            </span> --}}
                        </button>
                    </div>
                </div>
            </div>
        </div>
        {{-- card derecho --}}
        <div class="col-md-8">
            <div class="card mb-2 mb-xl-10 shadow show">
                <!--begin::Header-->
                <div class="card-header border-0 pt-2 pb-1">
                    <!--begin::Card title-->
                    <h3 class="card-title align-items-start flex-column">
                            <span class="card-label fw-boldest fs-3">Solicitudes de ordenes del paciente</span>
                            <span class="text-gray-400 fw-bold mt-1 fs-6"></span>
                    </h3>
                    <div class="card-toolbar"></div>
                <!--end::Card toolbar-->
                </div>
                <div class="card-body py-0">
                    <div class="tab-content">
                        <!--begin::Tab pane-->
                        <div class="tab-pane fade active show" id="kt_lists_widget_3_tab_pane_1">
                            <div class="table-responsive py-4">
                                <div id="lpendientes">
                                    <div class="col-xl-12 col-lg-6">
                                            {{-- datos del paciente --}}
                                        <div class="row">
                                            <div class="col-sm-12 col-md-6">
                                                <div class="dataTables_length" id="tablausuario_length">
                                                    <label>Nombre:</label><br>
                                                    <label>Telefono Celular:</label><br>
                                                    <label>Codigo:</label><br>
                                                </div>
                                            </div>
                                            <div class="col-sm-12 col-md-6">
                                                <div id="tablausuario_filter" class="dataTables_filter">
                                                    <label>Apellido:</label><br>
                                                    <label>Localidad:</label><br>
                                                    <label>Fecha de registro:</label><br>
                                                </div>
                                            </div>
                                        </div>
                                            {{-- mensaje --}}
                                        <div class="d-flex flex-stack card-p flex-grow-1">
                                            <div class="d-flex flex-column text-end">
                                                <span class="text-gray-200 fw-bold fs-6">Ordenes del paciente/Estado</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="tablausuario_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
                                            {{-- lista de tabla --}}
                                        <div class="row">
                                            <div class="col-sm-12">
                                                <table id="tablausuario" class="table align-middle table-row-bordered table-row-dashed gy-5 dataTable no-footer" role="grid" aria-describedby="tablausuario_info">
                                                        <thead>
                                                            <tr class="text-start text-gray-400 fw-boldest fs-7 text-uppercase" role="row">
                                                                <th class="sorting_asc" tabindex="0" aria-controls="tablausuario" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Nro: activate to sort column descending" style="width: 25px;">Nro</th>
                                                                <th class="sorting" tabindex="0" aria-controls="tablausuario" rowspan="1" colspan="1" aria-label="Codigo Paciente: activate to sort column ascending" style="width: 55px;">Nombre Solicitud</th>
                                                                <th class="sorting" tabindex="0" aria-controls="tablausuario" rowspan="1" colspan="1" aria-label="Fecha/Hora Registro: activate to sort column ascending" style="width: 99.5312px;">Fecha/Hora Registro</th>
                                                                <th class="sorting" tabindex="0" aria-controls="tablausuario" rowspan="1" colspan="1" aria-label="Opciones: activate to sort column ascending" style="width: 60px;">Estado</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            {{-- <a href="" onclick="" class="d-flex align-items-center p-3 rounded bg-white shadow bg-state-opacity-50 mb-1"> --}}
                                                            <div class="symbol symbol-35px symbol-circle me-5 bt">
                                                                <tr class="odd" role="row">
                                                                    <td class="sorting_1">
                                                                        <span class=" ">1</span>
                                                                    </td>
                                                                    <td><span class="">Rayos X</span></td>
                                                                    <td>
                                                                        <span class="">2023-06-22 18:47:49</span>
                                                                    </td>
                                                                    <td>
                                                                        <span class="badge badge-warning">Pendiente</span>
                                                                    </td>
                                                                </tr>
                                                            </div>
                                                            {{-- </a> --}}
                                                        </tbody>
                                                </table>
                                            </div>
                                        </div>
                                            {{-- foot --}}
                                        <div class="row">
                                                <div class="col-sm-12 col-md-5">
                                                    <div class="dataTables_info" id="tablausuario_info" role="status" aria-live="polite">Mostrando 1 de 1 a 1 entre </div>
                                                </div>
                                                        {{-- button circul --}}
                                                <div class="col-sm-12 col-md-7">
                                                    <div class="dataTables_paginate paging_simple_numbers" id="tablausuario_paginate">
                                                        <ul class="pagination">
                                                            <li class="paginate_button page-item previous disabled" id="tablausuario_previous">
                                                                <a href="#" aria-controls="tablausuario" data-dt-idx="0" tabindex="0" class="page-link">
                                                                    <i class="ki ki-arrow-back"></i>
                                                                </a>
                                                            </li>
                                                            <li class="paginate_button page-item active">
                                                                <a href="#" aria-controls="tablausuario" data-dt-idx="1" tabindex="0" class="page-link">1</a>
                                                            </li>
                                                            <li class="paginate_button page-item next disabled" id="tablausuario_next">
                                                                <a href="#" aria-controls="tablausuario" data-dt-idx="2" tabindex="0" class="page-link">
                                                                    <i class="ki ki-arrow-next"></i>
                                                                </a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                        </div>
                                    </div>
                                </div>
                                <button type="button" class="btn btn-primary" data-bs-toggle="modal"data-bs-target="#VerExam" autocomplete="off">Ver</button>
                                <button type="button" class="btn btn-primary" data-bs-toggle="modal"data-bs-target="#EditarExam" autocomplete="off">Editar</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{-- informacion --}}
            <div class="notice d-flex bg-light-primary rounded shadow border-light-primary border border-dashed p-4">
                <span class="svg-icon svg-icon-2tx svg-icon-primary me-1">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                        <circle fill="#000000" opacity="0.3" cx="12" cy="12" r="10"></circle>
                        <rect fill="#000000" x="11" y="7" width="2" height="8" rx="1"></rect>
                        <rect fill="#000000" x="11" y="16" width="2" height="2" rx="1"></rect>
                    </svg>
                </span>
                <div class="d-flex flex-stack flex-grow-1">
                    <!--begin::Content-->
                    <div class="fw-bold">
                        <h4 class="text-primary fw-bolder">Información</h4>
                        <div class="fs-9 text-primary">La orden se registrara en estado <b> pendiente</b>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{{-- Fin Registrar Paciente --}}
<!--Modal Registro Estudio -->
<div id="EditarExam" class="modal fade " data-bs-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" >
    <div class="modal-dialog " role="document">
        <div class="modal-content ">
            <!-- Modal Cabesa -->
            <div class="modal-header">
                <h4 class="modal-title">Resultados del Examen</h4>
                <button type="button" class="bt btn-outline-danger close" data-bs-dismiss="modal" >&times;</button>
            </div>
            <!-- Fin Modal hear -->
            <!-- Modal body -->
            <div class="modal-body">
                {{-- formulario de examenes --}}
                <form onsubmit="generate();return false">
                    <div class="row">
                        <!-- area izquierda -->
                        <div class="col-6">
                            <label class="d-flex align-items-center fw-bold form-label mb-2">
                                <span>Cabeza y cuello<b class="text-danger" id="ncodigo"></b></span>
                                <i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="" data-bs-original-title="Seleccione Producto" aria-label="Seleccione Producto"></i>
                            </label>
                            <div >
                                <table class="table table-borderless" >
                                    <tbody >
                                        <tr>
                                            <td >Perfilograma nasal</td>
                                            <td >
                                                <label class="fw-bold form-check-label ">
                                                    <input type="checkbox" class="form-input"
                                                        id="" placeholder="AP" >AP
                                                </label>
                                            </td>
                                            <td >
                                                <label class="fw-bold form-check-label ">
                                                    <input type="checkbox" class="form-input"
                                                        id="" placeholder="AP" >LAT
                                                </label>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td >CRANEO</td>
                                            <td >
                                                <label class="fw-bold form-check-label ">
                                                    <input type="checkbox" class="form-input"
                                                        id="" placeholder="AP" >AP
                                                </label>
                                            </td>
                                            <td >
                                                <label class="fw-bold form-check-label ">
                                                    <input type="checkbox" class="form-input"
                                                        id="" placeholder="AP" >LAT
                                                </label>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td >Silla Turaca</td>
                                            <td >
                                                <label class="fw-bold form-check-label ">
                                                    <input type="checkbox" class="form-input"
                                                        id="" placeholder="AP" >AP
                                                </label>
                                            </td>
                                            <td >
                                                <label class="fw-bold form-check-label ">
                                                    <input type="checkbox" class="form-input"
                                                        id="" placeholder="AP" >LAT
                                                </label>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td >Oido</td>
                                            <td >
                                                <label class="fw-bold form-check-label ">
                                                    <input type="checkbox" class="form-input"
                                                        id="" placeholder="AP" >AP
                                                </label>
                                            </td>
                                            <td >
                                                <label class="fw-bold form-check-label ">
                                                    <input type="checkbox" class="form-input"
                                                        id="" placeholder="AP" >LAT
                                                </label>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <!-- area izquierda -->
                        <!-- area derecha -->
                        <div class="col-5">
                            <label class="d-flex align-items-center fs-6 fw-bold form-label mb-2">
                                <span>Miembro superior<b class="text-danger" id="ncodigo"></b></span>
                                <i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="" data-bs-original-title="Seleccione Producto" aria-label="Seleccione Producto"></i>
                            </label>
                            <div >
                                <table class="table table-borderless" >
                                    <tbody>
                                        <tr>
                                            <td >Clavicula</td>
                                            <td >
                                                <label class="fw-bold form-check-label ">
                                                    <input type="checkbox" class="form-input"
                                                        id="" placeholder="AP" >AP
                                                </label>
                                            </td>
                                            <td >
                                                <label class="fw-bold form-check-label ">
                                                    <input type="checkbox" class="form-input"
                                                        id="" placeholder="AP" >LAT
                                                </label>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td >Escapula en Y</td>
                                            <td >
                                                <label class="fw-bold form-check-label ">
                                                    <input type="checkbox" class="form-input"
                                                        id="" placeholder="AP" >AP
                                                </label>
                                            </td>
                                            <td >
                                                <label class="fw-bold form-check-label ">
                                                    <input type="checkbox" class="form-input"
                                                        id="" placeholder="AP" >LAT
                                                </label>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td >Hombro</td>
                                            <td >
                                                <label class="fw-bold form-check-label ">
                                                    <input type="checkbox" class="form-input"
                                                        id="" placeholder="AP" >AP
                                                </label>
                                            </td>
                                            <td >
                                                <label class="fw-bold form-check-label ">
                                                    <input type="checkbox" class="form-input"
                                                        id="" placeholder="AP" >LAT
                                                </label>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td >Brazo (adulto)</td>
                                            <td >
                                                <label class="fw-bold form-check-label ">
                                                    <input type="checkbox" class="form-input"
                                                        id="" placeholder="AP" >AP
                                                </label>
                                            </td>
                                            <td >
                                                <label class="fw-bold form-check-label ">
                                                    <input type="checkbox" class="form-input"
                                                        id="" placeholder="AP" >LAT
                                                </label>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <!--Fin area derecha -->
                    </div>
                </form>
                <div class="text-muted fw-bold mb-1 text-center">Complete todos los campos requeridos</div>
            </div>
            <!-- Fin Modal body -->
            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary"
                        data-bs-dismiss="modal"
                        onclick="window.modal1.close()">
                    Salir
                </button>
                <button type="button" class="btn btn-primary"
                        data-target=""data-toggle="modal">
                    Siguiete
                </button>
                <button type="button" class="btn btn-primary "data-toggle="modal"
                        data-target="#VerExam" >
                    Finalizar
                </button>
            </div>
            <!--fin Modal footer -->
        </div>
    </div>
</div>
<div id="VerExam" class="modal fade" data-bs-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h2 class="mb-0">Registro Estudio</h2>
          <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        {{-- body gril --}}
        <div class="modal-body">
            <form>
                <h3 class="text-dark fw-bolder fs-3 mb-2 text-center">Datos Examen</h3>
                {{-- <div class="text-muted fw-bold mb-1 text-center">Complete todos los campos requeridos</div> --}}
                <div class="form-group">
                    <div class="row">
                        <div class="col-6">
                            <label for="recipient-name" class="col-form-label">Nombre del Paciente</label>
                            <input type="text" class="form-control" placeholder="Marcelo llorente" id="recipient-name" disabled>
                        </div>
                        <div class="col-6">
                            <label for="recipient-name" class="col-form-label">Codigo paciente</label>
                            <input type="text" class="form-control" placeholder="8487438" id="recipient-name" disabled>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-3">
                            <label for="recipient-name" class="col-form-label">Fecha Estudio</label>
                            <input type="text" class="form-control" placeholder="27/6/2023" id="recipient-name" disabled>
                        </div>
                        <div class="col-8">
                            <label for="recipient-name" class="col-form-label">Nombre del estudio</label>
                            <input type="text" class="form-control" placeholder="RAXOS X" id="recipient-name" disabled>
                        </div>
                    </div>
                </div>
            </form>
            {{-- formulario de examenes --}}
            <form onsubmit="generate();return false">
                <div class="form-row">
                    <!-- area izquierda -->
                    <div class="col-6">
                        <label class="d-flex align-items-center fs-6 fw-bold form-label mb-2">
                            <span>Cabeza y cuello<b class="text-danger" id="ncodigo"></b></span>
                            <i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="" data-bs-original-title="Seleccione Producto" aria-label="Seleccione Producto"></i>
                        </label>
                        <div >
                            <table class="table table-borderless" >
                                <tbody >
                                    <tr>
                                        <td >Perfilograma nasal</td>
                                        <td >
                                            <label class="fw-bold form-check-label ">
                                                <input type="checkbox" class="form-input"
                                                    id="" placeholder="AP" >AP
                                            </label>
                                        </td>
                                        <td >
                                            <label class="fw-bold form-check-label ">
                                                <input type="checkbox" class="form-input"
                                                    id="" placeholder="AP" >LAT
                                            </label>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td >CRANEO</td>
                                        <td >
                                            <label class="fw-bold form-check-label ">
                                                <input type="checkbox" class="form-input"
                                                    id="" placeholder="AP" >AP
                                            </label>
                                        </td>
                                        <td >
                                            <label class="fw-bold form-check-label ">
                                                <input type="checkbox" class="form-input"
                                                    id="" placeholder="AP" >LAT
                                            </label>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td >Silla Turaca</td>
                                        <td >
                                            <label class="fw-bold form-check-label ">
                                                <input type="checkbox" class="form-input"
                                                    id="" placeholder="AP" >AP
                                            </label>
                                        </td>
                                        <td >
                                            <label class="fw-bold form-check-label ">
                                                <input type="checkbox" class="form-input"
                                                    id="" placeholder="AP" >LAT
                                            </label>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td >Oido</td>
                                        <td >
                                            <label class="fw-bold form-check-label ">
                                                <input type="checkbox" class="form-input"
                                                    id="" placeholder="AP" >AP
                                            </label>
                                        </td>
                                        <td >
                                            <label class="fw-bold form-check-label ">
                                                <input type="checkbox" class="form-input"
                                                    id="" placeholder="AP" >LAT
                                            </label>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <!-- area izquierda -->
                    <!-- area derecha -->
                    <div class="col-5">
                        <label class="d-flex align-items-center fs-6 fw-bold form-label mb-2">
                            <span>Miembro superior<b class="text-danger" id="ncodigo"></b></span>
                            <i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="" data-bs-original-title="Seleccione Producto" aria-label="Seleccione Producto"></i>
                        </label>
                        <div >
                            <table class="table table-borderless" >
                                <tbody>
                                    <tr>
                                        <td >Clavicula</td>
                                        <td >
                                            <label class="fw-bold form-check-label ">
                                                <input type="checkbox" class="form-input"
                                                    id="" placeholder="AP" >AP
                                            </label>
                                        </td>
                                        <td >
                                            <label class="fw-bold form-check-label ">
                                                <input type="checkbox" class="form-input"
                                                    id="" placeholder="AP" >LAT
                                            </label>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td >Escapula en Y</td>
                                        <td >
                                            <label class="fw-bold form-check-label ">
                                                <input type="checkbox" class="form-input"
                                                    id="" placeholder="AP" >AP
                                            </label>
                                        </td>
                                        <td >
                                            <label class="fw-bold form-check-label ">
                                                <input type="checkbox" class="form-input"
                                                    id="" placeholder="AP" >LAT
                                            </label>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td >Hombro</td>
                                        <td >
                                            <label class="fw-bold form-check-label ">
                                                <input type="checkbox" class="form-input"
                                                    id="" placeholder="AP" >AP
                                            </label>
                                        </td>
                                        <td >
                                            <label class="fw-bold form-check-label ">
                                                <input type="checkbox" class="form-input"
                                                    id="" placeholder="AP" >LAT
                                            </label>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td >Brazo (adulto)</td>
                                        <td >
                                            <label class="fw-bold form-check-label ">
                                                <input type="checkbox" class="form-input"
                                                    id="" placeholder="AP" >AP
                                            </label>
                                        </td>
                                        <td >
                                            <label class="fw-bold form-check-label ">
                                                <input type="checkbox" class="form-input"
                                                    id="" placeholder="AP" >LAT
                                            </label>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <!--Fin area derecha -->
                </div>
            </form>
        </div>
        {{-- footer --}}
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Salir</button>
          <button type="button" class="btn btn-primary" data-target=""data-toggle="modal">Siguiete</button>
          <button type="button" class="btn btn-primary" disabled>Verifiacar</button>
        </div>
      </div>
    </div>
</div>
@endsection