@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 Count &nbsp;&nbsp;&nbsp;
          <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="ShowSMSCount">
                <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-counts"></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>
$(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', '#ShowSMSCount', 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/SMSCount/get_sms_counts/' + date_from + '/' + date_to,
        success: function (response) {
          $('#get-sms-counts').html(response);
        }
      });
    } else {
      Swal.fire({
        type: 'warning',
        title: 'Warning!',
        text: 'Dates are empty'
      });
    }
  });

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

@endsection