@extends('layouts.master')

@section('title', __('exam.exam_result'))

@section('content_title', __('exam.add_exam_results'))

@section('content_summary', 'add exam result summary')
@section('content_taskbar')
    <li class="nav-item">
        <a href="{{ route('exam_results.index') }}" class="nav-link">
            <i class="nav-link-icon pe-7s-plus"></i>
            <span>{{ __('common.list') }}</span>
        </a>
    </li>
@endsection
@section('main_content')
    <div class="main-card mb-3 card">
        <div class="card-body">
            <form action="{{ route('exam_results.store') }}" id="exam_result_form" method="post">
                <div class="row mb-3 main_container">
                    <div class="col col-md-6 mb-3">
                        <label for="" class="form-label">exam_schedule_id</label>
                        <select required name="exam_schedule_id" class="multiselect-dropdown form-control exam_schedule_id">
                            @foreach ($exam_schedule_list as $key => $value)
                                <option value="{{ $key }}">{{ $value }}</option>
                            @endforeach
                        </select>

                    </div>
                    <div class="col col-md-6 mb-3">
                        <label for="" class="form-label">section_id</label>
                        <select required name="section_id" class="multiselect-dropdown form-control section_id">
                            <option>Please Select</option>
                        </select>

                    </div>
                    <div class="col col-md-6 mb-3">
                        <label for="" class="form-label">user_id</label>
                        <select name="user_id" required class="multiselect-dropdown form-control user_id">
                            @foreach ($user_id_list as $key => $value)
                                <option value="{{ $key }}">{{ $value }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col col-md-6 mb-3">
                        {!! html()->label(__('core.note') . ':', 'note') !!}
                        {!! html()->textarea('note')->class('form-control')->id('note')->value(old('note')) !!} <!-- Automatically retain old input in case of validation errors -->
                    </div>
                    <div class="form-group">
                        {!! html()->checkbox('status', true)->id('status')->class('input-icheck status') !!}
                        {!! html()->label('Active', 'status') !!}
                    </div>
                    {{-- <span class="row parent_container">
                    <div class="col col-md-4 mb-3 subject_id_div">
                        <label for="" class="form-label">subject_id</label>
                        <select class="multiselect-dropdown form-control subject_id">

                        </select>
                    </div>
                    <div class="col col-md-4 mb-3 child_div">
                        <label for="" class="form-label">Exam_types</label>
                        <select class="multiselect-dropdown form-control exam_type_id">

                        </select>
                    </div>
                    <div class="col col-md-4 mb-3 child_div">
                        <label for="" class="form-label">obtain_mark</label>
                        <select class="multiselect-dropdown form-control obtain_mark">

                        </select>
                    </div>
                    <div class="col col-md-4 mb-3 child_div">
                    </div>
                </span> --}}

                </div>
                <button class="btn btn-primary" type="submit">{{ __('messages.save') }}</button>
            </form>

        </div>
    </div>
@endsection

@push('script')
    <script>
        $(document).ready(function() {

            // ajax form submition

            $(document).on('submit', 'form#exam_result_form', function(e) {
                e.preventDefault();
                $(this).find('button[type="submit"]').attr('disabled', false);
                var data = $(this).serialize();

                $.ajax({
                    method: $(this).attr('method'),
                    url: $(this).attr("action"),
                    dataType: "json",
                    data: data,
                    success: function(result) {
                        console.log(result);
                        if (result.success == true) {
                            $("#exam_result_form").parent().closest('.modal').modal("hide");
                            toastr.success(result.msg);
                            exam_table.ajax.reload();
                        } else {
                            toastr.error(result.msg);
                            if (result.details) {
                                if (result.details.exam_name) {
                                    document.getElementById("exam_name_msg").innerText = result
                                        .details.exam_name[0];
                                } else {
                                    document.getElementById("exam_name_msg").innerText = '';
                                }
                            }
                        }
                    },
                    error: function(response) {
                        // Clear previous error messages
                        $("#exam_result_form").find('.text-danger').remove();

                        if (response.status === 422) {
                            // Validation errors
                            var errors = response.responseJSON.errors;
                            for (var field in errors) {
                                // Find the input field and add the error message
                                let key = field;
                                let parts = key.split('.');
                                let input_name = parts[0]; // "input field name value"
                                let index = parts[1];
                                if (index) {
                                    var $input = $('[name="' + input_name + '[]"]')[index];
                                    let span = document.createElement("span");
                                    span.classList.add("text-danger");
                                    span.innerText = errors[field][0];
                                    $input.parentElement.appendChild(span);
                                } else {
                                    var $input = $('[name="' + field + '"]');
                                    let span = document.createElement("span");
                                    span.classList.add("text-danger");
                                    span.innerText = errors[field][0];
                                    $input[0].parentElement.appendChild(span);
                                }
                                toastr.error(errors[field][0]);

                            }
                        } else {
                            toastr.error('An unexpected error occurred.');
                        }

                        // Re-enable submit button
                    }
                });
            });






            $(".exam_schedule_id").on("change", function(e) {
                var exam_schedule_id_value = e.target.value;
                var $select_section_id = $(".section_id");
                var $select_user_id = $(".user_id");
                var html = '';

                if ($(".parent_container")) {
                    $(".parent_container").remove();
                }
                var $main_container = $(".main_container");
                $select_section_id.empty();
                $select_section_id.append($('<option></option>').attr('value', '').text(
                    'Please Select'));
                $select_user_id.find('option:first').prop('selected', true);

                if (exam_schedule_id_value) {
                    $.ajax({
                        method: "POST",
                        url: "{{ route('exam_results.check_section_by_exam_schedule_id') }}",
                        dataType: "json",
                        data: {
                            "exam_schedule_id": exam_schedule_id_value
                        },
                        success: function(result) {
                            console.log(result);

                            if (result && Object.keys(result).length) {
                                $select_section_id.removeAttr("disabled");
                                updateDropdown($select_section_id, result, true);
                            } else {
                                $select_section_id.attr("disabled", true);
                            }
                        }
                    })

                    $.ajax({
                        method: "POST",
                        url: "{{ route('exam_results.get_subjects_by_exam_schedule_id') }}",
                        dataType: "json",
                        data: {
                            "exam_schedule_id": exam_schedule_id_value
                        },
                        success: function(result) {
                            if (result && result.length > 0) {
                                result.forEach(ele1 => {
                                    html += `<span class="row parent_container"><div class="col col-md-4 mb-3 subject_id_div"><label for="" class="form-label">subject_id</label><select name="subject_id[${ele1.subject_id}]" required class="multiselect-dropdown form-control subject_id"><option value="${ele1.subject_id}">${ele1.details[0].get_subject
[0].subject} (${ele1.details[0].get_subject
[0].subject_code})</option></select></div>`;
                                    ele1.details.forEach(ele2 => {
                                        html +=
                                            `<div class="col col-md-4 mb-3 child_div"><label for="" class="form-label">Exam_types</label><select required name="exam_type_id[${ele1.subject_id}][]" class="multiselect-dropdown form-control exam_type_id"><option value="${ele2.exam_type_id}">${ele2.get_exam_type[0].exam_type} mark - ${ele2.exam_mark}</option></select></div><div class="col col-md-4 mb-3 child_div"><label for="" class="form-label">obtain_mark</label><input required type="number" max="${ele2.exam_mark}" name="obtain_mark[${ele1.subject_id}][${ele2.exam_type_id}]" class="multiselect-dropdown form-control obtain_mark"></div><div class="col col-md-4 mb-3 child_div"></div>`;
                                    })
                                    html += `</span>`;

                                });
                                $main_container.append(html);
                                html = '';

                                // document.getElementsByClassName("main_container")[0].innerHtml +=html;
                            }
                        }
                    })
                }
            })



            function updateDropdown($select, data, selected) {
                $select.empty(); // Clear the existing options
                // Add default option
                $select.append($('<option></option>').attr('value', '').text(
                    'Please Select'));
                // Add the new options
                $.each(data, function(key, value) {
                    $select.append($('<option></option>').attr('value', key).text(value));
                });

                if (selected) {
                    // Select the last option
                    $select.find('option:first').prop('selected', true);
                }
            }
        })
    </script>
@endpush