@extends('layouts.main')
@push('styles')
<!-- Include Date Range Picker -->
<link rel="stylesheet" type="text/css" href="{{asset('css/daterangepicker.css')}}" />

<link href="https://rawgit.com/abodelot/jquery.json-viewer/master/json-viewer/jquery.json-viewer.css" type="text/css" rel="stylesheet">
<!-- Include app colors -->
@endpush
@section('content')
<div class="card">
    <div class="card-block">
        <div class="col-md-12">
            <div class="panel panel-default">   
                <div class="panel-heading">
                    <div class="col-md-12">
                        <div class="col-md-8">                                
                            <h1>
                                {{ __('strings.tech_platforms_serives') }}  
                            </h1>
                        </div>
                    </div>
                </div>
                    
                <div class="cc-selector panel-body">
                    <div class="col-md-12 mb-3 ml-3"> 
                        <code class="mb-3">{{__('strings.import_template_message')}}</code>
                    </div>
                    
                    <div class="col-md-12">  
                        
                    <div class="col-md-6">  
                        <div class="form-group">
                            <label for="FechaExp">Fecha Exp.</label>
                            <input type="text" id="FechaExp" name="FechaExp" class="form-control"/>
                        </div>
                    </div>
                    <div class="col-md-6">  
                        <div class="form-group">
                            <label for="FechaServ">Fecha Serv.</label>
                            <input type="text" id="FechaServ" name="FechaServ" class="form-control"/>
                        </div>
                    </div>
                        
                        <div class="table-responsive">                            
                        <table id="trips-table" class="table hover mb-0">
                            <thead class="thead-inverse">
                                <tr>
                                <th>Conductor</th>
                                    <th>Nombre de quien Factura</th>
                                    <th>Periodo</th>
                                    <th>Importe Neto</th>
                                    <th>Importe Bruto</th>
                                    <th>IVA 16%</th>
                                    <th>% Retención IVA</th>
                                    <th>% Retención ISR</th>
                                    <th>$ Retencion IVA</th>
                                    <th>$ Retencion ISR</th>
                                    <th>Importe Factura</th>
                                    <th>CURP</th>
                                    <th>RFC</th>
                                    <th>Nombre Fiscal</th>
                                    <th>FolioInt</th>
                                    <th>NumServ</th>
                                    <th>Periodicidad</th>
                                    <th>TipoPagoRet</th>
                                    <th>MesIni</th>
                                    <th>MesFin</th>
                                    <th>Ejerc</th>
                                    <th>MonTotalporUsoPlataforma</th>
                                    <th>MonTotalContribucionGubernamental</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                    <br><br>
                    <div class="col-md-12 mb-3">
                        <div class="col-md-6">
                            <button type="button" id="btn_run_retentions" class="btn btn-block btn-green ">
                                {{ __('strings.generate_retentions') }}
                            </button>                                        
                        </div>                                    
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<input id="input" type="file" class="btn btn-primary mr-3 mb-1" hidden="hidden"/>
@endsection

@push('scripts')
<script src="{{asset('js/read-excel-file.min.js')}}" type="text/javascript"></script>
<script type="text/javascript" src="{{asset('js/daterangepicker.js')}}"></script>
<script src="https://rawgit.com/abodelot/jquery.json-viewer/master/json-viewer/jquery.json-viewer.js"></script>


