@extends('layouts.front_app')
@section('content')
    <!-- Main Hero Section -->
    <section class="inner-page">
        <div class="container">
            <h2 class="heading">What's Your Vibe?</h2>
        </div>
    </section>
    <!-- ! Main Hero Section -->

    <!-- Upcoming Show Section -->
    <section class="vibe-section">
        <div class="container">
            <h2 class="heading">What's Your Vibe?</h2>
            <p class="text-white">
                Not sure which show is right for you? Let us
                be your comedic GPS, navigating through
                the laughter landscape to find that perfect
                show. Because life's too short for bad
                punchlines and too long to spend scrolling
                endlessly. Select topics below, or reference
                our map and we will provide the comedy
                curation!
            </p>
            <form id="vibeForm">
                @csrf
                <ul class="listItem">
                    @foreach($vibes as $val)
                        <li><label><input type="checkbox" value="{{ $val->id }}"
                                          name="vibes[]"><span>{{ $val->name }} </span></label></li>
                    @endforeach
                </ul>
                <button type="submit" class="btn themeBtn">Submit now</button>
            </form>


            {{--EVENTS--}}
            <section class="upcoming-section event-section" style="display: none">
                <div class="container">
                    <h2 class="heading">EVENTS</h2>
                    <div class="row" id="event-data"></div>
                </div>
            </section>

            {{--SHOWS--}}
            <section class="upcoming-section show-section" style="display: none">
                <div class="container">
                    <h2 class="heading">SHOWS</h2>
                    <div class="row" id="show-data"></div>
                </div>
            </section>

            <div style="text-align: center;" class="p5">
                <h3 class="event-empty" style="display: none">No Data found!</h3>
            </div>

            {{--<div class="map">
                <iframe
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2886.965099714889!2d-79.38344752303261!3d43.64889445270799!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x882b34cd578a5c61%3A0xea0589912e09cc06!2sFirst%20Canadian%20Place%2C%20Toronto%2C%20ON%2C%20Canada!5e0!3m2!1sen!2s!4v1695218835844!5m2!1sen!2s"
                    width="100%" height="680" style="border:0;" allowfullscreen="" loading="lazy"
                    referrerpolicy="no-referrer-when-downgrade"></iframe>
            </div>--}}
            <div class="map-container mt-3">
                <!-- Default Iframe Map -->
                <div id="iframeMap" style="display: block;">
                    <iframe
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2886.965099714889!2d-79.38344752303261!3d43.64889445270799!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x882b34cd578a5c61%3A0xea0589912e09cc06!2sFirst%20Canadian%20Place%2C%20Toronto%2C%20ON%2C%20Canada!5e0!3m2!1sen!2s!4v1695218835844!5m2!1sen!2s"
                        width="100%" height="680" style="border:0;" allowfullscreen="" loading="lazy"
                        referrerpolicy="no-referrer-when-downgrade">
                    </iframe>
                </div>

                <!-- Dynamic Google Maps -->
                <div id="map" style="height: 400px; width: 100%; display: none;"></div>
            </div>

        </div>
    </section>
    <!-- ! Upcoming Show Section -->

@endsection

