@extends('user.layouts.app')

@section('content')
@php
    $ticketDetails = $ticket->ticketDetails();
@endphp
<style>
/* Component: Chat */
.chat .chat-wrapper .message-list-wrapper {
  border: 1px solid #ddd;
  height: 452px;
  position: relative;
  overflow-y: auto;
}
.chat .chat-wrapper .message-list-wrapper .message-list {
  padding: 0;
}
.chat .chat-wrapper .message-list-wrapper .message-list li {
  display: block;
  padding: 20px 10px;
  clear: both;
  position: relative;
  color: white;
}
.chat .chat-wrapper .message-list-wrapper .message-list li.left .avatar {
  margin-right: 12px;
  display: block;
  float: left;
}
.chat .chat-wrapper .message-list-wrapper .message-list li.left .avatar img {
  width: 60px;
  height: auto;
  border: 2px solid transparent;
}
.chat .chat-wrapper .message-list-wrapper .message-list li.left .avatar.available img {
  border-color: #2ecc71;
}
.chat .chat-wrapper .message-list-wrapper .message-list li.left .avatar.busy img {
  border-color: #ff530d;
}

.chat .chat-wrapper .message-list-wrapper .message-list li.left .username {
  float: left;
  display: inline-block;
  color:#000;
  margin-right: 8px ;
}
.chat .chat-wrapper .message-list-wrapper .message-list li.right .username {
  float: right;
   display: inline-block;
  color:#000;
  margin-left: 8px ;
}
.chat .chat-wrapper .message-list-wrapper .message-list li.left .timestamp {
  text-align: left;
  display: block;
  color: #999;
  font-size: 11px;
  line-height: 22px;
  font-style: italic;
  margin-bottom: 4px;
}
.chat .chat-wrapper .message-list-wrapper .message-list li.left .timestamp i {
  margin-right: 4px;
}
.chat .chat-wrapper .message-list-wrapper .message-list li.left .body {
  display: block;
  width: 87%;
  float: left;
  position: relative;
  padding-bottom:5px;
}
.chat .chat-wrapper .message-list-wrapper .message-list li.left .body .message {
  font-size: 12px;
  line-height: 16px;
  display: inline-block;
  width: auto;
  background: #2ecc71;
}
.chat .chat-wrapper .message-list-wrapper .message-list li.left .body .message:before {
  content: '';
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 9px 9px 0;
  border-color: transparent #2ecc71 transparent transparent;
  left: 0;
  top: 10px;
  margin-left: -8px;
}
.chat .chat-wrapper .message-list-wrapper .message-list li.left .body .message a.white {
  color: white;
  font-weight: bolder;
  text-decoration: underline;
}
.chat .chat-wrapper .message-list-wrapper .message-list li.left .body .message img {
  max-width: 320px;
  max-height: 320px;
  width: 100%;
  height: auto;
  margin-bottom: 5px;
}
.chat .chat-wrapper .message-list-wrapper .message-list li.right .avatar {
  margin-left: 12px;
  display: block;
  float: right;
}
.chat .chat-wrapper .message-list-wrapper .message-list li.right .avatar img {
  width: 60px;
  height: auto;
  border: 2px solid transparent;
}
.chat .chat-wrapper .message-list-wrapper .message-list li.right .avatar.available img {
  border-color: #3c8dbc;
}
.chat .chat-wrapper .message-list-wrapper .message-list li.right .timestamp {
  text-align: right;
  display: block;
  color: #999;
  font-size: 11px;
  line-height: 18px;
  font-style: italic;
  margin-bottom: 4px;
}
.chat .chat-wrapper .message-list-wrapper .message-list li.right .timestamp i {
  margin-right: 4px;
}
.chat .chat-wrapper .message-list-wrapper .message-list li.right .body {
  display: block;
  max-width: 87%;
  float: right;
  position: relative;
  padding-bottom:5px;
}
.chat .chat-wrapper .message-list-wrapper .message-list li.right .body .message {
  font-size: 12px;
  line-height: 16px;
  display: inline-block;
  width: auto;
  background: #3498db;
}
.chat .chat-wrapper .message-list-wrapper .message-list li.right .body .message:after {
  content: '';
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 9px 9px 0;
  border-color: transparent #3498db transparent transparent;
  right: 0;
  top: 10px;
  margin-right: -7px;
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.chat .chat-wrapper .message-list-wrapper .message-list li.right .body .message a.white {
  color: white;
  font-weight: bold;
}
.chat .chat-wrapper .message-list-wrapper .message-list li.right .body .message img {
  max-width: 320px;
  max-height: 320px;
  width: 100%;
  height: auto;
  margin-bottom: 5px;
}
.chat .chat-wrapper .compose-box {
  padding: 10px 0;
}
@media (max-width: 767px) {
    .chat .chat-wrapper .message-list-wrapper .message-list li.left .avatar {
        display: none;
    }
    .chat .chat-wrapper .message-list-wrapper .message-list li.left .username {
      display: inline-block;
      margin-right: 10px;
    }
    .chat .chat-wrapper .message-list-wrapper .message-list li.left .body {
      width: 100%;
    }
    
    .chat .chat-wrapper .message-list-wrapper .message-list li.right .avatar {
      display: none;
    }
    .chat .chat-wrapper .message-list-wrapper .message-list li.right .timestamp {
      text-align: right;
      display: block;
      color: #999;
      font-size: 11px;
      line-height: 18px;
      font-style: italic;
      margin-bottom: 4px;
    }
  .chat .chat-wrapper .message-list-wrapper .message-list li.right .timestamp i {
    margin-right: 4px;
  }
  .chat .chat-wrapper .message-list-wrapper .message-list li.right .body {
    max-width: 100%;
  }

    .chat .chat-wrapper .message-list-wrapper .message-list li {
      padding: 20px 7px;
    }
    

    .chat .chat-wrapper .message-list-wrapper .message-list li.left .body .message:before {
        left: 9px;
        top: -13px;
        margin-left: -8px;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid #2ecc71;
    }
    .chat .chat-wrapper .message-list-wrapper .message-list li.right .body .message:after {
        right: 8px;
        top: -13px;
        margin-left: -8px;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid #3498db;
        
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
        
    }
    .panel-white {
        border: 0px;
    }
    .panel .panel-body{
        padding: 2px;
    }
    .submit_message {
        width:100%
    }
    

}

@media (min-width: 767px) and (max-width: 1024px) {
    
    .border-top-green{
        width: 88%;
    }
}

.mg-btm-10 {
    margin-bottom: 10px !important;
}

.panel-white {
    border: 1px solid #dddddd;
}
.panel {
    border-radius: 0;
    margin-bottom: 30px;
}

.border-top-green {
    border-top: 4px solid #3c8dbc !important;
}

.chat li {
    border-bottom: none;
}

</style>  
<!-- Wrapper -->  
<div class="row">
    <div class="col-sm-12">
        <div class="white-box">
            <div class="row">
                <div class="col-md-12 col-xs-12">
                    <h3 class="box-title d-inline-b">Ticket Conversation</h3>
                    <a href="{{route('contact.support')}}" title="Contact Support" class="btn btn-success pull-right">
                        <i class="fa fa-angle-left" data-icon="v"></i> Back 
                    </a>
                </div>
            </div>
            @include('admin.includes.status')
            <div class="container">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="panel panel-white border-top-green">
                                <div class="panel-body chat"> 
                                    <div class="row chat-wrapper">  
                                        <div class="col-md-12">
                                            <div class="message-list-wrapper">
                                                <ul class="message-list">
                                                    @foreach($ticketDetails as $tKey => $ticket_item)
                                                        @php
                                                            if(!empty($ticket_item['portfolio_id'])){
                                                                $user_name_str = $ticket->first_name .' '. $ticket->last_name;
                                                                $chat_profile_photo = get_user_profile_image_url($ticket->profile_photo, $ticket->user_id);
                                                            }else{
                                                                $user_name_str = $ticket_item->first_name .' '. $ticket_item->last_name;
                                                                $chat_profile_photo = get_admin_profile_image_url($ticket_item->profile_photo, $ticket_item->admin_id);
                                                            }
                                                        @endphp
                                                        <li class="{{ (!empty($ticket_item['portfolio_id']))? 'right' : 'left' }}">
                                                            <span class="username"> {{$user_name_str}}</span>
                                                            <small class="timestamp">
                                                                <i class="fa fa-clock-o"></i>{{$ticket_item->created_at->diffForHumans()}}
                                                            </small>
                                                            <span class="avatar available tooltips" data-toggle="tooltip " data-placement="right" data-original-title="{{$user_name_str}}">
                                                                
                                                                <img src="{{$chat_profile_photo}}" alt="avatar" class="img-circle">
                                                            </span>
                                                            <div class="body">   
                                                                <div class="message well-sm">
                                                                    {!! nl2br(e($ticket_item['ticket_content']))!!}
                                                                </div>
                                                            </div>
                                                        </li>
                                                    @endforeach
                                                </ul>
                                                <div class="scroll_here"></div>
                                            </div>
                                            @if($ticket->status == 'pending')
                                                <div class="compose-box">
                                                    <div class="row">
                                                       <div class="col-xs-12 mg-btm-10">
                                                           <textarea id="ticket_content" class="form-control input-sm" placeholder="Type your message here..."></textarea>
                                                           <span class="text-danger hide" id="error_message_content"> Please enter message. </span>
                                                        </div>
                                                        <div class="col-xs-12"> 
                                                            <button class="btn btn-info btn-sm submit_message">
                                                                <i class="fa fa-location-arrow"></i> Send
                                                            </button>
                                                        </div> 
                                                    </div> 
                                                </div>
                                            @endif
                                        </div>                                    
                                    </div> 
                                </div> 
                            </div>
                        </div>
                    </div>
                </div>
        </div>
    </div>
</div>
@endsection
@section('scripts')
<script type="text/javascript">
    $(document).ready(function() {
        scroll_down();
        var ticket_id = "{{$ticket->id}}";
        
        $('#ticket_list').dataTable({
            "order": [[ 3, "desc" ]],
        });
        $("#ticket_content").on("keyup", function(){
            if ($.trim($(this).val()) == ""){
                $("#error_message_content").removeClass('hide');
            } else {
                $("#error_message_content").addClass('hide');
            }
        });
        $(".submit_message").on("click", function(){
            var _this = $(this);
            var message = $.trim($("#ticket_content").val());
            if (message == ""){
                $("#error_message_content").removeClass('hide');
                return false;
            }
            
            var url = "{{ route('user.ticket.send_message') }}";
            $.ajax({
                type: "post",
                url: url,
                data: {'id' : ticket_id, 'message' : message},
                dataType: 'json',
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                beforeSend: function(data) {
                    _this.attr('disabled', 'disabled');
                    showLoader("#full-overlay");
                },
                success: function(data) {
                    $("#ticket_content").val('');
                    $(".message-list").append(data.html);
                    scroll_down();
                    hideLoader("#full-overlay");
                    _this.removeAttr('disabled');
                }
              });
        });

    });
    function scroll_down(){
        var container = $('.message-list-wrapper');

        var scrollTo = $(".scroll_here");
        var position = scrollTo.offset().top 
          - container.offset().top 
          + container.scrollTop();
        container.animate({
            scrollTop: position
        },500);
    }
</script>
@endsection