@extends('dashboard.layouts.default')
@section('content')
<section class="top-section timetable">
  <div class="container">
		<div class="card bg-kay rounded-2 mb-2 parent-card">
			<div class="card-body">
				<div class="row justify-content-between">
					<div class="col-auto"><h4 class="d-flex align-items-center mb-0 text-white">Kayscience Live Tuition Timetable</h4></div>
					<h4 style="display:none;" class="col-auto mb-0 text-white" id="currentMonthYear"></h4>
				</div>
			</div>
		</div>
		<div class="card mb-3">
			<div class="card-body overflow-auto">
				<div class="row justify-content-end mb-2 g-2" style="display:none">
					<div class="col-auto">
						<div class="row g-1">
							<div class="col-auto">
								<button class="btn btn-nav d-flex align-items-center justify-content-center" id="prevWeek">
									<i class='bx bx-chevron-left'></i>
								</button>
							</div>
							<div class="col-auto">
								<select class="form-select" id="yearSelect">
								</select>
							</div>
							<div class="col-auto">
								<select class="form-select" id="monthSelect">
								</select>
							</div>
							<div class="col-auto">
								<button class="btn btn-nav d-flex align-items-center justify-content-center" id="nextWeek">
									<i class='bx bx-chevron-right'></i>
								</button>
							</div>
							<div class="col-auto">
								<button class="btn btn-primary" id="todayButton">Today</button>
							</div>
						</div>
					</div>
				</div>
				<table class="table table-bordered mb-0">
					<thead>
						<tr id="weekDays">
							<th>Time</th>
						</tr>
					</thead>
					<tbody id="scheduleBody">
					</tbody>
				</table>
			</div>
		</div>
  </div>
</section>
@endsection
@section('pagescripts')
<script>
        let currentWeekStart = new Date();

        function getWeekStartDate(date) {
            const day = date.getDay();
            const diff = date.getDate() - day + (day == 0 ? -6 : 1); // adjust when day is Sunday
            return new Date(date.setDate(diff));
        }

        function setWeekStartByMonthYear(year, month) {
            currentWeekStart = new Date(year, month - 1);
            currentWeekStart = getWeekStartDate(currentWeekStart);
        }

        function populateWeekDays() {
						const weekDaysRow = document.getElementById('weekDays');
						//weekDaysRow.innerHTML = '<th>Time</th>'; // Clear existing header
						const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
						const today = new Date();

						days.forEach((day, index) => {
								const date = new Date(currentWeekStart);
								date.setDate(date.getDate() + index);
								const formattedDate = date.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' });
								const dayCell = document.createElement('th');
								dayCell.textContent = '';

								if (date.toDateString() === today.toDateString()) {
										dayCell.classList.add('today'); // Add 'today' class if it's today
								}

								weekDaysRow.appendChild(dayCell);
						});
				}


        function updateCurrentMonthYear() {
            const currentMonthYearHeading = document.getElementById('currentMonthYear');
            const month = currentWeekStart.toLocaleString('default', { month: 'long' });
            const year = currentWeekStart.getFullYear();
            currentMonthYearHeading.textContent = `${month} ${year}`;
        }

        function updateMonthYearSelects() {
            document.getElementById('yearSelect').value = currentWeekStart.getFullYear();
            document.getElementById('monthSelect').value = currentWeekStart.getMonth() + 1;
        }

        function populateSchedule() {
						const scheduleBody = document.getElementById('scheduleBody');
						scheduleBody.innerHTML = ''; // Clear existing rows
						const times = ['08:00-09:00', '09:00-10:00', '10:00-11:00', '11:00-12:00', '12:00-13:00', '13:00-14:00', '14:00-15:00', '15:00-16:00', '16:00-17:00'];
						const today = new Date();

						times.forEach((time, rowIndex) => {
								const row = document.createElement('tr');
								const timeCell = document.createElement('td');
								timeCell.textContent = time;
								row.appendChild(timeCell);

								for (let day = 0; day < 7; day++) {
										const dayCell = document.createElement('td');
										const date = new Date(currentWeekStart);
										date.setDate(date.getDate() + day);

										if (date.toDateString() === today.toDateString()) {
												dayCell.classList.add('today'); // Add 'today' class if it's today
												if (rowIndex === 0) {
														const thElement = document.getElementById('weekDays').children[day + 1]; // +1 because the first cell is 'Time'
														thElement.classList.add('today');
												}
										}

										row.appendChild(dayCell);
								}

								//scheduleBody.appendChild(row);
						});
				}

        function updateSchedule() {
						populateWeekDays();
						populateSchedule();
						updateCurrentMonthYear();
						updateMonthYearSelects();

						// Automatically adjust the month and year selects if the week includes days from the next month
						let lastDayOfWeek = new Date(currentWeekStart);
						lastDayOfWeek.setDate(lastDayOfWeek.getDate() + 6); // Get the last day of the week
						if (lastDayOfWeek.getMonth() !== currentWeekStart.getMonth()) {
								document.getElementById('monthSelect').value = lastDayOfWeek.getMonth() + 1;
								document.getElementById('yearSelect').value = lastDayOfWeek.getFullYear();
						}
				}

        function populateYears() {
            const yearSelect = document.getElementById('yearSelect');
            for (let year = 2020; year <= 2039; year++) {
                const option = document.createElement('option');
                option.value = year;
                option.textContent = year;
                yearSelect.appendChild(option);
            }
        }

        function populateMonths() {
            const monthSelect = document.getElementById('monthSelect');
            const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
            months.forEach((month, index) => {
                const option = document.createElement('option');
                option.value = index + 1; // Month index starts from 1
                option.textContent = month;
                monthSelect.appendChild(option);
            });
        }

        // Event listeners for Next, Previous week buttons and Today button
        document.getElementById('prevWeek').addEventListener('click', function() {
            currentWeekStart.setDate(currentWeekStart.getDate() - 7);
            updateSchedule();
        });

        document.getElementById('nextWeek').addEventListener('click', function() {
            currentWeekStart.setDate(currentWeekStart.getDate() + 7);
            updateSchedule();
        });

        document.getElementById('todayButton').addEventListener('click', function() {
            currentWeekStart = getWeekStartDate(new Date());
            updateSchedule();
        });

        // Event listeners for year and month select dropdowns
        document.getElementById('yearSelect').addEventListener('change', function() {
            const selectedYear = this.value;
            const selectedMonth = document.getElementById('monthSelect').value;
            setWeekStartByMonthYear(selectedYear, selectedMonth);
            updateSchedule();
        });

        document.getElementById('monthSelect').addEventListener('change', function() {
            const selectedMonth = this.value;
            const selectedYear = document.getElementById('yearSelect').value;
            setWeekStartByMonthYear(selectedYear, selectedMonth);
            updateSchedule();
        });

        // Initialize
        currentWeekStart = getWeekStartDate(new Date());
        populateYears();
        populateMonths();
        updateSchedule();

		$(document).ready(function() {
                $.ajax({
					url: "{{ url('common/gettutiontimetabledata') }}",
                    type: 'get',
					dataType: "html"
                }).done(function (response) {
					var data = JSON.parse(response);
					if (data.flagError == true) {
					} else {
					      $("#weekDays").html('');
						  $("#weekDays").html(data.result['head']);
						  $("#scheduleBody").html('');
						  $("#scheduleBody").html(data.result['body']);
						  if(data.fridayExist == 'Y') {
							 $(".date_Friday").css('display','none')
						  }
					}
                    $('.video_track').html('');
                });
		});

    </script>
@endsection