@extends('backend._partials.app')
@section('maincontent')
    <div class="col-md-12">
        <div class="card">
            <div class="header">
                My Rota
            </div>
            <div class="content" id="loadCalendar">
                    <div id="fullCalendar"></div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function () {
            var today = new Date();

            var yearMonth= today.getFullYear()+"-"+((today.getMonth()+1)<10? '0'+(today.getMonth()+1) : (today.getMonth()+1)); //year and month
            getEvent(yearMonth);

            /* Retrieve data based on usergroup and year month when click next/prev button*/
            $('.fc-prev-button').click(function(){
                var date = $('#fullCalendar').fullCalendar('getDate')._d;
                yearMonth= date.getFullYear()+"-"+((date.getMonth()+1)<10? '0'+(date.getMonth()+1) : (date.getMonth()+1)); //year and month
                console.log(yearMonth);
                getEvent(yearMonth);
            });

            $('.fc-next-button').click(function(){
                var date = $('#fullCalendar').fullCalendar('getDate')._d;
                yearMonth= date.getFullYear()+"-"+((date.getMonth()+1)<10? '0'+(date.getMonth()+1) : (date.getMonth()+1)); //year and month
                getEvent(yearMonth);
            });

        });
        function getEvent(yearMonth) {

            var events = [];
            today = new Date();
            y = today.getFullYear();
            m = today.getMonth();
            d = today.getDate();
            $.ajax({
                url: "{{URL::to('getMyRotaData')}}/"+yearMonth,
                async: false,
                dataType: 'json',
                success: function (data) {
                    events = data;
                }
            });
            $calendar = $('#fullCalendar');
            $calendar.fullCalendar({
                header: {
                    left: 'title',
                    right: 'prev,next today'
                },
                defaultDate: today,
                selectable: false,
                selectHelper: false,
                titleFormat: {
                    month: 'MMMM YYYY', // September 2015
                    week: "MMMM D YYYY", // September 2015
                    day: 'D MMM, YYYY'  // Tuesday, Sep 8, 2015
                },
                eventLimit: true, // allow "more" link when too many events
                // color classes: [ event-blue | event-azure | event-green | event-orange | event-red ]
                events: events,
                eventClick: function(event) {
                    var date = new Date(event.start);
                    if(event.note==null){
                        event.note="No records found!";
                    }
                        swal({title:date.toDateString(),
                            html:"<div style='float:left;text-align:left;'><p><b>Time:</b> "+event.title+ " &nbsp;&nbsp;<b>Break:</b> "+event.break+" minutes</p>"+
                                "<p style='float:left;text-align:left;'><b>Note:</b>"+event.note + "</p></div><br>"
                        })

                }

            });
            $('#fullCalendar').fullCalendar( 'removeEvents');
            $('#fullCalendar').fullCalendar( 'addEventSource', events);

        }

    </script>
@endsection