@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: #ff5722;
  }
  .totalDelivered{
    background-color: rgb(0, 188, 212);
  }
  .totalUndelivered{
    background-color: #f9a825;
  }
  .totalAck{
    background-color: rgb(63, 81, 181);
  }
  .totalExpired{
  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;
}
  </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-3 col-lg-12">

                <div class="row height-full" data-plugin="matchHeight">
                    <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(255, 170, 144);'></i>
                      <div class="counter-number font-size-40 margin-top-10">
                          {{$total_sms_sent}}
                      </div>
                          <div class="counter-label margin-top-10 boxes">Total SMS Sent
                          </div>
                    </div>
                    <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, 221, 233);'></i>
                                        <div class="counter-number font-size-40 margin-top-10">
                                            {{$total_sms_delivered}}
                                        </div>
                                            <div class="counter-label margin-top-10 boxes">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">
                      <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}}
                                        </div>
                                            <div class="counter-label margin-top-10 boxes">Total Undelivered
                                            </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">
                      <i class="fa fa-exclamation" 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_expired}}
                                        </div>
                                            <div class="counter-label margin-top-10 boxes">Total Expired
                                            </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-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:orange;"></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:skyblue;"></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:blue;"></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>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}}],
         ['Undelivered',      {{$total_sms_undelivered}}],
         ['Acknowledged',  {{$total_sms_ack}}],
         ['Expired', {{$total_sms_expired}}]
       ]);

       var options = {
           title: 'Delivery Status',
           pieHole: 0.6,
           backgroundColor: {
               fill: '#f1f4f5'
           },
           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,
           pieSliceText: 'value',
          pieSliceTextStyle: {
            color: 'black',
          },
          backgroundColor: {
    fill:'#f1f4f5'
  },
  slices: {0: {color: '#ff9900'}},
          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