@push('script')

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAAlsWW4P_jWEKbCBfW64LRQq_ZgPX8zA8&callback=initMap&v=weekly&libraries=marker" async defer></script>

    <script>

        $(document).ready(function () {
            $('#vibeForm').submit(function (e) {
                e.preventDefault();

                if ($('input[name="vibes[]"]:checked').length === 0) {
                    alert('Please select at least one vibe.');
                    return;
                }

                var formData = $(this).serialize();
                console.log(formData)

                $.ajax({
                    url: '{{ route('vibe.search.filter') }}',
                    type: 'POST',
                    data: formData,
                    dataType: 'json',
                    success: function (response) {
                        handleResponse(response);
                    },
                    error: function (error) {
                        console.log('Error:', error);
                    }
                });
            });
        });

        // Format date to readable format
        function dateFormate(date) {
            return formattedDate = new Date(date).toLocaleDateString('en-US', {
                weekday: 'long',
                month: 'short',
                day: 'numeric'
            });
        }
        function handleResponse(response) {
            if (response.status === 200) {

                // Hide the 'No Data' message
                $('.event-empty').hide();

                if ((response.event === null || response.event.length === 0) &&
                    (response.shows === null || response.shows.length === 0)) {
                    $('.event-empty').show();
                }

                // Google Map Setup
                if (response.shows != null && response.shows.length > 0) {
                    // Initialize the Google Map
                    $('#iframeMap').hide();
                    $('#map').show();
                    initMap(response.shows);
                }
                if (response.event !== null && response.event.length > 0) {

                                $('.event-section').show();
                                $('#event-data').empty();
                                $.each(response.event, function (index, event) {
                                    var formattedDate = dateFormate(event.created_at)

                                    var eventHtml = `
                                                        <div class="col-md-4">
                                                            <div class="showcard">
                                                                <figure>
                                                                    <img src="${event.image}" alt="${event.image}" class="img-fluid">
                                                                </figure>
                                                                <div>
                                                                    <span>${formattedDate}</span>
                                                                    <h4>${event.event_name}</h4>
                                                                    <ul>
                                                                        <li> <i class="fas fa-clock"></i> Doors : ${event.time}</li>
                                                                        <li> <i class="fas fa-map-marker-alt"></i> Location : ${event.location}</li>
                                                                        <li><i class="fas fa-ticket-alt"></i>${event.organizer_name}</li>
                                                                        <li><i class="fas fa-ticket-alt"></i> Ticket Price : $ ${event.price}</li>


                                                                    </ul>
                                                                    <a href="${event.eventDetailURL}" class="themeBtn">Buy Ticket</a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        `;

                                    $('#event-data').append(eventHtml);
                                });
                            } else {
                                $('.event-section').hide();
                            }


                            // shows
                            if (response.shows != null && response.shows.length > 0) {
                                $('.show-section').show();
                                $('#show-data').empty();
                                $.each(response.shows, function (index, show) {
                                    var formattedDate = dateFormate(show.created_at)

                                    var showhtml = `
                                                        <div class="col-md-4">
                                                            <div class="showcard">
                                                                <figure>
                                                                          <img src="${show.image}" alt="${show.image}" class="img-fluid">
                                                                </figure>
                                                                <div>
                                                                    <span>${formattedDate}</span>
                                                                    <h4>${show.name}</h4>
                                                                    <a href="#" class="themeBtn">View Detail</a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        `;

                                    $('#show-data').append(showhtml);
                                });
                            } else {
                                $('.show-section').hide();
                            }


            } else {
                console.log('Failed to fetch events.');
            }
        }



        function initMap(shows) {
            console.log('Initializing map...');

            // Ensure 'shows' is an array and contains data
            if (!Array.isArray(shows) || shows.length === 0) {
                console.log('No shows data available');
                return; // Return early if no shows data
            }

            // Initialize map with a default center (will be adjusted later)
            const map = new google.maps.Map(document.getElementById('map'), {
                zoom: 12,
                center: { lat: 43.64889445270799, lng: -79.38344752303261 }
            });

            const bounds = new google.maps.LatLngBounds(); // Create a bounds object

            shows.forEach(function (show) {
                // Check if latitude and longitude are valid numbers
                if (show.latitude && show.longitude && !isNaN(show.latitude) && !isNaN(show.longitude)) {
                    const position = { lat: parseFloat(show.latitude), lng: parseFloat(show.longitude) };

                    const marker = new google.maps.Marker({
                        position: position,
                        map: map,
                        title: show.name
                    });

                    // Extend bounds to include this marker's position
                    bounds.extend(position);

                    // Optional: Add info window to show details on marker click
                    const infoWindow = new google.maps.InfoWindow({
                        content: `<div><h4>${show.name}</h4><p>${show.description}</p></div>`
                    });

                    marker.addListener('click', function () {
                        infoWindow.open(map, marker);
                    });
                } else {
                    console.log(`Invalid latitude/longitude for show: ${show.name}`);
                }
            });

            // Automatically adjust the map to fit all markers
            map.fitBounds(bounds);
        }


    </script>
@endpush