@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">
          Student SMS
          <a href="javascript:void(0)" class="pull-right" id="sms-balance" title="SMS Balance">
            <span class="fa fa-money"></span>
          </a>
        </h3>
      </div>
      <div class="panel-body">
        <form class="form-horizontal" id="show-student-form">
          @csrf

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

            @include (
							'includes.class_names',
							['labelColWidth' => 1, 'fieldColWidth' => 1, 'required' => true]
						)

            @include (
							'includes.group_names',
							['labelColWidth' => 1, 'fieldColWidth' => 1, 'required' => true]
						)

            @include (
							'includes.section_names',
							['labelColWidth' => 1, 'fieldColWidth' => 1, 'required' => true]
						)

            @include (
							'includes.academic_years',
							['labelColWidth' => 1, 'fieldColWidth' => 1, 'required' => true]
						)
          </div>

          <div class="form-group form-group-sm">
            <div class="col-sm-12">
              <button class="btn btn-primary btn-block" type="button" id="show-students">
                <i class="fa fa-list"></i> View Students
              </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="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() {
    $(document).on('click', '#show-students', function() {
      var branch_and_version = $('#branch_and_version').val() || 0;
      var class_id = $('#class_name').val() || 0;
      var group_id = $('#group_name').val() || 0;
      var section_id = $('#section_name').val() || 0;
      var academic_year = $('#academic_year').val() || 0;

      if (branch_and_version && class_id && group_id && section_id && academic_year) {
        $.ajax({
          type: 'POST',
          url: baseURL + '/!/SMS/Student/get_students',
          data: $("#show-student-form").serialize(),
          success: function(response) {
            $('#get-students').html(response);
          }
        });
      } else {
        Swal.fire({
          type: 'warning',
          title: 'Warning!',
          text: 'Please select all fields!'
        });
      }
    });

    $(document).on('click', '#select-all', function() {
      var checkedStatus = (this.checked) ? true : false;

      $('#Table_GetStudentsForSMS tbody tr').find('td:nth-child(2) :checkbox').each(function() {
        $(this).prop('checked', checkedStatus);
      });

      if (checkedStatus) {
        $(".student_details").attr('disabled', false);
      } else {
        $(".student_details").attr('disabled', true);
      }
    });

    $(document).on('click', ".select_student", function() {
      var selectedDom = $(this).closest('.select_student_td').siblings(".student_details_td").find('input');

      if (this.checked) {
        $(selectedDom).attr('disabled', false);
      } else {
        $(selectedDom).attr('disabled', true);
      }
    });

    $(document).on('submit', 'form', function() {
      $.ajax({
        type: 'POST',
        url: baseURL + '/!/SMS/Student/SendSMS',
        data: $('#SMSBodyForm, #get-students-form').serialize(),
        success: function(response) {
          $('#get-students').html(response);
        }
      });

      return false;
    });

    //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');
        }
      });
    });
  });
</script>

@endsection