<div class="col-md-7">
    <div class="card">
        <div class="header text-center">
        </div>
        <div class="content">
            <div id="fullCalendar"></div>
        </div>
    </div>
</div>
<div class="col-md-5">
    <div class="card">
        <div class="header text-center">
            <h4 class="title">Modify Calendar</h4>
        </div>
        <div class="content">
            <div class="fresh-datatables">
                <table id="fullCalendarTable" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%" style="width:100%">
                    <thead>
                    <tr>
                        <th>Date</th>
                        <th>Event</th>
                        <th>Type</th>
                        <th>Action</th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<!--  Full Calendar Plugin    -->

<script>
    $().ready(function(){
        var events = {};
        var eventCreatedStatus='';
        $.ajax({
            url: "{{URL::to('getEvent')}}/",
            async: false,
            dataType: 'json',
            success: function(data) {
                events = data;
            }
        });

        $calendar = $('#fullCalendar');

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

        $calendar.fullCalendar({
            header: {
                left: 'title',
                right: 'prev,next today'
            },
            defaultDate: today,
            selectable: true,
            selectHelper: false,
            titleFormat: {
                month: 'MMMM YYYY', // September 2015
                week: "MMMM D YYYY", // September 2015
                day: 'D MMM, YYYY'  // Tuesday, Sep 8, 2015
            },
            select: function(start, end) {

            },
            eventLimit: true, // allow "more" link when too many events
            // color classes: [ event-blue | event-azure | event-green | event-orange | event-red ]
            events: events

        });
        $('#fullCalendarTable').DataTable({
            "pagingType": "full_numbers",
            "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
            responsive: true,
            language: {
                search: "_INPUT_",
                searchPlaceholder: "Search records",
            }

        });

    });
    function deleteConfirm(url,id,row) {
        swal({
            title: "Are you sure?",
            text: "You will not be able to recover this!",
            type: "warning",
            showCancelButton: true,
            closeOnConfirm: true,
            closeOnCancel: true
        }, function (isConfirm) {
            if (isConfirm) {
                $.ajax({
                    url: "{{URL::to('deleteEvent')}}",
                    type: 'POST', // define the type of HTTP verb we want to use (POST for our form)
                    data: {
                        calendarId: id,
                        _token: '{{csrf_token()}}'
                    },
                    dataType: 'json',
                    success: function (data) {

                        if(data.success){
                            $(row).closest('tr').remove();
                            $.notify({
                                icon: 'pe-7s-bell',
                                message: data.success

                            },{
                                type: 'success',
                                timer: 3000
                            });
                        }else{
                            $.notify({
                                icon: 'pe-7s-bell',
                                message: data.error

                            },{
                                type: 'warning',
                                timer: 3000
                            });
                        }
                    }
                });
            }
        });
    }
</script>