@section('page-specific-style')

    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js'></script>

@endsection



<div class="card">
    <div class="card-body">
        <div id='calendar' class=""></div>
    </div>
</div>




@section('page-specific-script')
    @parent

    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js'></script>


    <!-- Date Range Picker -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

    <script>
        $(document).ready(function () {

            $('input.dp').daterangepicker({
                autoUpdateInput: false,
                locale: {
                    cancelLabel: 'Clear'
                }
            });

            $('input.dp').on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
            });
            $('input.dp').on('cancel.daterangepicker', function(ev, picker) {
                $(this).val('');
            });
        })
    </script>

    <script>
        var activityEvents = {!! $activityEvents !!};

        document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            headerToolbar: {
                left: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek,listDay',
                center: 'title'
            },
            themeSystem: 'standard',
            initialView: 'dayGridMonth',
            buttonText: { today: "Today" },
            views: {
                'dayGridMonth': { buttonText: "Month" },
                'timeGridWeek': { buttonText: "Week" },
                'timeGridDay': { buttonText: "Day" },
                'listWeek': { buttonText: "Week List" },
                'listDay': { buttonText: "Day List" },
            },
            dateClick: function(info) {
                calendar.changeView('timeGridDay', info.dateStr);
            },
            events: activityEvents, // Load from the variable
        });
        calendar.render();

        // Function to reload events dynamically
        function reloadCalendar() {
            let filters = {
                assigned_to : $('select[name=assigned_to]').val(),
                created_at : $('input[name=created_at]').val(),
                scheduled_on : $('input[name=scheduled_on]').val(),
                type : $('select[name=type]').val(),
                state : $('select[name=state]').val(),
                tags : $('input[name=tags]').val(),
                lead_id : $('select[name=lead_id]').val(),
                full_name_search : $('#activity-search').val()
            };

            $.ajax({
                url: window.location.href, // Reload the same page
                type: 'GET',
                data: filters,
                success: function(response) {
                    let newEvents = response.activityEvents;
                    calendar.removeAllEvents();
                    calendar.addEventSource(newEvents);
                },
                beforeSend: function() {
                    $.LoadingOverlay("show", {
                        image: "",
                        text: "Loading...",
                        background: "rgba(0, 0, 0, 0.5)",
                        textColor: "#fff",
                        fontSize: "10px !important"
                    });
                },
                complete: function() {
                    $.LoadingOverlay("hide");
                },
                error: function(xhr, status, error) {
                    console.error(error);
                    $.LoadingOverlay("hide");
                }
            });
        }

        // Attach event listener to filter elements
        $('#activity-search').on('keyup', function() {
            reloadCalendar();
        });

        $('select[name=assigned_to]').on('change', function() {
            reloadCalendar();
        });

        $('input[name=created_at]').on('apply.daterangepicker', function(ev, picker) {
            reloadCalendar();
        });

        $('input[name=scheduled_on]').on('apply.daterangepicker', function(ev, picker) {
            reloadCalendar();
        });

        $('select[name=type]').on('change', function() {
            reloadCalendar();
        });

        $('select[name=state]').on('change', function() {
            reloadCalendar();
        });

        $('input[name=tags]').on('keyup', function() {
            reloadCalendar();
        });

        $('select[name=lead_id]').on('change', function() {
            reloadCalendar();
        });

    });
    </script>

    {{-- <script>

        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                headerToolbar: {
                    left: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek,listDay', // Buttons for switching between views
                    center : 'title'
                },
                themeSystem: 'standard',
                initialView: 'dayGridMonth',
                buttonText: { today: "Today" },
                views : {
                    'dayGridMonth' : {
                        buttonText: "Month"
                    },
                    'dayGridWeek' : {
                        buttonText: "Week"
                    },
                    'dayGridDay' : {
                        buttonText: "Day"
                    },
                    'timeGridWeek' : {
                        buttonText: "Week"
                    },
                    'timeGridDay' : {
                        buttonText: "Day"
                    },
                    'listWeek' : {
                        buttonText: "Week List"
                    },
                    'listDay' : {
                        buttonText: "Day List"
                    },
                },
                dateClick: function(info) {
                    calendar.changeView('timeGridDay',info.dateStr);
                },
                eventContent: function( info ) {
                    return {html: '<i class="'+info.event.extendedProps.action_icon+'" style="padding-right: 2px"></i> '+info.event.title};
                },

                eventMouseEnter : function(info) {
                    info.el.style.borderColor = 'red';
                    let editLink = '';
                    if(info.event.extendedProps.state == 'Scheduled') {
                        editLink = '<a href="/activities/'+info.event.extendedProps.id+'/edit" target="_blank" class="btn btn-sm btn-warning" '+
                        '    <i class="fas fa-edit"></i>Edit Activity</a>';
                    }
                    $(info.el).popover({
                        trigger: 'hover click',
                        delay: { "show": 100, "hide": 500 },
                        title: '<b>' + info.event.title + '</b>',
                        content:
                            '<b>Type: </b>' + info.event.extendedProps.type + '<br>' +
                            '<i class="' + info.event.extendedProps.action_icon + '"></i> <b>' + info.event.extendedProps.date + '</b> by ' +
                            '<b>' + info.event.extendedProps.action_by + '</b><br>' +
                            '<b>Desc: </b>' + info.event.extendedProps.description + '<br>' +
                            '<div class="mt-2">' +
                            '<a class="btn btn-sm btn-info" href="' + info.event.extendedProps.lead_url + '" target="_blank">' +
                            '<i class="fa fa-eye"></i> View Lead </a> ' + editLink +
                            '</div>',
                        html: true,
                        placement: 'top'
                        });

                        $(document).on('mouseout', '.popover', function() {
                        $(this).popover('show');
                    });
                },
                events : {!! $activityEvents !!}
            });
            calendar.render();
        });

        var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
        var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
            return new bootstrap.Dropdown(popoverTriggerEl)
        })
    </script> --}}

    <script>
        let appUrl = '{{ env('APP_URL') }}';
        $('#lead_id_autocomplete_filter').select2({
            placeholder: 'Select Lead',
            minimumInputLength : 3,
            ajax : {
                url : appUrl+"/activities/leads",
                dataType: 'json',
                processResults: function (data) {
                    return {
                        results: data.data
                    };
                }
            }
        });
    </script>

@endsection