@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">View {{ $pageTitle }}</div>
            </div>
            <div class="panel-body">
                <div class="row">

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

                    <input type="hidden" name="academic_exam_id_get" value="{{$data['examId']}}">
                    <input type="hidden" name="academic_exam_activities_id_get" value="{{$data['examActivitiesId']}}">
                    <input type="hidden" name="program_id_get" value="{{$data['programId']}}">
                    <input type="hidden" name="semester_class_id_get" value="{{$data['semesterClassId']}}">
                    <input type="hidden" name="session_id_get" value="{{$data['sessionId']}}">

                    <div class="theoryRoutineDiv">
                        {{-- 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">{{$data['examName']}}</span>
                                            </h4>
                                        </li>
                                        <li style="list-style-type: none;">
                                            <span style="font-weight: bold;" id="semester_class_name">{{$data['semesterClassName']}}</span>
                                        </li>
                                        <li style="list-style-type: none;">
                                            <span style="font-weight: bold;" id="program_heading">
                                                {{$data['programLabel']}}
                                            </span> :
                                            <span id="program_name">{{$data['programName']}}</span>
                                        </li>
                                        <li style="list-style-type: none;">
                                            <span style="font-weight: bold;">Session</span> :
                                            <span id="session_name_heading">{{$data['sessionName']}}</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 id="examRoutineHeaders">
                                        <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">

                                    @foreach($data['data'] as $index => $value)
                                    <tr id="row{{ $index + 1 }}">
                                        <td style="text-align:center">{{ $index + 1 }}</td>
                                        <input type="hidden" value="{{ $value['row_id'] }}" name="id[]" class="form-control">
                                        <td style="text-align:left">
                                            {{ $value['name'] }} ({{ $value['subjectTypeLabel'] }})<span style="color:red">*</span>
                                        </td>
                                        <td>
                                            <input type="hidden" id="course_subject_id_{{ $index + 1 }}" 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_{{ $index + 1 }}" value="{{ $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_{{ $index + 1 }}" value="{{ $value['subject_exam_date'] }}" name="exam_subject_date[]" class="form-control exam_subject_date" style="text-align:center" disabled>
                                            <p class="text-danger exam_subject_datee"></p>
                                        </td>

                                        <!-- New shift selection column -->
                                        <td>
                                            <input type="hidden" id="shift_start_time_{{ $index + 1 }}" value="{{ $value['exam_shift_start_time_val'] }}" name="shift_start_time[]" class="form-control shift_start_time" style="text-align:center" readonly="readonly">
                                            <input type="hidden" id="shift_end_time_{{ $index + 1 }}" value="{{ $value['exam_shift_end_time_val'] }}" name="shift_end_time[]" class="form-control shift_end_time" style="text-align:center" readonly="readonly">
                                            <input type="text" id="exam_shift_id_{{ $index + 1 }}" value="{{ $value['exam_shift_id'] }}" name="exam_shift_id[]" class="form-control exam_shift_id" style="text-align:center" readonly="readonly">

                                        </td>


                                        <td>
                                            <input type="text" id="start_time_{{ $index + 1 }}" value="{{ $value['exam_start_time'] }}" name="start_time[]" class="form-control start_time" style="text-align:center" disabled>
                                            <p class="text-danger start_timee"></p>
                                        </td>
                                        <td>
                                            <input type="text" id="end_time_{{ $index + 1 }}" value="{{ $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="{{ $value['course_subject_exam_duration'] }}" name="time_duration[]" class="form-control time_duration">
                                        <td style="text-align:center" id="duration_{{ $index + 1 }}" class="duration" data-minutes="{{ $value['course_subject_exam_duration'] }}"></td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>


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

<script src="{{ asset('js/eims/sheetjs/xlsx.full.min.js') }}"></script>
<script 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
        });

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

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

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




        // // When the start_time input is changed, calculate and set the end_time
        // $('#tableBodySectionSubject').on('change', '.start_time', function() {
        //     const row = $(this).closest('tr');
        //     const startTime = $(this).val();
        //     const durationMinutes = row.find('td[data-minutes]').attr('data-minutes');
        //     console.log(startTime, durationMinutes);

        //     if (startTime && durationMinutes) {
        //         const endTime = calculateEndTime(startTime, parseInt(durationMinutes));
        //         row.find('.end_time').val(endTime); // Set end_time in the input field
        //         row.find('.duration').text(formatDuration(
        //             durationMinutes)); // Set end_time in the input field
        //         row.find('.time_duration').val(durationMinutes); // Set end_time in the input field
        //     }
        // });

        // $('#tableBodySectionSubject').on('change', '.exam_subject_date, .start_time', function() {
        //     const row = $(this).closest('tr');
        //     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
        //         }
        //     }
        // });




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

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

        //Updating Data
        $('#routine_submit_btn').click(function(e) {
            // Serialize the form data
            let formData = $('#exam_routine_form').serialize();
            // Send the form data via AJAX
            $.ajax({

                url: `{{ route('eims_theory_exam_routine_update') }}`,
                method: 'POST',
                data: formData,

                success: function(_response) {

                    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: false,
                            timer: 1500
                        })
                        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');
                }
            });
        });
    });

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

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

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

    // Function to calculate the end time based on start time and duration
    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 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