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

<div class="row add-data-form">
    <div class="col-md-10 col-md-offset-1">
        <div class="viewTitle">
            <div class="panel-options">
                <a href="{{ url('eims/examination/exam/academic/routine/practical') }}"
                    class="btn btn-info pull-right addViewBtn"><i
                        class="glyphicon glyphicon-list addIcon"></i>{{ $pageTitle }} List</a>
            </div>
        </div>

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

                    <div class="col-md-2">
                        {{-- semester_class_id --}}
                        <div class="form-group ">
                            {!! Form::label(
                            'semester_class_id',
                            'Class: <sup class="text-danger">*<sup>',
                                    ['class' => ' control-label'],
                                    false,
                                    ) !!}
                                    <div class="">
                                        {!! Form::select('semester_class_id', $semesterClasses ?? [], $admissionExam->semester_class_id ?? null, [
                                        'class' => 'form-control custom-select2',
                                        'placeholder' => 'Select Class',
                                        'id' => 'semester_class_id',
                                        'required' => true,
                                        ]) !!}
                                        <p id='semester_class_ide' style="min-height:3px;"></p>
                                    </div>
                        </div>
                    </div>
                    <div class="col-sm-2">
                        {{-- admission_exam --}}
                        <div class="form-group ">
                            {!! Form::label(
                            'academic_exam_id',
                            'Academic Exam: <sup class="text-danger">*<sup>',
                                    ['class' => ' control-label'],
                                    false,
                                    ) !!}
                                    <div class="">
                                        <select name="academic_exam_id" class="form-control custom-select2"
                                            id="academic_exam_id">
                                            <option value="">Please select academic exam</option>
                                        </select>
                                        <p id='academic_exam_ide' style="max-height:3px;"></p>
                                    </div>
                        </div>
                    </div>

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


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

                    <input type="hidden" name="academic_exam_id_get" id="academic_exam_id_get">
                    <input type="hidden" name="academic_exam_activities_id_get" id="academic_exam_activities_id_get">
                    <input type="hidden" name="program_medium_id_get" id="program_medium_id_get">
                    <input type="hidden" name="semester_class_id_get" id="semester_class_id_get">
                    <input type="hidden" name="session_id_get" id="session_id_get">

                    <div class="theoryRoutineDiv" style="display:none;">

                        {{-- Table Section --}}

                        <div class="row" style="margin-bottom: 2%">
                            <div class="col-sm-4 col-xs-12 col-sm-offset-4 text-center">
                                <h5>
                                    <ul>
                                        <li style="list-style-type: none;">
                                            <h4 style="text-align:center;">
                                                <span style="font-weight: bold;text-decoration: underline;" id="exam_name_heading"></span>
                                            </h4>
                                        </li>
                                        <li style="list-style-type: none;">
                                            <span style="font-weight: bold;" id="semester_class_name"></span>
                                        </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>
                                    </ul>
                                </h5>
                            </div>
                        </div>

                        <div class="panel-body panelBodyView">
                            <table class="table table-striped table-bordered table-condensed first-col-dark"
                                id="examRoutine" style="width: 100%;">
                                <thead>
                                    <tr>
                                        <th class="text-center text-nowrap">Sl ADD</th>
                                        <th class="text-center text-nowrap">Subject</th>
                                        <th class="text-center text-nowrap">Date</th>
                                        <th class="text-center text-nowrap">Shift</th>
                                        <th class="text-center text-nowrap">Start Time</th>
                                        <th class="text-center text-nowrap">End Time</th>
                                        <th class="text-center text-nowrap">Duration</th>
                                    </tr>
                                </thead>
                                <tbody id="tableBodySectionSubject"></tbody>
                            </table>
                        </div>
                        {{-- Submit Button --}}
                        <div class="modal-footer">
                            {!! Form::button('Submit', [
                            'id' => 'routine_submit_btn',
                            'class' => 'btn btn-info routine_submit_btn',
                            ]) !!}
                            <a href="{{ url('eims/examination/exam/academic/routine/practical') }}" style="margin-bottom: 10px;"
                                class="btn btn-danger">Close</a>

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



