@extends('user.layout.default')

@section('styles')

<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.css' rel='stylesheet' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.css' rel='stylesheet' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/timegrid/main.min.css' rel='stylesheet' />

<style>
    .day-no.active {
        width: 34.78px !important;
        height: 23.83px !important;
    }

    /* FULL CALENDAR */
    /* .fc-header-toolbar {
        display: none;

    } */

    .left-border-custom {
        border: none;
        border-left: 2px solid #30c7ec !important;
        color: black !important;
    }

    .fc-ltr .fc-axis {
        text-align: inherit !important;
    }

    /* Increase slot height */
    .fc-time-grid .fc-slats td,
    .fc-day-grid .fc-row>div {
        height: 60px;
    }

    /* Add a solid line to separate days */
    .fc-col-header-cell {
        padding: 10px;
        background-color: #f8f9fa;
        border-bottom: 2px solid #dee2e6;
    }

    /* Set a custom color for your events */
    .fc-event {
        background-color: #007bff;
        border: none;
        color: white;
        font-size: 14px;
    }


    .fc-today-button {
        display: none !important;
        ;
    }

    .fc-right {
        margin-top: 20px;
        margin-right: 20px;
        margin-bottom: -20px;
    }

    .fc-toolbar h2 {
        font-size: 1.2rem;
        margin-top: 20px;
        margin-left: 20px;
        margin-bottom: -20px;
    }

    .fc-prev-button.fc-button.fc-button-primary,
    .fc-next-button.fc-button.fc-button-primary {
        background: #6f6af8 !important;
        border: #6f6af8 !important;
    }

    .fc-prev-button.fc-button.fc-button-primary:hover,
    .fc-next-button.fc-button.fc-button-primary:hover {
        background: #6f6af8 !important;
        border: #6f6af8 !important;
    }

    /*  .fc-col-header-cell {
        padding: 10px !important;
        background-color: #f8f9fa !important;
        border-bottom: 2px solid #dee2e6 !important;
        ;
    }

    .fc-scrollgrid {
        border: 1px solid #dee2e6 !important;
    }

    .fc-event {
        background-color: #007bff !important;
        border: none !important;
        color: white !important;
        font-size: 14px !important;
    } */


    /* FLATPICKEr */

    .flatpickr-calendar {
        font-family: "Helvetica Neue", Arial, sans-serif;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        width: 100%;
        max-width: 750px;
    }

    .flatpickr-input {
        width: 100%;
        max-width: 750px;
        text-align: center;
    }

    .flatpickr-day.today {
        background: #6f6af8;
        color: white;
        border-radius: 50%;
    }

    .flatpickr-day.selected {
        background: #6f6af8 !important;
        color: white;
        border-radius: 50%;
    }

    .flatpickr-day:hover {
        background: #d8d8d8;
        border-radius: 50%;
        cursor: pointer;
    }

    #calendar .flatpickr-calendar {
        width: 100%;
        max-width: 750px;
    }

    .flatpickr-innerContainer {
        justify-content: center;
        margin-top: 15px;
    }

    .flatpickr-calendar .flatpickr-days .dayContainer:nth-child(6) {
        display: none;
    }

    .flatpickr-calendar .flatpickr-days {
        height: calc(5 * 40px);
    }
</style>
@endsection
@section('content')

<div class="navabar1">
    <nav class="navbar navbar-expand-lg">
        <div class="container-fluid">
            <h6 class="dashbod_title">Scheduled</h6>
            @include('user.inc.navbar')
        </div>
    </nav>
</div>



