@extends('user.layouts.app')


@section('body_class', 'enents_calendar')

@push('styles')
<style>
    /* Light green past events */
    .fc .is-past-event {
        background-color: #004225 !important;
        border-color: #004225 !important;
        color: #ffffff !important;
        opacity: 0.65;
    }

    /* Optional: Make it stand out a bit */
    /* .fc .is-past-event:hover {
        opacity: 1;
        transform: scale(1.02);
        transition: all 0.2s ease;
    } */
</style>
@endpush

@section('content')
<section class="banner-slider">
    @foreach($bannerImages as $image)
    <div class="slider-item"><img src="{{ asset('/storage/distribution/images/banner_image/' . $image->image) }}" alt="Slide {{ $loop->iteration }}"></div>
    @endforeach
</section>

<div class="banner-inner-content">
    <div class="container">
        <ul class="bread-come">
            <li>
                <a href="/">Home</a>
            </li>
            <li>Events Calendar</li>
        </ul>
    </div>
</div>

<div class="container enents_calendar_inner  my-3 my-lg-5">
    <!-- Calendar Container -->
    <div id="calendar"></div>
</div>


<!-- Event Details Modal -->
<div class="modal fade" id="eventModal" tabindex="-1" aria-labelledby="eventModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">Event Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">
                        <strong>Event:</strong> <span id="modalEventName"></span>
                    </li>
                    <li class="list-group-item" id="event_desc">
                        <strong>Description:</strong> <span id="modalEventDescription"></span>
                    </li>
                    <li class="list-group-item">
                        <strong>Date:</strong> <span id="modalDate"></span>
                    </li>
                    <li class="list-group-item">
                        <strong>Timings:</strong> <span id="modalTiming"></span>
                    </li>
                    <!-- <li class="list-group-item">
                        <strong>Start Time:</strong> <span id="modalStart"></span>
                    </li>
                    <li class="list-group-item">
                        <strong>End Time:</strong> <span id="modalEnd"></span>
                    </li> -->
                    <li class="list-group-item">
                        <strong>Venue:</strong> <span id="modalAddress"></span>
                    </li>
                    <!-- <li class="list-group-item">
                        <strong>Created At:</strong> <span id="modalCreated"></span>
                    </li> -->
                </ul>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>

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

@endsection

@section('footer')
<!-- footer bottom appears here -->
@endsection

@push('scripts')
<!-- <script>
    let slideIndex = 1;
    showSlides(slideIndex);

    function plusSlides(n) {
        showSlides(slideIndex += n);
    }

    function currentSlide(n) {
        showSlides(slideIndex = n);
    }

    function showSlides(n) {
        let i;
        let slides = document.getElementsByClassName("mySlides");
        let dots = document.getElementsByClassName("dot");
        if (n > slides.length) {
            slideIndex = 1
        }
        if (n < 1) {
            slideIndex = slides.length
        }
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex - 1].style.display = "block";
        dots[slideIndex - 1].className += " active";
    }
</script> -->


<!-- FullCalendar CSS & JS -->
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/main.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js"></script>


<script>
    document.addEventListener('DOMContentLoaded', function() {
        let calendarEl = document.getElementById('calendar');

        let calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'dayGridMonth',
            themeSystem: 'bootstrap5',
            timeZone: 'Asia/Kolkata',
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
            },
            events: "{{ route('user.events.json') }}",

            // 🟡 Highlight past events
            eventClassNames: function(info) {
                const end = info.event.end || info.event.start;
                const now = new Date();
                const isAllDay = info.event.allDay === true;
                const effectiveEnd = isAllDay ? new Date(end.getTime() - 24*60*60*1000) : end;

                if (effectiveEnd < now) {
                    return ['is-past-event'];
                }
                return [];
            },
            
            eventClick: function(info) {
                let eventId = info.event.id;
                fetch(`/events/${eventId}`)
                    .then(res => res.json())
                    .then(data => {
                        document.getElementById('modalTitle').textContent = 'Event Info';

                        document.getElementById('modalEventName').textContent = data.title;

                        if (data.description) {
                            document.getElementById('modalEventDescription').textContent = data.description;
                        } else {
                            document.getElementById('event_desc').style.display = 'none';
                        }

                        // Show single date or date range in main Date field
                        if (data.label_date) {
                            document.getElementById('modalDate').textContent = data.label_date;
                        } else if (data.start_date && data.end_date && data.start_date !== data.end_date) {
                            document.getElementById('modalDate').textContent = `${data.start_date} to ${data.end_date}`;
                        } else {
                            document.getElementById('modalDate').textContent = data.start_date ?? '';
                        }
                        if (data.label_time) {
                            document.getElementById('modalTiming').textContent = data.label_time;
                        } else if (data.start_time && data.end_time) {
                            document.getElementById('modalTiming').textContent = `${data.start_time} to ${data.end_time}`;
                        } else {
                            document.getElementById('modalTiming').textContent = '';
                        }

                        document.getElementById('modalAddress').textContent = data.address ?? '';
                        // document.getElementById('modalCreated').textContent = data.created_at ?? '';

                        // let modal = new bootstrap.Modal(document.getElementById('eventModal'));
                        let modalEl = document.getElementById('eventModal');
                        let modal = new bootstrap.Modal(modalEl, {
                            backdrop: true
                        });

                        // Observe when the backdrop is added to the DOM
                        const observer = new MutationObserver((mutationsList) => {
                            mutationsList.forEach((mutation) => {
                                mutation.addedNodes.forEach((node) => {
                                    if (node.classList && node.classList.contains('modal-backdrop')) {
                                        node.style.backgroundColor = 'rgba(0,0,0,0.5)';
                                        node.style.filter = 'blur(4px)';
                                        // node.style.boxShadow = '0 0 10px rgba(0,0,0,0.3)'; // optional
                                    }
                                });
                            });
                        });

                        // Start observing the body for added nodes
                        observer.observe(document.body, {
                            childList: true
                        });

                        // Show the modal
                        modal.show();

                    });
            }
        });

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