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

@section('content')
<div class="splynx_top_nav">
    <div style="float: left">
        <ul class="splynx_breadcrumbs">
            <li><span>Customer / Lists</span></li>
        </ul>
    </div>
    <div class="clearfix"></div>
</div>
<div class="spl-page-panel">
    <div class="row">
        <div class="col-lg-12">
            Customer Lists
        </div>
    </div>
    <br>
    <div class="row">
        <div class="col-lg-12">
            <div class="p-3">
                <div class="container">
                    <input type="file" name="uploadFilesByIP[]" id="uploadFilesByIP" class="input-sm col-md-8" multiple>
                    <button type="buton" value="upload" class="btn btn-primary" id="upgrade_btn"
                        style="margin:5px;"> upgrade
                    </button>
                    <button type="buton" value="upload" class="btn btn-success" id="upload_btn"
                        style="margin:5px;"> upload
                    </button>
                </div>
                <div id="upload_bar_div">
                </div>
                <table id="custom_table" class="table table-striped table-bordered">
                    <thead>
                        <th>
                            <!-- <input name="select_all" value="1" id="example-select-all" type="checkbox" /> -->
                        </th>
                        <th>#</th>
                        <th>userName</th>
                        <th>Ip Address</th>
                        <th>Version</th>
                        <th>Architecture</th>
                        <th>Script Version</th>
                        <th style="width:50%">Action</th>
                    </thead>
                    <tbody>
                        @foreach ($customers as $key => $cus)

                        <tr>
                            <td><input type="checkbox" name="ip[]" value="{{$cus->ip_address}}"></td>
                            <td>{{$key+1}}</td>
                            <td>{{$cus->username}}</td>
                            <td>{{$cus->ip_address}}</td>
                            <td>{{$cus->version}}</td>
                            <td>{{$cus->architecture}}</td>
                            <td>{{$cus->script_version}}</td>
                            <td name="p_bar_td" ind="{{$key+1}}">
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('js')
<script>
function confirmDelete(route) {
    var result = confirm("Do you want to delete this?");
    // if (result) {
    //     location.href = route;
    // }
}

var table;
var fileCounts = 0;
$(document).ready(function() {
    // $('#custom_table').dataTable();
    table = $('#custom_table').DataTable({
        'columnDefs': [{
            'targets': 0,
            'searchable': false,
            'orderable': false,
            'className': 'dt-body-center',
        }],
        'order': [1, 'asc']
    });

    // Handle click on "Select all" control
    $('#example-select-all').on('click', function() {
        // Check/uncheck all checkboxes in the table
        var rows = table.rows({
            'search': 'applied'
        }).nodes();
        $('input[type="checkbox"]', rows).prop('checked', this.checked);
    });

    function commonForUpgradeAndUpload(flag) {
        event.preventDefault();
        var token = '{{ csrf_token()}}';
        var files = document.getElementById('uploadFilesByIP').files;

        if (files.length == 0) {
            alert('please select file');
            return;
        }
        // Iterate over all checkboxes in the table
        var ip_Arr = [];
        // Iterate over all checkboxes in the table
        var m = flag == 'upgrade' ? 'm4' : 'm3';
        table.$('input[type="checkbox"]').each(function(ele) {

            if (this.checked) {
                ip_Arr.push($(this).val());
                var r = $(this).val();
                var id = r.split('.').join('_');
                var p_bar_td = $(this).parent().parent().find('td:last');//[7];
                var client_bar = p_bar(r, m + '_' + id, 'success');
                table.$(p_bar_td).empty();
                table.$(p_bar_td).html(client_bar);
            }
        });
        
        var ips = ip_Arr.join(',');
        if (ips == '') {
            alert('please select clients');
            return;
        }

        var data = new FormData();
        var url = '';
        if (flag == 'upgrade') {
            data.append("routers", ips);
            var totalfiles = files.length;
            fileCounts = totalfiles;
            for (var index = 0; index < totalfiles; index++) {
                data.append("uploadFiles[]", files[index]);
            }
            url = "{{route('network.monitor.upload.reboot.byip')}}";
        } else if (flag == 'upload') {
            data.append("uploadFile", files[0]);
            data.append("addresses", ips);
            url = "{{route('network.monitor.upload.byip')}}";
        }
        data.append("_token", token);

        var upload_bar = p_bar('uploading', 'uploading', 'info');
        $('#upload_bar_div').empty();
        $('#upload_bar_div').html(upload_bar);

        if (url == '') return;

        $.ajax({
            data: data,
            type: "POST",
            url: url,
            cache: false,
            contentType: false,
            processData: false,
            success: function(res) {
                if (res == 'success') {

                    $('#upgrade_btn').attr('disabled', false);
                    $('#upload_btn').attr('disabled', false);
                    toastr.success('success');
                } else {

                    $('#upgrade_btn').attr('disabled', false);
                    $('#upload_btn').attr('disabled', false);
                    toastr.error('fail');
                }
            },
            error: function(err) {

                $('#upgrade_btn').attr('disabled', false);
                $('#upload_btn').attr('disabled', false);
                toastr.error('some error happens');
            }
        });


    }
    $('#upgrade_btn').click(function(event) {
        commonForUpgradeAndUpload('upgrade');
    });
    $('#upload_btn').click(function(event) {
        commonForUpgradeAndUpload('upload');
    });    
})

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>';
}
</script>

