@extends('layouts.master')

@section('title')
  LT-99 :: CHAT
@endsection

@section('content')

@php
$avatar = 'https://www.iampremiumgroup.com/pages/plugins/images/users/1.jpg';
@endphp
<div class="row">

  <div class="col-md-4">
    <div class="card">
        <!-- Card header -->
        <div class="card-header">
            <!-- Title -->
            <h5 class="h3 mb-0">รายชื่อผู้ใช้</h5>
        </div>
        <!-- Card search -->
        <div class="card-header py-0">
            <!-- Search form -->
            <form>
                <div class="form-group mb-0">
                    <div class="input-group input-group-lg input-group-flush">
                        <div class="input-group-prepend">
                            <div class="input-group-text">
                                <span class="fas fa-search"></span>
                            </div>
                        </div>
                        <input type="search" class="form-control" placeholder="Search" />
                    </div>
                </div>
            </form>
        </div>
        <!-- Card body -->
        <div class="card-body">
            <!-- List group -->
            <ul class="list-group list-group-flush list my--3">
                <li class="list-group-item px-0">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <!-- Avatar -->
                            <a href="#" class="avatar rounded-circle">
                                <img alt="Image placeholder" src="../assets/img/theme/team-1.jpg" />
                            </a>
                        </div>
                        <div class="col ml--2">
                            <h4 class="mb-0">
                                <a href="#!">John Michael</a>
                            </h4>
                            <span class="text-success">●</span>
                            <small>Online</small>
                        </div>
                        <div class="col-auto">
                            <button type="button" class="btn btn-sm btn-primary">Add</button>
                        </div>
                    </div>
                </li>
                <li class="list-group-item px-0">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <!-- Avatar -->
                            <a href="#" class="avatar rounded-circle">
                                <img alt="Image placeholder" src="../assets/img/theme/team-2.jpg" />
                            </a>
                        </div>
                        <div class="col ml--2">
                            <h4 class="mb-0">
                                <a href="#!">Alex Smith</a>
                            </h4>
                            <span class="text-warning">●</span>
                            <small>In a meeting</small>
                        </div>
                        <div class="col-auto">
                            <button type="button" class="btn btn-sm btn-primary">Add</button>
                        </div>
                    </div>
                </li>
                <li class="list-group-item px-0">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <!-- Avatar -->
                            <a href="#" class="avatar rounded-circle">
                                <img alt="Image placeholder" src="../assets/img/theme/team-3.jpg" />
                            </a>
                        </div>
                        <div class="col ml--2">
                            <h4 class="mb-0">
                                <a href="#!">Samantha Ivy</a>
                            </h4>
                            <span class="text-danger">●</span>
                            <small>Offline</small>
                        </div>
                        <div class="col-auto">
                            <button type="button" class="btn btn-sm btn-primary">Add</button>
                        </div>
                    </div>
                </li>
                <li class="list-group-item px-0">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <!-- Avatar -->
                            <a href="#" class="avatar rounded-circle">
                                <img alt="Image placeholder" src="../assets/img/theme/team-4.jpg" />
                            </a>
                        </div>
                        <div class="col ml--2">
                            <h4 class="mb-0">
                                <a href="#!">John Michael</a>
                            </h4>
                            <span class="text-success">●</span>
                            <small>Online</small>
                        </div>
                        <div class="col-auto">
                            <button type="button" class="btn btn-sm btn-primary">Add</button>
                        </div>
                    </div>
                </li>
                <li class="list-group-item px-0">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <!-- Avatar -->
                            <a href="#" class="avatar rounded-circle">
                                <img alt="Image placeholder" src="../assets/img/theme/team-5.jpg" />
                            </a>
                        </div>
                        <div class="col ml--2">
                            <h4 class="mb-0">
                                <a href="#!">John Snow</a>
                            </h4>
                            <span class="text-success">●</span>
                            <small>Online</small>
                        </div>
                        <div class="col-auto">
                            <button type="button" class="btn btn-sm btn-primary">Add</button>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
  </div>

  <div class="col-md-8">
    <div class="card">
        <div class="card-header d-flex align-items-center">
            <div class="d-flex align-items-center">
                <a href="#">
                    <img src="{{ $avatar }}" class="avatar" />
                </a>
                <div class="mx-3">
                    <a href="#" class="text-dark font-weight-600 text-sm">{{ Auth::user()->name }}</a>
                </div>
            </div>
        </div>
        <div class="card-body">
            <!-- Comments -->
            <div class="mb-1 chat-space">
                <div class="media media-comment chat-media" style="display:none;">
                    <img alt="Image placeholder" class="avatar avatar-lg media-comment-avatar rounded-circle" src="{{ $avatar }}" />
                    <div class="media-body">
                        <div class="media-comment-text">
                            <h6 class="h5 mt-0 display_name">Michael Lewis</h6>
                            <p class="text-sm lh-160 display_text"></p>
                        </div>
                    </div>
                </div>
                <hr />
                <div class="media align-items-center">
                    <img alt="Image placeholder" class="avatar avatar-lg rounded-circle mr-4" src="{{ $avatar }}" />
                    <div class="media-body">
                        <form id="sender">
                          @csrf
                          <div class="row">
                            <div class="col-md-10">
                              <input type="hidden" name="name" value="{{ Auth::user()->name }}">
                              <textarea class="form-control" placeholder="เขียนข้อความ" name="text" rows="1"></textarea>
                            </div>
                            <div class="col-md-2">
                              <button type="submit" class="btn btn-danger w-100">ส่ง</button>
                            </div>
                          </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>

</div>
@endsection

@section('scripts')
<script type="text/javascript">
  $(document).ready(function(){

    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': '{{ csrf_token() }}'
      }
    });

    $('#sender').on('submit', function(e){
      e.preventDefault();

      /**
      * AJAX SEND TO THE MOON
      */
      $.ajax({
        url: "{{ url('/agent/chat/submit') }}",
        method: 'post',
        data: $('#sender').serialize(),
        success: function(response){
          var element = $('.chat-media:last').clone();
          element.find('.display_name').html($('input[name="name"]').val());
          element.find('.display_text').html($('textarea[name="text"]').val());
          element.css('display', 'block');
          $('.chat-media:last').after(element);

          $('textarea[name="text"]').val('');

        }});
      });

    });
</script>
<script src="https://js.pusher.com/7.0/pusher.min.js"></script>
<script>

  // Enable pusher logging - don't include this in production
  Pusher.logToConsole = true;

  var auth_name = '{{ Auth::user()->name }}';

  var pusher = new Pusher('40f8857ae79f8ffda546', {
    cluster: 'ap1'
  });

  var resource_name;
  var resource_text;
  var channel = pusher.subscribe('my-channel');
  channel.bind('FormSubmit', function(data) {
    resource_name = data.resource.name;
    resource_text = data.resource.text;
    if(resource_name != auth_name){
      var element = $('.chat-media:last').clone();
      element.find('.display_name').html(resource_name);
      element.find('.display_text').html(resource_text);
      element.css('display', 'block');
      $('.chat-media:last').after(element);
    }
  });
</script>
@endsection