@extends('layouts.dashboard')
@section('stylesheet')
    {!! Html::style('css/chats.css') !!}
    <style>
		
	</style>
@endsection
@section('content')

<div class="row">
    <div class="col-lg-12 col-md-12 col-xs-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <i class="fa fa-bar-chart-o fa-fw"></i> Chattings List
            </div>
            <div class="panel-body">
            </div>
        </div>
    </div>
</div>
<div class="row chat">
    <div class="row chat-window col-xs-5 col-md-3" id="chat_window_1">
        <div class="col-xs-12 col-md-12">
        	<div class="panel panel-default">
                <div class="panel-heading top-bar">
                    <div class="col-md-12 col-xs-12">
                        <h3 class="panel-title" id="greeting">Chating on real time <span class="glyphicon glyphicon-comment" ><span class="hidden" id="username">Admin</span></span></h3>
                    </div>
                </div>
                <div class="panel-body msg_container_base" id="chat-window">
                </div>
                <div class="panel-footer">
                    <div class="input-group">
                        
                        <input id="text" type="text" class="form-control col-lg-12 chat_input" autofocus="" onblur="notTyping()" placeholder="Write your message here...">
                    </div>
                </div>
    		</div>
        </div>
    </div>
</div>
@endsection
@section('scripts')
	{!! Html::script('js/chats.js') !!}
	{{-- <script type="text/javascript">
		$(document).on('click', '.panel-heading span.icon_minim', function (e) {
		    var $this = $(this);
		    if (!$this.hasClass('panel-collapsed')) {
		        $this.parents('.panel').find('.panel-body').slideUp();
		        $this.addClass('panel-collapsed');
		        $this.removeClass('glyphicon-minus').addClass('glyphicon-plus');
		    } else {
		        $this.parents('.panel').find('.panel-body').slideDown();
		        $this.removeClass('panel-collapsed');
		        $this.removeClass('glyphicon-plus').addClass('glyphicon-minus');
		    }
		});
		$(document).on('focus', '.panel-footer input.chat_input', function (e) {
		    var $this = $(this);
		    if ($('#minim_chat_window').hasClass('panel-collapsed')) {
		        $this.parents('.panel').find('.panel-body').slideDown();
		        $('#minim_chat_window').removeClass('panel-collapsed');
		        $('#minim_chat_window').removeClass('glyphicon-plus').addClass('glyphicon-minus');
		    }
		});
		$(document).on('click', '#new_chat', function (e) {
		    var size = $( ".chat-window:last-child" ).css("margin-left");
		     size_total = parseInt(size) + 400;
		    alert(size_total);
		    var clone = $( "#chat_window_1" ).clone().appendTo( ".container" );
		    clone.css("margin-left", size_total);
		});
		$(document).on('click', '.icon_close', function (e) {
		    $( "#chat_window_1" ).remove();
		});
	</script> --}}
@endsection