@extends('layouts.app', ['pageSlug' => 'deviceLists'])

@section('content')
<div class="splynx_top_nav">
    <div style="float: left">
        <ul class="splynx_breadcrumbs">
            <li><span>Networking / Monitoring / upload files</span></li>
        </ul>
    </div>
    <div class="clearfix"></div>
</div>
<div class="spl-page-panel">
    <div class="row">
        <div class="col-lg-12">
            Upload files
        </div>
    </div>
    <br>
    <div class="row">
        <div class="col-md-6">
            <div class="row">
                <form id="fetch_import_form" class="form-horizontal" role="form" action="{{route('network.monitor.upload')}}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="uploding-module">
                        <h3>Uploading and Running Script</h3>
                        <div class="form-group row">
                            <label for="" class="col-md-4"> select file for running script </label>
                            <input type="file" name="uploadFile" id="uploadFile" class="input-sm col-md-8">
                        </div>

                        <div class="form-group row">
                            <label for="" class="col-md-4"> select routers</label>
                            <select name="router" id="router" multiple  class="col-md-8 select2">
                                @foreach ($devices as $key => $dev)
                                <option value="{{$dev->id}}">{{$dev->name}}({{$dev->ip}})</option>
                                @endforeach
                            </select>
                        </div>

                        
                        <input type="submit" value="upload" class="btn btn-primary" id="submit_1">
                        <div id="loading1" style="display:none; float:right;"><img src="{{asset('/')}}/images/loading.gif" alt=""></div>
                    </div>
                </form>
            </div>
        </div>
        <div class="col-md-6">

            <div class="row">
                <form id="fetch_reboot_form" class="form-horizontal" role="form" action="{{route('network.monitor.upload.reboot')}}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="uploding-module">
                    
                        <h3>Uploading and Reboot System</h3>
                        <div class="form-group row">
                            <label for="" class="col-md-4"> select file for uploding files </label>
                            <input type="file" name="uploadFiles[]" id="uploadFiles" class="input-sm col-md-8" multiple>
                        </div>

                        <div class="form-group row">
                            <label for="" class="col-md-4"> select routers</label>
                            <select name="router2" id="router2" multiple  class="col-md-8 select2">
                                @foreach ($devices as $key => $dev)
                                <option value="{{$dev->id}}">{{$dev->name}}({{$dev->ip}})</option>
                                @endforeach
                            </select>
                        </div>

                        
                        <input type="submit" value="upload" class="btn btn-primary" id="submit_2">
                        <div id="loading2" style="display:none; float:right;"><img src="{{asset('/')}}/images/loading.gif" alt=""></div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="row">
                <form id="fetch_import_by_ip_form" class="form-horizontal" role="form" action="{{route('network.monitor.upload.byip')}}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="uploding-module">
                        <h3>Third Module</h3>
                        <div class="form-group row">
                            <label for="" class="col-md-4"> select file for running script </label>
                            <input type="file" name="uploadFile3" id="uploadFile3" class="input-sm col-md-8">
                        </div>

                        <div class="form-group row">
                            <label for="" class="col-md-4"> select routers</label>
                            <textarea name="ip_addresses" id="ip_addresses" cols="30" rows="3" ></textarea>
                        </div>

                        
                        <input type="submit" value="upload" class="btn btn-primary" id="submit_3">
                        <div id="loading3" style="display:none; float:right;"><img src="{{asset('/')}}/images/loading.gif" alt=""></div>
                    </div>
                </form>
            </div>
        </div>
        <div class="col-md-6">
            <div class="row">
                <form id="fetch_reboot_by_ip_form" class="form-horizontal" role="form" action="{{route('network.monitor.upload.reboot.byip')}}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="uploding-module">
                    
                        <h3>Uploading and Reboot System</h3>
                        <div class="form-group row">
                            <label for="" class="col-md-4"> select file for uploding files </label>
                            <input type="file" name="uploadFilesByIP[]" id="uploadFilesByIP" class="input-sm col-md-8" multiple>
                        </div>

                        <div class="form-group row">
                            <label for="" class="col-md-4"> select routers</label>
                            <textarea name="router4" id="router4" cols="30" rows="3" ></textarea>
                        </div>

                        
                        <input type="submit" value="upload" class="btn btn-primary" id="submit_4">
                        <div id="loading4" style="display:none; float:right;"><img src="{{asset('/')}}/images/loading.gif" alt=""></div>
                    </div>
                </form>
            </div>
        </div>
        
    </div>
    <div class="row">
        <h3 style="margin-left:15px;">progress and logs</h3>

        <div class="col-md-6">
            <div id="uploading_progressbar"></div>
        </div>
        <div class="col-md-4">
            <div id="uploading_log" style="max-height: 200px;overflow: auto;"></div>
        </div>
    </div>
