@extends('layouts.admin')
@section('content')
    <link rel="stylesheet" href="{{ URL::asset('css/morris.css') }}">
    <script src="{{ URL::asset('js/raphael-min.js') }}"></script>
    <script src="{{ URL::asset('js/morris.min.js') }}"></script>

    <script type="text/javascript" src="{{ URL::asset('js/moment-with-locales.js') }}"></script>
    <script type="text/javascript" src="{{ URL::asset('js/bootstrap-datetimepicker.min.js') }}"></script>
    <link href="{{ URL::asset('css/bootstrap-datetimepicker.min.css') }}" media="all" rel="stylesheet" type="text/css"/>
    @if (Session::has('flash_message'))
    <div class="alert alert-info"><button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">@lang('messages.Close')</span></button>{{ Session::get('flash_message') }}</div>
    @endif
    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="pageheader dashboard">
        <div class="mb-3">
            <div class="clearfix">
                <div  style="padding:15px;">
                    <div class="col-lg-4"><h3>@lang('messages.Dashboard')</h3></div>

                    <div class="col-xs-12 col-lg-8 mr-auto mt-4">
                    {!!Form::open(array( 'method' =>'post','class'=>'tab-form form-inline pull-right','id'=>'revenue_form'));!!}
                        <div class="form-group signup-form">
                          <label>From</label>
                          <div class="input-group">
                          <input type="text" name="start_date" id="start_date" class="form-control" placeholder="From Date" style="border-radius:10px 0 0 10px ;" placeholder="" value="{{ $start_date }}">
                          <span class="input-group-addon datepicker-trigger-start" id="basic-addon2" style="border-radius:0px 10px 10px 0 ;"><i class="la la-calendar"></i></span>
                        </div>

                        <label class="ml-4">To</label>
                        <div class="input-group">
                          <input type="text" name="end_date" id="end_date" class="form-control" placeholder="To Date" style="border-radius:10px 0 0 10px ;" placeholder="" value="{{ $end_date }}">
                          <span class="input-group-addon datepicker-trigger-end" style="border-radius:0px 10px 10px 0 ;" id="basic-addon2"><i class="la la-calendar"></i></span>
                        </div>
                      </div>
                        <div class="form-group pl-2"> <button type="submit" style="border-radius:10px;" class="btn btn-success"><i class="fa fa-search"></i></button> </div>
                    </form>
                    </div>
                </div>
            </div>
        </div><!-- media -->
    </div><!-- pageheader -->

    <div class="content mt-4 dashboard" style="padding-top:15px;background:none;box-shadow:none;">

        <div class="row mb-5">
            <div class="col-xs-12 col-lg-3 pull-right">
            @if(IzoCommonHelper::hasPermission('dashboard_total_products'))
             <div class="card" >
                <div class="card-body"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div>
                 <a href="javascript:;" >
                   <h4 class="card-title text-black">Total Doctors</h4>
                  <div class="d-flex justify-content-between align-items-center  mt-4">
                    <h2 class="text-success font-weight-bold ">{{ $data['total_doctors'] }}</h2>
                    <div class="text-danger font-weight-bold d-flex justify-content-between align-items-center">
                    <i class="fa fa-user-md" style="font-size:36px;"></i>
                    </div>
                  </div>
                </a>
                </div>
              </div>
            @endif  
            @if(IzoCommonHelper::hasPermission('dashboard_total_products'))
             <div class="card" >
                <div class="card-body"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div>
                 <a href="javascript:;" >
                   <h4 class="card-title text-black">Total Patients</h4>
                  <div class="d-flex justify-content-between align-items-center  mt-4">
                    <h2 class="text-success font-weight-bold ">{{ $data['customer_count'] }}</h2>
                    <div class="text-danger font-weight-bold d-flex justify-content-between align-items-center">
                    <i class='fa fa-users' style="font-size:35px;"></i>
                    </div>
                  </div>
                </a>
                </div>
              </div>
            @endif
             <!-- <div class="card"   >
                <div class="card-body"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div>
                <a href="javascript:;" >
                   <h4 class="card-title text-black">Our Customers</h4>
                    <div class="d-flex justify-content-between align-items-center  mt-4">
                      <h2 class="text-info font-weight-bold">54,582<span class="text-muted text-extra-small"></span></h2>
                      <div class="text-success font-weight-bold d-flex justify-content-between align-items-center">
                          <i class="las la-users la-2x"></i>
                      </div>
                    </div>
                </a>
                </div>
              </div> -->
            <!-- @if(IzoCommonHelper::hasPermission('dashboard_township_orders'))
             <div class="card">
                <div class="card-body"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div>
                  <h4 class="card-title text-center">@lang('messages.Orders by Township')</h4>
                  <div class="d-flex justify-content-between align-items-center mt-4">
                      <canvas id="pieChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>

                  </div> -->
                  <!-- <div class="text-center mt-4 pt-1"><button class="btn btn-sm btn-light">View Report <i class="la la-chevron-circle-right"></i></button> </div> -->
                <!-- </div>
              </div>
            @endif   -->
            </div>
            <div class="col-lg-9">
              <div class="row">

                @if(IzoCommonHelper::hasPermission('dashboard_revenue') || IzoCommonHelper::hasPermission('dashboard_orders'))
                <div class="col-lg-6 course-box">
                    <div class="course">

                        @if(IzoCommonHelper::hasPermission('dashboard_revenue'))
                          <div class="course-preview">
                            <div class="icon-left-top sh-lft">
                               <i class="las la-luggage-cart"></i>
                            </div>
                            <h6 class="pb-3">Total Online Revenue</h6>

                            <h2 style="font-size: 20px;margin-top:12px;"><span style="display:block;">Rs</span> {{ $data['total_revenue'] }}</h2>
                            <div class="progress-group mt-4">
                              <!-- <div class="text-left"><b>47000</b>/5000</div> -->
                              <div class="progress progress-sm">
                                <div class="progress-bar bg-warning" style="width: 100%;background:#f3ff07;"></div>
                              </div>
                            </div>
                            <div class="text-center"><a href="javascript:;" class="text-center"><i class="la la-chevron-circle-right la-2x"></i></a></div>
                          </div>
                          @endif

                          @if(IzoCommonHelper::hasPermission('dashboard_orders'))
                          <div class="course-info">
                            <!-- <div class="icon-left-bottom">
                              <i class="las la-luggage-cart"></i>
                            </div> -->
                            <h6 class="pb-4">Total Appointments</h6>
                              <h2>{{ $data['total_appointments'] }}</h2>
                              <div class="progress-group mt-4">
                               <!-- <div class="text-left"><b>248000</b>/25000</div> -->
                               <div class="progress progress-sm">
                                  <div class="progress-bar bg-warning" style="width: 100%;background:#8ac441;"></div>
                              </div>
                             </div>
                             <div class="text-center"><a href="javascript:;" class="text-center"><i class="la la-chevron-circle-right la-2x"></i></a></div>

                          </div>
                          @endif
                        </div>

                </div>
                @endif

                @if(IzoCommonHelper::hasPermission('dashboard_orders_confirmed') || IzoCommonHelper::hasPermission('dashboard_shipped_orders'))
                <div class="col-lg-6 p-0  course-box">
                    <div class="course">

                        @if(IzoCommonHelper::hasPermission('dashboard_orders_confirmed'))
                          <div class="course-preview" style="background: #34bfa3;">
                            <div class="icon-left-top sh-lft" style="color: #34bfa3;">
                                 <i class="lar la-check-circle"></i>
                            </div>
                            <h6 class="pb-2">Total Confirmed Appointments</h6>
                            <h2>{{ $data['total_confirmed'] }}<span></span></h2>
                            <div class="progress-group mt-4">
                             <!-- <div class="text-left"><b>47000</b>/5000</div> -->
                             <div class="progress progress-sm">
                               <div class="progress-bar bg-warning" style="width: 100%;background:#e5e5e5;"></div>
                             </div>
                           </div>
                             <div class="text-center"><a href="javascript:;" class="text-center"><i class="la la-chevron-circle-right la-2x"></i></a></div>
                          </div>
                          @endif

                        @if(IzoCommonHelper::hasPermission('dashboard_shipped_orders'))
                          <div class="course-info">
                             <!-- <div class="icon-left-bottom">
                                <i class="las la-luggage-cart"></i>
                            </div> -->
                            <h6>Total Requested Appointments</h6>
                              <h2>{{ $data['total_requested'] }}</h2>
                              <div class="progress-group mt-4">
                                <!-- <div class="text-left"><b>1500</b>/2500</div> -->
                                <div class="progress progress-sm">
                                  <div class="progress-bar bg-warning" style="width: 100%;background:#8ac441;"></div>
                              </div>
                              </div>
                             <div class="text-center"><a href="javascript:;" class="text-center"><i class="la la-chevron-circle-right la-2x"></i></a></div>
                          </div>
                          @endif
                          </div>


                </div>

                @endif
                @if(IzoCommonHelper::hasPermission('dashboard_returned_orders') || IzoCommonHelper::hasPermission('dashboard_cancelled_orders'))
                <div class="col-lg-6 course-box">
                    <div class="course">

                         @if(IzoCommonHelper::hasPermission('dashboard_returned_orders'))
                           <div class="course-info">
                           <div class="icon-left-top sh-rgt" style="color: #f3516c;">
                                 <i class="las la-cart-arrow-down"></i>
                            </div>
                            <h6>Doctor Cancelled Appointments</h6>
                            <h2>{{ $data['doctor_canceled'] }}<span></span></h2>
                            <div class="progress-group mt-4">
                             <!-- <div class="text-left"><b>500</b>/50000</div> -->
                              <div class="progress progress-sm">
                              <div class="progress-bar bg-warning" style="width: 100%;background: #f3516c;"></div>
                             </div>
                           </div>
                            <div class="text-center"><a href="javascript:;" class="text-center"><i class="la la-chevron-circle-right la-2x"></i></a></div>
                             <!-- <div class="text-center"><a href="javascript:;" class="text-center"><i class="la la-chevron-circle-right la-2x"></i></a></div> -->
                          </div>
                          @endif

                          @if(IzoCommonHelper::hasPermission('dashboard_cancelled_orders'))

                          <div class="course-preview" style="background: #f3516c;">
                            <h6 class="pb-1">Patient Cancelled Appointments</h6>
                              <h2>{{ $data['customer_canceled'] }}</h2>
                              <div class="progress-group mt-4">
                               <!-- <div class="text-left"><b>1500</b>/2500</div> -->
                                <div class="progress progress-sm">
                                  <div class="progress-bar bg-warning" style="width: 100%;background:#8e2536;"></div>
                                </div>
                              </div>
                             <div class="text-center"><a href="javascript:;" class="text-center"><i class="la la-chevron-circle-right la-2x"></i></a></div>
                              <!-- <div class="text-center"><a href="javascript:;" class="text-center"><i class="la la-chevron-circle-right la-2x"></i></a></div> -->
                          </div>
                          @endif
                        </div>

                </div>

                @endif
                @if(IzoCommonHelper::hasPermission('dashboard_picked_orders') || IzoCommonHelper::hasPermission('dashboard_delivered_orders'))

                <div class="col-lg-6  course-box p-0">
                    <div class="course">
                        @if(IzoCommonHelper::hasPermission('dashboard_picked_orders'))
                       <div class="course-info">
                            {{-- <div class="icon-left-top sh-rgt" style="color: #716aca;">
                            <i class="fa fa-calendar" aria-hidden="true"></i>
                            </div> --}}
                            <h6 class="pb-2">Transaction Failed Appointments</h6>
                            <h2 >{{ $data['transaction_failed'] }} <span></span></h2>
                            <div class="progress-group mt-4">
                              <!-- <div class="text-left"><b>47000</b>/5000</div> -->
                              <div class="progress progress-sm">
                               <div class="progress-bar bg-warning" style="width: 100%;background:#716aca;"></div>
                              </div>
                            </div>
                             <div class="text-center"><a href="javascript:;" class="text-center"><i class="la la-chevron-circle-right la-2x"></i></a></div>
                             <!-- <div class="text-center"><a href="javascript:;" class="text-center"><i class="la la-chevron-circle-right la-2x"></i></a></div> -->
                          </div>
                          @endif
                        @if(IzoCommonHelper::hasPermission('dashboard_delivered_orders'))
                          <div class="course-preview" style="background: #716aca;">
                              <h6 class="pb-2">Completed Appointments <h6>
                              <h2>{{ $data['completed_appointments'] }}</h2>
                              <div class="progress-group mt-4">
                                <!-- <div class="text-left"><b>1500</b>/2500</div> -->
                                <div class="progress progress-sm">
                                  <div class="progress-bar bg-warning" style="width: 100%;background:#f3ff07;"></div>
                                </div>
                              </div>
                             <div class="text-center"><a href="javascript:;" class="text-center"><i class="la la-chevron-circle-right la-2x"></i></a></div>
                              <!-- <div class="text-center"><a href="javascript:;" class="text-center"><i class="la la-chevron-circle-right la-2x"></i></a></div> -->
                          </div>
                          @endif
                        </div>
                </div>
                @endif
              </div>
            </div>
        </div>

        <div class="clearfix"></div>
    </div>
    <script src="{{ URL::asset('plugins/chart.js/Chart.min.js') }}"></script>