<div class="stucture">
    <div class="schedul_sec">
        <div class="row">
            <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12">
                <div id="showdate"></div>
                <div class="sedual-right-content">
                    <form>
                        <div class="custom-chekbox">
                            <div class="form-group">
                                <input type="checkbox" id="html" checked>
                                <label for="html">Meetings</label>
                            </div>
                            <div class="form-group">
                                <input type="checkbox" id="css" checked>
                                <label for="css">Follow Ups</label>
                            </div>
                        </div>
                    </form>
                    <div class="serch-container">
                        <input class="form-control global-search w-100" type="search" placeholder="Search here..." aria-label="Search">
                        <img src="{{asset('assets/images/icons/search.svg')}}" alt="" class="search-icon">
                    </div>
                    <ul class="sedual-list mt-2">
                        <!-- <li class="d-flex align-items-center gap-2">
                            <div class="img-1">
                                <img src="./assets/images/dashboard/img-1-workflow.svg" alt="">
                            </div>
                            <div class="sedual-item-txt">
                                <h6>Bessie Cooper</h6>
                                <p><span>15/10/23</span><span class="ms-2">3:00pm</span></p>
                            </div>
                        </li>
                        <li class="d-flex align-items-center gap-2">
                            <div class="img-1">
                                <img src="./assets/images/dashboard/img-1-workflow.svg" alt="">
                            </div>
                            <div class="sedual-item-txt">
                                <h6>Bessie Cooper</h6>
                                <p><span>15/10/23</span><span class="ms-2">3:00pm</span></p>
                            </div>
                        </li>
                        <li class="d-flex align-items-center gap-2">
                            <div class="img-1">
                                <img src="./assets/images/dashboard/img-1-workflow.svg" alt="">
                            </div>
                            <div class="sedual-item-txt">
                                <h6>Bessie Cooper</h6>
                                <p><span>15/10/23</span><span class="ms-2">3:00pm</span></p>
                            </div>
                        </li>
                        <li class="d-flex align-items-center gap-2">
                            <div class="img-1">
                                <img src="./assets/images/dashboard/img-1-workflow.svg" alt="">
                            </div>
                            <div class="sedual-item-txt">
                                <h6>Bessie Cooper</h6>
                                <p><span>15/10/23</span><span class="ms-2">3:00pm</span></p>
                            </div>
                        </li>
                        <li class="d-flex align-items-center gap-2">
                            <div class="img-1">
                                <img src="./assets/images/dashboard/img-1-workflow.svg" alt="">
                            </div>
                            <div class="sedual-item-txt">
                                <h6>Bessie Cooper</h6>
                                <p><span>15/10/23</span><span class="ms-2">3:00pm</span></p>
                            </div>
                        </li>
                        <li class="d-flex align-items-center gap-2">
                            <div class="img-1">
                                <img src="./assets/images/dashboard/img-1-workflow.svg" alt="">
                            </div>
                            <div class="sedual-item-txt">
                                <h6>Bessie Cooper</h6>
                                <p><span>15/10/23</span><span class="ms-2">3:00pm</span></p>
                            </div>
                        </li> -->
                    </ul>
                </div>
            </div>
            <div class="col-xl-8 col-lg-8 col-md-12 col-sm-12 col-12 mt-4 mt-lg-0">
                <div class="Scheduled-calander">
                    <div class="s-calander-header" style="background: #fafafa !important;">
                        <h6>Selected Dates</h6>
                        <div class="cancel-day">
                            <span class="day-no active">
                                <p>10</p>
                                <a href="#" class="close"><img src="./assets/images/icons/red-close.svg" alt="close"></a>
                            </span>

                        </div>
                    </div>
                    <div class="" id="calendar" style="background: #fafafa !important; border-top: 1px solid #00000033 !important; gap: 10px !important; display:flex !important;flex-direction:column !important">

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

@endsection


@section('script')

<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/timegrid/main.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/interaction/main.min.js'></script>


