<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<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>

<?php 
  $userDetails = $this->session->userdata('isUserLoggedIn');
  // print_r($menu_id); die();
    $query = $this->db->select('*')->where('id',$menu_id)->get('menu');
    $menuName = $query->result_array();
    $menuName = $menuName[0];
      // echo "<pre>"; print_r($menuName); die();
?>

<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"> <?php echo $menuName['fsTitle']; ?> Facility 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>
                         Facility <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">
                            
                            <?php
                            foreach ($category_data as $category)
                            {
                            ?> 

                            <div class="col-md-4">
                                <div class="p-3 rounded overflow-hidden position-relative text-white mb-g">
                                    <div class="">
                                        <h3 class="display-3 d-block l-h-n m-0 fw-500">
                                             <?php 
                                                // print_r($userDetails); die();
                                                $countFacilities = $this->db->select('facilities.*,count(*) as count')->where('fiMenuId',$menu_id)->where('fiCategoryId',$category->id)->from('facilities')->get();

                                                
                                                $count = $countFacilities->result_array()[0];
                                               // echo "<pre>";  print_r($count); die();

                                                echo $count['count'];
                                             ?>
                                            <small class="m-0 l-h-n"><?php echo $category->fsTitle ?></small>
                                           
                                            
                                            <?php
                                            echo anchor(site_url('category/delete/'.$category->id.'?menu_id='.$menu_id),'<div class="btn btn-outline-danger btn-icon waves-effect waves-themed"><i class="fa fa-trash-o"></i></div>','onclick="javasciprt: return confirm(\'Are You Sure ?\')"'); 
                                            ?>
                                            
                                            
                                            <?php  
                                            echo anchor(site_url('facilities/menus/'.$menu_id).'?categoryid='.$category->id,'<div class="btn btn-outline-success btn-icon waves-effect waves-themed "><i class="fa fa-eye"></i></div>'); 
                                            ?>  
                                            
                                        </h3>
                                    </div>
                                </div>
                            </div>
                            <?php
                             }
                            ?>

                            <div class="col-md-4">
                                <div class="p-3 rounded overflow-hidden position-relative text-white mb-g" >
                                    <a href="<?php echo site_url('category/create/'.$menu_id); ?>">
                                        <div class="">
                                            <h3 class="display-3 d-block l-h-n m-0 fw-500" >
                                                 <i class="fal fa-plus" style=" margin-top: 30px;   margin-bottom: 30px;"></i>
                                                <small class="m-0 l-h-n" style="margin-bottom: 17px !important; font-weight: 600; text-transform: uppercase;">Add Hotel Facility</small>
                                               
                                              
                                            </h3>
                                        </div>
                                    </a>
                                </div>
                            </div>
    
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<style type="text/css">
    .btn.btn-outline-danger.btn-icon.waves-effect.waves-themed { background: #f55ba3;}
   .p-3.rounded.overflow-hidden.position-relative.text-white.mb-g  {        box-shadow: 2px 4px 10px 2px #bfbfbf; text-align: center;
    color: #886ab5 !important;  border-radius: 7px !important; }
   .p-3.rounded.overflow-hidden.position-relative.text-white.mb-g small.m-0.l-h-n { color: #886ab5 !important; font-weight: 500;}
   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; }
   .btn-icon.waves-effect.waves-themed{width: 40px !important; height: 40px; text-align: center; padding-top: 12px;}
   .btn-icon.waves-effect.waves-themed .fa{font-size: 15px;}
   small.m-0.l-h-n {
    height: 40px;
}
</style>