@extends('layouts.app')
@section('titulo', 'Pagos')
@section('titulo_card', 'Lista de Clientes con Pagos Pendientes')
@section('content')
    <div class="row">
        <div class="col">
            @livewire('saldos-view-table')
        </div>
    </div>
@endsection
@section('modales')
    @include('modales.modal-form-pagar')
@endsection
@section('css')
    <link rel="stylesheet" media="all" type="text/css" href="{{ asset('build/css/select2.min.css') }}" />
    <link rel="stylesheet" media="all" type="text/css" href="{{ asset('build/css/select2-bootstrap4.min.css') }}" />
    @if (Auth::user()->tema == 'oscuro')
        <style>
            .select2-search {
                background-color: #343A40 !important;
            }

            .select2-search input {
                color: #ffffff !important;
                background-color: #343A40 !important;
            }

            .select2-results {
                background-color: #343A40 !important;
            }
        </style>
    @endif
@endsection
@section('js')
    <script src="{{ asset('build/js/select2.min.js') }}"></script>
    <script src="{{ asset('js/jquery.inputmask.min.js') }}"></script>
    <script src="{{ asset('js/helper.js') }}"></script>
    <script>
        var modalAbierto = '';

        function cargarSelectClientes(select, callback) {
            if (modalAbierto == '') return;
            $(function() {
                $(select).select2({
                    placeholder: "[ - Seleccione un cliente - ]",
                    theme: "bootstrap4",
                    dropdownParent: $("#" + modalAbierto),
                    width: '100%',
                    language: {
                        errorLoading: function() {
                            return "Error cargando los resultados";
                        },
                        noResults: function() {
                            return "No hay resultados";
                        },
                        searching: function() {
                            return "Buscando...";
                        },
                    },
                    ajax: {
                        url: "{{ route('gestion.pagar.get-clientes') }}",
                        dataType: 'json',
                        minimumInputLength: 1,
                        // cache:true,
                        data: function(params) {
                            var query = {
                                search: params.term,
                            }
                            return query;
                        }
                    }
                }).on('change', callback);
            });
        }

        function mostrarModal() {
            $('#' + modalAbierto).modal('show');
        }

        function ocultarModal() {
            $('#' + modalAbierto).modal('hide');
        }

        Livewire.on('mostrarError', function(mensajeError, ocultar = true) {
            if (ocultar) ocultarModal();
            Swal.close();
            Swal.fire({
                icon: 'warning',
                title: mensajeError,
                showConfirmButton: false,
                timerProgressBar: false,
                timer: 3000,
                didOpen: () => {
                    Swal.hideLoading()
                }
            })
        });

        Livewire.on('mostrarCargando', function(mensaje) {
            Swal.close();
            Swal.fire({
                title: mensaje,
                html: 'Por favor espere...',
                allowOutsideClick: false,
                timerProgressBar: true,
                didOpen: () => {
                    Swal.showLoading()
                }
            })
        });

        Livewire.on('mostrarMensaje', function(mensaje, ocultar = true, recargar = false) {
            if (ocultar) ocultarModal();
            Swal.close();
            setTimeout(function() {
                Swal.fire({
                    icon: 'success',
                    title: mensaje,
                    showConfirmButton: false,
                    timer: 1500
                }).then((result) => {
                    if (result.dismiss === Swal.DismissReason.timer && recargar) {
                        location.reload();
                    }
                });
            }, 500);
        });
    </script>
    @stack('modal-pagar-js')
@endsection