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

<div class="row add-data-form page-wrap" 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/') }}" class="btn btn-info pull-right addViewBtn"><i
                        class="glyphicon glyphicon-th-list viewIcon">
                    </i>{{ $pageTitle }} List </a>
            </div>
            <div class="panel panel-default panel-border">
                <div class="panel-heading">
                    <div class="panel-title">Add {{ $pageTitle }}</div>
                </div>


                <div class="panel-body">
                    {!! Form::open([
                    'url' => '',
                    'role' => 'form',
                    'class' => 'form-horizontal form-groups',
                    'id' => 'courseClassRoutineForm',
                    'method' => 'POST'
                    ]) !!}
                    <!-- filtering -->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="row">
                                @if (isset($companyType) && $companyType == 'UNV')
                                <div class="col-md-2">
                                    <div class="form-group">
                                        {!! Form::label(
                                        'faculty_id',
                                        'Faculty: <sup class="text-danger">*</sup>',
                                        ['class' => 'control-label col-sm-12'],
                                        false,
                                        ) !!}
                                        <div class="col-sm-12">
                                            <select name="faculty_id" class="form-control input-sm custom-select2"
                                                id="faculty_id">
                                                <option value="">Please select faculty</option>
                                                @foreach ($faculty as $keyFaculty => $facult)
                                                <option value="{{ $facult->id }}">{{ $facult->name }}</option>
                                                @endforeach
                                            </select>
                                            <p id='faculty_ide' style="max-height:3px;"></p>
                                        </div>
                                    </div>
                                </div>
                                @endif
                                <div class="col-md-2">
                                    <div class="form-group">
                                        {!! Form::label(
                                        'program_id',
                                        $companyType == 'UNV'
                                        ? 'Program: <sup class="text-danger">*</sup>'
                                        : 'Medium/Version: <sup class="text-danger">*</sup>',
                                        ['class' => 'col-sm-12 control-label'],
                                        false,
                                        ) !!}
                                        <div class="col-sm-12">
                                            <select name="program_id" class="form-control input-sm custom-select2"
                                                id="program_id">
                                                <option value="">Please select @if ($companyType == 'UNV')
                                                    program
                                                    @else
                                                    Medium/Version
                                                    @endif
                                                </option>
                                                @foreach ($programs as $keyProgram => $program)
                                                <option value="{{ $program->id }}">{{ $program->name }}</option>
                                                @endforeach
                                            </select>
                                            <p id='program_ide' style="max-height:3px;"></p>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-2">
                                    <div class="form-group">
                                        {!! Form::label('session_id', 'Session:', ['class' => 'control-label col-sm-12 '], false) !!}
                                        <div class="col-sm-12">
                                            <select name="session_id" class="form-control input-sm custom-select2"
                                                id="session_id">
                                                <option value="">Please select session</option>
                                                @foreach ($sessions as $keySession => $session)
                                                <option value="{{ $session->id }}">{{ $session->name }}</option>
                                                @endforeach
                                            </select>
                                            <p id='session_ide' style="max-height:3px;"></p>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-2">
                                    <div class="form-group">
                                        {!! Form::label(
                                        'semester_class_id',
                                        $companyType == 'UNV' ? 'Semester: <sup class="text-danger">*</sup>' : 'Class: <sup class="text-danger">*</sup>',
                                        ['class' => 'control-label col-sm-12 '],
                                        false,
                                        ) !!}
                                        <div class="col-sm-12">
                                            <select name="semester_class_id"
                                                class="form-control input-sm custom-select2" id="semester_class_id">
                                                <option value="">Please select @php $companyType == 'UNV' ? 'Semester' : 'Class' @endphp</option>
                                                @foreach ($semesterClass as $keySemesterClass => $semesterClas)
                                                <option value="{{ $semesterClas->id }}">{{ $semesterClas->name }}
                                                </option>
                                                @endforeach
                                            </select>
                                            <p id='semester_class_ide' style="max-height:3px;"></p>
                                        </div>
                                    </div>
                                </div>


                                @if (isset($companyType) && $companyType == 'SCL')
                                <div class="col-md-2">
                                    <div class="form-group">
                                        {!! Form::label(
                                        'semester_class_group_id',
                                        $companyType == 'UNV'
                                        ? 'Semester Group' . '<sup class="text-danger">*</sup>'
                                        : 'Class Group' . '<sup class="text-danger">*</sup>',
                                        ['class' => 'col-sm-12 control-label'],
                                        false,
                                        ) !!}
                                        <div class="col-sm-12">
                                            {!! Form::select('semester_class_group_id', $semesterClassGroup, null, [
                                            'class' => 'form-control custom-select2',
                                            'id' => 'semester_class_group_id',
                                            'placeholder' => $companyType == 'UNV' ? 'Please Select Semester Group' : 'Please Select Class Group',
                                            ]) !!}
                                            <p id='semester_class_group_ide' style="max-height:3px;"></p>
                                        </div>
                                    </div>
                                </div>
                                @endif
                                @if (isset($companyType) && $companyType == 'CLG')
                                <div class="col-md-2">
                                    <div class="form-group">
                                        {!! Form::label(
                                        'semester_class_group_id',
                                        $companyType == 'UNV'
                                        ? 'Semester Group' . '<sup class="text-danger">*</sup>'
                                        : 'Class Group' . '<sup class="text-danger">*</sup>',
                                        ['class' => 'col-sm-12 control-label'],
                                        false,
                                        ) !!}
                                        <div class="col-sm-12">
                                            {!! Form::select('semester_class_group_id', $semesterClassGroup, null, [
                                            'class' => 'form-control custom-select2',
                                            'id' => 'semester_class_group_id',
                                            'placeholder' => $companyType == 'UNV' ? 'Please Select Semester Group' : 'Please Select Class Group',
                                            ]) !!}
                                            <p id='semester_class_group_ide' style="max-height:3px;"></p>
                                        </div>
                                    </div>
                                </div>
                                @endif

                                <div class="col-md-2">
                                    <div class="form-group">
                                        {!! Form::label(
                                        'section_id',
                                        'Section:<sup class="text-danger">*</sup>',
                                        ['class' => 'control-label col-sm-12 '],
                                        false,
                                        ) !!}
                                        <div class="col-sm-12">
                                            <select name="section_id" class="form-control input-sm custom-select2"
                                                id="section_id">
                                                <option value="">Please select section</option>
                                                @foreach ($sections as $keySection => $section)
                                                <option value="{{ $section->id }}">{{ $section->name }}</option>
                                                @endforeach
                                            </select>
                                            <p id='section_ide' style="max-height:3px;"></p>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-2">
                                    <div class="form-group">
                                        {!! Form::label(
                                        'shift_id',
                                        'Shift:<sup class="text-danger">*</sup>',
                                        ['class' => 'control-label col-sm-12 '],
                                        false,
                                        ) !!}
                                        <div class="col-sm-12">
                                            <select name="shift_id" class="form-control input-sm custom-select2"
                                                id="shift_id">
                                                <option value="">Please select shift</option>
                                            </select>
                                            <p id='shift_ide' style="max-height:3px;"></p>
                                        </div>
                                    </div>
                                    <input type="hidden" id="shift_start_time" name="shift_start_time[]" class="form-control shift_start_time" style="text-align:center" readonly="readonly">
                                    <input type="hidden" id="shift_end_time" name="shift_end_time[]" class="form-control shift_end_time" style="text-align:center" readonly="readonly">
                                    <input type="hidden" id="shift_break_start_time" name="shift_break_start_time[]" class="form-control shift_break_start_time" style="text-align:center" readonly="readonly">
                                    <input type="hidden" id="shift_break_end_time" name="shift_break_end_time[]" class="form-control shift_break_end_time" style="text-align:center" readonly="readonly">
                                    <input type="hidden" id="shift_class_duration" name="shift_class_duration[]" class="form-control shift_class_duration" style="text-align:center" readonly="readonly">

                                </div>

                                {{-- search buttons --}}
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <button style="margin-top: 10%;" type="button" class="btn btn-info" id="searchButton">Search</button>
                                    </div>
                                </div>

                                {{-- <div class="col-md-2">
                                            <div class="form-group">
                                                {!! Form::label(
                                                    'course_subject_enrolled_group_id',
                                                    'Course/Subject Enrolled/Group:<sup class="text-danger">*</sup>',
                                                    ['class' => 'control-label col-sm-12 '],
                                                    false,
                                                ) !!}
                                                <div class="col-sm-12">
                                                    <select name="course_subject_enrolled_group_id"
                                                        class="form-control input-sm custom-select2"
                                                        id="course_subject_enrolled_group_id">
                                                        <option value="">Please select course/subject enrolled/group
                                                        </option>
                                                        @foreach ($courseSubjectEnrolledGroups as $keyCourseSubjectEnrolledGroup => $courseSubjectEnrolledGroup)
                                                            <option value="{{ $courseSubjectEnrolledGroup->id }}">
                                {{ $courseSubjectEnrolledGroup->name }}</option>
                                @endforeach
                                </select>
                                <p id='course_subject_enrolled_group_ide' style="max-height:3px;"></p>
                            </div>
                        </div>
                    </div> --}}

                </div>
                <!-- filtering end-->
            </div>

        </div>
        <!-- filtering end-->

        <div class="row" id="routineWeekSubmitDiv" style="display: none;">
            <div class="col-sm-4 col-xs-12 col-sm-offset-4 text-center" style="margin-bottom:1% !important;">
                <h5>
                    <ul>
                        <li style="list-style-type: none;">
                            <h2 style="text-align:center;"><span id="exam_name_heading"></span></h2>
                        </li>
                        <li style="list-style-type: none;"><span style="font-weight: bold;" id="program_heading"></span> : <span id="program_name"></span></li>
                        <li style="list-style-type: none;"><span style="font-weight: bold;">Session</span> : <span id="session_name_heading"></span></li>
                        <li style="list-style-type: none;"><span style="font-weight: bold;" id="semester_class_label"></span> : <span id="semester_class_name"></span></li>
                    </ul>
                </h5>
            </div>

            <div class="col-md-12">
                <div role="tabpanel" id="routineTableExist" style="display: none;"></div>
                <div role="tabpanel" id="routineTable">
                    <!-- Nav tabs -->
                    @if ($weekDays)
                    <ul class="nav nav-tabs" role="tablist">
                        @foreach ($weekDays as $weekKey => $weekName)
                        <li role="presentation"
                            @if ($weekKey==1) class="active" @endif><a
                                href="#{{ $weekName }}" aria-controls="home" role="tab"
                                data-toggle="tab">{{ $weekName }}</a></li>
                        @endforeach
                    </ul>
                    <!-- Tab panes -->
                    <div class="tab-content">
                        @foreach ($weekDays as $weekKey => $weekName)
                        <div role="tabpanel"
                            class="tab-pane fade @if ($weekKey == 1) in active @endif "
                            id="{{ $weekName }}" data-weekid="{{ $weekKey }}">

                            <table id="addRoutineTable"
                                class="table table-bordered responsive addRoutineTable">
                                <thead>
                                    <tr class="">
                                        <th style="text-align:center;color: #000 !important;background-color: #F2F2F1 !important"
                                            class="col-xs-3">
                                            {{ $companyType == 'UNV' ? 'Course' : 'Subject' }}
                                            <sup class="text-danger">*</sup>
                                        </th>
                                        <th style="text-align:center;color: #000 !important;background-color: #F2F2F1 !important"
                                            class="col-xs-2">Teacher <sup
                                                class="text-danger">*</sup></th>
                                        <th style="text-align:center;color: #000 !important;background-color: #F2F2F1 !important"
                                            class="col-xs-2">From Time <sup
                                                class="text-danger">*</sup></th>
                                        <th style="text-align:center;color: #000 !important;background-color: #F2F2F1 !important"
                                            class="col-xs-2">End Time <sup
                                                class="text-danger">*</sup></th>
                                        <th style="text-align:center;color: #000 !important;background-color: #F2F2F1 !important"
                                            class="col-xs-2">Room No <sup
                                                class="text-danger">*</sup></th>
                                        <th style="text-align:center;color: #000 !important;background-color: #F2F2F1 !important"
                                            class="col-xs-1">Action</th>
                                    </tr>
                                </thead>

                                @php $routineIndex = 0;@endphp
                                @php
                                $routineIndex++;
                                $weekKeyRow = $weekKey . $routineIndex;
                                @endphp

                                <tbody id="eachRoutineRow{{ $weekKeyRow }}">
                                    <input autocomplete="off" type='hidden'
                                        class="form-control input-sm text-center weekDayClass"
                                        id='week_day{{ $weekKeyRow }}' name='week_day[]'
                                        value='{{ $weekKey }}'
                                        placeholder='Enter week day' />
                                    <tr class='routineValueRow'
                                        id="rowRoutine{{ $weekKeyRow }}" data-rowid="{{ $weekKeyRow }}">

                                        <input autocomplete="off" type='hidden'
                                            class="form-control input-sm text-center weekKeyRowClass"
                                            id='weekKeyRow{{ $weekKeyRow }}' name='week_key_row[{{ $weekKey }}][]'
                                            value='{{ $weekKeyRow }}' />
                                        <td>
                                            <select name="course_subject_id[{{ $weekKey }}][]"
                                                class="form-control input-sm custom-select2 course_subject_id"
                                                id="course_subject_id{{ $weekKeyRow }}"
                                                style="width: 100%">
                                                <option value="">Please select {{ $companyType == 'UNV' ? 'course' : 'subject' }}</option>
                                                @foreach ($courseSubjects as $courseSubject)
                                                <option value="{{ $courseSubject->id }}">
                                                    {{ $courseSubject->name }}
                                                </option>
                                                @endforeach
                                            </select>
                                            <p class="course_subject_id{{ $weekKeyRow }}-error-message" style="color:red;"></p> <!-- Error message here -->
                                        </td>

                                        <td data-week-id="1" data-row-id="{{ $weekKeyRow }}" data-row-index="{{ $weekKeyRow }}">
                                            <select name="employee_teacher_id[{{ $weekKey }}][]"
                                                class="form-control input-sm custom-select2 employee_teacher_id"
                                                id="employee_teacher_id{{ $weekKeyRow }}"
                                                style="width: 100%">
                                                <option value="">Please select teacher</option>
                                                @foreach ($employeeTeacherInfo as $empTeacher)
                                                <option value="{{ $empTeacher->id }}">
                                                    {{ $empTeacher->name }}
                                                </option>
                                                @endforeach
                                            </select>
                                            <p class="employee_teacher_id{{ $weekKeyRow }}-error-message" style="color:red;"></p> <!-- Error message here -->
                                        </td>

                                        <td>
                                            <input name='from_time[{{ $weekKey }}][]'
                                                autocomplete="off" type='text'
                                                class="form-control input-sm text-center from_timepicker"
                                                id='from_time{{ $weekKeyRow }}' value=''
                                                placeholder='Enter from time' />
                                            <p class="from_time{{ $weekKeyRow }}-error-message" style="color:red;"></p> <!-- Error message here -->
                                        </td>

                                        <td>
                                            <input name='end_time[{{ $weekKey }}][]'
                                                autocomplete="off" type='text'
                                                class="form-control input-sm text-center end_timepicker"
                                                id='end_time{{ $weekKeyRow }}' value=''
                                                placeholder='Enter end time' />
                                            <p class="end_time{{ $weekKeyRow }}-error-message" style="color:red;"></p> <!-- Error message here -->
                                        </td>

                                        <td>
                                            <select name="room_id[{{ $weekKey }}][]"
                                                class="form-control input-sm custom-select2 room_id"
                                                id="room_id{{ $weekKeyRow }}"
                                                style="width: 100%">
                                                <option value="">Please select room</option>
                                                @foreach ($rooms as $room)
                                                <option value="{{ $room->id }}">
                                                    {{ $room->name }}
                                                </option>
                                                @endforeach
                                            </select>
                                            <p class="room_id{{ $weekKeyRow }}-error-message" style="color:red;"></p> <!-- Error message here -->
                                        </td>

                                        <td>
                                            <a href="javascript:;" name="addButton"
                                                id="addButton" class="addButton"
                                                style="width:80px"
                                                data-weekkeykey="{{ $weekKey }}"
                                                data-weekkey="{{ $weekKeyRow }}"><i
                                                    class="glyphicon glyphicon-plus"
                                                    style="color:green; font-size:16px"></i></a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        @endforeach
                    </div>
                    @endif

                </div>
            </div>


            <div class="col-md-12">
                <div class="form-group" style="margin-top: 20px;">
                    {!! Form::label('submit', ' ', ['class' => 'col-sm-4 control-label']) !!}
                    <div class="col-sm-8 text-right">
                        {!! Form::submit('Submit', ['id' => 'add', 'class' => 'btn btn-info submitButton']) !!}
                        <a href="{{ url('eims/academic/routine/course-class/') }}"
                            class="btn btn-danger closeBtn">Close</a>

                    </div>
                </div>
            </div>
        </div>
        {!! Form::close() !!}
        <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/eims/moment/moment.min.js') }}"></script>
