@extends('admin.layout.app')
@section('style')
    <style>
        .text-muted {
            color: #000 !important;
        }
        .morris-hover.morris-default-style {
        position: absolute;
        }
    </style>
    <script src="{{ asset('/adminto/assets/js/modernizr.min.js')}}"></script>
@endsection
@section('content')
<div class="title-page sub-header-title-custom">
    <h5 style="color: inherit;">
        <a href="{{url('/dashboard')}}"><span>الرئيسية </span><i class="fa fa-angle-left" style="padding: 0 5px; color:inherit;"></i></a>
        {{-- <a href="www"><span>wwwwww </span><i class="fa fa-angle-left" style="padding: 0 5px; color:inherit;"></i></a> --}}
        <span> Welcome {{auth()->user()->name}} </span>
    </h5>

    <ul>
        



    </ul>
</div>




<div class="col-lg-3 col-md-6">

    <div class="card-box" style="background-color: #c2daf4;">


        <h4 class="header-title m-t-0 m-b-30" style="color: #000;">عدد الطلبات</h4>

        <div class="widget-chart-1">
            <div class="widget-chart-box-1">
                <i class="fa fa-building-o" aria-hidden="true"></i>
            </div>
            <div class="widget-detail-1">
                <h2 class="p-t-10 m-b-0" style="color: #000;"> {{\App\Order::count()}}</h2>
                <p class="text-muted"> عدد الطلبات إجمالي </p>
            </div>
        </div>
    </div>
</div>

<div class="col-lg-3 col-md-6">

    <div class="card-box" style="background-color: #c2daf4;">


        <h4 class="header-title m-t-0 m-b-30" style="color: #000;">عدد المستخدمين</h4>

        <div class="widget-chart-1">
            <div class="widget-chart-box-1">
                <i class="fa fa-building-o" aria-hidden="true"></i>
            </div>
            <div class="widget-detail-1">
                <h2 class="p-t-10 m-b-0" style="color: #000;"> {{\App\User::count()}}</h2>
                <p class="text-muted"> عدد المستخدمين إجمالي </p>
            </div>
        </div>
    </div>
</div>

<div class="col-lg-4">
    <div class="card-box">


        <h4 class="header-title m-t-0">الطلبات</h4>

        <div class="widget-chart text-center">
            <div id="morris-donut-example" style="height: 245px;"></div>
            <ul class="list-inline chart-detail-list m-b-0">
                <li>
                    <h5 style="color: #ccc;"><i class="fa fa-circle m-r-5"></i> لم يتم اتخاذ اجراء</h5>
                </li>
                <li>
                    <h5 style="color: #ff8acc;"><i class="fa fa-circle m-r-5"></i> تم تاكيد صحة البيانات</h5>
                </li>
                <li>
                    <h5 style="color: #5b69bc;"><i class="fa fa-circle m-r-5"></i> تم التعميد</h5>
                </li>
                <li>
                    <h5 style="color: #35b8e0;"><i class="fa fa-circle m-r-5"></i> تم تسليم المساعده </h5>
                </li>
            </ul>
        </div>
    </div>
</div><!-- end col -->

<div class="col-md-12">
    
 <table class="datatable-buttons table tab-pane-custom table-striped table-bordered"
 style="width: 100%;">
 <thead>
     <tr>
         <th>رقم الطلب</th>
         <th>المحتوي</th>
         <th>تاريخ الاضافة</th>
     </tr>
 </thead>

 <tbody>
     @foreach($nots as $item)
     <tr>
         <td>
             <a href="/dashboard/orders/{{$item->order_id}}">
                #-{{$item->order_id}}
            </a>
            </td>
         <td>{{$item->content}}</td>
         <td>{{$item->created_at->locale('ar')->diffForHumans()}}</td>
     </tr>
     @endforeach
 </tbody>
</table>
{!! $nots->links() !!}
</div>



</div>




