<div>
    <!--*******************************************************************-->
    <!--** NOMBRE DEL COMPOTENTE: PANEL DE CIRUJANO MOVIL                **-->
    <!--** 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 CIRUJANO MOVIL                                       **-->
                <!--******************************************************************-->
                <div class="d-grid gap-2 px-1 pb-1">
                    <button class="btn btn-azul-intenzo text-white" data-bs-toggle="modal"
                        data-bs-target="#modal_agregar_anestesiologo" data-bs-placement='top' data-bs-toggle='tooltip'>
                        Registrar un nuevo anestesiologo
                        <i class="fa-solid fa-floppy-disk"></i>
                    </button>
                </div>
            </div>
            <div class="col-12 py-2">
                <x-card.lg>
                    <x-slot name="card_head">
                        <div class="row ">
                            <div class="col-8" align="left">
                                <span class="h6">Lista de anestesiologos</span>
                            </div>
                            <div class="col-4" align="right">
                                <span> 
                                    <small>
                                        <span class="badge bg-secondary my-1">
                                            {{ $count_anestesiologos }}
                                        </span>
                                        <span>
                                            Registros
                                        </span>
                                    </small>
                                </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">
                            <x-datatable.tablelg>
                                <!--************************************************************-->
                                <!--** TITULO Y BUSCADOR DE USUARIOS                          **-->
                                <!--************************************************************-->
                                <x-slot name="table_head">
                                    <!--************************************************************-->
                                    <!--** TITULO Y BUSCADOR DE USUARIOS                          **-->
                                    <!--************************************************************-->
                                    <tr>
                                        <td align="center">
                                            <div class=" col-12 ">
                                                <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>
                                        </td>
                                    </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>
                                            @endif
                                            <td>
                                                <div class="d-flex justify-content-between">
                                                    <div>
                                                        <small>ID:&nbsp;{{ $anestesiologo->id }}</small>
                                                        <small>
                                                            Nro Documento:&nbsp;
                                                            <?= str_ireplace($buscador_anestesiologo, '<mark class="bg-dark text-light p-0 m-0 rounded-sm" > <strong>  ' . $buscador_anestesiologo . '</strong></mark>', $anestesiologo->documento) ?>
                                                        </small>
                                                    </div>
                                                    <div>
                                                        <small align="right">
                                                            <!--********************************************************-->
                                                            <!--**  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>
                                                    </div>
                                                </div>
                                                <div>
                                                    <div>
                                                        <small>
                                                            Cirujano:&nbsp;
                                                            <?= str_ireplace($buscador_anestesiologo, '<mark class="bg-dark text-light p-0 m-0 rounded-sm" > <strong>  ' . $buscador_anestesiologo . '</strong></mark>', $anestesiologo->nombre) ?>
                                                        </small>
                                                    </div>
                                                    <div>
                                                        <small>
                                                            Genero:&nbsp;
                                                            <!--********************************************************-->
                                                            <!--**  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>
                                                    </div>
                                                </div>
                                                <!--******************************************************-->
                                                <!--**  OPCIONES PARA EDITAR Y ELIMINAR EN MOVIL        **-->
                                                <!--******************************************************-->
                                                <div class="d-flex justify-content-end">
                                                    <button
                                                        class="btn btn-sm border-primary  bg-azul-intenzo rounded border-3 shadow text-white"
                                                        data-bs-toggle="modal"
                                                        data-bs-target="#modal_actualizar_anestesiologo"
                                                        data-bs-placement='top' data-bs-toggle='tooltip'
                                                        title="Actualizar datos del anestesiologo"
                                                        wire:click="seleccionar_anestesiologo('{{ $anestesiologo->id }}')">
                                                        Actualizar&nbsp;<i class="text-warning fas fa-edit"></i>
                                                    </button>
                                                    &nbsp;
                                                    <button
                                                        class="btn btn-sm border-primary  bg-azul-intenzo rounded border-3 shadow text-white"
                                                        data-bs-toggle="modal" data-bs-target="#modal_eliminar_anestesiologo"
                                                        data-bs-placement='top' data-bs-toggle='tooltip'
                                                        title="Eliminar anestesiologo"
                                                        wire:click="seleccionar_anestesiologo('{{ $anestesiologo->id }}')" >
                                                        Eliminar&nbsp;<i class="text-danger  fas fa-trash-alt"></i>
                                                    </button>
                                                </div>
                                            </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>
                    </x-slot>
                    <x-slot name="card_footer">
                        <div>
                            <small>
                                <div>{{ $anestesiologos->links() }}</div>
                            </small>
                        </div>
                    </x-slot>
                </x-card.lg>
            </div>
        </div>
    </div>
    <!--******************************************************-->
    <!--**  MODALES                                         **-->
    <!--******************************************************-->
    <div>
        <!--********************************************-->
        <!--** MODAL ELIMINAR REGISTRO                **-->
        <!--********************************************-->
        <x-modal.simple titulo="Eliminar anestesiologo" identificador="modal_eliminar_anestesiologo" 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>
        <!--********************************************-->
        <!--** MODAL ACTUALIZAR REGISTRO              **-->
        <!--********************************************-->
        <x-modal.simple titulo="Actualizar anestesiologo" identificador="modal_actualizar_anestesiologo" msj="Actualizar anestesiologo"
            accion="actualizar_anestesiologo" preparar="seleccionar_anestesiologo" msjpreparar="Buscando anestesiologo" tipo="md">
            <x-slot name="body">
                <div wire:loading.remove>
                    <div align="center">
                        <!--***************************-->
                        <!--** 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="14" />
                        <!--***************************-->
                        <!--** 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="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'>Guardar cambios</x-btn.guardar>
                    </div>
                </div>
            </x-slot>
        </x-modal.simple>
        <!--********************************************-->
        <!--** MODAL GUARDAR REGISTRO                **-->
        <!--********************************************-->
        <x-modal.simple titulo="Agregar anestesiologo" identificador="modal_agregar_anestesiologo"
            msj="Guardando datos del anestesiologo" accion="guardar_anestesiologo" preparar="seleccionar_anestesiologo"
            msjpreparar="Buscando anestesiologo" tipo="md">
            <x-slot name="body">
                <div wire:loading.remove>
                    <div align="center">
                        <!--***************************-->
                        <!--** 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>
                        <!--****************************-->
                        <!--** NUMERO DOCUMENTO NUEVO **-->
                        <!--****************************-->
                        <x-form.lw.inputlabel label="Documento" msj="Inserte numero de documento"
                            identificador="documento" maxlength="14" />
                        <!--***************************-->
                        <!--** 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>
                    </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='registrar_anestesiologo'>Guardar</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_NUEVO = document.getElementById('documento');
        const NRO_DOCUMENTO_ACTUALIZAR = document.querySelector(
            '#modal_actualizar_anestesiologo > div > div > .modal-body #modal-body-center  #contedor #contedor-body > div > div #documento'
        );
        const NRO_DOCUMENTO_NUEVO = document.querySelector(
            '#modal_agregar_anestesiologo > div > div > .modal-body #modal-body-center  #contedor #contedor-body > div > div #documento'
        );
        //SOLO NUMERO
        const SOLO_NUMEROS = function() {
            if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;
        }
        NRO_DOCUMENTO_NUEVO.addEventListener('keypress', SOLO_NUMEROS);
        NRO_DOCUMENTO_ACTUALIZAR.addEventListener('keypress', SOLO_NUMEROS);
        /******************************************/
        /******************************************/
        /**  FUNCION QUE SE ENCARGA DE MOSTAR Y ***/
        /** OCULTAR LAS FILAS CON INFORMACION   ***/
        /** ADICIONALES EN EL DATA TABLE        ***/
        /******************************************/
        function mostrar(id) {
            var element = document.getElementById(id);
            element.classList.toggle("d-none");
        }
    </script>
</div>
