@extends('companyAdmin.layouts.auth')

@section('title')
{{ env('APP_NAME') }} | Findings Message
@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">
  #myList li{ display:none;
}
#loadMore {
    color:green;
    cursor:pointer;
}
#loadMore:hover {
    color:black;
}
#showLess {
    color:red;
    cursor:pointer;
    display:none;
}
#showLess:hover {
    color:black;
}
  </style>
@endsection

@section('content')
    <!-- MAIN BODY CONTENT -->   
         <div class="top-header">
            <a href="{{ route('companyAdmin.messages.finding') }}">
                  <h1 class="link"><img src="{{ asset('assets/images/back-btn.svg') }}" alt="">Return to Message - Findings </h1>
                </a>
            <div class="filter-group">
            @if($findings_data->is_approve == 2 )                
              <label for="deactive" class="custom-radio-fill">
                <input type="radio" name="selectstatus" value="0" data-id="{{$findings_data->id}}" id="deactive" @if($findings_data->is_approve == 2) checked="checked" @endif class="d-none" >
                <span>Decline</span>
              </label>   
              @endif
              @if($findings_data->is_approve == 1 )           
              <label for="active"  class="custom-radio-fill">
                <input type="radio" name="selectstatus" id="active" value="1" data-id="{{$findings_data->id}}" @if($findings_data->is_approve == 1 ) checked="checked" @endif class="d-none" >
                <span>Approved</span>
              </label> 
              @endif
              @if($findings_data->is_approve == 0 )
               <label for="deactive" class="custom-radio-fill">
                <input type="radio" name="selectstatus" value="0" data-id="{{$findings_data->id}}" id="deactive" @if($findings_data->is_approve == 2) checked="checked" @endif class="d-none" >
                <span>Decline</span>
              </label>
               <label for="active"  class="custom-radio-fill">
                <input type="radio" name="selectstatus" id="active" value="1" data-id="{{$findings_data['id']}}" @if($findings_data['is_approve'] == 1 ) checked="checked" @endif class="d-none" >
                <span>Approved</span>
              </label>

              @endif
            </div>

            </div>
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif  

					<div class="row">
					  <div class="col-md-12">
              <div class="card">
                <div class="card-header"> 
                 <h2>{{ isset($findings_data->title) ? $findings_data->title : '' }}</h2>
              </div>
                <div class="card-body"> 
                  <div class="row challenges-wrap">
                     <div class="col-md-1">                      
                        <img src="{{ url('storage/images/user/web/'.$user_data->image) }}" alt="" class="avatar-lg">
                     </div>
                      <div class="col-md-11">
                        <h4 class="username">{{ $users->name }}</h4>
                      <p class="date"></p>
                      <time class="timeago" datetime="{{ date('Y-m-d h:i:s',strtotime($findings_data->submission_date)) }} "></time>      

                      
                      <form method="post" action="{{ route('companyAdmin.messages.findingMessageEarnpoint') }}" enctype="multipart/form-data">
                       @csrf
                      <div class="form-group">                       
                          <label for="points" class="form-label">Points<span>*</span></label>
                          <input type="number" name="points" id="points"  value="{{ isset( $userEarnPoint->earned_point ) ? $userEarnPoint->earned_point : ''  }}" placeholder="10" min="0" required="required">
                          <input type="hidden" name="finidings_id" value="{{  $findings_data->id  }} ">
                           
                          @if($findings_data->is_approve == 0)
                            <button class="btn btn-primary" disabled="disabled">Save</button>
                          @endif
                          @if(isset($userEarnPoint))
                              <button class="btn btn-primary disabled" disabled="disabled">Save</button>
                          @endif

                          @if($findings_data->is_approve == 1 && (!isset($userEarnPoint)) )                       
                            <button class="btn btn-primary" >Save</button>                                                
                          @endif                            
                            @if(count($get_companyFindingImage) > 0)
                              @foreach($get_companyFindingImage as $key => $value)                            
                                <img id="fingings_img" src="{{ url('storage/images/finding/web/'.$value->image) }}" alt="">
                              @endforeach
                            @endif
                         <p>{{ isset($findings_data->description) ? $findings_data->description : '' }}</p>
                      </div>
                    </form>

                      <form method="post" action="{{ route('companyAdmin.messages.findingMessageSend') }}" enctype="multipart/form-data">
                      @csrf
                      <div class="form-group">
                        <label for="" class="form-label">Reply</label>
                        <input type="hidden" name="main_message_id"  value="{{ $get_findings_message_data->id }}">
                        <input type="hidden" name="findings_id"  value="{{ $findings_data->id}}">
                        <textarea class="form-control" name="message" id="message" placeholder="Message..." required="required"></textarea>
                        
                        <span id="clear" onclick=clearMessage()>Clear Message</span>
                      </div>
                      <div class="form-group">
                          <button class="btn btn-primary btn-block">Send</button>
                      </div>
                    </form>
                 
                        @if(isset($message_array)) 
                        <ul  id="myList">
                          @foreach($message_array as $key => $item)                   
                           <li style="list-style-type: disc;" class="list-message {{ $item['classname'] }}"><span>{{ $item['user_name'] }} ({{  $item['message_date'] }} | {{ $item['message_time'] }})</span> 
                            <p> {{ $item['message'] }} </p></li>
                          @endforeach 
                        </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 -->
				</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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timeago/1.6.3/jquery.timeago.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>
  //var m = moment.utc("{{ date('D, M j h:i A',strtotime($findings_data->submission_date)) }}");
 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 A');

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

   function clearMessage(){
    $("#message").val('');
   }
  

  </script>
<script type="text/javascript">
jQuery(document).ready(function ($) {
   jQuery("time.timeago").timeago();
    size_li = $("#myList li").length;
    x=3;
    if(x == 3) {
    $('#showLess').hide();
    }
    $('#myList li:lt('+x+')').show();

    $('#loadMore').click(function () {
      
        x= (x+5 <= size_li) ? x+5 : size_li;
        
        if(x > 3 && x < $('#myList li').length - 1) {
        $('#showLess').show();
      }
      if( $('#myList li').length == x) {
        $('#loadMore').hide();
      }
      
        $('#myList li:lt('+x+')').show();
       
    });

    $('#showLess').click(function () {
        x=(x-5<0) ? 3 : x-5;
        console.log(x);
        if(x > 3 && x < $('#myList li').length - 1) {
        $('#loadMore').show();
      }
      if( x == 3 ) {
        $('#showLess').hide();
      }
        $('#myList li').not(':lt('+x+')').hide();
    });

    


    $(".d-none").click(function(){
            var radioValue = $("input[name='selectstatus']:checked").val();
            var f_id = $(this).attr('data-id');
            if(radioValue){
               // alert("Your are a - " + id);
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                }
            });
            $.ajax({
                url: "{{ route('companyAdmin.messages.findingMessageApproveDecline') }}",
                method: 'post',
                dataType: 'json',
                data : { 
                    is_active: radioValue,                     
                    f_id: f_id, 
                    _token: $('meta[name="csrf_token"]').attr('content')
                },
                success: function (result) {
                   console.log(result);                  
                    if (result) {
                       location.reload(); 
                    } else {
                        //Do nothing
                    }
                }
            });

            }
        });

});
</script>
@endsection