@extends('admin.layouts.app')

@section('title', 'Add Questions')

@section('content')

    <div class="container-fluid">

        <div class="py-3 d-flex justify-content-between align-items-center">

            <div>
                <h4 class="fs-18 fw-semibold mb-1">Add Questions</h4>
                <p class="text-muted mb-0">
                    Select contest and add multiple questions before saving.
                </p>
            </div>

            <a href="{{ route('admin.questions.index') }}" class="btn btn-light">
                <i class="mdi mdi-arrow-left"></i> Back
            </a>

        </div>

        <form id="saveQuestionsForm" action="{{ route('admin.questions.store') }}" method="POST">

            @csrf

            <input type="hidden" name="questions" id="questions_json">

            <div class="row">

                {{-- LEFT SIDE --}}

                <div class="col-lg-8">

                    <div class="card">

                        <div class="card-header">

                            <h5 class="mb-0">
                                Question Details
                            </h5>

                        </div>

                        <div class="card-body">

                            <div class="mb-3">

                                <label class="form-label">
                                    Contest
                                </label>

                                <select class="form-select" name="contest_id" id="contest_id">

                                    <option value="">
                                        Select Contest
                                    </option>

                                    @foreach ($contests as $contest)
                                        <option value="{{ $contest->id }}">
                                            {{ $contest->title }}
                                        </option>
                                    @endforeach

                                </select>

                            </div>

                            <div class="mb-3">

                                <div class="mb-3">
                                    <label class="form-label">Question (English)</label>
                                    <textarea id="question" rows="3" class="form-control" placeholder="Enter Question in English"></textarea>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">Question (Hindi)</label>
                                    <textarea id="question_hi" rows="3" class="form-control" placeholder="Enter Question in Hindi"></textarea>
                                </div>

                            </div>

                            <div class="row">

                                <!-- Option A -->
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Option A (English)</label>
                                    <input type="text" id="option_a" class="form-control"
                                        placeholder="Enter Option A in English">
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Option A (Hindi)</label>
                                    <input type="text" id="option_a_hi" class="form-control"
                                        placeholder="Enter Option A in Hindi">
                                </div>

                                <!-- Option B -->
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Option B (English)</label>
                                    <input type="text" id="option_b" class="form-control"
                                        placeholder="Enter Option B in English">
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Option B (Hindi)</label>
                                    <input type="text" id="option_b_hi" class="form-control"
                                        placeholder="Enter Option B in Hindi">
                                </div>

                                <!-- Option C -->
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Option C (English)</label>
                                    <input type="text" id="option_c" class="form-control"
                                        placeholder="Enter Option C in English">
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Option C (Hindi)</label>
                                    <input type="text" id="option_c_hi" class="form-control"
                                        placeholder="Enter Option C in Hindi">
                                </div>

                                <!-- Option D -->
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Option D (English)</label>
                                    <input type="text" id="option_d" class="form-control"
                                        placeholder="Enter Option D in English">
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Option D (Hindi)</label>
                                    <input type="text" id="option_d_hi" class="form-control"
                                        placeholder="Enter Option D in Hindi">
                                </div>

                            </div>
                            <div class="mb-4">

                                <label class="form-label">

                                    Correct Answer

                                </label>

                                <select id="correct_answer" class="form-select">

                                    <option value="">
                                        Select Correct Answer
                                    </option>

                                    <option value="A">
                                        Option A
                                    </option>

                                    <option value="B">
                                        Option B
                                    </option>

                                    <option value="C">
                                        Option C
                                    </option>

                                    <option value="D">
                                        Option D
                                    </option>

                                </select>

                            </div>

                            <div class="d-flex gap-2">

                                <button type="button" id="addQuestionBtn" class="btn btn-primary">

                                    <i class="mdi mdi-plus"></i>

                                    Add To List

                                </button>

                                <button type="button" id="clearBtn" class="btn btn-secondary">

                                    Clear

                                </button>

                            </div>

                        </div>

                    </div>

                </div>

                {{-- RIGHT SIDE --}}

                <div class="col-lg-4">

                    <div class="card">

                        <div class="card-header d-flex justify-content-between align-items-center">

                            <h5 class="mb-0">

                                Questions Added

                            </h5>

                            <span class="badge bg-primary" id="questionCounter">

                                0

                            </span>

                        </div>

                        <div class="card-body" style="max-height:600px;overflow:auto;">

                            <div id="questionList">

                                <div class="text-center text-muted py-5">

                                    <i class="mdi mdi-help-circle-outline display-5"></i>

                                    <p class="mt-2 mb-0">

                                        No Questions Added

                                    </p>

                                </div>

                            </div>

                        </div>

                    </div>

                    <div class="card mt-3">

                        <div class="card-body">

                            <button type="submit" class="btn btn-success w-100" id="saveAllBtn">

                                <i class="mdi mdi-content-save-all"></i>

                                Save All Questions

                            </button>

                        </div>

                    </div>

                </div>

            </div>

        </form>

    </div>

@endsection