<script>
  $(document).ready(function(){
      //Datepicker
      var nowDate = new Date();
      var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);
      $('#start_date').datetimepicker({
         // minDate: today,
          format: 'DD-MM-YYYY',
      });

      $('#end_date').datetimepicker({
        //  minDate: today,
          format: 'DD-MM-YYYY',
      });


      $(".datepicker-trigger").on("click", function () {
          $("#start_date").datetimepicker("show");
          $("#end_date").datetimepicker("show");
      });

      $(".datepicker-trigger-start").on("click", function () {
          $("#start_date").datetimepicker("show");
          
      });

      $(".datepicker-trigger-end").on("click", function () {
          
          $("#end_date").datetimepicker("show");
      });
  });
  var townships   = null;
  var order_count = null;
  var color       = null;
   var donutData        = {
      labels: townships,
      datasets: [
        {
          data: order_count,
          backgroundColor : color,
        }
      ]
    }
 //-------------
    //- PIE CHART -
    //-------------
    // Get context with jQuery - using jQuery's .get() method.
    var pieChartCanvas = $('#pieChart').get(0).getContext('2d')
    var pieData        = donutData;
    var pieOptions     = {
      maintainAspectRatio : false,
      responsive : true,
      legend: {
            // display: false
             position: "bottom",
             fontFamily: ""
         },
    }
    //Create pie or douhnut chart
    // You can switch between pie and douhnut using the method below.
    var pieChart = new Chart(pieChartCanvas, {
      type: 'pie',
      data: pieData,
      options: pieOptions
    });

    $('#reservationdate').datetimepicker({
        format: 'L'
    });

    function getRandomColor() {
        var letters = '0123456789ABCDEF'.split('');
        var color = '#';
        for (var i = 0; i < 6; i++ ) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }
</script>

@endsection