<div class="content-wrapper">
  <!-- Content Header (Page header) -->
  <div class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6">
          <h1 class="m-0 text-dark">All Subject</h1>
        </div><!-- /.col -->
        <div class="col-sm-6">
          <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item"><a href="<?php echo base_url() ?>admin/admin/dashboard">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="#">Course</a></li>
            <li class="breadcrumb-item active">All Subject</li>

          </ol>
        </div><!-- /.col -->
      </div><!-- /.row -->
    </div><!-- /.container-fluid -->
  </div>
  <!-- /.content-header -->
  <!-- Main content -->
  <section class="content">
    <div class="container-fluid">
      <div class="card card-default">
        <div class="card-header">
          <h3 class="card-title">View All Subject</h3>
          <div class="card-tools">
            <a href="javascript:void(0)" data-toggle="modal" data-target="#exampleModal"
              class="btn btn-success btn-sm"><i class="fa fa-plus" aria-hidden="true"></i> Add Subject</a>
          </div>
        </div>
        <!-- /.card-header -->
        <div class="card-body">
          <table id="example1" class="table table-bordered table-striped">
            <thead>
              <tr>
                <th>ID</th>
                <th>Subject Name</th>
                <th>Total Chapter</th>
                <th>Total Qns.</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              <?php $i = 1; foreach ($all_subject as $subject): ?>
              <?php
                  $this->db->where('q_subject', $subject->subject_id);
                  $ttl_qns = $this->db->get('exam_questions')->num_rows();
                  ?>
                <tr>
                  <td>
                    <?php echo $i ?>
                  </td>
                  <td>
                    <?php echo $subject->subject_name ?> 
                    <?php if($ttl_qns == 0): ?>
                      <div class="round-shape" style="background-color: red;"></div>
                    <?php elseif($ttl_qns > 0 && $ttl_qns < 100): ?>
                      <div class="round-shape" style="background-color: #ee8b0c;"></div>
                    <?php else: ?>
                      <div class="round-shape" style="background-color: green;"></div>
                    <?php endif;?>
                  </td>
                  <td>
                    <?php echo count(json_decode($subject->subject_chapter))?>
                  </td>
                  <td>
                    <?php echo $ttl_qns; ?>
                  </td>
                  <td>
                    <div class="input-group mb-3">
                      <div class="input-group-prepend">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                          Action
                        </button>
                        <div class="dropdown-menu">
                          <a class="dropdown-item" href="<?php echo base_url(); ?>admin/course/update_subject/<?php echo $subject->subject_id ?>"><i
                              class="fas fa-edit"></i>&nbsp;&nbsp;Edit</a>
                          <div class="dropdown-divider"></div>
                          <a class="dropdown-item" onclick="return confirm('Are you sure?')"
                            href="<?php echo base_url(); ?>/admin/course/delete_subject/<?php echo $subject->subject_id ?>"><i
                              class="fas fa-trash"></i>&nbsp;&nbsp;Delete</a>
                        </div>
                      </div>
                    </div>
                  </td>
                </tr>
                <?php $i++; ?>
              <?php endforeach; ?>
            </tbody>
          </table>
        </div>
      </div>
    </div><!--/. container-fluid -->
  </section>
  <!-- /.content -->
</div>
<style type="text/css">
.round-shape {
  width: 15px;
  height: 15px;
  border-radius: 50%;
/*   animation: blink 1s infinite alternate; */
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

</style>


<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
  aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Create New Subject</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <?php echo form_open(base_url() . 'admin/course/add_new_subject'); ?>
      <div class="modal-body">
        <div class="form-group">
          <label for="message-text" class="col-form-label">Subject Name: <span class="text-danger">*</span></label>
          <input type="text" class="form-control" id="recipient-text" placeholder="Enter Subject Name" required
            name="subject_name">
        </div>
        <div class="form-group">
          <label for="message-text" class="col-form-label">Chapter</label>
          <div id="requirement_area">
             <div class="d-flex mt-2">
                <div class="flex-grow-1 px-3 ">
                   <div class="form-group">
                      <input type="text" class="form-control d-none" id="requirements" placeholder="Enter Chapter Name">
                   </div>
                </div>
                <div class="">
                   <button type="button" class="btn btn-success btn-sm" name="button" onclick="appendRequirement()"> <i class="fa fa-plus"></i> </button>
                </div>
             </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-primary">Save</button>
      </div>
      <?php echo form_close(); ?>
    </div>
  </div>
</div>
<div id = "blank_requirement_field">
    <div class="d-flex mt-2">
       <div class="flex-grow-1 px-3">
          <div class="form-group">
             <input type="text" class="form-control" name="subject_chapter[]" id="requirements" placeholder=" Enter Chapter Name" required>
          </div>
       </div>
       <div class="">
          <button type="button" class="btn btn-danger btn-sm" style="margin-top: 0px;" name="button" onclick="removeRequirement(this)"> <i class="fa fa-minus"></i> </button>
       </div>
    </div>
 </div>
<script type="text/javascript">
var blank_requirement = jQuery('#blank_requirement_field').html();
jQuery(document).ready(function() {
    jQuery('#blank_requirement_field').hide();
});
function appendRequirement() {
    jQuery('#requirement_area').append(blank_requirement);
}

function removeRequirement(requirementElem) {
    jQuery(requirementElem).parent().parent().remove();
}
</script>