@extends('locationAdmin.layouts.auth')

@section('title')
{{ env('APP_NAME') }} | Location Admin 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">
    .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 -->

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

          <div class="top-header">
            
              <h1 class="link"> Employee </h1>
                  
          </div>
          
          <div class="row">
            <div class="col-md-12">
              <div class="card">                
                <div class="card-body">
                  <div class="row challenges-wrap">
                    <div class="col-md-1">
                                            <img src="{{ $image_url }}" alt="" class="avatar-lg">
                     </div>
                    <div class="col-md-11"> 
                      <h4 class="username">{{ $employeeDetails->name }}</h4>
                      <p>&nbsp;</p>  
                      <form method="post" action="{{ route('locationAdmin.messages.employeeLocationMessageSend') }}" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="answer_id" value="{{ $parentMessageId }}" >
                        <input type="hidden" name="location_admin_id" value="{{ $activeLocationId }}" >
                        <input type="hidden" name="employee_id" value="{{ $employee_id }}" >
                        <p class="reply">Reply</p>
                        <div class="form-group">
                          <textarea name="message" id="message" cols="" rows="" class="form-control" required="required" placeholder="Message..."></textarea>
                            <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">Send</button> -->
                            </div>
                        </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>
                          <p class="label">Upload Message Image</p>
                        </div> 
                        <div class="col-12 d-flex justify-content-between">                       
                                          
                        <p id="alert_message" style="display:none; color:#d14d00"></p>
                        <div class="form-group">
                            <button class="btn btn-blue">Send</button>
                        </div>
                        </div>  

                      </form>

                      <!-- Start Message threads -->                      

                        @if(count($messageThreads) > 0)
                        <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($messageThreads as $key => $thread)
                           @if($thread->sender_type == 3)
                                <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->created_at }}</p>
                                      </div>
                                      <div class="col-md-12">
                                        <p>&nbsp;</p>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              @elseif($thread->sender_type == 4)
                                <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->created_at }}</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 -->
@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('');
   }
  
  $("input[name=message_action").on("click", function(event) {
    if(confirm('Are you sure to continue?')) {
      $(this).closest("form").submit();
    }

    $(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);
      });
  });

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