@extends('backend.layouts.app')

@section('content')
<div class="row">
    {!! displayAlert() !!}
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <div class="row">
                    <div class="col-9">
                        <h1 class="card-title mt-1">{{ translate('Questions For Quiz: #') }}<a href="#">{{$quiz->quiz_number }} {{$quiz->quiz_description}}</a></h1>
                    </div>
                    <div class="col-3">
                        <input type="text" id="filter" class="form-control search" placeholder="{{ translate('Search....') }}">
                    </div>
                </div>
            </div><!-- end card header -->
            <div class="card-body">
                <div id="customerList">
                    <div class="table-responsive table-card">
                        <table id="customerTable" class="table align-middle table-nowrap table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>#</th>
                                    <th>{{ translate('Question Attached in Quiz') }}<a href="#">{{$quiz->quiz_number }} {{$quiz->quiz_description}}</a></th>
                                    <th>{{ translate('Level') }}</th>
                                    <th>{{ translate('Type') }}</th>
                                    <th>{{ translate('Order') }}</th>
                                    <th>{{ translate('Action') }}</th>
                                </tr>
                            </thead>
                            <tbody class="list form-check-all">
                                @if($quiz_questions->count())
                                    @foreach ($quiz_questions as $quiz_question)
                                        <tr>
                                            <td class="count">{{ $loop->iteration }}</td>                                              
                                            <td>
                                                {{ $quiz_question->question->question }}
                                            </td>
                                            <td>
                                                @if ($quiz_question->question->level_type == "1")
                                                    {{ translate('Easy') }}
                                                @elseif ($quiz_question->question->level_type == "2")
                                                    {{ translate('Medium') }}
                                                @elseif ($quiz_question->question->level_type == "3")
                                                    {{ translate('Hard') }}
                                                @endif
                                            </td>
                                            <td>
                                                @if ($quiz_question->question->special === 1)
                                                    Special
                                                @else
                                                    Normal
                                                @endif
                                            </td>
                                            <td>
                                                {{ $quiz_question->order }}
                                            </td>
                                            <td>
                                                <div class="d-flex gap-2">
                                                    <div class="edit">
                                                        <a class="btn btn-soft-primary btn-icon btn-circle btn-sm edit-button" href="#" onclick="editModal({{ $quiz_question->id }})">
                                                            <i class="las la-edit"></i>
                                                        </a>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>                                        
                                    @endforeach
                                @endif
                            </tbody>
                        </table>
                    </div>
                    
                </div><!-- end card -->
            </div>
            <!-- end col -->
        </div>
    </div>
</div>

<!--Model Form-->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" id="modal-content">
            
        </div>
    </div>
</div>

@endsection

@section('script')
<script>
    // Filter Search
    $(document).ready(function() {
        $("#filter").on("keyup", function() {
            var value = $(this).val().toLowerCase();
            $("table tbody tr").filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
            });
        });
    });

    //load Question Based on Levels    
    function loadQuestions(selectedLevel) {
        if (selectedLevel !== '') {
            $.ajax({
                url: '/admin/get/questions/' + selectedLevel,
                method: 'GET',
                success: function (data) {
                    var questionSelect = $('#questionSelect');
                    questionSelect.empty();
                    $.each(data, function (index, question) {
                        questionSelect.append('<option value="' + question.id + '">' + question.question + '</option>');
                    });
                    questionSelect.selectpicker('refresh');
                },
                error: function (error) {
                    console.log(error);
                }
            });
        }
    }

// }

    //////Model Form//

    function editModal(id){
        $.post('{{ route('edit.quizmodel') }}',{ _token:'{{ csrf_token() }}', id: id }, function(data){
            $('#editModal .modal-content').html(data);
            $('#editModal').modal('show', { backdrop: 'static' });
            RNS.plugins.bootstrapSelect();
        });

    }



</script>
@endsection