@extends('adminlte::page')

@section('title', 'Informe Deudas')

@section('content_header')
    <div class="container-fluid">
        <h1><i class="fa fa-th" aria-hidden="true"></i> Informe de Deudas</h1>
    </div>
@stop
@section('content')
    <br>
    <form id="deuda_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 Búsqueda</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">Con saldo</option>
                                <option value="I">Terminadas</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="form-group">
                            <label>Monto por Cobrar</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>Selección 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>Método de Pago: </label>
                            <select class="form-control" name='metodo_pago' id="metodo_pago">
                                <option value="CON">CONTADO</option>
                                <option selected value="CRE">CRÉDITO</option>
                            </select>
                        </div>
                    </div>
                </div>
                
                
             
                <div class="row">
                    <button type="submit" class="btn btn-dark toastrDefaultSuccess m-2"> <i class="fas fa-search">
                            Buscar Información</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>#</th>
                                <th>No.Documento</th>
                                <th>Socio</th>
                                <th>Monto</th>
                                <th>Abono</th>
                                <th>Saldo</th>
                                <th>Fecha Vence</th>
                                <th>Detalle</th>
                                <th style="display:none;">Id socio</th>
                            </tr>
                        </thead>
                        <tbody id="tblSocios_seleccionar">

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

    <!-- modal buscar Socios-->
    <div class="modal fade" id="modal-buscar-socios">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title"> <i class="fas fa-search"> </i> Búsqueda de Socios</h4>
                    <button id="CloseModal" type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <!--<p>One fine body&hellip;</p>-->
                    <div class="row">
                        <div class="col-12">

                            <!-- /.card -->
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title"></h3>
                                </div>
                                <!-- /.card-header -->
                                <div class="card-body">
                                    <table id="tblBuscarSocios" class="table table-bordered table-striped">
                                        <thead>
                                            <tr>
                                                <th>IdSocio</th>
                                                <th>Identificación</th>
                                                <th>Nombres</th>
                                                <th>Apellidos</th>
                                                <th>Estado</th>
                                                <th style="display:none;">Id socio</th>
                                            </tr>
                                        </thead>
                                        <tfoot>

                                        </tfoot>
                                    </table>
                                </div>
                                <!-- /.card-body -->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                                                                                                                                                                                                                                                                              <button type="button" class="btn btn-primary">Save changes</button>-->
                </div>
            </div>
        </div>
    </div>
@stop


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

        const date = new Date();
        const currentDate = date.toISOString().substring(0, 10);
        document.getElementById('fechadesde').value = currentDate;
        document.getElementById('fechahasta').value = currentDate;
        let existeInfo=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 página",
                "zeroRecords": "Sin Registro..",
                "info": "Mostrando página _PAGE_ de _PAGES_",
                "infoEmpty": "Sin registros disponibles",
                "infoFiltered": "(filtered from _MAX_ total records)",
                "search": "Búsq.",
                "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,
                {
                    "width": "25%"
                },
                // null,
                null,
                // null,
                null,
                null,
                null,
                {
                    "width": "25%"
                },
            ],
        });
        dataInformacion.buttons().disable();
        $('#tblSocios tbody ').on('click', '.btn_licencia', function() {
            const datosTablas = dataInformacion.row($(this).parents('tr')).data();
            window.open("/pdf-recibopdf/" + datosTablas[9]);
        });
        $("form#deuda_form").submit(function(e) {
            MostrarLoader();
            e.preventDefault();
            const formData = new FormData(this);
            $.ajax({
                url: '/deudas/buscarinformes',
                type: 'POST',
                data: formData,
                success: function(data) {
                    OcultarLoader();
                    let sumatotal = 0
                    const rows = dataInformacion.rows().remove().draw();
                    if (data.status == 'ok') {
                        dataInformacion.buttons().enable();
                        $.each(data.data, function(key, value) {
                            
                            sumatotal += parseFloat(value.saldo);
                            dataInformacion.row.add([
                                '',
                                value.id_cliente_deuda,
                                value.num_documento,
                                value.nombre_completo,
                                value.monto,
                                value.credito,
                                value.saldo,
                                value.fecha_vencimiento,
                                value.detalle,
                                value.id_factura_cab,
                            ]).draw(false);
                        });
existeInfo=true;
                        $('#monto').val(sumatotal);
                    } else {
                        toastr.error(data.message);
                    }
                },
                cache: false,
                contentType: false,
                processData: false,
            });

        });

        const imprimirDocumento = () => {
            if(existeInfo){
                
            window.open("/create-pdf-deuda");
            }else{
                 toastr.error('No existe información para poder descargar el pdf.!');
            }
        }

        function CargarBusquedaSocios() {
            $('#tblBuscarSocios').DataTable({
                "processing": true,
                "destroy": true,
                "serverSide": true,
                "responsive": true,
                "lengthChange": false,
                "autoWidth": false,
                "select": true,
                "ajax": {
                    'url': '/pagos/consultarSocios',
                    'headers': {
                        'Content-Type': 'application/json',
                        "X-CSRF-Token": $("meta[name='csrf-token']").attr("content")
                    }
                },
                "columns": [{
                        data: 'id_ente'
                    },
                    {
                        data: 'num_docum_iden'
                    },
                    {
                        data: 'p_primer_nombre'
                    },
                    {
                        data: 'p_primer_apellido'
                    },
                    {
                        data: 'activo'
                    },
                    {
                        data: 'IdSocios',
                        visible: false,
                        searchable: false,
                    }
                ],
                "language": {
                    "lengthMenu": "Mostrar _MENU_ registros por página",
                    "zeroRecords": "No se encontró nada - lo siento",
                    "info": "Mostrando la página _PAGE_ de _PAGES_",
                    "infoEmpty": "No hay registros disponibles",
                    "infoFiltered": "(filtrado de _MAX_ registros totales)",
                    "search": "Buscar Socio:",
                    "paginate": {
                        "previous": "Anterior",
                        "next": "siguiente"
                    }
                },

            }).buttons().container().appendTo('#tblBuscarSocios_wrapper .col-md-6:eq(0)');

            var table = $('#tblBuscarSocios').DataTable();
            $('#tblBuscarSocios tbody').on('click', 'tr', function() {
                var row = table.row(this).data();
                CargarDatosSocio(row);
            });

        }

        CargarBusquedaSocios();

        $('#search_socio').on('click', function() {
            var table = $('#tblBuscarSocios').DataTable();
            table.ajax.reload();
            $("#modal-buscar-socios").modal('show');

        })

        function CargarDatosSocio(item) {
            // document.getElementById("id_socio").value = item.IdSocios;
            // document.getElementById("lbl_socio").value = item.p_primer_nombre + " " + item.p_primer_apellido;
            $("#modal-buscar-socios").modal('hide');
        }
    </script>
@stop