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

    <div class="row add-data-form" style="padding-bottom: 3%">
        <div class="col-md-10 col-md-offset-1">
            <div class="viewTitle">
                <div class="panel-options">
                    <a href="{{route('eims_student_course_subject_enroll')}}"
                       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">{{ $pageTitle }}</div>
                </div>
                <div class="panel-body">
                    @php
                        if($companyType == 'UNV'){
                            $searchElements[] = ['element' => 'fillFacultyId', 'defaultValue' => request()->fillFacultyId];
                        }
                        $searchElements[] = ['element' => 'fillProgramId', 'label' => $companyType == 'UNV' ? 'Program' : 'Medium/Version', 'defaultValue' => request()->fillProgramId];
                        $searchElements[] = ['element' => 'fillSessionId', 'label' => 'Session', 'defaultValue' => request()->fillSessionId];
                        $searchElements[] = ['element' => 'fillSemesterClassId', 'label' => $companyType == 'UNV' ? 'Semester' : 'Class', 'defaultValue' => request()->fillSemesterClassId];
                        if($companyType !== 'UNV'){
                            $searchElements[] = ['element' => 'fillSemesterClassGroupId',  'label' => 'Group', 'defaultValue' => request()->fillSemesterClassGroupId, 'required'];
                        }
                        $searchElements[] = ['element' => 'fillSectionId', 'defaultValue' => request()->fillSectionId];
                        $searchElements[] =  ['element' => 'custom', 'name' => 'student_id','id' => 'student_id',
                                'type' => 'select', 'label' => 'Student:', 'options' => $studentsList ?? [], 'defaultValue' => request()->student_id];
                    @endphp
                    @include('partials.searchPanel.main', ['searchElements' => $searchElements, 'method' => 'POST'])

                    {{Form::open(['id' => 'courseSubjectEnrollForm', 'autocomplete' => 'off'])}}

                    @php($courseSubjectLabel = $companyType === 'UNV'? 'Course' : 'Subject')

                    @if(!empty($students?->toArray()))

                        @if(count($students) === 1)
                            @php($student = $students[0])
                            {{-- student info in a para --}}
                            <p class="">
                                {{ Form::hidden('student_ids[]', $student?->id) }}
                                <strong>Student Name:</strong> {{$student?->name}}<br>
                                <strong>Roll No:</strong> {{$student?->roll_no}}<br>
                                @if($companyType == 'UNV')
                                    <strong>Faculty:</strong> {{$student->eims_faculty?->name ?? null}}<br>
                                @endif
                                <strong>
                                    {{$companyType === 'UNV' ? 'Program' : 'Medium/Version' }}:</strong>
                                {{$student->eims_program->name ?? null}}<br>
                                <strong>Session:</strong> {{$student->eims_session?->name ?? null}}<br>
                                <strong>Class:</strong> {{$student->eims_semester_class?->name ?? null}}<br>
                                <strong>Group:</strong> {{$student->eims_semester_class_group?->name ?? null}}<br>
                                <strong>Section:</strong> {{$student->eims_section?->name ?? null}}<br>
                                <strong>Father:</strong> {{$student->eims_student_information?->father_name ?? null}}
                                <br>
                                <strong>Date of Birth:</strong> {{$student?->dob?->format('d-m-Y')}}<br>
                                <strong>Phone Number:</strong> {{$student?->phone_number}}<br>
                            </p>

                            <br>

                            {{-- generalcoursesubject select box--}}
                            <div class="form-group">
                                {!! Form::label('general_course_subject_ids',"General $courseSubjectLabel:". '<sup class="text-danger">*</sup>', ['class' => 'control-label '], false) !!}
                                <div class="list-group">
                                    @foreach($generalCourseSubjects as $generalCourseSubject)
                                        <span class=" badge badge-info">{{$generalCourseSubject?->name}}</span>
                                        {{ Form::hidden("general_course_subject_ids[$student?->id][]", $generalCourseSubject?->id) }}
                                    @endforeach
                                </div>
                            </div>

                            @if(count($selectiveCompulsoryCourseSubjects) > 0)
                                {{-- compulsoryCourseSubject select box--}}
                                <div class="form-group">
                                    {!! Form::label('selective_compulsory_course_subject_ids', "Selective Compulsory $courseSubjectLabel: " . '<sup class="text-danger">*</sup>', ['class' => 'control-label '], false) !!}
                                    <select name="selective_compulsory_course_subject_ids[{{$student?->id}}][]"
                                            id="selective_compulsory_course_subject_ids"
                                            class="form-control custom-select2" multiple>
                                        @foreach($selectiveCompulsoryCourseSubjects as $selectiveCompulsoryCourseSubject)
                                            <option
                                                    value="{{$selectiveCompulsoryCourseSubject?->id}}"
                                                    @selected(in_array($selectiveCompulsoryCourseSubject?->id, $student?->eims_student_course_subject_enroll?->selective_compulsory_course_subject_ids ?? []))
                                            >{{$selectiveCompulsoryCourseSubject?->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            @endif

                            @if(count($selectiveOptionalCourseSubjects) > 0)
                                {{-- optionalcoursesubject select box--}}
                                <div class="form-group">
                                    {!! Form::label('selective_optional_course_subject_ids', "Selective Optional $courseSubjectLabel:", ['class' => 'control-label ']) !!}
                                    <select name="selective_optional_course_subject_ids[{{$student?->id}}][]"
                                            id="selective_optional_course_subject_ids"
                                            class="form-control custom-select2" multiple>
                                        @foreach($selectiveOptionalCourseSubjects as $selectiveOptionalCourseSubject)
                                            <option
                                                    value="{{$selectiveOptionalCourseSubject?->id}}"
                                                    @selected(in_array($selectiveOptionalCourseSubject?->id, $student?->eims_student_course_subject_enroll?->selective_optional_course_subject_ids ?? []))
                                            >{{$selectiveOptionalCourseSubject?->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            @endif
                        @elseif(count($students) > 1)
                            @php($student_enrolled_course_subjects_ids = [1,2,3])
                            <br>
                            {{Form::label('students', 'Students', ['class' => 'control-label '])}}
                            <table class="table table-responsive table-bordered first-col-dark" id="datatable">
                                <thead>
                                <tr>
                                    <th class="text-center text-nowrap" style="min-width: 10px">
                                        {{-- check box to check all--}}
                                        <input type="checkbox" id="checkAll" class="checkAll">
                                    </th>
                                    <th class="text-center text-nowrap" style="min-width: 70px">Roll No</th>
                                    <th class="text-center text-nowrap" style="min-width: 40px">Photo</th>
                                    @if($companyType === 'UNV')
                                        <th class="text-center text-nowrap">
                                            Faculty
                                        </th>
                                    @endif
                                    <th class="text-center text-nowrap">
                                        {{$companyType == 'UNV' ? 'Program' : 'Medium/Version'}}
                                    </th>
                                    @if($companyType === 'UNV')
                                        <th class="text-center text-nowrap">
                                            Session
                                        </th>
                                    @endif
                                    @if($companyType !== 'UNV')
                                        <th class="text-center text-nowrap">
                                            Class
                                        </th>
                                        <th class="text-center text-nowrap">
                                            Group
                                        </th>
                                        <th class="text-center text-nowrap">
                                            Section
                                        </th>
                                    @endif
                                    <th class="text-center text-nowrap">Applicant</th>
                                    <th class="text-center text-nowrap">Father</th>
                                    <th class="text-center text-nowrap" style="min-width: 80px">
                                        Date of Birth
                                    </th>
                                    <th class="text-center text-nowrap" style="min-width: 95px">
                                        Phone Number
                                    </th>
                                    <th class="text-center text-nowrap" style="min-width: 40px">Gender</th>
                                    <th class="text-center text-nowrap" style="min-width: 40px">Status</th>
                                </tr>
                                </thead>
                                <tbody id="tableBodySection">
                                @foreach($students as $student)
                                    <tr>
                                        <td class="text-center">
                                            <input type="checkbox" name="student_ids[]" value="{{$student?->id}}"
                                                   class="checkSingle">
                                        </td>
                                        <td class="text-center">{{$student?->roll_no}}</td>
                                        <td class="text-center">
                                            <img class="img-responsive mx-auto"
                                                 src="{{$student?->photo ? asset('images/eims/student/'.$student?->photo) : asset('images/eims/passport-size.png')}}"
                                                 alt="{{$student?->name}}"
                                                 style="width: 50px; height: 50px; margin: auto">
                                        </td>
                                        @if($companyType === 'UNV')
                                            <td class="text-center">{{$student?->eims_faculty?->name}}</td>
                                        @endif
                                        <td class="text-center">{{$student?->eims_program?->name}}</td>
                                        @if($companyType === 'UNV')
                                            <td class="text-center">{{$student?->eims_session?->name}}</td>
                                        @endif
                                        @if($companyType !== 'UNV')
                                            <td class="text-center">{{$student?->eims_semester_class?->name}}</td>
                                            <td class="text-center">{{$student?->eims_semester_class_group?->name}}</td>
                                            <td class="text-center">{{$student?->eims_section?->name}}</td>
                                        @endif
                                        <td class="text-center">{{$student?->name}}</td>
                                        <td class="text-center">{{$student?->eims_student_information?->father_name}}</td>
                                        <td class="text-center">{{$student?->dob?->format('d-m-Y')}}</td>
                                        <td class="text-center">{{$student?->phone_number}}</td>
                                        <td class="text-center">{{$student?->gender}}</td>
                                        <td class="text-center">{{$student?->status}}</td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        @endif

                        <br>

                        <div class="right">
                            <button type="submit" class="btn btn-info" id="submitButton">Submit</button>

                            <a class="btn btn-warning" href="{{route('eims_student_course_subject_enroll')}}">Close</a>
                        </div>
                    @endif
                    {{ Form::close() }}
                </div>
            </div>
            <div class="viewTitle"></div>
        </div>
    </div>

    <script>
        'use strict';

        $(document).ready(function () {
            const courseSubjectLabel = '{{$courseSubjectLabel}}';
            let generalCourseSubjects = @json($generalCourseSubjects);
            // if is object convert to array
            generalCourseSubjects = Array.isArray(generalCourseSubjects)
                ? generalCourseSubjects
                : Object.values(generalCourseSubjects);
            let selectiveCompulsoryCourseSubjects = @json($selectiveCompulsoryCourseSubjects);
            selectiveCompulsoryCourseSubjects = Array.isArray(selectiveCompulsoryCourseSubjects)
                ? selectiveCompulsoryCourseSubjects
                : Object.values(selectiveCompulsoryCourseSubjects);
            let selectiveOptionalCourseSubjects = @json($selectiveOptionalCourseSubjects);
            selectiveOptionalCourseSubjects = Array.isArray(selectiveOptionalCourseSubjects)
                ? selectiveOptionalCourseSubjects
                : Object.values(selectiveOptionalCourseSubjects);

            const courseSubjectEnrollForm = $('#courseSubjectEnrollForm');
            const semesterClassField = $('#semester_class_id');
            const semesterClassGroupField = $('#semester_class_group_id');
            const sectionField = $('#section_id');
            const studentField = $('#student_id');
            const checkAll = $('#checkAll');
            const checkSingle = $('.checkSingle');

            semesterClassGroupField.change(function () {
                const data = {
                    semester_class_id: semesterClassField.val(),
                    semester_class_group_id: semesterClassGroupField.val()
                };
                sectionField.empty().append(`<option value="">Loading...</option>`).change();
                $.post('{{route('eims_faculty_department_program_session_semester_section_course_subject_option_change')}}', data, function (response) {
                    let sectionOptions = `<option value="">Select Section</option>`;
                    response.sectionListBySemesterClassGroupChange.forEach(responseElement => {
                        sectionOptions += `<option value="${responseElement.id}">${responseElement.name}</option>`;
                    });
                    sectionField.html(sectionOptions);
                });
            });

            sectionField.change(function () {
                const data = {section_id: sectionField.val()};
                studentField.empty().append(`<option value="">Select Student</option>`).change();
                $.post('{{route('eims_section_students')}}', data, function (response) {
                    response.forEach(responseElement => {
                        studentField.append(`<option value="${responseElement.id}">${responseElement.name}</option>`);
                    });
                });
            });

            function getStudentCourseSubjectIds(studentId) {
                return $.post('{{route('eims_student_course_subject_ids')}}', {student_id: studentId}, null, 'json')
                    .then(response => Array.isArray(response) ? response.map(Number) : []);
            }

            checkAll.change(function () {
                checkSingle.prop('checked', this.checked).change();
            });

            checkSingle.change(function () {
                checkAll.prop('checked', checkSingle.length === checkSingle.filter(':checked').length);
                const row = $(this).closest('tr');
                if (this.checked) {
                    const studentId = $(this).val();
                    getStudentCourseSubjectIds(studentId).then(studentCourseSubjectIds => {
                        let courseSubjectRows = '';
                        if (row.next('.course-subject').length === 0) {
                            if (generalCourseSubjects.length > 0) {
                                courseSubjectRows +=
                                    `<tr class="course-subject">
                                    <td colspan="13">
                                        <div class="form-group row">
                                            <label class="control-label col-sm-2 text-right">General ${courseSubjectLabel}: </label>
                                            <div class="col-sm-10 text-left">
                                                ${generalCourseSubjects.map(subject => `
                                                    <span class="badge badge-info">
                                                        ${subject.name}
                                                        <input type="hidden" name="general_course_subject_ids[${studentId}][]" value="${subject.id}">
                                                    </span>`).join('')}
                                            </div>
                                        </div>
                                    </td>
                                </tr>`;
                            }

                            if (selectiveCompulsoryCourseSubjects.length > 0) {
                                courseSubjectRows += `
                                <tr class="course-subject">
                                    <td colspan="13">
                                        <div class="form-group row">
                                            <label class="control-label col-sm-2 text-right">Selective Compulsory ${courseSubjectLabel} <sup class="text-danger">*</sup>: </label>
                                            <div class="col-sm-10 text-left">
                                                <select name="selective_compulsory_course_subject_ids[${studentId}][]" class="form-control custom-select2" multiple>
                                                    ${selectiveCompulsoryCourseSubjects.map(subject => `
                                                        <option value="${subject.id}" ${studentCourseSubjectIds.includes(subject.id) ? 'selected' : ''}>
                                                            ${subject.name}
                                                        </option>`).join('')}
                                                </select>
                                            </div>
                                        </div>
                                    </td>
                                </tr>`;
                            }

                            if (selectiveOptionalCourseSubjects.length > 0) {
                                courseSubjectRows += `
                                    <tr class="course-subject">
                                        <td colspan="13">
                                            <div class="form-group row">
                                                <label class="control-label col-sm-2 text-right">Selective Optional ${courseSubjectLabel}: </label>
                                                <div class="col-sm-10 text-left">
                                                    <select name="selective_optional_course_subject_ids[${studentId}][]" class="form-control custom-select2" multiple>
                                                        ${selectiveOptionalCourseSubjects.map(subject => `
                                                            <option value="${subject.id}" ${studentCourseSubjectIds.includes(subject.id) ? 'selected' : ''}>
                                                                ${subject.name}
                                                            </option>`).join('')}
                                                    </select>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>`;
                            }
                        }

                        row.after(courseSubjectRows);
                        $('.custom-select2').select2();
                    });
                } else {
                    row.next('.course-subject').remove();
                    row.next('.course-subject').remove();
                    row.next('.course-subject').remove();
                }
            });

            courseSubjectEnrollForm.submit(function (e) {
                e.preventDefault();

                const formData = new FormData(courseSubjectEnrollForm[0]);

                // Append additional fields
                formData.append('program_id', {{request()->fillProgramId ?? $student?->program_id ?? null}});
                formData.append('session_id', {{request()->fillSessionId ?? $student?->session_id ?? null}});
                formData.append('semester_class_id', {{request()->fillSemesterClassId ?? $student?->semester_class_id ?? null}});
                formData.append('semester_class_group_id', {{request()->fillSemesterClassGroupId ?? $student?->semester_class_group_id ?? null}});
                // Add more fields as needed

                $.ajax({
                    type: 'post',
                    url: '{{route('eims_student_course_subject_enroll_store')}}',
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: 'json',
                    beforeSend: () => $('.errormsg').remove(),
                    success: function (_response) {
                        if (_response.responseStatus === 'success') {
                            Swal.fire({
                                icon: _response.responseStatus,
                                title: _response.responseTitle,
                                text: _response.responseText,
                                showConfirmButton: false,
                                timer: 1500
                            });
                            setTimeout(() => window.location.href = "{{ route('eims_student_course_subject_enroll') }}", 1000);
                        }
                    },
                    error: function (_response) {
                        const {responseTitle, responseText, errors} = _response.responseJSON;
                        if (errors) {
                            Swal.fire({
                                icon: 'error',
                                title: responseTitle,
                                text: responseText,
                                showConfirmButton: true,
                            });
                            $.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('.'));
                                    // <span class="institute_type_error"></span>
                                    $($(`.${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>');
                                }
                            });
                        }
                    }
                });
            });
        });
    </script>

@endsection