@extends('locationAdmin.layouts.auth')

@section('title')
{{ env('APP_NAME') }} | Employee Challenge Response
@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"> Company Admin</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-12">

                      <form method="post" action="{{ route('locationAdmin.messages.locationAdminToCompanyAdminSendMessage') }}" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="answer_id" value="{{ isset($parentMessage->id) ? $parentMessage->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>
                      </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 == 2)
                                <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);
      });
  });


</script>
@endsection