{{ header }}
<style>

.get_support {
	display: inline-block;
    width: 300px;
    height: 200px;
    background-color: #1598ca;
    border: 1px solid #333;
    text-align: center;
    color: white;
    font-size: 14px;
    padding: 20px;
}
.get_support:hover
{
	background-color: #85cae5;
    border: 1px solid #ccc;
    color: #ffffff;
}
</style>
<div class="container">
  <ul class="breadcrumb">
    {% for breadcrumb in breadcrumbs %}
    <li><a href="{{ breadcrumb.href }}"> {{ breadcrumb.text }}</a></li>
    {% endfor %}
  </ul>
  {% if error_warning %}
  <div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> {{ error_warning }}</div>
  {% endif %}
  <div class="row"> {{ column_left }}
    {% if column_left and column_right %}
    {% set class = 'col-sm-6' %}
    {% elseif column_left or column_right %}
    {% set class = 'col-sm-9' %}
    {% else %}
    {% set class = 'col-sm-12' %}
    {% endif %}
    <div id="content" class="{{ class }}"> {{ content_top }}
		
      	{% if setting.config_faq ==1 %}
		
		<h1>{{heading_title}}</h1>
	<div class="support-form-wrap">      
    <div class="row" >
		 
    <div class="col-md-4">
    <ul class="list-group help-group">

		{% if groups %}
		{% for group in groups	 %}
		<div class="faq-list list-group nav nav-tabs" style="padding-top: 7px;">
        <a href="#tab1{{ group.group_id }} " onclick ="myFunction( {{ group.group_id}} )" class="list-group-item active"  role="tab" data-toggle="tab">{{ group.name }}</a>
		</div>
		{% endfor %}
		{% endif %} 
    </ul>	
	</div>
	<div class="faq col-md-8">
      <div class="tab-pane active"  id="tab1">
	  <div class="panel-group" id="help-accordion-1">

	  	{% set chk =0 %}
	
	{% if descriptions %}		
			 {% for description in descriptions  %}   
			{% if chk == 0 %}
			<div class="panel panel-default panel-help">		
			<a href="#opret-produkt{{description.faq_id}}" data-toggle="collapse" data-parent="#help-accordion-1">
              <div class="panel-heading">
                <h3>{{description.question}}</h3>
              </div>
            </a>
            <div id="opret-produkt{{description.faq_id}}" class="collapse in">
              
			  <div class="panel-body">
                <p> {{ description.answer }}</p>                
              </div>
            </div>
			</div>
			{% else %}
			
			<div class="panel panel-default panel-help">			
            <a href="#opret-produkt{{description.faq_id}}"data-toggle="collapse" class="collapsed" data-parent="#help-accordion-1" aria-expanded="false">
              <div class="panel-heading">
                <h3>{{description.question}}</h3>
              </div>
            </a>
            <div id="opret-produkt{{description.faq_id}}" class="collapse" aria-expanded="false">
              <div class="panel-body">
                <p>{{description.answer}}</p>   
              </div>
			</div>		  
		  </div>
		  
	{% endif %}
	 
	 {% set chk = chk + 1 %}  
	{% endfor %}
	{% endif %}  
        </div>
      </div>
	</div>  
	</div>
	</div>
		{% endif  %}
		
		
		
		<div class="row2" style="margin-top: 40px;text-align: center;">
	<a href="index.php?route=extension/module/support">
	 <div class="get_support" style="margin-right: 20px;">
	 <h2 style="color: white;">GET SUPPORT</h2>
	 <p class="SupportServices-desc">
      Still have questions? Our Customer Support Team is ready to assist you.
     </p>
	 </div>
	</a>
	 <a href="index.php?route=extension/module/ticket">	
	 <div class="get_support">
	 <h2 style="color: white;">MY TICKET HISTORY</h2>
	 <p class="SupportServices-desc">Manage Tickets you submitted to Customer Support Team.</p>	
	 </div>
	 </a>
	</div> 
      {{ content_bottom }}</div>
    {{ column_right }}</div>
</div>
 
<script type="text/javascript">

function myFunction(group_id) {	
$.ajax({
    
      url: 'index.php?route=extension/module/getsupport/getFaq&group_id='+group_id+'',
      type: 'post',
	  dataType: 'json',
      success: function(htmlf) {
		  if (htmlf) {
			
			  console.log(htmlf);
			 $("#help-accordion-1").html(htmlf);	
					}

			 
	
						
					}
		  
});
}
</script>
{{ footer }}