Get categories as tab

I am using opencart 2.0.1.1 ,Here i want to get categories as tab o that we don't need to open a new link every time to see categories related products, as shown in below image, anyone please help , here i have added code Catalog/controller/module/product_category.php
<?php

class ControllerModuleFeaturedcats extends Controller {

private $error = array();

public function index() {

$this->load->language('module/featuredcats');

$this->document->setTitle($this->language->get('heading_title'));

$this->load->model('extension/module');

if (($this->request->server['REQUEST_METHOD'] == 'POST') && $this->validate()) {
if (!isset($this->request->get['module_id'])) {
$this->model_extension_module->addModule('featuredcats', $this->request->post);
} else {
$this->model_extension_module->editModule($this->request->get['module_id'], $this->request->post);
}

$this->session->data['success'] = $this->language->get('text_success');

$this->response->redirect($this->url->link('extension/module', 'token=' . $this->session->data['token'], 'SSL'));
}

$data['heading_title'] = $this->language->get('heading_title');

$data['text_edit'] = $this->language->get('text_edit');
$data['text_enabled'] = $this->language->get('text_enabled');
$data['text_disabled'] = $this->language->get('text_disabled');

$data['entry_name'] = $this->language->get('entry_name');
$data['entry_category'] = $this->language->get('entry_category');
$data['entry_limit'] = $this->language->get('entry_limit');
$data['entry_width'] = $this->language->get('entry_width');
$data['entry_height'] = $this->language->get('entry_height');
$data['entry_status'] = $this->language->get('entry_status');
$data['entry_carousel'] = $this->language->get('entry_carousel');

$data['help_product'] = $this->language->get('help_product');

$data['button_save'] = $this->language->get('button_save');
$data['button_cancel'] = $this->language->get('button_cancel');

if (isset($this->error['warning'])) {
$data['error_warning'] = $this->error['warning'];
} else {
$data['error_warning'] = '';
}

if (isset($this->error['name'])) {
$data['error_name'] = $this->error['name'];
} else {
$data['error_name'] = '';
}

if (isset($this->error['width'])) {
$data['error_width'] = $this->error['width'];
} else {
$data['error_width'] = '';
}

if (isset($this->error['height'])) {
$data['error_height'] = $this->error['height'];
} else {
$data['error_height'] = '';
}

$data['breadcrumbs'] = array();

$data['breadcrumbs'][] = array(
'text' => $this->language->get('text_home'),
'href' => $this->url->link('common/dashboard', 'token=' . $this->session->data['token'], 'SSL')
);

$data['breadcrumbs'][] = array(
'text' => $this->language->get('text_module'),
'href' => $this->url->link('extension/module', 'token=' . $this->session->data['token'], 'SSL')
);

if (!isset($this->request->get['module_id'])) {
$data['breadcrumbs'][] = array(
'text' => $this->language->get('heading_title'),
'href' => $this->url->link('module/featuredcats', 'token=' . $this->session->data['token'], 'SSL')
);
} else {
$data['breadcrumbs'][] = array(
'text' => $this->language->get('heading_title'),
'href' => $this->url->link('module/featuredcats', 'token=' . $this->session->data['token'] . '&module_id=' . $this->request->get['module_id'], 'SSL')
);
}

if (!isset($this->request->get['module_id'])) {
$data['action'] = $this->url->link('module/featuredcats', 'token=' . $this->session->data['token'], 'SSL');
} else {
$data['action'] = $this->url->link('module/featuredcats', 'token=' . $this->session->data['token'] . '&module_id=' . $this->request->get['module_id'], 'SSL');
}

$data['cancel'] = $this->url->link('extension/module', 'token=' . $this->session->data['token'], 'SSL');

if (isset($this->request->get['module_id']) && ($this->request->server['REQUEST_METHOD'] != 'POST')) {
$module_info = $this->model_extension_module->getModule($this->request->get['module_id']);
}

$data['token'] = $this->session->data['token'];

if (isset($this->request->post['name'])) {
$data['name'] = $this->request->post['name'];
} elseif (!empty($module_info)) {
$data['name'] = $module_info['name'];
} else {
$data['name'] = '';
}

$this->load->model('catalog/category');

$data['categories'] = array();


if (isset($this->request->post['category_category'])) {
$categories = $this->request->post['category_category'];
} elseif (!empty($module_info)) {
$categories = $module_info['category_category'];
} else {
$categories = array();
}

foreach ($categories as $category_id) {
$category_info = $this->model_catalog_category->getCategory($category_id);

if ($category_info) {
$data['categories'][] = array(
'category_id' => $category_info['category_id'],
'name' => $category_info['name']
);
}
}

if (isset($this->request->post['limit'])) {
$data['limit'] = $this->request->post['limit'];
} elseif (!empty($module_info)) {
$data['limit'] = $module_info['limit'];
} else {
$data['limit'] = 5;
}

if (isset($this->request->post['width'])) {
$data['width'] = $this->request->post['width'];
} elseif (!empty($module_info)) {
$data['width'] = $module_info['width'];
} else {
$data['width'] = 200;
}

if (isset($this->request->post['height'])) {
$data['height'] = $this->request->post['height'];
} elseif (!empty($module_info)) {
$data['height'] = $module_info['height'];
} else {
$data['height'] = 200;
}

if (isset($this->request->post['status'])) {
$data['status'] = $this->request->post['status'];
} elseif (!empty($module_info)) {
$data['status'] = $module_info['status'];
} else {
$data['status'] = '';
}

if (isset($this->request->post['carousel'])) {
$data['carousel'] = $this->request->post['carousel'];
} elseif (!empty($module_info)) {
$data['carousel'] = $module_info['carousel'];
} else {
$data['carousel'] = '';
}

$data['header'] = $this->load->controller('common/header');
$data['column_left'] = $this->load->controller('common/column_left');
$data['footer'] = $this->load->controller('common/footer');

$this->response->setOutput($this->load->view('module/featuredcats.tpl', $data));
}

protected function validate() {
if (!$this->user->hasPermission('modify', 'module/featured')) {
$this->error['warning'] = $this->language->get('error_permission');
}

if ((utf8_strlen($this->request->post['name']) < 3) || (utf8_strlen($this->request->post['name']) > 64)) {
$this->error['name'] = $this->language->get('error_name');
}

if (!$this->request->post['width']) {
$this->error['width'] = $this->language->get('error_width');
}

if (!$this->request->post['height']) {
$this->error['height'] = $this->language->get('error_height');
}

return !$this->error;
}

}

