@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.preregistration') }}  {{__('strings.import_from_excel')}}
                            </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="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.address')}}</th>
                                    <th>Lat</th>
                                    <th>Lng</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 googleIndex = 7;
    $(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') !!}"
                                }
        });
    });
    

    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) => {
                console.error(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();    
            // 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: data[8],
                    lat: data[9],
                    lng: data[10],
                    pre_registration: true,
                    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';
                    }
                    table.row(rowIdx).data(data);
                });
                
            }, rowIdx * 250);
        });   
    }
</script>
@endpush