@extends('company.layouts.main')
@section('content')
<main>
   <!-- Content Wrapper. Contains page content -->
   <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row">
         <div class="col-md-12">
         <div class="back-ui">
          <a class="btn btn-outline-info" href="{{ route('virtualExpList.view')}}">Back</a>
          <h2 class="m-0 title">View Survey questions</h2>
          <ol class="breadcrumb float-sm-right ml-auto">
              {{-- <li class="breadcrumb-item active">Starter Page</li> --}}
              <a class="btn btn-info " href="{{ route('surveyQuestion.add',$virtualExpId) }}">Add question</a>
            </ol>
          </div>
         </div>
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
   @if(Session::has('success'))
    <div id="successMessage" class="alert alert-success">{{ Session::get('success') }}</div>
  @endif
    <div class="card">
      <div class="card-body">
        <table id="datatable" class="display">
          <thead>
            <tr align="left">
                <th>ID</th>
                <th>Index</th>
                <th> Question </th>
                <th> Question Type </th>
                <th>action</th>
            </tr>
          </thead>
        <tbody>
        </tbody>
        </table>
      </div>
    </div>
  </div>
</main>
@endsection

@section('script')
 $(function () {
    var table = $('#datatable').DataTable({
        processing: true,
        serverSide: true,
        responsive:true,
        order:['0','asc'],
        ajax: "{{ route('view.surveyQuestion',$virtualExpId) }}",

        "columnDefs": [
        {
            "targets": [ 0 ],
            "visible": false,
            "searchable": true
        },
        ],
            "columns": [
             { data: 'id' },
             { // Index column
                data: null,
                render: function (data, type, row, meta) {
                    // Return row index starting from 0
                    return meta.row + 1
                }
            },
             { data: 'question_text' },
             { data: 'question_type' },

             {data: 'action', name: 'action', orderable: false, searchable: false},
        ],
        createdRow: function (row, data, index) {
            // Set index column data attribute
            $('td:eq(1)', row).attr('data-index', index);
        }
    });
    setTimeout(function() {
    $('#successMessage').fadeOut('fast');
}, 1000);
  });
  @endsection