@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" style="padding-bottom: 2%">
            <div class="viewTitle">
                <div class="panel-heading" style="padding-bottom:0; ">
                    <div class="panel-title"> {{ $pageTitle }}</div>
                </div>
            </div>
            <div class=" panel panel-default panel-border">

                <div class="panel-body">
                    {{Form::open(['url' => '/','id' => 'academicExamStudentPromotionSearchForm', 'autocomplete' => 'off'])}}

                    {{-- From --}}
                    <div class="row">
                        {{-- program_medium_id --}}
                        <div class="col-md-2 ">
                            <div class="form-group">
                                {!! Form::label('program_medium_id', $programMediumLabel . ': <sup class="text-danger">*</sup>',['class' => 'control-label'],false) !!}

                                <div class="">
                                    {!! Form::select('program_medium_id', $programs ?? [],request()->program_medium_id ?? null, [
                                    'class' => 'form-control custom-select2 program_medium_id',
                                    'placeholder' => "Select $programMediumLabel",
                                    'id' => 'program_medium_id',
                                    'required' => true,
                                    ]) !!}
                                    <p id='program_medium_id_error' style="min-height:3px;"></p>
                                </div>
                            </div>
                        </div>

                        {{-- session --}}
                        <div class="col-sm-2">
                            <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 ?? [], request()->session_id ?? null, [
                                    'class' => 'form-control custom-select2 session_id',
                                    'placeholder' => 'Select Session',
                                    'id' => 'session_id',
                                    'required' => true,
                                    ]) !!}
                                    <p id='session_id_error' style="min-height:3px;"></p>
                                </div>
                            </div>
                        </div>

                        {{-- semester_class_id --}}
                        <div class="col-md-2">
                            <div class="form-group ">
                                {!! Form::label('semester_class_id', $semesterClassLabel . '<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 semester_class_id',
                                    'placeholder' => "Select $semesterClassLabel",
                                    'id' => 'semester_class_id',
                                    'required' => true,
                                    ]) !!}
                                    <p id='semester_class_id_error' style="min-height:3px;"></p>
                                </div>
                            </div>
                        </div>

                        @if($companyType !== 'UNV')
                            <div class="col-md-2">
                                {{-- semester_class_id --}}
                                <div class="form-group ">
                                    {!! Form::label( 'semester_class_group_id', 'Group' . '<sup class="text-danger">*</sup>',
                                    ['class' => 'control-label'], false) !!}
                                    <div class="">
                                        {!! Form::select('semester_class_group_id', $semesterClassGroups ?? [],  null, [
                                        'class' => 'form-control custom-select2 semester_class_group_id',
                                        'placeholder' => 'Select Group',
                                        'id' => 'semester_class_group_id',
                                        'required' => true,
                                        ]) !!}
                                        <p id='semester_class_group_id_error' style="min-height:3px;"></p>
                                    </div>
                                </div>
                            </div>
                        @endif

                        {{-- shift_id --}}
                        <div class="col-md-2">
                            <div class="form-group">
                                {!! Form::label('shift_id', 'Shift', ['class' => ' control-label'], false) !!}
                                <div class="">
                                    {!! Form::select('shift_id', $shifts ?? [], null, [
                                    'class' => 'form-control custom-select2 shift_id',
                                    'placeholder' => 'Select Shift',
                                    'id' => 'shift_id',
                                    ]) !!}
                                    <p id='shift_id_error' style="min-height:3px;"></p>
                                </div>
                            </div>
                        </div>

                        {{-- section --}}
                        <div class="col-md-2">
                            <div class="form-group">
                                {!! Form::label('section_id', 'Section', ['class' => ' control-label'], false) !!}
                                <div class="">
                                    {!! Form::select('section_id', $sections ?? [], null, [
                                    'class' => 'form-control custom-select2 section_id',
                                    'placeholder' => 'Select Section',
                                    'id' => 'section_id',
                                    ]) !!}
                                    <p id='section_id_error' style="min-height:3px;"></p>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-12 text-right">
                            <div class="form-group">
                                <br>
                                <button type="submit" class="btn btn-info" id="searchButton">Search</button>
                            </div>
                        </div>
                    </div>

                    {{Form::close()}}

                    <div class="row">
                        {{-- Table Section --}}
                        <div id="academicExamResultGenerationTable"></div>
                    </div>
                </div>
            </div>
            <div class="viewTitle"></div>
        </div>
    </div>
    <script type="text/javascript">
        const companyType = '{{ $companyType }}';


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

                // find closest semester_id and semester_group_id
                const sessionIdField = $(this).closest('.row').find('.session_id').empty().prepend(`<option value="">Loading...</option>`);
                const semesterClassIdField = $(this).closest('.row').find('.semester_class_id').empty().prepend(`<option value="">Loading...</option>`);

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

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

            // on change semester_class_id or change semester_class_group_id get section
            $('.semester_class_id, .semester_class_group_id').change(function () {
                const semester_class_id = $(this).closest('.row').find('.semester_class_id').val();
                const semester_class_group_id = $(this).closest('.row').find('.semester_class_group_id').val();
                const url = "{{ route('eims_get_sections') }}";

                const sectionIdField = $(this).closest('.row').find('.section_id').empty().prepend(`<option value="">Loading...</option>`);

                $.post(url, {
                    _token: '{{ csrf_token() }}',
                    semester_class_id: semester_class_id,
                    semester_class_group_id: semester_class_group_id,
                }).done(function (response) {
                    sectionIdField.empty().prepend(`<option value="">Select Section</option>`);
                    response.forEach(value => {
                        sectionIdField.append(`<option value="${value.id}">${value.name}</option>`);
                    });
                }).fail(function () {
                    sectionIdField.empty().prepend(`<option value="">Select Section</option>`);
                });
            });

            // on academicExamStudentPromotionSearchForm submit ajax request
            $('#academicExamStudentPromotionSearchForm').submit(function (e) {
                e.preventDefault();
                const programIdHiddenField = $('#program_medium_id_hidden').empty();
                const sessionIdHiddenField = $('#session_id_hidden').empty();
                const semesterClassIdHiddenField = $('#semester_class_id_hidden').empty();
                const semesterClassGroupIdHiddenField = $('#semester_class_group_id_hidden').empty();
                const shiftIdHiddenField = $('#shift_id_hidden').empty();
                const sectionIdHiddenField = $('#section_id_hidden').empty();

                const academicExamStudentPromotionForm = $('#academicExamStudentPromotionForm');
                const academicExamResultGenerationTable = $('#academicExamResultGenerationTable').empty();


                $.post(`{{ url()->current() }}`, $(this).serialize())
                    .done(function (response) {
                        programIdHiddenField.val($('#program_medium_id').val());
                        sessionIdHiddenField.val($('#session_id').val());
                        semesterClassIdHiddenField.val($('#semester_class_id').val());
                        semesterClassGroupIdHiddenField.val($('#semester_class_group_id').val());
                        shiftIdHiddenField.val($('#shift_id').val());
                        sectionIdHiddenField.val($('#section_id').val());


                        const {students, allowed_failed_course_subjects} = response.data;
                        const allowedFailedCourseSubjectsString = allowed_failed_course_subjects.map(allowedFailedCourseSubject => {
                            return `<span class="badge badge-info">${allowedFailedCourseSubject.name}</span>`;
                        }).join(' ');

                        const table = students.length
                            ? `
                            <table class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th>SL</th>
                                        <th>Shift</th>
                                        <th>Section</th>
                                        <th>Student</th>
                                        <th>Student ID</th>
                                        <th>Roll No</th>
                                        <th>Grade</th>
                                        <th class="text-small">Status</th>
                                        <th class="text-small">Allowed Failed Subjects</th>
                                        <th class="text-small">Failed Subjects</th>
                                        <th class="text-small"></th>
                                    </tr>
                                </thead>
                                <tbody style="color: #0c0c0c">
                            ${students.map((student, index) => {
                                // failed course cubjects names
                                const failedCourseSubjectsString = student.failed_course_subject_results.map(failedCourseSubject => {
                                    return `<span class="badge badge-danger">${failedCourseSubject.name}</span>`;
                                }).join(' ');
                                return `
                                    <tr>
                                        <td>${index + 1} <input type="hidden" name="student_ids[]" value="${student.id}"></td>
                                        <td>${student.shift_name}</td>
                                        <td>${student.section_name}</td>
                                        <td>${student.name}</td>
                                        <td>${student.student_id_no}</td>
                                        <td>${student.roll_no}</td>
                                        <td>${student.letter_grade}</td>

                                        <td>
                                ${student.is_failed
                                    ? `<span class="text-danger">Failed</span>`
                                    : '<span class="text-success">Passed</span>'}
                                        </td>

                                       <td>
                                ${student.is_failed
                                    ? `${allowedFailedCourseSubjectsString}`
                                    : ''}
                                        </td>

                                        <td>
                                ${student.is_failed
                                    ? `${failedCourseSubjectsString}`
                                    : ''}
                                        </td>

                                        <td>
                                ${student.is_failed
                                    ?  `<a href="{{route('eims_student_manual_promotion_create')}}?student_id=${student.encoded_id}" class="btn btn-xs btn-success">Promote</a>`
                                    : '<span class="text-success">Valid for Promotion</span>'}
                                        </td>

                                    </tr>
                                    `;
                            }).join('')}
                                </tbody>
                            </table>
                            `
                            : `<div class="alert alert-warning">No data found</div>`;

                        academicExamResultGenerationTable.html(table);
                        academicExamStudentPromotionForm.removeClass('hidden');

                    })
                    .catch(function (error) {
                        academicExamStudentPromotionForm.addClass('hidden');
                        const {responseTitle, responseText, responseStatus} = error.responseJSON;

                        Swal.fire({
                            title: responseTitle,
                            text: responseText,
                            icon: responseStatus,

                        });
                    });
            });
        });
    </script>

@endsection