@extends('dashboard.layouts.master')

@section('css')
    <!--Chartist Chart CSS -->
    <link rel="stylesheet" href="{{ URL::asset('dashboard/plugins/morris/morris.css') }}">
    <link rel="stylesheet" href="{{ URL::asset('dashboard/plugins/chartist/css/chartist.min.css') }}">
@endsection

@section('breadcrumb')
    <!--<div class="col-sm-6">-->
    <!--    <h4 class="page-title">{{ trans('labels.dashboard') }}</h4>-->
    <!--    <ol class="breadcrumb">-->
    <!--        <li class="breadcrumb-item active">{{ trans('labels.welcome_to') }} {{ trans('labels.admin') }}</li>-->
    <!--    </ol>-->
    <!--</div>-->
@endsection

@section('content')
    <div class="row">

        @foreach ($cards as $key => $card)
            @can($card['can'])
                <div class="col-xl-3 col-md-6">
                    <div class="card mini-stat text-black">
                        <div class="card-body">
                            <div class="mb-4">
                                
                                <h5 class="font-16 text-uppercase mt-0 text-black-50" style="font-weight: bold;">{{ $key }}</h5>
                                <!--<h4 class="font-500">{{ $card['count'] }}-->
                                <!--     <i class="mdi mdi-arrow-up text-success ml-2"></i> -->
                                <!--</h4>-->
                                <div class="mini-stat-label {{ $card['bg-color'] }}" style="background-color: #dbfaed !important;color: #3d8642;">
                                            <p class="mb-0" style="font-size: 17px;font-weight: bold;">+ 0%</p>
                                        </div>
                            </div>
                            <div class="pt-2">
                                <div class="float-right" style="height: 50px;line-height: 50px;text-align: center;">
                                    <a href="{{ $card['url'] }}" class="text-black-50">
                                        <!--<i class="mdi mdi-arrow-left h5"></i>-->
                                        <span>تفاصيل</span>
                                    </a>
                                </div>
                                <h4 class="font-500">
                                    <span style="font-size: 27px;font-weight: bold;">{{ $card['count'] }}</span>
                                     <i class="mdi mdi-arrow-up text-success ml-2"></i> 
                                </h4>
                            </div>
                        </div>
                    </div>
                </div>
            @endcan
        @endforeach
    </div>
    <!-- end row -->

    <div class="row">
        <div class="col-lg-6">
            <div class="card">
                <div class="card-body">

                    <h4 class="card-title mb-4">الطلبات</h4>

                    <div class="row justify-content-center" id="all-orders" data-days="{{json_encode($days)}}"  data-lectures="{{json_encode($lectureOrders)}}"  data-packages="{{json_encode($packagesOrders)}}"  data-books="{{json_encode($bookOrders)}}">
                        <div class="col-sm-4">
                            <div class="text-center">
                                <h5 class="mb-0 font-size-20">{{$lectureOrdersSum}}</h5>
                            <p class="text-muted">محاضرات</p>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="text-center">
                                <h5 class="mb-0 font-size-20">{{$packageOrdersSum}}</h5>
                                <p class="text-muted">باقات</p>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="text-center">
                                <h5 class="mb-0 font-size-20">{{$booksOrdersSum}}</h5>
                            <p class="text-muted">كتب</p>
                            </div>
                        </div>
                    </div>

                    <div id="stacked-bar-chart" class="ct-chart ct-golden-section" dir="ltr"></div>
                </div>
            </div>
        </div> <!-- end col -->

        <div class="col-lg-6">
            <div class="card">
                <div class="card-body" id="studentList" data-users="{{json_encode($students)}}">

                    <h4 class="mt-0 header-title" style="font-size:1.5rem">طلاب الموقع</h4>

                    <ul class="list-inline widget-chart m-t-20 m-b-15 text-center">
                        <li class="list-inline-item" style="width: 22.5%;">
                            <h5 class="mb-0">{{$students[2]['count']}}</h5>
                            <p class="text-muted">مشتركين</p>
                        </li>
                        <li class="list-inline-item" style="width: 22.5%;">
                            <h5 class="mb-0">{{$students[0]['count']}}</h5>
                            <p class="text-muted">معلقين</p>
                        </li>
                        <li class="list-inline-item" style="width: 22.5%;">
                            <h5 class="mb-0">{{$students[1]['count']}}</h5>
                            <p class="text-muted">مرفوضين</p>
                        </li>
                        <li class="list-inline-item" style="width: 22.5%;">
                            <h5 class="mb-0">{{$students[3]['count']}}</h5>
                            <p class="text-muted">اخر</p>
                        </li>
                    </ul>

                    <div id="simple-pie" class="ct-chart ct-golden-section simple-pie-chart-chartist"></div>

                </div>
            </div>
        </div> <!-- end col -->
    </div> <!-- end col -->

    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">

                    <h4 class="mt-0 header-title">طلبات المحاضرات (7 ايام)</h4>

                    <ul class="list-inline widget-chart m-t-20 m-b-15 text-center">
                        <!--<li class="list-inline-item">-->
                        <!--    <h5 class="mb-0">25610</h5>-->
                        <!--    <p class="text-muted">Activated</p>-->
                        <!--</li>-->
                        <!--<li class="list-inline-item">-->
                        <!--    <h5 class="mb-0">56210</h5>-->
                        <!--    <p class="text-muted">Pending</p>-->
                        <!--</li>-->
                        <!--<li class="list-inline-item">-->
                        <!--    <h5 class="mb-0">12485</h5>-->
                        <!--    <p class="text-muted">Deactivated</p>-->
                        <!--</li>-->
                    </ul>

                    <div id="morris-line-example" class="morris-charts morris-chart-height"></div>

                </div>
            </div>
        </div> <!-- end col -->
        <!--<div class="col-xl-12">-->
        <!--    <div class="card">-->
        <!--        <div class="card-body">-->
        <!--            <h4 class="mt-0 header-title mb-4">أحدث الطلبات</h4>-->
        <!--            <div class="table-responsive">-->
        <!--                <table class="table table-hover">-->
        <!--                    <thead>-->
        <!--                        <tr>-->
        <!--                            <th scope="col">(#) Id</th>-->
        <!--                            <th scope="col">Name</th>-->
        <!--                            <th scope="col">Date</th>-->
        <!--                            <th scope="col">Amount</th>-->
        <!--                            <th scope="col" colspan="2">Status</th>-->
        <!--                        </tr>-->
        <!--                    </thead>-->
        <!--                    <tbody>-->
        <!--                        <tr>-->
        <!--                            <th scope="row">#14256</th>-->
        <!--                            <td>-->
        <!--                                <div>-->
        <!--                                    <img src="assets/images/users/user-2.jpg" alt=""-->
        <!--                                        class="thumb-md rounded-circle mr-2"> Philip Smead-->
        <!--                                </div>-->
        <!--                            </td>-->
        <!--                            <td>15/1/2018</td>-->
        <!--                            <td>$94</td>-->
        <!--                            <td><span class="badge badge-success">Delivered</span></td>-->
        <!--                            <td>-->
        <!--                                <div>-->
        <!--                                    <a href="#" class="btn btn-primary btn-sm">Edit</a>-->
        <!--                                </div>-->
        <!--                            </td>-->
        <!--                        </tr>-->
        <!--                        <tr>-->
        <!--                            <th scope="row">#14257</th>-->
        <!--                            <td>-->
        <!--                                <div>-->
        <!--                                    <img src="assets/images/users/user-3.jpg" alt=""-->
        <!--                                        class="thumb-md rounded-circle mr-2"> Brent Shipley-->
        <!--                                </div>-->
        <!--                            </td>-->
        <!--                            <td>16/1/2019</td>-->
        <!--                            <td>$112</td>-->
        <!--                            <td><span class="badge badge-warning">Pending</span></td>-->
        <!--                            <td>-->
        <!--                                <div>-->
        <!--                                    <a href="#" class="btn btn-primary btn-sm">Edit</a>-->
        <!--                                </div>-->
        <!--                            </td>-->
        <!--                        </tr>-->
        <!--                        <tr>-->
        <!--                            <th scope="row">#14258</th>-->
        <!--                            <td>-->
        <!--                                <div>-->
        <!--                                    <img src="assets/images/users/user-4.jpg" alt=""-->
        <!--                                        class="thumb-md rounded-circle mr-2"> Robert Sitton-->
        <!--                                </div>-->
        <!--                            </td>-->
        <!--                            <td>17/1/2019</td>-->
        <!--                            <td>$116</td>-->
        <!--                            <td><span class="badge badge-success">Delivered</span></td>-->
        <!--                            <td>-->
        <!--                                <div>-->
        <!--                                    <a href="#" class="btn btn-primary btn-sm">Edit</a>-->
        <!--                                </div>-->
        <!--                            </td>-->
        <!--                        </tr>-->
        <!--                        <tr>-->
        <!--                            <th scope="row">#14259</th>-->
        <!--                            <td>-->
        <!--                                <div>-->
        <!--                                    <img src="assets/images/users/user-5.jpg" alt=""-->
        <!--                                        class="thumb-md rounded-circle mr-2"> Alberto Jackson-->
        <!--                                </div>-->
        <!--                            </td>-->
        <!--                            <td>18/1/2019</td>-->
        <!--                            <td>$109</td>-->
        <!--                            <td><span class="badge badge-danger">Cancel</span></td>-->
        <!--                            <td>-->
        <!--                                <div>-->
        <!--                                    <a href="#" class="btn btn-primary btn-sm">Edit</a>-->
        <!--                                </div>-->
        <!--                            </td>-->
        <!--                        </tr>-->
        <!--                        <tr>-->
        <!--                            <th scope="row">#14260</th>-->
        <!--                            <td>-->
        <!--                                <div>-->
        <!--                                    <img src="assets/images/users/user-6.jpg" alt=""-->
        <!--                                        class="thumb-md rounded-circle mr-2"> David Sanchez-->
        <!--                                </div>-->
        <!--                            </td>-->
        <!--                            <td>19/1/2019</td>-->
        <!--                            <td>$120</td>-->
        <!--                            <td><span class="badge badge-success">Delivered</span></td>-->
        <!--                            <td>-->
        <!--                                <div>-->
        <!--                                    <a href="#" class="btn btn-primary btn-sm">Edit</a>-->
        <!--                                </div>-->
        <!--                            </td>-->
        <!--                        </tr>-->
        <!--                    </tbody>-->
        <!--                </table>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--    </div>-->
        <!--</div>-->
    </div>
@endsection

@section('script')
    <!--Chartist Chart-->
    <script src="{{ URL::asset('dashboard/plugins/chartist/js/chartist.min.js') }}"></script>
    <script src="{{ URL::asset('dashboard/plugins/chartist/js/chartist-plugin-tooltip.min.js') }}"></script>
    <!-- peity JS -->
    <script src="{{ URL::asset('dashboard/plugins/peity-chart/jquery.peity.min.js') }}"></script>
    <script src="{{ URL::asset('dashboard/assets/pages/dashboard.js') }}"></script>
    <script src="{{ URL::asset('dashboard/plugins/morris/morris.min.js') }}"></script>
    <script src="{{ URL::asset('dashboard/plugins/raphael/raphael-min.js') }}"></script>
    <script src="{{ URL::asset('dashboard/assets/pages/morris.init.js') }}"></script>
    <script src="{{ URL::asset('dashboard/assets/pages/chartist.init.js') }}"></script>
    <script>
        var students = $('#studentList').data("users");
        console.log(students);
        var statuses = [];
        var numbers = [];
        students.forEach(
            function(obj) {
                statuses.push(obj.label);
                numbers.push(obj.count);
            }
        );
        var data = {
          series: numbers
        };
        
        var sum = function(a, b) {
          return a + b
        };
        
        new Chartist.Pie('#simple-pie', data, {
          labelInterpolationFnc: function(value, idx) {
            var percentage = Math.round(value / data.series.reduce(sum) * 100) + '%';
            return statuses[idx] + ' ' + percentage;
          }
        });
    </script>
    <script>
        var days = $('#all-orders').data("days");
        var lectures = $('#all-orders').data("lectures");
        var packages = $('#all-orders').data("packages");
        var books = $('#all-orders').data("books");
        new Chartist.Bar('#stacked-bar-chart', {
          labels: days,
          series: [
            lectures,
            packages,
            books
          ]
        }, {
          fullWidth: true,
          stackBars: true,
        //   chartPadding: {
        //     right: 40
        //   },
          axisY: {
            labelInterpolationFnc: function(value) {
            //   return (value / 1000) + 'k';
              return value;
            }
          },
          plugins: [
            Chartist.plugins.tooltip()
          ]
        }).on('draw', function(data) {
          if(data.type === 'bar') {
            data.element.attr({
              style: 'stroke-width: 30px'
            });
          }
        });
    </script>
    <script>
        // new Morris.Line('#morris-line-example', {}, 'y', ['a', 'b', 'c'], ['Activated', 'ddd', 'Deactivated'], ['#ccc', '#3c4ccf', '#02a499']);
        var dataa=[
                {"day":"1","fawry":"687928","bank":"688331"},
                {"day":"2","fawry":"688331","bank":"776029"},
                {"day":"3","fawry":"776029","bank":"542002"},
                {"day":"4","fawry":"542002","bank":"776029"},
                {"day":"5","fawry":"776029","bank":"687928"},
                {"day":"6","fawry":"804183","bank":"776029"},
                {"day":"7","fawry":"776029","bank":"654589"},
                {"day":"8","fawry":"654589","bank":"804183"}
            ]
            
            
            Morris.Line({
              element: 'morris-line-example',
              data: dataa,
              xkey: ['day'],
              ykeys: ['fawry', 'bank'],
              labels: ['fawry', 'bank'],
              parseTime : false
                });
    </script>
@endsection