<style type="text/css">
.pagination li.active {background-color: #886ab5; color: #FFF; }
.pagination li {margin-left: 10px; padding: 3px 15px 3px 15px; background-color: #efefff; color: #000; }
.pagination {display: flex; float: right; padding: 7px; background-color: #FFF; box-shadow: 0 0 10px 0 rgba(183,192,206,.2); margin-bottom: 1.5rem; border: 1px solid rgba(238,238,238,.75); }
</style>

<main id="js-page-content" role="main" class="page-content">
    <ol class="breadcrumb page-breadcrumb">
        <li class="breadcrumb-item"><a href="javascript:void(0);">Dashboard </a></li>
        <li class="breadcrumb-item"> Category Table</li>
        <li class="position-absolute pos-top pos-right d-none d-sm-block"><span class="js-get-date"></span></li>
    </ol>
    <div class="row">
        <div class="col-lg-12 col-xl-12">
            <div id="panel-1" class="panel">
                <div class="panel-hdr">
                    <h2>
                         Category <span class="fw-300"><i>Tables</i></span>
                    </h2>
                </div>
                <div class="panel-container show">
                    <div class="panel-content">
                        <div class="row" style="margin-bottom: 10px">
                            <div class="col-md-3">
                                <?php echo anchor(site_url('category/create'),'Add Category', 'class="btn btn-primary"'); ?>
                            </div>
                            <div class="col-md-4 text-center">
                                <?php if($this->session->userdata('message') <> ''): ?>
                                <div style="padding: 0.3rem 0.2rem;" id="message" class="panel-tag">
                                    <?php echo $this->session->userdata('message') <> '' ? $this->session->userdata('message') : ''; ?>
                                </div>
                              <?php endif; ?>
                            </div>
                            <div class="col-md-1 text-right">
                            </div>
                            <div class="col-md-4 text-right">
                                <form action="<?php echo site_url('category/index'); ?>" class="form-inline" method="get">
                                    <div class="input-group">
                                        <input type="text" class="form-control" name="q" value="<?php echo $q; ?>">
                                        <span class="input-group-btn">
                                          <button class="btn btn-primary" type="submit">Search</button>
                                          <?php 
                                                if ($q <> '')
                                                {
                                                    ?>
                                                    <a href="<?php echo site_url('category'); ?>" class="btn btn-danger">Reset</a>
                                                    <?php
                                                }
                                            ?>
                                        </span>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="frame-wrap">
                            <table class="table m-0">
                                <thead>
                                    <tr>
                                        <th>Menu</th>
                                        <th>Category Name</th>
                                        <!-- <th>category Logo</th> -->
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                    <?php
                                        foreach ($category_data as $category)
                                        {
                                    ?>  
                                         <td><?php echo $category->fsmenu ?></td>
                                        <td><?php echo $category->fsTitle ?></td>
                                       <!--  <td><img src="<?php echo $category->fsImage ?>" style="width: 110px; height: auto; background-color: #333; padding: 10px; border-radius: 10px;"></td> -->
                                        <td width="200px">
                                            <div class="btn btn-outline-success btn-icon waves-effect waves-themed">
                                            <?php  
                                            echo anchor(site_url('category/update/'.$category->id),'Edit'); 
                                            ?>
                                            </div>
                                            <div class="btn btn-outline-danger btn-icon waves-effect waves-themed">
                                            <?php
                                            echo anchor(site_url('category/delete/'.$category->id),'Delete','onclick="javasciprt: return confirm(\'Are You Sure ?\')"'); 
                                            ?>
                                            </div>

                                        </td>
                                    </tr>
                                    <?php
                                    }
                                    ?>
                                </tbody>
                                
                            </table>
                            
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <a href="#" class="btn btn-primary">Total Record : <?php echo $total_rows ?></a>
                           </div>
                            <div class="col-md-6 text-right">
                                <?php echo $pagination ?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<style type="text/css">
    
   i.fal.fa-edit {  padding: 10px; font-weight: 600; color: #1dc9b7 !important;}
   i.fal.fa-edit:hover { color: #fff !important;}
   i.fal.fa-trash {padding: 10px; color: #fd3995 !important; font-weight: 600; }
   i.fal.fa-trash:hover {color: #FFF !important; }
</style>