@extends('app')
@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">
    <meta http-equiv="refresh" content="6000">
    <style>
        .totalSmsSent {
            background-color: rgb(63, 81, 181);
        }

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

        .totalUndelivered {
            background-color: #f9a825;
        }

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

        .totalExpired {
            background-color: #ff5722;

        }

        .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: 107px;
            width: 210px;
            margin: 10px;
            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);
        }

        /*my css*/
        #mybutton {
            background-color: #004A7F;
            -webkit-border-radius: 10px;
            border-radius: 40px;
            width: 3em;
            height: 3em;
            border: none;
            color: #FFFFFF;
            cursor: pointer;
            display: inline-block;
            font-family: Arial;
            font-size: 15px;
            padding: 5px 10px;
            text-align: center;
            text-decoration: none;
            float: right;
            /*margin-top: -2em;*/
            /*margin-right: 2em;*/

        }

        @-webkit-keyframes glowing {
            0% {
                background-color: #B20000;
                -webkit-box-shadow: 0 0 3px #B20000;
            }
            50% {
                background-color: #FF0000;
                -webkit-box-shadow: 0 0 20px #FF0000;
            }
            100% {
                background-color: #B20000;
                -webkit-box-shadow: 0 0 3px #B20000;
            }
        }

        @-moz-keyframes glowing {
            0% {
                background-color: #B20000;
                -moz-box-shadow: 0 0 3px #B20000;
            }
            50% {
                background-color: #FF0000;
                -moz-box-shadow: 0 0 20px #FF0000;
            }
            100% {
                background-color: #B20000;
                -moz-box-shadow: 0 0 3px #B20000;
            }
        }

        @-o-keyframes glowing {
            0% {
                background-color: #B20000;
                box-shadow: 0 0 3px #B20000;
            }
            50% {
                background-color: #FF0000;
                box-shadow: 0 0 20px #FF0000;
            }
            100% {
                background-color: #B20000;
                box-shadow: 0 0 3px #B20000;
            }
        }

        @keyframes glowing {
            0% {
                background-color: #B20000;
                box-shadow: 0 0 3px #B20000;
            }
            50% {
                background-color: #FF0000;
                box-shadow: 0 0 20px #FF0000;
            }
            100% {
                background-color: #B20000;
                box-shadow: 0 0 3px #B20000;
            }
        }

        #mybutton {
            -webkit-animation: glowing 1500ms infinite;
            -moz-animation: glowing 1500ms infinite;
            -o-animation: glowing 1500ms infinite;
            animation: glowing 1500ms infinite;
        }

        /**/
    </style>
@endpush

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

@if (\Session::has('success'))
    <div class="alert alert-success media fade in">
        <div class="media-left">
            <div class="icon-wrap icon-wrap-xs icon-circle alert-icon">
                <i class="fa fa-info-circle fa-lg"></i>
            </div>
        </div>
        <div class="media-body">
            <h4 class="alert-title">SUCCESS</h4>
            <p class="alert-message">{!! \Session::get('success') !!}</p>
        </div>
    </div>
@endif