<script src="{{ asset('js/jquery-1.11.1.min.js') }}"></script>
<!-- only frontend/backend Validation -->
<script type="text/javascript">
    var companyType = "{{ $companyType }}";

    $(document).ready(function() {
        hideErrorMessage();



    //////////////////////////// Start Shift Time Validation ///////////////////////////////////////////////////////////

    $('#routineTable').on('change', '.from_timepicker', function() {
        const row = $(this).closest('tr');
        const startTime = $(this).val();
        const shiftStartTime = moment($('.shift_start_time').val(), 'hh:mm A');
        const shiftEndTime = moment($('.shift_end_time').val(), 'hh:mm A');
        const durationMinutes = $('.shift_class_duration').val();

        const shiftStartBreakTime = moment($('.shift_break_start_time').val(), 'hh:mm A');
        const shiftEndBreakTime = moment($('.shift_break_end_time').val(), 'hh:mm A');

        if (startTime) {
            const startTimeObj = moment(startTime, 'hh:mm A');
            const endTimeObj = startTimeObj.clone().add(durationMinutes, 'minutes');


     const isOutsideShift = !(
            startTimeObj.isSameOrAfter(shiftStartTime) &&
            endTimeObj.isSameOrBefore(shiftEndTime)
        );

            const isOverlappingBreak =
                (startTimeObj.isSameOrAfter(shiftStartBreakTime) && startTimeObj.isBefore(shiftEndBreakTime)) ||
                (endTimeObj.isAfter(shiftStartBreakTime) && endTimeObj.isBefore(shiftEndBreakTime));


            // Remove previous break overlap messages
            row.find('.break-error-msg').remove();

            if (isOverlappingBreak) {
                $(this).val('');
                row.find('.end_timepicker').val('');
                const breakMsg = `<div class="break-error-msg" style="color: red; font-size: 12px; margin-top: 2px;">
                    This time slot overlaps with break time. Please select a different time.
                </div>`;

                $(this).closest('td').append(breakMsg);
            }
            
            else if(isOutsideShift){
                $(this).val('');
                row.find('.end_timepicker').val('');
                const breakMsg = `<div class="break-error-msg" style="color: red; font-size: 12px; margin-top: 2px;">
                    The selected time has crossed the shift time.
                </div>`;

                $(this).closest('td').append(breakMsg);

            }else {
                row.find('.end_timepicker').val(endTimeObj.format('hh:mm A'));
            }
        }


         ////////////////////Start Teacher Available checking/////////////////////////////////////////
            const teacherId = row.find('.employee_teacher_id').val(); 
            const classStartTime = row.find('.from_timepicker').val(); 
            const classEndTime = row.find('.end_timepicker').val(); 
            const activeWeekId = $('.tab-pane.in.active').data('weekid');

            // Remove any previous error messages
            row.find('.time-error-msg').remove();

            if (teacherId && classStartTime && classEndTime && activeWeekId) {
                $.ajax({
                    url: '{{ route("eims_course_class_routine_check_teacher_availability") }}',
                    method: 'GET',
                    data: {
                        teacher_id: teacherId,
                        class_start_time: classStartTime,
                        class_end_time: classEndTime,
                        Week_id: activeWeekId,
                    },
                    success: function(response) {
                        console.log(response, 'q not');
                        if (!response.available) {
                            row.find('.from_timepicker').val('');
                            row.find('.end_timepicker').val('');

                            // Add inline message under both fields (or choose one)
                            const errorHtml = `<div class="time-error-msg" style="color: red; font-size: 12px; margin-top: 2px;">
                                This Teacher is not available for this time.
                            </div>`;

                            // Append once (below the `from_timepicker` input)
                            row.find('.from_timepicker').closest('td').append(errorHtml);
                        }
                    },
                    error: function(xhr) {
                        console.error('Error checking teacher availability', xhr);
                    }
                });
            } else {
                console.warn('Missing required data for teacher availability check.');
            }

            ////////////////End Teacher Available checking/////////////////////////////////////////////////////////


    });



        $('#routineTable').on('change', '.end_timepicker', function() {
            const row = $(this).closest('tr');
            const endTime = $(this).val();
            const shiftStartTime = moment($('.shift_start_time').val(), 'hh:mm A');
            const shiftEndTime = moment($('.shift_end_time').val(), 'hh:mm A');

            const shiftStartBreakTime = moment($('.shift_break_start_time').val(), 'hh:mm A');
            const shiftEndBreakTime = moment($('.shift_break_end_time').val(), 'hh:mm A');

            if (endTime) {
                const endTimeObj = moment(endTime, 'hh:mm A');

                const isOutsideShift = !(
                        startTimeObj.isSameOrAfter(shiftStartTime) &&
                        endTimeObj.isSameOrBefore(shiftEndTime)
                    );
 
                 const isOverlappingBreak = (endTimeObj.isAfter(shiftStartBreakTime) && endTimeObj.isSameOrBefore(shiftEndBreakTime));

                if (isOutsideShift || isOverlappingBreak) {
                    // Reset fields if invalid
                    $(this).val('');
                    // row.find('.end_timepicker').val('');
                }
            }
             else {
                row.find('.end_timepicker').val(endTimeObj.format('hh:mm A'));
            }
        });

    //////////////////////////// End Shift Time Validation ///////////////////////////////////////////////////////////




        ////////////////Start Room Available checking/////////////////////////////////////////////////////////

        $('#routineTable').on('change', '.room_id', function () {
            const $input = $(this); // ✅ capture reference to the changed input
            const row = $input.closest('tr');
            const roomId = row.find('.room_id').val();
            const classStartTime = row.find('.from_timepicker').val();
            const classEndTime = row.find('.end_timepicker').val();
            const activeWeekId = $('.tab-pane.in.active').data('weekid');

            console.log(activeWeekId, 'roomId');

            $.ajax({
                url: '{{ route("eims_course_class_routine_check_room_availability") }}',
                method: 'GET',
                data: {
                    room_id: roomId,
                    class_start_time: classStartTime,
                    class_end_time: classEndTime,
                    Week_id: activeWeekId,
                },
                success: function (response) {
                    console.log(response, 'q not');
                    if (!response.available) {

                        // Remove previous error messages
                        row.find('.break-error-msg').remove();

                        // row.find('.from_timepicker').val('');
                        // row.find('.end_timepicker').val('');
                    row.find('.room_id').val('').trigger('change'); // unselect room
                        const breakMsg = `<div class="break-error-msg" style="color: red; font-size: 12px; margin-top: 2px;">
                            This Room is not available for this time.
                        </div>`;
                        $input.closest('td').append(breakMsg); 
                    }
                },
                error: function (xhr) {
                    console.error('Error checking room availability', xhr);
                }
            });
        });

        ////////////////End Room Available checking/////////////////////////////////////////////////////////



        ////////////////// Start Teacher & Time Conflict Validation //////////////////////////////////////////

        $('#routineTable').on('change', '.from_timepicker, .end_timepicker, .employee_teacher_id', function() {
            const row = $(this).closest('tr');
            const currentRowId = row.attr('id');
            const selectedTeacher = row.find('.employee_teacher_id').val();
            const selectedFromTime = row.find('.from_timepicker').val();
            const selectedEndTime = row.find('.end_timepicker').val();
            const currentRowIntId = row.data('rowid');
            const weekDayClass = Number(String(currentRowIntId)[0]);

            if (weekDayClass && selectedTeacher && selectedFromTime) {
                if (isDuplicateDateTime(weekDayClass, currentRowId, selectedTeacher, selectedFromTime, selectedEndTime)) {
                    // Handle conflict
                    row.find('.from_timepicker').val('');
                    row.find('.end_timepicker').val('');
                }
            }
        });

        // Function to check for duplicate date and time combinations
        function isDuplicateDateTime(weekDayClass, currentRowId, selectedTeacher, selectedFromTime, selectedEndTime) {
            let isDuplicate = false;

            // console.log(weekDayClass);
            $('#routineTable tr').each(function() {
                const rowId = $(this).attr('id');
                const rowTeacher = $(this).find('.employee_teacher_id').val();
                const rowFromTime = $(this).find('.from_timepicker').val();
                const rowEndTime = $(this).find('.end_timepicker').val();
                const currentRowIntId = $(this).data('rowid');
                const rowWeekDayClass = Number(String(currentRowIntId)[0]);

                if (
                    rowId !== currentRowId &&
                    rowWeekDayClass === weekDayClass &&
                    rowTeacher === selectedTeacher &&
                    rowFromTime &&
                    rowEndTime &&
                    (
                        (moment(selectedFromTime, 'hh:mm A').isBetween(moment(rowFromTime, 'hh:mm A'), moment(rowEndTime, 'hh:mm A'), null, '[)')) ||
                        (moment(selectedEndTime, 'hh:mm A').isBetween(moment(rowFromTime, 'hh:mm A'), moment(rowEndTime, 'hh:mm A'), null, '(]'))
                    )
                ) {
                    isDuplicate = true;
                    return false; // Stop loop if duplicate found
                }
            });

            return isDuplicate;
        }

        //////////////////// End Teacher & Time Conflict Validation ///////////////////////////////////


        ////////////////// Start StartTime and Room Conflict Validation //////////////////////////////////////////

        // Event listener for changes in the 'from_timepicker' and 'room_id' fields
        $('#routineTable').on('change', '.from_timepicker, .end_timepicker, .room_id', function() {
            const row = $(this).closest('tr');
            const currentRowId = row.attr('id');
            const selectedFromTime = row.find('.from_timepicker').val();
            const selectedEndTime = row.find('.end_timepicker').val();
            const selectedRoom = row.find('.room_id').val();
            const currentRowIntId = row.data('rowid');
            const weekDayClass = Number(String(currentRowIntId)[0]);

            // Perform validation only when both fields have values
            if (selectedFromTime && selectedEndTime && selectedRoom) {
                if (checkRoomTimeConflict(weekDayClass, currentRowId, selectedFromTime, selectedEndTime, selectedRoom)) {
                    showConflictAlert('Time Conflict Detected', 'A room cannot be assigned to multiple classes at the same time.');
                    row.find('.room_id').val('').trigger('change'); // Clear the conflicting room field
                }
            }
        });

        // Function to check for duplicate time and room combinations in other rows
        function checkRoomTimeConflict(weekDayClass, currentRowId, selectedFromTime, selectedEndTime, selectedRoom) {
            let isDuplicate = false;

            $('#routineTable tr').each(function() {
                const rowId = $(this).attr('id');
                const rowRoom = $(this).find('.room_id').val();
                const rowFromTime = $(this).find('.from_timepicker').val();
                const rowEndTime = $(this).find('.end_timepicker').val();
                const currentRowIntId = $(this).data('rowid');
                const rowWeekDayClass = Number(String(currentRowIntId)[0]);

                if (
                    rowId !== currentRowId &&
                    rowWeekDayClass === weekDayClass &&
                    rowRoom === selectedRoom &&
                    rowFromTime &&
                    rowEndTime &&
                    (
                        (moment(selectedFromTime, 'hh:mm A').isBetween(moment(rowFromTime, 'hh:mm A'), moment(rowEndTime, 'hh:mm A'), null, '[)')) ||
                        (moment(selectedEndTime, 'hh:mm A').isBetween(moment(rowFromTime, 'hh:mm A'), moment(rowEndTime, 'hh:mm A'), null, '(]'))
                    )
                ) {
                    isDuplicate = true;
                    return false; // Stop loop if duplicate found
                }
            });

            return isDuplicate;
        }

        // Function to show alert for conflicts
        function showConflictAlert(title, text) {
            Swal.fire({
                icon: 'warning',
                title: title,
                text: text,
            });
        }

        ////////////////// End StartTime and Room Conflict Validation //////////////////////////////////////////


        ////////////////// Start Teacher & Subject Conflict Validation //////////////////////////////////////////

        $('#routineTable').on('change', '.course_subject_id, .employee_teacher_id', function() {
            const row = $(this).closest('tr');
            const currentRowId = row.attr('id');
            const selectedCourseSubject = row.find('.course_subject_id').val();
            const selectedTeacher = row.find('.employee_teacher_id').val();
            const currentRowIntId = row.data('rowid');
            const weekDayClass = Number(String(currentRowIntId)[0]);

            if (weekDayClass && selectedCourseSubject && selectedTeacher) {
                if (isDuplicateCourseSubjectTeacher(weekDayClass, currentRowId, selectedCourseSubject, selectedTeacher)) {
                    // Handle conflict
                    row.find('.course_subject_id').val('').trigger('change');
                    row.find('.employee_teacher_id').val('').trigger('change');
                }
            }
        });

        // Function to check for duplicate date and time combinations
        function isDuplicateCourseSubjectTeacher(weekDayClass, currentRowId, selectedCourseSubject, selectedTeacher) {
            let isDuplicate = false;


            // console.log(weekDayClass);
            $('#routineTable tr').each(function() {
                const rowId = $(this).attr('id');
                const rowCourseSubject = $(this).find('.course_subject_id').val();
                const rowTeacher = $(this).find('.employee_teacher_id').val();
                const currentRowIntId = $(this).data('rowid');
                const rowWeekDayClass = Number(String(currentRowIntId)[0]);

                if (
                    rowId !== currentRowId &&
                    rowWeekDayClass === weekDayClass &&
                    rowCourseSubject === selectedCourseSubject &&
                    rowTeacher === selectedTeacher
                ) {
                    isDuplicate = true;
                    return false; // Stop loop if duplicate found
                }
            });

            return isDuplicate;
        }

        ////////////////// End Teacher & Subject Conflict Validation //////////////////////////////////////////



        ////////////////////////Start Checking the Tab Switching//////////////////////////////


        $('.nav-tabs a').on('click', function(e) {
            // e.preventDefault(); // Prevent default tab switch behavior
            let currentTab = $('.nav-tabs li.active a').attr('href');
            let nextTab = $(this).attr('href');

            // Initialize data structure
            let formData = {
                week_id: [],
                week_key_row: {},
                course_subject_id: {},
                employee_teacher_id: {},
                from_time: {},
                end_time: {},
                room_id: {}
            };
            // Loop through each tab and organize data
            $('.tab-pane').each(function() {
                let weekDay = $(this).attr('id'); // Use the tab ID as the week day key
                let weekDayKey = $(this).attr('data-weekid');


                //console.log('Response weekDay & weekDayKey:', weekDay, weekDayKey);


                formData.week_id.push(weekDayKey);
                // week_id.push(weekDayKey);
                // Initialize sub-arrays for this week day
                formData.week_key_row[weekDayKey] = [];
                formData.course_subject_id[weekDayKey] = [];
                formData.employee_teacher_id[weekDayKey] = [];
                formData.from_time[weekDayKey] = [];
                formData.end_time[weekDayKey] = [];
                formData.room_id[weekDayKey] = [];
                // Collect data from table rows
                $(`#${weekDay} .routineValueRow`).each(function() {
                    formData.week_key_row[weekDayKey].push($(this).find('.weekKeyRowClass').val() || null);
                    formData.course_subject_id[weekDayKey].push($(this).find('.course_subject_id').val() || null);
                    formData.employee_teacher_id[weekDayKey].push($(this).find('.employee_teacher_id').val() || null);
                    formData.from_time[weekDayKey].push($(this).find('.from_timepicker').val() || null);
                    formData.end_time[weekDayKey].push($(this).find('.end_timepicker').val() || null);
                    formData.room_id[weekDayKey].push($(this).find('.room_id').val() || null);
                });
            });

            let validationError = false;

            formData._token = $('meta[name="csrf-token"]').attr('content');


            $.ajax({
                url: '{{ route('eims_course_class_routine_day_wise_conflict_check') }}',
                method: 'POST',
                data: formData,
                success: function(response) {
                    console.log('Response:', response);

                    if (response.responseStatus === 'success') {
                        // Switch to the next tab if validation succeeds
                        $('.nav-tabs li').removeClass('active');
                        $('.tab-pane').removeClass('in active');
                        $(`a[href="${nextTab}"]`).parent().addClass('active');
                        $(nextTab).addClass('in active');

                        // Hide error messages after successful validation
                        hideErrorMessage(); // Ensure this is correctly clearing errors
                    } else if (response.responseStatus === 'error') {
                        // Remove any existing error messages
                        $('.error-message').empty();

                        if (response.errors && Array.isArray(response.errors)) {
                            const errors = response.errors;
                            // Loop through each error and display them in their respective rows and columns
                            errors.forEach((error) => {
                                const row_index = error.row_index;
                                const row_column_id = error.row_column_id;
                                const rowIndex = error.rowIndex;
                                const weekId = error.weekId;
                                const message = error.message;
                                console.log(row_column_id);

                                $('.' + row_column_id + row_index + '-error-message').html(`<small class="show-errors">${message}</small>`).css('display', 'block');

                            });
                        }
                    }
                },
                error: function(xhr, status, error) {
                    console.error('AJAX Error:', error);

                    // Display a general error message under the affected row
                    $('.error-message').html('<small class="show-errors">An error occurred while processing the request.</small>');
                }
            });

            if (!validationError) {
                e.preventDefault();
                e.stopPropagation();
                return;
            }

        });


        //////////////////////// End Checking the Tab Switching //////////////////////////////
    });
