@extends('admin.adminlayouts.adminlayout')

@section('head')

    <!-- BEGIN PAGE LEVEL STYLES -->
    {!! HTML::style("assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css") !!}
    {!! HTML::style("assets/global/plugins/select2/select2.css") !!}
    {!! HTML::style("assets/global/plugins/jquery-multi-select/css/multi-select.css") !!}
    {!! HTML::style("assets/global/plugins/fullcalendar/fullcalendar.min.css") !!}
    <!-- BEGIN THEME STYLES -->

@stop
@section('mainarea')



    <!-- BEGIN PAGE HEADER-->
    <h3 class="page-title">
        Dashboard
        <small>reports & statistics</small>
    </h3>
    <div class="page-bar">
        <ul class="page-breadcrumb">
            <li>
                <i class="fa fa-home"></i>
                <a href="{{route('admin.dashboard.index')}}">Home</a>
                <i class="fa fa-angle-right"></i>
            </li>
            <li>
                <a href="#">Dashboard</a>
            </li>
        </ul>

    </div>
    <!-- END PAGE HEADER-->


    {{--calender--}}
    <div class="row">
        <div class="col-md-12">
            <div class="portlet box blue calendar">
                <div class="portlet-title">
                    <div class="caption">
                        <i class="fa fa-gift"></i>{!! Lang::get('core.attendance') !!}
                    </div>
                </div>
                <div class="portlet-body">
                    <div class="row">

                        <div class="col-md-9 col-sm-12">
                            <div id="calendar" class="has-toolbar">
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-3">
                            <p>
                            <h3><a href="#" class="btn btn-sm red"></a> {!! Lang::get('core.absent') !!}</h3></p>
                            <p>
                            <h3><a href="#" class="btn btn-sm blue"></a> {!! Lang::get('core.present') !!}</h3></p>

                        </div>
                    </div>
                    <!-- END CALENDAR PORTLET-->
                </div>
            </div>
        </div>

    </div>
    
        <!-- END DASHBOARD STATS -->
    @endsection

    @section('footerjs')


        <!-- BEGIN PAGE LEVEL PLUGINS -->
            {!! HTML::script("assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js") !!}
            {!! HTML::script("assets/global/plugins/bootstrap-select/bootstrap-select.min.js") !!}
            {!! HTML::script("assets/global/plugins/select2/select2.min.js") !!}

            {!! HTML::script("assets/global/plugins/jquery-multi-select/js/jquery.multi-select.js") !!}
            {!! HTML::script("assets/admin/pages/scripts/components-dropdowns.js") !!}


            {!! HTML::script('assets/admin/pages/scripts/ui-blockui.js') !!}
            {!! HTML::script("assets/global/plugins/moment.min.js") !!}
            {!! HTML::script("assets/global/plugins/fullcalendar/fullcalendar.min.js") !!}
            <script src="https://code.highcharts.com/highcharts.js"></script>
            <script src="https://code.highcharts.com/modules/exporting.js"></script>


    <script>
                jQuery(document).ready(function () {
                    Calendar.init();
                    UIBlockUI.init();
                    ComponentsDropdowns.init();
                });

                var Calendar = function () {

                    return {
                        //main function to initiate the module
                        init: function () {
                            Calendar.initCalendar();
                        },

                        initCalendar: function () {

                            if (!jQuery().fullCalendar) {
                                return;
                            }

                            var date = new Date();
                            var d = date.getDate();
                            var m = date.getMonth();
                            var y = date.getFullYear();

                            var h = {};


                            if ($('#calendar').parents(".portlet").width() <= 720) {
                                $('#calendar').addClass("mobile");
                                h = {
                                    left: 'title, prev, next',
                                    center: '',
                                    right: 'today,month'
                                };
                            } else {
                                $('#calendar').removeClass("mobile");
                                h = {
                                    left: 'title',
                                    center: '',
                                    right: 'prev,next,today'
                                };
                            }

                            $('#calendar').fullCalendar('destroy'); // destroy the calendar
                            $('#calendar').fullCalendar({ //re-initialize the calendar
                                header: h,
                                defaultView: 'month',
                                eventRender: function (event, element) {
                                    if (event.className == "holiday") {
                                        var dataToFind = moment(event.start).format('YYYY-MM-DD');
                                        $('.fc-day[data-date="' + dataToFind + '"]').css('background', 'rgba(255, 224, 205, 1)');
                                    }
                                },
                                events: [
                        
                                        @foreach($holidays as $holiday)
                                    {
                                        className: "holiday",
                                        title: "{{$holiday->occassion}}",
                                        start: '{{$holiday->date}}',

                                        color: 'grey'

                                    },

                                        @endforeach
                              
                                        @foreach($attendance as $index=>$attend)

                                        @if($attend[0]!='all present')
                                            @foreach($attend as $em)
                                            {
                                                title: "Name: {{\Illuminate\Support\Str::words($em['fullName'],1,'')}}\n Type: {{ $em['type'] }}",
                                                start: '{{$index}}',
                                                color: '#e50000'

                                            },
                                            @endforeach
                                            @else
                                            {
                                                title: 'all present',
                                                start: '{{$index}}'

                                            },
                                        @endif

                                    @endforeach

                                ]
                            });
                        }
                    };
                }();

             
            </script>
          
            <!-- END PAGE LEVEL PLUGINS -->
       
@endsection