@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">
  <style>
      .totalSmsSent{
          background-color: #4d4d4d;
          color: #ffcb05;
          /*background-color: #ff5722;*/
      }
      .totalDelivered{
          background-color: #ffcb05;
          color: #000000;
          /*background-color: rgb(0, 188, 212);*/
      }
      .totalUndelivered{
          background-color: #ffffff;
          color: #000;
          /*background-color: #f9a825;*/
      }
      .totalAck{
          background-color: #808080;
          color: #ffffff;
          /*background-color: rgb(63, 81, 181);*/
      }
      .totalExpired{
          background-color: #000000;
          color: #ffcb05;
          /*background-color: rgb(0, 150, 136);*/

      }

  .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:212px;
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);
  }

  .boxPoint{
    width: 15px;
    background: blue;
    height: 15px;
    margin: 10px;
    border-radius: 5px;
    color: white;
    text-shadow: none;
    float: left;
  }
.boxValue{
  float: left;
}
h4{
  color: gray;
}

      @font-face {
          font-family: "MTNBrighterSans-Regular";
          /*font-family: "MTNFontWorkSan";*/
          {{--      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

@section('page_content')
    <div class="page-content padding-30 container-fluid" style="font-family: MTNBrighterSans-Regular !important; color: #000;">
        <div class="row" data-plugin="matchHeight" data-by-row="true">
            <!-- First Row -->
            <!-- Completed Options Pie Widgets -->


            <div class="col-xlg-3 col-lg-12">

                <div class="row height-full" data-plugin="matchHeight">
                    <div class="col-md-2">

                    </div>
                    <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}}
                      </div>
                          <div class="counter-label margin-top-10 boxes" style="color: #ffcb05;">Total SMS Email
                          </div>
                    </div>
                    <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">
                                            {{$total_sms_delivered}}
                                        </div>
                                            <div class="counter-label margin-top-10 boxes" style="color:#000;">Total Delivered
                                            </div>

                                        <!-- </div> -->
                                    <!-- </div> -->
                                <!-- </div> -->
                            <!-- </div> -->
                        <!-- </div> -->
                    </div>
                    <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_rejected}}
                                        </div>
                                            <div class="counter-label margin-top-10 boxes" style="color:#000;">Total Rejected
                                            </div>
                                        <!-- </div> -->
                                    <!-- </div> -->

                                <!-- </div> -->
                            <!-- </div> -->
                        <!-- </div> -->
                    </div>
                    {{--<div class="col-xlg-12 col-lg-3 col-sm-3 col-xs-12 totalAck boxes fullBox">--}}
                      {{--<i class="fa fa-question-circle-o" 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_ack}}--}}
                                        {{--</div>--}}
                                            {{--<div class="counter-label margin-top-10 boxes">Total ACK--}}
                                            {{--</div>--}}
                    {{--</div>--}}
                    <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">
                                            {{$total_sms_failed}}
                                        </div>
                                            <div class="counter-label margin-top-10 boxes" style="color:#ffcb05;">Total Failed
                                            </div>
                    </div>

                </div>
            </div>
            <! -- End Completed Options Pie Widgets -->
            <!-- Recent Activity -->
            <div class="col-xlg-4 col-md-12" style="font-family: MTNBrighterSans-Regular !important; color:#000;">
              <div class="row">
                <div class="col-xlg-4 col-md-3">
                    <div class="row">
                      <div class="col-md-12">
                        Handset Error
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-md-2">
                        <div class="boxPoint" style="background:#ffcb05;"></div>
                      </div>
                      <div class="col-md-5">
                        <e class="boxValue">{{$handset_error}}%</e>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-md-12">
                        <hr/>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-md-12">
                        User Error
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-md-2">
                        <div class="boxPoint" style="background:#808080;"></div>
                      </div>
                      <div class="col-md-5">
                        <e class="boxValue">{{$user_error}}%</e>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-md-12">
                        <hr/>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-md-12">
                        Operator Error
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-md-2">
                        <div class="boxPoint" style="background:#000;"></div>
                      </div>
                      <div class="col-md-5">
                        <e class="boxValue">{{$operator_error}}%</e>
                      </div>
                    </div>
                </div>
                <div class="col-xlg-4 col-md-3">
                  <div class="row">
                    <div class="col-md-12">
                      <div id="donutchart1" style="width: 100%; height: 100%;"></div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-12" style="text-align:center">
                      <h4 style="font-family: MTNBrighterSans-Regular !important; color:#000;">DELIVERY TIME /mins</h4>
                    </div>
                  </div>
                </div>
                <div class="col-xlg-4 col-md-6">
                  <div id="donutchart" style="width: 550px; height: 300px;"></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" 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}}],
         ['Rejected',      {{$total_sms_rejected}}],
         ['Acknowledged',  {{$total_sms_ack}}],
         ['Failed', {{$total_sms_failed}}]
       ]);

       var options = {
           title: 'Delivery Status',
           fontName: 'MTNBrighterSans-Regular',
           textStyle: {
               color: '#000000'
           },
           pieHole: 0.6,
           backgroundColor: {
               fill: '#f1f4f5'
           },
           pieSliceTextStyle: {
               color: '#000'
           },
           colors: ['#ffcb05', '#4d4d4d', '#000', '#808080'],
           // colors: ['rgb(0, 188, 212)', '#f9a825', 'rgb(63, 81, 181)', 'rgb(0, 150, 136)']
       };

       var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
       chart.draw(data, options);
     }
   </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'],
         ['Delivery Time/sec', {{$delivery_time}}]
       ]);

       var options = {
          pieHole: 0.9,
           fontName: 'MTNBrighterSans-Regular',
           textStyle: {
               color: '#000000'
           },
           pieSliceText: 'value',
          pieSliceTextStyle: {
            color: '#000',
          },
          backgroundColor: {
    fill:'#f1f4f5',
  },
  slices: {0: {color: '#ffcb05'}},
          legend: 'none'
        };

       var chart = new google.visualization.PieChart(document.getElementById('donutchart1'));
       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