@extends('companyAdmin.layouts.auth')

@section('title')
{{ env('APP_NAME') }} | Message Details
@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">
  #loadMore {
  width: 200px;
  color: #fff;
  display: block;
  text-align: center;
  margin: 20px auto;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  background-color: blue;
  transition: .3s;
}
#loadMore:hover {
  color: blue;
  background-color: #fff;
  border: 1px solid blue;
  text-decoration: none;
}
.noContent {
  color: #000 !important;
  background-color: transparent !important;
  pointer-events: none;
}
  </style>
@endsection

@section('content')
    <!-- MAIN BODY CONTENT -->
          <div class="top-header">
            <input type="hidden" name="message_id" value="{{ $messageDetails->id }}" >
            <a href="{{ route('companyAdmin.messages.challenges') }}">
              <h1 class="link"><img src="{{ asset('assets/images/back-btn.svg') }}" alt=""> Return to Messages</h1>
            </a>
          </div>
          <div class="row">
            <div class="col-md-12">
              <div class="card">
                <div class="card-header">                            
                  <h2>                    
                    {{ $messageDetails->challenge_name }} - {{ $messageDetails->challenge_category }}
                  </h2>                  
                </div>
                <div class="card-body">
                  <div class="row challenges-wrap">
                    <div class="col-md-1">
                      <img src="{{ url('storage/images/user/web/'.$messageDetails->user_image) }}" alt="" class="avatar-lg">
                    </div>
                    <div class="col-md-11">
                      <h4 class="username">{{ $messageDetails->first_name }} {{ $messageDetails->last_name }}</h4>
                      <p class="date"></p>
                      <p><b>Question</b></p>
                      <p>{{ $messageDetails->challenge_question }}</p>
                                            <p><b>Submitted Answer</b></p>
                                            <div style="background-color: {{ $bgcolor  }}; padding: 10px;">
                      <p>{{ $submitted_answer_option }}</p>
                      <p>{{ $submitted_answer }}</p>
                      </div>
                                            <p style="color:red;"><b>Your Answer is wrong</b></p>
                      
                      <form method="post" action="{{ route('companyAdmin.messages.challengeMessageSend') }}" enctype="multipart/form-data">
                         @csrf
                      <div class="form-group reply">
                      <p class="reply">Reply</p>
                      <input type="hidden" name="message_id" id="message_id" value="{{ $messageDetails->id}}">
                      <input type="hidden" name="challenge_id" id="challenge_id" value="{{ $messageDetails->challenge_id}}">                      
                      <!-- <textarea name="message_reply" id="message_reply" cols="" rows="" class="form-control" disabled>{{ $messagereplydata->message??''}}</textarea> -->
                      <!-- <textarea name="message_reply" id="message_reply" cols="" rows="" class="form-control" disabled>{{ $messageDetails->message_reply}}</textarea> -->
                      <textarea name="message" id="message" cols="" rows="" class="form-control" required="required"></textarea>
                    </div>
                       <div class="msg-footer justify-content-between"> 
                        <span id="clear" onclick="clearMessage()"><i class="fa fa-trash"></i> Clear Message</span>
                        <button class="btn btn-blue ml-5">Send</button>
                      </div> 
                    </form>

                      

                     @if(count($message_array) > 0)
                      @if(isset($message_array))   
                       <div id="myList" class="msg-history">
                          <h5 class="msg-title">Messages history</h5>
                          @foreach($message_array as $key => $item)  
                          <div class="msg-card {{ $item['classname'] }}" style="display: none;">
                            <h5 class="msg-name"><strong>{{ $item['user_name'] }}:</strong> ({{  $item['message_date'] }} | {{ $item['message_time'] }})</h5>
                            @if(isset($item['message']))
                             <p>{{ $item['message'] }} </p>
                            @endif                            
                          </div>
                           @endforeach                       
                          <!-- loadmore  -->
                          <a href="#" id="loadMore">Load More</a>
                       </div>
                        @endif 
                      @endif 

                    </div>
                  </div>
                </div>
            </div>
          </div>
          <!--// MAIN BODY CONTENT -->
        </div>
@endsection

@section('scripts')


<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.28/moment-timezone-with-data.min.js"></script>


<!-- 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>
function clearMessage(){
    $("#message").val('');
   }
 var m = moment({{ $f_date }}*1000);
console.log(m.format());
var dayOfWeek = m.format('ddd'); // Friday
var dayOfMonth = m.date(); // 31
var shortMonthName = m.format('MMM'); // Mar
var shortYear = m.format('YY'); // 17
var minutes = m.minutes(); // 45
var mode = moment(m).format('hh:mm:ss A');

var submission_date = dayOfWeek+', '+shortMonthName+' '+dayOfMonth+' '+mode;
console.log(submission_date);
$('.date').html(submission_date);


    $(document).ready(function () {
    });
</script>
<script type="text/javascript">
$(document).ready(function(){
  
  $(".msg-card").slice(0, 2).show();
  $("#loadMore").on("click", function(e){
    e.preventDefault();
    $(".msg-card:hidden").slice(0, 2).slideDown();
    if($(".msg-card:hidden").length == 0) {
      $("#loadMore").text("No Content").addClass("noContent");
    }
  });
  
});
</script>
@endsection