<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                                         **-->
    <!--*******************************************************************-->
    <!--** TITULO                                                        **-->
    <!--*******************************************************************-->
    @section('titulo')
        Listado de registro por cirujaro
    @endsection
    <div class="col-md-12 p-1 m-0">
        <!--******************************************************************-->
        <!--** AGREGAR INTERVENCION                                         **-->
        <!--******************************************************************-->
        <div class="card">
            <div class="card-header">
                <div class="row">
                    <div class=" col-12 col-md-6 col-lg-4">
                        @livewire('buscador.panel.cirujanos')
                    </div>
                    <div class="col-12 col-md-6 col-lg-1">
                        <label for="buscador_registro">
                            <small>
                                <strong>
                                    Listar
                                </strong>
                            </small>
                        </label>
                        <x-datatable.numeroregistros msj=" " />
                    </div>
                    <div class="col-md-8 d-none d-lg-block">
                        <div class="d-flex justify-content-end">
                            @if (!$buscador_registro == null)
                                <span class="h6 text-azul-intenzo">Resgistros
                                    encontrados:&nbsp;{{ $count_busqueda_pacientes }}
                                </span>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-12 p-1 m-0">
        <x-card.simple>
            <x-slot name="card_body">
                <div role="buscar_articulo" wire:loading.remove wire:target="buscador_paciente">
                    @if (!$buscador_registro == null)
                        <div wire:loading.remove>
                            <div class="table-responsive">
                                <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="Datos de la intervencion" columna='cirujano'
                                                style="width:100px; min-width:100px; max-width:100px;">
                                                @if ($campo_orden == 'clinica')
                                                    @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="Datos del paciente" columna='paciente'
                                                style="width:100px; min-width:100px; max-width:100px;">
                                            </x-datatable.th>
                                            <x-datatable.th nombre="Datos de la factura" columna='intervencion'
                                                style="width:120px; min-width:120px;max-width:120px;">
                                            </x-datatable.th>
                                            <x-datatable.th nombre="Monto" columna='monto'
                                                style="width:45px; min-width:45px;max-width:55px;">
                                            </x-datatable.th>
                                            <x-datatable.th nombre="Estados" columna='status'
                                                style="width:45px; min-width:45px;max-width:55px;">
                                            </x-datatable.th>
                                            <th style="width:45px; min-width:45px;max-width:55px;">
                                                <div class="d-flex justify-content-end">
                                                    <small><strong>Opciones</strong> </small>
                                                </div>
                                            </th>
                                        </tr>
                                    </x-slot>
                                    <!--*******************************************************-->
                                    <!--**  VALORES DE LAS  COLUNAS                          **-->
                                    <!--*******************************************************-->
                                    <x-slot name="table_body">
                                        @if ($count_busqueda_pacientes > 0)
                                            @foreach ($registros as $registro)
                                                <!-- POR ALGUNA RAZON DEL DIABLO TENGO QUE INSERTAR UNA  FILA  -->
                                                <tr></tr>
                                                @if ($registro->activo == '0')
                                                    <tr class="d-none">
                                                    @else
                                                    <tr>
                                                @endif
                                                <td class="d-none"><small>{{ $registro->id }}</small></td>

                                                <td>
                                                    <small>
                                                        <div>
                                                            <span class="bg-dark text-light p-0 m-0 rounded-sm">Cirujano:&nbsp;{{ $registro->cirujano }}</span>    
                                                            Anestesiologo:&nbsp;{{ $registro->anestesiologo }}
                                                        </div>
                                                        <div>
                                                            <span>{{ $registro->clinica }}</span>
                                                            Fecha de
                                                            intervencion:&nbsp;{{ date_format(date_create($registro->fecha_iq), 'd/m/Y') }}
                                                        </div>
                                                        <div>
                                                            Intervencion:&nbsp;{{ $registro->intervencion }}
                                                        </div>
                                                    </small>
                                                </td>
                                                <td>
                                                    <small>
                                                        <div>
                                                            Documentacion:&nbsp;{{ $registro->documento }}
                                                            Genero:&nbsp;
                                                            @if ($registro->genero == 'F')
                                                                <span class="text-dark">Femenino</span>
                                                            @else
                                                                <span class="text-dark">Masculino</span>
                                                            @endif
                                                        </div>
                                                        <div>
                                                            Nombre:&nbsp;{{ $registro->nombres . ' ' . $registro->apellidos }}
                                                        </div>
                                                        <div>
                                                            Fecha de
                                                            nacimiento:&nbsp;{{ date_format(date_create($registro->created_at), 'd/m/Y') }}
                                                            Edad:&nbsp;{{ $registro->edad }}
                                                        </div>
                                                    </small>
                                                </td>
                                                <td>
                                                    <div>
                                                        <small>
                                                            Codigo:&nbsp;{{ $registro->codigo }}
                                                        </small>
                                                    </div>
                                                    <div>
                                                        <small>
                                                            Nro factura:&nbsp;{{ $registro->nro_factura }}
                                                        </small>
                                                    </div>
                                                    <div>
                                                        <small>
                                                            Fecha
                                                            facrura:&nbsp;{{ date_format(date_create($registro->fecha_factura), 'd/m/Y hh:mm:ss') }}
                                                        </small>
                                                    </div>
                                                </td>
                                                <td style="width:45px; min-width:45px;max-width:55px;">
                                                    <div>
                                                        <small>
                                                            Tasa:&nbsp;{{ $registro->monto_tasa }}
                                                        </small>
                                                    </div>
                                                    <div>
                                                        <small>
                                                            Bsf&nbsp;{{ $registro->monto }}
                                                        </small>
                                                    </div>
                                                    <div>
                                                        <small>
                                                            $&nbsp;{{ number_format($registro->monto / $registro->monto_tasa, 2, '.', '') }}
                                                        </small>
                                                    </div>
                                                </td>
                                                <td style="width:45px; min-width:45px;max-width:55px;">
                                                    <div>
                                                        <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 ($registro->status == 'N')
                                                                <span class="badge  bg-dark"><strong
                                                                        class="text-danger">Sin
                                                                        pagos</strong></span>
                                                            @elseif ($registro->status == 'P')
                                                                <span class="badge  bg-dark"><strong
                                                                        class="verde-neon">Pagado</strong></span>
                                                            @elseif ($registro->status == 'D')
                                                                <span class="badge  bg-dark"><strong
                                                                        class="text-warning">Posee
                                                                        deuda</strong></span>
                                                            @endif
                                                        </small>
                                                    </div>
                                                    <div>
                                                        <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 ($registro->activo == '1')
                                                                <span class="badge  bg-dark"><strong
                                                                        class="verde-neon">Activo</strong></span>
                                                            @elseif ($registro->activo == '2')
                                                                <span class="badge  bg-dark"><strong
                                                                        class="text-gris-neon">Desactivado</strong></span>
                                                            @endif
                                                        </small>
                                                    </div>
                                                </td>
                                                <td style="width:45px; min-width:45px;max-width:55px;">
                                                    <!--***************************************-->
                                                    <!-- EL BOTON QUE ACTIVA A LA           ***-->
                                                    <!-- FUNCION QUE SE ENCARGA DE MOSTAR Y ***-->
                                                    <!-- OCULTAR LAS FILAS CON INFORMACION  ***-->
                                                    <!-- ADICIONALES EN EL DATA TABLE       ***-->
                                                    <!--***************************************-->
                                                    <div class="d-flex justify-content-end">
                                                        @if ($registro->activo == '1')
                                                            <button
                                                                class="btn btn-sm border-dark bg-azul-intenzo rounded border-3 shadow text-gris-neon  p-1"
                                                                data-bs-toggle="modal"
                                                                data-bs-target="#modal_desactivar_paciente"
                                                                data-bs-placement='top' data-bs-toggle='tooltip'
                                                                title="Activar paciente"
                                                                wire:click="seleccionar_paciente('{{ $registro->id }}')">
                                                                <i class="fas fa-ban"></i>
                                                            </button>
                                                        @elseif ($registro->activo == '2')
                                                            <button
                                                                class="btn btn-sm border-dark bg-azul-intenzo rounded border-3 shadow text-verde-neon  p-1"
                                                                data-bs-toggle="modal"
                                                                data-bs-target="#modal_activar_paciente"
                                                                data-bs-placement='top' data-bs-toggle='tooltip'
                                                                title="Activar paciente"
                                                                wire:click="seleccionar_paciente('{{ $registro->id }}')">
                                                                <i class="fa-solid fa-check"></i>
                                                            </button>
                                                        @endif

                                                        &nbsp;
                                                        <a href="{{ asset('registro/actualizar/' . $registro->id) }}"
                                                            class="btn btn-sm border-dark bg-azul-intenzo rounded border-3 shadow text-warning  p-1"
                                                            title="Editar Perfil">
                                                            <i class="fas fa-edit"></i>
                                                        </a>
                                                    </div>
                                                    <div class="d-flex justify-content-end">
                                                        <a href="{{ asset('registro/pagos/' . $registro->id) }}"
                                                            class="btn btn-sm border-dark bg-azul-intenzo rounded border-3  shadow text-verde-neon  p-1 mt-1"
                                                            title="Agregar Pago">
                                                            <i class="fas fa-money-bill-wave"></i>
                                                        </a>
                                                        &nbsp;
                                                        <button
                                                            class="btn btn-sm border-dark bg-azul-intenzo rounded border-3 shadow text-danger p-1 mt-1"
                                                            data-bs-toggle="modal"
                                                            data-bs-target="#modal_eliminar_paciente"
                                                            data-bs-placement='top' data-bs-toggle='tooltip'
                                                            title="Activar paciente"
                                                            wire:click="seleccionar_paciente('{{ $registro->id }}')">
                                                            <i class="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 paciente relacionado con la
                                                            busqueda:
                                                            <strong class="text-secondary">
                                                                {{ $valor_busqueda }}.</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>
                    @else
                        <div wire:loading.remove>
                            <div class="m-5">
                                <div class="d-flex justify-content-center">
                                    <div class="text-secondary" align="center">
                                        <h5>Importante</h5>
                                        <strong class="text-secondary">
                                            Para buscar los registros relacionados un paciente debemos de colocar el
                                            nombre,
                                            apellido o el número de documento del paciente que queremos encontrar.
                                        </strong>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                    <div>
                        <div class="d-flex justify-content-center">
                            <div class="text-secondary" align="center">
                                <div class="m-5" wire:loading>
                                    <div class="spinner-border text-secondary" role="status">
                                        <span class="visually-hidden">Loading...</span>
                                    </div>
                                    <div>
                                        <strong>Buscando</strong>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </x-slot>
            <x-slot name="card_footer">
                @if (!$buscador_registro == null)
                    <div class="p-1">{{ $registros->links() }}</div>
                @endif
            </x-slot>
            </x-card.lg>
            <div>
                <!--********************************************-->
                <!--** MODAL ACTIVAR REGISTRO                 **-->
                <!--********************************************-->
                <x-modal.simple titulo="Activar paciente" identificador="modal_activar_paciente" class="my-1 mx-3"
                    msj="Activando paciente" accion="activar_paciente" preparar="seleccionar_paciente"
                    msjpreparar="Buscando paciente" tipo="md">
                    <x-slot name="body">
                        <div wire:loading.remove>
                            <div align="center">
                                <h1> <i class="fa-solid fa-check text-success"></i></h1>
                                <div class="text-secondary"> Confirme si desea activar el paciente numero: <strong
                                        class="text-dark">{{ $codigo }}</strong> del
                                    paciente: <strong class="text-dark">{{ $paciente }}</strong>, Numero de
                                    documento: <strong class="text-dark">{{ $documento }}</strong>,datos de la
                                    intervencion: <strong class="text-dark">{{ $intervencion }}</strong> Cirujano:
                                    <strong class="text-dark">{{ $cirujano }}</strong>
                                    del dia: <strong class="text-dark">{{ $fecha_intervencion }}</strong>.
                                </div>
                                <small class="text-secondary">Si esta seguro pulsar Activar, si no desea activar el
                                    paciente 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='activar_paciente'>Activar</x-btn.guardar>
                            </div>
                        </div>
                    </x-slot>
                </x-modal.simple>
                <!--********************************************-->
                <!--** MODAL DESACTIVAR REGISTRO               **-->
                <!--********************************************-->
                <x-modal.simple titulo="Desactivar paciente" identificador="modal_desactivar_paciente"
                    class="my-1 mx-3" msj="Desactivando paciente" accion="desactivar_paciente"
                    preparar="seleccionar_paciente" msjpreparar="Buscando paciente" tipo="md">
                    <x-slot name="body">
                        <div wire:loading.remove>
                            <div align="center">
                                <h1> <i class="fas fa-ban text-secondary"></i></h1>
                                <div class="text-secondary"> Confirme si desea desactivar el paciente numero:
                                    <strong class="text-dark">{{ $codigo }}</strong> del
                                    paciente: <strong class="text-dark">{{ $paciente }}</strong>, Numero de
                                    documento: <strong class="text-dark">{{ $documento }}</strong>,datos de la
                                    intervencion: <strong class="text-dark">{{ $intervencion }}</strong> Cirujano:
                                    <strong class="text-dark">{{ $cirujano }}</strong>
                                    del dia: <strong class="text-dark">{{ $fecha_intervencion }}</strong>.
                                </div>
                                <small class="text-secondary">Si esta seguro pulsar desactivar, si no desea activar
                                    el
                                    paciente 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='desactivar_paciente'>Desactivar</x-btn.guardar>
                            </div>
                        </div>
                    </x-slot>
                </x-modal.simple>
                <!--********************************************-->
                <!--** MODAL ELIMINAR REGISTRO                 **-->
                <!--********************************************-->
                <x-modal.simple titulo="Eliminar paciente" identificador="modal_eliminar_paciente" class="my-1 mx-3"
                    msj="Eliminando paciente" accion="eliminar_paciente" preparar="seleccionar_paciente"
                    msjpreparar="Buscando paciente" 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 paciente numero: <strong
                                        class="text-dark">{{ $codigo }}</strong> del
                                    paciente: <strong class="text-dark">{{ $paciente }}</strong>, Numero de
                                    documento: <strong class="text-dark">{{ $documento }}</strong>,datos de la
                                    intervencion: <strong class="text-dark">{{ $intervencion }}</strong> Cirujano:
                                    <strong class="text-dark">{{ $cirujano }}</strong>
                                    del dia: <strong class="text-dark">{{ $fecha_intervencion }}</strong>.
                                </div>
                                <div><strong class="text-dark">Advertencia</strong></div>
                                <div> <small class="text-secondary"> Si el paciente es eliminado. no aparecera en
                                        ningun
                                        reporte.</small></div>
                                <small class="text-secondary">Si esta seguro pulsar Eliminar, si no desea eliminar
                                    el
                                    paciente 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_paciente'>Eliminar</x-btn.guardar>
                            </div>
                        </div>
                    </x-slot>
                </x-modal.simple>
            </div>
    </div>
</div>
