@extends('admin.layouts.master')
@push('styles')
    <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        .reseller {
            background-color: rgb(63, 81, 181);
        }

        .active_clients {
            background-color: rgb(0, 150, 136);
        }

        .clients {
            background-color: #f9a825;
        }

        .new_clients {
            background-color: rgb(0, 188, 212);
        }

        .revenue {
            background-color: #ff5722;
        }

        .profitability {
            background-color: #00b488;
        }

        .expenses {
            background-color: mediumvioletred;
        }

        .boxes {
            color: rgba(255, 255, 255, 0.870588);
            font-weight: 100 !important;
            font-size: 16px;
            font-weight: 400;
            /*letter-spacing: -.005em;*/
            /*line-height: 56px;*/
            position: relative;
            right: 1px;
        }

        .fullBox {
            border: 0;
            vertical-align: baseline;
            height: 110px;
            width: 150px;
            margin: 5px;
            margin-bottom: 40px;
            border-radius: 3px;
            text-align: right;
            vertical-align: top;
            color: white;
            -webkit-box-shadow: 3px 6px 6px 0px rgba(0, 0, 0, 0.51);
            -moz-box-shadow: 3px 6px 6px 0px rgba(0, 0, 0, 0.51);
            box-shadow: 3px 6px 6px 0px rgba(0, 0, 0, 0.51);
        }
    </style>
@endpush

@section('page_title')
    Deywuro, Your Gateway To Bulk SMS Communication
@endsection

