@extends('layouts/eims_layout')
@section('title', '| ' . $pageTitle)
@section('content')
    <div class="row add-data-form">
        <div class="col-md-12">
            <div class="col-md-2"></div>
            <div class="col-md-8 fullbody">
                <div class="viewTitle" style="border-bottom: 1px solid white;">
                    <a href="{{ route('eims_student_promotion_setting_list') }}"
                       class="btn btn-info pull-right addViewBtn"><i
                            class="glyphicon glyphicon-th-list viewIcon">
                        </i>{{ $pageTitle }} List</a>
                </div>
                <div class="panel panel-default panel-border">
                    <div class="panel-heading">
                        <div class="panel-title">Add {{ $pageTitle }}</div>
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-8">
                                {!! Form::open(['url'=> '#', 'class' => 'form-horizontal form-groups', 'autocomplete' => 'off']) !!}
                                {{-- effective_date --}}
                                <div class="form-group">
                                    {!! Form::label('effective_date', 'Effective Date: <sup class="text-danger">*</sup>', ['class' => 'col-sm-3 control-label'], false) !!}
                                    <div class="col-sm-9">
                                        {!! Form::text('effective_date', null, [
                                            'class' => 'form-control',
                                            'id' => 'effective_date',
                                            'placeholder' => 'dd-mm-yyyy',
                                            'readonly' => 'readonly',
                                        ]) !!}
                                        <p id='effective_datee' style="max-height:3px;"></p>
                                    </div>
                                </div>

                                {{-- program_id --}}
                                <div class="form-group">
                                    @php($programLabel = $companyType === 'UNV' ? 'Program' : 'Medium/Version')
                                    {!! Form::label('program_id', $programLabel. ': <sup class="text-danger">*</sup>', ['class' => 'col-sm-3 control-label'], false) !!}
                                    <div class="col-sm-9">
                                        {!! Form::select('program_id', $programs ?? [], null, [
                                            'class' => 'form-control custom-select2',
                                            'id' => 'program_id',
                                            'placeholder' => "Select $programLabel",
                                        ]) !!}
                                        <p id='program_ide' style="max-height:3px;"></p>
                                    </div>
                                </div>

                                {{-- session_id --}}
                                <div class="form-group">
                                    {!! Form::label('session_id', 'Session: <sup class="text-danger">*</sup>', ['class' => 'col-sm-3 control-label'], false) !!}
                                    <div class="col-sm-9">
                                        {!! Form::select('session_id', $sessions ?? [], null, [
                                            'class' => 'form-control custom-select2',
                                            'id' => 'session_id',
                                            'placeholder' => 'Select Session',
                                        ]) !!}
                                        <p id='session_ide' style="max-height:3px;"></p>
                                    </div>
                                </div>

                                {{-- semester_class_id --}}
                                <div class="form-group">
                                    @php($semesterClassLabel = $companyType === 'UNV' ? 'Semester' : 'Class')
                                    {!! Form::label('semester_class_id', $semesterClassLabel . ': <sup class="text-danger">*</sup>', ['class' => 'col-sm-3 control-label'], false) !!}
                                    <div class="col-sm-9">
                                        {!! Form::select('semester_class_id', $semesterClasses ?? [], null, [
                                            'class' => 'form-control custom-select2',
                                            'id' => 'semester_class_id',
                                            'placeholder' => "Select $semesterClassLabel",
                                        ]) !!}
                                        <p id='semester_class_ide' style="max-height:3px;"></p>
                                    </div>
                                </div>

                                {{-- promotion_based_on --}}
                                <div class="form-group">
                                    {!! Form::label('', 'Promotion Based On: <sup class="text-danger">*</sup>', ['class' => 'col-sm-3 control-label'], false) !!}
                                    <div class="col-sm-9">
                                        {{-- rtadio buttons --}}
                                        <div class="radio">
                                            @foreach($promotionBasedOn ?? [] as $base)
                                                <label style="margin-right: 5px">
                                                    {!! Form::radio('promotion_based_on', $base, null, ['class' => 'promotion-based-on-radio', 'checked' => $base== 'average']) !!}
                                                    {{ ucfirst($base)  }}
                                                </label>
                                            @endforeach
                                        </div>
                                        <p id='promotion_based_one' style="max-height:3px;"></p>
                                    </div>
                                </div>

                                {{-- final_exam --}}
                                <div class="form-group hidden" id="finalExamHolder">
                                    {!! Form::label('academic_exam_id', 'Final Exam: <sup class="text-danger">*</sup>', ['class' => 'col-sm-3 control-label'], false) !!}
                                    <div class="col-sm-9">
                                        {!! Form::select('academic_exam_id', [], null, [
                                            'class' => 'form-control custom-select2',
                                            'id' => 'academic_exam_id',
                                            'placeholder' => 'Select Final Exam',
                                        ]) !!}
                                        <p id='final_exame' style="max-height:3px;"></p>
                                    </div>
                                </div>

                                {{--  'allowed_failed_course_subject_ids' --}}
                                <div class="form-group">
                                    @php($allowedFailedCourseSubjectLabel = $companyType === 'UNV' ? 'Subjects' : 'Courses')
                                    {!! Form::label('allowed_failed_course_subject_ids', 'Allowed Failed '.$allowedFailedCourseSubjectLabel.':', ['class' => 'col-sm-3 control-label'], false) !!}
                                    <div class="col-sm-9">
                                        {!! Form::select('allowed_failed_course_subject_ids[]',  [], null, [
                                            'class' => 'form-control custom-select2',
                                            'id' => 'allowed_failed_course_subject_ids',
                                            'multiple' => 'multiple',
                                        ]) !!}
                                        <p id='allowed_failed_course_subject_idse' style="max-height:3px;"></p>
                                    </div>
                                </div>

                                {{-- description --}}
                                <div class="form-group">
                                    {!! Form::label('description', 'Description: ', ['class' => 'col-sm-3 control-label'], false) !!}
                                    <div class="col-sm-9">
                                        {!! Form::textarea('description', null, [
                                            'class' => 'form-control',
                                            'id' => 'description',
                                            'placeholder' => 'Enter description',
                                            'rows' => 3,
                                        ]) !!}
                                        <p id='description_error' style="max-height:3px;"></p>
                                    </div>
                                </div>

                                {{-- buttons --}}
                                <div class="form-group">
                                    {!! Form::label('submit', ' ', ['class' => 'col-sm-3 control-label']) !!}
                                    <div class="col-sm-9">
                                        {!! Form::submit('Submit', ['id' => 'add', 'class' => 'btn btn-info']) !!}
                                        <a href="{{ url('eims/setting/student/promotion-config') }}"
                                           class="btn btn-danger closeBtn">Close</a>
                                        <span id="success" style="color:green; font-size:20px;"
                                              class="pull-right"></span>
                                    </div>
                                </div>
                                {!! Form::close() !!}
                            </div>
                            <div class="col-md-4 emptySpace vert-offset-top-0">
                                <img src="{{ URL::to('images/catalog/image15.png') }}" style="float:right; width:40%">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="footerTitle" style="border-top:1px solid white"></div>
            </div>
            <div class="col-md-2"></div>
        </div>
    </div>

    <script type="text/javascript">
        'use strict';

        const companyType = '{{ $companyType }}';

        $(document).ready(function () {
            const programIdField = $('#program_id');
            const semesterClassIdField = $('#semester_class_id');
            const finalExamHolder = $('#finalExamHolder');
            const academicExamIdField = $('#academic_exam_id');
            const allowedFailedCourseSubjectIds = $('#allowed_failed_course_subject_ids');

            $('#effective_date').datepicker({
                dateFormat: "dd-mm-yy",
                changeMonth: true,
                changeYear: true,
            });

            // on change program_id get session_id and semester_class_id
            programIdField.change(function () {
                const program_id = $(this).val();
                const url = "{{ route('eims_faculty_department_program_session_semester_section_course_subject_option_change') }}";

                $('#session_id, #semester_class_id').empty().prepend(`<option value="">Loading...</option>`);

                $.post(url, {
                    _token: '{{ csrf_token() }}',
                    program_id: program_id,
                }).done(function (response) {
                    $('#session_id').empty().prepend(`<option value="">Select Session</option>`);
                    response.sessionListByProgramChange.forEach(value => {
                        $('#session_id').append(`<option value="${value.id}">${value.name}</option>`);
                    });

                    $('#semester_class_id').empty().prepend(`<option value="">Select {{$semesterClassLabel}}</option>`);
                    response.semesterClassListByProgramChange.forEach(value => {
                        $('#semester_class_id').append(`<option value="${value.id}">${value.name}</option>`);
                    });
                }).fail(function () {
                    $('#session_id, #semester_class_id').empty().prepend(`<option value="">Select Session</option>`);
                });
            });

            // on change semester_class_id get allowed_failed_course_subject_ids
            semesterClassIdField.change(() => {
                allowedFailedCourseSubjectIds.empty();

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

            // on change session_id or change semester_class_id get academic_exams
            $('#session_id, #semester_class_id').change(function () {
                const session_id = $('#session_id').val();
                const semester_class_id = $('#semester_class_id').val();
                const url = "{{ route('eims_get_academic_exams') }}";

                academicExamIdField.empty().prepend(`<option value="">Loading...</option>`);

                $.post(url, {
                    _token: '{{ csrf_token() }}',
                    session_id: session_id,
                    semester_class_id: semester_class_id,
                }).done(function (response) {
                    academicExamIdField.empty().prepend(`<option value="">Select Final Exam</option>`)
                    response.forEach(value => {
                        academicExamIdField.append(`<option value="${value.id}">${value.eims_academic_exam_activities.name}</option>`);
                    });
                });
            });

            $(document).on('change', '.promotion-based-on-radio', function () {
                const promotionBasedOn = $(this).val();


                if (promotionBasedOn === 'final') {
                    finalExamHolder.removeClass('hidden');
                } else {
                    finalExamHolder.addClass('hidden');
                }
            });

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

            // Form Submission
            $('form').submit(function (event) {
                console.log('submit')
                event.preventDefault();
                const formData = new FormData(this);

                $.ajax({
                    type: 'post',
                    url: '{{route("eims_student_promotion_setting_store")}}',
                    data: formData,
                    processData: false, // Prevent jQuery from automatically transforming the data into a query string
                    contentType: false, // Prevent jQuery from setting the content type
                    dataType: 'json',
                    beforeSend: function () {
                        $('.errormsg').remove();
                    },
                    success: function (_response) {
                        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_student_promotion_setting_list')}}";
                            }, 1000);
                        }

                    },
                    error: function (_response) {
                        const responseJSON = _response.responseJSON;
                        const errors = responseJSON.errors;
                        Swal.fire({
                            icon: responseJSON.responsibleStatus,
                            title: responseJSON.responseTitle,
                            text: responseJSON.responseText,
                        });
                        if (errors) {
                            setErrorsText(errors);
                        }
                    }
                });
            });
        });
    </script>
@endsection