@extends('layouts.admin.app')
@section('title', __('trans.exam.add_new') . ' To lecture: ' . $lecture->title)

@section('content')
    <div class="card">

        <h5 class="card-header">

            <a href="{{ url('admin/lectures') }}" class="btn rounded-pill btn-label-primary">
                <i class="ti me-2 ti-arrow-forward-up"></i> {{ __('trans.lecture.title') }}
            </a>
            @yield('title')
        </h5>

        <div class="card-body">
            <form action="{{ url('admin/exams') }}" method="POST">@csrf

                <input type="hidden" name="lecture_id" value="{{ $lecture->id }}">

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label">{{ __('trans.exam.name') }} <b class="text-danger">*</b></label>
                        <input type="text" class="form-control" required name="name"
                            value="{{ old('name', $exam->name ?? null) }}" placeholder="{{ __('trans.exam.name') }}" />
                    </div>

                    <div class="col-md-3 mb-3">
                        <label class="form-label">{{ __('trans.exam.status') }}</label>
                        <select name="status" class="form-select" required>
                            <option value="Show" @selected(old('status', $exam->status ?? null) == 'Show')>Show</option>
                            <option value="Hide" @selected(old('status', $exam->status ?? null) == 'Hide')>Hide</option>
                        </select>
                    </div>

                    <div class="col-md-3 mb-3">
                        <label class="form-label">{{ __('trans.exam.retake') }}</label>
                        <select name="retake" class="form-select" required>
                            <option value="1" @selected(old('retake', $exam->retake ?? null) == '1')>Yes</option>
                            <option value="0" @selected(old('retake', $exam->retake ?? null) == '0')>No</option>
                        </select>
                    </div>
                </div>

                <div class="rows"></div>



                <div class="row">
                    <div class="col-md-3">
                        <span class="btn btn-info add-question">Add New Question</span>
                    </div>
                    <div class="col-md-12 mt-5">
                        <button class="btn btn-primary btn-create w-100">{{ __('trans.save') }}</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection
@section('js')


    <script>
        let index = 1;

        $('.add-question').on('click', function() {
            console.log($('.question-block').length);
            if ($('.question-block').length >= 99) {
                alert('Max questions per exam is 100');
                return;
            }
            let title = `Question ${index}`;
            $('.rows').append(`
        <div class="question-block" data-question-index="${index}">

            <div class="divider divider-success">
                <div class="divider-text text-success">${title}</div>
            </div>

            <div class="col-md-6 mb-3">
                <label>${title}</label>
                <input type="text" name="questions[${index}][title]" class="form-control" />
            </div>

            <div class="col-md-3 mb-2">
                <label>&nbsp;</label><br>
                <span class="btn btn-danger delete-ques" data-id="${index}">Delete ${title}</span>
            </div>

            <div class="options">

                <!-- Option 1 -->
                <div class="row mb-2">
                    <div class="col-md-4">
                        <input type="text" name="questions[${index}][options][]" class="form-control" placeholder="Option 1" />
                    </div>
                    <div class="col-md-2">
                        <select name="questions[${index}][is_true][]" class="form-select">
                            <option value="0">false</option>
                            <option value="1">true</option>
                        </select>
                    </div>
                </div>

                <!-- Option 2 -->
                <div class="row mb-2">
                    <div class="col-md-4">
                        <input type="text" name="questions[${index}][options][]" class="form-control" placeholder="Option 2" />
                    </div>
                    <div class="col-md-2">
                        <select name="questions[${index}][is_true][]" class="form-select">
                            <option value="0">false</option>
                            <option value="1">true</option>
                        </select>
                    </div>
                </div>

            </div>

            <div class="col-md-4 mb-3">
                <button type="button" class="btn btn-info btn-sm add-new-option" data-question-index="${index}">
                    Add New Option
                </button>
            </div>

        </div>
    `);
            index++;
        });

        $(document).on('click', '.add-new-option', function() {
            let questionIndex = $(this).data('question-index');
            let questionBlock = $(this).closest('.question-block');
            let optionsWrapper = questionBlock.find('.options');

            let currentCount = optionsWrapper.find('.row').length + 1;

            if (currentCount - 1 > 5) {
                alert('Max options per question is 6');
                return;
            }

            let optionHTML = `
        <div class="row mb-2">
            <div class="col-md-4">
                <input type="text" name="questions[${questionIndex}][options][]" class="form-control" placeholder="Option ${currentCount}" />
            </div>
            <div class="col-md-2">
                <select name="questions[${questionIndex}][is_true][]" class="form-select">
                    <option value="0">false</option>
                    <option value="1">true</option>
                </select>
            </div>
            <div class="col-md-2">
                <button type="button" class="btn btn-sm btn-danger delete-option">Delete</button>
            </div>
        </div>
    `;

            optionsWrapper.append(optionHTML);
        });

        $(document).on('click', '.delete-option', function() {
            let optionRow = $(this).closest('.row');
            let index = optionRow.index();

            if (index <= 1) {
                alert("You can't delete the default first 2 options.");
                return;
            }

            optionRow.remove();
        });

        $(document).on('click', '.delete-ques', function() {
            console.log($('.question-block').length);

            if ($('.question-block').length <= 1) {
                alert('Exam must have at least one question.');
                return;
            }

            if (confirm(`are you sure to delete question ${$(this).data('id')}?`)) {
                $(this).parent().parent().remove();
                index -= 1;
            }

        });
    </script>

@endsection