@extends('layouts.handa')
	@section('content')
		<link rel="stylesheet" type="text/css" href="{{ asset('css/inbox.css') }}">
		<input type="hidden" name="_token" value="{{ csrf_token() }}">
		<div class="container">
			<div class="row">
				<div class="col-md-3">
					<div class="float-left">
						<h3><strong>Inbox</strong></h3>
					</div>
					<div class="float-right">
						<h3 id="delete_container"><strong><a href="" class="text-danger" id="delete_btn">Delete</a> </strong></h3>
					</div>
				</div>
				<div class="col-md-9">
					<div class="float-right">
						<h3><strong><a href="{{ url('backdoor/inbox/add') }}">New Message</a></strong></h3>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-3">
					<div class="card card-custom">
						<div class="row">
							<div class="col-12">
								<div class="nav flex-column nowrap hide-overflow nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
									@foreach($sms_inbox as $sms)
									   	<a class="nav-link rounded-0" data-toggle="pill" href="" role="tab" aria-controls="v-pills-home" aria-selected="true">
									   		<div class="row">
										   		<div class="col-md-8">
										   			<div class="float-left">
														{{ $sms->contacts == '' ? $sms->sl_number : $sms->contacts->c_fname." ".substr($sms->contacts->c_mname, 0, 1).". ".$sms->contacts->c_lname }}
														<span id="{{ $sms->sl_number }}" hidden>{{ $sms->sl_number }}</span>
													</div>
										   		</div>
										   		<div class="col-md-2">
													<div class="checkbox_slot">@if($sms->notif != 0) <button class="btn btn-danger btn-sm">{{ $sms->notif }}</button> @endif </div>
										   		</div>
									   		</div>
									   		
									   	</a>
									@endforeach
		    					</div>
							</div>
						</div>
						
					</div>
				</div>
				<div class="col-md-9">
					<div class="card card-default card-custom-body">
						<div class="card-body card-body-message"></div>
						<div class="card-body-message-footer">
							{!! Form::open(['class' => 'form-horizontal']) !!}
							<div class="row">
								<div class="col-md-11">
									<div class="form-group mb-0">
										{!! Form::textarea('send_sms', NULL, ['class' => 'form-control', 'rows' => '1', 'required', 'id' => 'send_sms', 'Placeholder' => 'Type your message here.']) !!}
									</div>
								</div>
								<div class="col-md-1">
									<div class="form-group float-right">
										{!! Form::submit('Send', ['class' => 'btn btn-default btn-primary send-btn', 'id' => 'send_btn']) !!}
									</div>	
								</div>
							</div>
							{!! Form::close() !!}
						</div>
					</div>
				</div>
			</div>
		</div>

		<script type="text/javascript">
			$.ajaxSetup({
			    headers: {
			        'X-CSRF-Token': $('input[name="_token"]').val()
			    }
			});

			setInterval(get_last_msg, 5000);
	
			$('div.nav.nav-pills a').first().addClass('active');
			var sms_number = $('div.nav.nav-pills a.active').first().find('span').attr('id');

			if(sms_number) {
				$('#send_btn').attr('disabled', false);
				$('#send_sms').attr('disabled', false);
			}
			else {
				$('#send_btn').attr('disabled', true);
				$('#send_sms').attr('disabled', true);
			}

			get_msg(sms_number);

			$('div.nav.nav-pills a').click(function() {
				$('.card-body-message').html("");
				$('div.nav.nav-pills a').first().removeClass('active');       
			    $(this).parent().addClass('active').siblings().removeClass('active');
			    var sms_number = $(this).find('span').attr('id');
			    get_msg(sms_number);
			});
			$('#send_sms').keydown(function(e) {
				var send_sms = $('#send_sms').val();
				if(e.keyCode == 13 && !e.shiftKey) {
					e.preventDefault();
					if(e.keyCode == 13) {
						$('#send_btn').trigger('click');
						return true;
					}
				}
			});

			if(!sms_number) {
				$('#delete_btn').addClass('hidden');
			}

			$('#delete_btn').one("click", function(e) {
				e.preventDefault();
				var sms_number = $('div.nav.nav-pills a.active').first().find('span').attr('id');
				$.get('{{ url("backdoor/inbox/delete") }}', { sms_number: sms_number }, function(data) {
					if(data == 'true') {
						location.reload();
					}
					else {
						alert("ERROR HAS OCCURED.");
					}
				});
			});

			$('#send_btn').click(function(e) {
				var sms_number = $('div.nav.nav-pills a.active').first().find('span').attr('id');
				var send_sms = $('#send_sms').val();
				if(send_sms != '') {
					$('#send_sms').val("");
					e.preventDefault();
					$.ajax({
						type: "POST",
						url: "{{ url('backdoor/inbox/send_ajax') }}",
						data: { sms_number: sms_number, sms_message: send_sms },
						success: function(data) {
							var data = $.parseJSON(data);
							var msg  = data.sms_message;
							if(data.sl_status == "SENT") {
								var insert = '<div id="chat-container"><div class="bubble you">'+msg+'<div><span class="inbox-pane-date"><em>'+data.date_formatted+' &middot; '+data.sl_status+'</em></span></div></div><div class="clr"></div></div>';
								$('.card-body-message').prepend(insert);
							}
							else if(data.sl_status == "QUEUED") {
								var insert = '<div id="chat-container"><div class="bubble you queue">'+msg+'<div><span class="inbox-pane-date"><em>Sending..</em></span></div></div><div class="clr"></div></div>';
								$('.card-body-message').prepend(insert);
							}
							else if(data.sl_status == "RECEIVED") {
								var insert = '<div id="chat-container"><div class="bubble me">'+msg+'<div><span class="inbox-pane-date"><em>'+data.date_formatted+' &middot; '+data.sl_status+'</em></span></div></div><div class="clr"></div></div>';
								$('.card-body-message').prepend(insert);
							}
							else if(data.sl_status == "FAILED") {
								var insert = '<div id="chat-container"><div class="bubble you failed">'+msg+'<div><span class="inbox-pane-date"><em>'+e.date_formatted+' &middot; '+e.sl_status+'</em></span></div></div><div class="clr"></div></div>';
								$('.card-body-message').prepend(insert);
								$('#chat-container').hide();
								$('#chat-container').show();
							}
						}
					});
				}
			});

			function get_msg(sms_number) {
				$('.card-body-message').html("");
				$.ajax({
					url: "{{ url('backdoor/inbox/get_msg') }}",
					method: "GET",
					data: { sms_number: sms_number },
					success: function(data) {
						var msg = $.parseJSON(data);
						$.each(msg, function(i, e) {
							if(e.sl_status == "SENT") {
								var insert = '<div id="chat-container"><div class="bubble you">'+e.sl_message+'<div><span class="inbox-pane-date"><em>'+e.date_formatted+' &middot; '+e.sl_status+'</em></span></div></div><div class="clr"></div></div>';
								$('.card-body-message').prepend(insert);
								$('#chat-container').hide();
								$('#chat-container').show();								
							}
							else if(e.sl_status == "QUEUED") {
								var insert = '<div id="chat-container"><div class="bubble you queue">'+e.sl_message+'<div><span class="inbox-pane-date"><em>Sending..</em></span></div></div><div class="clr"></div></div>';
								$('.card-body-message').prepend(insert);
								$('#chat-container').hide();
								$('#chat-container').show();	
							}
							else if(e.sl_status == "RECEIVED") {
								var insert = '<div id="chat-container"><div class="bubble me">'+e.sl_message+'<div><span class="inbox-pane-date"><em>'+e.date_formatted+' &middot; '+e.sl_status+'</em></span></div></div><div class="clr"></div></div>';
								$('.card-body-message').prepend(insert);
								$('#chat-container').hide();
								$('#chat-container').show();
							}
							else if(e.sl_status == "FAILED") {
								var insert = '<div id="chat-container"><div class="bubble you failed">'+e.sl_message+'<div><span class="inbox-pane-date"><em>'+e.date_formatted+' &middot; '+e.sl_status+'</em></span></div></div><div class="clr"></div></div>';
								$('.card-body-message').prepend(insert);
								$('#chat-container').hide();
								$('#chat-container').show();
							}
						});
					}
				});
			}

			function get_last_msg() {
				var sms_number = $('div.nav.nav-pills a.active').first().find(':hidden').text();
				$.ajax({
					url: "{{ url('backdoor/inbox/get_last_msg') }}",
					method: 'POST',
					data: { id: '1' },
					success: function(data) {
						if(data == 'false') {
							get_msg(sms_number);
						}
					}
				});
			}

			
		</script>
	@stop