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

<div class="row add-data-form" style="padding-bottom:20px;">
    <div class="col-md-12">
        <div class="col-md-1"></div>
        <div class="col-md-10 fullbody">
            <div class="viewTitle" style="border-bottom: 1px solid white;">
                <a href="{{ url('eims/academic/routine/course-class/') }}" 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">Edit {{ $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">


                            <input type="hidden" class="form-control input-sm" id="course_class_teacher_routine_id" name="course_class_teacher_routine_id"
                            value="{{ $course_class_routine_data->id ?? 'N/A' }}" >


                                <!-- Program or Medium -->
                                <div class="col-md-2">
                                    <div class="form-group">
                                        {!! Form::label('program_id', $companyType == 'SCL' ? 'Medium:' : 'Program:', ['class' => 'control-label col-sm-12'], false) !!}
                                        <div class="col-sm-12">
                                            <input type="text" class="form-control input-sm" id="program_id" name="program_id"
                                                value="{{ $course_class_routine_data->eims_program->name ?? 'N/A' }}" readonly>
                                        </div>
                                    </div>
                                </div>

                                <!-- Session -->
                                <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">
                                            <input type="text" class="form-control input-sm" id="session_id" name="session_id"
                                                value="{{ $course_class_routine_data->eims_session->name ?? 'N/A' }}" readonly>
                                        </div>
                                    </div>
                                </div>

                                <!-- Semester/Class -->
                                <div class="col-md-2">
                                    <div class="form-group">
                                        {!! Form::label('program_id', $companyType == 'SCL' ? 'Class:' : 'Semester:', ['class' => 'control-label col-sm-12'], false) !!}

                                        <div class="col-sm-12">
                                            <input type="text" class="form-control input-sm" id="semester_class_id" name="semester_class_id"
                                                value="{{ $course_class_routine_data->eims_semester_class->name ?? 'N/A' }}" readonly>
                                        </div>
                                    </div>
                                </div>

                                    <!-- Semester Group/Class Group-->
                                <div class="col-md-2">
                                    <div class="form-group">
                                        {!! Form::label('program_id', $companyType == 'SCL' ? 'Class Group:' : 'Semester Group:', ['class' => 'control-label col-sm-12'], false) !!}

                                        <div class="col-sm-12">
                                            <input type="text" class="form-control input-sm" id="semester_class_id" name="semester_class_id"
                                                value="{{ $course_class_routine_data->eims_semester_class_group->name ?? 'N/A' }}" readonly>
                                        </div>
                                    </div>
                                </div>

                                <!-- Section -->
                                <div class="col-md-2">
                                    <div class="form-group">
                                        {!! Form::label('section_id', 'Section:', ['class' => 'control-label col-sm-12'], false) !!}
                                        <div class="col-sm-12">
                                            <input type="text" class="form-control input-sm" id="section_id" name="section_id"
                                                value="{{ $course_class_routine_data->eims_section->name ?? 'N/A' }}" readonly>
                                        </div>
                                    </div>
                                </div>

                                <!-- Shift -->
                                <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>
                                                @foreach ($shift as $sh)
                                                <option value="{{ $sh->id }}" @if($course_class_routine_data->shift_id == $sh->id) selected @endif>
                                                    {{ $sh->name }}
                                                </option>
                                                @endforeach
                                            </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" value="{{date('h:i a',strtotime($course_class_routine_data->eims_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" value="{{date('h:i a',strtotime($course_class_routine_data->eims_shift->end_time))}}" style="text-align:center" readonly="readonly">
                                </div>

                            </div>

                        </div>
                    </div>

                    <div class="row" id="routineWeekSubmitDiv">
                        <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">{{ $course_class_routine_data->eims_semester_class->name ?? 'N/A' }} Class Routine</span></h2>
                                    </li>
                                    <li style="list-style-type: none;"><span style="font-weight: bold;" id="program_heading">Program/Medium</span> : <span id="program_name">{{ $course_class_routine_data->eims_program->name ?? 'N/A' }}</span></li>
                                    <li style="list-style-type: none;"><span style="font-weight: bold;">Session</span> : <span id="session_name_heading">{{ $course_class_routine_data->eims_session->name ?? 'N/A' }}</span></li>
                                    <li style="list-style-type: none;"><span style="font-weight: bold;" id="semester_class_label">Class</span> : <span id="semester_class_name">{{ $course_class_routine_data->eims_semester_class->name ?? 'N/A' }} ({{ $course_class_routine_data->eims_section->name ?? 'N/A' }})(({{ $course_class_routine_data->eims_semester_class_group->name ?? 'N/A' }}))</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>
                                                    <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                                             
                                            $weekKeyRow = $weekKey.'1'; 
                                            $routineIndex = 0;
                                            @endphp
                                            <tbody id="eachRoutineRow{{ $weekKeyRow }}">
                                                <input type="hidden" name="week_day[]" value="{{ $weekKey }}" />
                                                @forelse ($course_class_routine_data->eims_course_class_teacher_routine_details->where('week_day_id', $weekKey) as $routineDetail)
                                                @php $routineIndex++; 
                                                
                                                $weekKeyRow = $weekKey . $routineIndex;
                                                @endphp
                                                <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 }}' />
                                                    <input type="hidden" name="class_routine_details_id[{{ $weekKey }}][{{$routineDetail->course_subject_id}}]" value="{{ $routineDetail->id }}" />
                                                    <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 }}" @if($routineDetail->course_subject_id == $courseSubject->id) selected @endif>
                                                                {{ $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[{{ $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 }}" @if($routineDetail->employee_teacher_id == $empTeacher->id) selected @endif>
                                                                {{ $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 }}][]" type="text" class="form-control input-sm text-center from_timepicker" id="from_time{{$weekKeyRow}}" value="{{ date('g:i A', strtotime($routineDetail->from_time)) }}" 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 }}][]" type="text" class="form-control input-sm text-center end_timepicker" id="end_time{{$weekKeyRow}}" value="{{ date('g:i A', strtotime($routineDetail->end_time)) }}" 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 }}" @if($routineDetail->room_id == $room->id) selected @endif>
                                                                {{ $room->name }}
                                                            </option>
                                                            @endforeach
                                                        </select>
                                                        <p class="room_id{{ $weekKeyRow }}-error-message" style="color:red;"></p> <!-- Error message here -->
                                                    </td>
                                                    <td>
                                                        @if($routineIndex == 1)
                                                        <a href="javascript:;" class="addButton" style="width:80px" data-weekkeykey="{{ $weekKey }}" data-weekkey="{{$weekKeyRow}}">
                                                            <i class="glyphicon glyphicon-plus" style="color:green; font-size:16px"></i>
                                                        </a>
                                                        @else
                                                        <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>
                                                        @endif
                                                    </td>
                                                </tr>
                                                @empty
                                                @php $routineIndex = 1; 
                                                @endphp
                                                <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 }}' />
                                                <input type="hidden" name="class_routine_details_id[{{ $weekKey }}][{{$routineDetail->course_subject_id}}]" value="" />
                                                    <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>
                                                        <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 }}][]" type="text" class="form-control input-sm text-center from_timepicker" id="from_time{{$weekKeyRow}}" 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 }}][]" type="text" class="form-control input-sm text-center end_timepicker" id="end_time{{$weekKeyRow}}" 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>
                                                @endforelse
                                            </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('Update', ['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>

        </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();
        $('.from_timepicker, .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
        });

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

        $('#routineTable').on('change', '.from_timepicker', function (e) {
            e.preventDefault();
            const durationMinutes = 60;
            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');
            
            if (startTime) {
                const startTimeObj = moment(startTime, 'hh:mm A');
                const endTimeObj = startTimeObj.clone().add(durationMinutes, 'minutes');

                if (startTimeObj.isBefore(shiftStartTime) || endTimeObj.isAfter(shiftEndTime)) {
                    $(this).val('');
                    row.find('.end_timepicker').val('');
                } else {
                    row.find('.end_timepicker').val(endTimeObj.format('hh:mm A'));                        
                }
            }
        });


        $('#routineTable').on('change', '.end_timepicker', function (e) {
        e.preventDefault();
            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');

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

                if (endTimeObj.isBefore(shiftStartTime) || endTimeObj.isAfter(shiftEndTime)) {
                    // Reset fields if invalid
                    $(this).val('');
                    row.find('.end_timepicker').val('');
                }
            }
        });    

        

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


/*

        ////////////////// 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>
    var countRow = "{{ count($course_class_routine_data->eims_course_class_teacher_routine_details) }}";

    function initializeClassOnJavascript() {
        $('.custom-select2').select2();
        $('.from_timepicker').timepicker();
        $('.end_timepicker').timepicker();
    }

    $(document).ready(function() {
        const searchButton = $('#searchButton');
        const shiftIdField = $("#shift_id");
      

       

        // $('.end_timepicker').timepicker({
        //     timeFormat: 'HH:mm',
        //     showMeridian: true, // Use 24-hour time format
        //     minuteStep: 15, // Step interval (in minutes)
        // });

        $("#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>"
                                    );
                                });
                            }

                        }
                    });
                }
            });
        });

        var i = countRow;
        $(document).on('click', '.addButton', 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;


            // 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");
            console.log("Removing row with ID: " + button_id);
            $('#rowRoutine' + button_id).remove();
        });


        $('form').submit(function(event) {
        var form = $('form').serialize();
        event.preventDefault();
        $.ajax({
            type: 'post',
            url: '{{ route('eims_course_class_routine_update') }}',
            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>');

            }
        });
    });


        hideErrorMessage();
    });

    
    // 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>