@section('modal_title', __('exam.edit_exam_grade'))

<div class="modal-dialog" role="document">
    <div class="modal-content">
        {!! html()->form('PUT', route('exam.academic_exam_grades.update', [$exam_grade->id]))->id('modal_form')->open() !!}

        <div class="modal-header">
            <h4 class="modal-title"> {{ __('exam.edit_exam_grade') }} </h4>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
            </button>
        </div>

        <div class="modal-body">

            @if (auth()->user()->hasRole('Super Admin'))
                <div class="form-group mb-3">
                    {!! html()->label(__('common.business_id') . ':', 'business_id') !!}
                    {!! html()->select('business_id', $business_list)->class('form-control')->id('business_id')->required()->value(old('business_id', $exam_grade->business_id)) !!}
                </div>
            @endif

            <div class="form-group">
                {!! html()->label(__('exam.grade_name') . ':', 'grade_name') !!}
                {!! html()->text('grade_name')->class('form-control')->id('grade_name')->required()->maxLength(100)->value(old('grade_name', $exam_grade->grade_name)) !!}
                <small class="text-danger" id="grade_name_msg"></small>
            </div>
            <div class="form-group">
                {!! html()->label(__('exam.from_mark') . ':', 'from_mark') !!}
                {!! html()->number('from_mark')->class('form-control')->id('from_mark')->required()->maxLength(100)->value(old('from_mark', $exam_grade->from_mark)) !!}
                <small class="text-danger" id="from_mark_msg"></small>
            </div>
            <div class="form-group">
                {!! html()->label(__('exam.to_mark') . ':', 'to_mark') !!}
                {!! html()->number('to_mark')->class('form-control')->id('to_mark')->required()->maxLength(100)->value(old('to_mark', $exam_grade->to_mark)) !!}
                <small class="text-danger" id="to_mark_msg"></small>
            </div>
            <div class="form-group">
                {!! html()->label(__('exam.grade_gpa') . ':', 'grade_gpa') !!}
                {!! html()->number('grade_gpa')->class('form-control')->id('grade_gpa')->attribute('step', '0.01')->required()->maxLength(100)->value(old('grade_gpa', $exam_grade->grade_gpa)) !!}
                <small class="text-danger" id="to_mark_msg"></small>
            </div>
            <div class="form-group">
                {!! html()->checkbox('is_default', $exam_grade->is_default)->id('is_default')->class('input-icheck is_default') !!}
                {!! html()->label('is_default', 'is_default') !!}
            </div>

            <div class="form-group">
                {!! html()->label(__('core.note') . ':', 'note') !!}
                {!! html()->textarea('note')->class('form-control')->id('note')->value(old('note', $exam_grade->note)) !!} <!-- Automatically retain old input in case of validation errors -->
            </div>
        </div>
        <div class="modal-footer">

            <button class="btn btn-primary" type="submit">{{ __('core.save') }}</button>
            <button class="btn btn-default" data-bs-dismiss="modal">{{ __('core.close') }}</button>
        </div>

        {!! html()->form()->close() !!}

        {{-- </div><!-- /.modal-content -->
</div><!-- /.modal-dialog --> --}}

        <script>
            $(document).ready(function() {
                $(document).on("change", "#from_mark", function(e) {
                    document.getElementById("to_mark").setAttribute("value", Number(e.target.value) + 1);
                    document.getElementById("to_mark").setAttribute("min", Number(e.target.value) + 1);
                })

                $(document).on("change", "#to_mark", function(e) {
                    let min_age = document.getElementById("from_mark");
                    if (min_age && min_age.value + 1 <= e.target.value) {
                        min_age.setAttribute("value", Number(e.target.value) - 1);
                        min_age.setAttribute("max", Number(e.target.value) - 1);
                    } else {
                        min_age.setAttribute("max", Number(e.target.value) - 1);
                    }
                })

                // Initialize iCheck for checkboxes and radio buttons
                $('.input-icheck').iCheck({
                    checkboxClass: 'icheckbox_square-blue',
                    radioClass: 'iradio_square-blue',
                    increaseArea: '20%' // optional
                });
            });
        </script>