<script type="text/javascript" src="{{ asset('js/eims/moment/moment.min.js') }}"></script>

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

    const course_subject_type_practical = '{{ $course_subject_type_practical }}';

    // Initialize timepickers for all start and end time fields
    function initializeTimePickers() {

        const currentTime = moment().format('hh:mm A');

        $('.start_time').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
        });
    }

    $(document).ready(function() {

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



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

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

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

            sessionIdField.empty().prepend(
                '<option selected="selected" value="">Select Session</option>');

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

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

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

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

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

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

            $('#tableBodySectionSubject').empty();
            $('#routine_submit_btn').show();

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

            $('.errormsg').empty();
            $.ajax({
                url: `{{ route('eims_practical_exam_routine_create') }}`,
                method: 'POST',
                dataType: 'json',
                data: {
                    program_id: program_id,
                    session_id: session_id,
                    semester_class_id: semester_class_id,
                    academic_exam_activities_id: academic_exam_activities_id,
                    academic_exam_id: academic_exam_id
                },
                success: function(_response) {

                    if (_response.responseTitle == 'success') {

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

                        console.log(_response, 'sob id chai');

                        $('#academic_exam_id_get').val(_response.examId);
                        $('#academic_exam_activities_id_get').val(_response.examActivitiesId);
                        $('#program_medium_id_get').val(_response.programId);
                        $('#session_id_get').val(_response.sessionId);
                        $('#semester_class_id_get').val(_response.semesterClassId);
                        $('#isExistExamRoutine').text(_response.isExistExamRoutine);
                        $('#exam_name_heading').text(_response.examName);
                        $('#program_heading').text(_response.programLabel);
                        $('#program_name').text(_response.programName);
                        $('#semester_class_label').text(_response.semesterClassLabel);
                        $('#semester_class_name').text(_response.semesterClassName);
                        $('#session_name_heading').text(_response.sessionName);

                        let serialCounter = 1;
                        let html = '';

                        $.each(_response.data, function(key, value) {

                            let html = createTableRow(serialCounter, value,
                                'Practical', course_subject_type_practical, value.course_subject_exam_duration, _response.examShift);
                            $('#tableBodySectionSubject').append(html);
                            serialCounter++;
                        });

                        // Re-initialize the datepicker for new elements
                        $('.exam_subject_date').datepicker({
                            dateFormat: "dd-mm-yy",
                            changeMonth: true,
                            changeYear: true
                        });

                        // Initialize timepicker for all start_time fields
                        initializeTimePickers();

                        // Set the start time of the first row

                        // Calculate end times for all rows based on start time
                        // calculateEndTimes();
                    } else {
                        setErrorsText(_response.errors);
                        Swal.fire({
                            icon: 'error',
                            title: 'Validation Error',
                            showConfirmButton: true
                        });
                        return false;
                    }
                },
                error: function(_response) {
                    // _response = JSON.parse(_response.responseText);
                    Swal.fire({
                        icon: _response.responseStatus,
                        title: _response.responseTitle,
                        text: _response.responseText,
                        showConfirmButton: false,
                        timer: 1500
                    })

                    setErrorsText(_response.errors);
                }
            });
        });


        //Storing Data
        $('#routine_submit_btn').click(function(e) {

            // Serialize the form data
            let formData = $('#exam_routine_form').serialize();
            // $('.exam_subject_datee').empty();
            // Send the form data via AJAX

            $.ajax({
                url: `{{ route('eims_practical_exam_routine_store') }}`,
                method: 'POST',
                data: formData,
                success: function(_response) {
                    // console.log(_response.errors);
                    if (_response.errors) {
                        if (_response.errors['exam_id']) {
                            $('#exam_ide').empty();
                            $('#exam_ide').show();
                            $('#exam_ide').append(
                                '<span class="errormsg" style="color:red;">' + _response
                                .errors.exam_id + '</span>');
                            return false;
                        }

                        $.each(_response.errors, function(key, value) {
                            // if key has institute_
                            if (key.includes('exam_subject_date')) {

                                // id and key slice from .
                                const id = key.slice(key.indexOf('.') + 1);
                                key = key.slice(0, key.indexOf('.'));

                                $($(`.${key}e`)[id]).empty().show().append(
                                    '<span class="errormsg" style="color:red;">' +
                                    value + '</span>');
                                // $('#' + key + 'e.'+id).empty().show().append('<span class="errormsg" style="color:red;">' + value + '</span>');
                            }
                            if (key.includes('start_time')) {

                                // id and key slice from .
                                const id = key.slice(key.indexOf('.') + 1);
                                key = key.slice(0, key.indexOf('.'));
                                $($(`.${key}e`)[id]).empty().show().append(
                                    '<span class="errormsg" style="color:red;">' +
                                    value + '</span>');
                                // $('#' + key + 'e.'+id).empty().show().append('<span class="errormsg" style="color:red;">' + value + '</span>');
                            }
                            if (key.includes('end_time')) {

                                // id and key slice from .
                                const id = key.slice(key.indexOf('.') + 1);
                                key = key.slice(0, key.indexOf('.'));
                                $($(`.${key}e`)[id]).empty().show().append(
                                    '<span class="errormsg" style="color:red;">' +
                                    value + '</span>');
                                // $('#' + key + 'e.'+id).empty().show().append('<span class="errormsg" style="color:red;">' + value + '</span>');
                            } else {
                                $('#' + key + 'e').empty().show().append(
                                    '<span class="errormsg" style="color:red;">' +
                                    value + '</span>');
                            }
                        });

                    } else {

                        Swal.fire({
                            icon: _response.responseStatus,
                            title: _response.responseTitle,
                            text: _response.responseText,
                            showConfirmButton: _response.showConfirmButton
                        })
                        if (_response.responseStatus == 'success') {
                            setTimeout(function() {
                                window.location.href =
                                    "{{ route('eims_practical_exam_routine') }}";
                            }, 1000);
                        }
                    }
                },

                error: function(_response) {
                    toastr.error(_response.errors);
                },
                complete: function() {
                    $('#add').removeAttr('disabled');
                    $('#add').html('Submit');
                }
            });
        });




        // Event listener for when the 'start_time' field is changed
        $('#tableBodySectionSubject').on('change', '.start_time', function() {
            // Get the closest table row to the changed 'start_time' field
            const row = $(this).closest('tr');

            // Get the value of the start time entered by the user
            const startTime = $(this).val();

            // Get the duration in minutes from the 'data-minutes' attribute in the table row
            const durationMinutes = parseInt(row.find('td[data-minutes]').attr('data-minutes'), 10);

            // Get the shift start and end times from hidden input fields in the current row
            const shiftStartTime = moment(row.find('.shift_start_time').val(), 'hh:mm A');
            const shiftEndTime = moment(row.find('.shift_end_time').val(), 'hh:mm A');

            // Check if both start time and duration are provided
            if (startTime && durationMinutes) {
                // Parse the entered start time
                const startTimeObj = moment(startTime, 'hh:mm A');

                // Calculate the end time by adding the duration to the start time
                const endTimeObj = startTimeObj.clone().add(durationMinutes, 'minutes');

                // Check if the start and end times are within the shift range
                if (startTimeObj.isBefore(shiftStartTime) || endTimeObj.isAfter(shiftEndTime)) {
                    // If invalid, reset the start time, end time, and duration fields
                    $(this).val(''); // Reset the start_time field
                    row.find('.end_time').val(''); // Reset the end_time field
                    row.find('.duration').text(''); // Reset the duration text
                    row.find('.time_duration').val(''); // Reset the hidden duration value
                } else {
                    // If valid, set the calculated end time, duration text, and hidden duration value
                    row.find('.end_time').val(endTimeObj.format('hh:mm A')); // Set the end_time field
                    row.find('.duration').text(formatDuration(durationMinutes)); // Display the duration text
                    row.find('.time_duration').val(durationMinutes); // Set the hidden duration value
                }
            }
        });


        // Event listener for when the 'exam_shift_id' field is changed
        $('#tableBodySectionSubject').on('change', '.exam_shift_id', function() {
            // Get the closest table row to the changed 'exam_shift_id' field
            const row = $(this).closest('tr');

            // Get the current row ID (if any) stored in the row's data attribute
            const currentRowId = row.data('rowid');

            // Get the selected shift ID from the dropdown
            const selectedShiftId = $(this).val();

            // Get the shift start and end times associated with the selected shift
            let shiftStartTime = $(this).find(':selected').data('shiftstarttime');
            let shiftEndTime = $(this).find(':selected').data('shiftendtime');

            // Convert the shift start time into a Moment.js object and format it to 'hh:mm A' format
            const shiftStartTimeFormate = moment(shiftStartTime, 'hh:mm A');
            const time12HourShiftStartTime = shiftStartTimeFormate.format('hh:mm A');

            // Convert the shift end time into a Moment.js object and format it to 'hh:mm A' format
            const shiftEndTimeFormate = moment(shiftEndTime, 'hh:mm A');
            const time12HourShiftEndTime = shiftEndTimeFormate.format('hh:mm A');
            console.log(time12HourShiftStartTime, time12HourShiftEndTime);
            // Set the 'shift_start_time' and 'shift_end_time' hidden input fields with the corresponding times
            $(`#shift_start_time_${currentRowId}`).val(time12HourShiftStartTime);
            $(`#shift_end_time_${currentRowId}`).val(time12HourShiftEndTime);
        });


        $('#tableBodySectionSubject').on('change', '.exam_subject_date, .start_time', function() {
            const row = $(this).closest('tr');
            // const exactCurrentRowId = row.data('rowid');
            const currentRowId = row.attr('id');
            const selectedDate = row.find('.exam_subject_date').val();
            const startTime = row.find('.start_time').val();

            if (selectedDate && startTime) {
                // Check for duplicates on every change
                if (isDuplicateDateTime(currentRowId, selectedDate, startTime)) {
                    alert(
                        'The selected date and start time already exist in another row. Please choose a different time.');
                    row.find('.start_time').val(''); // Clear the start time to prompt re-entry
                    row.find('.end_time').val(''); // Clear the start time to prompt re-entry
                    row.find('.duration').text(''); // Clear the start time to prompt re-entry
                    row.find('.time_duration').val(''); // Clear the start time to prompt re-entry
                }
            }
        });




        initializeTimePickers();


    });


    function calculateEndTime(startTime, durationMinutes) {
        const startTimeObj = moment(startTime, 'hh:mm A');
        const endTimeObj = startTimeObj.add(durationMinutes, 'minutes');
        return endTimeObj.format('hh:mm A');
    }



    // Function to create a table row with unique IDs
    function createTableRow(serialCounter, value, subjectTypeLabel, subjectTypeId, duration, examShift) {
        var exam_start_time = exam_end_time = subject_exam_date = course_subject_exam_duration = '';
        if (value.exam_start_time != '') {
            exam_start_time = value.exam_start_time;
        }
        if (value.exam_end_time != '') {
            exam_end_time = value.exam_end_time;
        }
        if (value.subject_exam_date != '') {
            subject_exam_date = value.subject_exam_date;
        }
        if (value.course_subject_exam_duration != '') {
            course_subject_exam_duration = value.course_subject_exam_duration;
        } else {
            course_subject_exam_duration = duration;
        }

        return `
            <tr id="row${serialCounter}" data-rowid=${serialCounter}>
                <td style="text-align:center">${serialCounter}</td>
                <input type="hidden" value="${value.id}" name="id[]" class="form-control">
                <td style="text-align:left">${value.name} (${subjectTypeLabel})<span style="color:red">*</span></td>
                <td>
                    <input type="hidden" id="course_subject_id_${serialCounter}" value="${value.course_subject_id}" name="course_subject_id[]" class="form-control course_subject_id" style="text-align:center">
                    <input type="hidden" id="course_subject_type_id_${serialCounter}" value="${subjectTypeId}" name="course_subject_type_id[]" class="form-control course_subject_type_id" style="text-align:center">
                    <input type="text" id="exam_subject_date_${serialCounter}" value="${subject_exam_date}" name="exam_subject_date[]" class="form-control exam_subject_date" style="text-align:center" readonly="readonly">
                    <p class="text-danger exam_subject_datee"></p>
                </td>

                <td>
                <input type="hidden" id="shift_start_time_${serialCounter}" name="shift_start_time[]" class="form-control shift_start_time" style="text-align:center" readonly="readonly">
                <input type="hidden" id="shift_end_time_${serialCounter}" name="shift_end_time[]" class="form-control shift_end_time" style="text-align:center" readonly="readonly">
                <!-- New selection input field -->
                <select id="exam_shift_id_${serialCounter}" name="exam_shift_id[]" class="form-control exam_shift_id" style="text-align:center">
                    <option value="">Select</option>
                    ${examShift.map(shift => `<option data-shiftstarttime = "${shift.start_time}" data-shiftendtime = "${shift.end_time}" value="${shift.id}">${shift.name}</option>`).join("")}
                </select>
                </td>


                <td><input type="text" id="start_time_${serialCounter}" value="${exam_start_time}" name="start_time[]" class="form-control start_time" style="text-align:center" readonly="readonly">
                <p class="text-danger start_timee"></p>
                </td>
                <td><input type="text" id="end_time_${serialCounter}" value="${exam_end_time}" name="end_time[]" class="form-control end_time" style="text-align:center" readonly>
                <p class="text-danger end_timee"></p>
                </td>
                <input type="hidden" value="${course_subject_exam_duration}" name="time_duration[]" class="form-control time_duration">
                <td style="text-align:center" id="duration_${serialCounter}" class="duration"  data-minutes="${course_subject_exam_duration}"></td>
            </tr>
        `;
    }





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

    // Function to check for duplicate date and time combinations in other rows
    function isDuplicateDateTime(currentRowId, selectedDate, startTime) {
        let isDuplicate = false;
        $('#tableBodySectionSubject tr').each(function() {
            const rowId = $(this).attr('id');
            const rowDate = $(this).find('.exam_subject_date').val();
            const rowTime = $(this).find('.start_time').val();

            // Skip current row and check for duplicates in others
            if (rowId !== currentRowId && rowDate === selectedDate && rowTime === startTime) {
                isDuplicate = true;
                return false; // Stop loop if a duplicate is found
            }
        });
        return isDuplicate;
    }
</script>



@endsection