@extends('layouts/eims_layout')
@section('title', '| ' . $pageTitle)
@section('content')
@include('successMsg')

<div class="row add-data-form">
    <div class="col-md-10 col-md-offset-1">

        <div class="viewTitle">
            <div class="panel-options">
                <!-- <a href="{{ url('eims/examination/exam/academic/routine/practical/create') }}"
                    class="btn btn-info pull-right addViewBtn"><i
                        class="glyphicon glyphicon-list addIcon"></i>Add {{$pageTitle}}</a> -->
            </div>
            <button type="button" class="btn btn-primary" id="printButton" onclick="printAcademicPracticalExamRoutine()">Print</button>
        </div>


        <div class="panel panel-default panel-border">
            <div class="panel-heading" style="padding-bottom:0; ">
                <div class="panel-title">{{ $pageTitle }} Generate</div>
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-2 ">
                        {{-- program_id --}}
                        <div class="form-group">
                            {!! Form::label('program_id', 'Program:<sup class="text-danger">*<sup>', ['class' => ' control-label'], false) !!}
                                    <div class="">
                                        {!! Form::select('program_id', $programs ?? [], $admissionExam->program_id ?? null, [
                                        'class' => 'form-control custom-select2',
                                        'placeholder' => 'Select Program',
                                        'id' => 'program_id',
                                        'required' => true,
                                        ]) !!}
                                        <p id='program_ide' style="min-height:3px;"></p>
                                    </div>
                        </div>
                    </div>
                    <div class="col-sm-2">
                        {{-- session --}}
                        <div class="form-group">
                            {!! Form::label('session_id', 'Session:<sup class="text-danger">*<sup>', ['class' => ' control-label'], false) !!}
                                    <div class="">
                                        {!! Form::select('session_id', $sessions ?? [], $admissionExam->session_id ?? null, [
                                        'class' => 'form-control custom-select2',
                                        'placeholder' => 'Select Session',
                                        'id' => 'session_id',
                                        'required' => true,
                                        ]) !!}
                                        <p id='session_ide' style="min-height:3px;"></p>
                                    </div>
                        </div>
                    </div>

                    <div class="col-md-2">
                        {{-- semester_class_id --}}
                        <div class="form-group ">
                            {!! Form::label('semester_class_id', 'Class:', ['class' => ' control-label'], false) !!}
                            <div class="">
                                {!! Form::select('semester_class_id', $semesterClasses ?? [], $admissionExam->semester_class_id ?? null, [
                                'class' => 'form-control custom-select2',
                                'placeholder' => 'Select Class',
                                'id' => 'semester_class_id',
                                'required' => true,
                                ]) !!}
                                <p id='semester_class_ide' style="min-height:3px;"></p>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-2">
                        {{-- academic exam --}}
                        <div class="form-group ">
                            {!! Form::label('academic_exam_id', 'Academic Exam:<sup class="text-danger">*<sup>', ['class' => ' control-label'], false) !!}
                            <div class="">
                            <select name="academic_exam_id" class="form-control custom-select2"
                                    id="academic_exam_id">
                                    <option value="">Please select academic exam</option>
                                    @foreach ($academicExams as $keyAcademicExam => $academicExam)
                                        <option data-examid = "{{$academicExam->academic_exam_id}}" value="{{ $academicExam->id }}">{{ $academicExam->name }}</option>
                                    @endforeach
                                </select>
                                <p id='academic_exam_ide' style="min-height:3px;"></p>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-2">
                        {{-- exam shift --}}
                        <div class="form-group ">
                            {!! Form::label('exam_shift_id', 'Exam Shift:', ['class' => ' control-label'], false) !!}
                            <div class="">
                            <select name="exam_shift_id" class="form-control custom-select2"
                                    id="exam_shift_id">
                                    <option value="">Please select exam shift</option>
                                    @foreach ($examShifts as $keyExamShift => $examShift)
                                        <option value="{{ $examShift->id }}">{{ $examShift->name }}</option>
                                    @endforeach
                                </select>
                                <p id='exam_shift_ide' style="min-height:3px;"></p>
                            </div>
                        </div>
                    </div>


                    {{-- search buttons --}}
                    <div class="col-md-2">
                        <div class="form-group">
                            <br>
                            <button type="button" class="btn btn-info" id="searchButton">Search</button>
                        </div>
                    </div>

                    {!! Form::open(['id' => 'exam_routine_form', 'method' => 'POST']) !!}

                    <input type="hidden" name="exam_id" id="exam_id">


                    {{-- Table Section --}}

                    <div id="practicalRoutineTableContainer"></div>

                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">
    const companyType = '{{ $companyType }}';

    function printAcademicPracticalExamRoutine() {
        var printContent = document.getElementById('practicalRoutineTableContainer').outerHTML;
        var originalContent = document.body.innerHTML;
        document.body.innerHTML = `<html><body>${printContent}</body></html>`;
        window.print();
        document.body.innerHTML = originalContent;
        window.location.reload(); // Reload to restore functionality
    }

    $(document).ready(function() {

        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>');
                }
            });
        }

        $('#routine_submit_btn').hide();
        const admissionExamMarkForm = $('#admissionExamMarkForm');
        const programIdField = $('#program_id');
        const sessionIdField = $('#session_id');
        const semesterClassIdField = $('#semester_class_id');
        const academicExamIdField = $('#academic_exam_id');
        const examShiftId = $('#exam_shift_id');
        const searchButton = $('#searchButton');


        // get semester_class and session by program
        programIdField.change(function(e) {
            e.preventDefault();

            const program_id = programIdField.val();
            semesterClassIdField.empty();
            let option = '';
            if (companyType === 'UNV') {
                option = '<option selected="selected" value="">Select Semester</option>';
            } else if (companyType === 'SCL') {
                option = '<option selected="selected" value="">Select Class</option>';
            } else if (companyType === 'CLG') {
                option = '<option selected="selected" value="">Select Class</option>';
            } else {
                option = '<option selected="selected" value="">Select Semester/Class</option>';
            }
            semesterClassIdField.prepend(option)

            sessionIdField.empty().prepend(
                '<option selected="selected" value="">Please select session</option>');

            $.ajax({
                type: 'post',
                url: `{{ route('eims_faculty_department_program_session_semester_section_course_subject_option_change') }}`,
                data: {
                    program_id: program_id
                },
                dataType: 'json',
                success: function(_response) {
                    $.each(_response, function(key, value) {
                        {
                            if (key === "semesterClassListByProgramChange") {
                                $.each(value, function(index, result) {
                                    $('#semester_class_id')
                                        .append(
                                            "<option value='" + result
                                            .id +
                                            "'>" + result.name +
                                            "</option>"
                                        );
                                });
                            }
                            if (key === "sessionListByProgramChange") {
                                $.each(value, function(index, result) {
                                    $('#session_id')
                                        .append(
                                            "<option value='" + result
                                            .id +
                                            "'>" + result.name +
                                            "</option>"
                                        );
                                });
                            }
                        }
                    });
                }
            });
        });

        // get academic exam by semester_class and session
        semesterClassIdField.change(function(e) {
            e.preventDefault();
            const semester_class_id = semesterClassIdField.val();
            const session_id = sessionIdField.val();

            academicExamIdField.empty().prepend(
                '<option selected="selected" value="">Please select academic exam</option>');
            $.ajax({
                type: 'post',
                url: `{{ route('eims_academic_exams') }}`,
                data: {
                    semester_class_id: semester_class_id,
                    session_id: session_id
                },
                dataType: 'json',
                success: function(_response) {

                    $.each(_response, function(index, result) {
                        $('#academic_exam_id')
                            .append(
                                "<option data-examid = '"+result.exam_id+"' value='" + result.id +
                                "'>" + result.name +
                                "</option>"
                            );
                    });
                }
            });
        });

        searchButton.click(function(e) {
            e.preventDefault();

            $('#routineListBodySection').empty(); // Clear previous data
            $('#routine_submit_btn').show();
            const practicalRoutineTableContainer = $('#practicalRoutineTableContainer');

            const program_id = programIdField.val();
            const session_id = sessionIdField.val();
            const semester_class_id = semesterClassIdField.val();
            const academic_exam_activities_id = academicExamIdField.val();
            const academic_exam_id = academicExamIdField.find('option:selected').data('examid');
            const exam_shift_id = examShiftId.val();

            $('.errormsg').empty();
            practicalRoutineTableContainer.empty();

            $.ajax({
                url: `{{ route('eims_practical_exam_routine_generate') }}`,
                method: 'POST',
                dataType: 'json',
                data: {
                    program_id: program_id,
                    session_id: session_id,
                    semester_class_id: semester_class_id,
                    academic_exam_activities_id: academic_exam_activities_id,
                    academic_exam_id: academic_exam_id,
                    exam_shift_id: exam_shift_id
                },
                success: function(_response) {
                    if (_response.responseTitle === 'success') {

                        if (_response.examSubjectMarkConfig === 'false') {
                            Swal.fire({
                                icon: 'warning',
                                title: 'Warning!',
                                text: 'Please Select Exam Mark Config',
                                showConfirmButton: false,
                                timer: 1500
                            });
                            return false;
                        }

                        if (_response.subjectExamDate != null) {
                            console.log('semester_class_id ', semester_class_id);
                            if (semester_class_id == '') {
                                examRoutineForAllClass(_response,
                                    practicalRoutineTableContainer);
                            } else {
                                examRoutineForSingleClass(_response,
                                    practicalRoutineTableContainer);
                            }
                        }

                    } else {

                        Swal.fire({
                            icon: _response.responseStatus,
                            title: _response.responseTitle,
                            text: _response.responseText,
                            showConfirmButton: false,
                            timer: 1500
                        });
                    }
                },
                error: function(_response) {
                    _response = JSON.parse(_response.responseText);
                    setErrorsText(_response.errors);
                    Swal.fire({
                            icon: 'error',
                            title: 'Validation Error',
                            showConfirmButton: true
                        });
                        return false;
                }
            });

        });

    });


    function examRoutineForSingleClass(_response, practicalRoutineTableContainer) {
        console.log(_response);
        var header = '';
        var table = '';
        let sortedExamDates = [];
        let semesterClassIdSlots = [];

        let firstExamStartDate = '';
        let firstSemesterClass = '';
        let lastSemesterClass = '';
        let timeSlots = [];
        // Dynamically create time slots
        if (_response.data) {
            // Extract unique, non-empty time slots across all weekdays

            // Collect and structure the data for sorting
            $.each(_response.subjectExamDate, function(
                keySubjectExamDate, valueSubjectExamDateDay) {
                let parts = valueSubjectExamDateDay.split('_');
                let valueSubjectExamDate = parts[
                    0]; // Date part
                let dayName = parts[1]; // Day name part
                // Convert the date to a Date object for accurate sorting
                let parsedDate = parseDate(
                    valueSubjectExamDate);

                sortedExamDates.push({
                    keySubjectExamDate: keySubjectExamDate,
                    valueSubjectExamDate: valueSubjectExamDate,
                    dayName: dayName,
                    parsedDate: parsedDate // Store the parsed Date object for sorting
                });
            });

            sortedExamDates.sort(function(a, b) {
                return a.parsedDate - b
                    .parsedDate; // Compare the parsed Date objects directly
            });

            firstExamStartDate = formatDate(sortedExamDates[0]
                .keySubjectExamDate);



            $.each(_response.data, function(keySubjectExamDate, 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);
                    }
                });
            });

            // 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;
            });


            //If Class Filter is not selected//
            $.each(_response.semesterClass, function(keySemesterClass,
                periods) {
                semesterClassIdSlots.push({
                    id: periods.id,
                    name: periods.name
                });
            });


            // // Custom sort to handle numeric sorting within class names
            semesterClassIdSlots.sort((a, b) => {
                // Extract numbers from class names using regular expression
                const numA = a.name.match(/\d+/) ? parseInt(a
                    .name.match(/\d+/)[0], 10) : 0;
                const numB = b.name.match(/\d+/) ? parseInt(b
                    .name.match(/\d+/)[0], 10) : 0;

                // Compare the extracted numbers
                return numA - numB;
            });


            firstSemesterClass = (semesterClassIdSlots.length - (
                semesterClassIdSlots.length - 1));
            lastSemesterClass = (semesterClassIdSlots.length);

            // console.log('generate response watching', _response, );

            header += `
            <div class="row" style="margin-bottom: 1%;">
                <!-- Left Small Card -->
               <!-- <div class="col-sm-3 col-xs-12">
                    <div class="card text-center" style="border: 1px dotted #000; border-radius: 5px; padding: 10px;">
                        <div class="card-body">
                            <h6 class="card-title"><strong></strong></h6>
                    <p id="firstShiftContent" class="card-text"></p>

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

                <!-- Main Content -->
                     <div class="col-sm-6 col-xs-12 col-sm-offset-3 text-center">
                    <h5>
                        <div class="block text-center line-height">
                            <div class="inline-block">
                                <div class="font-20"><strong>${_response.company.name}</strong></div>
                                <div class="font-10">Address: ${_response.company.address}</div>
                                <div class="font-10">Phone: ${_response.company.phone}, Telephone: ${_response.company.telephone}</div>
                                <div class="font-10">Email: ${_response.company.email}</div>
                                <div class="font-10">Website: ${_response.company.website}</div>
                            </div>
                        </div>
                    </h5>
                </div>

                <!-- Right Small Card -->
                 <!-- <div class="col-sm-3 col-xs-12">
                    <div class="card text-center" style="border: 1px dotted #000; border-radius: 5px; padding: 10px;">
                        <div class="card-body">
                            <h6 class="card-title"><strong>${_response.second_shift_all.name}</strong></h6>
                    <p id="firstShiftContent" class="card-text">${_response.second_shift_class}</p>

                        </div>
                    </div>
                </div> -->
            </div>
            <div class="row">

                <!-- Main Content -->
                <div class="col-sm-6 col-xs-12 col-sm-offset-3 text-center">
                    <div class="block text-center line-height">
                        <h4><strong><u>${_response.semesterClassNameSingle} ${_response.examName} Schedule (Practical)${_response.actualSessionYear}</strong></u></h4>
                    </div>
                </div>

                <!-- Right Small Card -->
                <div class="col-sm-3 col-xs-12" style="text-align:right">
                    <!-- <span>Date: _/${_response.examDate}</span>  -->
                    <span>Date: ${firstExamStartDate.split(' ')[0].replace(/\D/g, '').padStart(2, '0')}/${_response.examDate}</span>
                </div>
            </div>
            <!-- <p>আগামী ১৮ই নভেম্বর,২০২৪ তারিখ হতে ১ম থেকে ১০ম শ্রেণির বার্ষিক পরীক্ষা অনুষ্ঠিত হবে। পরীক্ষা শুরুর ১৫ মিনিট পূর্বে পরীক্ষার্থীদেরকে পরীক্ষার হলে উপস্থিত থাকতে হবে। পরীক্ষা চলাকালীন পরীক্ষার্থীদের বই, খাতাপত্র, স্টিলের স্কেল, মোবাইল ফোন নিয়ে আসা সম্পূর্ণ নিষিদ্ধ। প্রয়োজনে পরীক্ষার সংশ্লিষ্ট জিনিসপত্র আনতে পারবে। পরীক্ষার সময়সূচী নিম্নরূপঃ</p> -->

            <div class="col-md-12">
                        <p>The ${_response.examName} examination (practical) of ${_response.semesterClassNameSingle} will be held from ${firstExamStartDate}. Candidates must be present in the examination hall 15 minutes before the commencement of the examination. Candidates are strictly prohibited from bringing books, notebooks, steel scales, mobile phones during the examination.If necessary, you can bring the related items for the exam. Exam schedule is as follows:</p>
            </div>
            <hr>

            `;
            practicalRoutineTableContainer.append(header);



            table += '<div class="col-md-12">';
            table += `
                <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;">Date/Day</th>
                            <!--<th style="border: 1px solid #000; text-align: center; vertical-align: middle;">Day</th>-->
            `;

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

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

        }

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


        // Generate rows for each weekday
        $.each(sortedExamDates, function(index, examDateData) {
            let keySubjectExamDate = examDateData
                .keySubjectExamDate;
            let valueSubjectExamDate = examDateData
                .valueSubjectExamDate;
            let dayName = examDateData.dayName;

            table += `
                <tr>
                    <td style="border: 1px solid #000; text-align: center; vertical-align: middle;">${keySubjectExamDate}<br>(${dayName})</td>
                    <!-- <td style="border: 1px solid #000; text-align: center; vertical-align: middle;">${dayName}</td>-->
            `;

            // Loop through the periods for each weekday and match them with the time slots
            if (_response.data[valueSubjectExamDate] &&
                _response.data[valueSubjectExamDate].length > 0
            ) {
                $.each(timeSlots, function(index, timeSlot) {
                    let cellContent =
                        ''; // Initialize content holder for the cell
                    $.each(_response.data[
                            keySubjectExamDate],
                        function(keyPeriod,
                            periodData) {
                            if (periodData.from_end_time === timeSlot) {
                                // Combine content for the same time slot using <br> for separation
                                cellContent += `
                                <div>
                                    <!-- <strong>${periodData.semester_class_name_get}</strong><br>-->
                                    <strong>${periodData.course_subject_name}</strong><br>
                                    <!-- <span style="font-size: smaller; color: gray;">Time: ${periodData.from_end_time}</span><br>-->
                                    <!--<span style="font-size: smaller; color: gray;">Duration: ${formatDuration(periodData.exam_duration)}</span>-->
                                </div>
                            `;
                            }
                        });

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

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



        // Close the table body and table
        table += `
                </tbody>
            </table>
            `;
        practicalRoutineTableContainer.append(table);
    }

    function examRoutineForAllClass(_response, practicalRoutineTableContainer){
        var header = '';
        var table = '';
        let sortedExamDates = [];
        let semesterClassIdSlots = [];
        let firstExamStartDate = '';
        let firstSemesterClass = '';
        let lastSemesterClass = '';
        // Dynamically create time slots
        if (_response.data) {
            // Extract unique, non-empty time slots across all weekdays

            // Collect and structure the data for sorting
            $.each(_response.subjectExamDate, function(
                keySubjectExamDate, valueSubjectExamDateDay) {
                let parts = valueSubjectExamDateDay.split('_');
                let valueSubjectExamDate = parts[
                    0]; // Date part
                let dayName = parts[1]; // Day name part
                // Convert the date to a Date object for accurate sorting
                let parsedDate = parseDate(
                    valueSubjectExamDate);

                sortedExamDates.push({
                    keySubjectExamDate: keySubjectExamDate,
                    valueSubjectExamDate: valueSubjectExamDate,
                    dayName: dayName,
                    parsedDate: parsedDate // Store the parsed Date object for sorting
                });
            });

            sortedExamDates.sort(function(a, b) {
                return a.parsedDate - b
                    .parsedDate; // Compare the parsed Date objects directly
            });

            firstExamStartDate = formatDate(sortedExamDates[0]
                .keySubjectExamDate);

            $.each(_response.semesterClass, function(keySemesterClass,
                periods) {
                semesterClassIdSlots.push({
                    id: periods.id,
                    name: periods.name
                });
            });

            // // Custom sort to handle numeric sorting within class names
            semesterClassIdSlots.sort((a, b) => {
                // Extract numbers from class names using regular expression
                const numA = a.name.match(/\d+/) ? parseInt(a
                    .name.match(/\d+/)[0], 10) : 0;
                const numB = b.name.match(/\d+/) ? parseInt(b
                    .name.match(/\d+/)[0], 10) : 0;

                // Compare the extracted numbers
                return numA - numB;
            });

            firstSemesterClass = (semesterClassIdSlots.length - (
                semesterClassIdSlots.length - 1));
            lastSemesterClass = (semesterClassIdSlots.length);

            header += `
                <div class="row" style="margin-bottom: 1%;">
                    <!-- Left Small Card -->
                    <!-- <div class="col-sm-3 col-xs-12">
                        <div class="card text-center" style="border: 1px dotted #000; border-radius: 5px; padding: 10px;">
                            <div class="card-body">
                                <h6 class="card-title"><strong></strong></h6>
                        <p id="firstShiftContent" class="card-text"></p>

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

                    <!-- Main Content -->
                     <div class="col-sm-6 col-xs-12 col-sm-offset-3 text-center">
                        <h5>
                            <div class="block text-center line-height">
                                <div class="inline-block">
                                    <div class="font-20"><strong>${_response.company.name}</strong></div>
                                    <div class="font-10">Address: ${_response.company.address}</div>
                                    <div class="font-10">Phone: ${_response.company.phone}, Telephone: ${_response.company.telephone}</div>
                                    <div class="font-10">Email: ${_response.company.email}</div>
                                    <div class="font-10">Website: ${_response.company.website}</div>
                                </div>
                            </div>
                        </h5>
                    </div>

                    <!-- Right Small Card -->
                     <!-- <div class="col-sm-3 col-xs-12">
                        <div class="card text-center" style="border: 1px dotted #000; border-radius: 5px; padding: 10px;">
                            <div class="card-body">
                                <h6 class="card-title"><strong>${_response.second_shift_all.name}</strong></h6>
                        <p id="firstShiftContent" class="card-text">${_response.second_shift_class}</p>

                            </div>
                        </div>
                    </div> -->
                </div>
                <div class="row">

                    <!-- Main Content -->
                    <div class="col-sm-6 col-xs-12 col-sm-offset-3 text-center">
                        <div class="block text-center line-height">
                            <h4><strong><u>${firstSemesterClass}<sup>st</sup> to ${lastSemesterClass}<sup>th</sup> Class ${_response.examName} Schedule (Practical)${_response.actualSessionYear}</strong></u></h4>
                        </div>
                    </div>

                    <!-- Right Small Card -->
                    <div class="col-sm-3 col-xs-12" style="text-align:right">

                            <!-- <span>Date: _/${_response.examDate}</span>  -->
                        <span>Date: ${firstExamStartDate.split(' ')[0].replace(/\D/g, '').padStart(2, '0')}/${_response.examDate}</span>
                    </div>
                </div>
                <!-- <p>আগামী ১৮ই নভেম্বর,২০২৪ তারিখ হতে ১ম থেকে ১০ম শ্রেণির বার্ষিক পরীক্ষা অনুষ্ঠিত হবে। পরীক্ষা শুরুর ১৫ মিনিট পূর্বে পরীক্ষার্থীদেরকে পরীক্ষার হলে উপস্থিত থাকতে হবে। পরীক্ষা চলাকালীন পরীক্ষার্থীদের বই, খাতাপত্র, স্টিলের স্কেল, মোবাইল ফোন নিয়ে আসা সম্পূর্ণ নিষিদ্ধ। প্রয়োজনে পরীক্ষার সংশ্লিষ্ট জিনিসপত্র আনতে পারবে। পরীক্ষার সময়সূচী নিম্নরূপঃ</p> -->

                <div class="col-md-12">
                            <p>The ${_response.examName} examination (practical) of ${firstSemesterClass}<sup>st</sup> to ${lastSemesterClass}<sup>th</sup> class will be held from ${firstExamStartDate}. Candidates must be present in the examination hall 15 minutes before the commencement of the examination. Candidates are strictly prohibited from bringing books, notebooks, steel scales, mobile phones during the examination.If necessary, you can bring the related items for the exam. Exam schedule is as follows:</p>
                </div>
                <hr>

                `;
            practicalRoutineTableContainer.append(header);

            table += '<div class="col-md-12">';
            table += `
                    <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;">Date/Day</th>
                                <!--<th style="border: 1px solid #000; text-align: center; vertical-align: middle;">Day</th>-->
                `;

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

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


        // Generate rows for each weekday
        $.each(sortedExamDates, function(index, examDateData) {
            let keySubjectExamDate = examDateData
                .keySubjectExamDate;
            let valueSubjectExamDate = examDateData
                .valueSubjectExamDate;
            let dayName = examDateData.dayName;

            table += `
                    <tr>
                        <td style="border: 1px solid #000; text-align: center; vertical-align: middle;">${keySubjectExamDate}<br>(${dayName})</td>
                        <!--<td style="border: 1px solid #000; text-align: center; vertical-align: middle;">${dayName}</td>-->
                `;

            // Loop through the periods for each weekday and match them with the time slots
            if (_response.data[valueSubjectExamDate] &&
                _response.data[valueSubjectExamDate].length > 0
            ) {
                $.each(semesterClassIdSlots, function(index,
                    semesterClassIdSlot) {
                    let cellContent =
                        ''; // Initialize content holder for the cell
                    $.each(_response.data[
                            keySubjectExamDate],
                        function(keyPeriod,
                            periodData) {
                            if (periodData
                                .semester_class_id ===
                                semesterClassIdSlot
                                .id) {
                                // 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;">(${periodData.from_end_time})</span><br>
                                        <!--<span style="font-size: smaller; color: gray;">Duration: ${formatDuration(periodData.exam_duration)}</span>-->
                                    </div>
                                `;
                            }
                        });

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

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

        // Close the table body and table
        table += `
                    </tbody>
                </table>
                `;
        practicalRoutineTableContainer.append(table);
    }

    function formatDuration(minutes) {
        const hours = Math.floor(minutes / 60);
        const remainingMinutes = minutes % 60;
        let duration = `${hours} hour${hours !== 1 ? 's' : ''}`;
        if (remainingMinutes > 0) {
            duration += ` ${remainingMinutes} minute${remainingMinutes !== 1 ? 's' : ''}`;
        }
        return `${duration}`;
    }

    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}`;
    }

    // Helper function to parse a date string in the format of "YYYY-MM-DD" or any other specific format
    function parseDate(dateString) {
        // Assume the date format is "YYYY-MM-DD"
        // If your format is different, adjust the parsing logic accordingly
        let parts = dateString.split('-'); // Split by dashes (change if your delimiter is different)
        let year = parseInt(parts[0], 10); // Year should be the first part
        let month = parseInt(parts[1], 10) - 1; // Month is zero-based in JavaScript Date object
        let day = parseInt(parts[2], 10); // Day is the third part

        return new Date(year, month, day);
    }

    function formatDate(dateString) {
        // Parse the date from the input string "04-11-2024"
        const [day, month, year] = dateString.split('-');

        // Create a JavaScript Date object
        const date = new Date(`${year}-${month}-${day}`);

        // Month names array
        const monthNames = [
            "January", "February", "March", "April", "May", "June",
            "July", "August", "September", "October", "November", "December"
        ];

        // Get day with ordinal suffix
        const dayWithSuffix = getDayWithOrdinalSuffix(parseInt(day));

        // Format the date as "4th November, 2024"
        return `${dayWithSuffix} ${monthNames[parseInt(month) - 1]}, ${year}`;
    }

    function getDayWithOrdinalSuffix(day) {
        // Get the appropriate suffix for the day
        if (day % 10 === 1 && day !== 11) {
            return `${day}<sup>st</sup>`;
        } else if (day % 10 === 2 && day !== 12) {
            return `${day}<sup>nd</sup>`;
        } else if (day % 10 === 3 && day !== 13) {
            return `${day}<sup>rd</sup>`;
        } else {
            return `${day}<sup>th</sup>`;
        }
    }
</script>


@endsection