@extends('companyAdmin.layouts.auth')

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

<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 -->
         <div class="top-header">
            <a href="{{ route('companyAdmin.messages.employees') }}">
                  <h1 class="link"><img src="{{ asset('assets/images/back-btn.svg') }}" alt="">Return to Employees</h1>
                </a>
            </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>Message</h2>

              </div>
                <div class="card-body"> 
                  <div class="row challenges-wrap">
                    <div class="col-md-1">
                    <img src="{{ url('storage/images/user/web/'.$employeeDetails->userProfile->image) }}" alt="" class="avatar-lg"> 
                    </div>
                    <div class="col-md-11"> 
                    <h4 class="username">{{ $employeeDetails->name }}</h4>
                    <p>&nbsp;</p>  
                    <!-- <p class="date"></p> -->
                    
                  <form method="post" action="{{ route('companyAdmin.messages.sendmessageToEmployee')}}" enctype="multipart/form-data">
                    @csrf
                    <div class="form-group">
                      <label for="" class="form-label">Reply</label>
                      <input type="hidden" name="employee_id" value="{{ encript_decript_data($employee_id,'encript' ,2) }}">
                      <textarea class="form-control" name="message" id="message" placeholder="Write Message..."></textarea>
                    </div>  
                     <div class="upload admin">
                        <label for="msg_img">
                          <input type="file" class="d-none" name="msg_img" id="msg_img" onchange="loadProfileImage(event)">
                            <img id="output_img" src="{{ asset('assets/images/user.svg') }}" alt="">
                              <img src="{{ asset('assets/images/upload-photo.svg') }}" alt="" class="add">
                        </label>
                        <span id="remove_image" style="display:none;">X</span>
                        <p class="label">Upload Message Image</p>
                    </div>

                      <span id="clear" onclick="clearMessage()" style="cursor: pointer;"><i class="fa fa-trash"></i>Clear Message</span>
                      <p id="alert_message" style="display:none; color:#d14d00"></p>
                    <div class="form-group">
                        <button class="btn btn-primary btn-block">Send</button>
                    </div>
                  </form>

                <!-- Start Message threads -->                
                <div class="message-threads-box"></div>

              </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>
<script>
  function clearMessage(){
    $("#message").val('');
  }  

</script>
<script type="text/javascript">

var loadProfileImage = function(event) {  
        var output = document.getElementById('output_img');
        output.src = URL.createObjectURL(event.target.files[0]);
        output.onload = function() {
          URL.revokeObjectURL(output.src) // free memory
        }
    };
    
$( window ).on("load", function() {
    //console.log(moment.tz.setDefault(moment.tz.guess()));
    //console.log(moment.tz.guess());
    getMessageThreads();
});

    function getMessageThreads() {
      $.ajaxSetup({
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
          }
      });
      $.ajax({
          url: "{{ route('companyAdmin.messages.employeemessagedetails', encript_decript_data($employeeDetails->id, 'encript' , 2)) }}",
          method: 'get',
          data : {
              timezone: moment.tz.guess(),
              _token: $('meta[name="csrf_token"]').attr('content')
          },
          success: function (result) {
              $(".message-threads-box").html(result);
              $('.message-box').scrollTop($('.message-box').prop("scrollHeight"));
          }
      });
    }
$(document).ready(function () {

    $('#message').keyup(function(){
        if($(this).val().length !=0){
            $('#msg_img').attr('disabled', 'disabled');
            $('#alert_message').text('please send the photo, or please send the text message').show();
        }
        else
        {   
            $('#alert_message').hide();
            $('#msg_img').removeAttr('disabled');  
        }
    });

    $('#msg_img').bind('change', function() {      
     // alert(this.files[0].size);
      if(this.files[0].size > 0){
         $('#remove_image').show(); 
         $("#message").prop('disabled', true);
         $('#alert_message').text('please send the photo, or please send the text message').show();
      }else{
         $('#alert_message').hide();
         $("#message").prop('disabled', false);
      }

  });
  $('#remove_image').click(function () {
    //alert('vfchgf');
      $('#msg_img').val('');  
      $('#output_img').attr('src', '{{ asset("assets/images/user.svg") }}');
      $('#remove_image').hide(); 
      $("#message").prop('disabled', false);
  });
});
</script>
@endsection