@extends('layouts.app')

@push('css')


@endpush


@section('content')

<!-- Content Header (Page header) -->
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <div class="d-inline p-2 text-dark" style="font-size: 26px;font-weight: bold">Feedback Answer</div>
               
                @if(!(is_null(Auth::user()->batch_id)) || Auth::user()->role_id == 1 || Auth::user()->role_id == 2)
                <button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#exampleModal"><i class="fas fa-pen-square"></i> Answer Feedback</button>
                @endif

                <!-- Modal -->
                <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                  <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                      <form action="{{route('feedbackanswer.create')}}" method="GET">
                          <div class="modal-header">
                          <h5 class="modal-title" id="exampleModalLabel">Select the Feedback to Answer</h5>
                          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                          </button>
                          </div>
                          <div class="modal-body">
                            <select id="feedback_id" name="feedback_id"  class="modal-body">
                                <option selected>Select Feedback</option>
                                @foreach($feedbacks as $feedback)
                                <option value="{{ $feedback->id }}">{{ $feedback->name }}</option>
                                @endforeach
                            </select>
                          </div>
                          <div class="modal-footer" >
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <div class="d-inline p-2 text-white" id="submit">
                            
                            </div>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>
              <!-- /.Modal -->
                
            </div>
            <div class="col-sm-6">
              <ol class="breadcrumb float-sm-right">
                  <div class="d-inline p-2 text-white text-right">
                      <a href="{{ route('home') }}" class="btn btn-sm btn-info"><i class="fas fa-home"></i> Home</a>
                  </div>
                  <div class="d-inline p-2 text-white text-right">
                      <a href="{{ route('feedbackanswer.index') }}" class="btn btn-sm btn-primary text-right"><i class="fas fa-arrow-circle-left"></i> Back</a>
                  </div>
              </ol>
            </div>
            <!-- /.col -->
            
        </div>
        <!-- /.row -->
    </div>
    <!-- /.container-fluid -->
</div>
<!-- /.content-header -->

<!-- Main content -->
<section class="content">
    <div class="container-fluid">
        <!-- Main row -->
        <div class="row">
            <div class="col-md-12 col-x-12 col-sm-12">
                <table id="datatable" class="table table-bordered">
                    <thead>
                      <tr>
                        <th scope="col">#</th>
                        <th scope="col">Feedback Name</th>
                        <th scope="col">Questions</th>
                        <th scope="col">Answers</th>
                        <th scope="col">Comment</th>
                        <th scope="col">Answered By</th>
                        <th scope="col">Batch Name</th>
                      </tr>
                    </thead>
                    <tbody>
                        @foreach ($feedback_answers as $key=>$feedback_answer)
                        <tr>
                            <th scope="row">{{ $key+1 }}</th>
                            <td>{{ $feedback_answer->feedbacks->name }} </td>
                            <td>{{ $feedback_answer->feedback_questions->question }} </td>
                            <td>{{ $feedback_answer->answers }}</td>
                            <td>{{ $feedback_answer->comment }}</td>
                            <td>{{ $feedback_answer->users->full_name }}</td>
                            <td>{{ $feedback_answer->batches->name }}</td>
                        </tr>
                        @endforeach

                        
                    </tbody>
                  </table>
            </div>
        </div>
        <!-- /.row (main row) -->
    </div>
    <!-- /.container-fluid -->
</section>
<!-- /.content -->

@endsection

@push('js')

<script>
  document.getElementById('feedback_id').onclick = function(){
  var output = document.getElementById('submit');
  output.innerHTML = '<button type="submit" class="btn btn-md btn-primary">Answer Now</button>';
  };
</script>

@endpush