@extends ('Layouts.Application')

@section ('MainContent')

<div class="row">
	<div class="col-sm-12">
		<div class="panel panel-default">
			<div class="panel-heading">
				<h3 class="panel-title">
					<i class='fa fa-envelope'></i> SMS Report
					<a href="javascript:void(0)" class="pull-right" id="sms-balance" title="SMS Balance">
						<span class="fa fa-envelope-o"></span>
					</a>
				</h3>
			</div>
			<div class="panel-body">
				<form class="form-horizontal">
					@csrf

					<div class="form-group form-group-sm">
						<label for="SMSDateFrom" class="col-sm-1 control-label text-danger">From</label>
						<div class="col-sm-3">
							<input type="text" class="form-control datepicker" id="SMSDateFrom" name="SMSDateFrom">
						</div>
						<label for="SMSDateTo" class="col-sm-1 control-label text-danger">To</label>
						<div class="col-sm-3">
							<input type="text" class="form-control datepicker" id="SMSDateTo" name="SMSDateTo">
						</div>
					</div>

					<div class="form-group form-group-sm">
						<div class="col-sm-12">
							<button class="btn btn-primary btn-block" type="button" id="ShowSMSReport">
								<i class="fa fa-list"></i> View Reports
							</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>

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

<!-- Modal -->
<div class="modal fade" id="sms-balance-modal" 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 src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.21/dataRender/datetime.js"></script>

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

		$(document).on('click', '#ShowSMSReport', function () {
			var date_from = $('#SMSDateFrom').val() || '00-00-0000';
			var date_to = $('#SMSDateTo').val() || '00-00-0000';

			if (date_from > '00-00-0000' && date_to > '00-00-0000') {
				$.ajax({
					type: 'GET',
					url: baseURL + '/!/SMS/SMSReport/get_sms_reports/' + date_from + '/' + date_to,
					success: function (response) {
						$('#get-sms-reports').html(response);
					}
				});
			} else {
				Swal.fire({
					type: 'warning',
					title: 'Warning!',
					text: 'Dates are empty!'
				});
				return;
			}
		});

		$('.datepicker').datepicker({
			format: 'dd-mm-yyyy',
			autoclose: true,
			todayHighlight: true
		});
	});
</script>

@endsection