</script>
<!-- filter option all -->

<script type="text/javascript">
    function initializeClassOnJavascript() {
        $('.custom-select2').select2();
        $('.from_timepicker').timepicker();
        $('.end_timepicker').timepicker();
    }
    $(document).ready(function() {
        hideErrorMessageInputSelect();
        const shiftIdField = $("#shift_id");
        const searchButton = $('#searchButton');


        $('.from_timepicker').timepicker({
            timeFormat: 'hh:mm tt', // 12-hour format with leading zero in hour and AM/PM
            showMeridian: true,
            minuteStep: 15,
            defaultTime: false, // Set default time to the current time
        });

        $('.end_timepicker').timepicker({
            timeFormat: 'hh:mm tt', // 12-hour format with leading zero in hour and AM/PM
            showMeridian: true,
            minuteStep: 15,
            defaultTime: false, // Set default time to the current time
        });

        // fileter option start
        $("#faculty_id").change(function() {
            $.ajax({
                type: 'post',
                url: '{{ route('eims_faculty_department_program_session_semester_section_course_subject_option_change') }}',
                data: $('form').serialize(),
                dataType: 'json',
                success: function(_response) {
                    $("#department_id").empty();
                    $("#department_id").prepend(
                        '<option selected="selected" value="">Please select department</option>'
                    );

                    $("#program_id").empty();
                    $("#program_id").prepend(
                        '<option selected="selected" value="">Please select program</option>'
                    );

                    $.each(_response, function(key, value) {
                        {
                            if (key == "departmentByFacultyChange") {
                                $.each(value, function(index, result) {
                                    $('#deparmtment_id').append(
                                        "<option value='" + result.id +
                                        "'>" + result.name + "</option>"
                                    );
                                });
                            }
                            if (key == "programListByDepartmentChange") {
                                $.each(value, function(index, result) {
                                    $('#program_id').append(
                                        "<option value='" + result.id +
                                        "'>" + result.name + "</option>"
                                    );
                                });
                            }
                        }
                    });
                }
            });
        });

        $("#program_id").change(function() {
            $.ajax({
                type: 'post',
                url: '{{ route('eims_faculty_department_program_session_semester_section_course_subject_option_change') }}',
                data: $('form').serialize(),
                dataType: 'json',
                success: function(_response) {
                    $("#session_id").empty();
                    $("#session_id").prepend(
                        '<option selected="selected" value="">Please select session</option>'
                    );

                    $("#semester_class_id").empty();
                    $("#semester_class_id").prepend(
                        '<option selected="selected" value="">Please select semester/class</option>'
                    );

                    $.each(_response, function(key, value) {
                        {
                            if (key == "sessionListByProgramChange") {
                                $.each(value, function(index, result) {
                                    $('#session_id').append(
                                        "<option value='" + result.id +
                                        "'>" + result.name + "</option>"
                                    );
                                });
                            }
                            if (key == "semesterClassListByProgramChange") {
                                $.each(value, function(index, result) {
                                    $('#semester_class_id').append(
                                        "<option value='" + result.id +
                                        "'>" + result.name + "</option>"
                                    );
                                });
                            }
                            if (key == "shiftListByProgramChange") {
                                $.each(value, function(index, result) {
                                    $('#shift_id').append(
                                        "<option value='" + result.id +
                                        "'>" + result.name + "</option>"
                                    );
                                });
                            }
                        }
                    });
                }
            });
        });

        $("#semester_class_id").change(function() {
            var semester_class_id = $("#semester_class_id").val();
            if (semester_class_id != '' && semester_class_id > 0) {
                $("#section_id").prop('disabled', false);
                //$('#routineWeekSubmitDiv').show();
            } else {
                $("#section_id").prop('disabled', true);
                //$('#routineWeekSubmitDiv').hide();
            }
            $.ajax({
                type: 'post',
                url: '{{ route('eims_faculty_department_program_session_semester_section_course_subject_option_change') }}',
                data: $('form').serialize(),
                dataType: 'json',
                success: function(_response) {
                    $("#section_id").empty();
                    $("#section_id").prepend(
                        '<option selected="selected" value="">Please select section</option>'
                    );
                    $(".course_subject_id").empty();
                    if (companyType === 'UNV') {
                        $(".course_subject_id").prepend(
                            '<option selected="selected" value="">Please select course</option>'
                        );
                    } else {
                        $(".course_subject_id").prepend(
                            '<option selected="selected" value="">Please select subject</option>'
                        );

                    }
                    $.each(_response, function(key, value) {
                        {
                            if (key == "sectionListBySemesterClassChange") {
                                $.each(value, function(index, result) {
                                    $('#section_id').append(
                                        "<option value='" + result.id +
                                        "'>" + result.name + "</option>"
                                    );
                                });
                            }
                            if (key == "courseSubjectListBySemesterClassChange") {
                                $.each(value, function(index, result) {
                                    $('.course_subject_id').append(
                                        "<option value='" + result.id +
                                        "'>" + result.name + "</option>"
                                    );
                                });
                            }

                        }
                    });
                }
            });
        });

        $("#semester_class_group_id").change(function() {
            var semester_class_group_id = $("#semester_class_group_id").val();
            $.ajax({
                type: 'post',
                url: '{{ route('eims_faculty_department_program_session_semester_section_course_subject_option_change') }}',
                data: $('form').serialize(),
                dataType: 'json',
                success: function(_response) {
                    if (companyType === 'UNV') {
                        $(".course_subject_id").empty().prepend(
                            '<option selected="selected" value="">Please select course</option>'
                        );
                    } else {
                        $(".course_subject_id").empty().prepend(
                            '<option selected="selected" value="">Please select subject</option>'
                        );

                    }
                    $("#section_id").empty().prepend(
                        '<option selected="selected" value="">Please select section</option>'
                    );
                    $.each(_response, function(key, value) {
                        {
                            if (key ==
                                "courseSubjectListBySemesterClassGroupChange") {
                                $.each(value, function(index, result) {
                                    $('.course_subject_id').append(
                                        "<option value='" + result.id +
                                        "'>" + result.name + "</option>"
                                    );
                                });
                            }

                            if (key ==
                                "sectionListBySemesterClassGroupChange"
                            ) {
                                $.each(value, function(index, result) {
                                    $('#section_id').append(
                                        "<option value='" + result.id +
                                        "'>" + result.name + "</option>"
                                    );
                                });
                            }

                        }
                    });
                }
            });
        });

        searchButton.click(function(e) {
            e.preventDefault();
            var program_id = $("#program_id").val();
            var session_id = $("#session_id").val();
            var semester_class_id = $("#semester_class_id").val();
            var shift_id = shiftIdField.val();
            var section_id = $("#section_id").val();
            var semester_class_group_id = $("#semester_class_group_id").val();
            $.ajax({
                url: `{{ route('eims_course_class_routine_create') }}`,
                method: 'POST',
                dataType: 'json',
                data: {
                    program_id: program_id,
                    session_id: session_id,
                    semester_class_id: semester_class_id,
                    shift_id: shift_id,
                    semester_class_group_id: semester_class_group_id,
                    section_id: section_id
                },

                success: function(_response) {

                    let programHeading = '';
                    let semesterClassHeading = '';
                    let selectedProgramName = document.querySelector('#program_id option:checked').text;
                    let selectedSessionName = document.querySelector('#session_id option:checked').text;
                    let selectedSemesterClassName = document.querySelector('#semester_class_id option:checked').text;
                    let selectedSectionName = document.querySelector('#section_id option:checked').text;
                    let selectedClassGroupName = document.querySelector('#semester_class_group_id option:checked').text;
                    if (companyType == 'UNV') {
                        programHeading = 'Program';
                        semesterClassHeading = 'Semester';
                    } else {
                        programHeading = 'Medium/Version';
                        semesterClassHeading = 'Class';
                    }

                    if (_response.responseStatus === 'success') {
                        $(".course_subject_id").empty();
                        $('#routineWeekSubmitDiv').show();
                        $('#routineTable').show();
                        $('#routineTableExist').hide();
                        $('.submitButton').show();

                        if (companyType === 'UNV') {
                            $(".course_subject_id").prepend(
                                '<option selected="selected" value="">Please select course</option>'
                            );
                        } else {
                            $(".course_subject_id").prepend(
                                '<option selected="selected" value="">Please select subject</option>'
                            );
                        }

                        $.each(_response.data, function(key, value) {
                            if (key === "courseSubjectListBySemesterClassGroupChange") {
                                $.each(value, function(index, result) {
                                    $('.course_subject_id').append(
                                        "<option value='" + result.id + "'>" + result.name + "</option>"
                                    );
                                });
                            }
                        });

                        $('#exam_name_heading').html(selectedSemesterClassName + ' Class Routine');

                        $('.shift_start_time').val(_response.shift.start_time_am_pm);
                        $('.shift_end_time').val(_response.shift.end_time_am_pm);
                        $('.shift_break_start_time').val(_response.shift.start_break_time_am_pm);
                        $('.shift_break_end_time').val(_response.shift.end_break_time_am_pm);
                        $('.shift_class_duration').val(_response.shift.class_duration);
                        $('#program_heading').html(programHeading);
                        $('#program_name').html(selectedProgramName);
                        $('#session_name_heading').html(selectedSessionName);
                        $('#semester_class_label').html(semesterClassHeading);
                        $('#semester_class_name').html(selectedSemesterClassName + '(' + selectedSectionName + ')(' + selectedClassGroupName + ')');


                    } else if (_response.responseStatus === 'exist_data') {
                        $('#routineWeekSubmitDiv').show();
                        $('#routineTable').hide();
                        $('#routineTableExist').show();
                        $('.submitButton').hide();
                        // Display the message in the #routineContainer div using the id
                        document.getElementById('routineTableExist').innerHTML = `
                        <table class="table table-striped table-bordered"
                            style="width: 100%; border-collapse: collapse; text-align: center"
                            >
                            <td class="text-danger">Routine For this Class Already Generated. Please Access to update routine..</td>
                        </table>
                        `;

                        $('#exam_name_heading').html(selectedSemesterClassName + ' Class Routine');
                        $('#program_heading').html(programHeading);
                        $('#program_name').html(selectedProgramName);
                        $('#session_name_heading').html(selectedSessionName);
                        $('#semester_class_label').html(semesterClassHeading);
                        $('#semester_class_name').html(selectedSemesterClassName + '(' + selectedSectionName + ')(' + selectedClassGroupName + ')');
                    } else {
                        $('#routineWeekSubmitDiv').hide();
                        setErrorsText(_response.errors);
                        Swal.fire({
                            icon: 'error',
                            title: 'Oops...',
                            text: _response.message,
                        });
                        return false;
                    }
                },


                error: function(_response) {
                    setErrorsText(_response.errors);
                }
            });
        });

        //fileter option end


        var i = 0;
        $(".addButton").click(function() {
            var courseSubjectSelectElement = document.querySelector('.course_subject_id');
            var targetCourseSubjectSelectElements = document.querySelectorAll(
                '.course_subject_id_for_load');

            // Initialize an array to store the values
            var courseSubjectValuesWhichisLoaded = [];
            var courseSubjectOptionsWhichisLoaded = courseSubjectSelectElement.querySelectorAll(
                'option');

            // Extract values from the source <select>
            courseSubjectOptionsWhichisLoaded.forEach(option => {
                courseSubjectValuesWhichisLoaded.push({
                    id: option.value,
                    name: option.textContent
                });
            });

            // Handle dynamic row generation
            var weekKeyKey = $(this).data('weekkeykey');
            var weekKey = $(this).data('weekkey');
            i++; // Increment the counter
            var weekKeyRow = weekKey + i;
            console.log(weekKeyKey, weekKeyRow, weekKey);


            // Make sure the element exists where you are appending the new row
            if ($("#eachRoutineRow" + weekKey).length === 0) {
                // Append the container if it doesn't exist
                $("#routineContainer").append(`<div id="eachRoutineRow${weekKey}"></div>`);

            }

            var shift_id = shiftIdField.val();

            var eachRoutineRow = `
                <tr class="routineValueRow" id="rowRoutine${weekKeyRow}" data-rowid = "${weekKeyRow}">
                        <input autocomplete="off" type='hidden'
                                        class="form-control input-sm text-center weekKeyRowClass"
                                        id='weekKeyRow${weekKeyRow}' name='week_key_row[${weekKeyKey}][]'
                                        value='${weekKeyRow}' />
                    <td>
                        <select name="course_subject_id[${weekKeyKey}][]" class="custom-select2 form-control input-sm course_subject_id course_subject_id_for_load" id="course_subject_id${weekKeyRow}" style="width: 100%">
                            <option value="">Please select course/subject</option>
                            @foreach ($courseSubjects as $courseSubjectKey => $courseSubject)
                            <option value="{{ $courseSubject->id }}">{{ $courseSubject->name }}</option>
                            @endforeach
                        </select>
                         <p class="course_subject_id${weekKeyRow}-error-message" style="color:red;"></p> <!-- Error message here -->

                    </td>
                    <td>
                        <select name="employee_teacher_id[${weekKeyKey}][]" class="custom-select2 form-control input-sm employee_teacher_id" id="employee_teacher_id${weekKeyRow}" style="width: 100%">
                            <option value="">Please select teacher</option>
                            @foreach ($employeeTeacherInfo as $empTeacherKey => $empTeacher)
                            <option value="{{ $empTeacher->id }}">{{ $empTeacher->name }}</option>
                            @endforeach
                        </select>
                         <p class="employee_teacher_id${weekKeyRow}-error-message" style="color:red;"></p> <!-- Error message here -->

                    </td>
                    <td>
                        <input name="from_time[${weekKeyKey}][]" autocomplete="off" type="text" class="form-control input-sm text-center from_timepicker" id="from_time${weekKeyRow}" placeholder="Enter form time" />
                        <p class="from_time${weekKeyRow}-error-message" style="color:red;"></p> <!-- Error message here -->

                    </td>
                    <td>
                        <input name="end_time[${weekKeyKey}][]" autocomplete="off" type="text" class="form-control input-sm text-center end_timepicker" id="end_time${weekKeyRow}" placeholder="Enter to time" />
                         <p class="end_time${weekKeyRow}-error-message" style="color:red;"></p> <!-- Error message here -->
                    </td>
                    <td>
                        <select name="room_id[${weekKeyKey}][]" class="form-control input-sm custom-select2 room_id" id="room_id${weekKeyRow}" style="width: 100%">
                            <option value="">Please select room</option>
                            @foreach ($rooms as $roomKey => $room)
                            <option value="{{ $room->id }}">{{ $room->name }}</option>
                            @endforeach
                        </select>
                        <p class="room_id${weekKeyRow}-error-message" style="color:red;"></p> <!-- Error message here -->

                    </td>
                    <td>
                        <a href="javascript:;" name="remove" id="${weekKeyRow}" class="btn_remove" style="width:80px"><i class="glyphicon glyphicon-trash" style="color:red; font-size:16px"></i></a>

                    </td>
                </tr>
            `;

            if (companyType === 'UNV') {
                $('#course_subject_id' + weekKeyRow).prepend(
                    '<option selected="selected" value="">Please select course</option>');
            } else {
                $('#course_subject_id' + weekKeyRow).prepend(
                    '<option selected="selected" value="">Please select subject</option>');
            }
            console.log('weekKey', weekKey, eachRoutineRow);

            // Append the new row to the correct table or container
            $("#eachRoutineRow" + weekKey).append(eachRoutineRow);

            // Append the new options to the dynamically added select
            $("#course_subject_id" + weekKeyRow).empty(); // Empty the specific select element
            $.each(courseSubjectValuesWhichisLoaded, function(index, result) {
                $("#course_subject_id" + weekKeyRow).append(
                    "<option value='" + result.id + "'>" + result.name + "</option>"
                );
            });

            // Re-initialize any necessary JavaScript plugins, such as Select2 or time pickers
            initializeClassOnJavascript();
        });


        $(document).on('click', '.btn_remove', function() {
            var button_id = $(this).attr("id");
            $('#rowRoutine' + button_id + '').remove();
        });
    });
