@extends('layouts.app', ['activePage' => 'clientes', 'titlePage' => __('Reportes / Comisiones')])

@section('content')

<style>
    #gridPagos td {
        font-size: 13px;
    }
</style>
<div class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-4">
                                <h4 class="card-title">Consulta de pagos</h4>
                                <!--<p class="card-category"> Here is a subtitle for this table</p>-->
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-3 ">
                                <div class="input-group input-group-static">
                                    <label>Rango de fechas:</label>
                                    <input type="text" class="form-control daterange" id="desde_hasta" placeholder="10/01/2022 - 10/01/2022 " />
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="form-group">
                                    <div class="input-group input-group-static">
                                        <label>Sucursales: </label>
                                        <select class="form-control" name="sucursal" id="sucursal">
                                            <option value="0" selected>Todas</option>
                                            @foreach($data['sucursales'] as $sucursal)
                                            <option value="{{$sucursal->Id  }}">{{$sucursal->Descripcion}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class=" col-md-4 mt-4">
                                <button type="button" class="btn btn-primary " onclick="loadGrid()">
                                    Buscar
                                </button>
                            </div>
                        </div>
                        <div class="row mt-3">
                            <table class="table table-bordered table-hover" id="gridPagos">
                                <thead>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Serie y folio</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Sucursal</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Cliente</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Importe</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Fecha</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Fecha de pago</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Estatus</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Acciones</th>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="modalDetallesPago" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title font-weight-normal" id="modalLabel"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <div class="modal-body">
                <table class="table table-bordered table-hover" id="gridDetalles">
                    <thead>
                        <th class="text-white  text-xxs font-weight-bolder opacity-7">Serie y folio</th>
                        <th class="text-white  text-xxs font-weight-bolder opacity-7">Importe</th>
                        <th class="text-white  text-xxs font-weight-bolder opacity-7">Saldo</th>
                    </thead>
                    <tbody id="bodyDetallesPago">

                    </tbody>

                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>



<div class="modal fade" id="modalPagoRelacionado" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title font-weight-normal" id="exampleModalLabel">Cancelar pago</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <div class="modal-body">

                <div class="col-md-12">
                    <div class="form-group">
                        <div class="input-group input-group-static">
                            <label>Motivo de cancelación: </label>
                            <select class="form-control" id="motivo_cancelacion" onchange="getMotivoCancelacion(this.value)">
                                <option value="01">(01) Comprobantes emitidos con errores con relación</option>
                                <option value="02" selected>(02) Comprobantes emitidos con errores sin relación</option>
                                <option value="03">(03) No se llevó a cabo la operación</option>
                                <option value="04">(04) Operación nominativa relacionada en una factura global</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-md-12" id="contentPagoRelacionado" style="display: none;">
                    <div class="input-group input-group-static mb-4">
                        <label>Pago relacionado:</label>
                        <input type="text" class="form-control" id="pago_relacionado" placeholder="Serie y folio">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary" onclick="cancelarPago(2,0,1);">Guardar</button>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="modalCorreo" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title font-weight-normal">Enviar PDF y XML</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <div class="modal-body">
                <div class="col-md-12">
                    <div class="input-group input-group-static mb-4">
                        <label>Correo:</label>
                        <input type="text" class="form-control" id="correo">
                    </div>
                </div>
                <!-- <div class="col-md-12">
                    <div class="input-group input-group-static mb-4">
                        <label>Cuerpo:</label>
                        <textarea type="text" class="form-control" rows="3" id="cuerpo"></textarea>
                    </div>
                </div> -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary" onclick="sendCorreo();">Enviar</button>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="modalCorreo2">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Correos</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-10">
                            <div class="input-group input-group-static mb-4">
                              <label>Correo Cliente</label>
                              <!--<input type="text" class="form-control" id="emailClienteM">-->
                              <select id="emailClienteM" class="form-control" id="" multiple="">
                              </select>
                            </div>
                        </div>
                        <div class="col-2 justify-content-center" >
                            <button class="btn btn-primary" onclick="addCorreoCliente();">+</button>
                        </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary" onclick="enviarFactura();">Enviar</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalNuevoEmail">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Nuevo Correo Cliente</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-12">
                        <div class="input-group input-group-static my-3">
                            <label>Correo</label>
                            <input type="text" class="form-control" id="correoNuevo">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary" onclick="guardaCorreoCliente();">Guardar</button>
            </div>
        </div>
    </div>
</div>

<input type="hidden" id="id_pago_hidden">

<link rel="stylesheet" href="{{asset('vendor/jquery-ui/jquery-ui.min.css')}}">
<script src="{{asset('vendor/jquery-ui/jquery-ui.min.js')}}"></script>
<script>
    $(document).ready(function() {
        $('.dropify').dropify();

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $(".datepicker").flatpickr({
            minDate: "today"
        });

        $('.daterange').daterangepicker({
            startDate: moment().startOf('hour'),
            endDate: moment().startOf('hour'),
            locale: {
                format: 'YYYY-MM-DD',
                applyLabel: "Aplicar",
                cancelLabel: "Cancelar",
            }
        });
        $('#gridPagos').dataTable().fnDestroy();
        $('#gridPagos').DataTable({
            dom: 'Bfrtip',
            // processing: true,
            responsive: true,
            // scrollY: '37vh',
            // scrollCollapse: true,
            // scrollX: true,
            buttons: [{
                    extend: 'copyHtml5',
                    text: '<i class="fa fa-files-o"></i>',
                    titleAttr: 'Copiar'
                },
                {
                    extend: 'excelHtml5',
                    text: '<i class="fa fa-file-excel-o"></i>',
                    titleAttr: 'Excel'
                },
                {
                    extend: 'csvHtml5',
                    text: '<i class="fa fa-file-text-o"></i>',
                    titleAttr: 'CSV'
                },
                {
                    extend: 'pdfHtml5',
                    text: '<i class="fa fa-file-pdf-o"></i>',
                    titleAttr: 'PDF'
                }
            ],

        });

        loadGrid();
    });


    function blockSpecialChar(e) {
        var k;
        document.all ? k = e.keyCode : k = e.which;
        return ((k > 64 && k < 91) || (k > 96 && k < 123) || k == 8 || k == 32 || (k >= 48 && k <= 57));
    }



    function loadGrid() {
        //$('#').DataTable();
        var fechas = $('#desde_hasta').val().split(' - ');

        $('#gridPagos').dataTable().fnDestroy();
        var table = $('#gridPagos').DataTable({
            lengthMenu: [10, 15, 20, 50, 100],
            dom: 'Bfrtip',
            processing: true,
            scrollY: '50vh',
            scrollCollapse: true,
            ajax: {
                url: "{{url('reportes/consulta_pagos/get_pagos')}}",
                type: "POST",
                data: {
                    desde_hasta: fechas,
                    sucursal: $('#sucursal option:selected').val(),
                },
                dataSrc: function(json) {
                    $('#totalLabel').html(json.total)
                    return json.data;
                }
            },
            columns: [{
                    data: "serie_folio"
                },
                {
                    data: "sucursal"
                },
                {
                    data: "cliente"
                },
                {
                    data: "importe"
                },
                {
                    data: "Fecha"
                },
                {
                    data: "FechaPagoCliente"
                },
                {
                    data: "estatus"
                },
                {
                    data: "acciones"
                },

            ],
            order: [
                [0, "desc"]
            ],
            buttons: [{
                    extend: 'copyHtml5',
                    text: '<i class="fa fa-files-o"></i>',
                    titleAttr: 'Copiar'
                },
                {
                    extend: 'excelHtml5',
                    text: '<i class="fa fa-file-excel-o"></i>',
                    titleAttr: 'Excel'
                },
                {
                    extend: 'csvHtml5',
                    text: '<i class="fa fa-file-text-o"></i>',
                    titleAttr: 'CSV'
                },
                {
                    extend: 'pdfHtml5',
                    text: '<i class="fa fa-file-pdf-o"></i>',
                    titleAttr: 'PDF'
                }
            ],
            // footerCallback: function(row, data, start, end, display) {
            //     var api = this.api();

            //     // Remove the formatting to get integer data for summation
            //     var intVal = function(i) {
            //         return typeof i === 'string' ? i.replace(/[\$,]/g, '') * 1 : typeof i === 'number' ? i : 0;
            //     };

            //     // Total over all pages
            //     total = api
            //         .column(3)
            //         .data()
            //         .reduce(function(a, b) {
            //             return intVal(a) + intVal(b);
            //         }, 0);

            //     // Total over this page
            //     pageTotal = api
            //         .column(3, {
            //             page: 'current'
            //         })
            //         .data()
            //         .reduce(function(a, b) {
            //             return intVal(a) + intVal(b);
            //         }, 0);

            //     // Update footer
            //     $(api.column(3).footer()).html('TOTAL PAGINA: $' + pageTotal.toFixed(2) + ' <br>TOTAL TABLA: $' + total.toFixed(2));
            // },
        });

    }

    function cancelarPago(tipo = 0, id = 0, accion = 0) {
        if (tipo == 1) {
            $('#id_pago_hidden').val(id)
            $('#pago_relacionado').val('');
            $('#modalPagoRelacionado').modal('show')
        } else if (tipo == 3) {
            $('#id_pago_hidden').val(id)
        }
        if (accion == 1) {
            $.ajax({
                    url: "{{ url('/reportes/consulta_pagos/cancelar_pago')}}",
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        id: $('#id_pago_hidden').val(),
                        pago_relacionado: $('#pago_relacionado').val(),
                        tipo: tipo,
                        motivo: $('#motivo_cancelacion option:selected').val(),

                    },
                })
                .done(function(resp) {

                    if (resp.result == 201) {
                        Swal.fire({
                            type: 'success',
                            title: resp.mensaje,
                            showConfirmButton: false,
                            timer: 2500
                        });
                    } else {
                        Swal.fire({
                            type: 'error',
                            title: resp.mensaje,
                            showConfirmButton: false,
                            timer: 2500
                        });
                    }
                    $('#gridPagos').DataTable().ajax.reload();
                    $('#modalPagoRelacionado').modal('hide');


                })
                .fail(function() {
                    console.log("error");
                })
                .always(function() {
                    console.log("complete");
                });
        }
    }

    function detallesPago(id) {
        $.ajax({
                url: "{{ url('/reportes/consulta_pagos/get_pago')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    id: id,
                },
            })
            .done(function(resp) {

                $('#modalLabel').text('Detalles del pago ' + resp.pago['Serie'] + '-' + +resp.pago['Folio'])
                $('#bodyDetallesPago').empty();
                $.each(resp.data, function(index, value) {
                    $('#bodyDetallesPago').append(
                        '<tr>' +
                        '<td>' + value['serie_folio'] + '</td>' +
                        '<td>' + value['importe'] + '</td>' +
                        '<td>' + value['saldo'] + '</td>' +
                        '</tr>'
                    );
                })
                $('#modalDetallesPago').modal('show');

            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });

    }

    function getMotivoCancelacion(valor) {
        if (valor == "01") {
            $('#contentPagoRelacionado').show('slow');
        } else {
            $('#contentPagoRelacionado').hide('slow');
        }
        $('#pago_relacionado').val('');
    }

    function sendPDF(id, correo) {
        $('#correo').val('');
        $('#correo').val(correo);
        // $('#cuerpo').val('');
        $('#id_pago_hidden').val(id)
        $('#modalCorreo').modal('show');
    }

    function sendCorreo() {
        $.ajax({
                url: "{{ url('/reportes/consulta_pagos/send_correo')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    id: $('#id_pago_hidden').val(),
                    correo: $('#correo').val(),
                    // cuerpo: $('#cuerpo').val(),
                },
            })
            .done(function(resp) {
                Swal.fire({
                    type: 'success',
                    title: resp.mensaje,
                    showConfirmButton: false,
                    timer: 2500
                });
                $('#gridPagos').DataTable().ajax.reload();
                $('#modalCorreo').modal('hide');

            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }
    function sendPDF2(id, correo) {
        $('#correo').val('');
        $('#correo').val(correo);
        // $('#cuerpo').val('');
        $('#id_pago_hidden').val(id)
       

        $.ajax({
            url: "{{ url('/reportes/consulta_pagos/get_clientes_correos')}}",
            type: 'POST',
            dataType: 'json',
            data: {id: id},
        })
        .done(function(resp) {
            console.log("success");
             html = ''
            $('#emailClienteM').html(html)
            $.each(resp.correos, function(index, val) {
                html += '<option value="'+val.Correo+'">'+val.Correo+'</option>'
            });
            $('#emailClienteM').append(html);
             $('#modalCorreo2').modal('show');

        })
        .fail(function() {
            console.log("error");
        })
        .always(function() {
            console.log("complete");
        });
        
    }
    function addCorreoCliente(){
    $('#correoNuevo').val('')
    $('#modalNuevoEmail').modal('show')
  }
  function guardaCorreoCliente(){
    var idpago = $('#id_pago_hidden').val()
    var correo = $('#correoNuevo').val()

    $.ajax({
        url: '../reportes/consulta_pagos/guarda_nuevo_correo',
        type: 'POST',
        dataType: 'json',
        data: {correo: correo,idpago: idpago},
    })
    .done(function(resp) {
        if(resp.estatus > 0){
            Swal.fire({
                title: 'Correo guardado',
                type: 'success',
                timer: 2000
            })

            $('#emailClienteM').append('<option value="'+correo+'">'+correo+'</option>');
            $('#correoNuevo').val('')
            $('#modalNuevoEmail').modal('hide')
        }else{
            Swal.fire({
                        title: 'Error al guardar el correo',
                        type: 'warning',
                        timer: 2000
                    })
        }
       
    })
    .fail(function() {
        console.log("error");
    })
    .always(function() {
        console.log("complete");
    });
    
  }
  function enviarFactura(){
    var emailClienteM = $('#emailClienteM').val();
    var idpago = $('#id_pago_hidden').val()
    console.log(emailClienteM)
    $.ajax({
        url: '../reportes/consulta_pagos/enviar_pago_pdf',
        type: 'POST',
        dataType: 'json',
        data: {
            emailClienteM: emailClienteM,
            idpago: idpago
        },
    })
    .done(function(resp) {
        console.log("success");
        if(resp.estatus){
            Swal.fire({
                title: 'Se envio correctamente!',
                type: 'success',
                timer: 2000
            })
            cerrarModales();
        }
    })
    .fail(function() {
        console.log("error");
    })
    .always(function() {
        console.log("complete");
    });
    
}
</script>
@endsection