@extends('app') @section('page-title')
<div class="row bg-title">
    <!-- .page title -->
    <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
        <h4 class="page-title"><i class="icon-speedometer"></i> Dashboard</h4>
    </div>
    <!-- /.page title -->
    <!-- .breadcrumb -->
    <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12">
        <ol class="breadcrumb">
            <li><a href="/super-admin/dashboard">Home</a></li>
            <li class="active">Dashboard</li>
        </ol>
    </div>
    <!-- /.breadcrumb -->
</div>
@endsection @push('head-script')
<link rel="stylesheet" href="/assets/plugins/bower_components/calendar/dist/fullcalendar.css">
<link rel="stylesheet" href="/assets/plugins/bower_components/morrisjs/morris.css">
<!--Owl carousel CSS -->
<link rel="stylesheet" href="/assets/plugins/bower_components/owl.carousel/owl.carousel.min.css">
<!--Owl carousel CSS -->
<link rel="stylesheet" href="/assets/plugins/bower_components/owl.carousel/owl.theme.default.css">
<!--Owl carousel CSS -->
<link rel="stylesheet" href="/assets/plugins/bower_components/calendar/dist/fullcalendar.css">
<style>
    .col-in {
        padding: 0 20px !important;
    }
    
    .fc-event {
        font-size: 10px !important;
    }
