@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> Result SMS </h3>
        </div>
        <div id="center"></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">
            @include (
							'includes.class_names_checkbox',
							['labelColWidth' => 1, 'fieldColWidth' => 11, 'required' => true]
						)
          </div>

          <div class="form-group form-group-sm">
            @include (
							'includes.exam_type_names',
							['labelColWidth' => 1, 'fieldColWidth' => 5, 'required' => true]
						)

            <label for="exam_date" class="col-sm-1 control-label text-danger">Exam Date<sup></sup></label>
            <div class="col-sm-5">
              <input type="text" class="form-control" id="exam_date" name="exam_date"
                placeholder="From" readonly="readonly"
              />
            </div>
          </div>

          @if (4 == $userRoleId)
            <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>
          @endif
        </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 class_name = $(".class_name:checked").val() || 0;
    var exam_type = $('#exam_type').val() || 0;
    var exam_date = $('#exam_date').val() || 0;

    if (branch_and_version && class_name && exam_type && exam_date) {
      $.ajax({
        type: 'POST',
        url: baseURL + '/!/SMS/ResultSMS/SendSMS',
        data: $(this).serialize(),
        success: function (response) {
          $('#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');
      }
    });
  });

  $('#exam_date').datepicker({
    dateFormat: 'YYYY-MM-DD'
  });
});
</script>

@endsection