@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="cc-selector panel-body">
                    <div class="panel-heading">
                        <h1>
                            {{ __('strings.bus_address_import_header') }}     
                        </h1>
                    </div>
                    <code class="mb-3">{{__('strings.import_template_message')}}</code>
                    <hr>
                
                    <div class="table-responsive">
                        <table id="bus-address-table" class="table hover mb-0">
                            <thead class="thead-inverse">
                                <tr>
                                    <th>{{__('strings.address')}}</th>
                                    <th>Alias</th>
                                    <th>LAT</th>
                                    <th>LNG</th>
                                    <th>TOTAL</th>
                                </tr>
                            </thead>
                        </table>
                    </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;    
    $(document).ready(function() {

        //setting language for moment.js
        moment.locale('es');
        initExcelImport();
        //initialize datetable
        table = $('#bus-address-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()) {
                    bootbox.prompt({
                    title: "Nip",
                    inputType: 'password',
                    size: 'small',
                    closeButton: false,
                    callback: function (nip) { 
                        if(nip) {
                            clearBusAddress(nip);
                        }
                    }
                });
                }
            }, (error) => {
                console.error(error)
                $.alert("{{__('strings.error_excel_import')}}")
            });
        });
    }
    
    function clearBusAddress(nip) {
        $.post("{{route('api_quiq_stop_address_clear')}}", {
            token: "{{\Auth::user()->SECURE_TOKEN}}",
            "nip": nip
        }, function(response){
            apiRequest(table);
        }).fail(function(){
            $.alert("{{__('strings.error_message')}}");
        });
    }
    
    function apiRequest(table) {
        table.rows().every(function (rowIdx, tableLoop, rowLoop){
            var data = table.row(rowIdx).data();
            var node = this.node();            
            // validate google regular expression
            // get adddress data
            setTimeout(function(){                    
                $.post("{{route('api_quiq_stop_address_add')}}", {
                    token: "{{\Auth::user()->SECURE_TOKEN}}",
                    address: data[0],
                    alias: data[1],
                    lat: data[2],
                    lng: data[3],
                    total: data[4]
                }, function(){
                    $(node).addClass('text-white bg-success');
                        data[data.length - 1] = 'OK';
                        table.row(rowIdx).data(data);
                }) .fail(function(){
                    $(node).addClass('text-white bg-danger');
                        data[data.length - 1] = 'ERROR';
                        table.row(rowIdx).data(data);
                });

            }, rowIdx * 250);
        });   
    }
</script>
@endpush