@endsection
@section('script')
<!-- jQuery  -->
<script src="{{ asset('/adminto/assets/js/jquery.min.js')}}"></script>
<script src="{{ asset('/adminto/assets/js/bootstrap-rtl.min.js')}}"></script>
<script src="{{ asset('/adminto/assets/js/detect.js')}}"></script>
<script src="{{ asset('/adminto/assets/js/fastclick.js')}}"></script>

<script src="{{ asset('/adminto/assets/js/jquery.slimscroll.js')}}"></script>
<script src="{{ asset('/adminto/assets/js/jquery.blockUI.js')}}"></script>
<script src="{{ asset('/adminto/assets/js/waves.js')}}"></script>
<script src="{{ asset('/adminto/assets/js/wow.min.js')}}"></script>
<script src="{{ asset('/adminto/assets/js/jquery.nicescroll.js')}}"></script>
<script src="{{ asset('/adminto/assets/js/jquery.scrollTo.min.js')}}"></script>

<!-- KNOB JS -->
<!--[if IE]>
        <script type="text/javascript" src="{{ asset('/adminto/assets/plugins/jquery-knob/excanvas.js')}}"></script>
        <![endif]-->
<script src="{{ asset('/adminto/assets/plugins/jquery-knob/jquery.knob.js')}}"></script>

<!--Morris Chart-->
<script src="{{ asset('/adminto/assets/plugins/morris/morris.min.js')}}"></script>
<script src="{{ asset('/adminto/assets/plugins/raphael/raphael-min.js')}}"></script>

<!-- Dashboard init -->
<!-- <script src="{{ asset('/adminto/assets/pages/jquery.dashboard.js')}}"></script> -->

<!-- Datatables-->
<script src="{{ asset('/adminto/assets/plugins/datatables/jquery.dataTables.min.js')}}"></script>
<script src="{{ asset('/adminto/assets/plugins/datatables/dataTables.bootstrap.js')}}"></script>
<script src="{{ asset('/adminto/assets/plugins/datatables/dataTables.buttons.min.js')}}"></script>
<script src="{{ asset('/adminto/assets/plugins/datatables/buttons.bootstrap.min.js')}}"></script>
<script src="{{ asset('/adminto/assets/plugins/datatables/jszip.min.js')}}"></script>
<script src="{{ asset('/adminto/assets/plugins/datatables/pdfmake.min.js')}}"></script>
<script src="{{ asset('/adminto/assets/plugins/datatables/vfs_fonts.js')}}"></script>
<script src="{{ asset('/adminto/assets/plugins/datatables/buttons.html5.min.js')}}"></script>
<script src="{{ asset('/adminto/assets/plugins/datatables/buttons.print.min.js')}}"></script>
<script src="{{ asset('/adminto/assets/plugins/datatables/dataTables.fixedHeader.min.js')}}"></script>
<script src="{{ asset('/adminto/assets/plugins/datatables/dataTables.keyTable.min.js')}}"></script>
<script src="{{ asset('/adminto/assets/plugins/datatables/dataTables.responsive.min.js')}}"></script>
<script src="{{ asset('/adminto/assets/plugins/datatables/responsive.bootstrap.min.js')}}"></script>
<script src="{{ asset('/adminto/assets/plugins/datatables/dataTables.scroller.min.js')}}"></script>
<script src="{{ asset('/adminto/assets/plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js')}}"></script>
<!-- Datatable init js -->
<script src="{{ asset('/adminto/assets/pages/datatables.init.js')}}"></script>

<!-- Plugins Js -->
<script src="{{ asset('/adminto/assets/plugins/switchery/switchery.min.js')}}"></script>
<script src="{{ asset('/adminto/assets/plugins/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js')}}"></script>
<script type="text/javascript" src="{{ asset('/adminto/assets/plugins/multiselect/js/jquery.multi-select.js')}}">
</script>
<script type="text/javascript" src="{{ asset('/adminto/assets/plugins/jquery-quicksearch/jquery.quicksearch.js')}}">
</script>
<script src="{{ asset('/adminto/assets/plugins/select2/dist/js/select2.min.js')}}" type="text/javascript"></script>
<script src="{{ asset('/adminto/assets/plugins/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.min.js')}}"
    type="text/javascript"></script>
