@extends('layouts.admin')

@section('content')
    <div class="container-fluid">
        @include('elements.admin-breadcrumb')

        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        @include('elements.alert-error')

                        <form
                            action="{{ isset($question) ? route('admin.question.update', $question->id) : route('admin.question.store') }}"
                            id="questionfrm" method="POST" class="form-horizontal" enctype="multipart/form-data"
                            novalidate="novalidate">
                            @csrf
                            @if (isset($question))
                                @method('PUT')
                            @endif
                            @if (isset($question))
                                <input type="hidden" name="id" value="{{ encrypt($question->id) }}">
                            @endif


                            <ul class="nav nav-tabs mb-3" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <a href="#master" data-bs-toggle="tab" aria-expanded="false" class="nav-link active"
                                        aria-selected="true" role="tab">
                                        General
                                    </a>
                                </li>
                                @foreach (config('translatable.locales') as $locale => $language)
                                    <li class="nav-item" data-target-form="#profileForm">

                                        <a href="#{{ $locale }}" data-bs-toggle="tab" aria-expanded="true"
                                            class="nav-link" aria-selected="false" role="tab" tabindex="-1">

                                            {{ ucfirst($language) }}
                                        </a>
                                    </li>
                                @endforeach

                            </ul>
                            <div class="tab-content mb-0 b-0">
                                <div class="tab-pane active show" id="master">
                                    <div class="row mb-3">
                                        <div class="col-md-4">
                                            <label class="form-label" for="code">Question Type: <span
                                                    class="text-danger">*</span></label>
                                            @if (isset($question))
                                                <input type="hidden" name="question_type"
                                                    value="{{ $question->question_type }}">
                                            @endif
                                            <select class="form-select" id="question_type" name="question_type"
                                                {{ isset($question) ? 'disabled' : '' }} aria-invalid="false">
                                                <option value="">- Select -</option>
                                                <option value="1"
                                                    {{ old('question_type', $question->question_type ?? '') == '1' ? 'selected' : '' }}>
                                                    Audio Upload</option>
                                                <option value="2"
                                                    {{ old('question_type', $question->question_type ?? '') == '2' ? 'selected' : '' }}>
                                                    Descriptive</option>
                                                <option value="3"
                                                    {{ old('question_type', $question->question_type ?? '') == '3' ? 'selected' : '' }}>
                                                    File Upload</option>
                                                <option value="4"
                                                    {{ old('question_type', $question->question_type ?? '') == '4' ? 'selected' : '' }}>
                                                    Image Upload</option>
                                                <option value="5"
                                                    {{ old('question_type', $question->question_type ?? '') == '5' ? 'selected' : '' }}>
                                                    Link</option>
                                                <option value="8"
                                                    {{ old('question_type', $question->question_type ?? '') == '8' ? 'selected' : '' }}>
                                                    MCQ</option>
                                                <option value="6"
                                                    {{ old('question_type', $question->question_type ?? '') == '6' ? 'selected' : '' }}>
                                                    PDF Upload</option>
                                                <option value="7"
                                                    {{ old('question_type', $question->question_type ?? '') == '7' ? 'selected' : '' }}>
                                                    Video Upload</option>

                                            </select>
                                        </div>
                                        <div class="col-md-4 question-type-1 @if (old('question_type', isset($question->question_type) ? $question->question_type : '') != '1') hide @endif">
                                            <label class="form-label">Select Audio:<span
                                                    class="text-danger">*</span></label>
                                            <div class="controls">
                                                <div class="fileupload fileupload-new" data-provides="fileupload">
                                                    <div class="input-append">
                                                        <div class="uneditable-input">
                                                            <i class="icon-file fileupload-exists"></i>
                                                            <span class="fileupload-preview"></span>
                                                        </div>


                                                        @if (isset($question->question_type) &&
                                                                $question->question_type == '1' &&
                                                                (isset($question->question_value) &&
                                                                    $question->question_value != '' &&
                                                                    \File::exists(public_path($question->question_value))))
                                                            <input type="file" name="question_type_1"
                                                                class="form-control default question_type_1 file-exist"
                                                                accept="audio/*">
                                                        @else
                                                            <input type="file" name="question_type_1"
                                                                class="form-control default question_type_1"
                                                                accept="audio/*">
                                                        @endif


                                                    </div>
                                                </div>
                                                @if (isset($question->question_type) &&
                                                        $question->question_type == '1' &&
                                                        (isset($question->question_value) &&
                                                            $question->question_value != '' &&
                                                            \File::exists(public_path($question->question_value))))
                                                    {{-- <iframe src="{{ URL::asset('public') }}{{ $question->question_value }}"></iframe> --}}
                                                    <a target="_blank"
                                                        href="{{ URL::asset('') }}{{ $question->question_value }}">View
                                                        File</a>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="col-md-4 question-type-3 @if (old('question_type', isset($question->question_type) ? $question->question_type : '') != '3') hide @endif">
                                            <label class="form-label">Select File<span class="text-danger">*</span></label>
                                            <div class="controls">
                                                <div class="fileupload fileupload-new" data-provides="fileupload">
                                                    <div class="input-append">
                                                        <div class="uneditable-input">
                                                            <i class="icon-file fileupload-exists"></i>
                                                            <span class="fileupload-preview"></span>
                                                        </div>

                                                        @if (isset($question->question_type) &&
                                                                $question->question_type == '3' &&
                                                                (isset($question->question_value) &&
                                                                    $question->question_value != '' &&
                                                                    \File::exists(public_path($question->question_value))))
                                                            <input type="file" name="question_type_3"
                                                                class="form-control default question_type_3 file-exist"
                                                                accept="file/*">
                                                        @else
                                                            <input type="file" name="question_type_3"
                                                                class="form-control default question_type_3"
                                                                accept="file/*">
                                                        @endif

                                                    </div>
                                                </div>
                                                @if (isset($question->question_type) &&
                                                        $question->question_type == '3' &&
                                                        (isset($question->question_value) &&
                                                            $question->question_value != '' &&
                                                            \File::exists(public_path($question->question_value))))
                                                    {{-- <iframe src="{{ URL::asset('public') }}{{ $question->question_value }}"></iframe> --}}
                                                    <a target="_blank"
                                                        href="{{ URL::asset('') }}{{ $question->question_value }}">View
                                                        File</a>
                                                @endif
                                            </div>
                                        </div>
                                        <div
                                            class="col-md-4  question-type-4 @if (old('question_type', isset($question->question_type) ? $question->question_type : '') != '4') hide @endif">
                                            <label class="form-label">Select Image<span class="text-danger">*</span></label>
                                            <div class="controls">
                                                <div class="fileupload fileupload-new" data-provides="fileupload">
                                                    <div class="input-append">
                                                        <div class="uneditable-input">
                                                            <i class="icon-file fileupload-exists"></i>
                                                            <span class="fileupload-preview"></span>
                                                        </div>

                                                        @if (isset($question->question_type) &&
                                                                $question->question_type == '4' &&
                                                                (isset($question->question_value) &&
                                                                    $question->question_value != '' &&
                                                                    \File::exists(public_path($question->question_value))))
                                                            <input type="file" name="question_type_4"
                                                                class="form-control default question_type_4 file-exist"
                                                                accept="image/*">
                                                        @else
                                                            <input type="file" name="question_type_4"
                                                                class="form-control default question_type_4"
                                                                accept="image/*">
                                                        @endif

                                                    </div>
                                                </div>
                                                @if (isset($question->question_type) &&
                                                        $question->question_type == '4' &&
                                                        (isset($question->question_value) &&
                                                            $question->question_value != '' &&
                                                            \File::exists(public_path($question->question_value))))
                                                    <a target="_blank"
                                                        href="{{ URL::asset('') }}{{ $question->question_value }}">View
                                                        File</a>
                                                @endif
                                            </div>
                                        </div>
                                        <div
                                            class="col-md-4 question-type-5 @if (old('question_type', isset($question->question_type) ? $question->question_type : '') != '5') hide @endif">
                                            <label class="form-label">Question Link<span
                                                    class="text-danger">*</span></label>
                                            <div class="controls">
                                                <input type="url" name="question_type_5"
                                                    class="span6 form-control question_type_5"placeholder="Question Link"
                                                    value="{{ old(
                                                        'question_type_5',
                                                        isset($question->question_type) &&
                                                        $question->question_type == 5 &&
                                                        (isset($question->question_value) && $question->question_value != '')
                                                            ? $question->question_value
                                                            : '',
                                                    ) }}">
                                            </div>
                                        </div>
                                        <div
                                            class="col-md-4 question-type-6 @if (old('question_type', isset($question->question_type) ? $question->question_type : '') != '6') hide @endif">
                                            <label class="form-label">Select PDF<span class="text-danger">*</span></label>
                                            <div class="controls">
                                                <div class="fileupload fileupload-new" data-provides="fileupload">
                                                    <div class="input-append">
                                                        <div class="uneditable-input">
                                                            <i class="icon-file fileupload-exists"></i>
                                                            <span class="fileupload-preview"></span>
                                                        </div>

                                                        @if (isset($question->question_type) &&
                                                                $question->question_type == '6' &&
                                                                (isset($question->question_value) &&
                                                                    $question->question_value != '' &&
                                                                    \File::exists(public_path($question->question_value))))
                                                            <input type="file" name="question_type_6"
                                                                class="form-control default question_type_6 file-exist"
                                                                accept="application/pdf">
                                                        @else
                                                            <input type="file" name="question_type_6"
                                                                class="form-control default question_type_6"
                                                                accept="application/pdf">
                                                        @endif

                                                    </div>
                                                </div>
                                                @if (isset($question->question_type) &&
                                                        $question->question_type == '6' &&
                                                        (isset($question->question_value) &&
                                                            $question->question_value != '' &&
                                                            \File::exists(public_path($question->question_value))))
                                                    <a target="_blank"
                                                        href="{{ URL::asset('') }}{{ $question->question_value }}">View
                                                        File</a>
                                                @endif
                                            </div>
                                        </div>
                                        <div
                                            class="col-md-4 question-type-7 @if (old('question_type', isset($question->question_type) ? $question->question_type : '') != '7') hide @endif">
                                            <label class="form-label">Select Video<span
                                                    class="text-danger">*</span></label>
                                            <div class="controls">
                                                <div class="fileupload fileupload-new" data-provides="fileupload">
                                                    <div class="input-append">
                                                        <div class="uneditable-input">
                                                            <i class="icon-file fileupload-exists"></i>
                                                            <span class="fileupload-preview"></span>
                                                        </div>

                                                        @if (isset($question->question_type) &&
                                                                $question->question_type == '7' &&
                                                                (isset($question->question_value) &&
                                                                    $question->question_value != '' &&
                                                                    \File::exists(public_path($question->question_value))))
                                                            <input type="file" name="question_type_7"
                                                                class="form-control default question_type_7 file-exist"
                                                                accept="video/*">
                                                        @else
                                                            <input type="file" name="question_type_7"
                                                                class="form-control default question_type_7"
                                                                accept="video/*">
                                                        @endif

                                                    </div>
                                                </div>
                                                @if (isset($question->question_type) &&
                                                        $question->question_type == '7' &&
                                                        (isset($question->question_value) &&
                                                            $question->question_value != '' &&
                                                            \File::exists(public_path($question->question_value))))
                                                    <a target="_blank"
                                                        href="{{ URL::asset('') }}{{ $question->question_value }}">View
                                                        File</a>
                                                @endif
                                            </div>
                                        </div>

                                        <div class="col-md-4">
                                            <label class="form-label" for="code">Answer Type: <span
                                                    class="text-danger">*</span></label>
                                            @if (isset($question))
                                                <input type="hidden" name="answer_type"
                                                    value="{{ $question->answer_type }}">
                                            @endif
                                            <select class="form-select" id="answer_type" name="answer_type"
                                                {{ isset($question) ? 'disabled' : '' }}>
                                                <option value="">- Select -</option>
                                                <option value="1"
                                                    {{ old('answer_type', $question->answer_type ?? '') == '1' ? 'selected' : '' }}>
                                                    Audio Upload</option>
                                                <option value="2"
                                                    {{ old('answer_type', $question->answer_type ?? '') == '2' ? 'selected' : '' }}>
                                                    Descriptive</option>
                                                <option value="3"
                                                    {{ old('answer_type', $question->answer_type ?? '') == '3' ? 'selected' : '' }}>
                                                    File Upload</option>
                                                <option value="4"
                                                    {{ old('answer_type', $question->answer_type ?? '') == '4' ? 'selected' : '' }}>
                                                    Image Upload</option>
                                                <option value="5"
                                                    {{ old('answer_type', $question->answer_type ?? '') == '5' ? 'selected' : '' }}>
                                                    Link</option>
                                                <option value="8"
                                                    {{ old('answer_type', $question->answer_type ?? '') == '8' ? 'selected' : '' }}>
                                                    MCQ</option>
                                                <option value="6"
                                                    {{ old('answer_type', $question->answer_type ?? '') == '6' ? 'selected' : '' }}>
                                                    PDF Upload</option>
                                                <option value="7"
                                                    {{ old('answer_type', $question->answer_type ?? '') == '7' ? 'selected' : '' }}>
                                                    Video Upload</option>

                                            </select>
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <div class="col-md-2">
                                            <label class="form-label" for="Marks">Marks: <span
                                                    class="text-danger">*</span></label>
                                            <input type="text" class="form-control" id="question_mark"
                                                placeholder="Marks" name="question_mark"
                                                value="{{ old('question_mark', $question ? $question->question_mark : '') }}"
                                                required>
                                        </div>



                                        <div class="col-md-2">

                                            <label class="form-label" for="status">Status:</label>
                                            <div class="form-check form-switch">
                                                <input type="checkbox" class="form-check-input" id="customSwitch1"
                                                    name="status" value="1"
                                                    {{ old('status', $question ? $question->status : 1) == 1 ? 'checked' : '' }}>
                                                <label class="form-check-label" for="customSwitch1">Active</label>



                                            </div>
                                        </div>
                                    </div>



                                </div>

                                @foreach (config('translatable.locales') as $locale => $language)
                                    <div class="tab-pane fade" id="{{ $locale }}">
                                        <div class="row mb-3">
                                            <div class="col-md-4">
                                                <label class="form-label" for="question_title">Question Title: <span
                                                        class="text-danger">*</span></label>
                                                <input type="text" class="form-control"
                                                    id="question_title_{{ $language }}"
                                                    name="question_title[{{ $language }}]"
                                                    placeholder="Question Title"
                                                    value="{{ old('question_title.' . $language, $question ? $question->getTranslation('question_title', $language) : '') }}"
                                                    >
                                            </div>
                                            <div
                                                class="col-md-4 question-type-2 @if (old('question_type', isset($question->question_type) ? $question->question_type : '') != '2') hide @endif">
                                                <label class="form-label">Question Description: <span
                                                        class="text-danger">*</span></label>
                                                <div class="controls">
                                                    <textarea placeholder="Question Description" class="span6 form-control question_type_2"
                                                        id="question_type_2{{ $language }}" name="question_type_2[{{ $language }}]">{{ old('question_value' . $language, $question ? $question->getTranslation('question_value', $language) : '') }}</textarea>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <div class="col-md-12 answer-type-8 mcq-options @if (old('answer_type',isset($question->answer_type) ? $question->answer_type : '') != '8') hide @endif">
                                                <label class="form-label">Select MCQ</label>
                                                <div class="row mb-3">
                                                    @for ($i = 1; $i <= 4; $i++)
                                                        @php

                                                            $is_correct = isset($question->mcq_options[$i - 1])
                                                                ? $question->mcq_options[$i - 1]->is_correct
                                                                : '';
                                                            $option_title = isset($question->mcq_options[$i - 1])
                                                                ? $question->mcq_options[$i - 1]->getTranslation(
                                                                    'title',
                                                                    $language,
                                                                )
                                                                : '';

                                                        @endphp

                                                        <div class="col-md-3">
                                                            <div class="input-group flex-nowrap">
                                                                @if ($language == 'en')
                                                                    <span class="input-group-text"
                                                                        id="basic-addon1"><input type="radio"
                                                                            name="questions[is_correct]"
                                                                            id="is_correct_{{ $i }}"
                                                                            value="{{ $i }}"
                                                                            {{ $is_correct == 1 ? 'checked' : '' }}
                                                                            class="form-check-input"></span>
                                                                @else
                                                                    <span class="input-group-text"
                                                                        id="basic-addon1"></span>
                                                                @endif
                                                                <input type="text" class="form-control"
                                                                    name="questions[answer][{{ $i }}][{{ $language }}]"
                                                                    id="questions[answer][{{ $i }}]"
                                                                    value="{{ old('questions' . $language, $option_title) }}"
                                                                    placeholder="Option {{ $i }}">
                                                            </div>


                                                        </div>
                                                    @endfor
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                @endforeach
                            </div>

                            <div class="mb-3 text-end">
                                <button class="btn btn-primary mx-2" type="submit" name="submit"
                                    value="add">{{ isset($question) ? 'Update' : 'Save' }}</button>
                                <a href="{{ route('admin.question.index') }}" class="btn btn-outline-danger">Cancel</a>
                            </div>


                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('scripts')
    <script src="{{ asset('assets/vendor/validation/jquery-validation.js') }}"></script>
    <script>
        $(document).ready(function() {
            // Function to update validation rules based on question and answer types
            function updateValidationRules() {
                var questionType = $('select[name="question_type"]').val();
                var answerType = $('select[name="answer_type"]').val();
                var validator = $("#questionfrm").validate();

                // Remove all previous question type validations
                for (let i = 1; i <= 8; i++) {
                    validator.settings.rules['question_type_' + i] = undefined;
                    validator.settings.messages['question_type_' + i] = undefined;
                }

                // Add validation for the selected question type
                if (questionType) {
                    validator.settings.rules['question_type_' + questionType] = {
                        required: true
                    };

                    // Customize error messages based on question type
                    switch (questionType) {
                        case '1':
                            validator.settings.messages['question_type_1'] = {
                                required: 'Please upload an audio file'
                            };
                            break;
                        case '2':
                            // For descriptive type, we validate the textarea in each language tab
                            @foreach (config('translatable.locales') as $locale => $language)
                                validator.settings.rules['question_type_2[' + '{{ $language }}' + ']'] = {
                                    required: true
                                };
                                validator.settings.messages['question_type_2[' + '{{ $language }}' + ']'] = {
                                    required: 'Please enter question description'
                                };
                            @endforeach
                            break;
                        case '3':
                            validator.settings.messages['question_type_3'] = {
                                required: 'Please upload a file'
                            };
                            break;
                        case '4':
                            validator.settings.messages['question_type_4'] = {
                                required: 'Please upload an image'
                            };
                            break;
                        case '5':
                            validator.settings.rules['question_type_5'] = {
                                required: true,
                                url: true
                            };
                            validator.settings.messages['question_type_5'] = {
                                required: 'Please enter a URL',
                                url: 'Please enter a valid URL'
                            };
                            break;
                        case '6':
                            validator.settings.messages['question_type_6'] = {
                                required: 'Please upload a PDF file'
                            };
                            break;
                        case '7':
                            validator.settings.messages['question_type_7'] = {
                                required: 'Please upload a video file'
                            };
                            break;
                        case '8':
                            // MCQ validation is handled separately
                            break;
                    }
                }

                // Update MCQ options validation based on answer type
                if(answerType == '8'){
                    console.log("test");

                    for (let i = 1; i <= 4; i++) {
                        validator.settings.rules['questions[answer][' + i + '][en]'] = undefined;
                        validator.settings.messages['questions[answer][' + i + '][en]'] = undefined;

                        if (answerType == '8') {
                            validator.settings.rules['questions[answer][' + i + '][en]'] = {
                                required: true
                            };
                            validator.settings.messages['questions[answer][' + i + '][en]'] = {
                                required: 'Option ' + i + ' is required'
                            };
                        }
                    }
                }
            }

            // Initialize validation
            $("#questionfrm").validate({
                errorPlacement: function(error, element) {
                    if (element.attr("type") == "file") {
                        $(element).parents('.fileupload').append(error);
                    } else {
                        error.addClass('text-danger');
                        if (element.closest('.input-group').length > 0) {
                            error.insertAfter(element.closest('.input-group'));
                        } else {
                            error.insertAfter(element);
                        }
                    }
                },
                ignore: [],
                rules: {
                    question_type: {
                        required: true
                    },
                    answer_type: {
                        required: true
                    },
                    "question_title[en]": {
                        required: true,
                        minlength: 3
                    },
                    question_mark: {
                        required: true,
                        number: true,
                        maxlength: 5
                    }
                    // Removed the static MCQ options validation here
                },
                messages: {
                    question_type: {
                        required: 'Please select question type'
                    },
                    answer_type: {
                        required: 'Please select answer type'
                    },
                    "question_title[en]": {
                        required: 'Please enter question title',
                        minlength: 'Your question title must be at least 3 characters long',
                    },
                    question_mark: {
                        required: 'Please enter question mark',
                        number: 'Please enter a valid number',
                        maxlength: "Question mark cannot be more than 5 characters long"
                    }
                    // Removed the static MCQ options messages here
                },
                invalidHandler: function(event, validator) {
                    if (validator.errorList.length) {
                        var firstError = validator.errorList[0].element;
                        var tabPane = $(firstError).closest('.tab-pane');
                        if (tabPane.length) {
                            var tabId = tabPane.attr('id');
                            $('a[href="#' + tabId + '"]').tab('show');
                        }
                    }
                },
                errorClass: "invalid-feedback",
                highlight: function(element) {
                    $(element).addClass('is-invalid');
                },
                unhighlight: function(element) {
                    $(element).removeClass('is-invalid');
                },
                submitHandler: function(form) {
                    $('#error_messages').hide();
                    form.submit();
                }
            });

            // Update validation when question type changes
            $('select[name="question_type"]').on('change', function() {
                var selected = $(this).val();

                // Show/hide fields
                for (let i = 1; i <= 8; i++) {
                    if (selected == i) {
                        $('.question-type-' + i).show();
                    } else {
                        $('.question-type-' + i).hide();
                    }
                }

                // Update validation rules
                updateValidationRules();
            });

            // Update validation when answer type changes
            $('select[name="answer_type"]').on('change', function() {
                var selected = $(this).val();
                for (let i = 1; i <= 8; i++) {
                    if (selected == i) {
                        $('.answer-type-' + i).show();
                    } else {
                        $('.answer-type-' + i).hide();
                    }
                }

                // Update validation rules
                updateValidationRules();
            });

            // Initialize validation rules based on current question and answer types (for edit mode)
            if ($('select[name="question_type"]').val()) {
                updateValidationRules();
            }
        });
    </script>
@endsection