<script>
document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'timeGridWeek',
        plugins: ['timeGrid'],
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        slotLabelFormat: {
            hour: '2-digit',
            minute: '2-digit',
            hour12: true
        },
        dayHeaderFormat: {
            weekday: 'long',
            month: 'numeric',
            day: 'numeric',
            year: 'numeric',
            omitCommas: true
        },
        allDaySlot: false,
        slotMinTime: '06:00:00',
        slotMaxTime: '20:00:00',
        slotDuration: '00:30:00',
        nowIndicator: true,
        editable: true,
        eventLimit: true,
        expandRows: true,
        contentHeight: 'auto',
        eventColor: '#378006',
        events: '/load-events'
    });

    calendar.render();

    // Initialize flatpickr with today's date selected
    initializeFlatpickr(new Date());

    // Checkbox event handling
    var checkbox = document.getElementById('html');
    checkbox.addEventListener('change', function() {
        if (checkbox.checked) {
            var selectedDate = flatpickr("#showdate").selectedDates[0];
            var dateStr = flatpickr.formatDate(selectedDate, "Y-m-d");
            fetchMeetings(dateStr);
        } else {
            clearCalendarAndList();
        }
    });

    function initializeFlatpickr(defaultDate) {
        flatpickr("#showdate", {
            inline: true,
            dateFormat: "Y-m-d",
            defaultDate: defaultDate, // Set today's date as default
            monthSelectorType: "static",
            onChange: function(selectedDates, dateStr, instance) {
                // Fetch meetings for selected date
                fetchMeetings(dateStr);

                // Format and display the selected date in DD/MM
                if (selectedDates[0]) {
                    var displayDate = new Date(selectedDates[0]);
                    var formattedDisplayDate = displayDate.toLocaleDateString('en-GB', {
                        day: '2-digit',
                        month: '2-digit'
                    });
                    updateCalendarHeader(formattedDisplayDate);
                }
            }
        });

        // Initial fetch for today's meetings
        var todayStr = flatpickr.formatDate(defaultDate, "Y-m-d");
        fetchMeetings(todayStr);
    }

    function clearCalendarAndList() {
        calendar.removeAllEvents();
        const meetingListEl = document.querySelector('.sedual-list');
        meetingListEl.innerHTML = '<li class="d-flex justify-content-center align-items-center"><p>Data not found</p></li>';
    }

    function updateCalendarHeader(date) {
        const calendarHeader = document.querySelector('.cancel-day');
        calendarHeader.innerHTML = `<span class="day-no active">
                                        <p>${date}</p>
                                        <a href="#" class="close"><img src="./assets/images/icons/red-close.svg" alt="close"></a>
                                    </span>`;
        // Add close functionality to newly added close button
        calendarHeader.querySelector('.close').addEventListener('click', function(event) {
            event.preventDefault();
            calendarHeader.innerHTML = ''; // Clear the header
        });
    }

    function fetchMeetings(dateStr) {
        $.ajax({
            url: "{{route('getListing')}}",
            type: 'GET',
            data: {
                date: dateStr
            },
            dataType: 'json',
            success: function(response) {
                updateCalendar(response.data.meetings);
                updateMeetingList(response.data.meetings);
            },
            error: function(xhr, status, error) {
                console.error('Error fetching data: ' + error);
            }
        });
    }

    function updateCalendar(meetings) {
        calendar.removeAllEvents();
        meetings.forEach(function(meeting) {
            calendar.addEvent({
                title: meeting.firstname + " " + meeting.lastname,
                start: meeting.meeting_created_at,
                end: meeting.meeting_end_at,
                allDay: false,
                backgroundColor: '#e6f6fd',
                classNames: ['left-border-custom'],
                extendedProps: {
                    notes: meeting.meeting_note
                }
            });
        });
        calendar.render();
    }

    function updateMeetingList(meetings) {
        const meetingListEl = document.querySelector('.sedual-list');
        meetingListEl.innerHTML = '';

        if (!meetings || meetings.length === 0) {
            meetingListEl.innerHTML = '<li class="d-flex justify-content-center align-items-center"><p>Data not found</p></li>';
            return;
        }

        meetings.forEach(function(meeting) {
            const meetingDate = new Date(meeting.meeting_created_at);
            const formattedDate = meetingDate.toLocaleDateString('en-GB', {
                day: 'numeric',
                month: 'numeric',
                year: 'numeric'
            });
            const formattedTime = meetingDate.toLocaleTimeString('en-GB', {
                hour: '2-digit',
                minute: '2-digit',
                hour12: true
            });

            const listItem = `
            <li class="d-flex align-items-center gap-2">
                <div class="img-1">
                    <img src="./assets/images/dashboard/img-1-workflow.svg" alt="">
                </div>
                <div class="sedual-item-txt">
                    <h6>${meeting.firstname} ${meeting.lastname}</h6>
                    <p><span>${formattedDate}</span> <span class="ms-2">${formattedTime}</span></p>
                </div>
            </li>
            `;
            meetingListEl.insertAdjacentHTML('beforeend', listItem);
        });
    }
});
</script>





@endsection