@push('scripts')
    <script>
        let questions = [];
        let editIndex = -1;

        // Add Question
        document.getElementById('addQuestionBtn').addEventListener('click', function() {

            const question = document.getElementById('question').value.trim();
            const questionHi = document.getElementById('question_hi').value.trim();

            const optionA = document.getElementById('option_a').value.trim();
            const optionAHi = document.getElementById('option_a_hi').value.trim();

            const optionB = document.getElementById('option_b').value.trim();
            const optionBHi = document.getElementById('option_b_hi').value.trim();

            const optionC = document.getElementById('option_c').value.trim();
            const optionCHi = document.getElementById('option_c_hi').value.trim();

            const optionD = document.getElementById('option_d').value.trim();
            const optionDHi = document.getElementById('option_d_hi').value.trim();

            const correct = document.getElementById('correct_answer').value;

            if (
                question == '' ||
                questionHi == '' ||

                optionA == '' ||
                optionAHi == '' ||

                optionB == '' ||
                optionBHi == '' ||

                optionC == '' ||
                optionCHi == '' ||

                optionD == '' ||
                optionDHi == '' ||

                correct == ''
            ) {

                alert('Please fill all fields.');

                return;
            }

            const data = {

                question: question,
                question_hi: questionHi,

                option_a: optionA,
                option_a_hi: optionAHi,

                option_b: optionB,
                option_b_hi: optionBHi,

                option_c: optionC,
                option_c_hi: optionCHi,

                option_d: optionD,
                option_d_hi: optionDHi,

                correct_answer: correct

            };
            if (editIndex == -1) {

                questions.push(data);

            } else {

                questions[editIndex] = data;

                editIndex = -1;

                document.getElementById('addQuestionBtn').innerHTML =
                    '<i class="mdi mdi-plus"></i> Add To List';

            }

            renderQuestions();

            clearForm();

        });



        // Render Questions

        function renderQuestions() {

            document.getElementById('questionCounter').innerHTML = questions.length;

            let html = '';

            if (questions.length == 0) {

                html = `
        <div class="text-center text-muted py-5">

            <i class="mdi mdi-help-circle-outline display-5"></i>

            <p>No Questions Added</p>

        </div>
        `;

            } else {

                questions.forEach(function(item, index) {

                    html += `

            <div class="card border mb-3">

                <div class="card-header d-flex justify-content-between">

                    <strong>Question ${index+1}</strong>

                    <div>

                        <button
                        type="button"
                        class="btn btn-warning btn-sm"
                        onclick="editQuestion(${index})">

                        <i class="mdi mdi-pencil"></i>

                        </button>

                        <button
                        type="button"
                        class="btn btn-danger btn-sm"
                        onclick="removeQuestion(${index})">

                        <i class="mdi mdi-delete"></i>

                        </button>

                    </div>

                </div>
<div class="card-body">

    <p>
        <strong>Question (English):</strong><br>
        ${item.question}
    </p>

    <p>
        <strong>Question (Hindi):</strong><br>
        ${item.question_hi}
    </p>

    <hr>

    <small>

        <strong>A (EN):</strong> ${item.option_a}<br>
        <strong>A (HI):</strong> ${item.option_a_hi}<br><br>

        <strong>B (EN):</strong> ${item.option_b}<br>
        <strong>B (HI):</strong> ${item.option_b_hi}<br><br>

        <strong>C (EN):</strong> ${item.option_c}<br>
        <strong>C (HI):</strong> ${item.option_c_hi}<br><br>

        <strong>D (EN):</strong> ${item.option_d}<br>
        <strong>D (HI):</strong> ${item.option_d_hi}

    </small>

    <br>

    <span class="badge bg-success mt-2">
        Correct : ${item.correct_answer}
    </span>

</div>

            </div>

            `;

                });

            }

            document.getElementById('questionList').innerHTML = html;

        }



        // Remove

        function removeQuestion(index) {

            if (confirm('Remove this question?')) {

                questions.splice(index, 1);

                renderQuestions();

            }

        }



        // Edit

        function editQuestion(index) {

            const item = questions[index];

            editIndex = index;

            document.getElementById('question').value = item.question;
            document.getElementById('question_hi').value = item.question_hi;

            document.getElementById('option_a').value = item.option_a;
            document.getElementById('option_a_hi').value = item.option_a_hi;

            document.getElementById('option_b').value = item.option_b;
            document.getElementById('option_b_hi').value = item.option_b_hi;

            document.getElementById('option_c').value = item.option_c;
            document.getElementById('option_c_hi').value = item.option_c_hi;

            document.getElementById('option_d').value = item.option_d;
            document.getElementById('option_d_hi').value = item.option_d_hi;

            document.getElementById('correct_answer').value = item.correct_answer;

            document.getElementById('addQuestionBtn').innerHTML =
                '<i class="mdi mdi-check"></i> Update Question';
        }


        // Clear

        function clearForm() {

            document.getElementById('question').value = '';
            document.getElementById('question_hi').value = '';

            document.getElementById('option_a').value = '';
            document.getElementById('option_a_hi').value = '';

            document.getElementById('option_b').value = '';
            document.getElementById('option_b_hi').value = '';

            document.getElementById('option_c').value = '';
            document.getElementById('option_c_hi').value = '';

            document.getElementById('option_d').value = '';
            document.getElementById('option_d_hi').value = '';

            document.getElementById('correct_answer').value = '';

            editIndex = -1;

            document.getElementById('addQuestionBtn').innerHTML =
                '<i class="mdi mdi-plus"></i> Add To List';

            document.getElementById('question').focus();
        }



        // Clear Button

        document.getElementById('clearBtn').addEventListener('click', clearForm);



        // Save All

        document.getElementById('saveQuestionsForm').addEventListener('submit', function(e) {

            if (questions.length == 0) {

                e.preventDefault();

                alert('Please add at least one question.');

                return;

            }

            document.getElementById('questions_json').value =
                JSON.stringify(questions);

        });
    </script>
@endpush