@extends('companyAdmin.layouts.auth')

@section('title')
{{ env('APP_NAME') }} | Employee Challenge Response
@endsection

@section('styles')
<!-- Data table css -->
  <link href="{{ asset('assets/plugins/datatable/dataTables.bootstrap4.min.css') }}" rel="stylesheet" />
  <link href="{{ asset('assets/plugins/datatable/jquery.dataTables.min.css') }}" rel="stylesheet" />

  <style type="text/css">
    .admin-message, .employee-message {
      border-color: #ccc;
      background-color: #ddd;
      margin: 10px 0;
      border-radius: 5px;
    }

    .message-box {
      max-height:400px;
      overflow-y: scroll;
      border: 1px solid #ddd;
      border-radius: 15px;
      padding: 10px;
    }
  </style>
@endsection

@section('content')
    <!-- MAIN BODY CONTENT -->

        @if ($errors->any())
          <div class="alert alert-danger">
            <ul>
            @foreach ($errors->all() as $error)
              <li>{{ $error }}</li>
            @endforeach
            </ul>
          </div>
        @endif        
          <div class="top-header">
            <a href="{{ route('companyAdmin.messages.challenges') }}">
              <h1 class="link"><img src="{{ asset('assets/images/back-btn.svg') }}" alt=""> Return to Messages</h1>
            </a>

            <div class="filter-group">
              @if($employeeAnswerDetails->challenge_taking_type_id == $challengeTakingType['photoTakingChallenge'])
                @if($employeeAnswerDetails->is_approved == $challengeApprovedStatus['approved'])
                  <label for="active"  class="custom-radio-fill">
                    <input type="radio" id="active" data-mid="" value="{{ $challengeApprovedStatus['approved'] }}" data-uid="" data-id="" checked="checked" class="d-none">
                    <span>Approved</span>
                  </label>
                @elseif($employeeAnswerDetails->is_approved == $challengeApprovedStatus['rejected'])
                  <label for="deactive" class="custom-radio-fill">
                    <input type="radio" value="{{ $challengeApprovedStatus['rejected'] }}" data-mid="" data-uid="" data-id="" id="deactive" checked="checked" class="d-none" >
                    <span>Decline</span>
                  </label>
                @elseif($employeeAnswerDetails->is_approved == $challengeApprovedStatus['pending'])
                  <form method="post" action="{{ route('companyAdmin.messages.challenges.approveDecline') }}" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="answer_id" value="{{ $employeeAnswerDetails->id }}" >
                    
                    <label for="deactive" class="custom-radio-fill">
                      <input type="radio" name="message_action" value="{{ $challengeApprovedStatus['rejected'] }}" data-mid="" data-uid="" data-id="" id="deactive" class="d-none" >
                      <span>Decline</span>
                    </label>
                    <label for="active"  class="custom-radio-fill">
                      <input type="radio" name="message_action" id="active" data-mid="" value="{{ $challengeApprovedStatus['approved'] }}" data-uid="" data-id="" class="d-none" >
                      <span>Approved</span>
                    </label>
                  </form> 
                @endif
              @endif
            </div>            
          </div>
          
          <div class="row">
            <div class="col-md-12">
              <div class="card">
                <div class="card-header">
                  <h2>
                    @if($employeeAnswerDetails->challenge_taking_type_id == $challengeTakingType['photoTakingChallenge'])
                      {{ $employeeAnswerDetails->getChallenge->challenge_name??'' }}
                    @else
                      {{ $employeeAnswerDetails->getChallenge->challenge_question??'' }}
                    @endif
                     - {{ $employeeAnswerDetails->getChallenge->getChallengeCategory->name??'' }}
                  </h2>
                </div>
                <div class="card-body">
                  <div class="row challenges-wrap">
                    <div class="col-md-1">
                      <img src="{{ url('storage/images/user/web/'.($employeeAnswerDetails->getEmployee->userProfile->image??'')) }}" alt="" class="avatar-lg">
                    </div>
                    <div class="col-md-11">
                      <div class="row">
                        <div class="col-md-12">
                          <h4 class="username">{{ $employeeAnswerDetails->getEmployee->name??'' }}</h4>
                          <p><span class="datetime" dateFormat="llll">{{ $employeeAnswerDetails->submission_datetime }}</span> (<span class="datetimeAgo">{{ $employeeAnswerDetails->submission_datetime }}</span>)</p>
                        </div>
                      </div>

                      @if($employeeAnswerDetails->challenge_taking_type_id == $challengeTakingType['photoTakingChallenge'])
                        <img src="{{ url('storage/images/challenge/phototaking/web/'.($employeeAnswerDetails->challenge_image??'')) }}" alt="" class="chlng-img">
                      @else
                        <br>
                        <div class="row">
                          <div class="col-md-12">
                            <h5>Question</h5>
                            <span>{{ $employeeAnswerDetails->getChallenge->challenge_question??'' }}</span>
                          </div>
                        </div>
                        
                        @php
                          $answerArr['option_number'] = 'Option ';
                          $answerArr['option_value'] = '';
                        @endphp

                        @if($employeeAnswerDetails->getChallenge->getChallengeOptions)
                          @foreach($employeeAnswerDetails->getChallenge->getChallengeOptions as $key => $option)
                            @if($employeeAnswerDetails->challenge_question_answer_id == $option->id)
                              @php
                                $answerArr['option_number'] .= $key+1;
                                $answerArr['option_value'] = $option->answer??'';
                              @endphp
                            @endif

                            <hr>
                            <div class="row">
                              <div class="col-md-12">
                                <h5>Option {{ $key+1 }} {{ $option->is_correct?' - Correct Answer':'' }}</h5>
                                <p class="{{ $option->is_correct?'text-success':''}}">{{ $option->answer??'' }}</p>
                              </div>
                            </div>
                          @endforeach
                        @endif
                      
                        <hr>
                        <div class="row">
                          <div class="col-md-12">
                            <h5>Submitted Answer</h5>
                            <div class="p-3 mb-2 {{ $employeeAnswerDetails->is_correct_answer?'bg-success':'bg-danger' }} text-white">
                              <p><b>{{ $answerArr['option_number']??'' }}</b></p>
                              <p>{{ $answerArr['option_value']??'' }}</p>
                            </div>
                          </div>
                        </div>

                        @if($employeeAnswerDetails->is_correct_answer)
                          <b class='text-success'>Submitted Answer is correct</b>
                        @else
                          <b class='text-danger'>Submitted Answer is wrong</b>
                        @endif
                      @endif
                      
                      @if($employeeAnswerDetails->challenge_taking_type_id == $challengeTakingType['photoTakingChallenge'])
                      <form method="post" action="{{ route('companyAdmin.messages.challengeMessageSend') }}" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="answer_id" value="{{ $employeeAnswerDetails->id }}" >
                        <p class="reply">Reply</p>
                        <div class="form-group">
                          <textarea name="message" id="message" cols="" rows="" class="form-control" required="required" placeholder="Message..."></textarea>
                          <button class="btn btn-blue">Send</button>
                        </div>
                      </form>
                      @endif
                      <!-- Start Message threads -->
                      @if($messageThreads)
                        <hr>
                        <div class="row">
                          <div class="col-md-12">
                            <h5>Messages:</h5>
                          </div>
                        </div>

                        <div class="row message-box">
                          <div class="col-md-12">
                            @foreach($messageThreads as $key => $thread)
                              @if($thread->sender_type == $userRoleType['companyadmin'])
                                <div class="row">
                                  <div class="col-md-2"></div>
                                  <div class="col-md-10 admin-message">
                                    <div class="row ">
                                      <div class="col-md-12 d-flex justify-content-end">
                                        {{ $thread->message }}
                                      </div>
                                      <div class="col-md-12 d-flex justify-content-end font-weight-light font-italic">
                                        <p class="datetime" dateFormat="llll">{{ $thread->created_at }}</p>
                                      </div>
                                      <div class="col-md-12">
                                        <p>&nbsp;</p>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              @elseif($thread->sender_type == $userRoleType['employee'])
                                <div class="row">
                                  <div class="col-md-10 employee-message">
                                    <div class="row">
                                      <div class="col-md-12 d-flex justify-content-start text-primary">
                                        @if(isset($thread['message']))
                                          {{ $thread['message'] }}
                                        @endif
                                        @if(isset($thread['image']))
                                         <img id="fingings_img" src="{{ url('storage/images/messages/web/'.$thread['image']) }}" alt="" class="chlng-img">
                                        @endif
                                      </div>
                                      <div class="col-md-12 d-flex justify-content-start font-weight-light font-italic">
                                        <p class="datetime" dateFormat="llll">{{ $thread->created_at }}</p>
                                      </div>
                                      <div class="col-md-12">
                                        <p>&nbsp;</p>
                                      </div>
                                    </div>
                                  </div>
                                  <div class="col-md-2"></div>
                                </div>
                              @endif
                            @endforeach
                          </div>
                        </div>
                      @endif

                      @if(isset($message_array))
                      </ul>
                        @if(count($message_array) >= 3)
                          <div id="loadMore">Load more</div>
                          <div id="showLess">Show less</div>
                        @endif
                     @endif
                    </div>
                  </div>
                </div>
            </div>
          </div>
    <!--// MAIN BODY CONTENT -->
