@extends('admin.layouts.app')

@section('title', 'Manage 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">
                    {{ $contest->title }}
                </h4>

                <p class="text-muted mb-0">

                    Category :
                    <strong>{{ $contest->category->name }}</strong>

                    &nbsp; | &nbsp;

                    Total Questions :

                    <span class="badge bg-primary">

                        {{ $questions->count() }}

                    </span>

                </p>

            </div>

            <div>

                <a href="{{ route('admin.questions.index') }}" class="btn btn-light">

                    <i class="mdi mdi-arrow-left"></i>

                    Back

                </a>

                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addQuestionModal">

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

                    Add Question

                </button>

            </div>

        </div>

        <div class="card">

            <div class="card-body">

                <div class="table-responsive">

                    <table class="table table-bordered table-hover align-middle datatable">

                        <thead>

                            <tr>

                                <th width="60">

                                    #

                                </th>

                                <th>

                                    Question

                                </th>

                                <th width="120">

                                    Correct

                                </th>

                                <th width="170">

                                    Action

                                </th>

                            </tr>

                        </thead>

                        <tbody>

                            @forelse($questions as $question)
                                <tr>

                                    <td>

                                        {{ $loop->iteration }}

                                    </td>

                                    <td>
                                        <strong>Question (English)</strong><br>
                                        {{ $question->question }}

                                        <div class="row mt-2">
                                            <div class="col-md-6">
                                                <b>A.</b> {{ $question->option_a }}
                                            </div>
                                            <div class="col-md-6">
                                                <b>B.</b> {{ $question->option_b }}
                                            </div>
                                        </div>

                                        <div class="row mt-2">
                                            <div class="col-md-6">
                                                <b>C.</b> {{ $question->option_c }}
                                            </div>
                                            <div class="col-md-6">
                                                <b>D.</b> {{ $question->option_d }}
                                            </div>
                                        </div>

                                        <hr>

                                        <strong>Question (Hindi)</strong><br>
                                        {{ $question->question_hi }}

                                        <div class="row mt-2">
                                            <div class="col-md-6">
                                                <b>A.</b> {{ $question->option_a_hi }}
                                            </div>
                                            <div class="col-md-6">
                                                <b>B.</b> {{ $question->option_b_hi }}
                                            </div>
                                        </div>

                                        <div class="row mt-2">
                                            <div class="col-md-6">
                                                <b>C.</b> {{ $question->option_c_hi }}
                                            </div>
                                            <div class="col-md-6">
                                                <b>D.</b> {{ $question->option_d_hi }}
                                            </div>
                                        </div>

                                    </td>

                                    <td>

                                        <span class="badge bg-success">

                                            {{ $question->correct_answer }}

                                        </span>

                                    </td>

                                    <td>

                                        <button class="btn btn-sm btn-warning editBtn" data-id="{{ $question->id }}"
                                            data-question="{{ $question->question }}"
                                            data-question_hi="{{ $question->question_hi }}"
                                            data-option_a="{{ $question->option_a }}"
                                            data-option_a_hi="{{ $question->option_a_hi }}"
                                            data-option_b="{{ $question->option_b }}"
                                            data-option_b_hi="{{ $question->option_b_hi }}"
                                            data-option_c="{{ $question->option_c }}"
                                            data-option_c_hi="{{ $question->option_c_hi }}"
                                            data-option_d="{{ $question->option_d }}"
                                            data-option_d_hi="{{ $question->option_d_hi }}"
                                            data-correct="{{ $question->correct_answer }}" data-bs-toggle="modal"
                                            data-bs-target="#editQuestionModal">

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

                                        </button>

                                        <button type="button" class="btn btn-sm btn-danger deleteBtn"
                                            data-url="{{ route('admin.questions.destroy', $question->id) }}"
                                            data-name="Question">

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

                                        </button>

                                    </td>

                                </tr>

                            @empty

                                <tr>

                                    <td colspan="4" class="text-center py-5">

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

                                        <h6 class="mt-3">

                                            No Questions Found

                                        </h6>

                                    </td>

                                </tr>
                            @endforelse

                        </tbody>

                    </table>

                </div>

            </div>

        </div>

    </div>

    {{-- Add Modal --}}
    @include('admin.questions.add-modal')

    {{-- Edit Modal --}}
    @include('admin.questions.edit-modal')

@endsection

@push('scripts')
    <script>
        document.querySelectorAll('.editBtn').forEach(function(button) {

            button.addEventListener('click', function() {

                let id = this.dataset.id;

                document.getElementById('editQuestionForm').action =
                    "/admin/questions/" + id;

                document.getElementById('edit_question').value =
                    this.dataset.question;

                document.getElementById('edit_question_hi').value =
                    this.dataset.question_hi;

                document.getElementById('edit_option_a').value =
                    this.dataset.option_a;

                document.getElementById('edit_option_a_hi').value =
                    this.dataset.option_a_hi;

                document.getElementById('edit_option_b').value =
                    this.dataset.option_b;

                document.getElementById('edit_option_b_hi').value =
                    this.dataset.option_b_hi;

                document.getElementById('edit_option_c').value =
                    this.dataset.option_c;

                document.getElementById('edit_option_c_hi').value =
                    this.dataset.option_c_hi;

                document.getElementById('edit_option_d').value =
                    this.dataset.option_d;

                document.getElementById('edit_option_d_hi').value =
                    this.dataset.option_d_hi;

                document.getElementById('edit_correct_answer').value =
                    this.dataset.correct;

            });

        });
    </script>
@endpush