<<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <!-- <h1 class="m-0">Deactive Member </h1> -->
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="#">Setting</a></li>
                    <li class="breadcrumb-item active">Add Section </li>
                </ol>
            </div>
        </div>
    </div>
</div>




<section class="content">
    <div class="container-fluid">




        <div class="row">

            <section class="col-lg-12 connectedSortable">

                <div class="card">
                    <div class="card-header " style="background-color:#31708e;color:white">
                        <h3 class="card-title">
                        Add Section 
                        </h3>
                        <div class="card-tools">
                            <ul class="nav nav-pills ml-auto">
                            </ul>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="tab-content p-0">

                      <div class="col-sm-12 ">
   
 
  <form method="post" action=" <?php echo base_url(); ?>index.php/Member/section_add" enctype="multipart/form-data">
    <div class="row mt-3">
         <div class="col-sm-4"></div>
      <div class="col-sm-4"><b>Division</b>
         
            <select name="division" id="division_id" class="form-control">
              <option value="">Select</option>
              <?php foreach ($division as $division) { ?>
                <option value="<?php echo $division['id']; ?>"><?php echo $division['division']; ?></option>
              <?php } ?>
            </select>
      </div>
      </div> <br><br>
        <div class="row mt-3">
         <div class="col-sm-4"></div>
      <div class="col-sm-4">
        
        <label><b>Section</b></label>
        <input type="text"  onkeyup="touppercase(id);" onchange="check_section_exists(id);"  id="sect" name="section" class="form-control">
       
        <div class="alert alert-danger" id="sect_alert">
      </div>
        </div>
  </div>
<!--<div class="col-sm-3">-->
<!--      <div class="form-group">-->
<!--        <label><b>section email</b></label>-->
<!--        <input type="text" style="width: 36%;" name="section_email" class="form-control" value="">-->
<!--      </div>-->
<!--  </div>-->
  
<br>
     <div class="row mt-3">
         <div class="col-sm-5"></div>
        <button type="submit" class="btn btn-success">Save</button>&nbsp; &nbsp; &nbsp; 
        <button type="button" class="btn btn-primary"> Cancel</button>
      </div>


  </form>


  
  </div>
                    </div>
                </div>
        </div>
</section>
</div>
</div>
</section>



  <script>
  $('.alert').hide();
    $('#division_id').on('change', function() {
      var division = this.value;
      $.ajax({
        type: 'POST',
        url: "<?php echo base_url() ?>index.php/Member/getsection",
        data: {
          division: division
        },
        dataType: 'html',
        success: function(data) {

          $('#section_id').html(data);
        }
      });
    });

    function check_section_exists(id) {
      var sect = $("#" + id).val();
      if (sect != "") {
        $.ajax({
          type: 'POST',
          url: "<?php echo base_url() ?>index.php/Member/check_section_exit",
          data: {
            section: sect
          },
          dataType: 'html',
          success: function(data) {
            if (data != '1') {
              $('.alert').show();
              $("#sect_alert").html(data);
              $('.alert').fadeOut(2000);
              $("#" + id).val('');
            }

          }
        });
      }
    }
  </script>
</div>