@extends('layout.app')
@section('title') Shows @endsection

@section('content')
    <!-- Font Awesome CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

    <style>
        .calendar_hide {
            display: none;
            height: auto;
            width: 100%;
        }

        .light-theme li.active .current {
            background: var(--primary);
            border-color: var(--primary);
            color: var(
                --white);
            box-shadow: unset;
        }

        .simple-pagination .page-link {
            background: var(--secondary);
            border-color: var(--secondary);
            color: var(--white);
        }

        .light-theme li .prev, .next {

            background: var(--secondary) !important;
            border-color: var(--secondary) !important;
            color: var(--white);
        }

        .date span {
            cursor: pointer !important;
        }

        #dhtmlxCalendar {
            display: none;
            position: absolute;
            z-index: 1000;
            top: 9rem !important;
            /* right: 0 !important; */
            left: 48% !important;
        }

        .fc-toolbar-title {
            font-size: 1.5rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            position: relative;
        }

        .fc-toolbar-title::after {
            content: "\f107";
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            margin-left: 5px;
            font-size: 0.8em;
            display: inline-block;
        }

        .dhx_calendar-month--selected {
            background-color: #DC4433 !important;
            color: white;
            border-radius: 30px;
        }


        .custom-loader {
            width: 15px;
            aspect-ratio: 1;
            border-radius: 50%;
            animation: l5 1s infinite linear alternate;
        }

        @keyframes l5 {
            0% {
                box-shadow: 20px 0 #DC4433, -20px 0 #cc8881;
                background: #DC4433
            }
            33% {
                box-shadow: 20px 0 #DC4433, -20px 0 #cc8881;
                background: #cc8881
            }
            66% {
                box-shadow: 20px 0 #cc8881, -20px 0 #DC4433;
                background: #cc8881
            }
            100% {
                box-shadow: 20px 0 #cc8881, -20px 0 #DC4433;
                background: #DC4433
            }
        }
    </style>
    @php
        if (!empty($get_single_event_product_banner_title->content)) {
        $eventdecodedData = json_decode($get_single_event_product_banner_title->content, true);
        }
    @endphp

    <section class="heroSection innerBan">
        <div class="main-slider p-0" id="mainSlider">
            <div class="swiper-container homeSlider">
                @if ($showsSlider)
                    <div class="swiper-wrapper">
                        @php
                            $get_decode = json_decode($showsSlider->images);
                        @endphp
                        @foreach ($get_decode as $index => $all_images)
                            <div class="swiper-slide">
                                <div class="slide-inner bg-image"
                                     data-background="{{ asset('upload/sliders/' . $all_images) }}">
                                    <div class="slider-overlay">
                                        <div class="container">
                                            <div class="row no-gutters">
                                                <div class="col-12 mb-5 pb-5">
                                                    <div class="heroText">
                                                        <h2 class="">{{ $eventdecodedData['top_title'] ?? '' }}</h2>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <h3 class="text-center text-white mt-5">
                        Images Not Found
                    </h3>
                @endif
            </div>
        </div>
    </section>

    <!-- Event Section -->
    <section class="eventSection innerEvent eventInner">
        <div class="container">
            <div class=" mb-0">
                <div class="searchEvents align-items-center">
                    <div class="">
                        <i class="fas fa-search"></i>
                        <input type="text" class="form-control" placeholder="Search Shows" name="show_search"
                               id="show_search">
                    </div>
                    <div class="ml-xl-auto show">
                        <button class="btn themeBtn" onclick="showSearch()">Find Shows</button>
                        <span onclick="list()">List</span>
                        <span onclick="month()">Month</span>
                        <span
                            onclick="day(new Date().toLocaleDateString('en-US', { month: '2-digit', day: '2-digit', year: 'numeric' }))">Day</span>
                    </div>
                </div>
            </div>
            <div class="custom-loader mx-auto" style="display: none;"></div>

            <div class="row">

                <div class="col-xl-3 col-md-3">
                    <div class="show-page-title">
                        <h4 class="text-white">Location </h4>
                    </div>
                    <ul class="listitem">
                        <li>
                            <input type="radio" id="UPSTAIRS_radio" class="click_radio" name="location"
                                   value="UPSTAIRS">

                            <label for="UPSTAIRS_radio"><span>UPSTAIRS</span></label>
                        </li>
                        <li>
                            <input type="radio" id="DOWNSTAIRS_radio" class="click_radio" name="location"
                                   value="DOWNSTAIRS">


                            <label for="DOWNSTAIRS_radio"><span>DOWNSTAIRS</span></label>
                        </li>
                    </ul>

                    <ul class="listitem">
                        @forelse($get_event_categories as $get_event_category)
                            <li>
                                <input type="checkbox" id="listitem{{ $get_event_category->id }}"
                                       value="{{ $get_event_category->id }}" onclick="cateFilter()" class="cate_filter"
                                       name="cate_filter[]">
                                <label
                                    for="listitem{{ $get_event_category->id }}"><span>{{ $get_event_category->categories_name }}</span></label>
                            </li>
                            </li>
                        @empty
                        @endforelse
                    </ul>
                    <div class="d-flex mb-3">
                        <button class="btn themeBtn" onclick="locationFilter()">Apply</button>
                    </div>
                </div>
                <div class="search_result col-xl-9 col-md-9">
                    @include('show.show')
                </div>


                <div class="calendar_hide col-xl-9 col-md-9">
                    <div id="dhtmlxCalendar"></div>
                    @include('calendar.index')

                </div>
            </div>
        </div>
    </section>
