@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">
        <div class="row">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header pb-0">
                        <h6 class="text-center"> Solicitud de Estudio</h6>
                    </div>
                    <div class="card-body px-0 pt-0 pb-2">
                        <div class="">
                            <div class="text-muted fw-bold mb-2 text-center">Complete todos los campos </div>
                            <div class="card-body pt-2  border-0 row">
                                <!-- Modificar para usar dinamicamente-->
                                <form onsubmit="generate();return false">
                                    {{-- columna1 --}}
                                    <div class="row ">
                                        <!--fila 1  -->
                                        <div class="col-3">
                                            <label class="d-flex align-items-center fs-6 fw-bold form-label mb-2">
                                                <span>SEDES <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 SEDES"
                                                    aria-label="Seleccione SEDES"></i>
                                            </label>
                                            <select id="codigo"
                                                class="form-select form-select-solid select2"
                                                 tabindex="-1"
                                                aria-hidden="true">
                                                <option value="1">Chuquisaca</option>
                                                <option value="2">Tarija</option>
                                                <option value="3">Cochabamba</option>
                                                <option value="4">Potosi</option>
                                                <option value="5">Oruro</option>
                                                <option value="6">La Paz</option>
                                                <option value="7">Beni</option>
                                                <option value="8">Pando</option>
                                                <option value="9">Santa Cruz</option>
                                            </select>
                                        </div>
                                        <!-- fin fila 1 -->
                                        <!--fila 2  -->
                                        <div class="col-3">
                                            <label class="d-flex align-items-center fs-6 fw-bold form-label mb-2">
                                                <span>RED<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 RED"
                                                    aria-label="Seleccione RED"></i>
                                            </label>
                                            <select id="codigo"
                                                class="form-select form-select-solid select2-hidden-accessible"
                                                data-control="select2" data-select2-id="select2-data-codigo" tabindex="-1"
                                                aria-hidden="true">
                                                <option value="1001">Sucre</option>
                                                <option value="1002">Yotala</option>
                                                <option value="1003">Yamparaes</option>
                                                <option value="1004">Tarabuco</option>
                                                <option value="1005">Tomina</option>
                                                <option value="1006">Zudañes</option>
                                                <option value="1007">Padilla</option>
                                                <option value="1008">Monteagudo</option>
                                                <option value="1009">Camargo</option>
                                            </select>
                                        </div>
                                        <!--fila 2  -->
                                        <!--fila 3 fecha -->
                                        <div class="col">
                                            <label class="d-flex align-items-center fs-6 fw-bold form-label mb-2">
                                                <span>Fecha de solicitud<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>
                                            <script>
                                                var f = new Date();
                                                var h = new Date();
                                                document.write(f.getDate() + "/" + (f.getMonth() + 1) + "/" + f.getFullYear());

                                                function myFunction() {
                                                    document.getElementById("FechaD").innerHTML = f;
                                                }
                                            </script>
                                            {{-- <input type="text" name="FechaD" class="form-control" id="FechaD"> --}}
                                        </div>
                                        <!--fila 3  -->
                                        <!--fila 4  hora-->
                                        <div class="col-1">
                                            <label class="d-flex align-items-center fs-6 fw-bold form-label mb-2">
                                                <span>Hora <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>
                                            <script>
                                                var f = new Date();
                                                var h = new Date();
                                                document.write(h.getHours() + ":" + (h.getMinutes() + 1));

                                                function myFunction() {
                                                    document.getElementById("FechaD").innerHTML = f;
                                                }
                                            </script>
                                            {{-- <input type="text" class="form-control" placeholder="Hora"> --}}
                                        </div>
                                        <!--fila 4  -->
                                    </div>
                                    {{-- columna2 --}}
                                    <div class="row">
                                        <div class="col-4">
                                            <!-- Lista orden-->
                                            <label class="d-flex align-items-center fs-6 fw-bold form-label mb-2">
                                                <span>Establecimiento<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>
                                            <select id="codigox"
                                                class="form-select form-select-solid select2-hidden-accessible"
                                                data-control="select2" data-select2-id="select2-data-codigox"
                                                tabindex="-1" aria-hidden="true">
                                                {{-- <option value="0" selected="" data-select2-id="select2-data-5-j6gb">Seleccione Establecimiento</option> --}}
                                                <option value="10001">Hospital "San Pedro Claver" </option>
                                                <option value="10002">Hospital "Santa Barbara" </option>
                                                <option value="10003">Hospital "Boliviano Japones" </option>
                                                <option value="10004">Hospital "San Juan de Dios" </option>
                                            </select>
                                            <!-- Fin Lista orden -->
                                        </div>
                                        <div class="col-4">
                                            <div class="form-check form-check-inline ">
                                                <label class="fs-6 fw-bold form-label ">
                                                    S.U.S.
                                                    <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>
                                            <form action="from">
                                                <div class="from-check"action="/action_page.php">
                                                    <div class="form-check form-check-inline">
                                                        <input class="form-check-input border-1" type="radio"
                                                            name="inlineRadioOptions" id="gridCheck"aria-label="Si">
                                                        <label class="fw-bold form-check-label " for="gridCheck">Si
                                                        </label>
                                                    </div>
                                                    <div class="form-check form-check-inline">
                                                        <input class="form-check-input" type="radio"
                                                            name="inlineRadioOptions" id="gridCheck1"aria-label="No">
                                                        <label class=" fw-bold form-check-label " for="gridCheck1">NO
                                                        </label>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                        <div class="col-4">
                                            <label class="d-flex align-items-center fs-6 fw-bold form-label mb-2">
                                                <span>Servicio<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 Servicio"></i>
                                            </label>
                                            <input type="text" class="form-control" placeholder="Selecione Servicio">
                                        </div>
                                    </div>
                                    {{-- columna3 --}}
                                    <div class="row">
                                        <div class="col-4">
                                            <label class="d-flex align-items-center fs-6 fw-bold form-label mb-2">
                                                <span>Nombre Paciente<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 Servicio"></i>
                                            </label>
                                            <input type="text" class="form-control" placeholder="Selecione Servicio">
                                        </div>
                                        <div class="col-4">
                                            <label class="d-flex align-items-center fs-6 fw-bold form-label mb-2">
                                                <span>N° REgistro (Fecha Naciento)<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 Servicio"></i>
                                            </label>
                                            <input type="text" class="form-control" placeholder="Selecione Servicio">
                                        </div>
                                        <div class="col-4">
                                            <label class="d-flex align-items-center fs-6 fw-bold form-label mb-2">
                                                <span>N° Historia Cliente<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 Servicio"></i>
                                            </label>
                                            <input type="text" class="form-control" placeholder="Selecione Servicio">
                                        </div>
                                    </div>
                                    {{-- columna4 --}}
                                    <div class="row">
                                        <div class="col-12">
                                            <label class="d-flex align-items-center fs-6 fw-bold form-label mb-2">
                                                <span>Nombre y Aplellidos Paciente<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 Servicio"></i>
                                            </label>
                                            <input type="text" class="form-control"
                                                placeholder="Escriba Nombre y Aplellidos Paciente...">
                                        </div>
                                    </div>
                                    {{-- columna5 --}}
                                    <div class="row">
                                        <div class="col-12">
                                            <label class="d-flex align-items-center fs-6 fw-bold form-label mb-2">
                                                <span>Diagnostico principa (registro nombre y CIE.10)<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 Servicio"></i>
                                            </label>
                                            <input type="text" class="form-control"
                                                placeholder="Escriba Diagnostico principal...">
                                        </div>
                                    </div>
                                    {{-- columna6 --}}
                                    <div class="row">
                                        <div class="col-3">
                                            <label class="d-flex align-items-center fs-6 fw-bold form-label mb-2">
                                                <span>Sala<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 Servicio"></i>
                                            </label>
                                            <input type="text" class="form-control" placeholder="Selecione Servicio">
                                        </div>
                                        <div class="col-3">
                                            <label class="d-flex align-items-center fs-6 fw-bold form-label mb-2">
                                                <span>N° Cama<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 Servicio"></i>
                                            </label>
                                            <input type="text" class="form-control" placeholder="Selecione Servicio">
                                        </div>
                                        <div class="col-3">
                                            <label class="d-flex align-items-center fs-6 fw-bold form-label mb-2">
                                                <span>Edad<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 Servicio"></i>
                                            </label>
                                            <input type="text" class="form-control" placeholder="Selecione Servicio">
                                        </div>
                                        <div class="col-3">
                                            <div class="form-check form-check-inline ">
                                                <label class="fs-6 fw-bold form-label ">
                                                    Sexo
                                                    <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>
                                            <form action="from">
                                                <div>
                                                    <div class="form-check form-check-inline">
                                                        <input class="form-check-input" type="radio"
                                                            name="inlineRadioOptions" id="gridCheck"aria-label="Si">
                                                        <label class="fw-bold form-check-label " for="gridCheck">M
                                                        </label>
                                                    </div>
                                                    <div class="form-check form-check-inline">
                                                        <input class="form-check-input" type="radio"
                                                            name="inlineRadioOptions" id="gridCheck1"aria-label="No">
                                                        <label class=" fw-bold form-check-label " for="gridCheck1">F
                                                        </label>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </form>
                                <!-- fin Modificar para usar dinamicamente-->
                                <div class="text-center row col-8">
                                    <div class="form-row col-4 float-right ">
                                        <label class="d-flex align-items-center fs-6 fw-bold form-label mb-2">
                                            <span>Soliciatante<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 Solicitante"
                                                aria-label="Seleccione Solicitante"></i>
                                        </label>
                                        <input type="text" class="form-control" placeholder="Selecione Soliciatane">
                                    </div>
                                </div>
                            </div>
                            <div class=" d-flex pt-3 justify-content-center">
                                <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal"
                                    data-bs-target="#modalExamen">
                                    Agregar Examen
                                </button>
                            </div>
                            {{-- Fin Registro datos --}}
                            <br>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        {{-- modal --}}
        <div class="modal fade" id="modalExamen" tabindex="-1" role="dialog"
            aria-labelledby="resetPasswordModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg rounded" role="document">
                <div class="modal-content border-0">
                    <div class="modal-body">
                        <div class="my-5 text-center">
                            <h3 class="font-weight-bold">Seleccione</h3>
                            <p class="text-muted">Los Éxamenes a realizar.</p>
                        </div>
                        <ul class="nav nav-tabs" id="myTab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="home-tab" data-bs-toggle="tab"
                                    data-bs-target="#home" type="button" role="tab" aria-controls="home"
                                    aria-selected="true">Cabeza y cuello</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile"
                                    type="button" role="tab" aria-controls="profile" aria-selected="false">Miembro
                                    superior</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact"
                                    type="button" role="tab" aria-controls="contact" aria-selected="false">Miembro
                                    inferior</button>
                            </li>
                        </ul>
                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade show active" id="home" role="tabpanel"
                                aria-labelledby="home-tab">
                                <div class="table-responsive">
                                    <table class="table table-borderless" id="formGuardarDato">
                                        <tbody>
                                            <tr>
                                                <td>
                                                    <div class="form-check form-switch">
                                                        <input class="form-check-input" type="checkbox"
                                                            id="flexSwitchCheckChecked">
                                                        <label class="form-check-label"
                                                            for="flexSwitchCheckChecked">Perfilograma nasal</label>
                                                    </div>
                                                </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>
                                                    <div class="form-check form-switch">
                                                        <input class="form-check-input" type="checkbox"
                                                            id="flexSwitchCheckChecked">
                                                        <label class="form-check-label"
                                                            for="flexSwitchCheckChecked">Craneo</label>
                                                    </div>
                                                </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>
                            <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                                <div class="tab-pane fade show active" id="home" role="tabpanel"
                                    aria-labelledby="home-tab">
                                    <div class="table-responsive">
                                        <table class="table table-borderless">
                                            <tbody>
                                                <tr>
                                                    <td>
                                                        <div class="form-check form-switch">
                                                            <input class="form-check-input" type="checkbox"
                                                                id="flexSwitchCheckChecked">
                                                            <label class="form-check-label"
                                                                for="flexSwitchCheckChecked">Clavícula</label>
                                                        </div>
                                                    </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>
                                                        <div class="form-check form-switch">
                                                            <input class="form-check-input" type="checkbox"
                                                                id="flexSwitchCheckChecked">
                                                            <label class="form-check-label"
                                                                for="flexSwitchCheckChecked">Hombro</label>
                                                        </div>
                                                    </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>
                                                        <div class="form-check form-switch">
                                                            <input class="form-check-input" type="checkbox"
                                                                id="flexSwitchCheckChecked">
                                                            <label class="form-check-label"
                                                                for="flexSwitchCheckChecked">Codo</label>
                                                        </div>
                                                    </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>
                            </div>
                            <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                                <div class="tab-pane fade show active" id="home" role="tabpanel"
                                    aria-labelledby="home-tab">
                                    <div class="table-responsive">
                                        <table class="table table-borderless">
                                            <tbody>
                                                <tr>
                                                    <td>
                                                        <div class="form-check form-switch">
                                                            <input class="form-check-input" type="checkbox"
                                                                id="flexSwitchCheckChecked">
                                                            <label class="form-check-label"
                                                                for="flexSwitchCheckChecked">Pierna</label>
                                                        </div>
                                                    </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>
                                                        <div class="form-check form-switch">
                                                            <input class="form-check-input" type="checkbox"
                                                                id="flexSwitchCheckChecked">
                                                            <label class="form-check-label"
                                                                for="flexSwitchCheckChecked">Rodilla</label>
                                                        </div>
                                                    </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>
                                                        <div class="form-check form-switch">
                                                            <input class="form-check-input" type="checkbox"
                                                                id="flexSwitchCheckChecked">
                                                            <label class="form-check-label"
                                                                for="flexSwitchCheckChecked">Femur</label>
                                                        </div>
                                                    </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>
                            </div>
                        </div>
                        <a id="guardar" class="btn btn-outline-primary mt-5">Guardar</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('layouts.footers.auth.footer')
    </div>
    <script>
         document.getElementById('guardar').addEventListener('click', function() {
        Swal.fire({
            title: '¿Estás seguro?',
            text: '¿Deseas guardar este dato?',
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Sí, guardar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                // Aquí puedes hacer una petición AJAX para guardar el dato
                // Por ejemplo, enviar un formulario con la acción de guardar
                document.getElementById('formGuardarDato').submit();
            }
        });
    });
    </script>
@endsection