@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: #4d4d4d;
            color: #ffcb05;
            /*background-color: rgb(63, 81, 181);*/
        }

        .totalDelivered {
            background-color: #ffcb05;
            color: #000000;
            /*background-color: rgb(0, 150, 136);*/
        }

        .totalUndelivered {
            background-color: #ffffff;
            color: #000;
            /*background-color: #f9a825;*/
        }

        .totalBalance {
            background-color: #808080;
            color: #ffffff;
            /*background-color: rgb(0, 188, 212);*/
        }

        .totalExpired {
            background-color: #000000;
            color: #ffcb05;
            /*background-color: #ff5722;*/

        }

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

        /*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;
        }

        @font-face {
            /*font-family: "MTNFontWorkSan";*/
            font-family: "MTNBrighterSans-Regular";
            {{--src: url("{!! asset('css/WorkSans.ttf') !!}");--}}
            src: url("{!! asset('css/MTNBrighterSans-Regular.otf') !!}");
        }

        @media (min-width: 1200px) and (max-width: 1599px) {
            .page {
                max-width: 1262px;
            }
        }

        body {
            font-family: MTNBrighterSans-Regular !important;
        }

        /**/
    </style>
@endpush

@section('page_title')
    MTN MESSENGER, 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" style="font-family: MTNBrighterSans-Regular;">
        <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 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-lg-12">
                @if (count($errors) > 0)
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                @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="col-lg-12" data-plugin="matchHeight"
                    style="display : flex; flex-direction :column; justify-content :space-evenly; align-content:center">
                    <div class="row col-lg-12 lg-rect" style="padding : 0;">

                        <a class="animsition-link" href="{{ route('report_get_sms_log_24h') }}">
                            <div class="col-xlg-12 col-lg-3 col-sm-3 col-xs-12 totalSmsSent fullBox">
                                <img src="{{ asset('img/icons/mtn1.png') }}" style='float:left;top:20px; font-size:40px; width: 25%; margin-top: 15px;'>

                                <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" style="color: #ffcb05;">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">
                                <img src="{{ asset('img/icons/mtn2.png') }}" style='float:left;top:20px; font-size:40px; width: 25%; margin-top: 15px;'>
                                <div class="counter-number font-size-40 margin-top-10">
                                    <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" style="color: #000000;">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">
                                <img src="{{ asset('img/icons/mtn3.png') }}" style='float:left;top:20px; font-size:40px; width: 25%; margin-top: 15px;'>

                                <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" style="color: #000;">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">
                                <img src="{{ asset('img/icons/mtn4.png') }}" style='float:left;top:20px; font-size:40px; width: 25%; margin-top: 15px;'>
                                <div class="counter-number font-size-40 margin-top-10">
                                    <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" style="color: #ffcb05;">Total Expired
                                </div>
                            </div>
                        </a>
                        <a class="animsition-link" href="javascript:void(0);">
                            <div class="col-xlg-12 col-lg-3 col-sm-3 col-xs-12 totalBalance boxes fullBox">
                                <img src="{{ asset('img/icons/mtn5.png') }}" style='float:left;top:20px; font-size:40px; width: 25%; margin-top: 15px;'>
                                <div class="counter-number font-size-40 margin-top-10">
                                    <span id="total_sms_available" style="display: none">0</span>
                                    <span class="loading48">
                                        <img src="{{ asset('img/loading48.gif') }}">
                                    </span>
                                </div>

                                <div class="counter-label margin-top-3 boxes" style="color: #ffffff;">CREDIT BALANCE</div>
                            </div>
                        </a>
                    </div>
                    <!-- Recent Activity -->
                    <div class="col-md-12" style="">
                        <div class="row">
                            <div class="col-lg-6">
                                <div id="curve_chart" style="width: 550px; height: 300px; font-family: MTNBrighterSans-Regular !important; color: #000;">
                                    <span class="loading200">
                                        <img src="{{ asset('img/loading200.gif') }}">
                                    </span>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div id="donutchart" style="width: 550px; height: 300px; font-family: MTNBrighterSans-Regular !important; color: #000;">
                                    <span class="loading48">
                                        <img src="{{ asset('img/loading200.gif') }}">
                                    </span>
                                </div>
                                <br />
                                <div>
                                    {{--                        {{$dash_title}} --}}
                                    <span id="dash_title" style="display: none; font-family: MTNBrighterSans-Regular !important; color: #000;"></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(nt).show();
                    $('#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',
                            fontName: 'MTNBrighterSans-Regular',
                            textStyle: {
                                color: '#000000'
                            },
                            pieHole: 0.2,
                            backgroundColor: {
                                fill: '#f1f4f5'
                            },
                            is3D: false,
                            colors: ['#ffcb05', '#4d4d4d', '#000', '#808080'],
                            // colors: ['rgb(0, 150, 136)', '#f9a825', '#ff5722', 'rgb(63, 81, 181)'],
                            pieSliceText: 'none',
                            pieSliceTextStyle: {
                                color: '#000',
                            },
                            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',
                            fontName: 'MTNBrighterSans-Regular',
                            textStyle: {
                                color: '#000000'
                            },
                            curveType: 'function',
                            legend: {
                                position: 'bottom'
                            },
                            backgroundColor: {
                                fill: '#f1f4f5'
                            },
                            pieSliceTextStyle: {
                                color: '#000',
                            },
                            animation: {
                                startup: true,
                                duration: 2000,
                                easing: 'out'
                            },
                            colors: ['#ffcb05', '#4d4d4d', '#000', '#808080'],
                            // 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", "#ffcb05");

            }
        }

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

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

        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: "DWC",
                    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", "#ffcb05");

                    } 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