<div>
    <!--*******************************************************************-->
    <!--** NOMBRE DEL COMPOTENTE: PANEL DE USUARIO                       **-->
    <!--** AUTOR: JOUNNERTH TORRES                                       **-->
    <!--** FECHA DE ACTUALIZACION: 08/04/2023                            **-->
    <!--**---------------------------------------------------------------**-->
    <!--** CONTROLADOR:  Articulo/ListadoArticulo                        **-->
    <!--**---------------------------------------------------------------**-->
    <!--** ESTE COMPONENTE SIRVE PARA LISTAR TODOSLOS  USUARIOS DEL      **-->
    <!--** SISTEMA Y ESTA COMPUESTO POR:                                 **-->
    <!--**   # TABLA DONDE SE DESPLIEGA LA LISTA DE USUARIOS             **-->
    <!--**   # BARRA DE BUSQUEDA                                         **-->
    <div>
        <!--*******************************************************************-->
        <!--** TITULO                                                        **-->
        <!--*******************************************************************-->
        @section('titulo')
            Panel de anestesiologo
        @endsection
        <div class="row">
            <div class="col-md-12 pt-2">
                <!--******************************************************************-->
                <!--** AGREGAR INTERVENCION                                         **-->
                <!--******************************************************************-->
                <div class="card">
                    <div class="card-header">
                        <div class="row">
                            <div class="col-md-12">
                                @livewire('anestesiologo.nuevo')
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-8 py-2">
                <x-card.lg>
                    <x-slot name="card_head">
                        <div class="row">
                            <div class=" col-md-6 d-none d-lg-block">
                                <div class="flex-fill">
                                    <div class="input-group input-group-sm  flex-grow-1">
                                        <input type="text" class="form-control bg-light border-end-0 "
                                            placeholder="Buscar usuario" id='buscador_anestesiologo'
                                            name='buscador_anestesiologo'
                                            wire:model.debounce.1000ms="buscador_anestesiologo" autocomplete="off">
                                        <span
                                            class="input-group-text input-group-text-sm bg-light text-secondary border-start-0"><i
                                                class="fa-solid fa-magnifying-glass"></i></span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 d-none d-lg-block" align="right">
                                <span class="h6">Total de anestesiologos listados:&nbsp; <span
                                        class="badge bg-secondary my-1">{{ $count_anestesiologos }}</span>
                            </div>
                        </div>
                        <!--*******************************************************-->
                        <!--**  MENSAJE: MIESTRA SE BUSCAN EL USUARIOS          **-->
                        <!--*******************************************************-->
                        <div wire:loading wire:target="buscador_anestesiologo">
                            <strong>Buscando articulos</strong>
                            <span class="spinner-border spinner-border-sm" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </span>
                        </div>
                    </x-slot>
                    <x-slot name="card_body">
                        <div role="buscar_articulo" wire:loading.remove wire:target="buscador_anestesiologo">
                            <!--********************-->
                            <!--**  TABLE         **-->
                            <!--********************-->
                            <div class="table-responsive-md">
                                <x-datatable.tablelg>
                                    <!--************************************************************-->
                                    <!--** TITULO Y BUSCADOR DE USUARIOS                         **-->
                                    <!--************************************************************-->
                                    <x-slot name="table_head">
                                        <tr>
                                            <!--*******************************************************-->
                                            <!--**  CONDICION Y MECANISMO PARA HACER EL ORDENAMIENTO **-->
                                            <!--** POR COLUNCA                                       **-->
                                            <!--** SE DEBE AJUSTAR UN TAMANO FIJO A LAS COLUMNAS     **-->
                                            <!--** CON EL FIN DE EVITAR PROBLEMAS AL HACER           **-->
                                            <!--** EL REFRSCAMIENTO DEL ORDENAMIENTO                 **-->
                                            <!--*******************************************************-->
                                            <x-datatable.th nombre="ID" columna='id'
                                                style="width:60px; min-width:60px;">
                                                @if ($campo_orden == 'id')
                                                    @if ($ordenado == 'asc')
                                                        <i class="fas fa-sort-up float-right mt-1"></i>
                                                    @else<i class="fas fa-sort-down float-right mt-1"></i>
                                                    @endif
                                                @else
                                                    <i class="fas fa-sort float-right mt-1"></i>
                                                @endif
                                            </x-datatable.th>
                                            <x-datatable.th nombre="#Documento" columna='documento'
                                                style="width:120px; min-width:120px;">
                                                @if ($campo_orden == 'documento')
                                                    @if ($ordenado == 'asc')
                                                        <i class="fas fa-sort-up float-right mt-1"></i>
                                                    @else<i class="fas fa-sort-down float-right mt-1"></i>
                                                    @endif
                                                @else
                                                    <i class="fas fa-sort float-right mt-1"></i>
                                                @endif
                                            </x-datatable.th>
                                            <x-datatable.th nombre="Cirujano" columna='nombre'
                                                style="width:120px; min-width:120px;">
                                                @if ($campo_orden == 'nombre')
                                                    @if ($ordenado == 'asc')
                                                        <i class="fas fa-sort-up float-right mt-1"></i>
                                                    @else<i class="fas fa-sort-down float-right mt-1"></i>
                                                    @endif
                                                @else
                                                    <i class="fas fa-sort float-right mt-1"></i>
                                                @endif
                                            </x-datatable.th>
                                            <x-datatable.th nombre="Genero" columna='genero'
                                                style="width:90px; min-width:90px;">
                                                @if ($campo_orden == 'nombre')
                                                    @if ($ordenado == 'asc')
                                                        <i class="fas fa-sort-up float-right mt-1"></i>
                                                    @else<i class="fas fa-sort-down float-right mt-1"></i>
                                                    @endif
                                                @else
                                                    <i class="fas fa-sort float-right mt-1"></i>
                                                @endif
                                            </x-datatable.th>
                                            <x-datatable.th nombre="Status" columna='activo'
                                                style="width:100px; min-width:100px;">
                                                @if ($campo_orden == 'activo')
                                                    @if ($ordenado == 'asc')
                                                        <i class="fas fa-sort-up float-right mt-1"></i>
                                                    @else<i class="fas fa-sort-down float-right mt-1"></i>
                                                    @endif
                                                @else
                                                    <i class="fas fa-sort float-right mt-1"></i>
                                                @endif
                                            </x-datatable.th>
                                        </tr>
                                    </x-slot>
                                    <!--*******************************************************-->
                                    <!--**  VALORES DE LAS  COLUNAS                          **-->
                                    <!--*******************************************************-->
                                    <x-slot name="table_body">
                                        @if ($count_anestesiologos_busqueda > 0)
                                            @foreach ($anestesiologos as $anestesiologo)
                                                @if ($anestesiologo->activo == '0')
                                                    <tr class="d-none">
                                                    @else
                                                    <tr onclick="ir_a_editar()">
                                                @endif
                                                <td wire:click="seleccionar_anestesiologo({{ $anestesiologo->id }})">
                                                    <small>{{ $anestesiologo->id }}</small>
                                                </td>
                                                <td wire:click="seleccionar_anestesiologo({{ $anestesiologo->id }})">
                                                    <small>
                                                        <?= str_ireplace($buscador_anestesiologo, '<mark class="bg-dark text-light p-0 m-0 rounded-sm" > <strong>  ' . $buscador_anestesiologo . '</strong></mark>', $anestesiologo->documento) ?>
                                                    </small>
                                                </td>
                                                <td wire:click="seleccionar_anestesiologo({{ $anestesiologo->id }})">
                                                    <small>
                                                        <?= str_ireplace($buscador_anestesiologo, '<mark class="bg-dark text-light p-0 m-0 rounded-sm" > <strong>  ' . $buscador_anestesiologo . '</strong></mark>', $anestesiologo->nombre) ?>
                                                    </small>
                                                </td>
                                                <td wire:click="seleccionar_anestesiologo({{ $anestesiologo->id }})">
                                                    <small>
                                                        <!--********************************************************-->
                                                        <!--**  LA COLUMNA IMPORTADO                              **-->
                                                        <!--**  SE COLOCA UNA CONDICIO                            **-->
                                                        <!--**  CUANDO EL VALOR VIENE EN 0 SIGNIFICA NO IMPORTADO **-->
                                                        <!--**  PERO SI VIENE EN 1 SIGNIFICA QUE SI ES IMPORTADO  **-->
                                                        <!--********************************************************-->
                                                        @if ($anestesiologo->genero == 'F')
                                                            Femenino&nbsp;<i class="fa-solid fa-mercury"></i>
                                                        @elseif ($anestesiologo->genero == 'M')
                                                            Masculino&nbsp;<i class="fa-solid fa-mars"></i>
                                                        @endif
                                                    </small>
                                                </td>
                                                <td wire:click="seleccionar_anestesiologo({{ $anestesiologo->id }})">
                                                    <small>
                                                        <!--********************************************************-->
                                                        <!--**  LA COLUMNA IMPORTADO                              **-->
                                                        <!--**  SE COLOCA UNA CONDICIO                            **-->
                                                        <!--**  CUANDO EL VALOR VIENE EN 0 SIGNIFICA NO IMPORTADO **-->
                                                        <!--**  PERO SI VIENE EN 1 SIGNIFICA QUE SI ES IMPORTADO  **-->
                                                        <!--********************************************************-->
                                                        @if ($anestesiologo->activo == '1')
                                                            <span class="badge  bg-azul-intenzo shadow"><strong
                                                                    class="verde-neon">Activo</strong></span>
                                                        @elseif ($anestesiologo->activo == '2')
                                                            <span class="badge  bg-azul-intenzo shadow"><strong
                                                                    class="text-gris-neon">Desactivado</strong></span>
                                                        @endif
                                                    </small>
                                                </td>
                                                </tr>
                                            @endforeach
                                        @else
                                            <!--******************************************************-->
                                            <!--**  MENSAJE: USER NO ENCONTRADO                      **-->
                                            <!--******************************************************-->
                                            <tr class="table-secondary text-secondary ">
                                                <td colspan=9 style="height:65px; max-height:65px;">
                                                    <div class="d-flex justify-content-center">
                                                        <small> No se encontro ningun anestesiologo relacionado con la
                                                            busqueda:
                                                            <strong class="text-secondary">
                                                                {{ $buscador_anestesiologo }}.</strong>
                                                            <br>
                                                            favor validar nueva mente.</small>
                                                    </div>
                                                </td>
                                            <tr>
                                        @endif
                                    </x-slot>
                                    <x-slot name="table_footer">
                                    </x-slot>
                                </x-datatable.tablelg>
                            </div>
                        </div>
                    </x-slot>
                    <x-slot name="card_footer">
                        <div class="d-none d-lg-block">{{ $anestesiologos->onEachSide(4)->links() }}</div>
                        <div class="d-block d-lg-none"><small>{{ $anestesiologos->onEachSide(0, 5)->links() }}</small>
                        </div>
                    </x-slot>
                </x-card.lg>
            </div>
            <div class="col-md-4 py-2">
                <!--*******************************************************************-->
                <!--** ACTUALIZAR INTERVENCION                                       **-->
                <!--*******************************************************************-->
                <x-card.lg>
                    <x-slot name="card_head">
                        <h6 align="center">Actualizar Intervencion</h6>
                    </x-slot>
                    <x-slot name="card_body">
                        <div id="card_body_actualizar_anestesiologo" class="p-2" style="height:322px">
                            <!--***************************-->
                            <!--** CARGA                **-->
                            <!--***************************-->
                            <div wire:loading wire:target="seleccionar_anestesiologo">
                                <div class="row">
                                    <x-form.static.inputcarga label="Tipo de documento"></x-form.static.inputcarga>
                                    <x-form.static.inputcarga label="Documento"></x-form.static.inputcarga>
                                    <x-form.static.inputcarga label="Nombres"></x-form.static.inputcarga>
                                    <x-form.static.inputcarga label="Genero"></x-form.static.inputcarga>
                                    <x-form.static.inputcarga label="Status"></x-form.static.inputcarga>

                                </div>
                            </div>
                            <div wire:loading.remove wire:target="seleccionar_anestesiologo">
                                <!--***************************-->
                                <!--** TIPODOCUMENTO         **-->
                                <!--***************************-->
                                <x-form.lw.selectlabel label="Tipo de documento" msj="Seleccione el tipo"
                                    identificador="tipo_documento" atributo="tipo_documento">
                                    <option value="C">Cedula</option>
                                    <option value="P">Pasaporte</option>
                                    <option value="O">Otros</option>
                                </x-form.lw.selectlabel>
                                <!--***************************-->
                                <!--** DOCUMENTO              **-->
                                <!--***************************-->
                                <x-form.lw.inputlabel label="Documento" msj="Inserte numero de documento"
                                    identificador="documento" maxlength="50" />
                                <!--***************************-->
                                <!--** NOMBRES               **-->
                                <!--***************************-->
                                <x-form.lw.inputlabel label="Nombres" msj="Inserte nombres" identificador="nombre"
                                    maxlength="50" />
                                <!--***************************-->
                                <!--** GENERO                **-->
                                <!--***************************-->
                                <x-form.lw.selectlabel label="Genero" msj="Seleccione el genero"
                                    identificador="genero" atributo="genero" wire:loading.remove
                                    wire:target="seleccionar_anestesiologo">
                                    <option value="F">Femenino&nbsp;<i class="fa-solid fa-mercury"></i></option>
                                    <option value="M">Masculino&nbsp;<i class="fa-solid fa-mars"></i></option>
                                </x-form.lw.selectlabel>
                                <!--***************************-->
                                <!--** STATUS                 **-->
                                <!--***************************-->
                                <x-form.lw.selectlabel label="Status" msj="Seleccione el status"
                                    identificador="activo" atributo="activo">
                                    <option value="1">Activado</option>
                                    <option value="2">Desactivado</option>
                                </x-form.lw.selectlabel>
                            </div>
                        </div>
                    </x-slot>
                    <x-slot name="card_footer">
                        <button class="btn btn-sm border-primary text-white bg-azul-intenzo rounded border-2 shadow"
                            data-bs-toggle="modal" data-bs-target="#modal_actualizar_anestesiologo"
                            data-bs-placement='top' data-bs-toggle='tooltip' title="Activar anestesiologo"
                            wire:loading.attr="disabled">
                            Actualizar&nbsp;<i class="fas fa-edit text-warning"></i>
                        </button>
                        &nbsp;
                        <button class="btn btn-sm border-primary text-white bg-azul-intenzo rounded border-2 shadow "
                            data-bs-toggle="modal" data-bs-target="#modal_eliminar_anestesiologo"
                            data-bs-placement='top' data-bs-toggle='tooltip' title="Activar anestesiologo"
                            wire:loading.attr="disabled">
                            Eliminar&nbsp;<i class="fas fa-trash-alt text-danger"></i>
                        </button>
                    </x-slot>
                </x-card.lg>
            </div>
        </div>
    </div>
    <div>
        <!--********************************************-->
        <!--** MODAL ACTUALIZAR REGISTRO              **-->
        <!--********************************************-->
        <x-modal.simple titulo="Activar anestesiologo" identificador="modal_actualizar_anestesiologo"
            class="my-1 mx-3" msj="Actualizando anestesiologo" accion="actualizar_anestesiologo"
            preparar="seleccionar_anestesiologo" msjpreparar="Buscando anestesiologo" tipo="md">
            <x-slot name="body">
                <div wire:loading.remove>
                    <div align="center">
                        <h1> <i class="fa-solid fas fa-edit text-warning"></i></h1>
                        <div class="text-secondary"> Confirme si desea actualizar el anestesiologo: <strong
                                class="text-dark">{{ $nombre }}</strong> </strong>.
                        </div>
                        <small class="text-secondary">Si esta seguro pulsar Actualizar, si desea omitir la operacion
                            pulse
                            cancelar.</small>
                    </div>
                </div>
            </x-slot>
            <x-slot name="footer">
                <div wire:loading.remove>
                    <!--****************************************************-->
                    <!--** BOTONES DEL MODAL                              **-->
                    <!--****************************************************-->
                    <div class="d-flex justify-content-end mt-0 mb-2 p-0">
                        <x-btn.cancelar accion='resetear'>Cancelar</x-btn.cancelar>
                        &nbsp;
                        <x-btn.guardar accion='actualizar_anestesiologo'>Actualizar</x-btn.guardar>
                    </div>
                </div>
            </x-slot>
        </x-modal.simple>
        <!--********************************************-->
        <!--** MODAL ELIMINAR REGISTRO                 **-->
        <!--********************************************-->
        <x-modal.simple titulo="Eliminar anestesiologo" identificador="modal_eliminar_anestesiologo"
            class="my-1 mx-3" msj="Eliminando anestesiologo" accion="eliminar_anestesiologo"
            preparar="seleccionar_anestesiologo" msjpreparar="Buscando anestesiologo" tipo="md">
            <x-slot name="body">
                <div wire:loading.remove>
                    <div align="center">
                        <h1> <i class="fas fa-trash-alt text-danger"></i></h1>
                        <div class="text-secondary"> Confirme si desea eliminar el anestesiologo: <strong
                                class="text-dark">{{ $this->nombre }}</strong>.
                        </div>
                        <div><strong class="text-dark">Advertencia</strong></div>
                        <div> <small class="text-secondary"> Si el anestesiologo es eliminada. no aparecera
                                en ningun reporte.</small></div>
                        <small class="text-secondary">Si esta seguro pulsar Eliminar, si no desea omitir la operacion
                            pulse cancelar.</small>
                    </div>
                </div>
            </x-slot>
            <x-slot name="footer">
                <div wire:loading.remove>
                    <!--****************************************************-->
                    <!--** BOTONES DEL MODAL                              **-->
                    <!--****************************************************-->
                    <div class="d-flex justify-content-end mt-0 mb-2 p-0">
                        <x-btn.cancelar accion='resetear'>Cancelar</x-btn.cancelar>
                        &nbsp;
                        <x-btn.guardar accion='eliminar_anestesiologo'>Eliminar</x-btn.guardar>
                    </div>
                </div>
            </x-slot>
        </x-modal.simple>
    </div>
    <script>
        /******************************************/
        /** SOLO NUMERO EN UN INPUT            ***/
        /******************************************/

        const NRO_DOCUMENTO_ACTUALIZAR = document.querySelector('#card_body_actualizar_anestesiologo > div > div > div > #documento');
        const NRO_DOCUMENTO = document.getElementById('documento');
        //SOLO NUMERO
        const SOLO_NUMEROS = function() {
            if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;
        }

        console.log(NRO_DOCUMENTO_ACTUALIZAR);
        console.log(NRO_DOCUMENTO);

        NRO_DOCUMENTO_ACTUALIZAR.addEventListener('keypress', SOLO_NUMEROS);
        NRO_DOCUMENTO.addEventListener('keypress', SOLO_NUMEROS);

        /******************************************/
        /**  FUNCION QUE SE ENCARGA DE MOSTAR Y ***/
        /** OCULTAR LAS FILAS CON INFORMACION   ***/
        /** ADICIONALES EN EL DATA TABLE        ***/
        /******************************************/
        function ir_a_editar() {
            window.location.href = "#editar"
        }

        function mostrar(id) {
            var element = document.getElementById(id);
            element.classList.toggle("d-none");
        }

        function desvanecer($_componente) {
            setTimeout(function() {
                $($_componente).slideToggle(150, 'swing');
            }, 3000);
            setTimeout(function() {
                $($_componente).remove();
            }, 3100);
        }
        desvanecer("#msj_info");
    </script>
</div>
