@extends('layouts.front_app')
@section('content')
    <style>
        .--noshadow {
            -webkit-box-shadow: none;
            box-shadow: none;
        }
    </style>
    <!-- Main Hero Section -->
    <section class="inner-page">
        <div class="container">
            <h2 class="heading">Calendar</h2>
        </div>
    </section>
    <!-- ! Main Hero Section -->

    <!-- Upcoming Show Section -->
    <section class="calender-section">
        <div class="container">
            <h2 class="heading text-center mb-4">Calendar</h2>
            <div class="row bgSecondary">
                <div class="col-md p-0">
                    <div class="--noshadow" id="evoCalendar"></div>
                </div>
                <div class="col-md p-0">
                    <div class="searchScedule">
                        <h3>Search Schedule</h3>
                        <input type="text" id="searchInput" placeholder="Search Schedule">
                        {{--                        <h2>Schedule</h2>--}}
                        <h4 id="selectedMonth"></h4>
                        <ul id="eventList">
                            @foreach($arr as $data)
                                <li>
                                    <h5>{{ $data['name'] }}</h5>
                                    <span><b>Type: </b>{{ $data['eventType'] }}</span>
                                    <br>
                                    <span>{{ $data['date'] }}</span>
                                    <p></p>
                                    <a href="{{ $data['link'] }}">View Details &gt;</a>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-12">
            <div class="map">

            </div>
        </div>
        </div>

    </section>
    <!-- ! Upcoming Show Section -->
@endsection

@push('calendar_script')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            let events = JSON.parse(`{!! $json !!}`);

            $('#evoCalendar').evoCalendar({
                calendarEvents: events,
                todayHighlight: true,
                sidebarToggler: true,
                eventListToggler: true,
                canAddEvent: false,

                // Event handler when a date is selected
                onSelectDate: function () {
                    populateEventList(events);
                },
                onAddEvent: function () {
                    console.log("onAddEvent!");
                },
            });

            // Highlight event dates and customize today styles
            highlightEventDates(events);

            // Function to populate the event list
//             function populateEventList(events) {
//                 var eventList = $('#eventList');
//
//                 var map = $('.map');
//
//                 eventList.empty();
//
//                 var selectedDate = document.querySelector('.calendar-active');
//                 var selectedMonth = document.querySelector('.active-month');
//
//                 if (selectedDate) {
//                     var monthText = selectedMonth.textContent;
//                     $('#selectedMonth').empty();
//                     $('#selectedMonth').append(monthText);
//
//                     var dataVal = selectedDate.getAttribute('date-val');
//
// //                     events.forEach(function (event) {
// //                         if (event.date === dataVal) {
// //                             var listItem = $('<li>');
// //                             listItem.append($('<h5>').text(event.name));
// //                             listItem.append($('<span>').html('<b>Type: </b>' + event.eventType));
// //                             listItem.append($('<br>'));
// //                             listItem.append($('<span>').text(event.date));
// //                             listItem.append($('<p>').text(event.description));
// //                             listItem.append($('<a>').attr('href', event.link).text('View Details >'));
// //
// //                             eventList.append(listItem);
// //
// //                             map.empty();
// //                             map.append(`
// //     <iframe
// //         src="${event.map_location}"
// //         width="100%" height="680" style="border:0;" allowfullscreen="" loading="lazy"
// //         referrerpolicy="no-referrer-when-downgrade">
// //     </iframe>
// // `);
// //
// //                         }
// //                     });
//
//                     events.forEach(function (event) {
//                         if (event.date === dataVal) {
//                             console.log(dataVal);
//                             var listItem = $('<li>');
//                             listItem.append($('<h5>').text(event.name));
//                             listItem.append($('<span>').html('<b>Type: </b>' + event.eventType));
//                             listItem.append($('<br>'));
//                             listItem.append($('<span>').text(event.date));
//                             listItem.append($('<p>').text(event.description));
//                             listItem.append($('<a>').attr('href', event.link).text('View Details >'));
//
//                             eventList.append(listItem);
//                                if (dataVal){
//                                    if (event.map_location && event.map_location.trim() !== '') {
//                                        map.empty();
//
//                                        map.append(`
//                 <iframe
//                     src="${event.map_location}"
//                     width="100%" height="680" style="border:0;" allowfullscreen="" loading="lazy"
//                     referrerpolicy="no-referrer-when-downgrade">
//                 </iframe>
//             `);
//                                    } else {
//                                        map.empty(); // Clear previous map if current event has no map
//                                    }
//                                }
//
//                         }
//                     });
//
//                 }
//             }

            function populateEventList(events) {
                var eventList = $('#eventList');
                var map = $('.map');

                eventList.empty();
                map.empty(); // Clear the map by default

                var selectedDate = document.querySelector('.calendar-active');
                var selectedMonth = document.querySelector('.active-month');

                if (selectedDate) {
                    var monthText = selectedMonth.textContent;
                    $('#selectedMonth').empty().append(monthText);

                    var dataVal = selectedDate.getAttribute('date-val');
                    let foundEvent = false; // Flag to track if any event matches

                    events.forEach(function (event) {
                        if (event.date === dataVal) {
                            foundEvent = true;

                            var listItem = $('<li>');
                            listItem.append($('<h5>').text(event.name));
                            listItem.append($('<span>').html('<b>Type: </b>' + event.eventType));
                            listItem.append($('<br>'));
                            listItem.append($('<span>').text(event.date));
                            listItem.append($('<p>').text(event.description));
                            listItem.append($('<a>').attr('href', event.link).text('View Details >'));

                            eventList.append(listItem);

                            if (event.map_location && event.map_location.trim() !== '') {
                                map.empty();
                                map.append(`
                        <iframe
                            src="${event.map_location}"
                            width="100%" height="680" style="border:0;" allowfullscreen="" loading="lazy"
                            referrerpolicy="no-referrer-when-downgrade">
                        </iframe>
                    `);
                            }
                        }
                    });

                    // If no matching event, ensure the map is cleared
                    if (!foundEvent) {
                        map.empty();
                    }
                }
            }


            // Function to highlight event dates and remove circle for today
            function highlightEventDates(events) {
                const calendarDays = document.querySelectorAll('.day');

                calendarDays.forEach((day) => {
                    const dateVal = day.getAttribute('date-val');
                    const isToday = day.classList.contains('calendar-today');
                    const hasEvent = events.some((event) => event.date === dateVal);

                    // If the date matches an event, apply the background color
                    if (hasEvent) {
                        day.style.backgroundColor = '#f7910e';
                        day.style.color = '#fff'; // Optional: Change text color for better contrast
                    }

                    // Remove background and circle for today's date
                    if (isToday) {
                        day.style.backgroundColor = 'transparent';
                        day.style.color = ''; // Reset to default text color
                        day.classList.remove('calendar-today');
                    }
                });
            }

            // Search functionality for the event list
            const searchInput = document.getElementById('searchInput');
            const eventList = document.getElementById('eventList').getElementsByTagName('li');

            searchInput.addEventListener('input', function () {
                const searchTerm = searchInput.value.toLowerCase();

                for (let i = 0; i < eventList.length; i++) {
                    const listItem = eventList[i];
                    const textContent = listItem.textContent.toLowerCase();

                    if (textContent.includes(searchTerm)) {
                        listItem.style.display = 'block';
                    } else {
                        listItem.style.display = 'none';
                    }
                }
            });
        });

    </script>

@endpush