<div class="row ">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-body">
                <h4 class="page-title"> <i class="mdi mdi-apple-keyboard-command title_icon"></i> <?php echo get_phrase('organization'); ?>
                  <a href="<?php echo site_url('admin/organ_form/add_organ'); ?>" class="btn btn-outline-primary btn-rounded alignToTitle"><i class="mdi mdi-plus"></i><?php echo get_phrase('add_new_organization'); ?></a>
                </h4>
            </div> <!-- end card body-->
        </div> <!-- end card -->
    </div><!-- end col-->
</div>
<div class="row">
    <?php foreach ($organization->result_array() as $organ):
        if($organ['parent_id'] > 0  )
         continue;
         $sub_organization = $this->crud_model->get_sub_organization($organ['id']); ?>
         <div class="col-md-6 col-lg-6 col-xl-4 on-hover-action" id = "<?php echo $organ['id']; ?>">
             <div class="card d-block">
                 <img class="card-img-top img-list" src="<?php echo base_url('uploads/thumbnails/organization_thumbnails/'.$organ['thumbnail']); ?>" alt="Card image cap">
                 <div class="card-body">
                     <h4 class="card-title mb-0"><i class="<?php echo $organ['font_awesome_class']; ?>"></i> <?php echo $organ['name']; ?></h4>
                     <small style="font-style: italic;"><p class="card-text"><?php echo count($sub_organization).' '.get_phrase('sub_organization'); ?></p></small>
                 </div>

                 <ul class="list-group list-group-flush">
                     <?php foreach ($sub_organization as $sub_organ): ?>
                        <li class="list-group-item on-hover-action" id = "<?php echo $sub_organ['id']; ?>">
                            <span><i class="<?php echo $sub_organ['font_awesome_class']; ?>"></i> <?php echo $sub_organ['name']; ?></span>
                            <span class="category-action" id = 'organ-delete-btn-<?php echo $sub_organ['id']; ?>' style="float: right; margin-left: 5px; display: none; height: 20px;">
                                <a href="javascript::" class="action-icon" onclick="confirm_modal('<?php echo site_url('admin/organization/delete/'.$sub_organ['id']); ?>');"> <i class="mdi mdi-delete" style="font-size: 18px;"></i></a>
                            </span>
                            <span class="category-action" id = 'organ-edit-btn-<?php echo $sub_organ['id']; ?>' style="float: right; display: none; height: 20px;">
                                <a href="<?php echo site_url('admin/organ_form/edit_organ/'.$sub_organ['id']); ?>" class="action-icon"> <i class="mdi mdi-pencil" style="font-size: 18px;"></i></a>
                            </span>
                        </li>
                     <?php endforeach; ?>
                 </ul>
                 <div class="card-body">
                     <a href = "<?php echo site_url('admin/organ_form/edit_organ/'.$organ['id']); ?>" class="btn btn-icon btn-outline-info btn-sm" id = "organ-edit-btn-<?php echo $organ['id']; ?>" style="display: none;" style="margin-right:5px;">
                         <i class="mdi mdi-wrench"></i> <?php echo get_phrase('edit'); ?>
                     </a>
                     <a href = "#" class="btn btn-icon btn-outline-danger btn-sm" id = "organ-delete-btn-<?php echo $organ['id']; ?>"style="float: right; display: none;" onclick="confirm_modal('<?php echo site_url('admin/organization/delete/'.$organ['id']); ?>');" style="margin-right:5px;">
                         <i class="mdi mdi-delete"></i> <?php echo get_phrase('delete'); ?>
                     </a>
                 </div> <!-- end card-body-->
             </div> <!-- end card-->
         </div>
    <?php endforeach; ?>
</div>

<script type="text/javascript">
    $('.on-hover-action').mouseenter(function() {
        var id = this.id;
        $('#organ-delete-btn-'+id).show();
        $('#organ-edit-btn-'+id).show();
    });
    $('.on-hover-action').mouseleave(function() {
        var id = this.id;
        $('#organ-delete-btn-'+id).hide();
        $('#organ-edit-btn-'+id).hide();
    });
</script>
