@extends('layouts.app')
@section('title', 'calender')

@push('css')
<link href="{{ asset('assets/vendor/fullcalendar/css/main.min.css') }}" rel="stylesheet">


<meta charset="utf-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- CSRF Token -->


<title>{{ config('app.name', 'Laravel') }}</title>

<style>
    .badge-success {

        color: #000;
    }


    .calendar {
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        padding: 20px;
    }

    .calendar-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .calendar-buttons {
        margin-top: 10px;
        text-align: center;
    }

    .week-row {
        display: flex;
    }

    .day-header {
        flex: 1;
        text-align: center;
        font-weight: bold;
        background-color: transparent;
        color: #b5b5c3;
        padding: 5px 0;
        border: 1px solid #b5b5c3;
    }

    .day {
        flex: 1;
        height: 120px;
        border: 1px solid #e0e0e0;
        padding: 5px;
        position: relative;
        cursor: pointer;
    }

    .day:hover {
        background-color: #f9f9f9;
    }

    .empty-day {
        background-color: #f5f5f5;
        border: 1px solid #e0e0e0;
        cursor: default;
    }

    .empty-day {
        background-color: #f8f9fa;
        border: 1px solid #e0e0e0;
    }





    .hour-row {
        display: flex;
        border-bottom: 1px solid #ddd;
        height: 50px;
    }

    .hour-label {
        width: 80px;
        background: #f8f9fa;
        color: #b5b5c3;
        padding: 5px;
        font-weight: bold;
    }

    .hour-events {
        flex: 1;
        overflow-y: auto;
        padding: 5px;
        position: relative;
    }

    .js-plotly-plot .plotly .modebar-btn {
        display: none;
    }




    .event:hover {

        cursor: pointer;
    }

    strong {
        color: #b5b5c3;
    }


    .event {
        display: flex;
        align-items: center;

        color: white;
        font-size: 12px;
        margin: 3px 0;
        padding: 5px;
        /* Padding inside the event */
        border-radius: 4px;
        /* Rounded corners */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
        /* Change cursor on hover */
    }

    .event:hover {
        background-color: #218838;
        /* Darker green on hover */
    }

    .event-icon {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #ffc107;
        /* Yellow icon */
        margin-right: 5px;
        /* Space between icon and text */
    }



    /* Calendar Body */
    #calendarBody {
        display: flex;
        flex-direction: column;
    }

    .day-header {
        display: inline-block;
        width: calc(100% / 7);
        text-align: center;
        border-bottom: 1px solid #ddd;
    }

    .event {
        background-color: #218838;
    }

    /* Hour Row */
    .hour-row {
        display: flex;
        border-bottom: 1px solid #ddd;
    }

    .hour-label {
        width: 60px;
        text-align: center;
        border-right: 1px solid #ddd;
    }

    .hour-cell {
        flex: 1;
        height: 50px;
        border-right: 1px solid #ddd;
        position: relative;
    }

    /* Event Styling */
    .event {
        position: absolute;

        color: white;
        padding: 2px 4px;
        border-radius: 3px;
        top: 5px;
        left: 5px;
        right: 5px;
    }

    .btn-group {
        color: #b5b5c3;
        background: transparent;
        border: 0.0625rem solid #ebedf3;

    }

    .btn-group:hover {

        border: 0.0625rem solid #ebedf3;
        background: var(--primary);
        color: #fff;

    }

    .btn-group:active {

        border: 0.0625rem solid #1a252f;
        background: #1a252f;
        color: #fff;

    }
</style>
@endpush

