@extends('adminlte::page')

@section('title', 'Informe Pagos')
@section('content_header')
    <div class="container-fluid">
        <h1><i class="fa fa-th" aria-hidden="true"></i> Informe de Pagos</h1>
    </div>
@stop
@section('content')
    <br>
    <form id="usuario_form" method="post" enctype="multipart/form-data">
        @csrf
        <div class="card card-warning" id="my-card">
            <div class="card-header">
                <h3 class="card-title"><strong> Filtro de Busqueda</strong></h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <input name="_token" type="hidden" class="form-control" id="_token" value="{{ csrf_token() }}">
                    <div class="col-sm-3">
                        <div class="form-group">
                            <label>Fecha Desde</label>
                            <input name="fechadesde" type="date" class="form-control" id="fechadesde">
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="form-group">
                            <label>Fecha Hasta</label>
                            <input name="fechahasta" type="date" class="form-control" id="fechahasta">
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="form-group">
                            <label>Estado</label>
                            <select class="form-control" name='estado' id="estado">
                                <option value="A">Realizado</option>
                                <!--<option value="I">Anuladas</option>-->
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="form-group">
                            <label>Monto Generado</label>
                            <input type="text" class="form-control" placeholder="0" readonly name='monto'
                                id="monto">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label>Seleccion de Socio: </label>
                            <select class="form-control select2bs4" style="width: 100%;" id="usuario" name="usuario">
                                <option selected="selected" value="T">Todos los Socios</option>
                                @foreach ($datasocio as $datos)
                                    <option value="{{ $datos->IdSocios }}">{{ $datos->nombre_completo }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label>Tipo Pago:</label>
                            <select class="form-control select2bs4" name='tipo_pago' id="tipo_pago">
                                <option selected value="EFE">EFECTIVO</option>
                                <option value="DEP">DEPOSITO</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <button type="submit" class="btn btn-dark toastrDefaultSuccess m-2"> <i class="fas fa-search">
                            Buscar Informacion</i></button>
                </div>
            </div>
        </div>

    </form>
    <div style="display:none;" id="loader"></div>
    <div id="DivPrincipal">
        <div class="col-12">
            <!-- /.card -->
            <div class="card">
                <div class="card-header">
                    <div class="float-right">
                        <button type="submit" class="btn btn-danger toastrDefaultSuccess" onclick="imprimirDocumento()">
                            Descargar Pdf</button>

                    </div>
                </div>
                <!-- /.card-header -->
                <div class="card-body">
                    <table id="tblSocios" class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th></th>
                                <th>No.Pago</th>
                                <th>No.Documento</th>
                                <th>Concepto</th>
                                <th>Socio</th>
                                <th>Monto</th>
                                <th>Tipo Pago</th>
                                <th>Fecha Pago</th>
                                <th style="display: none;">iddeuda</th>
                            </tr>
                        </thead>
                        <tbody id="tblSocios_seleccionar">

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

@stop

@section('js')
    <script>
        $('.select2bs4').select2({
            theme: 'bootstrap4'
        })

        var date = new Date();
        var currentDate = date.toISOString().substring(0, 10);
        document.getElementById('fechadesde').value = currentDate;
        document.getElementById('fechahasta').value = currentDate;
        let activo = false;
        var dataInformacion = $('#tblSocios').DataTable({
            "processing": true,
            "ordering": false,
            "dom": 'Bfrtip',
            "buttons": [{
                extend: 'excelHtml5',
                text: 'EXCEL',
                'title': 'Informe de Deuda',
                filename: 'inf_deuda',
                titleAttr: 'Informe de Deuda',
                className: 'btn btn-success'
            }, ],
            "language": {
                "lengthMenu": "Mostrando _MENU_ por pagina",
                "zeroRecords": "Sin Registro..",
                "info": "Mostrando pagina _PAGE_ de _PAGES_",
                "infoEmpty": "Sin registros disponibles",
                "infoFiltered": "(filtered from _MAX_ total records)",
                "search": "Busq.",
                "paginate": {
                    "first": "Primero",
                    "last": "Ultimo",
                    "next": "Siguiente",
                    "previous": "Anterior"
                },
            },
            "columnDefs": [{
                    "defaultContent": '<a href="javascript:void(0);" class=" btn btn-icon btn-xs btn-primary btn_licencia"><i class="fa fa-eye"></i></a>',
                    "targets": 0,
                    "data": null
                },

            ],
            "columns": [
                null,
                null,
                null,

                null,
                {
                    "width": "25%"
                },
                // null,
                null,
                // null,
                null,
                null
            ],

        });

        dataInformacion.buttons().disable();
        $('#tblSocios tbody ').on('click', '.btn_licencia', function() {
            const datosTablas = dataInformacion.row($(this).parents('tr')).data();
            window.open("/pagopdf/" + datosTablas[1] + "/" + datosTablas[9]);
        });
        $("form#usuario_form").submit(function(e) {
            MostrarLoader();
            e.preventDefault();
            const formData = new FormData(this);
            $.ajax({
                url: '/pagos/buscarinformes',
                type: 'POST',
                data: formData,
                success: function(data) {
                    OcultarLoader();
                    let sumatotal = 0
                    const rows = dataInformacion.rows().remove().draw();
                    if (data.status == 'ok') {
                        activo = true;
                        dataInformacion.buttons().enable();
                        $.each(data.data, function(key, value) {
                            sumatotal += parseFloat(value.monto);
                            dataInformacion.row.add([
                                '',
                                value.id_cliente_credito,
                                value.num_documento,
                                value.descripcion,
                                value.nombre_completo,
                                value.monto,
                                value.tipo_pago,
                                value.aud_ing_fecha_hora,
                                value.tipolicencia,
                                value.id_cliente_deuda,
                            ]).draw(false);
                        });

                        $('#monto').val(sumatotal.toFixed(2));
                    } else {
                        toastr.error(data.message);
                    }
                },
                cache: false,
                contentType: false,
                processData: false,
            });

        });
        const imprimirDocumento = () => {
            if (activo) {
                window.open("/create-pdf-pagos");
            } else {
                toastr.error('Cargue primero información para poder descargar.');
            }

        }
    </script>
@stop