@extends('backend.layouts.app')
@section('content')
<div class="row">
    <div class="col-lg-12">
        <div class="card" id="orderList">
            <div class="card-header border-0">
                <div class="row align-items-center gy-3">
                    <div class="col-sm">
                        <h5 class="card-title mb-0">Questions</h5>
                    </div>
                    <div class="col-sm-auto">
                        <div class="d-flex gap-1 flex-wrap">
                            <button class="btn btn-soft-primary" id="selected_items" style="display: none;" data-bs-toggle="tooltip" title="Selected Items"></button>
                            <button class="btn btn-soft-danger" id="remove_actions" onClick="remove_actions()" style="display: none;"><i class="ri-delete-bin-2-line"></i></button>
                            <a href="{{ route('question.create') }}" class="btn btn-primary add-btn"><i class="ri-add-line align-bottom me-1"></i> Add New Question</a>
                        </div>
                    </div>
                    
                </div>
            </div>
            <div class="card-body border border-dashed border-end-0 border-start-0">
                <form action="{{ route('question.index') }}" method="GET" id="filter_form">
                    <div class="row g-3 justify-content-end">
                        <div class="col-xxl-2 col-sm-2 ">
                            <div>
                                <select class="form-control rns-selectpicker" name="exam" onchange="submit_form()">
                                    <option value="" selected>Filter By Exam</option>
                                    @if($exams->isNotEmpty())
                                        @foreach ($exams as $exam)
                                            <option value="{{$exam->id}}" @if($exam->id == request('exam')) selected @endif>{{$exam->title}}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                        </div>
                        <div class="col-xxl-2 col-sm-2 ">
                            <div>
                                <select class="form-control rns-selectpicker" name="category" onchange="submit_form()">
                                    <option value="" selected>Filter By Category</option>
                                    @if($categories->isNotEmpty())
                                        @foreach ($categories as $category)
                                            <option value="{{$category->id}}" @if($category->id == request('category')) selected @endif>{{$category->name}}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                        </div>
                        <div class="col-xxl-5 col-sm-3">
                            <div class="search-box">
                                <input type="text" name="search" class="form-control search"placeholder="Type name & Enter..." value="{{ request('search') }}"><i class="las la-search search-icon" ></i>
                            </div>
                        </div>
                        
                    </div>
                    <!--end row-->
                </form>
            </div>
            <div class="card-body pt-0">
                <div>
                    <ul class="nav nav-tabs nav-tabs-custom nav-success mb-3" role="tablist">
                       
                    </ul>

                    <div class="table-responsive-sm table-card mb-1">
                        <table class="table align-middle">
                            <thead class="text-muted table-light">
                                <tr class="text-uppercase">
                                    <th>#</th>
                                    <th></th>
                                    <th>Name</th>
                                    <th>Exam Title</th>
                                    <th>Category</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody class="list form-check-all rnsTable">
                                @if($questions->isNotEmpty())
                                @foreach($questions as $key => $question)
                                    <tr>
                                        <td data-column-id="#">
                                            <div class="form-check checkbox-product-list">
                                                <input class="form-check-input bulk_check" type="checkbox" value="{{$question->id}}" id="checkbox-1">
                                                <label class="form-check-label" for="checkbox-1"></label>
                                            </div>
                                        </td>
                                        <td class="id">{{ ($key+1) + ($questions->currentPage() - 1)*$questions->perPage() }}</td>
                                        
                                        <td class="w-25">{!! $question->name !!}</td>
                                        <td>{{ ($question->exam != null) ? $question->exam->title : 'N/A' }}</td>
                                        <td>{{ ($question->category != null) ? $question->category->name : 'N/A' }}</td>
                                        <td class="status">
                                            <div class="form-check form-switch form-switch-secondary">
                                                <input class="form-check-input" onchange="updateStatus(this)" value="{{ $question->id }}" type="checkbox" role="switch" id="SwitchCheck7" @if($question->status ==1) checked @endif>
                                                <label class="form-check-label @if($question->status == 1) text-success @else text-danger @endif" for="SwitchCheck2">@if($question->status == 1) Active @else Inactive @endif</label>
                                            </div>
                                        </td>
                                        <td>
                                            <ul class="list-inline hstack gap-2 mb-0">
                                                <li class="list-inline-item" data-bs-toggle="tooltip" data-bs-trigger="hover"
                                                    data-bs-placement="top" title="View" >
                                                    <a href="javascript:void(0);" class="text-warning d-inline-block" onClick="ques_show(this)" data-url="{{route('question.show', $question->id)}}">
                                                        <i class="ri-eye-fill fs-16"></i>
                                                    </a>
                                                </li>
                                                <li class="list-inline-item edit" data-bs-toggle="tooltip" data-bs-trigger="hover"
                                                    data-bs-placement="top" title="Edit">
                                                    <a href="{{ route('question.edit', encrypt($question->id)) }}" class="text-primary d-inline-block edit-item-btn">
                                                        <i class="ri-pencil-fill fs-16"></i>
                                                    </a>
                                                </li>
                                                <li class="list-inline-item" data-bs-toggle="tooltip" data-bs-trigger="hover"
                                                    data-bs-placement="top" title="Remove">
                                                    <a class="text-danger d-inline-block remove-item-btn confirm-delete" data-bs-toggle="modal"href="#deleteRecordModal" data-href="{{route('question.destroy', encrypt($question->id))}}">
                                                        <i class="ri-delete-bin-5-fill fs-16"></i>
                                                    </a>
                                                </li>
                                            </ul>
                                        </td>
                                    </tr>
                                @endforeach
                                @endif
                            </tbody>
                        </table>
                    </div>
                    <div class="d-flex justify-content-end">
                        <div class="pagination-wrap hstack gap-2">
                            <ul class="pagination listjs-pagination mb-0">
                                {{ $questions->appends(request()->input())->links() }}
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--end col-->
</div>
<!-- right offcanvas -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
    <div class="offcanvas-header">
        <h5 id="offcanvasRightLabel">Offcanvas Right</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        ...
    </div>
