<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>SMS App | Client Details</title>

    <style type="text/css">
	    body {
	    	padding-top: 70px;
	    }
    </style>
    
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
	<?php echo $__env->make('_navbar', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>
	<div class="container">
		<h1 class="text-center">
			<?php echo e($client->name); ?> 
			<br>
			<small>(<?php echo e($client->mobile); ?>)</small>
		</h1>
		<hr>
		<div class="row">
			<div class="col-sm-6">
				<h2 class="text-center">Send new SMS</h2>
				<br>
				<div class="panel panel-default">
					<div class="panel-body">
						<form action="<?php echo e(url('sendsms')); ?>" method="post">
							<?php echo csrf_field(); ?>


							<input type="hidden" value="<?php echo e($client->mobile); ?>" name="mobile" />

							<div class="form-group">
								<label>Message</label>
								<textarea id="Message" type="text" class="form-control" name="message" rows="7" maxlength="159"></textarea>
								<div class="help-block">
									Single SMS' can only contain 160 characters
								</div>
							</div>

							<button type="submit" class="btn btn-primary btn-block">
								Send SMS <i class="fa fa-envelope-o fa-fw"></i>
							</button>
						</form>
					</div>
				</div>
			</div>

			<div class="col-sm-6">
				<h2 class="text-center">SMS History</h2>
				<br>
			  	<ul class="list-group">
				<?php foreach($client->messages as $message): ?>
					<li class="list-group-item <?php echo e($message->direction == 'incoming' ? 'text-right' : ''); ?>">
						<p>
							<i class="fa fa-<?php echo e($message->direction == 'incoming' ? 'inbox' : 'paper-plane-o'); ?> fa-fw"></i>
							<?php echo e(ucwords($message->direction)); ?>

							<span class="<?php echo e($message->direction == 'incoming' ? 'pull-left' : 'pull-right'); ?> text-muted" data-toggle="tooltip" data-placement="top" title="<?php echo e($message->created_at->toDateTimeString()); ?>">
								<?php echo e($message->created_at->diffForHumans()); ?>

							</span>
						</p>
						<pre><?php echo e($message->message); ?></pre>
					</li>
				<?php endforeach; ?>
				</ul>
			</div>
		</div>
	</div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
	<script type="text/javascript">
		$(function () {
		  $('[data-toggle="tooltip"]').tooltip();
		});
	</script>
</body>
</html>