@extends ('Layouts.Application')

@section ('MainContent')

<style>
#smsHeading {
	width: 100%;
	text-align: center;
}
#left {
	float: left;
}
#center {
	display: inline-block;
	margin: 0 auto;
}
#right {
	float: right;
}
</style>

<div class="row">
	<div class="col-sm-12">
		<div class="panel panel-default">
			<div class="panel-heading" id="smsHeading">
				<div id="left">
					<h3 class="panel-title"><i class="fa fa-envelope"></i> Student SMS </h3>
				</div>
				<div id="center">
					<strong id="remaining" style="color: red;"> </strong> remaining
					| <strong id="totalmessages" style="color: green;"> </strong> characters
					| <strong id="messages" style="color: red;"> </strong> message(s)
				</div>
				<div id="right">
					<a href="javascript:void(0)" id="sms-balance" title="SMS Balance">
						<span class="fa fa-money"></span>
					</a>
				</div>
			</div>
			<div class="panel-body">
				<form class="form-horizontal">
					@csrf

					<div class="form-group form-group-sm">
						@include (
							'includes.branch_shift_version_names_checkbox',
							['labelColWidth' => 1, 'fieldColWidth' => 11, 'required' => true]
						)
					</div>
					<div class="form-group form-group-sm">
						<label for="msg_type" class="col-sm-1 control-label text-danger">Message Type</label>
						<label class="radio-inline">
							<input type="radio" name="msg_type" value="2">Bangla SMS
						</label>
						<label class="radio-inline">
							<input type="radio" name="msg_type" value="1">English SMS
						</label>
					</div>
					<div class="form-group form-group-sm">
						<label for="sms-body" class="col-sm-1 control-label text-danger">SMD Body</label>
						<div class="col-sm-5">
							<textarea class="form-control" name="sms_body" id="sms-body">{{ old('sms_body') }}</textarea>
						</div>
					</div>

					<div class="form-group form-group-sm">
						<div class="col-sm-12">
							<button class="btn btn-primary btn-block" type="submit">
								<i class="fa fa-telegram "></i> Send
							</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>

<div class="row">
	<div class="col-md-12">
		<div id="get-students"></div>
	</div>
</div>

<!-- Modal -->
<div class="modal fade" id="getCodeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-sm">
		<div class="modal-content">
			<!-- Modal Head -->
			<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 text-center" id="myModalLabel"> SMS Balance </h4>
			</div>

			<!-- Modal Body -->
			<div class="modal-body" id="getCode" style="text-align: center;">
				<!-- ajax success content here.-->
			</div>
			<!-- Modal footer -->
			<div class="modal-footer">
				<button type="button" class="btn btn-danger" data-dismiss="modal">
					<i class="fa fa-close"></i> Close
				</button>
			</div>
		</div>
	</div>
</div>

<script>
$(document).ready(function () {
	$(document).on('submit', 'form', function () {
		var branch_and_version = $(".branch_and_version:checked").val() || 0;
		var msg_type = $('input:radio[name=msg_type]:checked').val() || 0;
		var sms_body = $('#sms-body').val() || 0;

		if (branch_and_version && msg_type && sms_body) {
			$.ajax({
				type: 'POST',
				url: baseURL + '/!/SMS/GeneralStudent/SendSMS',
				data: $(this).serialize(),
				success: function (response) {
					$('#sms-body').val('');
					$('#get-students').html(response);
				}
			});
		} else {
			Swal.fire({
				type: 'warning',
				title: 'Warning!',
				text: 'Please select all fields!'
			});
		}
		return false;
	});

	//get sms blance
	$("#sms-balance").on('click', function () {
		$.ajax({
			type: "GET",
			url: baseURL + '/!/SMS/GeneralStudent/GetSMSBalance',
			success: function (response) {
				$("#getCode").html(response);
				$("#getCodeModal").modal('show');
			}
		});
	});

	//for sms count
	var $remaining = $('#remaining'),
	$totalmessages = $remaining.next();
	$messages = $totalmessages.next();

	$('#sms-body').keyup(function () {
		var chars = this.value.length,
		totalmessages = Math.ceil(chars),
		messages = Math.ceil(chars / 158),
		remaining = messages * 158 - (chars % (messages * 158) || messages * 158);

		$remaining.text(remaining);
		$totalmessages.text(totalmessages);
		$messages.text(messages);
	});
});
</script>

@endsection