<script src="{{ asset('/adminto/assets/plugins/bootstrap-inputmask/bootstrap-inputmask.min.js')}}"
    type="text/javascript"></script>
<script src="{{ asset('/adminto/assets/plugins/moment/moment.js')}}"></script>
<script src="{{ asset('/adminto/assets/plugins/timepicker/bootstrap-timepicker.min.js')}}"></script>
<script src="{{ asset('/adminto/assets/plugins/mjolnic-bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js')}}">
</script>
<script src="{{ asset('/adminto/assets/plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js')}}"></script>
<script src="{{ asset('/adminto/assets/plugins/bootstrap-daterangepicker/daterangepicker.js')}}"></script>
<script src="{{ asset('/adminto/assets/plugins/bootstrap-maxlength/bootstrap-maxlength.min.js')}}"
    type="text/javascript"></script>


<!-- App js -->
<script src="{{ asset('/adminto/assets/js/jquery.core.js')}}"></script>
<script src="{{ asset('/adminto/assets/js/jquery.app.js')}}"></script>

<script type="text/javascript">
    ! function ($) {
        "use strict";

        var Dashboard1 = function () {
            this.$realData = []
        };

        //creates Bar chart
        Dashboard1.prototype.createBarChart = function (element, data, xkey, ykeys, labels, lineColors) {
                Morris.Bar({
                    element: element,
                    data: data,
                    xkey: xkey,
                    ykeys: ykeys,
                    labels: labels,
                    hideHover: 'auto',
                    resize: true, //defaulted to true
                    gridLineColor: '#eeeeee',
                    barSizeRatio: 0.2,
                    barColors: lineColors
                });
            },

            //creates line chart
            Dashboard1.prototype.createLineChart = function (element, data, xkey, ykeys, labels, opacity, Pfillcolor,
                Pstockcolor, lineColors) {
                Morris.Line({
                    element: element,
                    data: data,
                    xkey: xkey,
                    ykeys: ykeys,
                    labels: labels,
                    fillOpacity: opacity,
                    pointFillColors: Pfillcolor,
                    pointStrokeColors: Pstockcolor,
                    behaveLikeLine: true,
                    gridLineColor: '#eef0f2',
                    hideHover: 'auto',
                    resize: true, //defaulted to true
                    pointSize: 0,
                    lineColors: lineColors
                });
            },

            //creates Donut chart
            Dashboard1.prototype.createDonutChart = function (element, data, colors) {
                Morris.Donut({
                    element: element,
                    data: data,
                    resize: true, //defaulted to true
                    colors: colors
                });
            },


            Dashboard1.prototype.init = function () {

                
                //creating donut chart
                var $donutData = [{
                        label: "لم يتم اتخاذ اجراء",
                        value: parseInt("{{\App\Order::whereNull('step1')->whereNull('step2')->whereNull('step3')->count()}}")
                    },{
                        label: "تم تاكيد صحة البيانات",
                        value: parseInt("{{\App\Order::whereNotNull('step1')->whereNull('step2')->whereNull('step3')->count()}}")
                    },
                    {
                        label: "تم التعميد",
                        value: parseInt(
                            "{{\App\Order::whereNotNull('step1')->whereNotNull('step2')->whereNull('step3')->count()}}")
                    },
                    {
                        label: "تم تسليم المساعده",
                        value: parseInt("{{\App\Order::whereNotNull('step1')->whereNotNull('step2')->whereNotNull('step3')->count()}}")
                    }
                ];
                this.createDonutChart('morris-donut-example', $donutData, ['#cccccc', '#ff8acc', '#5b69bc', "#35b8e0"]);
            },
            //init
            $.Dashboard1 = new Dashboard1, $.Dashboard1.Constructor = Dashboard1
    }(window.jQuery),

    //initializing 
    function ($) {
        "use strict";
        $.Dashboard1.init();
    }(window.jQuery);

</script>

@endsection