@extends('layouts/eims_layout')
@section('title', '| ' . $data['pageTitle'])
@section('content')
    <style>
        .searchButton {
            padding-top: 1.2% !important;
        }
    </style>
    <div class="row add-data-form" style="padding-bottom:20px;">
        <div class="col-md-12">
            <div class="col-md-1"></div>
            <div class="col-md-10 fullbody">
                <div class="viewTitle" style="border-bottom: 1px solid white;">
                    {{-- <a href="{{ url('eims/academic/routine/course-class/create') }}"
                        class="btn btn-info pull-right addViewBtn"><i class="glyphicon glyphicon-th-list addIcon">
                        </i>Add {{ $data['pageTitle'] }}</a> --}}
                    <button type="button" class="btn btn-primary print_timetable" id="print">Print</button>
                    {{-- <button type="button" class="btn btn-primary" onclick='printDiv();' id="print">Print</button> --}}
                    &nbsp;&nbsp;&nbsp;

                </div>
                <div class="panel panel-default panel-border">
                    <div class="panel-heading">
                        <div class="panel-title">{{ $data['pageTitle'] }} Generate</div>
                    </div>
                    <div class="panel-body">
                        {!! Form::open([
                            'url' => '',
                            'role' => 'form',
                            'class' => 'form-horizontal form-groups',
                            'id' => 'courseClassRoutineForm',
                        ]) !!}

                        <!-- filtering -->
                        @php
                            $options = ['' => 'Select any'];

                            $searchElements = [
                                ['element' => 'fillProgramId','label' => $data['companyType'] === 'UNV' ? 'Program' : 'Medium/Version'],
                                ['element' => 'fillSessionId','label' => 'Session'],
                                ['element' => 'fillSemesterClassId'],
                                ['element' => 'fillSectionId'],
                                ['element' => 'fillShiftId','label' => 'Shift'],
                            ];

                            // Conditionally add 'semester_class_group_id' for 'SCL' companyType
                            if ($data['companyType'] == 'SCL') {
                                array_splice($searchElements, 3, 0, [['element' => 'fillSemesterClassGroupId']]);
                            }
                            // Conditionally add 'semester_class_group_id' for 'SCL' companyType
                            if ($data['companyType'] == 'CLG') {
                                array_splice($searchElements, 3, 0, [['element' => 'fillSemesterClassGroupId']]);
                            }

                            // Conditionally add 'faculty_id' for 'UNV' companyType at the beginning
                            if ($data['companyType'] == 'UNV') {
                                array_unshift($searchElements, ['element' => 'fillFacultyId']); // Adds 'faculty_id' at the beginning
                            }
                        @endphp
                        @include('partials.searchPanel.main', ['searchElements' => $searchElements])
                        {!! Form::close() !!}

                        <!-- filtering end-->

                        <div id="routineWeekSubmitDiv">
                            <style>
                                @media print {
                                    html {
                                        -webkit-print-color-adjust: exact !important;
                                        font-family: sans-serif;
                                    }

                                    body {
                                        zoom: 70% !important;
                                        -moz-transform: scale(1.05);
                                        /* Firefox */
                                        -moz-transform-origin: 0 0;
                                    }

                                    .attachment-block {
                                        border-radius: 3px;
                                        padding: 3px;
                                        margin-bottom: 10px;
                                        border: 1px solid #000;
                                        background: #fff;
                                        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 12%), 0 1px 2px 0 rgba(0, 0, 0, 24%);
                                    }
                                }
                            </style>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="table-responsive">
                                        <table id="addRoutineTable" class="table table-stripped">

                                        </table>
                                    </div>
                                </div>
                                {{-- <div class="col-md-12" style="display: none;"> --}}
                                <div class="col-md-12" style="display: none;">
                                    <div class="table-responsive">
                                        <div id="timetable" class="timetable">

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <span id="success" style="color:green; font-size:20px;" class="pull-right"></span>
                    </div>
                </div>
                <div class="footerTitle" style="border-top:1px solid white"></div>
            </div>
            <div class="col-md-1"></div>
        </div>
    </div>
