@extends('user.layouts.user')

@section('content')

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.css" rel="stylesheet">
<style>
    .booking-container {
        display: flex;
        gap: 25px;
        margin-top: 20px;
    }

    .calendar-section, .slots-section {
        flex: 1;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
        padding: 25px;
        transition: all 0.3s ease-in-out;
    }

    .calendar-section:hover, .slots-section:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    }

    .calendar-section {
        border-right: 2px solid #f5f5f5;
    }

    .slots {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .studio-item {
        background: #f9fafb;
        border: 1px solid #eee;
        border-radius: 10px;
        padding: 15px;
        transition: 0.3s;
    }

    .studio-item:hover {
        background: #fdf5e6;
        border-color: #f8b11e;
    }

    .studio-item h6 {
        margin-bottom: 5px;
        font-weight: 600;
        color: #333;
    }

    .studio-item p {
        margin: 2px 0;
        font-size: 14px;
    }

    .studio-item strong {
        color: #111;
    }

    #calendar a {
        color: var(--black) !important;
    }

    #calendar table thead th a {
        color: var(--black) !important;
    }

    #selected-date {
        font-size: 18px;
        font-weight: 600;
        color: #444;
    }

    .btn-sm {
        font-size: 13px;
        padding: 6px 12px;
        border-radius: 6px;
    }

    .fc-day-disabled {
        background: #f5f5f5 !important;
        cursor: not-allowed;
        color: #aaa !important;
    }

    @media (max-width: 768px) {
        .booking-container {
            flex-direction: column;
        }

        .calendar-section {
            border-right: none;
            border-bottom: 2px solid #f5f5f5;
        }
    }
</style>

<div class="wrapper px-xl-2">
    <div class="row">
        <div class="col-12">
            <div id="app" data-studio-availability-route="{{ route('api.studio.availability') }}"></div>
            <section class="hourly-sec" id="studio-booking" data-lenis-prevent>
                <div class="">
                    <div class="row">
                        <div class="col-lg-12">
                            <h2 class="mb-4 fw-bold text-dark">
                                <i class="fas fa-calendar-alt me-2 text-dark"></i> Studio Booking
                            </h2>
                            <div class="booking-container">
                                <div class="calendar-section">
                                    <h5 class="mb-3 text-dark fw-semibold">
                                        <i class="fas fa-calendar-day me-2"></i> Select a Date
                                    </h5>
                                    <div id="calendar"></div>
                                </div>

                                <div class="slots-section">
                                    <h5 class="mb-3 text-dark fw-semibold" id="selected-date">
                                        <i class="fas fa-clock me-2"></i> Select a Time
                                    </h5>
                                    <div class="slots" id="timeSlots">
                                        <p class="text-muted">Please select a date from the calendar.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>

@endsection

@section('common_script')
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0/dist/chartjs-plugin-datalabels.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<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
@endsection