@extends('admin.dashboard')

@section('title', 'Answers')
@section('stylesheets')
  <link rel="stylesheet" href="/css/admin/dist/dataTables.bootstrap.css">
@endsection

@section('content')

<div class="content-header">
   <h1>
    Dashboard
    <small>OPALESCE Version 1.0</small>
    </h1>
    {!! Breadcrumbs::render('answers') !!}
</div>

<div class="row">
  <div class="col-xs-12">
    <div class="box">
      <div class="box-header">
        <h3 class="box-title">Data Table With All Answers</h3>
      </div>
      <!-- /.box-header -->
      <div class="box-body">
        <table id="microunits-table" class="table table-bordered table-striped">
          <thead>
          <tr>
            <th style="width:30%;">Question</th>
            <th style="width:40%;">Answer</th>
            <th>Correct</th>
            <th>Created</th>
            <th>CRUD</th>
          </tr>
          </thead>
          <tbody>
          @foreach ($answers as $answer)
            <tr>
              <td>{{$answer->question->question}}</td>
              <td>{{$answer->answer}}</td>
              <td class="{{$answer->correct === 1 ? "text-red" : ""}}">{{$answer->correct == 1 ? "Yes" : "No"}}</td>
              <td>{{ date('j M. Y', strtotime($answer->created_at)) }}</td>
              <td>
                  <a href="{{route('admin.answer.create')}}" class="btn btn-xs btn-success">
                    <span class="glyphicon glyphicon-plus"></span>
                  </a>
                  <a href="{{route('admin.answer.edit', $answer->id)}}" class="btn btn-xs btn-warning">
                    <span class="glyphicon glyphicon-pencil"></span>
                  </a>
                  {!! Form::open(['route' => ['admin.answer.destroy', $answer->id], 'method' => 'DELETE', 'id' => 'form-delete-m-'.$answer->id, 'style'=>'display:inline-block']) !!}
                    <a href="" class="data-delete btn btn-xs btn-danger" data-form="{{$answer->id}}">
                      <i class="glyphicon glyphicon-trash"></i>
                    </a>
                  {!! Form::close() !!}
              </td>
            </tr>
          @endforeach
          </tbody>
          <tfoot>
          <tr>
            <th>Question</th>
            <th>Answer</th>
            <th>Correct</th>
            <th>Created</th>
            <th>CRUD</th>
          </tr>
          </tfoot>
        </table>
      </div><!-- /.box-body -->
    </div><!-- /.box -->
  </div><!--.col-xl-12 -->
</div><!--.row -->
@endsection

@section('javascripts')
  <script src="/js/admin/dist/jquery.dataTables.min.js"></script>
  <script src="/js/admin/dist/dataTables.bootstrap.min.js"></script>
  <script type="text/javascript">
  $(function () {
    $("#microunits-table").DataTable({
        "order": [[ 4, "desc" ]]
    });

    $('.data-delete').on('click', function (e) {
      if (!confirm('Are you sure you want to delete?')) return;
      e.preventDefault();
      $('#form-delete-m-' + $(this).data('form')).submit();
    });

  });
  </script>
@endsection