{{ View::make('layout.header') }}
<style>
.date-boxes {
    display: flex;
    white-space:nowrap;
    
}

.roster-select-schedule {
    width: 140px;
    background: white;
    color: grey;
    border: 2px solid #cccccc; /* Define the border with slight grey color */
}

.dropright {
    font-size:8px;
}
.table th {
    padding:15px;
}

    .spinner-container {
      display: flex;
      justify-content: center;
      align-items: center;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
      z-index: 9999; /* Ensure it's above other content */
      transition:all 0.5s;
    }


.table td {
    padding:5px;
    padding-right:10px;
}

.chipku {
   flex: 0 0 75%;
    max-width: 75%;
    position: fixed;
    top: 0;
    float: left;
}
.dateHead {
    position:sticky;
    top:0;
}
.shouldOverflow {
    margin-left:0px;
    display: flex;
    flex-wrap: nowrap;
}

.dates-row th {
    position: sticky;
    top: 0;
    background-color: #fff; /* Background color of the sticky header */
    z-index: 10; /* Ensure the header is above other content */
}
/*.date-box {*/
/*    width: 140px;*/
/*    margin-right:  15px;*/
/*    height: 30px;*/
/*    border: 1px solid #ccc;*/
/*    text-align: center;*/
/*    line-height: 24px;*/
/*    background-color: white;*/
/*    transition: all 0.2s;*/
/*    font-style:italic;*/
/*    font-size:12px;*/
/*    font-weight:500;*/
/*    padding:3px;*/
/*    border-radius:6px;*/
/*}*/
.date-box {
       /*margin-right:  15px;*/
}

.roasterColumn {
    padding-right: 80px !important;
}

.date-box {
    overflow: hidden;
    font-size: 12px;
    text-align: center; /* Center text */
    white-space: nowrap; /* Prevent wrapping */
    text-overflow: ellipsis; /* Add ellipsis for overflow */
    width: 140px; /* Define the width as needed */
}

.schedule-option {
    display: inline-block;
    width: 30px; /* Set the width to make it square */
    height: 30px; /* Set the height to make it square */
    line-height: 30px; /* Center content vertically */
    text-align: center; /* Center content horizontally */
    border: 1px solid #ccc; /* Add border for visual separation */
    margin-left: 5px; /* Add some spacing between the options */
    cursor: pointer; /* Change cursor to pointer on hover */
}
.selected {
    border:none;
}
</style>


<style>
    /* Tooltip container */
    .tooltip {
        position: relative;
        display: inline-block;
        cursor: pointer;
    }
    
    /* Tooltip text */
    .tooltip::after {
        content: attr(aria-label);
        visibility: hidden;
        width: auto;
        background-color: #000;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 10px;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        transform: translateX(-50%);
        opacity: 0;
        transition: opacity 0.3s;
    }
    
    /* Show the tooltip text when hovering over the tooltip container */
    .tooltip:hover::after {
        visibility: visible;
        opacity: 1;
    }
    thead {
    position: sticky;
    top: 0;
    background-color: #fff; /* Background color of the sticky header */
    z-index: 2; /* Ensure the header is above other content */
}
.dates,thead{
    position:sticky;
    top:60px;
    height:40px;
    background:red;
    z-index:10;
}