and view/theme/*/template/module/product_category.tpl
<script>
$(document).ready(function($) {
$('#tabs-<?php echo $categories; ?> a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
});
</script>

<div class="tab-content">


<!-- Default panel contents -->
<div class="panel-heading"><h3><?php echo $heading_title; ?></h3></div>

<!-- Table -->
<table class="table">
<?php static $i=0; ?>
<?php
foreach ($categories as $category) { ?>
<!-- Nav tabs -->

<div role="tabpanel" class="tab-pane " id="category-<?php echo $category['category_id']; ?>">
<tr>
<td colspan="4">
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="category<?php echo $category['category_id']; ?>">
<ul class="nav nav-tabs" role="tablist">

<li class="active"><a href="#category<?php echo $category['category_id']; ?>" role="tab" data-toggle="tab"><?php echo $category['name']; ?></a></li>



</ul>
<?php foreach ($category['products'] as $product) { ?>

<div class="product-layout col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="product-thumb transition">

<div class="image">
<img src="<?php echo $product['thumb']; ?>"
alt="<?php echo $product['name']; ?>"
title="<?php echo $product['name']; ?>"
class="img-responsive" />


</div>
<div class="caption">
<div class="name">

<?php echo $product['name']; ?>

</div>




<?php if ($product['rating']) { ?>
<div class="rating">
<?php for ($i = 1; $i <= 5; $i++) { ?>
<?php if ($product['rating'] < $i) { ?>
<span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
<?php } else { ?>
<span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span>
<?php } ?>
<?php } ?>
</div>
<?php } ?>
<?php if ($product['price']) { ?>
<div class="price">
<?php if (!$product['special']) { ?>
<?php echo $product['price']; ?>
<?php } else { ?>
<span class="price-new"><?php echo $product['special']; ?></span> <span class="price-old"><?php echo $product['price']; ?></span>
<?php } ?>
<?php if ($product['tax']) { ?>
<span class="price-tax"><?php echo $text_tax; ?> <?php echo $product['tax']; ?></span>
<?php } ?>
</div>
<?php } ?>
</br>
<button class="product-btn-add" type="button" onclick="cart.minus('<?php echo $product['product_id']; ?>');pq_minus( $(this).parent() );">
<span class="hidden-sm">-</span>
</button>

<button class="product-btn-add" type="button" onclick="cart.add('<?php echo $product['product_id']; ?>');pq_plus( $(this).parent() ); ">
<span class="hidden-sm">+</span>
</button>
</div>
</div>
</div>



<?php } ?>
</div></div>
</td>
</tr>
<?php $i++ ?>
<?php }?>
</table>
</div>
</div>
i have added two categories to get as tab But its showing me same tab twice in a row.