@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-lg-4">
                        <div class="row">
                            <div class="col-lg-6">
                                <h4 class="">{{translate('All Questions')}}</h4>
                            </div>
                            <div class="col-lg-4 mt-2">
                                <a href="{{ route('export.questions') }}" class="btn btn-soft-warning btn-icon btn-circle btn-sm edit-button"><i class="las la-file-download"></i></a>
                            </div>
                        </div>
                    </div>
                    {{-- @dd($isused, $special) --}}
                    <div class="col-lg-8">
                        <form class="" id="filter_query" action="" method="GET">
                            <div class="row">
                                <div class="col-lg-3">
                                    <div class="form-group">
                                        <select class="form-control rns-selectpicker" id="level" name="level" onchange="this.form.submit()">
                                            <option value="" @if ($level == "") selected @endif>{{ translate('All Levels') }}</option>
                                            <option value="1" @if ($level == "1") selected @endif>{{ translate('Easy') }}</option>
                                            <option value="2" @if ($level == "2") selected @endif>{{ translate('Medium') }}</option>
                                            <option value="3" @if ($level == "3") selected @endif>{{ translate('Hard') }}</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                    <div class="form-group">
                                        <select class="form-control rns-selectpicker" id="isused" name="isused" onchange="this.form.submit()">
                                            <option value="" @if ($isused == "") selected @endif>{{ translate('All Use/Unuse') }}</option>
                                            <option value="0" @if ($isused == "0") selected @endif>Unused</option>
                                            <option value="1" @if ($isused == "1") selected @endif>Used</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                    <div class="form-group">
                                        <select id="special" name="special" class="form-control rns-selectpicker" onchange="this.form.submit()">
                                            <option value="" @if ($special == "") selected @endif>{{ translate('All Normal/Special') }}</option>
                                            <option value="1" @if ($special == "1") selected @endif>{{ translate('Special') }}</option>
                                            <option value="0" @if ($special == "0") selected @endif>{{ translate('Normal') }}</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                    <input type="text" class="form-control" id="search" name="search"@isset($sort_search) value="{{ $sort_search }}" @endisset placeholder="{{ translate('Type name & Enter') }}">
                                </div>
                            </div>
                        </form>
                        
                        
                    </div>
                    
                </div>
            
            </div>
            <!-- end card header -->
            <div class="card-body">
                <div id="customerList">
                    <div class="table-responsive table-card">
                        <table id="myTable" class="table table-hover align-middle table-nowrap table-responsive">
                            <thead class="table-light">
                                <tr>
                                    <th>#</th>
                                    <th>{{translate('Question')}}</th>
                                    <th>{{translate('Categories')}}</th>
                                    <th>{{translate('Option A')}}</th>
                                    <th>{{translate('Option B')}}</th>
                                    <th>{{translate('Option C')}}</th>
                                    <th>{{translate('Correct Answer')}}</th>
                                    <th>{{translate('Special')}}</th>
                                    <th>{{translate('Used Status')}}</th>
                                    <th>{{translate('Status')}}</th>
                                    <th>{{translate('Action')}}</th>                                    
                                </tr>
                            </thead>
                            <tbody class="list form-check-all">
                                @if ($questions->count())
                                    @foreach ($questions as $question)
                                        <tr>  
                                            <td class="count" data-order="{{ $loop->iteration }}">{{ $loop->iteration }}</td>
                                            <td>{{translate($question->question) }}</td>
                                            <td>
                                                @if ($question->level_type == "1")
                                                    {{translate('Easy')}}
                                                @elseif ($question->level_type == "2")
                                                    {{translate('Medium')}}
                                                @elseif ($question->level_type == "3")
                                                    {{translate('Hard')}}
                                                @endif
                                            </td>
                                            <td>{{translate($question->optionA)}}</td>
                                            <td>{{translate($question->optionB)}}</td>
                                            <td>{{translate($question->optionC)}}</td>
                                            <td><b>{{translate('Option')}} {{ substr($question->answer, -1) }}</b></td>
                                            {{-- <td>
                                                @if($que->special == 1)
                                                    <i class="lar la-check-circle"></i>
                                                @else
                                                    <i class="lar la-times-circle"></i>
                                                @endif
                                            </td> --}}
                                            <td class="status">
                                                <div class="form-check form-switch form-switch-right form-switch-md">
                                                    <label class="form-check-label @if($question->special == 1) text-success @else text-warning @endif" for="SwitchCheck2">@if($question->special == 1) {{translate('Special')}} @else {{translate('Normal')}} @endif</label>
                                                    <input class="form-check-input" onchange="updateSpecial(this)" value="{{ $question->id }}" type="checkbox" role="switch" id="SwitchCheck7" @if($question->special ==1) checked @endif @if($question->isused == 1) disabled @endif>
                                                </div>
                                            </td>
                                            <td><span style="color: {{ $question->isused == 1 ? '#ffc803' : '#5ea3cb' }}">{{ $question->isused == 1 ? translate('Used') : translate('Unused') }}</span></td>
                                            <td class="rtl">
                                                <div class="form-check form-switch form-switch-right form-switch-md">
                                                    <input onchange="updateRtl(this)" class="form-check-input" type="checkbox" value="{{ $question->id }}" @if($question->status == 1) checked @endif>
                                                </div>
                                            </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({{$question->id}})">
                                                            <i class="las la-edit"></i>
                                                        </a>
                                                    </div>
                                                    <div class="remove">
                                                        @if ($question->isused === 0)
                                                            <button class="btn btn-soft-danger btn-icon btn-circle btn-sm confirm-delete" data-bs-toggle="modal" data-bs-target="#deleteRecordModal" data-href="{{ route('questions.destroy', $question->id) }}"><i class="las la-trash"></i></button>
                                                        @else
                                                            {{-- <button class="btn btn-soft-danger btn-icon btn-circle btn-sm confirm-delete" href="#"><i class="las la-trash"></i></button> --}}
                                                            <button class="btn btn-soft-danger btn-icon btn-circle btn-sm confirm-delete" data-bs-toggle="modal" data-bs-target="#confirmDeleteModal"><i class="las la-trash"></i></button>
                                                        @endif
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                @else
                                    <tr>
                                        <td colspan="9" class="text-center">{{ translate('No questions found.') }}</td>
                                    </tr>
                                @endif
                            </tbody>
                            
                        </table>
                        <div class="row">
                            <div class="pagination pagination-sm justify-content-center" >
                                {{ $questions->appends(request()->input())->links() }}
                            </div>
                        </div>                        
                    </div>
                </div>
            </div>
        </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>