@endsection

<script type="text/javascript" src="{{ asset('js/jquery-1.11.1.min.js') }}"></script>

<script type="text/javascript">
    $(document).ready(function() {
        hideErrorMessage();
        $('.print_timetable').hide();
        var companyType = "{{ $data['companyType'] }}";
        $('form').submit(function(event) {
            var form = $('form').serialize();
            event.preventDefault();
            $('#loadingModal').show();
            $.ajax({
                type: 'post',
                url: '{{ route('eims_course_class_routine_generate') }}',
                data: $('form').serialize(),
                dataType: 'json',
                success: function(_response) {
                    var tableBody = '';
                    if (_response.responseStatus == 'success') {
                        $('#loadingModal').hide();
                        $('#addRoutineTable').empty();
                        $('.print_timetable').show();
                        if (_response.weekDays != null) {
                            tableHead = '<thead><tr>';

                            // Creating header based on the week days
                            $.each(_response.weekDays, function(keyWeekDay, valueWeekDay) {
                                tableHead +=
                                    '<th style="text-align:center;background-color:#fff !important;color:#000;width:14%;">' +
                                    valueWeekDay + '</th>';
                            });
                            tableHead += '</tr></thead>';
                            $('#addRoutineTable').append(tableHead);

                            // Creating body content for each day of the week
                            tableBody =
                                '<tbody><tr style="background-color:#fff !important;">';
                            $.each(_response.weekDays, function(keyWeekDay, valueWeekDay) {
                                tableBody +=
                                    '<td style="text-align:left;vertical-align:top;width:14%;padding:5px;line-height:1.42857143;vertical-align:top;">';

                                // For each week day, populate the schedule
                                if (_response.data[keyWeekDay] != undefined) {
                                    $.each(_response.data[keyWeekDay], function(
                                        keyData, value) {
                                        tableBody +=
                                            '<div style="border-radius:3px;padding:3px;margin-bottom:10px;background:#fff;box-shadow:0 1px 3px 0 rgba(0, 0, 0, 12%), 0 1px 2px 0 rgba(0, 0, 0, 24%);">';
                                        tableBody +=
                                            '<div style="position:relative;padding-left:0.2rem;padding-bottom:0.5rem;color:#38a13c;"><i class="fa fa-book"></i> ' +
                                            value.course_subject_name +
                                            '</div>';
                                        tableBody +=
                                            '<div style="position:relative;padding-left:0.2rem;padding-bottom:0.5rem;color:#38a13c;"><i class="fa fa-clock-o"></i> ' +
                                            value.from_end_time + '</div>';
                                        tableBody +=
                                            '<div style="position:relative;padding-left:0.2rem;padding-bottom:0.5rem;color:#38a13c;"><i class="fa fa-user"></i> ' +
                                            value.employee_teacher_name +
                                            '</div>';
                                        tableBody +=
                                            '<div style="position:relative;padding-left:0.2rem;padding-bottom:0.5rem;color:#38a13c;"><i class="fa fa-users"></i> ' +
                                            value.semester_class_name +
                                            value.section_name +
                                            value
                                            .semester_class_group_name +
                                            '</div>';
                                        tableBody +=
                                            '<div style="position:relative;padding-left:0.2rem;padding-bottom:0.5rem;color:#38a13c;"><i class="fa fa-building"></i> Room : ' +
                                            value.room_no +
                                            '</div>';
                                        tableBody += '</div>';
                                    });
                                } else {
                                    tableBody +=
                                        '<div style="border-radius:3px;padding:5px;margin-bottom:10px;background:#fff;box-shadow:0 1px 3px 0 rgba(0, 0, 0, 12%), 0 1px 2px 0 rgba(0, 0, 0, 24%);"><b style="color:#ff0000;padding-right:0.5rem;padding-bottom:0.5rem;padding-left:0.5rem;"><i class="fa fa-times-circle" aria-hidden="true" style="color:#ff000;"></i> No Class Schedule</b></div>';
                                }

                                tableBody += '</td>';
                            });
                            tableBody += '</tr></tbody>';
                            $('#addRoutineTable').append(tableBody);
                        }

                        $('#timetable').empty();
                        var tableForPrint = '';

                        if (_response.weekDays != null) {
                            tableForPrint += '<div class="col-md-12">';
                            tableForPrint += '<h3 style="text-align:center">' + _response.company.name + '</h3>';
                            tableForPrint += '<p style="text-align:center">' + _response.company.address + '</p>';
                            tableForPrint += '<p style="text-align:center"><span style="font-weight:bold">Session:</span>' + _response.session_name + '</p>';
                            tableForPrint += '<p style="text-align:center"><span style="font-weight:bold">Shift:</span>' + _response.shift_name + '</p>';
                            // tableForPrint += '<br>';

                            tableForPrint += `
                                <table class="table" style="width: 100%; table-layout: fixed; border: 1px solid black; border-collapse: collapse;">
                                    <thead>
                                        <tr>
                                            <th style="border: 1px solid #000; text-align: center; vertical-align: middle;">Day/Time</th>
                            `;

                            let timeSlots = [];
                            let breakSlots = [];

                            // Extract time slots and break slots
                            if (_response.data) {
                                $.each(_response.data, function(keyWeekDay, periods) {
                                    $.each(periods, function(_, periodData) {
                                        if (periodData.from_end_time && periodData.from_end_time.trim() !== "" && !timeSlots.includes(periodData.from_end_time)) {
                                            timeSlots.push(periodData.from_end_time);
                                        }
                                        if (periodData.from_end_break_time && periodData.from_end_break_time.trim() !== "" && !timeSlots.includes(periodData.from_end_break_time)) {
                                            timeSlots.push(periodData.from_end_break_time);
                                            if (!breakSlots.includes(periodData.from_end_break_time)) {
                                                breakSlots.push(periodData.from_end_break_time);
                                            }
                                        }
                                    });
                                });

                                // Sort time slots
                                timeSlots.sort(function(a, b) {
                                    let timeA = new Date('1970-01-01T' + convertTo24Hour(a.split('-')[0].trim()));
                                    let timeB = new Date('1970-01-01T' + convertTo24Hour(b.split('-')[0].trim()));
                                    return timeA - timeB;
                                });

                                // Create headers
                                $.each(timeSlots, function(_, timeSlot) {
                                    tableForPrint += `<th style="border: 1px solid #000; text-align: center; vertical-align: middle;">${timeSlot}</th>`;
                                });
                            }

                            tableForPrint += `</tr></thead><tbody>`;

                            // Loop for each weekday
                            $.each(_response.weekDays, function(keyWeekDay, valueWeekDay) {
                                tableForPrint += `<tr><td style="border: 1px solid #000; text-align: center; vertical-align: middle;">${valueWeekDay}</td>`;

                                $.each(timeSlots, function(index, timeSlot) {
                                    // If this timeSlot is a break slot, only show once with rowspan=7
                                    if (breakSlots.includes(timeSlot)) {
                                        if (keyWeekDay === '1') {
                                            tableForPrint += `<td rowspan="7" style="border: 1px solid #000; text-align: center; vertical-align: middle; color: #d9534f; font-weight: bold;">Break Time</td>`;
                                        }
                                        return; // skip for other weekdays
                                    }

                                    let cellContent = '';
                                    let matched = false;

                                    /*if (_response.data[keyWeekDay]) {
                                        $.each(_response.data[keyWeekDay], function(_, periodData) {
                                            if (periodData.from_end_time === timeSlot) {
                                                cellContent = `
                                                    <div>
                                                        <strong>${periodData.course_subject_name}</strong><br>
                                                        <span style="font-size: smaller; color: gray;">Teacher: ${periodData.employee_teacher_name}</span><br>
                                                        <span style="font-size: smaller; color: gray;">Class: ${periodData.semester_class_name} ${periodData.section_name}</span><br>
                                                        <span style="font-size: smaller; color: gray;">Group: ${periodData.semester_class_group_name}</span><br>
                                                        <span style="font-size: smaller; color: gray;">Room: ${periodData.room_no}</span>
                                                    </div>`;
                                                matched = true;
                                                return false;
                                            }
                                        });
                                    }*/

                                    //tableForPrint += `<td style="border: 1px solid #000; text-align: center; vertical-align: middle;">${matched ? cellContent : '&nbsp;'}</td>`;

                                    // let cellContent = '';

                                    /*if (_response.data[keyWeekDay]) {
                                        $.each(_response.data[keyWeekDay], function(_, periodData) {
                                            if (periodData.from_end_time === timeSlot) {
                                                cellContent += `
                                                    <div style="margin-bottom: 5px; border-bottom: 1px solid #ccc; padding-bottom: 5px;">
                                                        <strong>${periodData.course_subject_name}</strong><br>
                                                        <span style="font-size: smaller; color: gray;">Teacher: ${periodData.employee_teacher_name}</span><br>
                                                        <span style="font-size: smaller; color: gray;">Class: ${periodData.semester_class_name} ${periodData.section_name}</span><br>
                                                        <span style="font-size: smaller; color: gray;">Group: ${periodData.semester_class_group_name}</span><br>
                                                        <span style="font-size: smaller; color: gray;">Room: ${periodData.room_no}</span>
                                                    </div>`;
                                            }
                                        });
                                    }

                                    tableForPrint += `<td style="border: 1px solid #000; text-align: center; vertical-align: middle;">${cellContent || '&nbsp;'}</td>`;
*/
/*
                                    if (_response.data[keyWeekDay]) {
                                        const matchedPeriods = _response.data[keyWeekDay].filter(periodData => periodData.from_end_time === timeSlot);

                                        $.each(matchedPeriods, function(index, periodData) {
                                            const isLast = index === matchedPeriods.length - 1;
                                            cellContent += `
                                                <div style="margin-bottom: 5px; ${!isLast ? 'border-bottom: 1px solid #ccc; padding-bottom: 5px;' : ''}">
                                                    <strong>${periodData.course_subject_name}</strong><br>
                                                    <span style="font-size: smaller; color: gray;">Teacher: ${periodData.employee_teacher_name}</span><br>
                                                    <span style="font-size: smaller; color: gray;">Class: ${periodData.semester_class_name} ${periodData.section_name}</span><br>
                                                    <span style="font-size: smaller; color: gray;">Group: ${periodData.semester_class_group_name}</span><br>
                                                    <span style="font-size: smaller; color: gray;">Room: ${periodData.room_no}</span>
                                                </div>`;
                                        });
                                    }

                                    tableForPrint += `<td style="border: 1px solid #000; text-align: center; vertical-align: middle;">${cellContent || '&nbsp;'}</td>`;
                                    */

                                    if (_response.data[keyWeekDay]) {
                                        const matchedPeriods = _response.data[keyWeekDay].filter(periodData => periodData.from_end_time === timeSlot);

                                        if (matchedPeriods.length > 0) {
                                            $.each(matchedPeriods, function(index, periodData) {
                                                const isLast = index === matchedPeriods.length - 1;
                                                cellContent += `
                                                    <div style="margin-bottom: 5px; ${!isLast ? 'border-bottom: 1px dotted #808080; padding-bottom: 5px;' : ''}">
                                                        <strong>${periodData.course_subject_name}</strong><br>
                                                        <span style="font-size: smaller; color: gray;">Teacher: ${periodData.employee_teacher_name}</span><br>
                                                        <span style="font-size: smaller; color: gray;">Class: ${periodData.semester_class_name} ${periodData.section_name}</span><br>
                                                        <span style="font-size: smaller; color: gray;">Group: ${periodData.semester_class_group_name}</span><br>
                                                        <span style="font-size: smaller; color: gray;">Room: ${periodData.room_no}</span>
                                                    </div>`;
                                            });
                                        } else {
                                            cellContent = '<div style="color: #999;">No Class</div>';
                                        }
                                    } else {
                                        cellContent = '<div style="color: #999;">No Class</div>';
                                    }

                                    tableForPrint += `<td style="border: 1px solid #000; text-align: center; vertical-align: middle;">${cellContent}</td>`;

                                });

                                tableForPrint += '</tr>';
                            });

                            tableForPrint += '</tbody></table>';
                            $('#timetable').html(tableForPrint);
                        }

                        /*if (_response.weekDays != null) {
                            tableForPrint += '<div class="col-md-12">';
                            tableForPrint +=
                                '<h1 style="margin-bottom: 20px;text-align:center">' +
                                _response.company.name + '</h1>';
                            tableForPrint +=
                                '<p style="text-align:center">' + _response.company
                                .address + '</p>';
                            tableForPrint +=
                                '<h4 style="text-align:center">Routine Session:' + _response
                                .session_name + '</h4>';
                            tableForPrint += '<br>';

                            // Table headers
                            tableForPrint += `
                                <table class="table" style="width: 100%; table-layout: fixed; border: 1px solid black; border-collapse: collapse;">
                                    <thead>
                                        <tr>
                                            <th style="border: 1px solid #000; text-align: center; vertical-align: middle;">Day/Time</th>
                            `;

                            let timeSlots = [];

                            // Dynamically create time slots
                            if (_response.data) {
                                // Extract unique, non-empty time slots across all weekdays
                                $.each(_response.data, function(keyWeekDay, periods) {
                                    console.log('periods',periods);
                                    $.each(periods, function(keyPeriod,
                                        periodData) {
                                        if (periodData.from_end_time &&
                                            periodData.from_end_time
                                            .trim() !== "" && !timeSlots
                                            .includes(periodData
                                                .from_end_time)) {
                                            timeSlots.push(periodData
                                                .from_end_time);
                                        }

                                        if (periodData.from_end_break_time && periodData.from_end_break_time.trim() !== "" && !timeSlots.includes(periodData.from_end_break_time)) {
                                            timeSlots.push(periodData.from_end_break_time);
                                        }
                                    });
                                });

                                // Sort the time slots
                                timeSlots.sort(function(a, b) {
                                    let timeA = a.split('-')[0].trim();
                                    let timeB = b.split('-')[0].trim();

                                    // Convert to 24-hour format for comparison using Date object
                                    let dateA = new Date('1970-01-01T' +
                                        convertTo24Hour(timeA));
                                    let dateB = new Date('1970-01-01T' +
                                        convertTo24Hour(timeB));

                                    return dateA - dateB;
                                });

                                // Generate table headers for each unique time slot
                                $.each(timeSlots, function(index, timeSlot) {
                                    if (timeSlot && timeSlot.trim() !==
                                        "") { // Ensure it's not empty
                                        tableForPrint += `
                                                                    <th style="border: 1px solid #000; text-align: center; vertical-align: middle;">${timeSlot}</th>
                                                                `;
                                    }
                                });
                            }

                            tableForPrint += `
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                        `;

                            // Generate rows for each weekday
                            $.each(_response.weekDays, function(keyWeekDay, valueWeekDay) {
                                // console.log('_response.weekDays ',_response.data[keyWeekDay]);
                                if (_response.data[keyWeekDay] && _response.data[
                                        keyWeekDay].length > 0) {
                                    tableForPrint += `
                                        <tr>
                                            <td style="border: 1px solid #000; text-align: center; vertical-align: middle;">${valueWeekDay}</td>
                                    `;

                                    // Loop through the periods for each weekday and match them with the time slots

                                    $.each(timeSlots, function(index, timeSlot) {
                                        let cellContent =
                                        ''; // Initialize content holder for the cell
                                        let matchedSlot = false;
                                        $.each(_response.data[keyWeekDay],
                                            function(keyPeriod,
                                                periodData) {

                                                    if (periodData.from_end_break_time === timeSlot) {
                                                        cellContent = `<div style="color: #d9534f; font-weight: bold;">Break</div>`;
                                                        matchedSlot = true;
                                                        return false; // Exit early
                                                    }

                                                if (periodData
                                                    .from_end_time ===
                                                    timeSlot) {
                                                    // Combine content for the same time slot using <br> for separation
                                                    cellContent += `
                                                    <div>
                                                        <strong>${periodData.course_subject_name}</strong><br>
                                                        <span style="font-size: smaller; color: gray;">Teacher: ${periodData.employee_teacher_name}</span><br>
                                                        <span style="font-size: smaller; color: gray;">Class: ${periodData.semester_class_name} ${periodData.section_name}</span><br>
                                                        <span style="font-size: smaller; color: gray;">Group: ${periodData.semester_class_group_name}</span><br>
                                                        <span style="font-size: smaller; color: gray;">Room: ${periodData.room_no}</span>
                                                    </div><br>
                                                `;
                                                    matchedSlot = true;
                                                    return false; // Exit early
                                                }
                                            });

                                        // If cellContent is not empty, fill the cell, otherwise leave it blank
                                        if (cellContent.trim() !== '' && matchedSlot) {
                                            tableForPrint += `
                                                <td style="border: 1px solid #000; text-align: center; vertical-align: middle;">
                                                    ${cellContent}
                                                </td>
                                            `;
                                        } else {
                                            tableForPrint += `
                                                <td style="border: 1px solid #000; text-align: center; vertical-align: middle;">&nbsp;</td>
                                            `;
                                        }
                                    });



                                    tableForPrint += '</tr>';
                                } else {
                                    // No data for the current weekday
                                    tableForPrint += `
                                        <tr>
                                            <td style="border: 1px solid #000; text-align: center; vertical-align: middle;">${valueWeekDay}</td>
                                            <td colspan="${timeSlots.length}" style="border: 1px solid #000; text-align: center; vertical-align: middle; color: #ff0000;">No Class Schedule</td>
                                        </tr>
                                    `;
                                }
                            });

                            // Close the table body and table
                            tableForPrint += `
                                    </tbody>
                                </table>
                            `;

                            // Append the generated table content to the timetable container
                            $('#timetable').html(tableForPrint);
                        }*/

                        /*if (_response.weekDays != null) {
                            tableForPrint += '<div class="col-md-12">';
                            tableForPrint +=
                                '<h1 style="margin-bottom: 20px;text-align:center">' +
                                _response.company.name + '</h1>';
                            tableForPrint +=
                                '<p style="text-align:center">' + _response.company
                                .address + '</p>';
                            tableForPrint +=
                                '<h4 style="text-align:center">Routine Session:' + _response
                                .session_name + '</h4>';
                            tableForPrint += '<br>';

                            // Table headers
                            tableForPrint += `
                                <table class="table" style="width: 100%; table-layout: fixed; border: 1px solid black; border-collapse: collapse;">
                                    <thead>
                                        <tr>
                                            <th style="border: 1px solid #000; text-align: center; vertical-align: middle;">Day/Time</th>
                            `;

                            let timeSlots = [];

                            // Dynamically create time slots
                            if (_response.data) {
                                // Extract unique time slots across all weekdays
                                $.each(_response.data, function(keyWeekDay, periods) {
                                    $.each(periods, function(keyPeriod,
                                        periodData) {
                                        if (!timeSlots.includes(periodData
                                                .from_end_time)) {
                                            timeSlots.push(periodData
                                                .from_end_time);
                                        }
                                    });
                                });

                                timeSlots.sort(function(a, b) {
                                    // Extract the starting time from each time slot
                                    let timeA = a.split('-')[0].trim();
                                    let timeB = b.split('-')[0].trim();

                                    // Convert to 24-hour format for comparison using Date object
                                    let dateA = new Date('1970-01-01T' +
                                        convertTo24Hour(timeA));
                                    let dateB = new Date('1970-01-01T' +
                                        convertTo24Hour(timeB));

                                    return dateA - dateB;
                                });

                                // Generate table headers for each unique time slot
                                $.each(timeSlots, function(index, timeSlot) {
                                    tableForPrint += `
                                        <th style="border: 1px solid #000; text-align: center; vertical-align: middle;">${timeSlot}</th>
                                    `;
                                });
                            }

                            tableForPrint += `
                                        </tr>
                                    </thead>
                                    <tbody>
                            `;

                            // Generate rows for each weekday
                            $.each(_response.weekDays, function(keyWeekDay, valueWeekDay) {
                                if (_response.data[keyWeekDay] && _response.data[
                                        keyWeekDay].length > 0) {
                                    tableForPrint += `
                                        <tr>
                                            <td style="border: 1px solid #000; text-align: center; vertical-align: middle;">${valueWeekDay}</td>
                                    `;

                                    // Loop through the periods for each weekday and match them with the time slots
                                    $.each(timeSlots, function(index, timeSlot) {
                                        let found = false;
                                        $.each(_response.data[keyWeekDay],
                                            function(keyPeriod,
                                                periodData) {
                                                if (periodData
                                                    .from_end_time ===
                                                    timeSlot) {
                                                    tableForPrint += `
                                                <td style="border: 1px solid #000; text-align: center; vertical-align: middle;">
                                                    <strong>${periodData.course_subject_name}</strong><br>
                                                    <span style="font-size: smaller; color: gray;">Teacher: ${periodData.employee_teacher_name}</span><br>
                                                    <span style="font-size: smaller; color: gray;">Class: ${periodData.semester_class_name} ${periodData.section_name}</span><br>
                                                    <span style="font-size: smaller; color: gray;">Group: ${periodData.semester_class_group_name}</span><br>
                                                    <span style="font-size: smaller; color: gray;">Room: ${periodData.room_no}</span>
                                                </td>
                                            `;
                                                    found = true;
                                                }
                                            });

                                        // If no data for the current time slot, leave the cell empty
                                        if (!found) {
                                            tableForPrint += `
                                                <td style="border: 1px solid #000; text-align: center; vertical-align: middle;">&nbsp;</td>
                                            `;
                                        }
                                    });

                                    tableForPrint += '</tr>';
                                } else {
                                    // No data for the current weekday
                                    tableForPrint += `
                                        <tr>
                                            <td style="border: 1px solid #000; text-align: center; vertical-align: middle;">${valueWeekDay}</td>
                                            <td colspan="${timeSlots.length}" style="border: 1px solid #000; text-align: center; vertical-align: middle; color: #ff0000;">No Class Schedule</td>
                                        </tr>
                                    `;
                                }
                            });

                            // Close the table body and table
                            tableForPrint += `
                                    </tbody>
                                </table>
                            `;

                            // Append the generated table content to the timetable container
                            $('#timetable').html(tableForPrint);
                        }*/
                    }

                },
                error: function(_response) {
                    $('#loadingModal').hide();
                    _response = JSON.parse(_response.responseText);
                    setErrorsText(_response.errors);
                    Swal.fire({
                        icon: 'error',
                        title: 'Oops...',
                        text: _response.message,
                    });

                }
            });
        });

        $(document).on('click', '.print_timetable', function(e) {
            e.preventDefault(); // avoid to execute the actual submit of the form.
            var $this = $(this);
            var class_id = $this.data('class_id');
            var section_id = $this.data('section_id');
            var printContents = document.getElementById("timetable").innerHTML;
            Popup(printContents);
            // $.ajax(
            //     {
            //         url: base_url+'admin/timetable/printclasstimetable',
            //         type: "POST",
            //         data: {'class_id': class_id,'section_id':section_id},
            //         dataType: 'Json',
            //         beforeSend: function () {
            //         $this.button('loading');
            //     },
            //     success: function (data, textStatus, jqXHR)
            //     {

            //         Popup(data.page);
            //         $this.button('reset');
            //     },
            //     error: function (jqXHR, textStatus, errorThrown)
            //     {
            //         $this.button('reset');
            //     }, complete: function () {
            //         $this.button('reset');
            //     }
            // });
        });

        /*function Popup(data, winload = false) {
            var printWindow = window.open('', 'Print-Window');

            printWindow.document.open();
            printWindow.document.write('<html>');
            printWindow.document.write('<head>');
            printWindow.document.write('<title>Class Timetable</title>');
            printWindow.document.write(`
                <style>
                    body {
                        font-family: Arial, sans-serif;
                        font-size: 11px
                    }
                    table {
                        width: 100%;
                        border-collapse: collapse;
                        page-break-inside: auto;
                    }
                    th, td {
                        border: 1px solid #000;
                        padding: 2px;
                        text-align: center;
                        vertical-align: middle;
                    }
                    tr {
                        page-break-inside: avoid;
                        page-break-after: auto;
                    }
                    thead {
                        display: table-header-group;
                    }
                    tfoot {
                        display: table-footer-group;
                    }
                </style>
            `);
            printWindow.document.write('</head>');
            printWindow.document.write('<body>');
            printWindow.document.write(data);
            printWindow.document.write('</body>');
            printWindow.document.write('</html>');
            printWindow.document.close();

            // Wait a bit to allow the content to fully render
            setTimeout(function () {
                printWindow.focus();
                printWindow.print();

                setTimeout(function () {
                    printWindow.close();
                    if (winload) {
                        window.location.reload(true);
                    }
                }, 500);
            }, 500); // Delay to ensure rendering is complete

            return true;
        }*/



        function Popup(data, winload = false) {
            var frameDoc = window.open('', 'Print-Window');
            frameDoc.document.open();
            //Create a new HTML document.
            frameDoc.document.write('<html>');
            frameDoc.document.write('<head>');
            frameDoc.document.write('<title></title>');
        
            frameDoc.document.write('</head>');
            frameDoc.document.write('<body onload="window.print()">');
            frameDoc.document.write(data);
            frameDoc.document.write('</body>');
            frameDoc.document.write('</html>');
            frameDoc.document.close();

            setTimeout(function() {
                frameDoc.close();
                if (winload) {
                    window.location.reload(true);
                }
            }, 100);

            return true;
        }

    });

    function setErrorsText(errors) {
        $.each(errors, function(key, value) {
            // if key has institute_
            if (key.includes('institute_')) {
                // id and key slice from .
                const id = key.slice(key.indexOf('.') + 1);
                key = key.slice(0, key.indexOf('.'));
                $($(`.${key}_error`)[id]).empty().show().append(
                    '<span class="errormsg" style="color:red;">' + value + '</span>');
            } else {
                $('#' + key + 'e').empty().show().append(
                    '<span class="errormsg" style="color:red;">' + value + '</span>');
            }
        });
    }
    function hideErrorMessage(){
        $("input").keyup(function() {
            var inputValue = $(this).val();
            var inputId = $(this).attr('id');
            // console.log(inputId);

            if (inputValue) {
                $('#'+inputId+'e').hide();
            } else {
                $('#'+inputId+'e').show();
            }
        });

        $("select").change(function() {
            var selectedValue = $(this).val();
            var elementId = $(this).attr('id');
            // console.log(elementId);
            if (selectedValue) {
                $('#'+elementId+'e').hide();
            } else {
                $('#'+elementId+'e').show();
            }
        });
    }
    function printDiv() {
        var printContents = document.getElementById("routineWeekSubmitDiv").innerHTML;
        var printStyle =
            '<style>' +
            '@page { size: A4 landscape; margin: 0; }' +
            '#purchasesBarcodePrint { float: left; height: 100px; padding: 0px; width: 100%; font-size: 11px; margin-bottom: 30px; page-break-inside: auto; width: 250px; page-break-inside: avoid; }' +
            '.barcodeSpan { margin: 2px 3px 2px 3px; display: inline-block; text-align: center !important; }' +
            '</style>';
        var printDiv = '<div id="order-details-wrapper" style="padding: 0;">' + printStyle + printContents + '</div>';
        document.body.innerHTML = printDiv;
        var originalContents = document.body.innerHTML;
        window.print();
        document.body.innerHTML = originalContents;
        location.reload();
    }

    function convertTo24Hour(time) {
        // Convert to 24-hour format
        const [timePart, modifier] = time.split(' ');
        let [hours, minutes] = timePart.split(':');

        if (hours === '12') {
            hours = '00';
        }
        if (modifier.toUpperCase() === 'PM') {
            hours = parseInt(hours, 10) + 12;
        }

        return `${String(hours).padStart(2, '0')}:${minutes}`;
    }
</script>