<script>

</script>
<script>
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;
    console.log(msg);

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

});

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') {
        
        table.$('#m' + mode + '_' + id).removeClass('progress-bar-success');
        table.$('#m' + mode + '_' + id).addClass('progress-bar-danger');
        table.$('#m' + mode + '_' + id).css('width', '100%');
        table.$('#percentage_m' + mode + '_' + id).html('connection falied');
    } else {
        if (type == 'fetch' && status == 'ok') {
            table.$('#m' + mode + '_' + id).css('width', '80%');
            table.$('#percentage_m' + mode + '_' + id).html('80%');
        } else if (type == 'fetch' && status == 'fail') {
            table.$('#m' + mode + '_' + id).css('width', '80%');
            table.$('#m' + mode + '_' + id).removeClass('progress-bar-info');
            table.$('#m' + mode + '_' + id).addClass('progress-bar-danger');
        }
        if (type == 'finish' && status == 'ok') {
            table.$('#m' + mode + '_' + id).css('width', '100%');
            jQuery(document.body).find('#percentage_m' + mode + '_' + id).html('100%');
        } else if (type == 'finish' && status == 'fail') {
            table.$('#m' + mode + '_' + id).css('width', '100%');
            table.$('#m' + mode + '_' + id).removeClass('progress-bar-info');
            table.$('#m' + mode + '_' + id).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') {
        table.$('#m' + mode + '_' + id).css('width', '100%');
        table.$('#m' + mode + '_' + id).removeClass('progress-bar-success');
        table.$('#m' + mode + '_' + id).addClass('progress-bar-danger');
        table.$('#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);
            table.$('#m' + mode + '_' + id).css('width', width + '%');
            table.$('#percentage_m' + mode + '_' + id).html(width + '%');
            if (pbartype2_fetch == fileCounts) {
                pbartype2_fetch = 0
            }
        } else if (type == 'fetch' && status == 'fail') {
            table.$('#m' + mode + '_' + id).removeClass('progress-bar-success');
            table.$('#m' + mode + '_' + id).addClass('progress-bar-danger');
            pbartype2_fetch = 0;
        }
        if (type == 'finish' && status == 'ok') {
            table.$('#m' + mode + '_' + id).css('width', '100%');
            table.$('#percentage_m' + mode + '_' + id).html('100%');
            pbartype2_fetch = 0;
        } else if (type == 'finish' && status == 'fail') {
            table.$('#m' + mode + '_' + id).removeClass('progress-bar-success');
            table.$('#m' + mode + '_' + id).addClass('progress-bar-danger');
            pbartype2_fetch = 0;
        }
    }
}
</script>

@endpush