<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 intervencion
        @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_intervencion" data-bs-placement='top' data-bs-toggle='tooltip'>
                        Registrar un nuevo intervencion
                        <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 intervenciones</span>
                            </div>
                            <div class="col-4" align="right">
                                <span> 
                                    <small>
                                        <span class="badge bg-secondary my-1">
                                            {{ $count_intervencions }}
                                        </span>
                                        <span>
                                            Registros
                                        </span>
                                    </small>
                                </span>
                            </div>
                        </div>
                        <!--*******************************************************-->
                        <!--**  MENSAJE: MIESTRA SE BUSCAN EL USUARIOS          **-->
                        <!--*******************************************************-->
                        <div wire:loading wire:target="buscador_intervencion">
                            <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_intervencion">
                            <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_intervencion'
                                                            name='buscador_intervencion'
                                                            wire:model.debounce.1000ms="buscador_intervencion"
                                                            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_intervencions_busqueda > 0)
                                        @foreach ($intervencions as $intervencion)
                                            @if ($intervencion->activo == '0')
                                                <tr class="d-none">
                                                @else
                                                <tr>
                                            @endif
                                            <td>
                                                <div>
                                                    <div class="d-flex justify-content-between">
                                                        <div>
                                                            <small>ID:&nbsp;{{ $intervencion->id }}</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 ($intervencion->activo == '1')
                                                                    <span class="badge  bg-azul-intenzo shadow"><strong
                                                                            class="verde-neon">Activo</strong></span>
                                                                @elseif ($intervencion->activo == '2')
                                                                    <span class="badge  bg-azul-intenzo shadow"><strong
                                                                            class="text-gris-neon">Desactivado</strong></span>
                                                                @endif
                                                            </small>
                                                        </div>
                                                    </div>
                                                    <div>
                                                        <small>
                                                            Intervencion:&nbsp;
                                                            <?= str_ireplace($buscador_intervencion, '<mark class="bg-dark text-light p-0 m-0 rounded-sm" > <strong>  ' . $buscador_intervencion . '</strong></mark>', $intervencion->nombre) ?>
                                                        </small>
                                                    </div>
                                                    <div>
                                                        <small>
                                                            Clinica:&nbsp;
                                                            <?= str_ireplace($buscador_intervencion, '<mark class="bg-dark text-light p-0 m-0 rounded-sm" > <strong>  ' . $buscador_intervencion . '</strong></mark>', $intervencion->clinica) ?>
                                                        </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_intervencion"
                                                        data-bs-placement='top' data-bs-toggle='tooltip'
                                                        title="Actualizar datos del intervencion"
                                                        wire:click="seleccionar_intervencion('{{ $intervencion->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_intervencion"
                                                        data-bs-placement='top' data-bs-toggle='tooltip'
                                                        title="Eliminar intervencion"
                                                        wire:click="seleccionar_intervencion('{{ $intervencion->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 intervencion relacionado con la
                                                        busqueda:
                                                        <strong class="text-secondary">
                                                            {{ $buscador_intervencion }}.</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>{{ $intervencions->onEachSide(0, 5)->links() }}</div>
                            </small>
                        </div>
                    </x-slot>
                </x-card.lg>
            </div>
        </div>
    </div>
    <!--******************************************************-->
    <!--**  MODALES                                         **-->
    <!--******************************************************-->
    <div>
        <!--********************************************-->
        <!--** MODAL ELIMINAR REGISTRO                **-->
        <!--********************************************-->
        <x-modal.simple titulo="Eliminar intervencion" identificador="modal_eliminar_intervencion"
            msj="Eliminando intervencion" accion="eliminar_intervencion" preparar="seleccionar_intervencion"
            msjpreparar="Buscando intervencion" 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 intervencion: <strong
                                class="text-dark">{{ $this->nombre }}</strong>.
                        </div>
                        <div><strong class="text-dark">Advertencia</strong></div>
                        <div> <small class="text-secondary"> Si el intervencion 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_intervencion'>Eliminar</x-btn.guardar>
                    </div>
                </div>
            </x-slot>
        </x-modal.simple>
        <!--********************************************-->
        <!--** MODAL ACTUALIZAR REGISTRO              **-->
        <!--********************************************-->
        <x-modal.simple titulo="Actualizar intervencion" identificador="modal_actualizar_intervencion"
            msj="Actualizar intervencion" accion="actualizar_intervencion" preparar="seleccionar_intervencion"
            msjpreparar="Buscando intervencion" tipo="md">
            <x-slot name="body">
                <div wire:loading.remove>
                    <div align="center">
                        <!--***************************-->
                        <!--** NOMBRES               **-->
                        <!--***************************-->
                        <x-form.lw.inputlabel label="Nombres" msj="Inserte nombres" identificador="nombre"
                            maxlength="50" />
                        <!--***************************-->
                        <!--** CLINICA                 **-->
                        <!--***************************-->
                        <x-form.lw.selectlabel label="Clinica" msj="Seleccione el status" identificador="clinica"
                            atributo="clinica">
                            @foreach ($clinicas as $clinica)
                                <option value="{{ $clinica->id }}">{{ $clinica->nombre }}</option>
                            @endforeach
                        </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_intervencion'>Guardar cambios</x-btn.guardar>
                    </div>
                </div>
            </x-slot>
        </x-modal.simple>
        <!--********************************************-->
        <!--** MODAL GUARDAR REGISTRO                **-->
        <!--********************************************-->
        <x-modal.simple titulo="Agregar intervencion" identificador="modal_agregar_intervencion"
            msj="Guardando datos del intervencion" accion="guardar_intervencion" preparar="seleccionar_intervencion"
            msjpreparar="Buscando intervencion" tipo="md">
            <x-slot name="body">
                <div wire:loading.remove>
                    <div align="center">
                        <!--***************************-->
                        <!--** NOMBRES               **-->
                        <!--***************************-->
                        <x-form.lw.inputlabel label="Nombres" msj="Inserte nombres" identificador="nombre"
                            maxlength="50" />
                        <!--***************************-->
                        <!--** CLINICA                 **-->
                        <!--***************************-->
                        <x-form.lw.selectlabel label="Clinica" msj="Seleccione el status" identificador="clinica"
                            atributo="clinica">
                            @foreach ($clinicas as $clinica)
                                <option value="{{ $clinica->id }}">{{ $clinica->nombre }}</option>
                            @endforeach
                        </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_intervencion'>Guardar</x-btn.guardar>
                    </div>
                </div>
            </x-slot>
        </x-modal.simple>
    </div>
    <script>
        /******************************************/
        /**  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>
