@extends('companyAdmin.layouts.auth')

@section('title')
{{ env('APP_NAME') }} | Employee 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 -->

        @if ($errors->any())
          <div class="alert alert-danger">
            <ul>
            @foreach ($errors->all() as $error)
              <li>{{ $error }}</li>
            @endforeach
            </ul>
          </div>
        @endif       
    
        <form method="post" action="{{ route('companyAdmin.messages.challengeMessageSendNew') }}" enctype="multipart/form-data">
          <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($messageDetails->message_status == 2)
          <label for="deactive" class="custom-radio-fill">
            <input type="radio" name="message_action" value="2"  data-mid="{{ $messageDetails->id }}" data-uid="{{ $messageDetails->u_id }}" data-id="{{ $messageDetails->challenge_id }}" id="deactive" @if($messageDetails->message_status == 2) checked="checked" @endif class="d-none" >
            <span>Decline</span>
          </label>   
          @endif
           @if($messageDetails->message_status == 1)    
          <label for="active"  class="custom-radio-fill">
            <input type="radio" name="message_action" id="active" value="1" data-mid="{{ $messageDetails->id }}" data-uid="{{ $messageDetails->u_id }}" data-id="{{ $messageDetails->challenge_id }}" @if($messageDetails->message_status  == 1 ) checked="checked" @endif class="d-none" >
            <span>Approved</span>
          </label> 
         @endif
         @if($messageDetails->message_status == 0)
           <label for="deactive" class="custom-radio-fill">
            <input type="radio" name="message_action" value="2" data-mid="{{ $messageDetails->id }}" data-uid="{{ $messageDetails->u_id }}" data-id="{{ $messageDetails->challenge_id }}" id="deactive" @if($messageDetails->message_status == 2) checked="checked" @endif class="d-none" >
            <span>Decline</span>
          </label>
           <label for="active"  class="custom-radio-fill">
            <input type="radio" name="message_action" id="active" data-mid="{{ $messageDetails->id }}" value="1" data-uid="{{ $messageDetails->u_id }}" data-id="{{ $messageDetails->challenge_id }}" @if($messageDetails->message_status == 1 ) checked="checked" @endif class="d-none" >
            <span>Approved</span>
          </label>
          @endif
         
      </div>

       
          </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">{{ date('D, M j h:i A',strtotime($messageDetails->message_date)) }}</p>
                      <img src="{{ url('storage/images/challenge/phototaking/web/'.$c_image->challenge_image) }}" alt="" class="chlng-img">
                      <p>{{ $messageDetails->challenge_message }}</p>
                      
                       @csrf
                        <input type="hidden" name="message_id" value="{{ $messageDetails->id }}" >
                        <input type="hidden" name="challenge_id" value="{{ $messageDetails->challenge_id }}" >
                        <input type="hidden" name="u_id" value="{{ $messageDetails->u_id }}" >
                      <div class="form-group reply">
                      <p class="reply">Reply</p>                      
                        <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>
                      
                      @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($item['message'])
                          <p> {{ $item['message'] }} </p>
                          @endif
                          @if(isset($item['image']))
                          <img src="{{ url('storage/images/messages/web/'.$item['image']) }}" alt="" class="reply-img">
                          @endif                       
                      </div>
                       @endforeach 
                      <!-- loadmore  -->
                      <a href="#" id="loadMore">Load More</a>                        
                    
                    </div>
                     @endif 
                      @endif 
                  </div>
                </div>
            </div>
          </div>
          <!--// MAIN BODY CONTENT -->
        </div>
      </form>      
@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">
function clearMessage(){
    $("#message").val('');
   }
$(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