@section('page_content')
    <div class="page-content padding-30 container-fluid">
        <div class="row" data-plugin="matchHeight" data-by-row="true">
            <!-- First Row -->
            <!-- Completed Options Pie Widgets -->

            <div class="col-xlg-1 col-lg-1" style="position:fixed; left:-50px;top:300px;  z-index:999">
                <div class="row">
                    <div class="col-md-12">
                        <a href="{{route('admin.app', ['type'=>'month'])}}">
                            <div class="barChart_div"
                                 style="width: 40px; height: 35px;float:left;background-color: orange;margin-bottom:10px; color:white;text-align:center;text-shadow:none;font-weight:bolder;padding-top:10px;">
                                Month
                            </div>
                        </a>

                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <a href="{{route('admin.app', ['type'=>'week'])}}">
                            <div class="barChart_div"
                                 style="width: 40px; height: 35px;float:left;background-color: #3f51b5;margin-bottom:10px; color:white;text-align:center;text-shadow:none;font-weight:bolder;padding-top:10px;">
                                Week
                            </div>
                        </a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">

                        <a href="{{route('admin.app', ['type'=>'sun'])}}">
                            <div class="barChart_div"
                                 style="width: 40px; height: 35px;float:left;background-color: #FC1DCF;margin-bottom:10px; color:white;text-align:center;text-shadow:none;font-weight:bolder;padding-top:10px;">
                                SUN
                            </div>
                        </a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">

                        <a href="{{route('admin.app', ['type'=>'mon'])}}">
                            <div class="barChart_div"
                                 style="width: 40px; height: 35px;float:left;background-color: #8cc63f;margin-bottom:10px; color:white;text-align:center;text-shadow:none;font-weight:bolder;padding-top:10px;">
                                MON
                            </div>
                        </a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <a href="{{route('admin.app', ['type'=>'tue'])}}">
                            <div class="barChart_div"
                                 style="width: 40px; height: 35px;float:left;background-color: #f9a825;margin-bottom:10px; color:white;text-align:center;text-shadow:none;font-weight:bolder;padding-top:10px;">
                                TUE
                            </div>
                        </a>

                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">

                        <a href="{{route('admin.app', ['type'=>'wed'])}}">
                            <div class="barChart_div"
                                 style="width: 40px; height: 35px;float:left;background-color: #ffa61a;margin-bottom:10px; color:white;text-align:center;text-shadow:none;font-weight:bolder;padding-top:10px;">
                                WED
                            </div>
                        </a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">

                        <a href="{{route('admin.app', ['type'=>'thu'])}}">
                            <div class="barChart_div"
                                 style="width: 40px; height: 35px;float:left;background-color: #ff5722;margin-bottom:10px; color:white;text-align:center;text-shadow:none;font-weight:bolder;padding-top:10px;">
                                THU
                            </div>
                        </a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">

                        <a href="{{route('admin.app', ['type'=>'fri'])}}">
                            <div class="barChart_div"
                                 style="width: 40px; height: 35px;float:left;background-color: #00bcd4;margin-bottom:10px; color:white;text-align:center;text-shadow:none;font-weight:bolder;padding-top:10px;">
                                FRI
                            </div>
                        </a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">

                        <a href="{{route('admin.app', ['type'=>'sat'])}}">
                            <div class="barChart_div"
                                 style="width: 40px; height: 35px;float:left;background-color: #3f51b5;margin-bottom:10px; color:white;text-align:center;text-shadow:none;font-weight:bolder;padding-top:10px;">
                                SAT
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-xlg-3 col-lg-12">
                @if(Auth::check() && Auth::user()->must_change_password)
                    <div class="row">
                        <div class="alert alert-danger">
                            <strong>REMINDER!</strong>
                            Our System has detected that you are still using your <b>DEFAULT</b> Password.
                            Please, <b>CHANGE</b> your Password to DISABLE this Message! Thank You!
                        </div>
                    </div>
                @endif
                <div class="row height-full" data-plugin="matchHeight">
                    <div class="col-xlg-12 col-lg-3 col-sm-3 col-xs-12 reseller fullBox">
                        <i class="fa fa-user-circle" aria-hidden="true"
                           style='float:left;top:20px; font-size:40px;color:rgb(146, 156, 213);'></i>
                        <div class="counter-number font-size-40 margin-top-10">
                            <span id="reseller" style="display: none">0</span>
                            <span class="loading48">
                              <img src="{{asset('img/loading48.gif')}}">
                           </span>
                        </div>
                        <div class="counter-label margin-top-10 boxes">RESELLERS</div>
                    </div>
                    <div class="col-xlg-12 col-lg-3 col-sm-3 col-xs-12 clients fullBox">
                        <i class="fa fa-users" aria-hidden="true"
                           style='float:left;top:20px; font-size:40px;color:rgb(173, 112, 112);'></i>

                        <div class="counter-number font-size-40 margin-top-10">
                            <span id="clients" style="display: none">0</span>
                            <span class="loading48">
                                                <img src="{{asset('img/loading48.gif')}}" />
                                            </span>
                        </div>
                        <div class="counter-label margin-top-10 boxes">CLIENTS
                        </div>
                    </div>
                    <div class="col-xlg-12 col-lg-3 col-sm-3 col-xs-12 active_clients fullBox">
                        <i class="fa fa-star-o" aria-hidden="true"
                           style='float:left;top:20px; font-size:40px;color:rgb(127, 202, 195);'></i>
                        <div class="counter-number font-size-40 margin-top-10">
                            <span id="active_clients" style="display: none">0</span>
                            <span class="loading48">
                                <img src="{{asset('img/loading48.gif')}}">
                            </span>
                        </div>
                        <div class="counter-label margin-top-10 boxes">ACTIVE CLT
                        </div>
                    </div>

                    <div class="col-xlg-12 col-lg-3 col-sm-3 col-xs-12 new_clients boxes fullBox">
                        <i class="fa fa-user-plus" aria-hidden="true"
                           style='float:left;top:20px; font-size:40px;color:lightblue'></i>
                        <div class="counter-number font-size-40 margin-top-10">
                            <span id="new_clients" style="display: none">0</span>
                            <span class="loading48">
                                <img src="{{asset('img/loading48.gif')}}">
                            </span>
                        </div>
                        <div class="counter-label margin-top-10 boxes">NEW CLIENTS
                        </div>
                    </div>
                    <div class="col-xlg-12 col-lg-3 col-sm-3 col-xs-12 revenue boxes fullBox">
                        <i class="fa fa-money" aria-hidden="true"
                           style='float:left;top:20px; font-size:40px;color:orange'></i>
                        <div class="counter-number font-size-40 margin-top-10">
                            <span id="revenue" style="display: none; font-size: 20px;">0</span>
                            <span class="loading48">
                                <img src="{{asset('img/loading48.gif')}}">
                            </span>
                        </div>
                        <div class="counter-label margin-top-10 boxes">REVENUE
                        </div>
                    </div>

                    <div class="col-xlg-12 col-lg-3 col-sm-3 col-xs-12 profitability boxes fullBox">
                        <i class="fa fa-handshake-o" aria-hidden="true"
                           style='float:left;top:20px; font-size:40px;color:#00e7af;'></i>
                        <div class="counter-number font-size-40 margin-top-10">
                            <span id="profitability" style="display: none; font-size: 20px;">0</span>
                            <span class="loading48">
                                                <img src="{{asset('img/loading48.gif')}}">
                                            </span>
                        </div>
                        <div class="counter-label margin-top-10 boxes">PROFITABILITY
                        </div>
                    </div>
                    <div class="col-xlg-12 col-lg-3 col-sm-3 col-xs-12 expenses fullBox">
                        <i class="fa fa-wrench " aria-hidden="true"
                           style='float:left;top:20px; font-size:40px;color:palevioletred;'></i>
                        <div class="counter-number font-size-40 margin-top-10">
                            <span id="expenses" style="display: none; font-size: 20px;">0</span>
                            <span class="loading48">
                                                <img src="{{asset('img/loading48.gif')}}">
                                            </span>
                        </div>
                        <div class="counter-label margin-top-10 boxes">OP. EXPENSES
                        </div>
                    </div>

                </div>
            </div>
            <!-- End Completed Options Pie Widgets -->
            <!-- Recent Activity -->
            <div class="col-xlg-4 col-md-12">
                <div class="row">
                    <div class="col-xlg-4 col-md-6">
                        <div id="curve_chart" style="width: 550px; height: 300px;">
                      <span class="loading200">
                        <img src="{{asset('img/loading200.gif')}}">
                    </span>
                        </div>
                    </div>
                    <div class="col-xlg-4 col-md-6">
                        <div id="donutchart" style="width: 550px; height: 300px;">
                      <span class="loading48">
                        <img src="{{asset('img/loading200.gif')}}">
                    </span>
                        </div>
                        <br/>
                        <div>
                            {{--{{$dash_title}}--}}
                            <span id="dash_title" style="display: none"></span>
                        </div>
                    </div>
                </div>
                <!-- End Recent Activity -->
                <!-- End Second Row -->
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

        $(function () {
            function getUrlParameter(sParam) {
                var sPageURL = decodeURIComponent(window.location.search.substring(1)),
                    sURLVariables = sPageURL.split('&'),
                    sParameterName,
                    i;

                for (i = 0; i < sURLVariables.length; i++) {
                    sParameterName = sURLVariables[i].split('=');

                    if (sParameterName[0] === sParam) {
                        return sParameterName[1] === undefined ? true : sParameterName[1];
                    }
                }
            };
            $.ajax({
                url: route + "/admin/api/get-user-financial-summary",
                type: 'POST',
                data: {
                    _token: token,
                    type: getUrlParameter('type')
                },
                dataType: "json",
                success: function (result, status, xhr) {
                    console.log(result);
                    $('.loading48').hide();
                    $('#profitability').text(result.profitability);
                    $('#profitability').show();
                    $('#expenses').text(result.expenses);
                    $('#expenses').show();
                    $('#reseller').text(result.reseller);
                    $('#reseller').show();
                    $('#active_clients').text(result.active_clients);
                    $('#active_clients').show();
                    $('#new_clients').text(result.new_clients);
                    $('#new_clients').show();
                    $('#clients').text(result.clients);
                    $('#clients').show();
                    $('#revenue').text(result.revenue);
                    $('#revenue').show();
                    $('#dash_title').text(result.dash_title);
                    $('#dash_title').show();

                    //pie chart
                    google.charts.load("current", {packages: ["corechart"]});
                    google.charts.setOnLoadCallback(drawChart);

                    function drawChart() {
                        var data = google.visualization.arrayToDataTable([
                            ['Task', 'Hours per Day'],
                            ['Revenue',     result.revenue],
                            ['Cost of goods',      result.expenses],
                            ['Profit',  result.profitability <0 ? 0 :result.profitability],
                        ]);

                        var options = {
                            title: 'Delivery Status',
                            pieHole: 0.2,
                            backgroundColor: {
                                fill: '#f1f4f5'
                            },
                            is3D: false,
                            colors: ['rgb(0, 150, 136)', '#f9a825', '#ff5722', 'rgb(63, 81, 181)'],
                            pieSliceText: 'none',
                            legend: {
                                position: 'labeled'
                            }
                        };

                        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
                        chart.draw(data, options);
                    }
                },
                error: function (result, status, xhr) {
                    alert('An error occurred while fetching log details!');
                    console.log(result);
                },
            });

            $.ajax({
                url: route + "/admin/api/get-financial-data",
                type: 'POST',
                data: {
                    _token: token,
                    type: getUrlParameter('type')
                },
                dataType: "json",
                async: true,
                error: function (result, status, xhr) {
                    alert('An error occurred while fetching log details!');
                    console.log(result);
                },
                success: function (result, status, xhr) {
//                console.log(result);

                    $('.loading200').hide();
                    google.charts.load('current', {'packages': ['corechart']});
                    google.charts.setOnLoadCallback(drawChart);

                    function drawChart() {
                        var jsonData = result;
//                    console.log(jsonData);

                        var data = google.visualization.arrayToDataTable(jsonData);

                        var options = {
                            title: 'Traffic Performance',
                            curveType: 'function',
                            legend: {position: 'bottom'},
                            backgroundColor: {
                                fill: '#f1f4f5'
                            },
                            animation: {
                                startup: true,
                                duration: 2000,
                                easing: 'out'
                            },
                            colors: ['rgb(16, 150, 24)', 'rgb(220, 57, 18)', 'rgb(255, 153, 0)', 'rgb(51, 102, 204)']
                        };

                        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

                        chart.draw(data, options);
                    }
                },
            });

        });



        {{----}}

        {{--google.charts.load('current', {'packages':['corechart']});--}}
        {{--google.charts.setOnLoadCallback(drawChart);--}}

        {{--function drawChart() {--}}
        {{--var jsonData = $.ajax({--}}
        {{--url: route+"/api/get-traffic-performance-data",--}}
        {{--type: 'POST',--}}
        {{--data: {--}}
        {{--_token: token,--}}
        {{--path: "{{\Illuminate\Support\Facades\Request::path()}}"--}}
        {{--},--}}
        {{--dataType: "json",--}}
        {{--async: false--}}
        {{--}).responseText;--}}
        {{--console.log(jsonData);--}}

        {{--var data = google.visualization.arrayToDataTable(JSON.parse(jsonData));--}}

        {{--var options = {--}}
        {{--title: 'Traffic Performance',--}}
        {{--curveType: 'function',--}}
        {{--legend: { position: 'bottom' },--}}
        {{--backgroundColor: {--}}
        {{--fill:'#f1f4f5'--}}
        {{--},--}}
        {{--animation: {--}}
        {{--startup : true,--}}
        {{--duration: 2000,--}}
        {{--easing: 'out'--}}
        {{--},--}}
        {{--colors: ['rgb(16, 150, 24)', 'rgb(220, 57, 18)', 'rgb(255, 153, 0)','rgb(51, 102, 204)']--}}
        {{--};--}}

        {{--var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));--}}

        {{--chart.draw(data, options);--}}
        {{--}--}}
        {{--</script>--}}
        {{--<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>--}}
        {{--<script type="text/javascript">--}}
        {{--google.charts.load("current", {packages:["corechart"]});--}}
        {{--google.charts.setOnLoadCallback(drawChart);--}}
        {{--function drawChart() {--}}
        {{--var data = google.visualization.arrayToDataTable([--}}
        {{--['Task', 'Hours per Day'],--}}
        {{--['Delivered',     {{$total_sms_delivered}}],--}}
        {{--['Undelivered',      {{$total_sms_undelivered}}],--}}
        {{--['Expired',  {{$total_sms_expired}}],--}}
        {{--['Acknowledged',  {{$total_sms_ack}}],--}}
        {{--]);--}}

        {{--var options = {--}}
        {{--title: 'Delivery Status',--}}
        {{--pieHole: 0.2,--}}
        {{--backgroundColor: {--}}
        {{--fill:'#f1f4f5'--}}
        {{--},--}}
        {{--colors: ['rgb(0, 150, 136)', '#f9a825', '#ff5722','rgb(63, 81, 181)'],--}}
        {{--pieSliceText:'none',--}}
        {{--is3D: false,--}}
        {{--legend:{--}}
        {{--position:'labeled'--}}
        {{--}--}}
        {{--};--}}

        {{--var chart = new google.visualization.PieChart(document.getElementById('donutchart'));--}}
        {{--chart.draw(data, options);--}}
        {{--}--}}
    </script>
    <script>
        $(".barChart_div").mouseover(function () {
            $(this).animate({
                width: '150px'
            });
        });
    </script>
    <script>
        $(".barChart_div").mouseout(function () {
            $(this).animate({
                width: '40px'
            });
        });
    </script>
@endpush