@section('content')
<x-content-body>

    <x-breadcrumbs :breadcrumbs="$breadcrumbs" />


    <div class="row">

        <div class="modal fade" id="eventModal" tabindex="-1" aria-labelledby="eventModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="eventModalLabel">Create Event</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form id="eventForm">
                            @csrf
                            <div class="mb-2">
                                <label for="summary" class="form-label">Event Title</label>
                                <input type="text" name="summary" id="summary" class="form-control form-control-sm" required>
                            </div>
                            <div class=" mb-2">

                                <label for="start_date" class="form-label">Start Date & Time</label>
                                <input type="datetime-local" name="start_date" id="start_date" class="form-control form-control-sm" required>
                            </div>
                            <div class="mb-2">
                                <label for="end_date" class="form-label">End Date & Time</label>
                                <input type="datetime-local" name="end_date" id="end_date" class="form-control form-control-sm" required>
                            </div>


                            <div class="row">
                                <div class="col-8">
                                    <label for="reminder" class="form-label">Reminder</label>
                                    <div class="d-flex">
                                        <input type="number" name="reminder_time" id="reminder_time" class="form-control  form-control-sm w-50" placeholder="Time">
                                        <select name="reminder_unit" id="reminder_unit" class="form-control form-control-sm w-50">
                                            <option value="minutes">Minutes</option>
                                            <option value="hours">Hours</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <label for="event_color" class="form-label">Event Color</label>
                                    <input type="color" name="event_color" id="event_color" class="form-control form-control-sm form-control-color">
                                </div>
                            </div>

                            <div class="mb-2">
                                <label for="description" class="form-label">Event Description</label>
                                <textarea name="description" id="description" class="form-control form-control-sm" rows="2"></textarea>
                            </div>


                            <button type="submit" class="btn  btn-info">Save Event</button>
                            <button type="button" class="btn btn-danger" id="deleteEventBtn" style="display: none;">Delete Event</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>



        <div class="mt-4 card p-4">

            <div class="calendar-header">
                <div class="DIV">
                    <button id="prevBtn" class="btn btn-group">&laquo; Prev</button>
                    <button id="nextBtn" class="btn btn-group">Next &raquo;</button>
                </div>

                <h2 id="currentMonth"></h2>
                <div class="calendar-buttons mb-2">
                    <button class="btn btn-group" onclick="changeView('day')">Day</button>
                    <button class="btn btn-group" onclick="changeView('week')">Week</button>
                    <button class="btn btn-group" onclick="changeView('month')">Month</button>
                </div>


            </div>

            <div class="week-row mt-4" id="dayHeaders"></div>
            <div class="calendar-body" id="calendarBody"></div>

        </div>

    </div>
    @include('layouts.includes.modals.google_auth')

</x-content-body>
@endsection

@push('js')
{{-- <script>
    document.addEventListener('DOMContentLoaded', function() {
        // Function to check if the Google access token exists in the session
        function checkGoogleToken() {
            // AJAX call to check token in the session
            $.get("{{ route('check.google.token') }}", function(response) {
                if (!response.hasToken) {
                    // Show the modal if the token does not exist
                    $('#welcomeModal').modal('show');
                }
            }).fail(function() {
                console.error('Failed to check Google token in session.');
            });
        }

        // Redirect user to Google Calendar sync URL on "Sync Now" button click
        document.getElementById('verifyButton').addEventListener('click', function() {
            window.location.href = "{{ url('google/redirect') }}";
        });

        // Check for the Google token on page load
        checkGoogleToken();
    });
</script> --}}
<!-- Modal HTML Structure (add this if you don't have it already) -->
<div class="modal fade" id="welcomeModal" tabindex="-1" role="dialog" aria-labelledby="welcomeModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <!-- Add close button in header -->
                <h5 class="modal-title" id="welcomeModalLabel">Welcome</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- Your existing modal content -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="verifyButton">Sync Now</button>
                <!-- Optional: Add a cancel button -->
                {{-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button> --}}
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

            </div>
        </div>
    </div>
</div>

<!-- Updated Script -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Function to check if the Google access token exists in the session
        function checkGoogleToken() {
            $.get("{{ route('check.google.token') }}", function(response) {
                if (!response.hasToken) {
                    // Show the modal if the token does not exist
                    $('#welcomeModal').modal('show');
                }
            }).fail(function() {
                console.error('Failed to check Google token in session.');
            });
        }

        // Redirect user to Google Calendar sync URL on "Sync Now" button click
        document.getElementById('verifyButton').addEventListener('click', function() {
            window.location.href = "{{ url('google/redirect') }}";
        });

        // Add close button functionality
        document.querySelector('.btn-close').addEventListener('click', function() {
            $('#welcomeModal').modal('hide');
        });

        // Optional: Close modal when clicking outside or pressing ESC
        $('#welcomeModal').modal({
            backdrop: true,
            keyboard: true
        });

        // Check for the Google token on page load
        checkGoogleToken();
    });
</script>


