@extends('layouts.main_without_top_button')
@section('title', strtoupper($subject))

@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li><a href="{{route('crm.index')}}">Tickets</a> <span class="divider">/</span></li>
        <li class="active">Conversations</li>
    </ul>
@stop

@section('contentinner')
	<style>
		.td_left_border {
			border-top: 1px solid #dddddd;
			border-left: 1px solid #dddddd;
			border-bottom: 0;
		}
		
		.td_border_right {
			border-right: 1px solid #dddddd;
		}
		
		.widgettitle {
			color: #000000;
		}
		
		.container {
			border: 2px solid #dedede;
			background-color: #f1f1f1;
			border-radius: 5px;
			padding: 10px;
			margin: 10px 0;
		}
		
		.darker {
			border-color: #ccc;
			background-color: #f0f2ff;
			padding-left: 50px;
		}
		
		.logistics {
			background-color: #007fff;
			color: #f0f2ff;
		}
		
		.container::after {
			content: "";
			clear: both;
			display: table;
		}
		
		.container img {
			float: left;
			max-width: 60px;
			width: 100%;
			margin-right: 20px;
			border-radius: 50%;
		}
		
		.container img.right {
			float: right;
			margin-left: 20px;
			margin-right: 0;
		}
		
		.time-right {
			float: right;
			color: #aaa;
		}
		
		.time-left {
			float: left;
			color: #999;
		}
		
		.chat-window {
			bottom: 0;
			position: fixed;
			float: right;
			margin-left: 10px;
		}
		
		.chat-window > div > .panel {
			border-radius: 5px 5px 0 0;
		}
	
	
	</style>
	<div class="container-fluid">
	@foreach($conversations as $conversation)
		@if($conversation->sender != 'Logistics')
				<div class="container span8" style="background: #e7e4eb; color: #282828; line-height: 1.4;">
					{{--<img src="" alt="Image" style="width:100%;">--}}
					<p>{{$conversation->message}}</p>
					<span style="color: #707070;"class="time-left">{{$conversation->full_name}}</span>
					<span style="color: #707070;" class="time-right">{{date("M j H:i", strtotime( $conversation->date_sent))}}</span>
				</div>
		@else
				<div style="float: right; background: #1383df; color: #efefef; line-height: 1.4;" class="container span8 ">
					{{--<img src="" alt="Image" style="width:100%;">--}}
					<p>{{$conversation->message}}</p>
					<span style="color: #d5d5d5" class="time-left">{{$conversation->full_name}}</span>
					<span style="color: #d5d5d5" class="time-right">{{date("M j H:i", strtotime( $conversation->date_sent))}}</span>
				</div>
		@endif
	@endforeach
	</div>
	<br>
	<div class="container-fluid">
		@if($status == 'Active')
			<div class="container-fluid" style="background: #878b9b; color: #282828; line-height: 1.4;position: fixed; bottom: 30px; ">
				<form action="{{ route('crm.store') }}" method="post">
					<div class="">
						<div style="padding: 5px" class="input-group">
                            <textarea name="message" rows="2" class="span10"
                                      placeholder="Write your message here..."></textarea>
							<button style="padding: 15px" type="submit" class="btn btn-primary btn-sm" id="btn-chat">Send</button>
							<input type="hidden" name="ticket_id" value="{{ $ticket_id }}"/>
							<input type="hidden" name="full_name" value="{{ \Auth::user()->full_name }}"/>
							<input type="hidden" name="subject" value="{{ $conversation->subject }}"/>
							<input type="hidden" name="phone" value="{{ $user->phone_number }}"/>
							<input type="hidden" name="email" value="{{ $user->email }}"/>
							{{--<label> If Attachment : </label><input type="file" name="file" class="form-control"/>--}}
							<span class="input-group-btn">
                        </span>
						</div>
					</div>
				</form>
			</div>
		@endif
	</div>
@stop

<script>
	function senderDetails(full_name, phone, email) {
		
		swal({
				title: full_name+" Details",
				text: "Phone: "+phone+" Email: "+email,
				showCancelButton: false,
				showConfirmButton: true,
				closeOnConfirm: false
			});
	}
</script>