<!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;
	    }
	    .fa-1x {
	    	font-size: 16px !important;
	    	vertical-align: middle;
	    }
    </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 isset($client->name) ? $client->name : '<span class="text-muted">Name not set</span>'; ?>

			<a data-toggle="modal" data-target="#myModal"><i class="fa fa-cog fa-1x"></i></a>
			<br>
			<small>(<?php echo e($client->mobile); ?>)</small>
		</h1>

		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel">Edit Client Details</h4>
					</div>
					<form method="post" action="<?php echo e(url('clients/' . $client->mobile)); ?>">
						<?php echo csrf_field(); ?>

						<div class="modal-body">
							<div class="form-group">
								<label for="name">Name</label>
								<input type="text" name="name" value="<?php echo e($client->name); ?>" class="form-control">
							</div>
							<div class="form-group">
								<label for="gender">Gender</label>
								<select name="gender" class="form-control">
									<option value="U">Unknown</option>
									<option value="M">Male</option>
									<option value="F">Female</option>
								</select>
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
							<button type="submit" class="btn btn-primary">Save changes</button>
						</div>
					</form>
				</div>
			</div>
		</div>

		<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>