@extends('front.include.app')
@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <section class="main-slider p-0" id="">
        <div class="">
            <div class="">
                <div class="">
                    {{-- @dd($cms->banner_video) --}}
                    <div class="slide-inner bg-image">
                        <video autoplay muted loop playsinline class=" background-video">
                            <source src="{{ $cms->getFirstMediaUrl('banner_video') }}" type="video/webm" />
                        </video>
                        <div class="container">
                            <div class="row justify-content-center text-center">
                                <div class="col-lg-12">
                                    <div class="slideOne">
                                        <h1 data-swiper-parallax="-200" class="main-heading">{{ $homeCmsContent['banner_heading'] ?? 'Default heading' }}</h1>
                                        <p data-swiper-parallax="-200" class="xaxax"><span>{{ $homeCmsContent['banner_paragraph']}}</span></p>
                                        <a href={{ $homeCmsContent['banner_button_link']}} class="themeBtn lop">{{ $homeCmsContent['banner_button_text']}}</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="swiper-pagination"></div>
        </div>
    </section>

    <section class="studio-sec">
        <div class="container">
            <div class="row  justify-content-center text-center" data-aos="fade-up" data-duration="4000">
                <div class="col-md-9">
                    <div class="studio-content">
                        <h2>{{ $homeCmsContent['banner_first_heading']}}, {{ $homeCmsContent['banner_second_heading']}}, {{ $homeCmsContent['banner_third_heading']}}</h2>
                        <p>{{ $homeCmsContent['photography_banner_paragraph']}}</p>
                        <a href="{{ $homeCmsContent['photography_banner_button_link']}}" class="themeBtn">{{ $homeCmsContent['photography_banner_button_text']}}</a>
                    </div>
                </div>
            </div>
        </div>
        <video src="{{ $cms->getFirstMediaUrl('photography_banner_first_video') }}" muted loop playsinline autoplay
            class="img-fluid studioimg1"></video>
        <video src="{{ $cms->getFirstMediaUrl('photography_banner_second_video') }}" muted loop playsinline autoplay
            class="img-fluid studioimg2"></video>
    </section>

    <section class="marquee-sec p-0">
        <div class="container-flui p-0">
            <div class="row">
                <div class="col-md-12" data-aos="fade-up" data-duration="4000">
                    <div class="marquee">
                        <span>{{ $homeCmsContent['photography_banner_highlighted_heading']}}</span>
                        <span>{{ $homeCmsContent['photography_banner_highlighted_heading']}}</span>
                        <span>{{ $homeCmsContent['photography_banner_highlighted_heading']}}</span>
                        <span>{{ $homeCmsContent['photography_banner_highlighted_heading']}}</span>
                        <span>{{ $homeCmsContent['photography_banner_highlighted_heading']}}</span>
                        <span>{{ $homeCmsContent['photography_banner_highlighted_heading']}}</span>
                        <span>{{ $homeCmsContent['photography_banner_highlighted_heading']}}</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="work-sec">
        <div class="container">
            <h2 class="mainHead text-white" data-aos="fade-up" data-duration="4000">{{ $homeCmsContent['home_work_heading']}}</h2>
            <div class="row" data-aos="fade-up" data-duration="4000">
                <div class="col-md-4">
                    <div class="work-wrapp">
                        <div class="work-images">
                            <figure class="work-imag">
                                <img src="{{ $cms->getFirstMediaUrl('first_home_work_section_image') }}" class="img-fluid" alt="">
                            </figure>
                            <figure class="work-sub">
                                <img src="{{ $cms->getFirstMediaUrl('first_home_work_section_icon') }}" class="img-fluid" alt="">
                            </figure>
                        </div>
                        <div class="work-content">
                            <h2>{{ $homeCmsContent['first_home_work_section_heading']}}</h2>
                            <p>{{ $homeCmsContent['first_home_work_section_paragraph']}}</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="work-wrapp">
                        <div class="work-images">
                            <figure class="work-imag">
                                <img src="{{ $cms->getFirstMediaUrl('second_home_work_section_image') }}" class="img-fluid" alt="">
                            </figure>
                            <figure class="work-sub">
                                <img src="{{ $cms->getFirstMediaUrl('second_home_work_section_icon') }}" class="img-fluid" alt="">
                            </figure>
                        </div>
                        <div class="work-content">
                            <h2>{{ $homeCmsContent['second_home_work_section_heading']}}</h2>
                            <p>{{ $homeCmsContent['second_home_work_section_paragraph']}}</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="work-wrapp">
                        <div class="work-images">
                            <figure class="work-imag">
                                <img src="{{ $cms->getFirstMediaUrl('third_home_work_section_image') }}" class="img-fluid" alt="">
                            </figure>
                            <figure class="work-sub">
                                <img src="{{ $cms->getFirstMediaUrl('third_home_work_section_icon') }}" class="img-fluid" alt="">
                            </figure>
                        </div>
                        <div class="work-content">
                            <h2>{{ $homeCmsContent['third_home_work_section_heading']}}</h2>
                            <p>{{ $homeCmsContent['third_home_work_section_paragraph']}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <img src="{{ asset('front/images/workvectore.webp') }}" class="img-fluid work-vectore" alt="">
    </section>

    <section class="renting-sec">
        <div class="container">
            <h2 class="mainHead">{{ $homeCmsContent['home_rent_studio_heading']}}</h2>
            <div class="row">
                <div class="col-md-6" data-aos="flip-left" data-duration="4000">
                    <div class="renting-wrapp">
                        <figure class="rent-img">
                            <img src="{{ $cms->getFirstMediaUrl('first_home_rent_studio_card_image') }}" class="img-fluid" alt="">
                        </figure>
                        <div class="renting-conetnt">
                            <h3>{{ $homeCmsContent['first_home_rent_studio_card_heading']}}</h3>
                            <p>{{ $homeCmsContent['first_home_rent_studio_card_paragraph']}}</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6" data-aos="flip-left" data-duration="4000">
                    <div class="renting-wrapp">
                        <figure class="rent-img">
                            <img src="{{ $cms->getFirstMediaUrl('second_home_rent_studio_card_image') }}" class="img-fluid" alt="">
                        </figure>
                        <div class="renting-conetnt">
                            <h3>{{ $homeCmsContent['second_home_rent_studio_card_heading']}}</h3>
                            <p>{{ $homeCmsContent['second_home_rent_studio_card_paragraph']}}</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 text-center">
                    <a href="{{ $homeCmsContent['home_rent_studio_button_link']}}" class="themeBtn">{{ $homeCmsContent['home_rent_studio_button_text']}}</a>
                </div>
            </div>
        </div>
        <img src="{{ asset('front/images/rentingsub1.webp') }}" class="img-fluid renting-imag" alt="">
    </section>

    <section class="video-sec">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-4" data-aos="fade-up" data-duration="4000">
                    <div class="video-content">
                        <a href=""><i class="fas fa-play"></i></a>
                        <a href=""><span>play the video</span></a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="perfomace-sec">
        <div class="container">
            <h2 class="mainHead">Studios</h2>
            <div class="row">
                @foreach($studios as $key => $studio)
                    <div class="col-md-6" data-aos="{{ $key % 2 == 0 ? 'fade-right' : 'fade-left' }}" data-duration="4000">
                        <div class="perfomace-wrapp">
                            <a href="{{ route('studios.show', $studio->id) }}">
                                <figure class="perfomace-img">
                                    <img src="{{ $studio->getFirstMediaUrl('studio_images') }}" class="img-fluid" alt="{{ $studio->name }}">
                                </figure>
                                <div class="perfomace-conetnt">
                                    <h4>{{ $studio->name }}</h4>
                                </div>
                            </a>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
        <img src="{{ asset('front/images/perfomancebg.webp') }}" class="img-fluid perfomancbg" alt="">
    </section>

    <section class="brand-sec">
        <div class="container">
            <div class="row justify-content-center text-center">
                <div class="col-md-11" data-aos="fade-up" data-duration="4000">
                    <div class="brand-content">
                        <h2 class="mainHead text-white">{{ $homeCmsContent['home_brand_promote_heading']}}</h2>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="insta-sec">
        <div class="container">
            <div class="row justify-content-center text-center">
                <div class="col-md-5">
                    <div class="insta-content" data-aos="fade-up" data-duration="4000">
                        <a href="{{ $homeCmsContent['home_instagram_section_button_link']}}">{{ $homeCmsContent['home_instagram_section_button_text']}}<i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div id="app" data-studio-availability-route="{{ route('api.studio.availability') }}"></div>
    <section class="hourly-sec" id="studio-booking" data-lenis-prevent>
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="booking-container">
                        <div class="calendar-section">
                            <h3>Select a Date</h3>
                            <div id="calendar"></div>
                        </div>
                        <div class="slots-section">
                            <h3 class="mb-4" id="selected-date">Select a Time</h3>
                            <div class="slots" id="timeSlots">
                                <p>Please select a date from the calendar.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            const params = new URLSearchParams(window.location.search);
            if (params.has('studio')) {
                var target = $('#studio-booking');

                if (target.length) {
                    $('html, body').animate({
                        scrollTop: target.offset().top
                    }, 800);
                }
            }
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const calendarEl = document.getElementById('calendar');
            const appEl = document.getElementById('app');
            const availabilityRoute = appEl.dataset.studioAvailabilityRoute;
            const params = new URLSearchParams(window.location.search);

            const calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                selectable: true,
                height: 500,
                dateClick: async function(info) {
                    const today = new Date().toISOString().split("T")[0];

                    if (info.dateStr < today) {
                        return;
                    }

                    document.getElementById("selected-date").innerText =
                        "Available Studios on " + info.dateStr;

                    await fetchStudioAvailability(info.dateStr);
                },

                dayCellDidMount: function(info) {
                    const today = new Date().toISOString().split("T")[0];
                    if (info.date.toISOString().split("T")[0] < today) {
                        info.el.classList.add("fc-day-disabled");
                    }
                },
                // dateClick: async function(info) {
                   // const selectedDate = info.dateStr;
                    // document.getElementById("selected-date").innerText = "Available Studios on " + selectedDate;
                    // await fetchStudioAvailability(selectedDate);
                // },
                events: async function(fetchInfo, successCallback, failureCallback) {
                    try {
                        // const response = await fetch(`${availabilityRoute}?start=${fetchInfo.startStr}&end=${fetchInfo.endStr}`);
                        const data = await response.json();

                        const events = data.availableDates.map(date => ({
                            title: `${date.availableStudios} studios available`,
                            start: date.date,
                            allDay: true,
                            color: date.availableStudios > 0 ? '#28a745' : '#dc3545'
                        }));

                        successCallback(events);
                    } catch (error) {
                        console.error('Error fetching availability:', error);
                        failureCallback(error);
                    }
                },
                eventContent: function(arg) {
                    return {
                        html: `<div class="fc-event-title">${arg.event.title}</div>`
                    };
                }
            });
            calendar.render();

            if (params.has('studio')) {
                (async () => {
                    try {
                        const studioId = params.get('studio');
                        const response = await fetch(`${availabilityRoute}?studio=${studioId}`);
                        const data = await response.json();

                        if (data.availableStudios && data.availableStudios.length > 0) {
                            const studio = data.availableStudios[0];
                            const availability = JSON.parse(studio.availability);

                            const today = new Date();
                            const todayStr = today.toISOString().slice(0, 10);

                            if (studio.booking_type === "per_week" || studio.booking_type === "per_month") {
                                document.getElementById("selected-date").innerText =
                                    "Available Studios starting from " + todayStr;

                                await fetchStudioAvailability(todayStr);
                                calendar.gotoDate(todayStr);
                            } else {
                                let firstAvailableDate = null;

                                for (let i = 0; i < 30; i++) {
                                    const checkDate = new Date();
                                    checkDate.setDate(today.getDate() + i);
                                    const checkDateStr = checkDate.toISOString().slice(0, 10);

                                    const dayOfWeek = checkDate
                                        .toLocaleString('en-us', { weekday: 'long' })
                                        .toLowerCase();

                                    const dayAvailability = availability[dayOfWeek];

                                    if (dayAvailability && (dayAvailability.full_day || dayAvailability.from)) {
                                        firstAvailableDate = checkDateStr;
                                        break;
                                    }
                                }

                                if (firstAvailableDate) {
                                    document.getElementById("selected-date").innerText =
                                        "Available Studios on " + firstAvailableDate;

                                    await fetchStudioAvailability(firstAvailableDate);
                                    calendar.gotoDate(firstAvailableDate);
                                }
                            }
                        }
                    } catch (error) {
                        console.error("Error auto-selecting studio availability:", error);
                    }
                })();
            }
        });

        async function fetchStudioAvailability(dateStr) {
            const params = new URLSearchParams(window.location.search);

            try {
                const appEl = document.getElementById('app');
                const route = appEl.dataset.studioAvailabilityRoute;

                let query = '';

                if (params.has('studio')) {
                    let sectionId = params.get('studio');
                    query += `?studio=${sectionId}`;
                } else {
                    query = `?date=${dateStr}`;
                }

                const response = await fetch(`${route}${query}`);
                const data = await response.json();
                console.log(data);
                const container = document.getElementById("timeSlots");
                container.innerHTML = "";

                if (data.availableStudios.length === 0) {
                    container.innerHTML = "<p>No studios available on this date</p>";
                    return;
                }

                data.availableStudios.forEach(studio => {
                    const availability = JSON.parse(studio.availability);
                    // console.log(availability);
                    const dayOfWeek = new Date(dateStr).toLocaleString('en-us', { weekday: 'long' }).toLowerCase();
                    const dayAvailability = availability[dayOfWeek];

                    let availabilityInfo = "";

                    if (dayAvailability) {
                        const from = dayAvailability.from || "00:00";
                        const to = dayAvailability.to || "23:59";

                        const fromDate = new Date(`1970-01-01T${from}:00`);
                        const toDate = new Date(`1970-01-01T${to}:00`);

                        let diffMinutes = Math.abs((toDate - fromDate) / (1000 * 60));
                        const hours = Math.floor(diffMinutes / 60);
                        const minutes = Math.round(diffMinutes % 60);

                        const formatTime = (date) => {
                            return date.toLocaleTimeString([], { hour: "numeric", minute: "2-digit", hour12: true });
                        };

                        const fromFormatted = formatTime(fromDate);
                        const toFormatted = formatTime(toDate);

                        let durationText = "";
                        if (hours > 0 && minutes > 0) {
                            durationText = `${hours} hours ${minutes} minutes`;
                        } else if (hours > 0) {
                            durationText = `${hours} hours`;
                        } else {
                            durationText = `${minutes} minutes`;
                        }

                        availabilityInfo = `Available: ${fromFormatted} → ${toFormatted} (${durationText})`;

                    } else {
                        availabilityInfo = "Not available today";
                    }

                    const studioDiv = document.createElement("div");
                    studioDiv.className = "studio-item p-3 mb-3 border rounded";

                    let bookingInfo = "";
                    let buttonHtml = "";
                    let isAvailable = true;

                    if (studio.is_booked) {
                        isAvailable = false;
                        bookingInfo = "Already booked";
                        buttonHtml = `<span class="text-danger">This studio is already booked for the selected date.</span>`;
                    } else if (studio.booking_type === "per_hour" && dayAvailability && !dayAvailability.full_day) {
                        bookingInfo = `${dayAvailability.from} - ${dayAvailability.to}`;
                        buttonHtml = `<button class="btn btn-primary btn-sm"
                                        onclick="bookStudio('${studio.id}', '${dateStr}', '${dayAvailability.from}', '${dayAvailability.to}', '${studio.price}', 'per_hour')">
                                        Book Hourly
                                    </button>`;
                    }

                    if (studio.booking_type === "per_hour" && dayAvailability && !dayAvailability.full_day) {
                        bookingInfo = `${dayAvailability.from} - ${dayAvailability.to}`;
                        buttonHtml = `<button class="btn btn-primary btn-sm"
                                        onclick="bookStudio('${studio.id}', '${dateStr}', '${dayAvailability.from}', '${dayAvailability.to}', '${studio.price}', 'per_hour')">
                                        Book Hourly
                                    </button>`;
                    }
                    else if (
                        studio.booking_type === "per_day" &&
                        dayAvailability &&
                        dayAvailability.full_day && dayAvailability.full_day !== "false"
                    ) {
                        bookingInfo = "Full Day Available";
                        buttonHtml = `<button class="btn btn-success btn-sm"
                                        onclick="bookStudio('${studio.id}', '${dateStr}', '${dayAvailability.from}', '${dayAvailability.to}', '${studio.price}', 'per_day')">
                                        Book Now
                                    </button>`;
                    }
                    else if (studio.booking_type === "per_week") {
                        const startOfWeek = dateStr;
                        const endOfWeek = new Date(startOfWeek);
                        endOfWeek.setDate(endOfWeek.getDate() + 6);

                        const endOfWeekStr = endOfWeek.toISOString().slice(0, 10);
                        bookingInfo = `Week: ${startOfWeek} → ${endOfWeekStr}`;
                        buttonHtml = `<button class="btn btn-warning btn-sm"
                                        onclick="bookStudio('${studio.id}', '${startOfWeek}', '00:00', '23:59', '${studio.price}', 'per_week')">
                                        Book for the Week
                                    </button>`;
                    }
                    else if (studio.booking_type === "per_month") {
                        const start = new Date(dateStr);
                        const end = new Date(start);
                        end.setMonth(end.getMonth() + 1);
                        end.setDate(end.getDate() - 1);

                        const monthStart = start.toISOString().slice(0, 10);
                        const monthEnd = end.toISOString().slice(0, 10);

                        bookingInfo = `Month: ${monthStart} → ${monthEnd}`;
                        buttonHtml = `<button class="btn btn-info btn-sm"
                                        onclick="bookStudio('${studio.id}', '${monthStart}', '00:00', '23:59', '${studio.price}', 'per_month')">
                                        Book for the Month
                                    </button>`;
                    }
                    else {
                        buttonHtml = `<span class="text-danger">This studio is not available for the selected date. Please choose another date.</span>`;
                    }

                    studioDiv.innerHTML = `
                        <h6>${studio.name}</h6>
                        <p>Price: $${studio.price} (Per Hour)</p>
                        <p>${studio.amenities}</p>
                        <p>Guests: ${studio.no_guest || 'N/A'}</p>
                        <p class="text-dark"><strong>${availabilityInfo}</strong></p>
                        ${buttonHtml}
                    `;

                    container.appendChild(studioDiv);
                });

            } catch (error) {
                console.error('Error:', error);
                document.getElementById("timeSlots").innerHTML =
                    `<p class="text-danger">Error fetching studio availability</p>`;
            }
        }

        function getStartOfWeek(dateStr) {
            const date = new Date(dateStr);
            const day = date.getDay();
            const diff = date.getDate() - day + (day === 0 ? -6 : 1);
            const monday = new Date(date.setDate(diff));
            return monday.toISOString().slice(0, 10);
        }

        function getEndOfWeek(dateStr) {
            const monday = new Date(getStartOfWeek(dateStr));
            const sunday = new Date(monday);
            sunday.setDate(monday.getDate() + 6);
            return sunday.toISOString().slice(0, 10);
        }

        function getMonthRange(dateStr) {
            const date = new Date(dateStr);
            const start = new Date(date.getFullYear(), date.getMonth(), 1);
            const end = new Date(date.getFullYear(), date.getMonth() + 1, 0);
            return {
                start: start.toISOString().slice(0, 10),
                end: end.toISOString().slice(0, 10)
            };
        }

        async function bookStudio(studioId, date, from, to, price, bookingType) {
            let startDateTime, endDateTime;

            if (bookingType === "per_hour") {
                startDateTime = new Date(`${date}T${from}`);
                endDateTime = new Date(`${date}T${to}`);
            }
            else if (bookingType === "per_day") {
                startDateTime = (`${date}T${from}`);
                endDateTime = (`${date}T${to}`);
            }
            else if (bookingType === "per_week") {
                const start = getStartOfWeek(date);
                const end = getEndOfWeek(date);
                startDateTime = new Date(`${start}T00:00`);
                endDateTime = new Date(`${end}T23:59`);
            }
            else if (bookingType === "per_month") {
                const start = new Date(`${date}T00:00`);
                const end = new Date(start);
                end.setMonth(end.getMonth() + 1);
                end.setHours(23, 59, 0, 0);

                startDateTime = start;
                endDateTime = end;
            }

            const bookingRoute = "{{ route('booking.page') }}";
            if (bookingType === "per_day") {
                window.location.href = `${bookingRoute}?studio_id=${studioId}&date=${date}&from=${from}&to=${to}&price=${price}&booking_type=${bookingType}`;
            } else {
                window.location.href = `${bookingRoute}?studio_id=${studioId}&date=${date}&from=${startDateTime.toISOString()}&to=${endDateTime.toISOString()}&price=${price}&booking_type=${bookingType}`;
            }
        }

    </script>
@endpush