@extends('author.dashboard')

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

@section('content')

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

<div class="row">
  <div class="col-lg-12">
    <div class="box">

      <div class="box-header">
        <h3 class="box-title">Data Table With All Questions of Microunit: <span class="text-bold text-red">{{$microunit->muid}}</span></h3>
        <a href="{{route('authpanel.question.create', $microunit->id)}}" class="btn btn-success pull-right"><i class="fa fa-plus"></i> Add Question</a>
      </div>

      <div class="box-body">
        <table class="table table-striped table-hover table-bordered" id="questions-table">
          <thead>
          <tr>
            <th>ID</th>
            <th>Question</th>
            <th>Created at</th>
            <th>Actions</th>
          </tr>
          </thead>
          <tbody>
          @foreach ($microunit->questions as $question)
            <tr>
              <td>{{$question->id}}</td>
              <td style="width:70%;">
                  <div>
                    <div class="panel-title">
                      <a class="accordion-toggle" data-toggle="collapse" aria-expanded="false" data-parent="#accordion" href="#collapse-{{$question->id}}">
                        <span class="glyphicon glyphicon-menu-right"></span>
                        <span class="text-red">Question:</span> {{$question->question}} - <span data-toggle="tooltip" title="" class="badge bg-yellow" data-original-title="{{$question->answers->count()}} Answers">{{$question->answers->count()}}</span>
                      </a>
                    </div>
                  </div>
                  <div id="collapse-{{$question->id}}" class="panel-collapse collapse out">
                    <div class="panel-body">
                      <div class="col-lg-12">
                      @if ($question->answers->count())
                        <div class="box">
                          <div class="box-header">
                            <h3 class="box-title text-red">Answers</h3>
                          </div><!-- /.box-header -->
                          <div class="box-body table-responsive no-padding">
                            <table class="table table-hover">
                              <tbody>
                              <tr>
                                <th>ID</th>
                                <th>Answer</th>
                                <th>Correct</th>
                                <th>Actions</th>
                              </tr>
                              @foreach ($question->answers as $answer)
                              <tr>
                                <td>{{$answer->id}}</td>
                                <td style="width: 60%;">{{$answer->answer}}</td>
                                <td><span class="mu-main-info {{$answer->correct == 1 ? "btn btn-sm btn-success" : " btn btn-sm btn-danger"}}">{{$answer->correct == 1 ? "Yes" : "No"}}</span></td>
                                <td>
                                  <a href="#"
                                    class="btn btn-sm btn-warning"
                                    data-toggle="modal"
                                    data-target="#confirmEditAns-{{$answer->id}}">
                                    <i class="fa fa-pencil padding-right"></i>Edit
                                  </a>@include('author.questions.modals.editansw')

                                  <button class="btn btn-sm btn-danger"
                                    data-toggle="modal"
                                    data-target="#confirmDeleteAns-{{$answer->id}}">
                                    <span class="glyphicon glyphicon-trash padding-right"></span> Delete
                                  </button>
                                  @include('author.questions.modals.deleteansw')
                                </td>
                              </tr>
                              @endforeach
                              </tbody>
                            </table>
                          </div><!-- /.box-body -->
                        </div><!-- /.box -->
                      @else
                      <div class="col-lg-12">
                        <div class="alert alert-info alert-dismissible">
                          <h4><i class="icon fa fa-info"></i> Alert!</h4>
                          No Answers.
                        </div>
                      </div>
                      @endif
                    </div>
                  </div><!--.panel-body -->
                </div><!-- .collapse -->
              </td>
              <td>{{ date('j M. Y', strtotime($question->created_at)) }}</td>
              <td>
                <a href="#"
                  class="btn btn-sm btn-warning"
                  data-toggle="modal"
                  data-target="#confirmEdit-{{$question->id}}"><i class="fa fa-pencil"></i> Edit
                </a>@include('author.questions.modals.edit')

                <a class="btn btn-sm btn-danger"
                  data-toggle="modal"
                  data-target="#confirmDelete-{{$question->id}}">
                  <span class="glyphicon glyphicon-trash padding-right"></span> Delete
                </a>
                @include('author.questions.modals.delete')

                <a href="#" class="btn btn-sm btn-success" data-toggle="modal"
                  data-target="#confirmAdd-{{$question->id}}">
                  <i class="fa fa-plus padding-right"></i>Add Answer
                </a>
                @include('author.questions.modals.addansw')
              </td>
            </tr>
          @endforeach
          </tbody>
          <tfoot>
          <tr>
            <th>ID</th>
            <th>Question</th>
            <th>Created at</th>
            <th>Actions</th>
          </tr>
          </tfoot>
        </table>
      </div> <!-- .box-body -->

    </div> <!-- .box -->
  </div> <!-- .col-lg-12 -->
</div> <!-- .row -->


@endsection

@section('javascripts')
  <script src="/js/admin/dist/bootvalidation.js"></script>
  <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 () {

    $("#questions-table").DataTable({
        "order": [[ 2, "desc" ]]
    });

    $('.collapse').on('shown.bs.collapse', function(){
      $(this).parent().find(".glyphicon-menu-right").removeClass("glyphicon-menu-right").addClass("glyphicon-menu-down");
    }).on('hidden.bs.collapse', function(){
      $(this).parent().find(".glyphicon-menu-down").removeClass("glyphicon-menu-down").addClass("glyphicon-menu-right");
    });

  });
  </script>
@endsection