@endsection

@section('scripts')

<!-- Data tables -->
<script src="{{ asset('assets/plugins/datatable/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatable/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('assets/plugins/responsive-tab/easy-responsive-tabs.js') }}"></script>
<script src="{{ asset('assets/plugins/responsive-tab/responsive-tab.js') }}"></script>

<script type="text/javascript">
  
  $("input[name=message_action").on("click", function(event) {
    if(confirm('Are you sure to continue?')) {
      $(this).closest("form").submit();
    }

    $(this).prop("checked", false);
  })

  $( window ).on("load", function() {
    $('.message-box').scrollTop($('.message-box').prop("scrollHeight"));
      var dateFormat = "";
      var convertedDateTime = '';
      var datetime = '';
      var convertedDateTimeAgo = '';

      $(".datetime").each(function() {
          datetime = $(this).text();
          dateFormat = "DD/MMM/YYYY hh:mmA";
          
          if(this.hasAttribute('dateFormat')) {
            dateFormat = $(this).attr('dateFormat');
          }

          convertedDateTime = utcToLocalDatetimeConverter(datetime, dateFormat);
          $(this).text(convertedDateTime);
      });

      $(".datetimeAgo").each(function() {
        datetime = $(this).text();
        convertedDateTime = utcToLocalDatetimeConverter(datetime);
        convertedDateTimeAgo = datetimeAgo(convertedDateTime);
        $(this).text(convertedDateTimeAgo);
      });
  });


</script>
@endsection