@endsection

@section('script')

    <script>
        function dateCalendar() {
            flatpickr("#calendar_trigger", {
                dateFormat: "Y-m-d",
                onChange: function (selectedDates, dateStr) {
                    selectedDate(dateStr);
                }
            }).open();
        }

        function month() {
            $('.calendar_hide').css('display', 'block');
            $('.search_result').hide();
            $('input[name="cate_filter[]"]:checked').prop('checked', false);
            renderCalendar();

        }


        let dhtmlxCalendar;

        function renderCalendar() {
            var calendarEl = document.getElementById('calendar');

            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                events: @json($events),


                headerToolbar: {
                    left: 'prev,next currentMonth',
                    center: 'title',
                    right: ''
                },

                customButtons: {
                    currentMonth: {
                        text: 'This Month',
                        click: function () {
                            calendar.today();
                        }
                    }
                },

                eventContent: function (info) {
                    var eventEl = document.createElement('div');
                    var timeEl = document.createElement('div');
                    timeEl.style.fontSize = 'smaller';


                    function truncateText(text, maxLength) {
                        return text.length > maxLength ? text.substring(0, maxLength) + '...' : text;
                    }

                    var truncatedTitle = truncateText(info.event.title, 24);

                    if (info.event.extendedProps.isSingleDate) {
                        eventEl.innerHTML = truncatedTitle;
                        timeEl.innerHTML = info.event.extendedProps.timeOnly;
                        eventEl.appendChild(timeEl);
                    } else {
                        eventEl.innerHTML = info.event.title;
                    }

                    return {domNodes: [eventEl]};
                },

                eventDidMount: function (info) {
                    function generateSlug(title) {
                        return title
                            .toLowerCase()
                            .replace(/[^\w\s-]/g, '')
                            .replace(/\s+/g, '-')
                            .replace(/--+/g, '-');
                    }

                    var slug = generateSlug(info.event.title);
                    var routeUrl = "{{ route('event', ['slug' => ':slug']) }}".replace(':slug', slug);

                    function truncateText(text, maxLength) {
                        return text.length > maxLength ? text.substring(0, maxLength) + '...' : text;
                    }

                    var truncatedDescription = truncateText(info.event.extendedProps.description, 70);

                    tippy(info.el, {
                        content: `
                <div style="background-color: white; padding: 10px; border-radius: 5px; color: black; max-width: 300px;">
                    <img src="${info.event.extendedProps.image}" alt="${info.event.title}" style="width:100%; height:auto; margin-bottom: 10px;">
                    <strong>
                        <a href="${routeUrl}" target="_blank" style="color: black; text-decoration: none;">
                            ${info.event.title}
                        </a>
                    </strong><br>
                    <small>${info.event.extendedProps.startFormatted ? info.event.extendedProps.startFormatted : ''}${info.event.extendedProps.endFormatted ? ' - ' + info.event.extendedProps.endFormatted : ''}</small><br>
                    <p>${truncatedDescription}</p>
                </div>`,
                        allowHTML: true,
                        theme: 'light',
                        arrow: true,
                        placement: 'top',
                        interactive: true,
                        trigger: 'mouseenter',
                        hideOnClick: false,
                    });
                },

            });

            calendar.render();

            $('.fc-toolbar-title').click(function (e) {


                const calendarDiv = $("#dhtmlxCalendar");

                if (!dhtmlxCalendar) {
                    dhtmlxCalendar = new dhx.Calendar("dhtmlxCalendar", {
                        mode: "month",
                        css: "dhx_widget--bordered"
                    });

                    dhtmlxCalendar.events.on("change", function (date) {
                        const selectedYear = date.getFullYear();
                        const selectedMonth = date.getMonth();


                        calendar.gotoDate(new Date(selectedYear, selectedMonth));

                        calendarDiv.hide();
                    });
                }

                if (calendarDiv.is(':visible')) {
                    calendarDiv.hide();
                } else {
                    const rect = this.getBoundingClientRect();
                    calendarDiv.css({
                        left: rect.left + 'px',
                        top: (rect.bottom + window.scrollY) + 'px'
                    }).show();
                }
            });
        }

        function productView(n) {
            let row = document.querySelector("#dataList-Viewitem");
            let columns = row.querySelectorAll(".dataList-Viewitem-col");

            columns.forEach(col => {
                if (n === 0) {
                    col.classList.remove('col-md-12');
                    col.classList.add('col-md-4');
                    col.querySelector(".eventWrap").classList.add("gridView");
                } else {
                    col.classList.add('col-md-12');
                    col.classList.remove('col-md-4');
                    col.querySelector(".eventWrap").classList.remove("gridView");
                }
            });
        }

        function resetPagination() {
            let items = $(".dataList-Viewitem-col");
            let numItems = items.length;
            let perPage = 3;  // Number of items per page
            totalPages = Math.ceil(numItems / perPage); // Update totalPages

            // Hide all items except the first page
            items.hide().slice(0, perPage).show(); // Show only items for page 1

            // Initialize or re-initialize pagination
            $('#pagination-container').pagination({
                items: numItems,
                itemsOnPage: perPage,
                cssStyle: 'light-theme',
                currentPage: 1, // Set page 1 as active
                onPageClick: function (pageNumber) {
                    currentPage = pageNumber;  // Update currentPage
                    var showFrom = perPage * (pageNumber - 1);
                    var showTo = showFrom + perPage;

                    // Hide all items, then show the relevant ones
                    items.hide().slice(showFrom, showTo).show();
                    // Update button states
                    updateButtonState(pageNumber);
                }
            });

            // Update button states on load
            updateButtonState(1);

            // Show pagination container when pagination is restored
            $('#pagination-container').show();
        }


        let items = $(".dataList-Viewitem-col");
        let numItems = items.length;
        let perPage = 3;
        let currentPage = 1;
        let totalPages = Math.ceil(numItems / perPage);
        let isManualClick = false;

        function showPage(pageNumber) {
            let showFrom = perPage * (pageNumber - 1);
            let showTo = showFrom + perPage;

            items.hide().slice(showFrom, showTo).show();

            // Always update currentPage when page is shown
            currentPage = pageNumber;

            if (!isManualClick) {
                $('#pagination-container').pagination('selectPage', pageNumber);
            }

            isManualClick = false;
            updateButtonState(pageNumber);
        }

        $('#pagination-container').pagination({
            items: numItems,
            itemsOnPage: perPage,
            cssStyle: 'light-theme',
            onPageClick: function (pageNumber) {
                isManualClick = true;
                showPage(pageNumber);
            }
        });

        function prevBtn() {
            if (currentPage > 1) {
                currentPage--;
                showPage(currentPage);
            }
        }

        function nextBtn() {
            if (currentPage < totalPages) {
                currentPage++;
                showPage(currentPage);
            }
        }

        function updateButtonState(pageNumber) {
            // Calculate total pages again just in case
            let numItems = $(".dataList-Viewitem-col").length;
            totalPages = Math.ceil(numItems / perPage);

            // Disable prev button if on the first page
            if (pageNumber === 1) {
                $('#prevBtn').attr('disabled', true);
            } else {
                $('#prevBtn').attr('disabled', false);
            }

            // Disable next button if on the last page
            if (pageNumber === totalPages) {
                $('#nextBtn').attr('disabled', true);
            } else {
                $('#nextBtn').attr('disabled', false);
            }
        }

        showPage(currentPage);


        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        function customLoader() {

            $('.custom-loader').show();

        }


        function showSearch() {
            customLoader();
            $('input[name="location"]:checked').prop('checked', false);
            $('input[name="cate_filter[]"]:checked').prop('checked', false);

            var get_show_search = document.getElementById('show_search').value;

            if (get_show_search === '') {
                toastr.error('Please Enter Show Name')
                $('.custom-loader').hide();

            } else {
                $.ajax({
                    url: "{{ route('front.search.show') }}",
                    method: "POST",
                    data: {get_show_search: get_show_search},
                    success: function (res) {
                        console.log(res)
                        $('.custom-loader').hide();

                        $('.search_result').html(res);
                        $('#show_search').val('');
                        let items = $(".dataList-Viewitem-col");
                        let numItems = items.length;
                        if (numItems > 3) {
                            $('#pagination-container').show();
                            resetPagination();
                            updateButtonState(1);
                        }

                    },

                });
            }
        }

        function list() {
            var get_list = 'list';
            $('input[name="location"]:checked').prop('checked', false);

            $('input[name="cate_filter[]"]:checked').prop('checked', false);

            customLoader();

            $.ajax({
                url: "{{ route('front.list') }}",
                method: "GET",
                data: {get_list: get_list},
                success: function (res) {

                    $('.custom-loader').hide();

                    $('.search_result').html(res);
                    $('.calendar_hide').hide();
                    $('.search_result').show();
                    $('#pagination-container').show();
                    history.pushState({}, document.title, window.location.pathname);

                    resetPagination();

                    currentPage = 1;

                    showPage(currentPage);
                }
            });
        }

        function day(get_day) {
            customLoader();

            $.ajax({
                url: "{{ route('front.day') }}",
                method: "GET",
                data: {get_day: get_day},
                success: function (res) {
                    $('.custom-loader').hide();

                    $('.search_result').html(res);
                    $('.calendar_hide').css('display', 'none');
                    $('.search_result').show();
                    let items = $(".dataList-Viewitem-col");
                    let numItems = items.length;
                    if (numItems > 3) {
                        $('#pagination-container').show();
                        resetPagination();
                        updateButtonState(1);
                    }

                }
            });
        }

        function locationFilter() {
            customLoader();

            var get_location = $('input[name="location"]:checked').val();
            if (!get_location) {
                toastr.error('Please Select Location')
                $('.custom-loader').hide();

            } else {
                $.ajax({
                    url: "{{ route('front.location.filter') }}",
                    method: "POST",
                    data: {location: get_location},
                    success: function (res) {
                        $('.custom-loader').hide();

                        $('.search_result').html(res);
                        let items = $(".dataList-Viewitem-col");
                        let numItems = items.length;
                        if (numItems > 3) {
                            $('#pagination-container').show();
                            resetPagination();
                            currentPage = 1;

                            showPage(currentPage);
                        }
                    },

                });
            }

        }

        function cateFilter() {
            customLoader();
            $('input[name="location"]:checked').prop('checked', false);
            let selectedCategories = [];
            $('.cate_filter:checked').each(function () {
                selectedCategories.push($(this).val());
            });

            if (selectedCategories.length === 0) {
                list();
            } else {
                $.ajax({
                    url: "{{ route('front.category.filter') }}",
                    method: "GET",
                    data: {cate_id: selectedCategories},
                    success: function (res) {
                        $('.search_result').show();
                        $('.search_result').html(res);
                        $('.calendar_hide').hide();
                        $('.custom-loader').hide();
                        let items = $(".dataList-Viewitem-col");
                        let numItems = items.length;
                        if (numItems > 3) {
                            $('#pagination-container').show();
                            resetPagination();
                            currentPage = 1;
                            showPage(currentPage);
                        }


                    }
                });
            }


        }

        function selectedDate(get_date) {
            customLoader();

            $.ajax({
                url: "{{ route('front.search.date') }}",
                method: "GET",
                data: {get_date: get_date},
                success: function (res) {
                    $('.custom-loader').hide();

                    $('.search_result').html(res);
                }
            });
        }

        $('.click_radio').click(function (e) {
            $('input[name="cate_filter[]"]:checked').prop('checked', false);

        })
    </script>

@endsection