</style>
<style>
[data-tippy]{position:relative}[data-tippy]:after,[data-tippy]:before{position:absolute;display:block;opacity:0;font-family:sans-serif;-webkit-transform:translate(-50%);transform:translate(-50%);-webkit-transform-origin:top;transform-origin:top;top:100%;left:50%;pointer-events:none}[data-tippy]:before{content:attr(data-tippy);color:#fff;font-size:14px;background-color:#000;z-index:1;padding:3px 6px;border-radius:3px;white-space:nowrap;margin-top:10px;font-weight:400}[data-tippy]:after{content:'';border:5px solid transparent;border-bottom-color:#000}[data-tippy]:hover:after,[data-tippy]:hover:before{-webkit-transform:translate(-50%);transform:translate(-50%)}[data-tippy][data-tippy-pos]:after,[data-tippy][data-tippy-pos]:before{top:auto;left:auto;margin-top:auto;-webkit-transform:none;transform:none}[data-tippy][data-tippy-pos]:after{border-bottom-color:transparent}[data-tippy][data-tippy-pos=down]:after,[data-tippy][data-tippy-pos=down]:before,[data-tippy][data-tippy-pos=up]:after,[data-tippy][data-tippy-pos=up]:before{left:50%}[data-tippy][data-tippy-pos=up]:after,[data-tippy][data-tippy-pos=up]:before{bottom:100%;-webkit-transform:translate(-50%);transform:translate(-50%)}[data-tippy][data-tippy-pos=up]:before{margin-bottom:10px}[data-tippy][data-tippy-pos=up]:after{border-top-color:#000;border-bottom-color:transparent}[data-tippy][data-tippy-pos=down]:after,[data-tippy][data-tippy-pos=down]:before{top:100%;-webkit-transform:translate(-50%);transform:translate(-50%)}[data-tippy][data-tippy-pos=down]:before{margin-top:10px}[data-tippy][data-tippy-pos=down]:after{border-bottom-color:#000;border-top-color:transparent}[data-tippy][data-tippy-pos=left]:after,[data-tippy][data-tippy-pos=left]:before,[data-tippy][data-tippy-pos=right]:after,[data-tippy][data-tippy-pos=right]:before{top:50%}[data-tippy][data-tippy-pos=left]:after,[data-tippy][data-tippy-pos=left]:before{right:100%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}[data-tippy][data-tippy-pos=left]:before{margin-right:10px}[data-tippy][data-tippy-pos=left]:after{border-left-color:#000}[data-tippy][data-tippy-pos=right]:after,[data-tippy][data-tippy-pos=right]:before{left:100%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}[data-tippy][data-tippy-pos=right]:before{margin-left:10px}[data-tippy][data-tippy-pos=right]:after{border-right-color:#000}[data-tippy]:hover:after,[data-tippy]:hover:before{opacity:1}[data-tippy][data-tippy-animate]:after,[data-tippy][data-tippy-animate]:before{transition:all .15s ease-out;transition-delay:0s}[data-tippy][data-tippy-animate]:hover:after,[data-tippy][data-tippy-animate]:hover:before{transition-delay:.15s}[data-tippy][data-tippy-animate=slide]:after,[data-tippy][data-tippy-animate=slide]:before{-webkit-transform:translate(-50%,-10px);transform:translate(-50%,-10px)}[data-tippy][data-tippy-animate=slide]:hover:after,[data-tippy][data-tippy-animate=slide]:hover:before{-webkit-transform:translate(-50%);transform:translate(-50%)}[data-tippy][data-tippy-pos=up][data-tippy-animate=slide]:after,[data-tippy][data-tippy-pos=up][data-tippy-animate=slide]:before{-webkit-transform:translate(-50%,10px);transform:translate(-50%,10px)}[data-tippy][data-tippy-pos=down][data-tippy-animate=slide]:after,[data-tippy][data-tippy-pos=down][data-tippy-animate=slide]:before{-webkit-transform:translate(-50%,-10px);transform:translate(-50%,-10px)}[data-tippy][data-tippy-pos=down][data-tippy-animate=slide]:hover:after,[data-tippy][data-tippy-pos=down][data-tippy-animate=slide]:hover:before,[data-tippy][data-tippy-pos=up][data-tippy-animate=slide]:hover:after,[data-tippy][data-tippy-pos=up][data-tippy-animate=slide]:hover:before{-webkit-transform:translate(-50%);transform:translate(-50%)}[data-tippy][data-tippy-pos=left][data-tippy-animate=slide]:after,[data-tippy][data-tippy-pos=left][data-tippy-animate=slide]:before{-webkit-transform:translate(10px,-50%);transform:translate(10px,-50%)}[data-tippy][data-tippy-pos=right][data-tippy-animate=slide]:after,[data-tippy][data-tippy-pos=right][data-tippy-animate=slide]:before{-webkit-transform:translate(-10px,-50%);transform:translate(-10px,-50%)}[data-tippy][data-tippy-pos=left][data-tippy-animate=slide]:hover:after,[data-tippy][data-tippy-pos=left][data-tippy-animate=slide]:hover:before,[data-tippy][data-tippy-pos=right][data-tippy-animate=slide]:hover:after,[data-tippy][data-tippy-pos=right][data-tippy-animate=slide]:hover:before{-webkit-transform:translateY(-50%);transform:translateY(-50%)}[data-tippy][data-tippy-animate=bubble]:after,[data-tippy][data-tippy-animate=bubble]:before{opacity:1;visibility:hidden}[data-tippy][data-tippy-animate=bubble]:hover:after,[data-tippy][data-tippy-animate=bubble]:hover:before{visibility:visible}[data-tippy][data-tippy-animate=bubble]:before{-webkit-clip-path:circle(10% at 50% 0);clip-path:circle(10% at 50% 0)}[data-tippy][data-tippy-animate=bubble]:hover:before{-webkit-clip-path:circle(100% at 50%);clip-path:circle(100% at 50%)}[data-tippy][data-tippy-pos=up][data-tippy-animate=bubble]:before{-webkit-clip-path:circle(10% at 50% 100%);clip-path:circle(10% at 50% 100%)}[data-tippy][data-tippy-pos=up][data-tippy-animate=bubble]:hover:before{-webkit-clip-path:circle(100% at 50%);clip-path:circle(100% at 50%)}[data-tippy][data-tippy-pos=down][data-tippy-animate=bubble]:before{-webkit-clip-path:circle(10% at 50% 0);clip-path:circle(10% at 50% 0)}[data-tippy][data-tippy-pos=down][data-tippy-animate=bubble]:hover:before{-webkit-clip-path:circle(100% at 50%);clip-path:circle(100% at 50%)}[data-tippy][data-tippy-pos=left][data-tippy-animate=bubble]:before{-webkit-clip-path:circle(10% at 100% 50%);clip-path:circle(10% at 100% 50%)}[data-tippy][data-tippy-pos=left][data-tippy-animate=bubble]:hover:before{-webkit-clip-path:circle(100% at 50%);clip-path:circle(100% at 50%)}[data-tippy][data-tippy-pos=right][data-tippy-animate=bubble]:before{-webkit-clip-path:circle(10% at 0 50%);clip-path:circle(10% at 0 50%)}[data-tippy][data-tippy-pos=right][data-tippy-animate=bubble]:hover:before{-webkit-clip-path:circle(100% at 50%);clip-path:circle(100% at 50%)}[data-tippy][data-tippy-visible]:after,[data-tippy][data-tippy-visible]:before{opacity:1;visibility:visible}[data-tippy][data-tippy-size=tiny]:before{font-size:10px}[data-tippy][data-tippy-size=small]:before{font-size:12px}[data-tippy][data-tippy-size=large]:before{font-size:16px}[data-tippy][data-tippy-size=jumbo]:before{font-size:20px}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/fontawesome.min.css" integrity="sha512-d0olNN35C6VLiulAobxYHZiXJmq+vl+BGIgAxQtD5+kqudro/xNMvv2yIHAciGHpExsIbKX3iLg+0B6d0k4+ZA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="spinner-container text-white" id="spinnerContainer">
  <!-- Bootstrap Spinner -->
  <div class="spinner-border" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>


<div class="app-content content">
    <div class="content-overlay"></div>
    <div class="header-navbar-shadow"></div>
    <div class="content-wrapper">
        <div class="content-header row">
            <div class="content-header-left col-md-9 col-12 mb-2">
                <div class="row breadcrumbs-top">
                    <div class="col-12">
                        <div class="breadcrumb-wrapper">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item">HR </li>
                                    <li class="breadcrumb-item active"><a href="{{ route('setupHr') }}">Setup</a></li>
                                    <li class="breadcrumb-item active">
                                        <a href="{{ route('update-weekly-duty_roaster') }}">Weekly Duty Roster</a>
                                    </li>
                                </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="content-body">
            <section id="dashboard-ecommerce">
                <div class="row match-height">
                    <div class="card" style="width: 100%;">
                        <div class="card-header">
                            <div class="d-flex align-items-center">
                                <h4 class="card-title">Weekly duty roaster</h4>
                            </div>
                        </div>
                        <form action="#" method="post" enctype="multipart/form-data">
                            @csrf
                            <div class="card-body">


                   
         
                   
 <select class="form-control" id="schedule" data-type="SCHEDULE" style="display: none;" onclick="changeSchedule(this)">
    <option value="">Select Schedule</option>
    @foreach ($schedule as $value)
        <option data-color="{{ $value->color }}" data-name="{{ $value->name }}" value="{{ $value->id }}">
            {{ $value->name }}
        </option>
    @endforeach
</select>

<div class="col-sm-3" id="scheduleType" style="display: none;">
    <select class="form-control" id="dayType" data-type="SCHEDULE">
        <option value="SCHEDULE">SCHEDULE</option>
        <option value="HOLIDAY">HOLIDAY</option>
        <option value="RESTDAY">RESTDAY</option>
    </select>
</div>

  

                 
            <!-- Add another section here -->
<div class="row" style="margin-left: 20px;">
    <div class="col-sm-6">
        <button id="prevWeek" onclick="changeOption(-1)" type="button" class="btn btn-primary float-left">&lt;</button>
        <button id="nextWeek" onclick="changeOption(1)" type="button" class="btn btn-primary float-left ml-1">&gt;</button>
        <button onclick="makeDataset()" type="button" class="btn btn-primary float-left ml-1">UPDATE</button>
        <div class="row">
            <div class="col">
                <button style="line-height: 2.25; text-align:left; cursor: default;" class="btn">
                    <h5 id="dateRange"></h5>
                </button>
            </div>
        </div>
    </div>
<div class="col-sm-6 d-flex justify-content-end">
    <div class="row d-flex justify-content-end">
        <div id="dateSelectContainer" style="margin-right: 25px;">
            <select type="text" class="form-control" name="" id="dateSelect" placeholder="Week options"></select>
        </div>
        <div id="monthSelectContainer" style="margin-right: 25px;">
            <select type="text" class="form-control" name="" id="monthSelect" placeholder="Months"></select>
        </div>
    </div>
    <div class="btn-group" role="group" style="display:none" aria-label="Date Range Selector">
        <button type="button" class="btn btn-secondary" onclick="selectDateRange('weekly')">Weekly</button>
        <button type="button" class="btn btn-secondary" onclick="selectDateRange('monthly')">Monthly</button>
    </div>
    <input class="form-control" style="width:250px" placeholder="Search roster" id="searchRoster"></input>
</div>

</div>

            <div class="card-body" >

</div>
            <!-- End of another section -->
        </div>
    </div>
</div>

{{ View::make('layout.footer') }}

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/js/fontawesome.min.js" integrity="sha512-C8qHv0HOaf4yoA7ISuuCTrsPX8qjolYTZyoFRKNA9dFKnxgzIHnYTOJhXQIt6zwpIFzCrRzUBuVgtC4e5K1nhA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
var KvPairs;


var isMonthly = false;
var ScheduleColor = null;
var scheduleId = null;
    function changeSchedule(selectElement) {
        var selectedOption = $(selectElement).find('option:selected');
         ScheduleColor = selectedOption.data('color');
         scheduleId = selectedOption.val();
    }
    var data = {};
    var startDate;
    var globalStartDate;
    var globalEndDate;
    var endDate;
    var rosterIds = [];
    function getDateRangeForYear(year) {
        const startDate = new Date(year, 0, 1); // January 1st
        const endDate = new Date(year, 11, 31); // December 31st

        const dateRanges = [];
        let currentDate = new Date(startDate);
        let weekCounter = 1;

        while (currentDate <= endDate) {
            const weekStartDate = new Date(currentDate);
            const weekEndDate = new Date(currentDate);
            weekEndDate.setDate(weekEndDate.getDate() + 6); // Get end of week (Saturday)

            // Format dates as dd-mm-yyyy
            const formattedStartDate = weekStartDate.toLocaleDateString('en-GB');
            const formattedEndDate = weekEndDate.toLocaleDateString('en-GB');

            dateRanges.push({ week: weekCounter, start: formattedStartDate, end: formattedEndDate });

            currentDate.setDate(currentDate.getDate() + 7); // Move to next week
            weekCounter++;
        }

        return dateRanges;
    }

function renderDateRangesInSelect(dateRanges) {
    const selectElement = $("#dateSelect");

    dateRanges.forEach(dateRange => {
        const option = $("<option>");
        const startDateString = dateRange.start;
        const endDateString = dateRange.end;

        option.val(`${startDateString} - ${endDateString}`);
        option.text(`${startDateString} - ${endDateString}`);
        selectElement.append(option);
        
    });
        selectElement.on('change', function() {
        const selectedOption = $(this).val();
        const dates = selectedOption.split(' - ');
        const startDate = dates[0];
        const endDate = dates[1];
        setStartEndDate(startDate, endDate);
    });

}


function setStartEndDate(start,end){
startDate = start;
endDate = end;
renderDateRangesForRosters(start,end);
}

    function getDatesInMonth(year, month) {
        const dates = [];
        const daysInMonth = new Date(year, month + 1, 0).getDate(); // Get the number of days in the month

        for (let day = 1; day <= daysInMonth; day++) {
            dates.push(new Date(year, month, day));
        }

        return dates;
    }

    function renderMonthsInSelect() {
        const selectElement = $("#monthSelect");

        const months = [
            "January", "February", "March", "April", "May", "June",
            "July", "August", "September", "October", "November", "December"
        ];

        months.forEach((month, index) => {
            const option = $("<option>");
            option.val(index + 1); // Month index is 0-based, so add 1
            option.text(month);
            selectElement.append(option);
        });
    }

    function init(){
    renderOptions()
    }
    
function renderWeekOptions(){
    
}
async function renderDateRangesForRosters(start, end)  {
    let responseData;
    let rosterName = $("#searchRoster").val();
console.log([start,end]);
   await $.ajax({
        url: '{{ ($pageType==='approval')?route("weekly-duty_roaster-data-approver") : route("weekly-duty_roaster-data") }}',
        type: 'GET',
        dataType: 'json',
        data: {
            start: start,
            end: end,
            rosterName:rosterName
        },
        success: function(response) {
        responseData = response;
        rosterIds = response.roaster_ids;

        },
        error: function(xhr, status, error) {
        }
    });
    
    showLoading();
    globalStartDate = start;
    globalEndDate = end;
    const cardBody = $(".card-body").eq(1); // Get the second .card-body element
cardBody.empty();
    // Convert start and end dates to Unix timestamps
    const startDateParts = start.split('/');
    const endDateParts = end.split('/');
    const startDate = new Date(`${startDateParts[2]}-${startDateParts[1]}-${startDateParts[0]}`); // Format: YYYY-MM-DD
    const endDate = new Date(`${endDateParts[2]}-${endDateParts[1]}-${endDateParts[0]}`); // Format: YYYY-MM-DD
    // Extract day and month from start date
    const startDay = startDate.getDate();
    const startMonth = startDate.toLocaleString('default', { month: 'long' });
    
    // Extract day and month from end date
    const endDay = endDate.getDate();
    const endMonth = endDate.toLocaleString('default', { month: 'long' });
    
    // Format the strings
    const dateString = `${startDay} ${startMonth} - ${endDay} ${endMonth}`;
    $('#dateRange').text(dateString);
    // Dates column
    const wrapper = $("<div>").addClass("table-wrapper");
    const table = $("<table>").addClass("table");
    const thead = $("<thead>");
    const tbody = $("<tbody>");
    const datesRow = $("<tr>").addClass("dates-row");

    // Populate date ranges
    datesRow.append($("<th>").text("Roaster").addClass("roasterColumn"));
for (let timestamp = startDate.getTime(); timestamp <= endDate.getTime(); timestamp += 24 * 60 * 60 * 1000) {
    const currentDate = new Date(timestamp);
    const formattedDate = currentDate.toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' }); // Format date as DD/MM/YYYY
    const dayOfWeek = currentDate.toLocaleDateString('en-GB', { weekday: 'long' }); // Get the full day of the week

    const th = $("<th>").text(formattedDate);
    const small = $("<small>").text(dayOfWeek).css("display", "block").css("font-size", "small");

    const dateCell = th.append(small);

    datesRow.append(dateCell);
}


    // Append the header row to the thead
    thead.append(datesRow);
    // Append the thead to the table
    table.append(thead);
    // Append the table to the wrapper
    wrapper.append(table);
    // Append the wrapper to the card body
    cardBody.append(wrapper);

    // Iterate through each roster
    let schedules = getSchedules();
rosterIds.forEach(rosterId => {
    // Create a row for each roster
    const row = $("<tr>");

const rosterName = KvPairs.get(rosterId.toString());
const rosterCol = $("<td>").text(`${rosterName}`).addClass("roasterColumn");

    // Populate dropdowns for the current roster and each date
    for (let timestamp = startDate.getTime(); timestamp <= endDate.getTime(); timestamp += 24 * 60 * 60 * 1000) {
        const currentDate = new Date(timestamp);
        const formattedDate = currentDate.toLocaleDateString('en-GB'); // Format date as DD/MM/YYYY
        const dayOfMonth = currentDate.getDate();

        // Create dropdown for the current date
        const dropdown = $("<div>").addClass("dropright");
        const dropdownToggle = $("<button>").addClass("btn dropdown-toggle roster-select-schedule date-box")
            .attr("type", "button")
            .attr("id", `${formattedDate}_${rosterId}`)
            .attr("data-roaster-id",rosterId)
            .attr("data-toggle", "dropdown")
            .attr("aria-haspopup", "true")
            .attr("data-date",formattedDate)
            .attr("aria-expanded", "false")
            .text("NO SCHEDULE");
        const dropdownMenu = $("<div>").addClass("dropdown-menu").attr("aria-labelledby", `dropdownMenu${formattedDate}`);

        schedules.forEach(schedule => {
            const sectionContainer = $("<div>").addClass("d-flex justify-content-between align-items-center");
            const scheduleSection = $("<span>").text(schedule.text);
            const optionsContainer = $("<div>").addClass("d-flex");
            const holidaySection = $("<span>").addClass("schedule-option")
                .text("H")
                .on("click", function (event) {
                    event.stopPropagation();
                    assignSchedule(schedule.value, formattedDate, rosterId, "H");
                    $(this).closest(".dropdown-menu").dropdown("toggle"); // Close dropdown manually
                });
            const restDaySection = $("<span>").addClass("schedule-option")
                .text("R")
                .on("click", function (event) {
                    event.stopPropagation();
                    assignSchedule(schedule.value, formattedDate, rosterId, "R");
                    $(this).closest(".dropdown-menu").dropdown("toggle"); // Close dropdown manually
                });
            optionsContainer.append(holidaySection, restDaySection);
            sectionContainer.append(scheduleSection, optionsContainer);
            const dropdownItem = $("<a>").addClass("dropdown-item").append(sectionContainer);
            sectionContainer.on("click", function () {
                assignSchedule(schedule.value, formattedDate, rosterId, "W");
            });
            dropdownMenu.append(dropdownItem);
        });
        const removeSection = $("<span>")
            .text("Remove")
            .on("click", function (event) {
                event.stopPropagation();
                    assignSchedule(schedule.value, formattedDate, rosterId, "remove");
                $(this).closest(".dropdown-menu").dropdown("toggle"); // Close dropdown manually
            });
        
        // Append the "Remove" option to the dropdown menu
        const removeDropdownItem = $("<a>").addClass("dropdown-item").append(removeSection);
        dropdownMenu.append(removeDropdownItem);
        // Append dropdown toggle and menu to the dropdown
        dropdown.append(dropdownToggle, dropdownMenu);

        // Create a new cell for the dropdown and append it to the row
        const dropdownCell = $("<td>").append(dropdown);
        row.append(dropdownCell);
    }

    // Append the roster column to the row
    row.prepend(rosterCol);

    // Append the row to the table body
    tbody.append(row);
});

// Append the table body to the table
table.append(tbody);
        setElementData(responseData.data);
        hideLoading();


}

function assignSchedule(scheduleId, date, rosterid, type){
    let formattedDate = date.replaceAll('/', '\\/');
    let elementId = `${formattedDate}_${rosterid}`;
    let element = $('#' + elementId);
    let dayType="SCHEDULE";
    let color = getColorByScheduleId(scheduleId);
if (type == "H") {
    dayType = "HOLIDAY";
    color = "green";
} else if (type == "R") {
    dayType = "RESTDAY";
    color = "grey";
}
    if (type=="remove") {
        // If properties are assigned, remove them
        element.css('background', ''); // Remove background color
        element.css('color', ''); // Remove text color
        element.removeAttr('data-schedule-id'); // Remove data-schedule-id attribute
        element.removeAttr('data-day-type'); // Remove data-day-type attribute
        element.data('assigned', false); // Update state to unassigned
        element.removeAttr('data-tippy'); 
        element.text('Schedule removed'); 
        element.removeClass('selected');
    } else {
        if (!date || !rosterid || !scheduleId || !color) {
            toastr.error("Schedule not selected");
            return;
        }

        // Apply background gradient and other attributes
        element.css('background', color);
        element.css('color', 'white');
        element.attr('data-schedule-id', scheduleId); // Assign rosterid instead of scheduleId
        element.attr('data-day-type', dayType);
        element.data('assigned', true); // Update state to assigned
        let schname = $('#schedule').find('option[value="' + scheduleId + '"]').attr('data-name');
        element.addClass("selected")
        // element.attr('data-tippy', schname); 
        element.text(schname); 
    }

}

function assignRoster(date, rosterid, action="assign") {
    let formattedDate = date.replaceAll('/', '\\/');
    let elementId = `${formattedDate}_${rosterid}`;
    let element = $('#' + elementId);
    let dayType = $("#dayType").val();
    let color;

    if (action!="assign") {
        // If properties are assigned, remove them
        element.css('background', ''); // Remove background color
        element.css('color', ''); // Remove text color
        element.removeAttr('data-schedule-id'); // Remove data-schedule-id attribute
        element.removeAttr('data-day-type'); // Remove data-day-type attribute
        element.data('assigned', false); // Update state to unassigned
        element.removeAttr('data-tippy'); 
        element.text('Schedule removed'); 
        element.removeClass('selected');
    } else {
        if (!date || !rosterid || !scheduleId || !ScheduleColor) {
            toastr.error("Schedule not selected");
            return;
        }
        // If properties are not assigned, assign them
        if (dayType === 'HOLIDAY') {
            color = 'green';
        } else if (dayType === 'RESTDAY') {
            color = 'grey';
        } else {
            color = ScheduleColor;
        }

        // Apply background gradient and other attributes
        element.css('background', color);
        element.css('color', 'white');
        element.attr('data-schedule-id', scheduleId); // Assign rosterid instead of scheduleId
        element.attr('data-day-type', dayType);
        element.data('assigned', true); // Update state to assigned
        let schname = $('#schedule').find('option[value="' + scheduleId + '"]').attr('data-name');
        element.addClass("selected")
        // element.attr('data-tippy', schname); 
        element.text(schname); 
    }



}


function renderOptions(){
    console.log("hi");
    if(isMonthly) {    console.log("hi2");

        $('#dateSelectContainer').hide();
        $('#monthSelectContainer').show();
    } else {
        $('#monthSelectContainer').hide();
        $('#dateSelectContainer').show();
    }
}

function getWeekDateRange() {
    // Get the current date
    const currentDate = new Date();

    // Get the current year
    const currentYear = currentDate.getFullYear();

    // Get the yearly data for the current year
    const yearlyData = getDateRangeForYear(currentYear);
    
    // Find the current week within the yearly data
    const currentWeek = yearlyData.find(week => {
        const [startDay, startMonth, startYear] = week.start.split("/").map(Number);
        const [endDay, endMonth, endYear] = week.end.split("/").map(Number);

        const startDate = new Date(startYear, startMonth - 1, startDay);
        const endDate = new Date(endYear, endMonth - 1, endDay);

        return currentDate >= startDate && currentDate <= endDate;
    });

    console.log(currentWeek);
    return currentWeek;
    // const currentDate = new Date();
    // const year = currentDate.getFullYear();
    // const firstDayOfYear = new Date(year, 0, 1); // January 1st of the year
    // const firstDayOfWeek = firstDayOfYear.getDay(); // Day of the week (0-6) for the 1st day of the year
    // const currentDateOfYear = Math.floor((currentDate - firstDayOfYear) / (1000 * 60 * 60 * 24)); // Day of the year (0-indexed)
    // const currentWeekNumber = Math.ceil((currentDateOfYear + firstDayOfWeek) / 7);

    // const startDate = new Date(year, 0, 1 + (currentWeekNumber - 1) * 7 - firstDayOfWeek); // Start date of the current week
    // const endDate = new Date(startDate);
    // endDate.setDate(endDate.getDate() + 6); // End date is 6 days later

    // const startDateFormatted = `${startDate.getDate()}/${startDate.getMonth() + 1}/${startDate.getFullYear()}`;
    // const endDateFormatted = `${endDate.getDate()}/${endDate.getMonth() + 1}/${endDate.getFullYear()}`;

    // return { weekNumber: currentWeekNumber, startDate: startDateFormatted, endDate: endDateFormatted };
}

function setDefaultDateRange() {
    const selectBox = $("#dateSelect");
    const currentDate = new Date();
    const currentDateFormatted = `${currentDate.getDate()}/${currentDate.getMonth() + 1}/${currentDate.getFullYear()}`;

    selectBox.find("option").each(function() {
        const optionValue = $(this).val();
        const dateRange = optionValue.split(" - ");
        const startDateParts = dateRange[0].split("/");
        const endDateParts = dateRange[1].split("/");
        const startDate = new Date(startDateParts[2], startDateParts[1] - 1, startDateParts[0]); // Year, Month (0-based), Day
        const endDate = new Date(endDateParts[2], endDateParts[1] - 1, endDateParts[0]); // Year, Month (0-based), Day
        // console.log("Option:", optionValue);
        // console.log("Start Date:", startDate);
        // console.log("End Date:", endDate);
        if (currentDate >= startDate && currentDate <= endDate) {
            // console.log("Selected option:", optionValue);
            $(this).prop("selected", true);
            return false; // Exit the loop once found
        }
    });
}

function setElementData(response) {
    response.forEach(function(roaster) {
        var roasterId = roaster.roaster_id;
        roaster.dates.forEach(function(item) {
            var dateParts = item.date.split('-'); // Split the date string
            var formattedDate = dateParts[2] + '/' + dateParts[1] + '/' + dateParts[0]; // Convert to dd/mm/yyyy format
            var escapedDate = $.escapeSelector(formattedDate); // Escape special characters in the date
            var compositeId = escapedDate + '_' + roasterId; // Create composite ID
            var element = $('#' + compositeId); // Assuming the element id is the same as the composite id
            if (element.length > 0) { // Check if element exists
                element.attr('data-date', formattedDate);
                element.attr('data-roaster-id', roasterId);
                element.attr('data-assigned', true);
                if(item.day_type=="HOLIDAY"){
                    item.color = 'green';
                } else if(item.day_type=="RESTDAY"){
                    item.color = 'grey';
                }
                element.css({
                    'background-color': item.color, // Set background color
                    'color': 'white', // Set font color to white
                });
                element.attr('data-day-type', item.day_type); // Set day type
                element.attr('data-holiday-id', item.holiday_id); // Set holiday id
                element.attr('data-schedule-id', item.schedule_id); // Set schedule id
                element.addClass("selected");

                // Set schedule name as inner text
                var schname = $('#schedule').find('option[value="' + item.schedule_id + '"]').attr('data-name');
                element.text(schname);

                // Set tippy attribute
                // element.attr('data-tippy', schname); 
            }
        });
    });
}


$(document).ready(function(){
            let range = getWeekDateRange();
            console.log(range);
        $.ajax({
            url: '{{ route("weekly-duty_roaster-data") }}',
            type: 'GET',
            dataType: 'json',
            data: {
                start: range.start,
                end: range.end
            },
            success: function(response){
                // Extract roaster IDs from the response
             rosterIds = response.roaster_ids;
            KvPairs = new Map(Object.entries(response.roaster_names));
             response = response.data;

        renderMonthsInSelect();
        const currentYear = new Date().getFullYear();
        const dateRangesForCurrentYear = getDateRangeForYear(currentYear);
        renderDateRangesInSelect(dateRangesForCurrentYear);
        init();
        renderDateRangesForRosters(range.start,range.end);
        setDefaultDateRange();
        setElementData(response);
         hideLoading();
            },
            error: function(xhr, status, error){
                console.error(error);
            }

    });
});

    function showLoading() {
      document.getElementById('spinnerContainer').style.display = 'flex';
    }

    function hideLoading() {
      document.getElementById('spinnerContainer').style.display = 'none';
    }

function makeDataset() {
    showLoading();
    let dataset = []; // Array to store data objects
    
    $('.date-box').each(function() {
        let scheduleId = $(this).attr('data-schedule-id');
        let date = $(this).attr('data-date');
        let roasterId = $(this).attr('data-roaster-id');
        let dayType = $(this).attr('data-day-type');
        
        // Check if all properties are defined
        if (scheduleId !== undefined && date !== undefined && roasterId !== undefined && dayType !== undefined) {
            // Create data object
            var dataObject = {
                scheduleId: scheduleId,
                date: date,
                roasterId: roasterId,
                dayType: dayType
            };
            
            // Push data object to dataset array
            dataset.push(dataObject);
        }
    });
    
    // Convert dataset array to JSON string
    var jsonString = JSON.stringify(dataset);
    
    // // Log the JSON string
    console.log(jsonString);
    // console.log(globalEndDate);
    // console.log(globalStartDate);
    
    // Get CSRF token value
    var csrfToken = '{{ csrf_token() }}';
    
    // Send POST request
    $.ajax({
        url: '{{ route("update-weekly-roaster-data") }}',
        type: 'POST',
        data: {
            _token: csrfToken, // Include CSRF token
            dataset: jsonString,
            globalEndDate: globalEndDate,
            globalStartDate: globalStartDate,
            rosterIds:rosterIds
        },
        success: function(response) {
        toastr.success('Updated Successfully');
        
        hideLoading();
        
        // Hit the /caching-sheet URL without redirecting
        fetch("{{ route('caching-sheet') }}")
                        .then(response => response.json())  // assuming you expect a JSON response
                        .then(data => {
                            console.log("URL hit successfully", data);
                        })
                        .catch(error => {
                            console.error("Error hitting the URL", error);
                        });

        },
        error: function(xhr, status, error) {
        toastr.error('Failed to update');        
        hideLoading();
        }
    });
}

    (function($) {
        $.fn.popupMenu = function() {
            var $menuContent = $('.popup-menu .menu-content');

            return this.each(function() {
                var $popupMenu = $(this);
                var $popupBtn = $popupMenu.find('.popup-btn');

                $popupBtn.click(function() {
                    var menuId = $(this).data('menu-id');
                    console.log('Menu opened from:', menuId);
                    $menuContent.hide(); // Hide other menu contents
                    $popupMenu.find('.menu-content').toggle();
                });

                $(document).click(function(event) {
                    if (!$(event.target).closest($popupMenu).length) {
                        $menuContent.hide();
                    }
                });
            });
        };
    })(jQuery);

    $(document).ready(function() {
        $('.popup-menu').popupMenu();
    });

function getSchedules(){
let optionsArray = [];
let options = $('#schedule').find('option');
options.each(function() {
    let optionText = this.textContent.trim(); 
    let optionValue = $(this).val(); 
    let optionObject = { text: optionText, value: optionValue }; 
    optionsArray.push(optionObject);
});
return optionsArray;
}

function changeOption(step) {
  const selectElement = $("#dateSelect");
  const selectedIndex = selectElement.prop("selectedIndex");
  const newIndex = selectedIndex + step;
  if (newIndex >= 0 && newIndex < selectElement[0].options.length) {
    selectElement.prop("selectedIndex", newIndex).trigger("change");
  }
}

function searchRoster(){
console.log("invoked");
        
        const selectedOption = $('#dateSelect').val();
        const dates = selectedOption.split(' - ');
        const startDate = dates[0];
        const endDate = dates[1];
        setStartEndDate(startDate, endDate);
}

// Function to perform some action (e.g., making a request) after typing stops
function debounce(func, delay) {
    let timeoutId;
    return function() {
        const context = this;
        const args = arguments;
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => {
            func.apply(context, args);
        }, delay);
    };
}

// Function to be executed after typing stops
function handleInput() {
    // Replace this with the action you want to perform after typing stops
searchRoster();
    
}

// Debounced version of the input handler
const debouncedInputHandler = debounce(handleInput, 500); // Adjust delay as needed (in milliseconds)

// Attach the debounced handler to the input box
document.getElementById('searchRoster').onkeyup = debouncedInputHandler;


function selectDateRange(range) {
    
        isMonthly=(range!="weekly");
    $('.btn-group button').removeClass('active');
    $('.btn-group button[data-range="' + range + '"]').addClass('active');
    renderOptions();
}



function getColorByScheduleId(optionValue) {
    return $(`#schedule option[value="${optionValue}"]`).attr('data-color');
}
</script>