<div>
    <!--*******************************************************************-->
    <!--** NOMBRE DEL COMPOTENTE: PANEL MOVIL PARA TASAS DE CAMBIO       **-->
    <!--** AUTOR: JOUNNERTH TORRES                                       **-->
    <!--** FECHA DE ACTUALIZACION: 08/04/2023                            **-->
    <!--**---------------------------------------------------------------**-->
    <!--** CONTROLADOR:  tasa/PanelMovil                                 **-->
    <!--**---------------------------------------------------------------**-->
    <!--** ESTE COMPONENTE SIRVE PARA LISTAR TODAS LAS  TASAS DEL        **-->
    <!--** SISTEMA Y ESTA COMPUESTO POR:                                 **-->
    <!--**   # TABLA DONDE SE DESPLIEGA LA LISTA DE TASAS                **-->
    <!--**   # BARRA DE BUSQUEDA                                         **-->
    <!--**   # PANEL ADMINISTRATIVO                                      **-->
    <!--**   # AGREGAR TASA                                              **-->
    <!--**   # ACTUALIZAR TASA                                           **-->
    <!--**   # ELIMINAR TASA                                             **-->
    <!--*******************************************************************-->
    <!--** TITULO Y  MIGAJAS DE PAN                                      **-->
    <!--*******************************************************************-->
    @section('titulo')
        Listado de tasas de cambio
    @endsection
    <div class="row d-flex justify-content-end position-relative mx-0 pt-2">
        <x-card.lg>
            <x-slot name="card_head">
                <div class="row">
                    <div class="col-12 d-block d-md-none py-1 ">
                        <x-btn.template-modal label="Agregar tasa" modal="#modal_crear_tasa">
                            <img style="height:25px;; max-height:25px;" src="{{ asset('img/botones/guardar.png') }}"
                                alt="">
                        </x-btn.template-modal>
                    </div>
                    <div class=" col-md-4 py-1">
                        <div class="flex-fill">
                            <div class="input-group input-group-sm  flex-grow-1">
                                <input type="text" class="form-control border-end-0 " placeholder="Buscar tasa"
                                    id='buscador_tasa' name='buscador_tasa' wire:model.debounce.1000ms="buscador_tasa"
                                    autocomplete="off">
                                <span
                                    class="input-group-text input-group-text-sm bg-white text-secondary border-start-0"><i
                                        class="fa-solid fa-magnifying-glass"></i></span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2 py-1">
                        <x-datatable.numeroregistros msj="Listar" />
                    </div>
                    <div class="col-md-4"></div>
                    <div class="col-md-2 d-none d-md-block ">
                        <x-btn.template-modal label="Agregar tasa" modal="#modal_crear_tasa">
                            <img style="height:25px;; max-height:25px;" src="{{ asset('img/botones/guardar.png') }}"
                                alt="">
                        </x-btn.template-modal>
                    </div>
                </div>
                <!--*******************************************************-->
                <!--**  MENSAJE: MIESTRA SE BUSCAN EL TASAS          **-->
                <!--*******************************************************-->
                <div wire:loading wire:target="buscador_tasa">
                    <strong>Buscando tasas</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_tasa" wire:loading.remove wire:target="buscador_tasa">
                    <div class="table-responsive-md">
                        <table class="table ">
                            <!--*******************************************************-->
                            <!--**  VALORES DE LAS  COLUNAS                          **-->
                            <!--*******************************************************-->
                            @if ($count_tasas_busqueda > 0)
                                @foreach ($tasas as $tasa)
                                    <!-- POR ALGUNA RAZON DEL DIABLO TENGO QUE INSERTAR UNA  FILA  -->
                                    <tr></tr>
                                    @if ($tasa->activo == 0)
                                        <tr class="d-none">
                                        @else
                                        <tr class="border-1 border-buttom">
                                    @endif
                                    <td>
                                        <div>
                                            <div class="d-flex justify-content-between">
                                                <small>Tasa:&nbsp;{{ $tasa->monto_tasa }} Bsf</small>
                                                @if ($tasa->activo == '2')
                                                    <span class="badge bg-dark verde-neon">Activa </span>
                                                @else
                                                    <span class="badge bg-dark text-secondary ">Desactivada</span>
                                                @endif
                                            </div>
                                            <div>
                                                <small>Fecha:&nbsp;{{ date_format(date_create($tasa->fecha_reg), 'd/m/Y') }}</small>
                                            </div>
                                            <div class="d-flex justify-content-between">
                                                <div>
                                                    <small>Hora:{{ date_format(date_create($tasa->hora_reg), 'h:i A') }}</small>
                                                </div>
                                                <div>
                                                    @if ($tasa->activo == '1')
                                                        <x-btn.template-modal-table label="Activar"
                                                            modal="#modal_activar_tasa"
                                                            accion="preparar('{{ $tasa->id }}')">
                                                        </x-btn.template-modal-table>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    </tr>
                                @endforeach
                            @else
                                <!--******************************************************-->
                                <!--**  MENSAJE: tasa 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 tasa relacionado con la busqueda:
                                                <strong class="text-secondary"> {{ $buscador_tasa }}.</strong>
                                                favor validar nueva mente.</small>
                                        </div>
                                    </td>
                                <tr>
                            @endif
                        </table>
                    </div>
                </div>
            </x-slot>
            <x-slot name="card_footer">
                <div class="d-none d-lg-block">{{ $tasas->onEachSide(4)->links() }}</div>
                <div class="d-block d-lg-none"><small>{{ $tasas->onEachSide(0, 5)->links() }}</small></div>
            </x-slot>
        </x-card.lg>
    </div>
    <!--********************************************-->
    <!--** MODAL ACTIVAR TASA                      **-->
    <!--********************************************-->
    <x-modal.simple titulo="Activar tasa" identificador="modal_activar_tasa" msj="Activando tasa" accion="activar_tasa"
        preparar="preparar" msjpreparar="Buscando registro" tipo="sm">
        <x-slot name="body">
            <div wire:loading.remove>
                <div align="center">
                    <h1> <i class="fa-solid fa-check text-success"></i></h1>
                    ¿Esta seguro que desea activar la tasa de <strong class="text-secondary"> {{ $monto_tasa }}
                        Bsf </strong> del dia <strong class="text-secondary">
                        {{ date_format(date_create($fecha_reg), 'd/m/Y') }}
                    </strong> a las <strong
                        class="text-secondary">{{ date_format(date_create($hora_reg), 'h:i:s A') }}?</strong>
                </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.no accion='resetear'>No</x-btn.no>
                    &nbsp;
                    <x-btn.si accion='activar_tasa'>SI</x-btn.si>
                </div>
            </div>
        </x-slot>
    </x-modal.simple>
    <!--********************************************-->
    <!--** MODAL GUARDAR TASA                      **-->
    <!--********************************************-->
    <x-modal.simple titulo="Registrar tasa" identificador="modal_crear_tasa" msj="Activando tasa" accion="activar_tasa"
        preparar="preparar" msjpreparar="Buscando registro" tipo="sm">
        <x-slot name="body">
            <div wire:loading.remove>
                <div align="center">
                    <small class="text-secondary">El monto debe poseer el siguiente formato 999.99 en caso de tener
                        decimales</small>
                    <!--****************************-->
                    <!--** PRECIO EN DIVISA        **-->
                    <!--****************************-->
                    <x-form.lw.inputlabel label="Inserte monto" msj="0.00" identificador="monto_tasa"
                        maxlength="30" />
                    <!--****************************-->
                    <!--** FECHA REG                  **-->
                    <!--****************************-->
                    <x-form.lw.inputdate label="Fecha registro" identificador="fecha_reg" />
                    <!--****************************-->
                    <!--** HORA REG                  **-->
                    <!--****************************-->
                    <x-form.lw.inputtime label="Hora registro" identificador="hora_reg" />
                </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='crear_tasa'>Guardar</x-btn.guardar>
                </div>
            </div>
        </x-slot>
    </x-modal.simple>

    <script>
        const MONTO_TASA = document.getElementById('monto_tasa');

        //SOLO NUMERO
        const SOLO_NUMEROS = function() {

            if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;
        }

        MONTO_TASA.addEventListener('keypress', SOLO_NUMEROS);
    </script>

</div>