@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('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('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('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('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('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('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('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('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('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>

            {{--Mobile Money Modal--}}
            <div id="modal" class="modal fade" role="dialog">
                <div class="modal-dialog">

                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header" style="background-color: #f9a825">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title" style="color: #fff">PURCHASE SMS / SOCIAL MEDIA CREDIT HERE </h4>
                        </div>

                        <div class="modal-body" id="modalbody">

                            <div>
                                <label>Username</label>
                                <input readonly value="{{Auth::user()->username}}" type="text" id="username"
                                       class="form form-control">
                            </div>
                            <br>

                            <div>
                                <label>Mobile Money Number</label>
                                <input id="number" onkeyup="process_tel()" class="form form-control" type="number">
                            </div>
                            <br>

                            <div>
                                <label>Amount</label>
                                <input onkeyup="process_amount()" id="amount" class="form form-control" type="number">
                            </div>
                            <br>

                            <div>
                                <label>Network</label>
                                <input onkeyup="to_capitals()" readonly id="network" class="form form-control">
                            </div>
                            <div>
                                <input type="checkbox" id="ported" onclick="port()"> Ported
                            </div>
                            <br>

                            <div hidden id="voucher_div">
                                <label>Voucher</label>
                                <input type="number" id="voucher" class="form form-control">
                            </div>

                            {{--Warning--}}
                            <p id="warning"></p>
                        </div>

                        <div class="modal-footer">

                            <button id="cmk" style="float: left ; background-color: #f9a825; color: white"
                                    onclick="close_modal()"
                                    type="button"
                                    class="btn btn-default">
                                Close
                            </button>

                            <button id="mk" style="background-color: #f9a825; color: white" onclick="make_payment()"
                                    type="button"
                                    class="btn btn-default">
                                Make Payment
                            </button>
                            {{--endd--}}

                        </div>
                    </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"  style="">
                    <a class="animsition-link" href="{{route('report_get_sms_log_new_24h')}}">
                        <div class="col-xlg-12 col-lg-3 col-sm-3 col-xs-12 totalSmsSent fullBox">
                            <i class="fa fa-paper-plane" 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">
                                {{--{{$total_sms_sent}}--}}
                                <span id="total_sms_sent" style="display: none">0</span>
                                <span class="loading48">
                              <img src="{{asset('img/loading48.gif')}}">
                          </span>
                            </div>
                            <div class="counter-label margin-top-10 boxes">Total SMS Sent
                            </div>
                        </div>
                    </a>
                    <a class="animsition-link" href="{{route('report_get_sms_delivered_log_24h')}}">
                        <div class="col-xlg-12 col-lg-3 col-sm-3 col-xs-12 totalDelivered fullBox">
                            <i class="fa fa-envelope-open-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">
                                {{--                                            {{$total_sms_delivered}}--}}
                                <span id="total_sms_delivered" style="display: none">0</span>
                                <span class="loading48">
                                                <img src="{{asset('img/loading48.gif')}}">
                                            </span>
                            </div>
                            <div class="counter-label margin-top-10 boxes">Total Delivered
                            </div>
                        </div>
                    </a>
                    <a class="animsition-link" href="{{route('report_get_sms_undelivered_log_24h')}}">
                        <div class="col-xlg-12 col-lg-3 col-sm-3 col-xs-12 totalUndelivered fullBox">
                            <i class="fa fa-times" 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">
                                {{--                                            {{$total_sms_undelivered}}--}}
                                <span id="total_sms_undelivered" style="display: none">0</span>
                                <span class="loading48">
                                                <img src="{{asset('img/loading48.gif')}}">
                                            </span>
                            </div>
                            <div class="counter-label margin-top-10 boxes">Total Undelivered
                            </div>
                        </div>
                    </a>
                    <a class="animsition-link" href="{{route('report_get_sms_expired_log_24h')}}">
                        <div class="col-xlg-12 col-lg-3 col-sm-3 col-xs-12 totalExpired boxes fullBox">
                            <i class="fa fa-exclamation" aria-hidden="true"
                               style='float:left;top:20px; font-size:40px;color:rgb(255, 170, 144);'></i>
                            <div class="counter-number font-size-40 margin-top-10">
                                {{--                                            {{$total_sms_expired}}--}}
                                <span id="total_sms_expired" style="display: none">0</span>
                                <span class="loading48">
                                                <img src="{{asset('img/loading48.gif')}}">
                                            </span>
                            </div>
                            <div class="counter-label margin-top-10 boxes">Total Expired
                            </div>
                        </div>
                    </a>
                    <div class="col-xlg-12 col-lg-3 col-sm-3 col-xs-12 totalBalance boxes fullBox">
                        <i class="fa fa-money" aria-hidden="true"
                           style='float:left;top:20px; font-size:40px;color:rgb(127, 221, 233);'></i>
                        <div class="counter-number font-size-40 margin-top-10">
                            <span id="total_balance" 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" id="total_sms_available"></div>

                    </div>

                    <div class="">

                    </div>
                    <! -- End Completed Options Pie Widgets -->
                    <!-- Recent Activity -->
                    <div class="col-xlg-4 col-md-12" style="">
                        <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>
        </div>
        {{--@if ($enable_pay)--}}
            {{--<button title="Purchase SMS Credit" data-toggle="modal" data-target="#modal" id="mybutton" style="margin-top: -13em; margin-right: -3em;">--}}
            {{--<i class="fa fa-money fa-1x"></i>--}}
            {{--</button>--}}
        {{--@endif--}}
        {{--<br>--}}
    </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];
                    }
                }
            };

            var  price = "{{Auth::user()->credit->price}}";
            $.ajax({
                url: route + "/api/get-user-log-summary",
                type: 'POST',
                data: {
                    _token: token,
                    type: getUrlParameter('type')
                },
                dataType: "json",
                success: function (result, status, xhr) {
                    console.log(result);
                    $('.loading48').hide();
                    $('#total_sms_sent').text(result.total_sms_sent);
                    $('#total_sms_sent').show();
                    $('#total_sms_delivered').text(result.total_sms_delivered);
                    $('#total_sms_delivered').show();
                    $('#total_sms_expired').text(result.total_sms_expired);
                    $('#total_sms_expired').show();
                    $('#total_sms_undelivered').text(result.total_sms_undelivered);
                    $('#total_sms_undelivered').show();
                    $('#total_balance').text('B/F ' + result.total_balance);
                    let nt = Math.floor(result.total_balance/price);
                    $('#total_sms_available').html('<small>Total Sms:</small> ' + nt);
                    $('#total_balance').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 = new google.visualization.DataTable();
                        data.addColumn('string', 'Status');
                        data.addColumn('number', 'Delivery');
                        data.addRows([
                            ['Delivered', parseInt(result.total_sms_delivered)],
                            ['Undelivered', parseInt(result.total_sms_undelivered)],
                            ['Expired', parseInt(result.total_sms_expired)],
                            ['Acknowledged', parseInt(result.total_sms_ack)],
                        ]);

                        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 + "/api/get-traffic-performance-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!');
                },
                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(result);

                        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);
                    }
                },
            });

        });

    </script>

    {{--Mobile Money Integration--}}
    <script type="text/javascript">

        function process_tel() {

            var first, tel, substring, prefix, prefix2;

            tel = $("#number").val();

            tel = tel.trim();

            tel = tel.split("+");

            tel = tel.join("");

            //mma = $("#mobile_money_account");

            if (tel.length != 0) {

                first = tel.charAt(0);

                if (first == '0') {

//                $("#network").html("");
                    first = '233';
                    substring = tel.substring(1, 10);
                    prefix = tel.substring(0, 3);

                    //alert(prefixh2);

                    $("#number").val(first + substring);

                    if (prefix == '024' || prefix == '054' || prefix == '055') {
                        $("#network").val("MTN");
                    }

                    else if (prefix == '027' || prefix == '057') {
                        $("#network").val("TIGO");
                    }

                    else if (prefix == '020' || prefix == '050') {
                        $("#network").val("VODAFONE");
                        $("#voucher_div").show();
                    }

                    else if (prefix == '026' || prefix == '056') {
                        $("#network").val("AIRTEL");
                    }

                    else {
                        $("#mobile_money_account").val("");
                    }
                }
            }

            if (first == '2') {

//            $("#telplus").html("");
                prefix2 = tel.substring(0, 5);

                //alert(prefix2);

                if (prefix2 == '23324' || prefix2 == '23354' || prefix2 == '23355') {
                    $("#network").val("MTN");
                    $("#voucher_div").hide();
                }

                else if (prefix2 == '23327' || prefix2 == '23357') {
                    $("#network").val("TIGO");
                    $("#voucher_div").hide();
                }

                else if (prefix2 == '23320' || prefix2 == '23350') {
                    $("#network").val("VODAFONE");
                    $("#voucher_div").show();
                }

                else if (prefix2 == '23326' || prefix2 == '23356') {
                    $("#network").val("AIRTEL");
                    $("#voucher_div").hide();
                }

                else {
                    $("#network").val("");
                    $("#voucher_div").hide();
                }
            }

            if (tel.length < 12 || tel.length > 12) {
                $("#number").css("border-color", "red");


            } else {
                $("#number").css("border-color", "#4CAF50");

            }
        }

        function process_amount() {
            var amount = $("#amount").val();

            if (amount < 0.5) {
                $("#amount").css("border-color", "red");
            } else {
                $("#amount").css("border-color", "#4CAF50");
            }
        }

        function port() {

//        IF IS PORTED
            if (document.getElementById('ported').checked) {

                document.getElementById("network").readOnly = false;
//IF NOT PORTED
            } else {

                document.getElementById("network").readOnly = true;
                process_tel();

            }
        }

        function to_capitals() {
            var t = $("#network").val();
            var r = t.toUpperCase();
            $("#network").val(r);

            ported_vodafone();
        }

        function ported_vodafone() {
            if (document.getElementById('ported').checked && $("#network").val() == "VODAFONE") {
                $("#voucher_div").show();
            } else {
                $("#voucher_div").hide();
            }
        }

        function close_modal() {
            $("#modal").modal("hide");
            reset();
        }

        function make_payment() {
            var username = $("#username").val();
            var number = $("#number").val();
            var amount = $("#amount").val();
            var network = $("#network").val();
            var voucher = $("#voucher").val();


            var v_number = false;
            var v_amount = false;
            var v_network = false;
            var v_voucher = false;

            username = username.trim();
            number = number.trim();

            amount = amount.trim();
            network = network.trim();
            voucher = voucher.trim();


            if (network == "VODAFONE" && voucher == "") {
                $("#warning").html("Warning: Your voucher is invalid");
                $("#warning").css("color", "crimson");
            } else {
                v_voucher = true;
            }

            if (network == "MTN" || network == "TIGO" || network == "VODAFONE" || network == "AIRTEL") {
                v_network = true;
            } else {
                $("#warning").html("Warning: The network is invalid");
                $("#warning").css("color", "crimson");
            }

            if (amount == "" || amount < 0.5) {
                $("#warning").html("Warning: The minimum amount allowed is GHC 0.50");
                $("#warning").css("color", "crimson");
            } else {
                v_amount = true;
            }

            if (number == "" || number.length > 12 || number.length < 12) {
                $("#warning").html("Warning: Your mobile money number is invalid");
                $("#warning").css("color", "crimson");
            } else {
                v_number = true;
            }

//        alert(number);
            if (v_amount == true && v_number == true && v_network == true) {

                $("#warning").html("");

                transact(number, amount, username, network, voucher);

            }
        }

        function transact(msisdn, amount, username, network, voucher_number) {

            $("#mk").hide();

            $("#warning").html("<b>Processing Request. Please wait</b>");
            $("#warning").css("color", "#3F51B5");

//        alert(msisdn);a

            $.post("https://bulk.deywuro.com/api/make_payment",

                {
                    msisdn: msisdn,
                    amount: amount,
                    description: "Deywuro",
                    user_id: "npdeywuro",
                    password: "hdgt2314",
                    username: username,
                    network: network,
                    voucher_number: voucher_number
                },

                function (response) {

                    if (response.code == 0 || response =="") {

                        $("#warning").html("<b>Dial *170#, select 7, select option 3, enter pin then select from approval list.</b>");
                        $("#warning").css("color", "#4CAF50");

                    } else {

                        $("#warning").html("<b>Payment could not be initiated. Please try again later.</b>");
                        $("#warning").css("color", "crimson");

                    }
                }
            );
        }

        function reset() {
            $("#mk").show();
            $("#warning").html("");

            $("#number").css("border-color", "#eee");

            $("#amount").css("border-color", "#eee");
            $("#amount").val("");

            $("#voucher").css("border-color", "#eee");
            $("#voucher").val("");
//        window.location.reload();
        }

        function done() {

        }

    </script>

    <script>
        $(".barChart_div").mouseover(function () {
            $(this).animate({
                width: '150px'
            });
        });
    </script>

    <script>
        $(".barChart_div").mouseout(function () {
            $(this).animate({
                width: '40px'
            });
        });
    </script>


@endpush