</script>

<!-- submit all -->
<script type="text/javascript">
    $(document).ready(function() {

        $('form').submit(function(event) {
            var form = $('form').serialize();
            event.preventDefault();
            $.ajax({
                type: 'post',
                url: '{{ route('eims_course_class_routine_store') }}',
                data: form,
                dataType: 'json',
                success: function(response) {
                    console.log('Response:', response);
                    if (response.responseStatus == 'success') {
                        Swal.fire({
                            icon: response.responseStatus,
                            title: response.responseTitle,
                            text: response.responseText,
                            showConfirmButton: false,
                            timer: 1500
                        });
                        setTimeout(function() {
                            window.location.href = "{{ route('eims_course_class_routine') }}";
                        }, 2000);
                    } else if (response.responseStatus === 'error') {
                        $('.error-message').empty();
                        if (response.errors && Array.isArray(response.errors)) {
                            const errors = response.errors;
                            errors.forEach((error) => {
                                const row_index = error.row_index;
                                const row_column_id = error.row_column_id;
                                const message = error.message;
                                $('.' + row_column_id + row_index + '-error-message').html(`<small class="show-errors">${message}</small>`).css('display', 'block');
                            });
                        }
                    }
                },
                error: function(xhr, status, error) {
                    console.error('AJAX Error:', error);
                    //$('.' + row_column_id + row_index + '-error-message').html(`<small class="show-errors">${message}</small>`).css('display', 'block');
                    $('.error-message').html('<small class="show-errors">An error occurred while processing the request.</small>');

                }
            });
        });

    });



    function hideErrorMessageInputSelect() {

        $("input").keyup(function() {
            var inputValue = $(this).val();
            var inputId = $(this).attr('id');

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

        $("select").change(function() {
            var selectedValue = $(this).val();
            var elementId = $(this).attr('id');
            console.log('hideErrorMessageInputSelect ', selectedValue, elementId);
            if (selectedValue) {
                $('#' + elementId + 'e').hide();
            } else {
                $('#' + elementId + 'e').show();
            }
        });
    }



    // Hide error messages function
    function hideErrorMessage() {
        // Event delegation to handle dynamically added rows
        $(document).on("change", "select", function() {
            var selectedValue = $(this).val();
            var elementId = $(this).attr('id');
            console.log('hideErrorMessage ', selectedValue, elementId);
            if (selectedValue) {
                $('.' + elementId + '-error-message').hide(); // Hide error message
            } else {
                $('.' + elementId + '-error-message').show(); // Show error message
            }
        });

        $(document).on("keyup change select", "input", function() {
            var InputValue = $(this).val();
            var elementId = $(this).attr('id');
            var number = elementId.match(/\d+$/)[0];
            elementEmployeeTeacherId = 'employee_teacher_id' + number;
            elementRoomId = 'room_id' + number;
            console.log('hideErrorMessage ', InputValue, elementId);
            if (InputValue) {
                $('.' + elementEmployeeTeacherId + '-error-message').hide(); // Hide error message
                $('.' + elementRoomId + '-error-message').hide(); // Hide error message
            } else {
                $('.' + elementEmployeeTeacherId + '-error-message').show(); // Show error message
                $('.' + elementRoomId + '-error-message').show(); // Show error message
            }
        });

    }



    function setErrorsText(errors) {
        $.each(errors, function(key, value) {
            $('#' + key + 'e').empty().show().append('<span class="errormsg" style="color:red;">' + value +
                '</span>');

        });
    }
</script>