</div>
@endsection

@push('js')
<script src="https://js.pusher.com/6.0/pusher.min.js"></script>
<script>
var fileCounts = 0;
var pusherCount = 0;

    function confirmDelete(route) {
        var result = confirm( "Do you want to delete this?" );
        if (result) {
            location.href = route;
        }
    }

    // toastr.success('succeed');

    $(document).ready(function(){
        $('.select2').select2();

        $('form#fetch_import_form').submit(function(event) {
            pusherCount = 0;
            event.preventDefault();
            var data = new FormData();
            var token = '{{ csrf_token()}}';
            var file = document.getElementById('uploadFile').files[0];

            if (!file) {
                alert('please select file');
                return;
            }
            if ($('#router').val() == '') {
                alert('please select routers');
                return;
            }
            data.append("_token", token);
            data.append("uploadFile", file);
            data.append("routers", $('#router').val());
            
            $('#submit_1').attr('disabled', true);
            $('#loading1').css('display', '');
            $('#uploading_log').html('');

            /* make progress bar*/
            var rs = $('#router').val();
            var routerIds =  rs.splice(',');

            var pbar = [];
            pbar.push(p_bar('uploading', 'uploading', 'info'));
            for(var r of routerIds) {
                var txt = $("#router option[value='"+r+"']").text();
                pbar.push(p_bar(txt, 'm1_'+r, 'success'));
            }
            $('#uploading_progressbar').empty();
            $('#uploading_progressbar').html(pbar.join(''));

            $.ajax({
                data: data,
                type: "POST",
                url: "{{route('network.monitor.upload')}}",
                cache: false,
                contentType: false,
                processData: false,
                success: function(res) {
                    if (res == 'success') {
                        $('#submit_1').attr('disabled', false);  
                        $('#loading1').css('display', 'none');  
                        // alert( "Uploading and Running finished" ); 
                        toastr.success('success');
                    }
                    else {
                        $('#submit_1').attr('disabled', false);  
                        $('#loading1').css('display', 'none');  
                        toastr.error('fail');
                    }
                },
                error:function(err) {
                        $('#submit_1').attr('disabled', false);  
                        $('#loading1').css('display', 'none');  
                        toastr.error('some error happens');
                }
            });


        });

        $('form#fetch_reboot_form').submit(function(event) {

            event.preventDefault();
            pusherCount = 0;
            var data = new FormData();
            var token = '{{ csrf_token()}}';
            var files = document.getElementById('uploadFiles').files;           

            if (!files) {
                alert('please select file');
                return;
            }
            if ($('#router2').val() == '') {
                alert('please select routers');
                return;
            }
            data.append("_token", token);

            var totalfiles = document.getElementById('uploadFiles').files.length;

            fileCounts = totalfiles;

            for (var index = 0; index < totalfiles; index++) {
                data.append("uploadFiles[]", document.getElementById('uploadFiles').files[index]);
            }
            // data.append("uploadFiles", files);

            data.append("routers", $('#router2').val());
            $('#submit_2').attr('disabled', true);
            $('#loading2').css('display', '');
            $('#uploading_log').html('');

            /* make progress bar*/
            var rs = $('#router2').val();
            var routerIds =  rs.splice(',');

            var pbar = [];
            pbar.push(p_bar('uploading', 'uploading', 'info'));
            for(var r of routerIds) {
                var txt = $("#router option[value='"+r+"']").text();
                pbar.push(p_bar(txt, 'm2_'+r, 'success'));
            }
            $('#uploading_progressbar').empty();
            $('#uploading_progressbar').html(pbar.join(''));

            $.ajax({
                data: data,
                type: "POST",
                url: "{{route('network.monitor.upload.reboot')}}",
                cache: false,
                contentType: false,
                processData: false,
                success: function(res) {
                    if (res == 'success') {
                        $('#submit_2').attr('disabled', false);  
                        $('#loading2').css('display', 'none');
                        toastr.success('success');
                    }
                    else {
                        $('#submit_2').attr('disabled', false);  
                        $('#loading2').css('display', 'none');
                        toastr.error('fail');
                    }
                },
                error:function(err) {
                        $('#submit_2').attr('disabled', false);  
                        $('#loading2').css('display', 'none');
                        toastr.error('some error happens');
                }
            });
        });

        $('form#fetch_import_by_ip_form').submit(function(event) {
            pusherCount = 0;

            event.preventDefault();
            var data = new FormData();
            var token = '{{ csrf_token()}}';
            var file = document.getElementById('uploadFile3').files[0];

            if (!file) {
                alert('please select file');
                return;
            }
            if ($('#ip_addresses').val() == '') {
                alert('please insert ip addresses');
                return;
            }
            data.append("_token", token);
            data.append("uploadFile", file);
            data.append("addresses", $('#ip_addresses').val());

            $('#submit_3').attr('disabled', true);
            $('#loading3').css('display', '');
            $('#uploading_log').html('');

            /* make progress bar*/
            var rs = $('#ip_addresses').val();
            var routerIds =  rs.split(',');

            var pbar = [];
            pbar.push(p_bar('uploading', 'uploading', 'info'));
            for(var r of routerIds) {
                var id = r.split('.').join('_');
                pbar.push(p_bar(r, 'm3_'+id, 'success'));
            }
            $('#uploading_progressbar').empty();
            $('#uploading_progressbar').html(pbar.join(''));

            $.ajax({
                data: data,
                type: "POST",
                url: "{{route('network.monitor.upload.byip')}}",
                cache: false,
                contentType: false,
                processData: false,
                success: function(res) {
                    if (res == 'success') {
                        $('#submit_3').attr('disabled', false);  
                        $('#loading3').css('display', 'none');  
                        toastr.success('success');
                    }
                    else {
                        $('#submit_3').attr('disabled', false);  
                        $('#loading3').css('display', 'none');  
                        toastr.error('fail');
                    }
                },
                error:function(err) {
                        $('#submit_3').attr('disabled', false);  
                        $('#loading3').css('display', 'none');  
                        toastr.error('some  error happens');
                }
            });


        });

        $('form#fetch_reboot_by_ip_form').submit(function(event) {
            pusherCount = 0;
            event.preventDefault();
            var data = new FormData();
            var token = '{{ csrf_token()}}';
            var files = document.getElementById('uploadFilesByIP').files;           

            if (!files) {
                alert('please select file');
                return;
            }
            if ($('#router4').val() == '') {
                alert('please select routers');
                return;
            }
            data.append("_token", token);

            var totalfiles = document.getElementById('uploadFilesByIP').files.length;
            fileCounts = totalfiles;
            for (var index = 0; index < totalfiles; index++) {
                data.append("uploadFiles[]", document.getElementById('uploadFilesByIP').files[index]);
            }
            // data.append("uploadFiles", files);

            data.append("routers", $('#router4').val());
            $('#submit_4').attr('disabled', true);
            $('#loading4').css('display', '');
            $('#uploading_log').html('');

             /* make progress bar*/
            var rs = $('#router4').val();
            var routerIds =  rs.split(',');

            var pbar = [];
            pbar.push(p_bar('uploading', 'uploading', 'info'));
            for(var r of routerIds) {
                var id = r.split('.').join('_');            
                pbar.push(p_bar(r, 'm4_'+id, 'success'));
            }
            $('#uploading_progressbar').empty();
            $('#uploading_progressbar').html(pbar.join(''));


            $.ajax({
                data: data,
                type: "POST",
                url: "{{route('network.monitor.upload.reboot.byip')}}",
                cache: false,
                contentType: false,
                processData: false,
                success: function(res) {
                    if (res == 'success') {
                        $('#submit_4').attr('disabled', false);  
                        $('#loading4').css('display', 'none');
                        toastr.success('success');
                    }
                    else {
                        $('#submit_4').attr('disabled', false);  
                        $('#loading4').css('display', 'none');
                        toastr.error('fail');
                    }
                },
                error:function(err) {
                        $('#submit_4').attr('disabled', false);  
                        $('#loading4').css('display', 'none');
                        toastr.error('some error happens');
                }
            });
        });

    })

    // var testEvent = new EventSource("{!! route('network.monitor.upload.sendEvent') !!}");
    // testEvent.addEventListener('message', function(e) {
    // console.log(e.data);
    // }, false);

    // testEvent.addEventListener('open', function(e) {
    //     console.log(e);
    // // Connection was opened.
    // }, false);

    // testEvent.addEventListener('error', function(e) {
    //     console.log(e);
    // if (e.readyState == EventSource.CLOSED) {
    //     // Connection was closed.
    // }
    // }, false);

    function makeProgressBar(){

    }

    function p_bar(name, index, type){
        return '<div class="progressbar-group">' +
            '<span>'+name+'</span>' +
            '<div class="progress">' +
                '<div class="progress-bar progress-bar-' + type + ' progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:0%" id="'+index+'">' +
                    '<span id="percentage_'+index+'">router</span>' +
                '</div>' +
            '</div>' +
        '</div>';
    }

    let pusher1 = new Pusher(`a02a6b2f633c31f75dc7`, {
        cluster: `us2`,
        forceTLS: true,
        encrypted: false
    });

    let channel1 = pusher1.subscribe('uploading-files-channal');

    channel1.bind('uploadingFiles', (data) => {
        var msg = JSON.parse(data.msg);
        var mode = msg.mode;
        if (mode == '1') {
            pBarType1(msg);
        } else if (mode == '2') {

            pBarType2(msg);
        } else if (mode == '3') {

            pBarType1(msg);
        } else if (mode ==  '4') {
            
            pBarType2(msg);
        }
        var cont = msg.msg;        

        var html = '<label style="display:block;">' + data.msg + '</label>';

        $('#uploading_log').append(html);

    });

    function pBarType1(msg){ // for module 1
        var status = msg.status;
        var mode = msg.mode;
        var type = msg.type;
        var id = msg.index;
        //m1_6
        //percentage_m1_6
        if (type == 'upload' && status == 'ok') {
            jQuery(document.body).find('#uploading').css('width', '100%');
            jQuery(document.body).find('#percentage_uploading').html('100%');
        } else if(type == 'upload' && status == 'fail') {
            jQuery(document.body).find('#uploading').css('width', '100%');
            jQuery(document.body).find('#uploading').removeClass('progress-bar-info');
            jQuery(document.body).find('#uploading').addClass('progress-bar-danger');
            jQuery(document.body).find('#percentage_uploading').html('upload falied');
        }
        if (type == 'connect' && status == 'fail') {
            jQuery(document.body).find('#m' + mode + '_' + id).removeClass('progress-bar-success');
            jQuery(document.body).find('#m' + mode + '_' + id).addClass('progress-bar-danger');
            jQuery(document.body).find('#m' + mode + '_' + id).css('width', '100%');
            jQuery(document.body).find('#percentage_m' + mode + '_' + id).html('connection falied');
        } else {
            if(type == 'fetch' && status == 'ok') {
                jQuery(document.body).find('#m' + mode + '_' + id).css('width', '80%');
                jQuery(document.body).find('#percentage_m' + mode + '_' + id).html('80%');
            } else if(type == 'fetch' && status == 'fail') {
                jQuery(document.body).find('#m' + mode + '_' + id).css('width', '80%');
                jQuery(document.body).find('#uploading').removeClass('progress-bar-info');
                jQuery(document.body).find('#uploading').addClass('progress-bar-danger');
            }
            if(type == 'finish' && status == 'ok') {
                jQuery(document.body).find('#m' + mode + '_' + id).css('width', '100%');
                jQuery(document.body).find('#percentage_m' + mode + '_' + id).html('100%');
            } else if(type == 'finish' && status == 'fail'){
                jQuery(document.body).find('#m' + mode + '_' + id).css('width', '100%');
                jQuery(document.body).find('#uploading').removeClass('progress-bar-info');
                jQuery(document.body).find('#uploading').addClass('progress-bar-danger');
            }
        }
    }
    
    var pbartype2_fetch = 0;
    var pbartype2_upload = 0;

    function pBarType2(msg, mode){ 

        var status = msg.status;
        var mode = msg.mode;
        var type = msg.type;
        var id = msg.index;
       
        //percentage_m1_6
        if (type == 'upload' && status == 'ok') {
            pbartype2_upload++;
            var width = (pbartype2_upload / fileCounts * 100).toFixed(2);
            jQuery(document.body).find('#uploading').css('width', width + '%');
            jQuery(document.body).find('#percentage_uploading').html(width + '%');
            if(pbartype2_upload == fileCounts) {pbartype2_upload = 0}
        } else if(type == 'upload' && status == 'fail'){
            jQuery(document.body).find('#uploading').css('width', '100%');
            jQuery(document.body).find('#uploading').removeClass('progress-bar-info');
            jQuery(document.body).find('#uploading').addClass('progress-bar-danger');
            jQuery(document.body).find('#percentage_uploading').html('upload falied');
            pbartype2_upload = 0;
        }

        if (type == 'connect' && status == 'fail') {           
            jQuery(document.body).find('#m' + mode + '_' + id).css('width', '100%');
            jQuery(document.body).find('#m' + mode + '_' + id).removeClass('progress-bar-success');
            jQuery(document.body).find('#m' + mode + '_' + id).addClass('progress-bar-danger');
            jQuery(document.body).find('#percentage_m' + mode + '_' + id).html('connection falied');
            pbartype2_fetch = 0;
        } else {
            if(type == 'fetch' && status == 'ok') {
                pbartype2_fetch++;
                var width = (pbartype2_fetch / (fileCounts + 1) * 100).toFixed(2);
                jQuery(document.body).find('#m' + mode + '_' + id).css('width', width + '%');
                jQuery(document.body).find('#percentage_m' + mode + '_' + id).html(width + '%');
                if(pbartype2_fetch == fileCounts) {pbartype2_fetch = 0}
            } else if(type == 'fetch' && status == 'fail'){
                jQuery(document.body).find('#m' + mode + '_' + id).removeClass('progress-bar-success');
                jQuery(document.body).find('#m' + mode + '_' + id).addClass('progress-bar-danger');
                pbartype2_fetch = 0;
            }
            if(type == 'finish' && status == 'ok') {
                jQuery(document.body).find('#m' + mode + '_' + id).css('width', '100%');
                jQuery(document.body).find('#percentage_m' + mode + '_' + id).html('100%');
                pbartype2_fetch = 0;
            } else if(type == 'finish' && status == 'fail'){
                jQuery(document.body).find('#m' + mode + '_' + id).removeClass('progress-bar-success');
                jQuery(document.body).find('#m' + mode + '_' + id).addClass('progress-bar-danger');
                pbartype2_fetch = 0;
            }
        }
    }

</script>
<style>
.select2-container--default{
    width:60% !important;
}
</style>
    
@endpush