@extends('frontend.master')
@section('title', 'Internet Speed Test Results History')
@section('description', 'View your broadband speed results of each test for a specific location. Speed test history is visualized on a map. Keep track of your internet connection through a  speed test report.')
@section('content')
<div class='main-content'>
	<link rel="stylesheet" href="https://cdn.datatables.net/v/bs4/dt-1.10.16/datatables.min.css"/>
	<link href="/frontend/css/bootstrap-datepicker.min.css" rel="stylesheet" />
	<script src="/frontend/js/bootstrap-datepicker.min.js"></script>
	<script src="https://cdn.datatables.net/v/bs4/dt-1.10.16/datatables.min.js"></script>
	<script src="https://cdn.datatables.net/plug-ins/1.10.16/api/fnReloadAjax.js"></script>
	<script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
	<script src="https://cdn.datatables.net/rowreorder/1.2.6/js/dataTables.rowReorder.min.js"></script>
	<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.bootstrap.min.css"/>
    <div class="background-result">
        @include('frontend.layouts.ads.banner-1')
        @include('frontend.layouts.components.breadcrumb', $breadcrumb = [ 0 => ["link"=>"#", "name"=>__('messages.result_history')] ])
        <h1 class="text-center bold">View your internet speed test history</h1>
        <div style="height:50px"></div>
        <div class="row">
            <div class="col-lg-8">
                <div class="row">
                    <div class="col-sm-12 col-12">
                        <div class="host-since">
                            <span class='bold total-result'>{{ __('messages.showing') }} {{ $totalResult }} {{ __('messages.result_from') }}:</span>
                            <span class="result-host make-color">{{ $hosts }} {{ __('messages.hosts') }} </span><span class="time-sine-all">( {{ __('messages.since') }} <span class="time-sine"></span> )</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="popup-filter">
                    <button type="button" class="btn-customize btn-popup-filter" data-toggle="modal" data-target="#exampleModalCenter1">
                        {{ __('messages.filter_result') }}
                    </button>
                </div>
            </div>
        </div>
        <div style="height:30px"></div>
		<div class="float-left">
            <button type="button" class="btn-customize btn-result-download active-unit-btn">
                <i class="fas fa-download"></i> {{ __('messages.download') }}
            </button>
            <button type="button" class="btn-customize btn-result-upload">
                <i class="fas fa-upload"></i> {{ __('messages.upload') }}
            </button>
        </div>
        @if (!\App\Helpers\Helper::isMobile())
        <div class="float-right result-download" style="margin-top: 6px;">
            <span class='bold'>{{ __('messages.best_result') }} </span>
            <img class="lazy" data-src="/frontend/images/ic_download_resultdownload.svg" alt="ic_download_resultdownload">&nbsp;<span class="best-download" style="color:#00e1ff"></span>&nbsp;<span class="kbps-mbps-result" style="color:#00e1ff"></span>
            <img class="lazy" data-src="/frontend/images/ic_upload_resultdownload.svg" alt="ic_upload_resultdownload">&nbsp;<span class="best-upload" style="color:#00e1ff"></span>&nbsp;<span class="kbps-mbps-result" style="color:#00e1ff"></span>
        </div>
        @else
        <br> <br>
        <div class="text-center result-download" style="margin-top: 6px;">
            <span class='bold'>{{ __('messages.best_result') }} </span>
            <img class="lazy" data-src="/frontend/images/ic_download_resultdownload.svg" alt="ic_download_resultdownload">&nbsp;<span class="best-download" style="color:#00e1ff"></span>&nbsp;<span class="kbps-mbps-result" style="color:#00e1ff"></span>
            <img class="lazy" data-src="/frontend/images/ic_upload_resultdownload.svg" alt="ic_upload_resultdownload">&nbsp;<span class="best-upload" style="color:#00e1ff"></span>&nbsp;<span class="kbps-mbps-result" style="color:#00e1ff"></span>
        </div>
        @endif
        <div style="height:60px" class='d-none d-lg-block'></div>
		<div style="height:30px" class='d-lg-none'></div>
        <script src="{{ url('/') }}/frontend/js/highcharts.js"></script>
        <!-- <script src="https://code.highcharts.com/modules/series-label.js"></script> -->
        <!-- <script src="https://code.highcharts.com/modules/exporting.js"></script> -->
        <!-- <script src="https://code.highcharts.com/modules/export-data.js"></script>
        <script src="https://code.highcharts.com/modules/accessibility.js"></script> -->
        <figure class="highcharts-figure">
            <div id="container"></div>
        </figure>
        <div style="width:100%;height:24px;">
            <p class="float-left kbps-mbps-result"></p>
            <!-- <p class="float-right">Avg upload</p> -->
        </div>
        <!-- <div class="float-right" style="width: 100%;height: 24px;margin-top: -15px;">
            <p class="float-right">US avg upload</p>
        </div> -->
        <div style="height:60px" class='d-none d-lg-block'></div>
		<div style="height:30px" class='d-lg-none'></div>
        <h3 class="text-center bold">{{ __('messages.individual_results') }}</h3>
        <div style="height:60px"></div>
        <div class="row">
            <table class="table table-bordered" id="rechargeLogs">
                <thead class="thead-custom">
                    <tr>
                        <th scope="col" style="width: 100px;"><span class="make-color-1">{{ __('messages.date_of_payment') }}</span></th>
                        <th scope="col"><span class="make-color-1">{{ __('messages.ping') }}<br>ms</span></th>
                        <th scope="col"><span class="make-color-1">{{ __('messages.download') }}<br><span class="kbps-mbps-result"></span></span></th>
                        <th scope="col"><span class="make-color-1">{{ __('messages.upload') }}<br><span class="kbps-mbps-result"></span></span></th>
                        <th scope="col"><span class="make-color-1">{{ __('messages.distance') }}<br><span class="km-m-result"></span></span></th>
                        <th scope="col" style="width: 250px;"><span class="make-color-1">{{ __('messages.location_server') }}</span></th>
                        <th scope="col"><span class="make-color-1">{{ __('messages.provider') }}</span></th>
                        <th scope="col"></th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
        <div style="height:30px"></div>
        <div class="text-center">
            <button type="button" class="btn-customize btn-export-csv">{{ __('messages.export_results') }}</button>
        </div>
        <div class="col-12">@include('frontend.layouts.ads.banner-2')</div>
        <div class="modal fade" id="exampleModalCenter1" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document" style="color:black">
                <div class="modal-content">
					<div class="modal-body">
						<div class="row">
							<div class="col-sm-12">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close">
								<span aria-hidden="true">&times;</span>
								</button>
							</div>
							<div class="col-sm-8 offset-sm-2" style="margin-bottom:15px">
								<h3 class="float-left"> {{ __('messages.filter_by_date') }}</h3>
								<input type="text" class="form-control pull-right" id="addStuDob" autocomplete="off"  name="dob">

							</div>
							<div class="col-sm-8 offset-sm-2" style="margin-bottom:15px">
								<h3 class="float-left"> {{ __('messages.filter_by_connection') }}</h3>
							</div>
							<div class="col-sm-8 offset-sm-2 list-ip" style="margin-bottom:15px">
								<select class="form-control ip">
									<option value="">{{ __('messages.all') }}</option>
									@foreach ($ip as $value)
										<option value="{{ $value->ip }}">{{ $value->ip }}</option>
									@endforeach
								</select>
							</div>
							<div class="col-sm-8 offset-sm-2" style="margin-bottom:15px">
								<h3 class="float-left"> {{ __('messages.filter_by_servers') }}</h3>
							</div>
							<div class="col-sm-8 offset-sm-2 list-sponsor" style="margin-bottom:15px">
								<select class="form-control sponsor">
									<option value="">{{ __('messages.all') }}</option>
									@foreach ($sponsor as $value)
										<option value="{{ $value->sponsor }}">{{ $value->sponsor }}</option>
									@endforeach
								</select>
							</div>
							<div class="col-sm-8 offset-sm-2" style="margin-bottom:15px">
								<button type="button" class="btn btn-primary btn-filter">{{ __('messages.ok') }}</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		@include('frontend.layouts.home-share')
	</div>
    <style>
        .highcharts-figure, .highcharts-data-table table {
            min-width: 250px;
            max-width: 1265px;
            margin: 1em auto;
        }

        .highcharts-background {
            fill: #000928;
            /* stroke: #a4edba; */
            stroke-width: 2px;
        }

        .highcharts-credits{
            display: none;
        }

        .highcharts-a11y-proxy-button{
            display: none !important;
        }
        /* #rechargeLogs_wrapper table{border: 1px solid #748396;}
        #rechargeLogs_wrapper .thead-custom tr th{border: 1px solid #748396;}
        #rechargeLogs_wrapper tbody tr td{border: 1px solid #748396;}
        .paging_simple_numbers ul li a {border: 1px solid #748396;}
        #rechargeLogs_previous a {border: 1px solid #748396;} */
    </style>
    <script>
		var setting_obj = {
			'unit-time-layout': '12h',
			'unit-date-layout': 'mm/dd/yyyy',
			'unit-distance-layout': 'kilometers',
			'unit-speed-layout': 'Mbps',
			'unit-server-layout': 0,
        };
        var array_download = null;
        var createdAt = null;
        var data_result = null;
        var data_filter;

        var dataTable               = null;
        var roleCheckList           = [];
        var curr_role_name          = '';
        var curr_permission_list    = '';
        var current_page            = 0;
        var old_search              = '';

        function read_setting_unit(){
			for(var key in setting_obj){
				var cookie_setting_value = Cookies.get('cookie_common_' + key);
				if(cookie_setting_value){
					setting_obj[key] = cookie_setting_value;
				}
			}
		}
        function showBestResult(download, upload){
            if(setting_obj['unit-speed-layout'] == 'Kbps'){
                $('.best-download').html(formatSpeedUnit(download));
                $('.best-upload').html(formatSpeedUnit(upload));
            }
            else{
                $('.best-download').html(convertKBpsToMBps(download));
                $('.best-upload').html(convertKBpsToMBps(upload));
            }
        }
		function convertMBtoBit(number){
			return number*1000*1000*8;
		}
		function convertMBtoByte(number){
			return number*1000*1000;
		}
		function convertSpeedBpsToKBps(number){
			return number / 1000;
		}
		function convertByteToBit(number){
			return number*8;
		}
		function convertKBpsToMBps(number){
			return number / 1000;
		}
		function formatSpeedUnit(number){
			if(number >= 10){
				return number.toFixed(0);
			}else{
				return number.toFixed(2);
			}
        }
        function formatSpeedUnitMBit(number){
			return number.toFixed(3);
		}
        function formatDateTimeSine(date){
            var date = new Date(date*1000);
            var convert;
            if(setting_obj['unit-date-layout'] == 'mm/dd/yyyy'){
                convert = $.format.date(date, 'MM/dd/yyyy');
            }
            if(setting_obj['unit-date-layout'] == 'dd.mm.yyyy'){
                convert = $.format.date(date, 'dd.MM.yyyy');
            }
            if(setting_obj['unit-date-layout'] == 'yyyy-mm-dd'){
                convert = $.format.date(date, 'yyyy-MM-dd');
            }
            $('.time-sine').html(convert);
            console.log(convert);
        }
        function formatDateTimeTable(date){
            var date = new Date(date*1000)
            var convert;

            if(setting_obj['unit-time-layout'] == '12h'){
                if(setting_obj['unit-date-layout'] == 'mm/dd/yyyy'){
                    convert = $.format.date(date, 'MM/dd/yyyy hh:mm:ss a');
                    return convert;
                }
                if(setting_obj['unit-date-layout'] == 'dd.mm.yyyy'){
                    convert = $.format.date(date, 'dd.MM.yyyy hh:mm:ss a');
                    return convert;
                }
                if(setting_obj['unit-date-layout'] == 'yyyy-mm-dd'){
                    convert = $.format.date(date, 'yyyy-MM-dd hh:mm:ss a');
                    return convert;
                }
            }
            else{
                if(setting_obj['unit-date-layout'] == 'mm/dd/yyyy'){
                    convert = $.format.date(date, 'MM/dd/yyyy HH:mm:ss');
                    return convert;
                }
                if(setting_obj['unit-date-layout'] == 'dd.mm.yyyy'){
                    convert = $.format.date(date, 'dd.MM.yyyy HH:mm:ss');
                    return convert;
                }
                if(setting_obj['unit-date-layout'] == 'yyyy-mm-dd'){
                    convert = $.format.date(date, 'yyyy-MM-dd HH:mm:ss');
                    return convert;
                }
            }
        }
        function showDownloadTable(download){
            if(setting_obj['unit-speed-layout'] == 'Kbps'){
                return formatSpeedUnit(parseInt(download));
            }
            else{
                return convertKBpsToMBps(download);
            }
        }
        function showUploadTable(upload){
            if(setting_obj['unit-speed-layout'] == 'Kbps'){
                return formatSpeedUnit(parseInt(upload));
            }
            else{
                return convertKBpsToMBps(upload);
            }
        }
        function convertKmToM(number){
            if(setting_obj['unit-distance-layout'] == 'miles'){
                return (number * 0.62).toFixed(2);
            }
            else{
                return number;
            }
        }

        function showDateTimeChart(created){
            var a = [];
            created.forEach(function(value) {
                var date = new Date(value*1000)
                var convert;
                if(setting_obj['unit-time-layout'] == '12h'){
                    if(setting_obj['unit-date-layout'] == 'mm/dd/yyyy'){
                        convert = $.format.date(date, 'MM/dd/yyyy hh:mm:ss a');
                        a.push(convert);
                    }
                    if(setting_obj['unit-date-layout'] == 'dd.mm.yyyy'){
                        convert = $.format.date(date, 'dd.MM.yyyy hh:mm:ss a');
                        a.push(convert);
                    }
                    if(setting_obj['unit-date-layout'] == 'yyyy-mm-dd'){
                        convert = $.format.date(date, 'yyyy-MM-dd hh:mm:ss a');
                        a.push(convert);
                    }
                }
                else{
                    if(setting_obj['unit-date-layout'] == 'mm/dd/yyyy'){
                        convert = $.format.date(date, 'MM/dd/yyyy HH:mm:ss');
                        a.push(convert);
                    }
                    if(setting_obj['unit-date-layout'] == 'dd.mm.yyyy'){
                        convert = $.format.date(date, 'dd.MM.yyyy HH:mm:ss');
                        a.push(convert);
                    }
                    if(setting_obj['unit-date-layout'] == 'yyyy-mm-dd'){
                        convert = $.format.date(date, 'yyyy-MM-dd HH:mm:ss');
                        a.push(convert);
                    }
                }
            });
            return a;
        }
        function showDownloadUploadChart(download){
            var a = [];
            if(setting_obj['unit-speed-layout'] == 'Kbps'){
                download.forEach(function(value) {
                    a.push(parseInt(formatSpeedUnit(value)));
                });
            }
            else{
                download.forEach(function(value) {
                    a.push(parseFloat(convertKBpsToMBps(value)));
                });
            }
            return a;
        }
        function convertArrayOfObjectsToCSV(args) {
            var result, ctr, keys, columnDelimiter, lineDelimiter, data;

            data = args.data || null;
            if (data == null || !data.length) {
            return null;
            }

            columnDelimiter = args.columnDelimiter || ',';
            lineDelimiter = args.lineDelimiter || '\n';

            keys = Object.keys(data[0]);

            result = '';
            result += keys.join(columnDelimiter);
            result += lineDelimiter;

            data.forEach(function(item) {
                ctr = 0;
                keys.forEach(function(key) {
                    if (ctr > 0) result += columnDelimiter;

                    if(!isNaN(item[key])){
                        result += item[key];
                    }else{
                        result += '"' + item[key] + '"';
                    }

                    ctr++;
                });
                result += lineDelimiter;
            });

            return result;
        }
        function hight_chart(data, categories){
            chart = Highcharts.chart('container', {
                chart: {
                    type: 'areaspline'
                },
                title: {
                    text: ''
                },

                // subtitle: {
                //     text: 'Source: thesolarfoundation.com'
                // },

                yAxis: {
                    title: {
                        text: ''
                    },
                    gridLineDashStyle: 'longdash',
                    gridLineColor: '#58617f',
                    labels: {
                    style: {
                        color: '#fff'
                    }
                }
                },

                xAxis: {
                    categories: categories,
                    title: {
                        text: ''
                    },
                    labels: {
                        enabled:false,
                        y : 20,
                        rotation: -45,
                        align: 'right'
                    },
                    lineColor: '#58617f'
                },

                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    enabled: false
                },

                // plotOptions: {
                //     series: {
                //         label: {
                //             connectorAllowed: false
                //         },
                //         pointStart: 2010
                //     }
                // },
                plotOptions: {
                    areaspline: {
                        fillOpacity: 0.5
                    }
                },

                series: [{
                    name: "{{ __('messages.check_speed') }}",
                    marker: {
                        radius: 7
                    },
                    data: data,
                    lineWidth: 1,
                }],

                responsive: {
                    rules: [{
                        condition: {
                            maxWidth: 500
                        },
                        chartOptions: {
                            legend: {
                                layout: 'horizontal',
                                align: 'center',
                                verticalAlign: 'bottom'
                            }
                        }
                    }]
                }
            });
        }

		$( document ).ready(function() {
			read_setting_unit();
			var format_date = '';
			if(setting_obj['unit-date-layout'] == 'mm/dd/yyyy'){
				format_date = 'mm/dd/yyyy';
			}
			if(setting_obj['unit-date-layout'] == 'dd.mm.yyyy'){
				format_date = 'dd.mm.yyyy';
			}
			if(setting_obj['unit-date-layout'] == 'yyyy-mm-dd'){
				format_date = 'yyyy-mm-dd';
			}
			$.fn.datepicker.dates['en'] = {
				days: ["{{ __('messages.dp_sunday') }}", "{{ __('messages.dp_monday') }}", "{{ __('messages.dp_tuesday') }}", "{{ __('messages.dp_wednesday') }}", "{{ __('messages.dp_thursday') }}", "{{ __('messages.dp_friday') }}", "{{ __('messages.dp_saturday') }}"],
				daysShort: ["{{ __('messages.dp_sun') }}", "{{ __('messages.dp_mon') }}", "{{ __('messages.dp_tue') }}", "{{ __('messages.dp_wed') }}", "{{ __('messages.dp_thu') }}", "{{ __('messages.dp_fri') }}", "{{ __('messages.dp_sat') }}"],
				daysMin: ["{{ __('messages.dp_su') }}", "{{ __('messages.dp_mo') }}", "{{ __('messages.dp_tu') }}", "{{ __('messages.dp_we') }}", "{{ __('messages.dp_th') }}", "{{ __('messages.dp_fr') }}", "{{ __('messages.dp_sa') }}"],
				months: ["{{ __('messages.dp_january') }}", "{{ __('messages.dp_february') }}", "{{ __('messages.dp_march') }}", "{{ __('messages.dp_april') }}", "{{ __('messages.dp_may') }}", "{{ __('messages.dp_june') }}", "{{ __('messages.dp_july') }}", "{{ __('messages.dp_august') }}", "{{ __('messages.dp_september') }}", "{{ __('messages.dp_october') }}", "{{ __('messages.dp_november') }}", "{{ __('messages.dp_december') }}"],
				monthsShort: ["{{ __('messages.dp_jan') }}", "{{ __('messages.dp_feb') }}", "{{ __('messages.dp_mar') }}", "{{ __('messages.dp_apr') }}", "{{ __('messages.dp_smay') }}", "{{ __('messages.dp_jun') }}", "{{ __('messages.dp_jul') }}", "{{ __('messages.dp_aug') }}", "{{ __('messages.dp_sep') }}", "{{ __('messages.dp_oct') }}", "{{ __('messages.dp_nov') }}", "{{ __('messages.dp_dec') }}"],
				today: "{{ __('messages.dp_today') }}",
				clear: "{{ __('messages.dp_clear') }}",
				format: "mm/dd/yyyy",
				titleFormat: "MM yyyy",
				weekStart: 0
			};
			$('#addStuDob').datepicker({
				autoclose: true,
				format: format_date,
				endDate: new Date(),
				startDate: '01/01/1950',
				assumeNearbyYear: true,
			})

			showDownloadUploadChart(array_download);
			hight_chart(showDownloadUploadChart(array_download), showDateTimeChart(createdAt));

			$('.kbps-mbps-result').html(setting_obj['unit-speed-layout']);

            $('.km-m-result').html(setting_obj['unit-distance-layout'] == 'kilometers' ? "{{ __('messages.kilometers') }}" : "{{ __('messages.miles') }}");

            var bestDownload = null;
            var bestUpload = null;
            var firstTime = null;
            showBestResult(bestDownload, bestUpload);
            formatDateTimeSine(firstTime);

            var dataObject = [
                {
                    data: "created_at",
                    class: "text-center",
                    render: function(data, type, row){
                        var html = '';
                        var timeTable = formatDateTimeTable(row.created_at);
                        html += '<p>' +  timeTable + '</p>';
                        return html;
                    },
                    // orderable: false
                },
                {
                    data: "ping",
                    class: "text-center",
                },
                {
                    data: "download",
                    class: "text-center",
                    render: function(data, type, row){
                        var html = '';
                        var download = showDownloadTable(row.download);
                        html += '<p>' +  download + '</p>';
                        return html;
                    },
                },
                {
                    data: "upload",
                    class: "text-center",
                    render: function(data, type, row){
                        var html = '';
                        var upload = showDownloadTable(row.upload);
                        html += '<p>' +  upload + '</p>';
                        return html;
                    },
                },
                {
                    data: "distance",
                    class: "text-center",
                    render: function(data, type, row){
                        var html = '';
                        var distance = convertKmToM(row.distance);
                        html += '<p>' +  distance + '</p>';
                        return html;
                    },
                },
                {
                    data: "sponsor",
                    // class: "text-center",
                    render: function(data, type, row){
                        var html = '';
                        html += '<p style="margin-bottom:0px">' + row.sponsor + '</p>'
                        return html;
                    },
                    // orderable: false
                },
                {
                    data: "action",
                    // class: "text-center",
                    render: function(data, type, row){
                        var html = '';
                        html += '<p style="margin-bottom:0px">' + row.host_name + '</p>'
                        html += '<p style="margin-bottom:0px">' + row.ip + '</p>'
                        return html;
                    },
                    orderable: false
                },
                {
                    data: "action",
                    // class: "text-center",
                    render: function(data, type, row){
                        var html = '';
                        var share_url = '{{ $url_link }}?id=' + data;
                        html += '<div class="social-network-1">'
							html += '<span class="social-network-2" data-url="' + share_url + '" title="{{ __('messages.share') }}">';
								html += '<a><i class="fas fa-share-alt fa-lg" ></i></a>';
							html += '</span>';
							html += '<a class="btn-delete" data-id="'+data+'" title="{{ __('messages.delete_btn') }}"><img class=" btn-customize-1" src="/frontend/images/ic_delete.svg" alt="ic_delete"></a>';
                        html += '</div>'
                        // html += '<a href="' + baseURL + '/admincp/payment-logs/'+ data +'/edit" class="btn-edit mr-2 edit-user" title="Sửa"><i class="fa fa-edit"></i></a>';

                        return html;
                    },
                    orderable: false
                },
            ];

            dataTable = $('#rechargeLogs').DataTable({
                serverSide: true,
                search: {
                    smart: false
                },
                searching: false,
                aaSorting: [],
                stateSave: false,
                // columnDefs: [{ 'targets': 0, type: 'date-euro' }],
                // order: [[ 1, 'desc' ]],
                search: {
                    smart: false
                },
                ajax: "{{ url('ajax/get-gauge-logs') }}",
                columns: dataObject,
                order: [[ 0, "desc" ]],
                bLengthChange: false,
                pageLength: 10,
                colReorder: {
                    fixedColumnsRight: 1,
                    fixedColumnsLeft: 1
                },
                oLanguage: {
                    sSearch: "{{ __('messages.search') }}",
                    sLengthMenu: "{{ __('messages.show') }} _MENU_ {{ __('messages.entries') }}",
                    // zeroRecords: "Không tìm thấy bản ghi",
                    sInfo: "{{ __('messages.history_showing') }}  _START_ - _END_ /_TOTAL_ {{ __('messages.history_entries') }}",
                    sInfoFiltered: "",
                    sInfoEmpty: "",
                    sZeroRecords: "{{ __('messages.no_search_results_found') }}",
                    sEmptyTable: "{{ __('messages.no_transactions_yet') }}",
                    oPaginate: {
                        sPrevious: "<",
                        sNext: ">",

                    },
                },
                createdRow: function(row, data, dataIndex) {
                    $(row).addClass('make-color-1');
                },
                fnServerParams: function(aoData) {
                    aoData.time = $('#addStuDob').val();
                    aoData.ip = $( "select.ip" ).val();
                    aoData.sponsor = $( "select.sponsor" ).val();
                },
                fnDrawCallback: function(oSettings) {
                    addEventListener();
                },
                "info":false
            });

            function addEventListener(){

				$('.social-network-2').click(function(){
					var cur_share_url = $(this).attr('data-url');
					$(".st-custom-button").attr('data-url', cur_share_url);
					$('#socialModal').modal('show');
				});
				$('.btn-delete').off('click');

				// window.__sharethis__.initialize();
                $('.btn-delete').off('click');

                $('.btn-delete').click(function(){
                    var id      = $(this).attr('data-id');
                    Swal.fire({
                        type: 'warning',
                        text: '{{ __('messages.are_you_sure_you_want_to_permanently_delete_this_history') }}',
                        confirmButtonText: "{{ __('messages.confirm_text_ok') }}",
                        cancelButtonText: "{{ __('messages.confirm_text_cancel') }}",
                        showCancelButton: true,
                    }).then((result)=>{
                        if(result.value){
                            $.ajaxSetup({
                                headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                }
                            });
                            $.ajax({
                                url: "{{ url('ajax/delete-history')}}",
                                data: {
                                    id : id,
                                },
                                method: "DELETE",
                                dataType:'json',
                                success: function (response) {
                                    if(response.status == 200){
                                        dataTable.ajax.reload();
                                        // Swal.fire({
                                        //     type: 'success',
                                        //     text: '{{ __('messages.delete_success') }}'
                                        // }).then(result =>{
                                            // location.reload()
                                        // })
                                        if(localStorage.getItem("time") != ''){
                                            if(setting_obj['unit-date-layout'] == 'mm/dd/yyyy'){
                                                var dt = new Date(localStorage.getItem("time"));
                                                dt = $.format.date(dt, 'dd.MM.yyyy');
                                                var data = {
                                                    time : dt,
                                                    ip : localStorage.getItem("ip"),
                                                    sponsor : localStorage.getItem("sponsor")
                                                };
                                            } else{
                                                var data = {
                                                    time : localStorage.getItem("time"),
                                                    ip : localStorage.getItem("ip"),
                                                    sponsor : localStorage.getItem("sponsor")
                                                };
                                            }
                                        } else{
                                            var data = {
                                                time : localStorage.getItem("time"),
                                                ip : localStorage.getItem("ip"),
                                                sponsor : localStorage.getItem("sponsor")
                                            };
                                        }
                                        $.ajaxSetup({
                                            headers:
                                                {
                                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                                }
                                        });
                                        $.ajax({
                                            method : "POST",
                                            url : "{{ url('ajax/filter-ajax') }}",
                                            data : data,
                                            dataType : 'json',
                                            beforeSend: function(r, a){
                                                $(".ajax_waiting").addClass("loading");
                                            },
                                            complete: function(r, a){
                                                $(".ajax_waiting").removeClass("loading");
                                            },
                                            success: function (response) {
                                                if(response.status == 200){
                                                    localStorage.setItem("time", $('#addStuDob').val());
                                                    localStorage.setItem("ip", $( "select.ip" ).val());
                                                    localStorage.setItem("sponsor", $( "select.sponsor" ).val());
                                                    $('.close').click();
                                                    $('.total-result').text("{{ __('messages.showing') }} " + response.totalResult + " {{ __('messages.result_from') }}" + ":");
                                                    $('.result-host').text(response.hosts + " {{ __('messages.hosts') }} ");
                                                    formatDateTimeSine(response.timeFirst);
                                                    showBestResult(response.bestDownload, response.bestUpload);
                                                    dataTable.draw();
                                                    flag = 1;
                                                    $( ".btn-result-upload" ).removeClass( "active-unit-btn" );
                                                    $( ".btn-result-download" ).addClass( "active-unit-btn" );
                                                    array_filter_download = showDownloadUploadChart(response.arrayDownload);
                                                    array_filter_upload = showDownloadUploadChart(response.arrayUpload);
                                                    created_at_filter = showDateTimeChart(response.createdAt);
                                                    data_filter = response.filter;
                                                    chart.destroy();
                                                    hight_chart(array_filter_download, created_at_filter);
                                                }
                                                else{
                                                    if(response.dateDelete.length = 0){
                                                        window.location.href = "{{ $url_link }}/result";
                                                    } else{
                                                        window.location.href = "{{ $url_link }}/result";
                                                    }
                                                }
                                            },
                                        });
                                    }else{
                                        Swal.fire({
                                            type: 'warning',
                                            text: '{{ __('messages.delete_error') }}'
                                        })
                                    }

                                },
                                error: function (data) {
                                    if(data.status == 401){
                                    window.location.replace(baseURL);
                                    }else{
                                        Swal.fire({
                                            type: 'warning',
                                            text: '{{ __('messages.error') }}'
                                        })
                                    }
                                }
                            })
                        }
                    })
                });
            }

            $('input[type=search]').on('keypress', function(e) {
                if(e.keyCode == 13) {
                    // document.activeElement.blur();
                    event.preventDefault();
                    event.target.blur()
                }
            });
            $('.btn-result-upload').off('click');
			$('.btn-result-upload').click(function(){
                if(flag == 1){
                    $( ".btn-result-download" ).removeClass("active-unit-btn");
                    $( ".btn-result-upload" ).addClass("active-unit-btn");
                    chart.destroy();
                    hight_chart(array_filter_upload, created_at_filter);
                }
                else{
                    $( ".btn-result-download" ).removeClass("active-unit-btn");
                    $( ".btn-result-upload" ).addClass("active-unit-btn");
                    $.ajaxSetup({
                        headers:
                            {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            }
                    });
                    $.ajax({
                        method : "POST",
                        url : "{{ url('ajax/result-upload-ajax') }}",
                        data : '',
                        dataType : 'json',
                        beforeSend: function(r, a){
                            $(".ajax_waiting").addClass("loading");
                        },
                        complete: function(r, a){
                            $(".ajax_waiting").removeClass("loading");
                        },
                        success: function (response) {
                            if(response.status == 200){
                                var array_upload = response.arrayUpload;
                                chart.destroy();
                                showDownloadUploadChart(array_upload);
                                hight_chart(showDownloadUploadChart(array_upload), showDateTimeChart(createdAt));
                            }
                        },
                    });
                }
            });
            $('.btn-result-download').off('click');
			$('.btn-result-download').click(function(){
                if(flag == 1){
                    $( ".btn-result-upload" ).removeClass("active-unit-btn");
                    $( ".btn-result-download" ).addClass("active-unit-btn");
                    chart.destroy();
                    hight_chart(array_filter_download, created_at_filter);
                }
                else{
                    $( ".btn-result-upload" ).removeClass("active-unit-btn");
                    $( ".btn-result-download" ).addClass("active-unit-btn");
                    $.ajaxSetup({
                        headers:
                            {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            }
                    });
                    $.ajax({
                        method : "POST",
                        url : "{{ url('ajax/result-download-ajax') }}",
                        data : '',
                        dataType : 'json',
                        beforeSend: function(r, a){
                            $(".ajax_waiting").addClass("loading");
                        },
                        complete: function(r, a){
                            $(".ajax_waiting").removeClass("loading");
                        },
                        success: function (response) {
                            if(response.status == 200){
                                var array_download = response.arrayDownload;
                                chart.destroy();
                                showDownloadUploadChart(array_download);
                                hight_chart(showDownloadUploadChart(array_download), showDateTimeChart(createdAt))
                            }
                        },
                    });
                }
            })

            var flag=0;
            var array_filter_upload;
            var array_filter_download;
            var created_at_filter;
            localStorage.setItem("time", '');
            localStorage.setItem("ip", '');
            localStorage.setItem("sponsor", '');
            $('.btn-popup-filter').click(function(){
                $('#addStuDob').val(localStorage.getItem("time"));
                $('select.ip').val(localStorage.getItem("ip"));
                $('select.sponsor').val(localStorage.getItem("sponsor"));
            })
            $('.btn-filter').click(function(){
                if($('#addStuDob').val() != ''){
                    if(setting_obj['unit-date-layout'] == 'mm/dd/yyyy'){
                        var dt = new Date($('#addStuDob').val());
                        dt = $.format.date(dt, 'dd.MM.yyyy');
                        var data = {
                            time : dt,
                            ip : $( "select.ip" ).val(),
                            sponsor : $( "select.sponsor" ).val()
                        };
                    } else{
                        var data = {
                            time : $('#addStuDob').val(),
                            ip : $( "select.ip" ).val(),
                            sponsor : $( "select.sponsor" ).val()
                        };
                    }
                } else{
                    var data = {
                        time : $('#addStuDob').val(),
                        ip : $( "select.ip" ).val(),
                        sponsor : $( "select.sponsor" ).val()
                    };
                }
                $.ajaxSetup({
                    headers:
                        {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                });
                $.ajax({
                    method : "POST",
                    url : "{{ url('ajax/filter-ajax') }}",
                    data : data,
                    dataType : 'json',
                    beforeSend: function(r, a){
                        $(".ajax_waiting").addClass("loading");
                    },
                    complete: function(r, a){
                        $(".ajax_waiting").removeClass("loading");
                    },
                    success: function (response) {
                        if(response.status == 200){
                            localStorage.setItem("time", $('#addStuDob').val());
                            localStorage.setItem("ip", $( "select.ip" ).val());
                            localStorage.setItem("sponsor", $( "select.sponsor" ).val());
                            $('.close').click();
                            $('.total-result').text("{{ __('messages.showing') }} " + response.totalResult + " {{ __('messages.result_from') }}" + ":");
                            $('.result-host').text(response.hosts + " {{ __('messages.hosts') }} ");
                            formatDateTimeSine(response.timeFirst);
                            showBestResult(response.bestDownload, response.bestUpload);
                            dataTable.draw();
                            flag = 1;
                            $( ".btn-result-upload" ).removeClass( "active-unit-btn" );
                            $( ".btn-result-download" ).addClass( "active-unit-btn" );
                            array_filter_download = showDownloadUploadChart(response.arrayDownload);
                            array_filter_upload = showDownloadUploadChart(response.arrayUpload);
                            created_at_filter = showDateTimeChart(response.createdAt);
                            data_filter = response.filter;
                            chart.destroy();
                            hight_chart(array_filter_download, created_at_filter);
                        }
                        else{
                            Swal.fire({
                                type: 'warning',
                                text: '{{ __('messages.no_result') }}',
                                confirmButtonText: "{{ __('messages.confirm_text_ok') }}",
                            }).then((result) => {
                            });
                        }
                    },
                });
            })
			$('.btn-export-csv').click(function(args){
                var data, filename, link;
                var b = [];
                if(flag == 1) {
                    data_filter.forEach(function(value) {
                        value.distance = convertKmToM(value.distance);
                        value.download = showDownloadTable(value.download);
                        value.upload = showUploadTable(value.upload);
                        value.created_at = formatDateTimeTable(value.created_at);
                        b.push(value);
                    });
                } else{
                    data_result.forEach(function(value) {
                        value.distance = convertKmToM(value.distance);
                        value.download = showDownloadTable(value.download);
                        value.upload = showUploadTable(value.upload);
                        value.created_at = formatDateTimeTable(value.created_at);
                        b.push(value);
                    });
                }
                var csv = convertArrayOfObjectsToCSV({
                data: b
                });
                if (csv == null) return;

                filename = args.filename ? (args.filename+ '.csv') : 'export.csv';
                if (!csv.match(/^data:text\/csv/i)) {
					csv = 'data:text/csv;charset=utf-8,' + csv;
                }
                data = encodeURI(csv);
                link = document.createElement('a');
                link.setAttribute('href', data);
				link.setAttribute('download', filename);
                link.click();
            })
		});
	</script>
</div>
@endsection