@extends('layouts.app')
@section('title', trans('menu.exam_title'))

@section('page-styles')

@section('content')


    <div class="content">

        @include('exam::tabs')

        <x-content.header title="{{ __('exams.exam_questions') }}" >
            <x-slot:headerRight>
                <a class="btn-secondary-base btn-create" href="{{route('settings.exam.subject.questions.create')}}?type=open">
                    <x-svg-icon icon="icon-plus" width="20" height="20" />{{__('exams.create_open_question')}}
                </a>
                <a class="btn-secondary-base btn-create" href="{{route('settings.exam.subject.questions.create')}}?type=multiple_choice">
                    <x-svg-icon icon="icon-plus"  width="20" height="20" />{{__('exams.create_multiple_choice_question')}}
                </a>
            </x-slot:headerRight>
        </x-content.header>

        <div class="relative">
            <div class="selection-overlay hidden absolute top-1 left-16 right-1 bg-white/90 rounded-t-lg px-4 py-3 lg:py-2 flex items-center gap-3 z-[20]">
                <span class="text-md-semibold text-custom-grey-600"><span class="selected-count">0</span> {{ trans('forms.lbl_items_selected') }}</span>
                <x-svg-icon icon="vertical-bar" />

                @if(request()->user()->hasAnyPermission(['delete exams']))
                    <a href="javascript:;" data-uri="{{route('settings.exam.subject.questions.index')}}{{(request()->has('subject_id') ? '?subject_id='.request()->get('subject_id'): '')}}" class="btn-delete-all text-sm-semibold text-custom-orange-500 flex items-center gap-2"><x-svg-icon icon="icon-trash"/><span class="hidden lg:inline-block">{{trans('forms.lbl_delete')}}</span></a>
                @endif
            </div>


            <table id="datatable" class="table-custom-striped w-full" style="width: 100%;">
                <thead>
                    <tr>
                        <th scope="col" width="5">
                            <input class="table-header-checkbox" type="checkbox" name="select_all" id="select-all" value="1">
                        </th>
                        <th scope="col">{{trans("tables.question_title")}}</th>
                        <th scope="col">{{trans("tables.type_title")}}</th>
                        <th scope="col">{{trans("tables.status_title")}}</th>
                        <th scope="col">{{trans("tables.exam_title")}}</th>
                        <th scope="col">{{trans("tables.documents_title")}}</th>
                        <th scope="col" width="10%">{{trans("tables.action_title")}}</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
@stop

{{-- @section('panel-content')
    @include('exam::questions.form', ['edit' => false])
@stop --}}


@section('footer-script')

    <script type="text/javascript">

        var url_segment = "{{(request()->has('subject_id') ? '?subject_id='.request()->get('subject_id'): '')}}";

        PDDataTable({
            url: "{{route('settings.exam.subject.questions.index')}}" + url_segment,
            drawCallback: function(settings, json) {
                AddReadMore();
            },
            columns:[
                { data: 'checkboxgrid', name: 'checkboxgrid', orderable: false, searchable: false, className: "checkbox-column"},
                { data: 'question', name: 'question', className:"add-read-more show-less-content !text-custom-grey-900 !font-medium"},
                { data: 'type', name: 'type'},
                { data: 'status', name: 'status'},
                { data: 'exams', name: 'exams'},
                { data: 'docs', name: 'docs'},
                { data: 'action', name: 'action', orderable: false, searchable : false , className : "text-right"}
            ],
            order : [1, 'asc']
        });

    </script>
@stop