@extends('layouts.app-admin')
@section('content')

<div class="card">
    <div class="card-header">

        Attendance Log - <strong>{{$stu->name}}</strong>
    </div>
    <div class="card-body card-block">
        <div id="multi-month-view"></div>
    </div>
</div>



{{-- <div class="row">
    <div class="bg-white card">
        <div class="border-b card-header border-blueGray-200">
            <div class="card-header-container">

                <div class="row">
                    <div class="col-md-12">
                        <h3 class="title-5 m-b-35"> Attendance Log</h3> --}}
                        {{-- <pre>@json($studentAttendanceLogs,JSON_PRETTY_PRINT)</pre>  --}}
                        {{-- <pre>@json($events,JSON_PRETTY_PRINT)</pre> --}}
                        {{-- <div id="multi-month-view"></div>
                    </div>
                </div>



            </div>
        </div>
    </div>
</div> --}}
@endsection
@push('bottom2js')
<script>
    const events = @json($events);
    const logs = @json($studentAttendanceLogs);
    const maxDate = @json($lastDay);
    console.log(logs);
</script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('multi-month-view');

        var calendar = new FullCalendar.Calendar(calendarEl, {
            // timeZone: 'Asia/Kolkata',
            timeZone: '+5:30',
            initialView: 'multiMonthYear',
            editable: false,
            // events: '/api/demo-feeds/events.json'
            events: events,
            maxDate:maxDate,
            views: {
                multiMonthYear: {
                    type: 'multiMonth',
                    // duration: { months: 1 },
                        multiMonthMaxColumns :2

                },
                multiMonthYearSingle: {
                    type: 'multiMonth',
                    // duration: { months: 1 },
                        multiMonthMaxColumns :1

                },
                multiMonthYearDouble: {
                    type: 'multiMonth',
                    // duration: { months: 1 },
                        multiMonthMaxColumns :2

                },
                multiMonthYearTriple: {
                    type: 'multiMonth',
                    // duration: { months: 1 },
                        multiMonthMaxColumns :3

                },
            },

            //   Event content rendering options
            eventContent: function(info) {
                // // Get the month name
                // var monthName = info.event.start.toLocaleString('default', { month: 'long' });
                // // Create a new element to display the modified event title
                // var titleElement = document.createElement('div');
                // titleElement.innerHTML = monthName + ' - ' + info.event.title;
                // // Return the custom content
                // return { domNodes: [titleElement] };
                var titleElement = document.createElement('div');
                titleElement.classList.add('fc-event-title');
                titleElement.innerHTML = info.event.extendedProps.start_time + ' ' + info.event.title;
                // Return the custom content
                return { domNodes: [titleElement] };

                // return info.event.title;
                // return `<div class="fc-daygrid-event-dot"></div><div class="fc-event-time">${info.event.start_time}</div><div class="fc-event-title">${info.event.title}</div>`;
            },

             // Day header content rendering options
            // dayHeaderContent: function(info) {
            //     // Get the month name
            //     var monthName = info.date.toLocaleString('default', { month: 'long' });
            //     // Count the number of events in the current month
            //     var eventsInMonth = calendar.getEvents().filter(function(event) {
            //         return event.start.getMonth() === info.date.getMonth();
            //     }).length;
            //     // Create a new element to display the modified month header
            //     var headerElement = document.createElement('div');
            //     headerElement.innerHTML = monthName + ' - (' + eventsInMonth + ')';
            //     // Return the custom content
            //     return { domNodes: [headerElement] };
            // },

            multiMonthTitleFormat(info) {
                console.log('multiMonthTitleFormat',arguments);
                var momDate = moment(info.date);
                // Get the month name
                var monthName = momDate.format('MMMM');
                // Count the number of events in the current month
                var eventsInMonth = events.filter(function(event) {
                    let s = moment(event.start);
                    // return event.start.month === info.date.month;
                    return s.month() === info.date.month;
                }).length;
                // Create a new element to display the modified month header
                var headerElement = document.createElement('div');
                headerElement.innerHTML = firmattedText =  monthName + ' - (' + eventsInMonth + ')';
                // Return the custom content
                // return { domNodes: [headerElement] };
                return firmattedText;
            },

             // Event click callback
            eventClick: function(info) {
                console.log('eventClick',info);
            // Show Bootstrap popover on event click
            $(info.el).popover({
                title: info.event.extendedProps.start_time+ ' - ' +info.event.extendedProps.end_time,
                content: info.event.extendedProps.start_time+ ' ' +info.event.title,
                trigger: 'focus',
                placement: 'top',
                container: 'body',
            });

            $(info.el).popover('toggle');
            },

        });

        calendar.render();
    });
</script>
@endpush