@extends('layouts.app')

@section('styles')
@endsection

@section('content')	      
		   <!-- .page -->
          <div class="page">
            <!-- .page-inner -->
            <div class="page-inner">
              <!-- .page-title-bar -->
              <header class="page-title-bar">
                <!-- .breadcrumb -->
                <nav aria-label="breadcrumb">
                  <ol class="breadcrumb">
                    <li class="breadcrumb-item active">
                      <a href="\">
                        <i class="breadcrumb-icon fa fa-angle-left mr-2"></i>{{ __('Dashboard') }}</a>
					  <a href="\questions">
                        <i class="breadcrumb-icon fa fa-angle-left mr-2"></i>{{ __('Profiles') }}</a>
                    </li>
                  </ol>
                </nav>
                <!-- /.breadcrumb -->
                <!-- title and toolbar -->
                <div class="d-md-flex align-items-md-start">
                  <h1 class="page-title mr-sm-auto"> {{ __('Questions') }}: {{ $profile->trans('profilename') }}</h1>
                    <a href="{{ route('questions.edit', $profile->id) }}" class="btn btn-secondary mr-2">
                      <i class="oi oi-pencil"></i>
                      <span class="ml-1">{{ __('Edit Profile') }}</span>
                    </a>
                    <a href="{{ route('questions.tests', $profile->id) }}" class="btn btn-info mr-2">
                      <i class="oi oi-task"></i>
                      <span class="ml-1">{{ __('Link Tests') }}</span>
                    </a>
                    <button type="button" class="btn btn-light"  data-toggle="modal" data-target="#exportModal">
                      <i class="oi oi-data-transfer-download"></i>
                      <span class="ml-1">{{ __('Export') }}</span>
                    </button>
                </div>
                <!-- /title and toolbar -->
              </header>
              <!-- /.page-title-bar -->
              <!-- Export modal -->
              <div class="modal fade" id="exportModal" tabindex="-1" role="dialog" aria-labelledby="ExportLabel" aria-hidden="true">
              	<!-- .modal-dialog -->
                	<div class="modal-dialog" role="document">
                 	<!-- .modal-content -->
                 	<div class="modal-content">
                			<!-- .modal-header -->
                   		<div class="modal-header">
                      		<h5 class="modal-title">{{ __('Export Questions') }}</h5>
                    		</div>
                        <!-- /.modal-header -->
                       	<!-- .modal-body -->
                        	<div class="modal-body">
                              <p>{{ __('Please indicate in which format you would like the Questions to be exported.') }}</p>
                              <p>{{ __('Exports are available in Excel and CSV.') }}</p>
                      	</div>
                      	<!-- /.modal-body -->
                  		<!-- .modal-footer -->
                   		<div class="modal-footer">
                      		<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="javascript:window.location='/downloadQuestions/{{ $profile->id }}/xlsx'">Excel</button>
							<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="javascript:window.location='/downloadQuestions/{{ $profile->id }}/csv'">CSV</button>
                      		<button type="button" class="btn btn-light" data-dismiss="modal">{{ __('Close') }}</button>
                	    		</div>
                    		<!-- /.modal-footer -->
           			</div>
                   	<!-- /.modal-content -->
              	</div>
              	<!-- /.modal-dialog -->
              </div>
              <!-- /.modal -->
              <!-- .page-section -->
              <div class="page-section">
                <!-- .card -->
                <section class="card card-fluid">
                  <!-- .card-header -->
                  <header class="card-header">
                    <!-- .nav-tabs -->
                    <ul class="nav nav-tabs card-header-tabs">
                      @foreach ($pages as $page)
                          <li class="nav-item">
                            @if ($page->pageNR == 1)
                                <a class="nav-link active show" role="tab" data-toggle="tab" href="#page{{ $page->pageNR }}">{{ __('Page') }} 1</a>
                            @else
                                <a class="nav-link" role="tab" data-toggle="tab" href="#page{{ $page->pageNR }}">{{ $page->pageNR }}</a>
                            @endif
                          </li>
                      @endforeach
                    </ul>
                    <!-- /.nav-tabs -->
                  </header>
                  <!-- /.card-header -->
                  <!-- .card-body -->
                  <div class="card-body">
				  	<div class="tab-content">
					  @foreach ($pages as $page)
						<!-- .tabpanel -->
					    @if ($page->pageNR == 1)
                          <div role="tabpanel" class="tab-pane active" id="page{{ $page->pageNR }}">
                        @else
                          <div role="tabpanel" class="tab-pane" id="page{{ $page->pageNR }}">
                        @endif
                        @if (array_key_exists($page->pageNR, $titles))
					        <div>{{ $titles[$page->pageNR] }}</div>
					    @endif
                            <div class="table-responsive">
                              <!-- .table -->
                              <table class="table">
                                <!-- thead -->
                      			<thead>
                       				<tr>
						 				<th>{{ __('Order') }}</th>
						 				<th>{{ __('Question') }}</th>
                			  			<th>{{ __('Question Type') }}</th>
						  				<th style="width:170px; min-width:170px;">{{ __('Answers') }}</th>
                        			</tr>
                      			</thead>
                                <!-- /thead -->
                                @php
                                    $pagequestions = $questions->where('pageNR', '=', $page->pageNR)->sortBy('orderNR');
                                @endphp
                                <!-- tbody -->
                                <tbody>
                                 @foreach ($pagequestions as $question)
                                  <!-- tr -->
                                  <tr>
                                    <td class="align-middle">
                                      {{ $question->orderNR }}
                                    </td>
                                    <td>
                                      {{ $question->questionText }}
                                    </td>
                                    <td>
                                      {{ $question->questiontypeName }}
                                    </td>
                                    <td class="align-middle px-0" style="width: 1.5rem">
                                      <button type="button" class="btn btn-sm btn-icon btn-light" data-toggle="collapse" data-target="#details-{{ $page->pageNR }}-{{ $question->orderNR }}"><span class="collapse-indicator"><i class="fa fa-angle-down"></i></span></button>
                                    </td>
                                  </tr><!-- /tr -->
                                  <!-- tr -->
                                  <tr class="row-details bg-light collapse" id="details-{{ $page->pageNR }}-{{ $question->orderNR }}">
                                    <td colspan="6">
                                      <!-- .row -->
                                      <div class="row">
                                        <!-- .col -->
                                        <div class="col-md-12">
                                          <table class="table table-bordered">
                                            @php
                                                $pageanswers = $answers->where('pageNR', '=', $page->pageNR)->sortBy('orderNR');
                                            @endphp
                                            <tbody>
                                             @foreach ($pageanswers as $answer)
                                              @if ($answer->QorderNR == $question->orderNR)
                                                <tr>
                                                  <td class="align-middle" style="width:50px;"> {{ $answer->orderNR }} </td>
                                                  <td> {{ $answer->answerText }} </td>
                                                </tr>
                                              @endif
                                             @endforeach
                                            </tbody>
                                          </table>
                                        </div><!-- /.col -->
                                      </div><!-- /.row -->
                                    </td>
                                  </tr><!-- /tr -->
                                  <!-- tr -->
                                  
                                  
                                  
                                 @endforeach
                                  
                                </tbody><!-- /tbody -->
                              </table><!-- /.table -->
                            </div><!-- /.table-responsive -->
						</div>						
                  		<!-- /.tabpanel -->
				  	  @endforeach
				  	</div>
                  	<!-- /.tab-content -->
				  </div>
                  <!-- /.card-body -->
                </section>
                <!-- /.card -->
              </div>
              <!-- /.page-section -->
            </div>
            <!-- /.page-inner -->
          </div>
          <!-- /.page -->
@endsection

@push('scripts')
@endpush