@extends('layouts.main')
@push('styles')
<!-- BEGIN DataTables-->
<link rel="stylesheet" type="text/css" href="{{asset('datatables/datatables.min.css')}}"/>
<!-- END DataTables-->
@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.import_employees_header') }}  
                            </h1>
                        </div>
                    </div>
                </div>
                    
                <div class="cc-selector panel-body">
                    <div class="col-md-12 mb-3 ml-3"> 
                        <p><code class="mb-3">* {{__('strings.import_template_message')}}</code></p>
                    </div>
                    
                    <div class="col-md-12">                        
                        <div class="table-responsive">                            
                            <table id="trips-table" class="table hover mb-0">
                                <thead class="thead-inverse">
                                    <tr>
                                        <th>{{__('strings.employee_number')}}</th>
                                        <th>QrCode [Obligatorio]</th>
                                        <th>{{__('strings.name')}}</th>
                                        <th>{{__('strings.last_name')}}</th>
                                        <th>{{__('strings.department')}}</th>
                                        <th>{{__('strings.phone')}} [Obligatorio]</th>
                                        <th>{{__('strings.sex')}}</th>
                                        <th>{{__('strings.blood_type')}}</th>
                                        <th>{{__('strings.google_url')}}</th>
                                        <th>STATUS</th>
                                    </tr>
                                </thead>
                            </table>
                         </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>
                                {{ __('strings.table_error') }}  
                            </h1>
                        </div>
                    </div>
                </div>
                    
                <div class="cc-selector panel-body">
                    
                    
                    <div class="col-md-12">                        
                        <div class="table-responsive">                            
                            <table id="trips-table-error" class="table hover mb-0">
                                <thead class="thead-inverse">
                                    <tr>
                                        <th>{{__('strings.employee_number')}}</th>
                                        <th>QrCode [Obligatorio]</th>
                                        <th>{{__('strings.name')}}</th>
                                        <th>{{__('strings.last_name')}}</th>
                                        <th>{{__('strings.department')}}</th>
                                        <th>{{__('strings.phone')}} [Obligatorio]</th>
                                        <th>{{__('strings.sex')}}</th>
                                        <th>{{__('strings.blood_type')}}</th>
                                        <th>{{__('strings.google_url')}}</th>
                                        <th>STATUS</th>
                                    </tr>
                                </thead>
                            </table>
                         </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')

<!-- BEGIN DataTables-->
<script src="{{asset('datatables/datatables.min_1.js')}}" type="text/javascript"></script>
<!-- END DataTables-->
<script src="{{asset('js/read-excel-file.min.js')}}" type="text/javascript"></script>


<script type="text/javascript">
    
    var table;
    var tableError;
    var googleIndex = 8;
    $(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.submit_import") }}',
                                        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') !!}"
                                }
        });

        //initialize datetable
        tableError = $('#trips-table-error').DataTable({
                                responsive: false,
                                paging: false,	
                                searching: true,
                                serverSide: false,
                                ordering: false,
                                dom: 'Bfrtip',
                                buttons: [
                                    'excel','pdf'
                                ],
                                "language" : {
                                        url: "{!! asset('datatables/languages/spanish.json') !!}"
                                }
        });
    });
    

    function initExcelImport() {
        var input = document.getElementById('input');
        input.addEventListener('change', function() {
            readXlsxFile(input.files[0]).then(function(data) {
                // `data` is an array of rows
                // each row being an array of cells.
                data.forEach(function(item) {
                    //item.push('');
                });
                table.clear().rows.add(data).draw();
                if(table.data().any()) {
                    nipRequest();
                }
            }, (error) => {
                $.alert("{{__('strings.error_excel_import')}}")
            });
        });
    }
    
    function nipRequest() {
    window.scrollTo(0, 0); 
    bootbox.prompt({
        title: "Nip",
        inputType: 'password',
        size: 'small',
        closeButton: false,
        callback: function (nip) { 
            if(nip) {      
                apiRequest(table, nip);
            }
        }
    });
    }

    function apiRequest(table, nip) {
        table.rows().every(function (rowIdx, tableLoop, rowLoop){
            var data = table.row(rowIdx).data();
            var node = this.node();            
            // validate google regular expression
            var patt = new RegExp(/(.*)place(.*)@(\-?\d+\.\d+),\s*(\-?\d+\.\d+)(.*)d(\d+.\d+)(.*)d(\-?\d+\.\d+)$/);
            var patt2 = new RegExp(/.*(\/.*\/)@(\-?\d+\.\d+),\s*(\-?\d+\.\d+)/);

            if (patt.test(data[googleIndex])) { 
                var addressData = patt.exec(data[googleIndex]);
                var address = decodeURIComponent(addressData[2]).replace(/\+/g, " ").replace(/\//g, "");
                var lat = addressData[6];
                var lng = addressData[8];      
                // get adddress data
                setTimeout(function(){                    
                    $.post("{{route('api_quiq_employee_add')}}", {
                        token: "{{\Auth::user()->SECURE_TOKEN}}",
                        employee_number: data[0],
                        qr_code: data[1],
                        name: data[2],
                        last_name: data[3],
                        department: data[4],
                        full_phone: data[5],
                        sex: data[6],
                        blood_type: data[7],
                        address: address,
                        lat: lat,
                        lng: lng,
                        google_url: data[googleIndex],
                        nip: nip
                    }, function(response) {
                        $(node).addClass('text-white bg-success');
                        data[data.length - 1] = response.message;
                        table.row(rowIdx).data(data);
                    }) .fail(function(error) {
                        $(node).addClass('text-white bg-danger');
                        if(error.responseJSON) {
                            data[data.length - 1] = error.responseJSON.message;
                        } else {
                            data[data.length - 1] = 'ERROR';
                        }
                    
                        console.log(data)
                        table.row(rowIdx).data(data);
                        tableError.row.add(data).draw();
                    });
                    
                }, rowIdx * 250);                
            } else if(patt2.test(data[googleIndex])){
                var addressData = patt2.exec(data[googleIndex]);
                var address = decodeURIComponent(addressData[2]).replace(/\+/g, " ").replace(/\//g, "");
                var address = decodeURIComponent(addressData[1]).replace(/\+/g, " ").replace(/\//g, "");
                var lat = addressData[2];
                var lng = addressData[3];               
                // get adddress data
                setTimeout(function(){                    
                    $.post("{{route('api_quiq_employee_add')}}", {
                        token: "{{\Auth::user()->SECURE_TOKEN}}",
                        employee_number: data[0],
                        qr_code: data[1],
                        name: data[2],
                        last_name: data[3],
                        department: data[4],
                        full_phone: data[5],
                        sex: data[6],
                        blood_type: data[7],
                        address: address,
                        lat: lat,
                        lng: lng,
                        google_url: data[googleIndex],
                        nip: nip
                    }, function(response) {
                        $(node).addClass('text-white bg-success');
                        data[data.length - 1] = response.message;
                        table.row(rowIdx).data(data);
                    }) .fail(function(error) {
                        $(node).addClass('text-white bg-danger');
                        if(error.responseJSON) {
                            data[data.length - 1] = error.responseJSON.message;
                        } else {
                            data[data.length - 1] = 'ERROR';
                        }

                        console.log(data)
                        table.row(rowIdx).data(data);
                        tableError.row.add(data).draw();
                    });
                    
                }, rowIdx * 250);   
            } else {
                setTimeout(function(){
                    $(node).addClass('text-white bg-danger');
                    data[data.length - 1] = 'URL NO VALIDO';
                    table.row(rowIdx).data(data);
                }, rowIdx * 250);
            }
        });   
    }
</script>
@endpush