@extends('../layout/' . $layout)

@section('subhead')
    <title>Atarud MIS - Question Bank</title>
    <link href="{{ asset('dist/css/dataTables.min.css') }}" rel="stylesheet">
@endsection

@section('subcontent')
<div class="flex items-center mt-8">

    {{-- <a href="" data-tw-toggle="modal" data-tw-target="#new-exam" class="btn btn-primary w-24 ml-auto">
        <i data-lucide="plus-circle" class="w-4 h-4 mr-1"></i> Add
    </a> --}}
    <a href="{{route('questionbank.create')}}"  class="btn btn-primary w-24 ml-auto">
        <i data-lucide="plus-circle" class="w-4 h-4 mr-1"></i> Add
    </a>
</div>

    <div class="flex items-center mt-8">
        <h2 class="intro-y text-lg font-medium mr-auto">Question Bank</h2>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-12 table-responsive">
                <table class="table table-bordered questionbank_datatable">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Section</th>
                            <th>Quesiton</th>
                            <th>Type</th>
                            <th>Choice A</th>
                            <th>Choice B</th>
                            <th>Choice C</th>
                            <th>Choice D</th>
                            <th>Answer</th>
                            <th width="100px">Action</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
    @include('../pages/asset/create')
    @include('../pages/asset/edit')
    @include('../pages/asset/delete')
@endsection


@section('script')
    <script src="{{ asset('dist/js/jquery.js') }}"></script>
    <script src="{{ asset('dist/js/dataTables.min.js') }}"></script>

    <script type="text/javascript">
        $(function () {
            var table = $('.questionbank_datatable').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('questionbank') }}",
                columns: [
                    {data: 'id', name: 'id'},
                    {data: 'section_id', name: 'section_id'},
                    {data: 'question', name: 'question'},
                    {data: 'type', name: 'type'},
                    {data: 'choice_a', name: 'choice_a'},
                    {data: 'choice_b', name: 'choice_b'},
                    {data: 'choice_c', name: 'choice_c'},
                    {data: 'choice_d', name: 'choice_d'},
                    {data: 'answer', name: 'answer'},
                    {data: 'action', name: 'action', orderable: false, searchable: false},
                ]
            });
        });
    </script>

<script type="text/javascript">
    function deleteAsset(elem){
        var asset_id = elem.dataset.id;
        jQuery('#delete_id').val(asset_id);

    }
    function edit(elem){
            var asset_id = elem.dataset.id;
            $.ajax({
                method: 'GET',
                url: "{{ url('/asset/edit') }}",
                data: {
                    id: asset_id,
                },
                success: function(response) {
                    jQuery('#asset_id').val(response['id']);
                    jQuery('#title').val(response['title']);
                    jQuery('#desc').val(response['desc']);
                    jQuery('#amount').val(response['amount']);
                    jQuery('#date').val(response['date']);

                }
            });
        }

</script>
@endsection