@extends('locationAdmin.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;
  }

.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 -->   
         <div class="top-header">
                <a href="{{ route('locationAdmin.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="selectstatus1" 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="selectstatus1" 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 )
              <form method="post" action="{{ route('locationAdmin.messages.findingMessageApproveDecline') }}" enctype="multipart/form-data">
              @csrf
                <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 testCheck" >
                  <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" > -->
                  <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 testCheck" >
                  <span>Approved</span>
                </label>
              </form>
              @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('locationAdmin.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 == 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="" class="chlng-img">
                              @endforeach
                            @endif
                         <p>{{ isset($findings_data->description) ? $findings_data->description : '' }}</p>
                      </div>
                    </form>
                      
                      <form method="post" action="{{ route('locationAdmin.messages.findingMessageSend') }}" enctype="multipart/form-data">
                      @csrf
                      <p class="reply">Reply</p>
                      <div class="form-group">
                        <input type="hidden" name="main_message_id"  value="{{ isset($get_findings_message_data->id) ? $get_findings_message_data->id : '' }}">
                        <input type="hidden" name="findings_id"  value="{{ $findings_data->id}}">
                          <textarea name="message" id="message" cols="" rows="" class="form-control" required="required" placeholder="Message..."></textarea>
                          <span id="clear" onclick="clearMessage()" style="cursor: pointer;"><i class="fa fa-trash"></i>Clear Message</span>
                          <button class="btn btn-blue">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   -->
                       
                        @if($message_array)
                        <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($message_array as $key => $thread)
                           
                              @if($thread['sender_type'] == $userRoleType['locationadmin'])
                              
                                <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['message_date'] }}</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">
                                        {{ $thread['message'] }}
                                      </div>
                                      <div class="col-md-12 d-flex justify-content-start font-weight-light font-italic">
                                        <p class="datetime" dateFormat="llll">{{ $thread['message_date'] }}</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
                  </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>
   function clearMessage(){
    $("#message").val('');
   }
  

  </script>
<script type="text/javascript">
  
  $("input[name=selectstatus").on("click", function(event) {
    if(confirm('Are you sure to continue?')) {
      if ($(this).prop("checked")) {
        var checkboxVal = $(this).val();
        var pointVal    = $('#points').val();
        var radioValue  = $("input[name='selectstatus']:checked").val();
        var f_id        = $(this).attr('data-id');
        if(checkboxVal == 1 && pointVal == ''){
          alert('Plese add some Point');
        }else{
          //$(this).closest("form").submit();
          $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                }
            });
            $.ajax({
                url: "{{ route('locationAdmin.messages.findingMessageApproveDecline') }}",
                method: 'post',
                dataType: 'json',
                data : { 
                    is_active: radioValue,                     
                    f_id: f_id, 
                    pointVal : pointVal,
                    _token: $('meta[name="csrf_token"]').attr('content')
                },
                success: function (result) {
                   console.log(result);                  
                    if (result) {
                       location.reload(); 
                    } else {
                        //Do nothing
                    }
                }
            });
        }
      }
    }

    $(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