@extends('backend.layouts.app')
@section('content')
<div class="row mx-auto">
    <div class="col-sm-6">
        <div class="card">
            <div class="card-header align-items-center d-flex">
                <h4 class="card-title mb-0 flex-grow-1">{{ translate('Question Details') }}</h4>
            </div>
            <div class="card-body">
            <form action="{{route('question.store')}}" method="POST" enctype="multipart/form-data" autocomplete="off">
                @csrf
                <input type="hidden" name="page" value="{{request('page')}}">
                @php
                    $value = request('exam_filter') ?? old('exam_id');
                    $school_id = request('school_filter') ?? old('school_id');
                @endphp
                @if(\Auth::user()->user_type == 'admin')
                    <div class="row mb-3">
                        <div class="col-lg-3">
                            <label for="school_id" class="form-label">Select School<span class="text-danger">*</span></label>
                        </div>
                        <div class="col-lg-9">
                            <select title="Select School" name="school_id" class="form-control rns-selectpicker" id="school_id">
                                @if($schools->isNotEmpty())
                                    @foreach ($schools as $school)
                                            <option value="{{$school->id}}" @if($school->id == $school_id) selected @endif>{{$school->name }}</option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                    </div>
                @endif
                <div class="row mb-3">
                    <div class="col-lg-3">
                        <label for="exam_id" class="form-label">Select Exam<span class="text-danger">*</span></label>
                    </div>
                    
                    <div class="col-lg-9">
                        <select title="Select Exam" name="exam_id" class="form-control rns-selectpicker" id="exam_id">
                            @if($exams->isNotEmpty())
                                @foreach ($exams as $exam)
                                        <option value="{{$exam->id}}" data-id="{{encrypt($exam->id)}}" @if($exam->id == $value) selected @endif>{{$exam->title }}</option>
                                @endforeach
                            @endif
                        </select>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-lg-3">
                        <label for="exam_id" class="form-label">Select Question Category<span class="text-danger">*</span></label>
                    </div>
                    <div class="col-lg-9">
                        <select title="Select Question Category" name="question_categories_id" class="form-control rns-selectpicker" id="question_categories_id">
                            @if($exams->isNotEmpty())
                                @foreach ($categories as $category)
                                        <option value="{{$category->id}}" @if($category->id == old('question_categories_id')) selected @endif>{{$category->name }}</option>
                                @endforeach
                            @endif
                        </select>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-lg-3">
                        <label for="description" class="form-label">{{ translate('Question') }}</label>
                    </div>
                    <div class="col-lg-9">
                        <textarea name="name" class="form-control rns-textEditor" id="description" rows="3" placeholder="Type...">{!!old('name')!!}</textarea>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-lg-3">
                        <label for="timeInput" class="form-label">Question Image</label>
                    </div>
                    <div class="col-lg-9">
                        <div class=" input-group" data-toggle="rnsuploader" data-type="image" data-multiple="true">
                            <div class="input-group-prepend">
                                <div class="input-group-text bg-soft-secondary font-weight-medium">{{translate('Browse')}}</div>
                            </div>
                            <div class="form-control file-amount">{{translate('Choose file')}}</div>
                            <input type="hidden" name="image" class="selected-files" value="{{old('image')}}">
                        </div>
                        <div class="file-preview"></div>
                    </div>
                </div>
                <x-input-component name="option_one" label="Option One" value="{{old('option_one')}}" type="text" :required="1"/>
                <x-input-component name="option_tow" label="Option Tow" value="{{old('option_tow')}}" type="text" :required="1"/>
                <x-input-component name="option_three" label="Option Three" value="{{old('option_three')}}" type="text" :required="1"/>
                <x-input-component name="option_four" label="Option Four" value="{{old('option_four')}}" type="text" :required="1"/>
                <div class="row mb-3">
                    <div class="col-lg-3">
                        <label for="exam_id" class="form-label">Right Answer<span class="text-danger">*</span></label>
                    </div>
                    <div class="col-lg-9">
                        <select title="Select Right Answer" name="right_ans" class="form-control rns-selectpicker" id="right_ans">
                            <option value="option_one">Option One</option>
                            <option value="option_tow">Option Tow</option>
                            <option value="option_three">Option Three</option>
                            <option value="option_four">Option Four</option>
                        </select>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-lg-3">
                        <label for="address" class="form-label">Order</label>
                    </div>
                    <div class="col-lg-9">
                        <input type="text" name="order" class="form-control" placeholder="Order">
                        <span class="text-muted fs-10">Use Highest No. for high priority</span>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-lg-3">
                        <label for="description" class="form-label">{{ translate('Description') }}</label>
                    </div>
                    <div class="col-lg-9">
                        <textarea name="desc" class="form-control" id="description" rows="3" placeholder="Description">{{old('desc')}}</textarea>
                    </div>
                </div>
                <div class="text-end">
                    <button type="submit" class="btn btn-primary">Add Question</button>
                </div>
            </form>
            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="card" id="orderList">
            <div class="card-header border-0">
                <div class="row align-items-center gy-1">
                    <div class="col-sm">
                        <h5 class="card-title mb-0">Total question for this exam ( {{$count}} )</h5>
                    </div>
                    @if(request('exam_filter') != null)
                        <div class="col-sm-2">
                            <a type="submit" href="{{route('exam.show', encrypt(request('exam_filter')))}}" class="btn btn-warning w-100"> <i class="las la-eye"></i> View</a>
                        </div>
                        <div class="col-sm-2">
                            <button type="reset" id="publish" onClick="publish(this)" class="btn btn-success w-100"> <i class="lab la-telegram"></i> Publish</button>
                        </div>
                    @endif
                </div>
            </div>
            <div class="card-body border border-dashed border-end-0 border-start-0">
                <form action="{{ route('question.create') }}" method="GET" id="filter_form">
                    <input type="hidden" name="school_filter" value="{{request('school_filter')}}" id="school_filter">
                    <input type="hidden" name="exam_filter" value="{{request('exam_filter')}}" id="exam_filter">
                    <div class="row g-2 justify-content-end">
                        <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>
                </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 table-card mb-1">
                        <table class="table table-nowrap align-middle" id="orderTable">
                            <thead class="text-muted table-light">
                                <tr class="text-uppercase">
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody class="list form-check-all rnsTable">
                                @if($questions->isNotEmpty())
                                @foreach($questions as $key => $question)
                                    <tr>
                                        <td class="id">{{ ($key+1) + ($questions->currentPage() - 1)*$questions->perPage() }}</td>
                                        
                                        <td>{!! $question->name !!}</td>
                                        <td>
                                            <ul class="list-inline hstack gap-2 mb-0">
                                                <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()->all()) }}
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
@endsection
@section('modal')
@include('backend.modals.delete')
@endsection
@section('script')
    <script>

        $('#exam_id').on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
            $('#exam_filter').val($(this).val());
            $("#filter_form").submit();
        });
        $('#school_id').change(function(){
            $('#school_filter').val($(this).val());
            $("#filter_form").submit();
        });

        function publish(el){
            var id = '{{request('exam_filter')}}';
            if(id == null || id== '' || id == undefined){
                RNS.plugins.notify('warning', 'Please Select Exam');
            }
            $.post('{{ route('exam.publish') }}', {_token:'{{ csrf_token() }}', id: "{{request('exam_filter')}}"}, function(data){
                if(data == 1){
                    RNS.plugins.notify('success', 'Exam Published successfully');
                }else if(data == 2){
                    RNS.plugins.notify('warning', 'Exam status must be active');
                }else if(data == 3){
                    RNS.plugins.notify('warning', 'Exam is already published');
                }
                else{
                    RNS.plugins.notify('danger', '{{ ('Something went wrong') }}');
                }
            });
        }
    </script>
@endsection