@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"> 
                        <div class="col-md-12"> 
                            <hr>
                            <h4><code>Generales</code></h4>
                        </div> 
                        <div class="col-md-4">  
                            <div class="form-group">
                                <label for="FolioInt">FolioInt</label>
                                <input type="text" id="FolioInt" name="FolioInt" class="form-control" placeholder="001"/>
                            </div>
                        </div>
                        <div class="col-md-4">  
                            <div class="form-group">
                                <label for="NumServ">NumServ</label>
                                <input type="text" id="NumServ" name="NumServ" class="form-control" placeholder="001"/>
                            </div>
                        </div>
                        <div class="col-md-4">  
                            <div class="form-group">
                                <label for="FechaExp">FechaExp</label>
                                <input type="text" id="FechaExp" name="FechaExp" class="form-control"/>
                            </div>
                        </div>
                        <div class="col-md-4">  
                            <div class="form-group">
                                <label for="FechaServ">FechaServ</label>
                                <input type="text" id="FechaServ" name="FechaServ" class="form-control"/>
                            </div>
                        </div>
                            
                        <div class="col-md-4">  
                            <div class="form-group">
                                <label for="CveRetenc">CveRetenc</label>
                                <input type="text" id="CveRetenc" name="CveRetenc" value="26" class="form-control"/>
                            </div>
                        </div>

                        <div class="col-md-12"> 
                            <hr>
                            <h4><code>Emisor</code></h4>
                        </div>
                        
                        <div class="col-md-4">  
                            <div class="form-group">
                                <label for="RFCEmisor">RFC Emisor</label>
                                <input type="text" id="RFCEmisor" name="RFCEmisor" value="UTL1005258F2" class="form-control"/>
                            </div>
                        </div>
                        <div class="col-md-4">  
                            <div class="form-group">
                                <label for="NomDenRazSocE">NomDenRazSocE</label>
                                <input type="text" id="NomDenRazSocE" name="NomDenRazSocE" value="Ubicacion Tecnologica en Linea S.A. De C.V." class="form-control"/>
                            </div>
                        </div>
                        <div class="col-md-4">  
                            <div class="form-group">
                                <label for="CURPE">CURP Emisor</label>
                                <input type="text" id="CURPE" name="CURPE" value="" class="form-control"/>
                            </div>
                        </div>

                        <div class="col-md-12"> 
                            <hr>
                            <h4><code>Receptor</code></h4>
                        </div>
                        
                        <div class="col-md-4">  
                            <div class="form-group">
                                <label for="RFCRecep">RFC Receptor</label>
                                <input type="text" id="RFCRecep" name="RFCRecep" value="" class="form-control"/>
                            </div>
                        </div>
                        <div class="col-md-4">  
                            <div class="form-group">
                                <label for="NomDenRazSocR">NomDenRazSocR</label>
                                <input type="text" id="NomDenRazSocR" name="NomDenRazSocR" value="" class="form-control"/>
                            </div>
                        </div>
                        <div class="col-md-4">  
                            <div class="form-group">
                                <label for="CURPR">CURP Receptor</label>
                                <input type="text" id="CURPR" name="CURPR" value="" class="form-control"/>
                            </div>
                        </div>

                        <div class="col-md-12"> 
                            <hr>
                            <h4><code>Periodo</code></h4>
                        </div>

                        <div class="col-md-4">  
                            <div class="form-group">
                                <label for="MesIni">MesIni</label>
                                <input type="text" id="MesIni" name="MesIni" value="" placeholder="5" class="form-control"/>
                            </div>
                        </div>
                        <div class="col-md-4">  
                            <div class="form-group">
                                <label for="MesFin">MesFin</label>
                                <input type="text" id="MesFin" name="MesFin" value="" placeholder="5" class="form-control"/>
                            </div>
                        </div>
                        <div class="col-md-4">  
                            <div class="form-group">
                                <label for="Ejerc">Ejerc</label>
                                <input type="text" id="Ejerc" name="Ejerc" value="" placeholder="2020" class="form-control"/>
                            </div>
                        </div>

                        <div class="col-md-12"> 
                            <hr>
                            <h4><code>Totales</code></h4>
                        </div>
                        
                        <div class="col-md-4">  
                            <div class="form-group">
                                <label for="MontoTotOperacion">MontoTotOperacion</label>
                                <input type="text" id="MontoTotOperacion" name="MontoTotOperacion" value="" placeholder="0.0" class="form-control"/>
                            </div>
                        </div>
                        <div class="col-md-4">  
                            <div class="form-group">
                                <label for="MontoTotGrav">MontoTotGrav</label>
                                <input type="text" id="MontoTotGrav" name="MontoTotGrav" value="" placeholder="0.0" class="form-control"/>
                            </div>
                        </div>
                        <div class="col-md-4">  
                            <div class="form-group">
                                <label for="IVA">IVA</label>
                                <input type="text" id="IVA" name="IVA" value="" placeholder="montoTotOperacion * 0.16" class="form-control"/>
                            </div>
                        </div>
                        <div class="col-md-4">  
                            <div class="form-group">
                                <label for="MontoRetIVA">MontoRetIVA</label>
                                <input type="text" id="MontoRetIVA" name="MontoRetIVA" value="" placeholder="montoTotOperacion * 0.08" class="form-control"/>
                            </div>
                        </div>
                        <div class="col-md-4">  
                            <div class="form-group">
                                <label for="MontoRetISR">MontoRetISR</label>
                                <input type="text" id="MontoRetISR" name="MontoRetISR" value="" placeholder="montoTotOperacion * baseRetISR" class="form-control"/>
                            </div>
                        </div>
                        <div class="col-md-4">  
                            <div class="form-group">
                                <label for="montoTotRet">montoTotRet</label>
                                <input type="text" id="montoTotRet" name="montoTotRet" value="" placeholder="MontoRetIVA + MontoRetISR" class="form-control"/>
                            </div>
                        </div>
                        <div class="col-md-4">  
                            <div class="form-group">
                                <label for="TipoPagoRet">TipoPagoRet</label>
                                <select id="TipoPagoRet" class="form-control">
                                    <option value="Pago definitivo">Pago definitivo</option>
                                    <option value="Pago provisional">Pago provisional</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">  
                            <div class="form-group">
                                <label for="RfcTerceroAutorizado">RfcTerceroAutorizado</label>
                                <input type="text" id="RfcTerceroAutorizado" name="RfcTerceroAutorizado" value="" placeholder="" class="form-control"/>
                            </div>
                        </div>
                        <div class="col-md-4">  
                            <div class="form-group">
                                <label for="Periodicidad">Periodicidad</label>
                                <select id="Periodicidad" class="form-control">
                                    <option value="01">Semanal</option>
                                    <option value="02">Mensual</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">  
                            <div class="form-group">
                                <label for="DifIvaEntregadoPrestServ">DifIvaEntregadoPrestServ</label>
                                <input type="text" id="DifIvaEntregadoPrestServ" name="DifIvaEntregadoPrestServ" value="" placeholder="IVA - MontoRetIVA" class="form-control"/>
                            </div>
                        </div>
                        <div class="col-md-4">  
                            <div class="form-group">
                                <label for="ComisionDelServicioPorcentaje">ComisionDelServicioPorcentaje</label>
                                <input type="text" id="ComisionDelServicioPorcentaje" name="ComisionDelServicioPorcentaje" value="1" class="form-control"/>
                            </div>
                        </div>
                    <br><br>
                    <div class="col-md-12 mb-3">


                    <div class="col-md-6">
                        <button type="button" id="btn_import_retentions" class="btn btn-block btn-info ">
                                {{ __('strings.import_excel') }}
                        </button>
                    </div>   
                        <div class="col-md-6">
                            <button type="button" id="btn_run_retentions" class="btn btn-block btn-green ">
                                {{ __('strings.generate_retention') }}
                            </button>                                        
                        </div>                                    
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<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>
                                Respuesta API.  
                            </h1>
                        </div>
                        <div class="col-md-12">      
                            <pre id="json-renderer"></pre>
                        </div>
                    </div>
                </div>
                    
                <div class="cc-selector panel-body">
                    
                </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" src="{{asset('js/notify.min.js')}}"></script>