</style>
@endpush @section('content')
<div class="white-box">
    @if (isset($status))
    <div class="pad margin no-print">
        <div class="alert alert-{{$status['code']}} alert-dismissible fade in" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
            <h4><i class="icon fa fa-ban"></i> {{ $status['header'] }}</h4>
            <ul>
                @foreach ($status['messages'] as $m)
                <li>{{$m}}</li>
                @endforeach
            </ul>
        </div>
    </div>
    @endif
    <div class="row dashboard-stats front-dashboard">
        <!-- <div class="alert alert-info col-md-12">
            <div class="col-md-10"><i class="ti-gift"></i> New update available <label class="label label-success">3.9.2</label></div>
            <div class="col-md-2"><a href="/super-admin/settings/update-settings" class="btn btn-success btn-small">Update Now <i
                        class="fa fa-arrow-right"></i></a></div>
        </div> -->



        <div class="col-md-3 col-sm-6">
            <div class="white-box">
                <div class="row">
                    <div class="col-xs-3">
                        <div>
                            <span class="bg-info-gradient"><i class="icon-layers"></i></span>
                        </div>
                    </div>
                    <div class="col-xs-9 text-right">
                        <span class="widget-title"> Total Companies</span><br>
                        <span class="counter">{{count($organizations)}}</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-3 col-sm-6">
            <div class="white-box">
                <div class="row">
                    <div class="col-xs-3">
                        <div>
                            <span class="bg-success-gradient"><i class="icon-layers"></i></span>
                        </div>
                    </div>
                    <div class="col-xs-9 text-right">
                        <span class="widget-title"> Total Partners</span><br>
                        <span class="counter">{{count($partners)}}</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-3 col-sm-6 hide">
            <div class="white-box">
                <div class="row">
                    <div class="col-xs-3">
                        <div>
                            <span class="bg-warning-gradient"><i class="icon-layers"></i></span>
                        </div>
                    </div>
                    <div class="col-xs-9 text-right">
                        <span class="widget-title"> Total Vistors Count</span><br>
                        <span class="counter">{{Visitor::count()}}</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-3 col-sm-6 hide">
            <div class="white-box">
                <div class="row">
                    <div class="col-xs-3">
                        <div>
                            <span class="bg-danger-gradient"><i class="icon-layers"></i></span>
                        </div>
                    </div>
                    <div class="col-xs-9 text-right">
                        <span class="widget-title">Online Users</span><br>
                        <span class="counter">{{$live_user}}</span>
                    </div>
                </div>
            </div>
        </div>


    </div>


    <div class="row hide" style="margin-top:25px">

   
            <div class="col-xs-12">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="white-box">
                            <h3 class="box-title m-b-0">Daily Visitor Graphical Report</h3>

                            <div id="visitorChart" style="height: 300px;"></div>
                        </div>
                    </div>

                </div>

            </div>
        
    </div>

    <div class="row hide" style="margin-top:25px">
        @if(Auth::user()->can_role('Attendance View'))
            <div class="col-xs-12">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="white-box">
                            <h3 class="box-title m-b-0">@lang('modules.dashboard.Attendance')</h3>

                            <div id="morris-area-chart" style="height: 300px;"></div>
                            {{-- <h6 style="line-height: 2em;"><span class=" label label-danger">@lang('app.note'):</span> @lang('messages.earningChartNote') <a href="{!! route('admin.settings.index') !!}"><i class="fa fa-arrow-right"></i></a></h6> --}}
                        </div>
                    </div>

                </div>

            </div>
        @endif
    </div>


    <div class="row hide" style="margin-top:25px">
        <div class="col-xs-12">
            <div class="white-box">
                <h3 class="box-title m-b-0">Financial Earnings</h3>
                <ul class="list-inline text-center m-t-40">
                    <li>
                        <h5><i class="fa fa-circle m-r-5" style="color:rgb(13, 219, 228);"></i>Earnings </h5>
                    </li>
                </ul>
                <div id="morris-area-chart2" style="height: 340px;"></div>
            </div>
        </div>
    </div>

    <div class="row hide">
        <div class="col-md-12">
            <div class="panel panel-inverse">
                <div class="panel-heading">@lang('app.menu.Events')</div>
                <div class="panel-wrapper collapse in" style="overflow: auto">
                    <div class="panel-body">
                        <div id="calendar"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    @endsection @push('footer-script')

    <script>

    var taskEvents = {!!$calender!!};

        var calendarLocale = '2n';
        var firstDay = '1';
    </script>

    <script src="/assets/plugins/bower_components/raphael/raphael-min.js"></script>
    <script src="/assets/plugins/bower_components/morrisjs/morris.js"></script>

    <script src="/assets/plugins/bower_components/waypoints/lib/jquery.waypoints.js"></script>
    <script src="/assets/plugins/bower_components/counterup/jquery.counterup.min.js"></script>

    <!-- jQuery for carousel -->
    <script src="/assets/plugins/bower_components/owl.carousel/owl.carousel.min.js"></script>
    <script src="/assets/plugins/bower_components/owl.carousel/owl.custom.js"></script>

    <!--weather icon -->
    <script src="/assets/plugins/bower_components/skycons/skycons.js"></script>

    <script src="/assets/plugins/bower_components/calendar/jquery-ui.min.js"></script>
    <script src="/assets/plugins/bower_components/moment/moment.js"></script>

    <script src="/assets/plugins/bower_components/calendar/dist/fullcalendar.min.js"></script>
    <script src="/assets/plugins/bower_components/calendar/dist/jquery.fullcalendar.js"></script>
    <script src="/assets/plugins/bower_components/calendar/dist/locale-all.js"></script>
    <script src="/assets/js/event-calendar.js"></script>


    <script>

        var getEventDetail = function (id) {
                
        }

        $(document).ready(function() {
            var chartData = [{
                "month": "Jan",
                "amount": 0
            }, {
                "month": "Feb",
                "amount": 0
            }, {
                "month": "Mar",
                "amount": 0
            }, {
                "month": "Apr",
                "amount": 0
            }, {
                "month": "May",
                "amount": 0
            }, {
                "month": "Jun",
                "amount": 0
            }, {
                "month": "Jul",
                "amount": 0
            }, {
                "month": "Aug",
                "amount": 0
            }, {
                "month": "Sep",
                "amount": 0
            }, {
                "month": "Oct",
                "amount": 0
            }, {
                "month": "Nov",
                "amount": 0
            }, {
                "month": "Dec",
                "amount": 0
            }];

            Morris.Area({
                element: 'morris-area-chart2',
                data: chartData,
                lineColors: ['#01c0c8'],
                xkey: ['month'],
                ykeys: ['amount'],
                labels: ['Earning'],
                pointSize: 0,
                lineWidth: 0,
                resize: true,
                fillOpacity: 0.8,
                behaveLikeLine: true,
                gridLineColor: '#e0e0e0',
                hideHover: 'auto',
                parseTime: false
            });

            $('.vcarousel').carousel({
                interval: 3000
            })
        });

        function hidePopUp() {
            $.easyAjax({
                url: '/super-admin/dashboard/stripe-pop-up-close',
                type: "GET",
            })
        }  

        $(".counter").counterUp({
            delay: 100,
            time: 1200
        });


        
    $(document).ready(function () {
            var chartData2 = {!!  $chartData !!};
            var chartData3 = {!!  $visitors !!};
            //console.log(chartData2);
            function barChart() {
                Morris.Bar({
                    element: 'morris-area-chart',
                    data: chartData2,
                    xkey: 'date',
                    ykeys: ['employeeCount','employeeLeaveCount','employeeabsentCount'],
                    labels: ['Employee','Leave','Absent'],
                    pointSize: 3,
                    fillOpacity: 0,
                    barColors: ['#6fbdff','#ffd700','#ff6347'],
                    behaveLikeLine: true,
                    gridLineColor: '#e0e0e0',
                    lineWidth: 2,
                    hideHover: 'auto',
                    lineColors: ['#e20b0b'],
                    resize: true

                });

            }

            function visitorChart() {
                Morris.Bar({
                    element: 'visitorChart',
                    data: chartData3,
                    xkey: 'date',
                    ykeys: ['count'],
                    labels: ['User Visit'],
                    pointSize: 3,
                    fillOpacity: 0,
                    barColors: ['#6fbdff'],
                    behaveLikeLine: true,
                    gridLineColor: '#e0e0e0',
                    lineWidth: 2,
                    hideHover: 'auto',
                    lineColors: ['#e20b0b'],
                    resize: true

                });

            }

            

            barChart();
            visitorChart();


            
        })
    
    
    </script>
    @endpush