@extends('layouts.authUser')

@section('content')
<div class="alert alert-warning alert-dismissible fade" role="alert" id="bookingNotice">
    <strong>Makluman:</strong> Pesanan akan diproses mengikut urutan tarikh penerimaan. Sila pastikan pesanan dibuat sekurang-kurangnya 3 hari sebelum tarikh pesanan.
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> 
</div>

<div style="display: flex; align-items: center;">
    <a href="{{ route('ManageBookingItem.AddBookingItem')}}" class="btn btn-add mb-4">
        <span class="icon-add">
            <i class="bx bx-plus-circle"></i>
        </span>
        <span class="btn-addText">Tambah Pesanan</span>
    </a>
    
    <!-- Color Legend -->
    <div class="mb-3" style="margin-left: 170px;">
        <h5 class="mb-2" style="margin: 0; text-align:center;">Status Pinjaman:</h5>
        <div style="display: flex; align-items: center; gap: 20px;">
            <div style="display: flex; align-items: center;">
                <span style="width: 20px; height: 20px; background-color: #F4C430; display: inline-block; border-radius: 4px; margin-right: 8px;"></span>
                <span>Dalam proses</span>
            </div>
            <div style="display: flex; align-items: center;">
                <span style="width: 20px; height: 20px; background-color: green; display: inline-block; border-radius: 4px; margin-right: 8px;"></span>
                <span>Terima</span>
            </div>
            <div style="display: flex; align-items: center;">
                <span style="width: 20px; height: 20px; background-color: red; display: inline-block; border-radius: 4px; margin-right: 8px;"></span>
                <span>Tolak</span>
            </div>
        </div>
    </div>
</div>

<!-- Calendar -->
<div id='calendar'></div>

<div id="alert-message">
    @if (session('failure'))
        <div class="alert alert-danger">
            {{ session('failure') }}
        </div>
    @endif <!--Red pop up message-->

    @if (session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif <!--Green pop up message-->
</div>

<script>
    // Hide alert message after 5 seconds if it exists
setTimeout(function() {
    const alertMessage = document.getElementById("alert-message");
    if (alertMessage) {
        alertMessage.style.display = "none";
    }
}, 5000);
</script>

<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/@fullcalendar/bootstrap5@6.1.7/index.global.min.js'></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'timeGridWeek',
            themeSystem: 'bootstrap5',
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'timeGridWeek,timeGridDay,dayGridMonth'
            },
            events: function(fetchInfo, successCallback, failureCallback) {
                fetch('/ManageBookingItem/BookingCalanderRemark') // Ensure this URL matches the route
                    .then(response => response.json())
                    .then(data => {
                        console.log(data);
                        const eventsWithColors = data.map(event => {
                            let color;
                            switch (event.extendedProps.booking_status) {
                                case 'Dalam proses':
                                    color = '#F4C430'; // Yellow
                                    break;
                                case 'Terima':
                                    color = 'green'; // Green
                                    break;
                                case 'Tolak':
                                    color = 'red'; // Red
                                    break;
                                default:
                                    color = 'gray'; // Default color
                            }

                            return {
                                ...event,
                                backgroundColor: color,
                                borderColor: color
                            };
                        });

                        successCallback(eventsWithColors);
                    })
                    .catch(error => {
                        console.error('Error fetching events:', error);
                        failureCallback(error);
                    });
            },
            slotDuration: '00:30:00', // Set the slot duration to 30 minutes
            allDaySlot: false,
            slotMinTime: '07:00:00',
            slotMaxTime: '24:00:00',
            slotLabelFormat: {
                hour: 'numeric',
                minute: '2-digit',
                meridiem: 'short'
            },
            eventTimeFormat: {
                hour: '2-digit',
                minute: '2-digit',
                meridiem: 'short',
                hour12: true
            },
            eventContent: function(arg) {
                let classroom = arg.event.extendedProps.classroom;
                let bookingStatus = arg.event.extendedProps.booking_status;

                let startTime = arg.event.start;
                let endTime = arg.event.end;

                let formattedTime = formatTimeRange(startTime, endTime);

                // Only display location and classroom
                return {
                    html: `
                        <div style="text-align: center;">
                            <strong>${arg.event.title}</strong><br>
                            <strong>${classroom}</strong><br>
                        </div>
                    `
                };
            },
        });
        calendar.render();

        // Custom formatting for day headers
        calendar.on('datesSet', function() {
            const dayHeaders = document.querySelectorAll('.fc-dayHeader');
            dayHeaders.forEach(header => {
                const dateText = header.innerText; // e.g., "Sun, 12/9"
                const parts = dateText.split(', '); // Split into ["Sun", "12/9"]
                if (parts.length === 2) {
                    const dayMonth = parts[1].split('/'); // Split into ["12", "9"]
                    header.innerText = `${parts[0]}, ${dayMonth[1]}/${dayMonth[0]}`; // Format as "Sun, 9/12"
                }
            });
        });

        // Function to format the time range
        function formatTimeRange(start, end) {
            const options = { hour: 'numeric', minute: '2-digit', hour12: true };
            const startTime = start.toLocaleTimeString([], options);
            const endTime = end.toLocaleTimeString([], options);
            return `${startTime} - ${endTime}`;
        }
    });
</script>

<script>
    function showNotice() {
        let notice = document.getElementById('bookingNotice');
        notice.classList.add('show');
    }

    function hideNotice() {
        let notice = document.getElementById('bookingNotice');
        notice.classList.remove('show');
    }

    // Example: show the notice on page load
    window.onload = function() {
        showNotice();
    };
</script>

@endsection