<!-- Modal -->
<div class="modal fade" id="confirmDeleteModal" tabindex="-1" aria-labelledby="confirmDeleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="confirmDeleteModalLabel">Unable To Delete</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <div class="countainer">
                <div class="row">
                    <div class="col-lg-1">
                        <img src="{{ asset('assets/backend/images/confirm.gif') }}">
                    </div>
                    <div class="col-lg-auto">
                        Sorry Unable to Delete! Because this Question already in Used
                    </div>
                </div>
            </div>
        </div>
      </div>
    </div>
</div>
@include('backend.modals.delete')
@endsection
@section('script')
<script>
    
</script>

<script>

    // Query Filter isused/ special
    function filter_query() {
        $(this).form.submit();
    }

    // Delete model Information
    $('.confirm-delete').on('click', function() {
        var itemId = $(this).data('item-id');
        $('#confirmDeleteModal').data('item-id', itemId);
    });

    //update Status
    function updateRtl(el) {
        var status = el.checked ? 1 : 0;
        $.post("{{ route('questions.update_rtl_status') }}", {
            _token: "{{ csrf_token() }}",
            id: el.value,
            status: status
        }, function (data) {
            if (data == 1) {
                RNS.plugins.notify('success', '{{ __('Question Status updated successfully') }}');
            } else {
                RNS.plugins.notify('danger', '{{ __('Something went wrong') }}');
            }
        });
    }

    // special
    function updateSpecial(el){
        if(el.checked){
            var special = 1;
        }
        else{
            var special = 0;
        }
        $.post('{{ route('questions.update_special') }}', {_token:'{{ csrf_token() }}', id:el.value, special:special}, function(data){
            if(data == 1){
                RNS.plugins.notify('success', '{{ ('Question Special Updated successfully') }}');
            } else if(data == 2) {
                RNS.plugins.notify('warning', '{{ ('Question is Already in Use !! You dont have change') }}');
            }
            else{
                RNS.plugins.notify('danger', '{{ ('Something went wrong') }}');
            }
        });
        var label = el.parentElement.querySelector('.form-check-label');
        if(label) {
            label.className = el.checked ? 'form-check-label text-success' : 'form-check-label text-warning';
            label.textContent = el.checked ? 'Special' : 'Normal';
        } else {
            console.error('Label element not found.');
        }
    }

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

    }
</script>


@endsection