<script type="text/javascript">
    
    var table;

    var FechaExp = moment().format('YYYY-MM-DDTHH:mm:ssZ');
    var FechaServ =  moment().format('YYYY-MM-DDTHH:mm:ssZ');
    const FACTURAMA_API = "https://api.facturama.mx/Retenciones";
    const FACTURAMA_AUTH = "VUJJVEVDOlJPSk8xMjcx";
    var detailRows = [];

    $(document).ready(function() {
         
        initExcelImport();
    
        //setting language for moment.js
        moment.locale('es');

        //initialize datetable
        table = $('#trips-table').DataTable({
                                responsive: false,
                                paging: false,	
                                searching: true,
                                serverSide: false,
                                ordering: false,
                                dom: 'Bfrtip',
                                buttons: [
                                    'excel','pdf',
                                    {
                                        text: '{{ __("strings.import_excel") }}',
                                        action: function ( e, dt, node, config ) {
                                              $( "#input" ).trigger( "click" );                                         
                                        },
                                        className:'btn-dark',
                                        init: function(api, node, config) {
                                            $(node).removeClass('btn-secondary')
                                        }
                                    }
                                ],
                                "language" : {
                                        url: "{!! asset('datatables/languages/spanish.json') !!}"
                                }
        });


        $('#trips-table tbody').on( 'click', 'tr td a.details-control', function () {
        console.log("click tr td.details-control event.")
        var tr = $(this).closest('tr');
        var row = table.row( tr );
        var idx = $.inArray( tr.attr('id'), detailRows );
 
        if ( row.child.isShown() ) {
            tr.removeClass( 'details' );
            row.child.hide();
 
            // Remove from the 'open' array
            detailRows.splice( idx, 1 );
        }
        else {
            tr.addClass( 'details' );
            row.child( format( idx, row.data() ) ).show();
 
            // Add to the 'open' array
            if ( idx === -1 ) {
                detailRows.push( tr.attr('id') );
            }
        }
    } );

    // On each draw, loop over the `detailRows` array and show any child rows
    table.on( 'draw', function () {
        $.each( detailRows, function ( i, id ) {
            $('#'+id+' td a.details-control').trigger( 'click' );
        } );
    } );

        $('#FechaExp').daterangepicker({
            singleDatePicker: true,
            showDropdowns: true,
            startDate: moment()
        }, function(start, end, label) {
            FechaExp = start.format('YYYY-MM-DDTHH:mm:ssZ');
        });
        $('#FechaServ').daterangepicker({
            singleDatePicker: true,
            showDropdowns: true,
            startDate: moment()
        }, function(start, end, label) {
            FechaServ = start.format('YYYY-MM-DDTHH:mm:ssZ');
        });

        $('#btn_run_retentions').click(() => {
            $('#btn_run_retentions').prop('disabled', true);

            if ( table.data().count() ) {
                apiRequest();
            }
        });
    });
    

    function initExcelImport() {
        var input = document.getElementById('input');
        input.addEventListener('change', function() {
            readXlsxFile(input.files[0]).then(function(data) {
                $('#btn_run_retentions').prop('disabled', false);
                console.log(data);
                // `data` is an array of rows
                // each row being an array of cells.
                data.forEach(function(item) {
                    for(var i = 0; i <= 10; i++){
                        if(Number(item[i])) {
                            item[i] = parseFloat(Number(item[i]).toFixed(3).slice(0,-1));
                        }
                    }
                    item.push('<a href="javascript:void(0);" class="details-control">PENDIENTE</a>');
                });
                
                table.clear().rows.add(data).draw();
                if(table.data().any()) {
                    console.log(getRetentionPayload(data[1]))
                    //apiRequest();
                }
            }, (error) => {
                console.error(error)
                $.alert("{{__('strings.error_excel_import')}}")
            });
        });
    }
    
    function apiRequest() {
        table.rows().every(function (rowIdx, tableLoop, rowLoop){
            var data = table.row(rowIdx).data();
            var node = this.node();
            var payload =  getRetentionPayload(data);
            console.log(payload)
            setTimeout(function(){                    
                    $.ajax({
                        type: "POST",
                        url: FACTURAMA_API, 
                        data: JSON.stringify(payload),
                        headers: {
                            "Content-Type": 'application/json',   //If your header name has spaces or any other char not appropriate
                            "Authorization": 'Basic ' + FACTURAMA_AUTH  //for object property name, use quoted notation shown in second
                        },
                        contentType: "application/json",
                        dataType: "json",
                        success: function(response){
                            $(node).addClass('text-white bg-success');
                            data[data.length - 1] = '<a href="javascript:void(0);" class="details-control">OK</a>';
                            data.response = response;
                            table.row(rowIdx).data(data);
                        }})
                        .fail(function(err){
                            $(node).addClass('text-white bg-danger');
                            data[data.length - 1] = '<a href="javascript:void(0);" class="details-control">ERROR</a>';
                            data.response = err;
                            table.row(rowIdx).data(data);
                    });
                    
                }, rowIdx * 500);   
        });   
    }

    function getRetentionPayload(row){
        try {

        const FolioInt = row[14];
        const RFCEmisor = "UTL1005258F2"; // change to UBITEC RFC
        const NomDenRazSocE = "Ubicacion Tecnologica en Linea S.A. De C.V.";
        const CURPE = "";
        
        // receptor
        const RFCRecep = row[12];
        const NomDenRazSocR = row[13];
        const CURPR = row[11];

        // period
        const MesIni = row[18];
        const MesFin = row[19];
        const Ejerc = row[20];

        // totales
        const montoTotOperacion = row[4];
        const montoTotGrav = row[4];
        var IVA = montoTotOperacion * 0.16;
        IVA = Math.floor(IVA * 100000)/100000;

        const montoIVA = Math.floor((IVA / 2) * 10000) / 10000;
        const montoISR = row[9];
        const TipoPagoRet = row[17];

        const RfcTerceroAutorizado = "";
        const Periodicidad = row[16] === 'Semanal' ? '01' : '02';
        const NumServ = row[15];
        const DifIvaEntregadoPrestServ = (IVA - montoIVA).toFixed(4);
        const montoTotRet = (montoIVA + montoISR).toFixed(4);

        const ComisionDelServicioPorcentaje = parseFloat(row[21]);
        const ComisionDelServicioBase = (100 / (100 - ComisionDelServicioPorcentaje)) * montoTotOperacion;
        const ComisionDelServicioImporte = ComisionDelServicioBase * (ComisionDelServicioPorcentaje / 100);
        const MonTotalporUsoPlataforma = ComisionDelServicioImporte;


        var payload = {
            FolioInt,
            FechaExp,
            "CveRetenc": "26",
            "Emisor": {
                RFCEmisor,
                NomDenRazSocE,
                CURPE
            },
            "Receptor": {
                "Nacionalidad": "Nacional",
                "Nacional": {
                    RFCRecep,
                    NomDenRazSocR,
                    CURPR
                }
            },
            "Periodo": {
                MesIni,
                MesFin,
                Ejerc
            },
            "Totales": {
                montoTotOperacion,
                montoTotGrav,
                "montoTotExent": "0.00",
                montoTotRet,
                "ImpRetenidos": [{
                    "BaseRet": montoTotOperacion,
                    "Impuesto": "01",
                    "MontoRet": montoISR,
                    TipoPagoRet
                },{
                    "BaseRet": Math.floor(IVA * 100)/100,
                    "Impuesto": "02",
                    "MontoRet": montoIVA,
                    TipoPagoRet
                }]
            },
            "Complemento": {
                "ServiciosPlataformasTecnologicas": {
                    "Servicios": [{
                        "ImpuestosTrasladadosdelServicio": {
                            "Base": montoTotOperacion,
                            "Impuesto": "01",
                            "TasaCuota": "0.160000",
                            "Importe": IVA
                        },
                        "ComisionDelServicio": {
						    "Base": ComisionDelServicioBase.toFixed(6),
						    "Porcentaje": ComisionDelServicioPorcentaje / 100,
						    "Importe": ComisionDelServicioImporte.toFixed(6)
				    	},
                        "FormaPagoServ": "02",
                        "TipoDeServ": "01",
                        "SubTipServ": "02",
                        RfcTerceroAutorizado,
                        FechaServ,
                        "PrecioServSinIva": montoTotOperacion
                    }],
                    Periodicidad,
                    "NumServ": 1,
                    "MontToServSIva": montoTotOperacion,
                    "TotalIvaTrasladado": IVA,
                    "TotalIvaRetenido": montoIVA,
                    "TotalIsrRetenido": montoISR,
                    DifIvaEntregadoPrestServ,
	                MonTotalporUsoPlataforma: MonTotalporUsoPlataforma.toFixed(6)
                }
            }
        };

        return payload;
        } catch(err) {

        }
        return {};
        
    }


    function format ( idx, d ) {
        try {
            var jInput = '<pre id="json-renderer' + idx + '"></pre>';
			setTimeout(() => $('#json-renderer' + idx).jsonViewer(d.response || {}), 1000);
            return jInput;
		}
		catch (error) {
			console.log(err);
		}
        return  {};
    }
</script>
@endpush