<script>
    let currentDate = new Date();
    let currentView = 'month';
    let dummyEvents = {};
    generateCalendar(currentDate);

    function fetchEvents() {
        $.get("{{ route('google.calendar.events') }}", function(data) {
            console.log('Fetched Events:', data); // Debug response

            dummyEvents = {}; // Reset events
            data.forEach(event => {
                if (event.start && event.end) {
                    const date = event.start.split('T')[0]; // Validate event.start
                    if (!dummyEvents[date]) {
                        dummyEvents[date] = [];
                    }
                    dummyEvents[date].push({
                        title: event.title || 'No Title', // Fallback if title is missing
                        start: event.start,
                        end: event.end,
                    });
                } else {
                    console.warn('Invalid event data:', event); // Log invalid events
                }
            });

            // Refresh the calendar based on the current view
            if (currentView === 'month') {
                generateCalendar(currentDate);
            } else if (currentView === 'week') {
                generateWeekView(currentDate);
            } else if (currentView === 'day') {
                generateDayView(currentDate);
            }
        }).fail(function(xhr) {
            console.error('Error fetching events:', xhr.responseText);
        });
    }

    $('#eventForm').submit(function(e) {
        e.preventDefault();
        const formData = $(this).serialize();

        $.post("{{ route('google.calendar.store') }}", formData)
            .done(function() {
                Swal.fire({
                    icon: 'success',
                    title: 'Event Added',
                    text: 'Your event has been successfully added!',
                });
                $('#eventModal').modal('hide');
                fetchEvents();
            })
            .fail(function(xhr) {
                const errors = xhr.responseJSON.errors || {};
                showErrors(errors);
            });
    });

    // Populate Modal for Editing
    function viewEventDetails(event) {
        $('#summary').val(event.title);
        $('#start_date').val(event.start);
        $('#end_date').val(event.end);
        $('#description').val(event.description || '');
        $('#reminder_time').val(event.reminder_time || '');
        $('#reminder_unit').val(event.reminder_unit || 'minutes');
        $('#event_color').val(event.color || '#28a745');
        $('#deleteEventBtn').show();
        $('#deleteEventBtn').data('event-id', event.id);
        $('#eventModal').modal('show');
    }


    $('#deleteEventBtn').click(function() {
        const eventId = $(this).data('event-id');
        $.ajax({
            url: `{{ url('google/calendar/event') }}/${eventId}`,
            type: 'DELETE',
            success: function() {
                Swal.fire({
                    icon: 'success',
                    title: 'Event Deleted',
                    text: 'Your event has been deleted!',
                });
                $('#eventModal').modal('hide');
                fetchEvents();
            },
            error: function(xhr) {
                console.error('Error deleting event:', xhr.responseText);
            }
        });
    });

    // Apply Event Color in Calendar
    function createDayBox(date) {
        const dayBox = document.createElement("div");
        dayBox.classList.add("day");
        const dayDate = formatDate(date);
        dayBox.innerHTML = `<strong>${date.getDate()}</strong>`;

        if (dummyEvents[dayDate]) {
            dummyEvents[dayDate].forEach(event => {
                const eventDiv = document.createElement("div");
                eventDiv.classList.add("event");
                eventDiv.textContent = event.title;
                eventDiv.style.backgroundColor = event.color || '#28a745'; // Apply color
                eventDiv.onclick = () => viewEventDetails(event);
                dayBox.appendChild(eventDiv);
            });
        }

        dayBox.onclick = () => openModalForDate(dayDate);
        return dayBox;
    }

    function generateCalendar(date) {
        const calendarBody = document.getElementById("calendarBody");
        const currentMonthEl = document.getElementById("currentMonth");
        const dayHeaders = document.getElementById("dayHeaders");

        calendarBody.innerHTML = "";
        dayHeaders.innerHTML = "";
        currentMonthEl.textContent = date.toLocaleString("default", {
            month: "long",
            year: "numeric"
        });

        const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
        days.forEach(day => {
            const header = document.createElement("div");
            header.classList.add("day-header");
            header.textContent = day;
            dayHeaders.appendChild(header);
        });

        const firstDay = new Date(date.getFullYear(), date.getMonth(), 1).getDay();
        const lastDate = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
        let dayCounter = 1;

        // Today's date
        const today = new Date();
        const isTodayInCurrentMonth =
            today.getFullYear() === date.getFullYear() && today.getMonth() === date.getMonth();

        for (let row = 0; row < 6; row++) {
            const weekRow = document.createElement("div");
            weekRow.classList.add("week-row");

            for (let col = 0; col < 7; col++) {
                if (row === 0 && col < firstDay) {
                    weekRow.appendChild(createEmptyBox());
                } else if (dayCounter <= lastDate) {
                    const currentDate = new Date(date.getFullYear(), date.getMonth(), dayCounter);
                    const dayBox = createDayBox(currentDate);

                    // Highlight today's date
                    if (
                        isTodayInCurrentMonth &&
                        currentDate.getDate() === today.getDate()
                    ) {
                        dayBox.classList.add("today-highlight");
                    }

                    dayCounter++;
                    weekRow.appendChild(dayBox);
                } else {
                    weekRow.appendChild(createEmptyBox());
                }
            }
            calendarBody.appendChild(weekRow);
        }
    }

    // Create CSS class for highlighting
    document.head.insertAdjacentHTML(
        "beforeend",
        `
    <style>
        .today-highlight {
            background-color:rgb(209 204 148);
            display: inline-block;
            text-align: center;
            padding: 5px;
            box-sizing: border-box;
        }
    </style>
    `
    );




    function generateWeekView(date) {
        const calendarBody = document.getElementById("calendarBody");
        const dayHeaders = document.getElementById("dayHeaders");

        // Clear previous content
        calendarBody.innerHTML = "";
        dayHeaders.innerHTML = "";

        // Start of the current week (Sunday)
        const startOfWeek = new Date(date);
        startOfWeek.setDate(date.getDate() - date.getDay());

        const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

        // Create headers for each day
        days.forEach((day, index) => {
            const header = document.createElement("div");
            header.classList.add("day-header");

            // Calculate the current day's date
            const currentDay = new Date(startOfWeek);
            currentDay.setDate(startOfWeek.getDate() + index);

            // Format the date as "MM/DD"
            const formattedDate = `${currentDay.getMonth() + 1}/${currentDay.getDate()}`;
            header.textContent = `${day} (${formattedDate})`;

            // Append the header
            dayHeaders.appendChild(header);
        });

        // Create hour rows for each day
        for (let hour = 0; hour < 24; hour++) {
            const row = document.createElement("div");
            row.classList.add("hour-row");

            // Hour label (e.g., "1 AM", "2 PM")
            const hourLabel = document.createElement("div");
            hourLabel.classList.add("hour-label");
            hourLabel.textContent = formatHour(hour);
            row.appendChild(hourLabel);

            // Create a cell for each day
            for (let i = 0; i < 7; i++) {
                const currentDay = new Date(startOfWeek);
                currentDay.setDate(startOfWeek.getDate() + i);
                const dayDate = formatDate(currentDay); // Format for comparison or use in events

                const cell = document.createElement("div");
                cell.classList.add("hour-cell");
                cell.onclick = () => openModalForDate(dayDate);

                // Check for events and add them to the cell
                if (dummyEvents[dayDate]) {
                    dummyEvents[dayDate].forEach(event => {
                        const eventStartHour = parseInt(event.start.split("T")[1].split(":")[0]);
                        if (eventStartHour === hour) {
                            const eventDiv = document.createElement("div");
                            eventDiv.classList.add("event");
                            eventDiv.textContent = event.title;
                            eventDiv.onclick = (e) => {
                                e.stopPropagation(); // Prevent triggering the cell's click event
                                viewEventDetails(event);
                            };
                            cell.appendChild(eventDiv);
                        }
                    });
                }


                row.appendChild(cell);
            }

            // Append the row to the calendar body
            calendarBody.appendChild(row);
        }
    }


    function formatHour(hour) {
        return hour === 0 ? "12 AM" :
            hour < 12 ? `${hour} AM` :
            hour === 12 ? "12 PM" :
            `${hour - 12} PM`;
    }


    function formatDate(date) {
        return date.toISOString().split("T")[0];
    }


    function generateDayView(date) {
        const calendarBody = document.getElementById("calendarBody");
        const dayHeaders = document.getElementById("dayHeaders");

        calendarBody.innerHTML = "";
        dayHeaders.innerHTML = "";

        const dayHeader = document.createElement("div");
        dayHeader.classList.add("day-header");
        dayHeader.textContent = date.toLocaleDateString("default", {
            weekday: "long",
            month: "long",
            day: "numeric"
        });
        dayHeaders.appendChild(dayHeader);

        for (let hour = 0; hour < 24; hour++) {
            const row = document.createElement("div");
            row.classList.add("hour-row");

            const hourLabel = document.createElement("div");
            hourLabel.classList.add("hour-label");
            hourLabel.textContent = formatHour(hour);
            row.appendChild(hourLabel);

            const cell = document.createElement("div");
            cell.classList.add("hour-cell");
            const dayDate = formatDate(date);

            cell.onclick = () => openModalForDate(dayDate);

            if (dummyEvents[dayDate]) {
                dummyEvents[dayDate].forEach(event => {
                    const eventStartHour = parseInt(event.start.split("T")[1].split(":")[0]);
                    if (eventStartHour === hour) {
                        const eventDiv = document.createElement("div");
                        eventDiv.classList.add("event");
                        eventDiv.textContent = event.title;
                        eventDiv.onclick = (e) => {
                            e.stopPropagation();
                            viewEventDetails(event);
                        };
                        cell.appendChild(eventDiv);
                    }
                });
            }
            row.appendChild(cell);
            calendarBody.appendChild(row);
        }
    }

    function createDayBox(date) {
        const dayBox = document.createElement("div");
        dayBox.classList.add("day");
        const dayDate = formatDate(date);
        dayBox.innerHTML = `<strong>${date.getDate()}</strong>`;

        if (dummyEvents[dayDate]) {
            dummyEvents[dayDate].forEach(event => {
                const eventDiv = document.createElement("div");
                eventDiv.classList.add("event");
                eventDiv.textContent = event.title;
                eventDiv.style.backgroundColor = event.color || '#28a745';
                dayBox.appendChild(eventDiv);
            });
        }

        dayBox.onclick = () => openModalForDate(dayDate);
        return dayBox;
    }

    function createEmptyBox() {
        const emptyBox = document.createElement("div");
        emptyBox.classList.add("day", "empty-day");
        return emptyBox;
    }

    function openModalForDate(selectedDate) {
        const today = new Date();
        const defaultStart = `${selectedDate}T${today.getHours().toString().padStart(2, '0')}:00`;
        const defaultEnd = `${selectedDate}T${(today.getHours() + 1).toString().padStart(2, '0')}:00`;

        $('#start_date').val(defaultStart);
        $('#end_date').val(defaultEnd);
        $('#eventModal').modal('show');
    }

    function viewEventDetails(event) {
        $('#eventTitle').val(event.title);
        $('#start_date').val(event.start);
        $('#end_date').val(event.end);
        $('#eventModal').modal('show');
    }

    function formatDate(date) {
        return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")}`;
    }

    function formatHour(hour) {
        const amPm = hour < 12 ? "AM" : "PM";
        const formattedHour = hour % 12 === 0 ? 12 : hour % 12;
        return `${formattedHour} ${amPm}`;
    }

    // Navigation Buttons
    document.getElementById("prevBtn").onclick = () => {
        if (currentView === "week") {
            currentDate.setDate(currentDate.getDate() - 7);
            generateWeekView(currentDate);
        } else if (currentView === "day") {
            currentDate.setDate(currentDate.getDate() - 1);
            generateDayView(currentDate);
        } else {
            currentDate.setMonth(currentDate.getMonth() - 1);
            generateCalendar(currentDate);
        }
    };

    document.getElementById("nextBtn").onclick = () => {
        if (currentView === "week") {
            currentDate.setDate(currentDate.getDate() + 7);
            generateWeekView(currentDate);
        } else if (currentView === "day") {
            currentDate.setDate(currentDate.getDate() + 1);
            generateDayView(currentDate);
        } else {
            currentDate.setMonth(currentDate.getMonth() + 1);
            generateCalendar(currentDate);
        }
    };

    function changeView(view) {
        currentView = view;
        if (view === 'week') {
            generateWeekView(currentDate);
        } else if (view === 'month') {
            generateCalendar(currentDate);
        } else if (view === 'day') {
            generateDayView(currentDate);
        }
    }


    // Save a new or edited event
    $('#eventForm').submit(function(e) {
        e.preventDefault();
        const formData = $(this).serialize();

        $.post("{{ route('google.calendar.store') }}", formData)
            .done(function() {
                Swal.fire({
                    icon: 'success',
                    title: 'Event Saved',
                    text: 'Your event has been successfully saved!',
                });
                $('#eventModal').modal('hide');
                fetchEvents();
            })
            .fail(function(xhr) {
                const errors = xhr.responseJSON.errors || {};
                showErrors(errors);
            });
    });

    // Delete an event
    $('#deleteEventBtn').click(function() {
        const eventId = $(this).data('event-id');
        $.ajax({
            url: `{{ url('google/calendar/event') }}/${eventId}`,
            type: 'DELETE',
            success: function() {
                Swal.fire({
                    icon: 'success',
                    title: 'Event Deleted',
                    text: 'Your event has been deleted!',
                });
                $('#eventModal').modal('hide');
                fetchEvents();
            },
            error: function(xhr) {
                console.error('Error deleting event:', xhr.responseText);
            }
        });
    });

    fetchEvents()
</script>

<script src="{{ asset('assets/vendor/fullcalendar/js/main.min.js') }}"></script>
<script src="{{ asset('assets/js/plugins-init/fullcalenda
r-init.js') }}"></script>
@endpush