<script type="text/javascript">
    
    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 FolioInt = undefined;
    var RFCEmisor = undefined; // change to UBITEC RFC
    var NomDenRazSocE = undefined;
    var CURPE = undefined;
    
    // receptor
    var RFCRecep = undefined;
    var NomDenRazSocR = undefined;
    var CURPR = undefined;

    // period
    var MesIni = undefined;
    var MesFin = undefined;
    var Ejerc = undefined;

    // totales
    var montoTotOperacion = undefined
    var montoTotGrav = undefined
    var IVA = undefined;
    IVA = Math.floor(IVA * 100000)/100000;

    var montoIVA = Math.floor((IVA / 2) * 10000) / 10000;
    var montoISR = undefined
    var TipoPagoRet = undefined;

    var RfcTerceroAutorizado = undefined;
    var Periodicidad = undefined;
    var NumServ = undefined;
    var DifIvaEntregadoPrestServ = (IVA - montoIVA).toFixed(4);
    var montoTotRet = (montoIVA + montoISR).toFixed(4);

    var ComisionDelServicioPorcentaje = 1;
    var ComisionDelServicioBase = (100 / (100 - ComisionDelServicioPorcentaje)) * montoTotOperacion;
    var ComisionDelServicioImporte = ComisionDelServicioBase * (ComisionDelServicioPorcentaje / 100);
    var MonTotalporUsoPlataforma = ComisionDelServicioImporte;

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

        $('#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(() => {
            console.log("btn_run_retentions click...")
            $('#btn_run_retentions').prop('disabled', true);

            apiRequest();
        });
        $('#btn_import_retentions').click(() => {
            $( "#input" ).trigger( "click" );  
        });
    });
    

    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));
                        }
                    }
                });

                if(data.length >= 1) {
                    fillValues(data[1]);
                }
                
            }, (error) => {
                console.error(error)
                $.alert("{{__('strings.error_excel_import')}}")
            });
        });
    }

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

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

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

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

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

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

        $('#FolioInt').val(FolioInt);
        $('#NumServ').val(NumServ);
        $('#RFCEmisor').val(RFCEmisor);
        $('#NomDenRazSocE').val(NomDenRazSocE);
        $('#CURPE').val(CURPE);
        $('#RFCRecep').val(RFCRecep);
        $('#NomDenRazSocR').val(NomDenRazSocR);
        $('#CURPR').val(CURPR);
        $('#MesIni').val(MesIni);
        $('#MesFin').val(MesFin);
        $('#Ejerc').val(Ejerc);
        $('#MontoTotOperacion').val(montoTotOperacion);
        $('#MontoTotGrav').val(montoTotGrav);
        $('#IVA').val(IVA);
        $('#MontoRetIVA').val(montoIVA);
        $('#MontoRetISR').val(montoISR);
        $('#TipoPagoRet').val(TipoPagoRet);
        $('#RfcTerceroAutorizado').val(RfcTerceroAutorizado);
        $('#Periodicidad').val(Periodicidad);
        $('#DifIvaEntregadoPrestServ').val(DifIvaEntregadoPrestServ);
        $('#montoTotRet').val(montoTotRet);
        $('#ComisionDelServicioPorcentaje').val(ComisionDelServicioPorcentaje);

    }

    function apiRequest() {
        $.showPreloader('{{__("strings.loading")}}');

        FolioInt = $('#FolioInt').val();
        NumServ = $('#NumServ').val();
        RFCEmisor = $('#RFCEmisor').val();
        NomDenRazSocE = $('#NomDenRazSocE').val();
        CURPE = $('#CURPE').val();
        RFCRecep = $('#RFCRecep').val();
        NomDenRazSocR = $('#NomDenRazSocR').val();
        CURPR = $('#CURPR').val();
        MesIni = $('#MesIni').val();
        MesFin = $('#MesFin').val();
        Ejerc = $('#Ejerc').val();
        montoTotOperacion = parseFloat($('#MontoTotOperacion').val());
        montoTotGrav = parseFloat($('#MontoTotGrav').val());
        IVA = parseFloat($('#IVA').val());
        montoIVA = parseFloat($('#MontoRetIVA').val());
        montoISR = parseFloat($('#MontoRetISR').val());
        TipoPagoRet = $('#TipoPagoRet').val();
        RfcTerceroAutorizado = $('#RfcTerceroAutorizado').val();
        Periodicidad =  $('#Periodicidad').val();
        DifIvaEntregadoPrestServ = parseFloat($('#DifIvaEntregadoPrestServ').val());
        montoTotRet = parseFloat($('#montoTotRet').val());
        ComisionDelServicioPorcentaje = parseFloat($('#ComisionDelServicioPorcentaje').val());
        
        //DifIvaEntregadoPrestServ = (IVA - montoIVA).toFixed(4);
        ComisionDelServicioBase = (100 / (100 - ComisionDelServicioPorcentaje)) * montoTotOperacion;
        ComisionDelServicioImporte = ComisionDelServicioBase * (ComisionDelServicioPorcentaje / 100);
        MonTotalporUsoPlataforma = ComisionDelServicioImporte;
        const payload = getRetentionPayload();

    
        $.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) {
                    $.hidePreloader();
                    $.notify("CFDI generado con éxito.", { className: 'success', globalPosition:"bottom right" });
                    $('#json-renderer').jsonViewer(response);
                }})
                .fail(function(err){
                    console.log(err);
                    $.hidePreloader();
                    $.notify("Ha ocurrido un error, intentalo de nuevo !", { className: 'error',globalPosition:"bottom right" });
                    $('#json-renderer').jsonViewer(err);
            });
    }

    function getRetentionPayload(){
        try{
            $('#btn_run_retentions').prop('disabled', false);
        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
                        },
                        "FormaPagoServ": "02",
                        "TipoDeServ": "01",
                        "SubTipServ": "02",
                        RfcTerceroAutorizado,
                        FechaServ,
                        "PrecioServSinIva": montoTotOperacion
                    }],
                    Periodicidad,
                    "NumServ": 1,
                    "MontToServSIva": montoTotOperacion,
                    "TotalIvaTrasladado": IVA,
                    "TotalIvaRetenido": montoIVA,
                    "TotalIsrRetenido": montoISR,
                    DifIvaEntregadoPrestServ
                }
            }
        };

        return payload;
        } catch(err) {

        }
        return {};
        
    }

</script>
@endpush