</div>
@endsection
@section('modal')
<div id="info-modal" class="modal fade">
	<div class="modal-dialog modal-dialog-right">
			<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title h6">{{ translate('Question Info') }}</h5>
			</div>
			<div class="modal-body c-scrollbar-light position-relative" id="info-modal-content">
				<div class="c-preloader text-center absolute-center">
                    <i class="las la-spinner la-spin la-3x opacity-70"></i>
                </div>
			</div>
		</div>
	</div>
</div>
 {{-- Bulk Delete Questions modal  --}}
 <div class="modal fade zoomIn" id="bulk-delete" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="btn-close"></button>
            </div>
            <div class="modal-body">
                <div class="mt-2 text-center">
                    <lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop" colors="primary:#f7b84b,secondary:#f06548" style="width:100px;height:100px"></lord-icon>
                    <div class="mt-4 pt-2 fs-15 mx-4 mx-sm-5">
                        <h4>{{translate('Are you Sure ?')}}</h4>
                        <p class="text-muted mx-4 mb-0">{{translate('Are you Sure You want to Remove these Records ?')}}</p>
                    </div>
                </div>
                <div class="d-flex gap-2 justify-content-center mt-4 mb-2">
                    <button type="button" class="btn w-sm btn-light" data-bs-dismiss="modal">{{translate('Close')}}</button>
                    <button type="button" id="remove_questions" class="btn w-sm btn-danger " id="delete-record">{{translate('Yes, Delete It!')}}</button>
                </div>
            </div>
        </div>
    </div>
</div>
@include('backend.modals.delete')
@endsection
@section('script')
    <script>
        function updateStatus(el){
            if(el.checked){
                var status = 1;
            }
            else{
                var status = 0;
            }
            $.post('{{ route('question.update-status') }}', {_token:'{{ csrf_token() }}', id:el.value, status:status}, function(data){
                if(data == 1){
                    RNS.plugins.notify('success', '{{ ('Status updated successfully') }}');
                }
                else{
                    RNS.plugins.notify('danger', '{{ ('Something went wrong') }}');
                }
            });
            if(el.checked){
                let sp = el.nextElementSibling.className = 'text-success';
                el.nextElementSibling.textContent = 'Active';
            }else{
                let sp = el.nextElementSibling.className = 'text-danger';
                el.nextElementSibling.textContent = 'Inactive';
            }
        }
        function ques_show(el){
            $('#info-modal-content').html('<div class="c-preloader text-center absolute-center"><i class="las la-spinner la-spin la-3x opacity-70"></i></div>');
            var id = $(el).data('id')
            $('#info-modal').modal('show');
            $.get(el.getAttribute('data-url'), {_token: "{{csrf_token()}}", id:el.value, status:status}, function(data){
                $('#info-modal-content').html(data);
            });
        }
        
        function submit_form(){
            $('#filter_form').submit();
        }
        $(document).ready(function(){
            $('.bulk_check').click(function() {
                var checked_count = $('.rnsTable').find('.bulk_check:checked').length;
                $('#selected_items').text(checked_count);

                if(checked_count > 0){
                    $('#selected_items').show();
                    $('#remove_actions').show();
                }else{
                    $('#selected_items').hide();
                    $('#remove_actions').hide();
                }
            });
        });
        function remove_actions(){
            var checked_count = $('.rnsTable').find('.bulk_check:checked').length;
            if(checked_count > 0){
                $('#bulk-delete').modal('show');
            }else{
                RNS.plugins.notify('danger', '{{ ('Please select at least one record') }}');
            }
        }
        $(document).ready(function(){
            $('#remove_questions').click(function() {
                var checkedValues = []; 
                $('.bulk_check:checked').each(function() {
                    checkedValues.push($(this).val());
                });
                $.ajax({
                    url: '{{route('delete.bulk-questions')}}',
                    type: 'POST',
                    data: {_token: '{{csrf_token()}}', checkedValues: checkedValues},
                    success: function(response) {
                        alert(response);
                    },
                    error: function(xhr, status, error) {
                        RNS.plugins.notify('danger', 'Something went wrong');
                    }
                });
            });
        });
    </script>
@endsection