<style>

a {
    color: #000 !important;
    text-decoration: none;
}
.panel-default .panel-heading {
    background-color: transparent !important;
    border-color: transparent !important;
}
.panel-default {
    border-color: transparent;
    border-bottom: 1px solid silver;
}
.panel {
    border-bottom: 1px solid silver;
}
.panel-title a.a_panel_title {
    color: #0067b8 !important;
    justify-content: initial !important;
}
.panel-title a.a_panel_title:hover, 
.panel-title a.a_panel_title:focus {
    color: #002050 !important;
}
.panel-title i.title_left_icon {
    color: #ffffff; 
    border: none;
    border-radius: 50%;
}

.panel-title i.title_left_icon.act_plus{
    background: url("<?= base_url('uploads/plus.png'); ?>"); 
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.panel-title:hover i.title_left_icon.act_plus, 
.panel-title:focus i.title_left_icon.act_plus {
    background: url("<?= base_url('uploads/plus-hover.png'); ?>"); 
	background-size: 100% 100%;
	background-repeat: no-repeat; 
} 

.panel-title i.title_left_icon.act_minus{
    background: url("<?= base_url('uploads/minus.png'); ?>"); 
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.panel-title:hover i.title_left_icon.act_minus, 
.panel-title:focus i.title_left_icon.act_minus {
    background: url("<?= base_url('uploads/minus-hover.png'); ?>"); 
	background-size: 100% 100%;
	background-repeat: no-repeat; 
} 

.panel-title .title_left_text {
    margin: 0;
}
</style>


<style>
  div.title_page_mobile{
    display: none;
    color: #494949;
  }
  div.title_page_mobile div.col-xs-12{
    text-align: center;
  }
  div.title_page_mobile h1{
    text-transform: capitalize;
    border-bottom: 3px solid #ecb55b;
    display: inline-block;
    font-size: 27px;
  }
  @media only screen and (max-width: 991px) {
    .mt-about-sec {
      padding: 30px 0 0px;
    }
    .mt-contact-banner{
      padding-top: 10px !important;
      margin-top: 10px !important;
      height: 180px; 
      background-size: cover; 
      background-repeat: no-repeat;
    }
    div.title_page_desktop{
      display: none;
    }
    div.title_page_mobile{
      display: block;
      padding-top: 80px;
    }
  }
</style>

<!-- Main of the Page -->
<?php 
    $q_config_page = $this->db->select("
            page_val1,
            page_val2,
            page_val3,
            page_val4,
            page_val5
        ")->get_where("configuration",array(
        "id_configuration"=>1
    ))->row(); 

    $t_page_name = $this->session->userdata('site_lang') == 'english' ? explode('||', $q_config_page->page_val4)[1] : explode('||', $q_config_page->page_val4)[0];

?> 
<main id="mt-main">
    <!-- Mt Contact Banner of the Page -->
    <?php $banner = $this->db->select('faq_banner')->from('configuration')->where('id_configuration',1)->get()->row()->faq_banner ?>
    <div class="container title_page_mobile">
      <div class="row">
        <div class="col-xs-12">
          <h1>
              <?= $t_page_name; ?>
          </h1>
        </div>
      </div>
    </div>
    <section class="mt-contact-banner" style="background-image: url(<?=base_url('uploads/blog/'.$banner)?>);">
      <div class="container title_page_desktop">
        <div class="row">
          <div class="col-xs-12 text-center" style="padding-top: 40px;">
            <h1><?= strtoupper($t_page_name); ?></h1>
          </div>
        </div>
      </div>
    </section>
    <!-- Mt Contact Banner of the Page end -->
    <!-- Mt Blog Detail of the Page -->
    <div class="mt-blog-detail fullwidth wow fadeInUp" data-wow-delay="0.4s" style="padding-top: 40px;">
      
      <div class="container">
        
        <div class="row">

          <div class="col-xs-12 div_parent_collapse">
            <!-- Blog Post of the Page -->
            <article class="blog-post style3 art_parent_collapse" style="">
             
                <!-- <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> -->

                <div style="display: flex;align-items: center; margin-bottom:15px; justify-content: space-between;">
                    <h2 style="margin:0;">
                        <a href="#" id="sponshorship" style="color:black;"><?= strtoupper($t_page_name); ?></a>
                    </h2>
                    <button id="btn_faq_collapse_expand" type="button"  class="btn btn-sm btn-default"><?=ucwords(lang('expand_all'))?></button>
                </div>
                
                <?php  
                    $level1 = $this->db->select('*')->from('faq')->where('parent',NULL)->where('status',1)->order_by('priority','asc')->get()->result();
                    $two=0; 
                    foreach ($level1 as $l1) : 
                    $two++; 
                ?>

                <div class="div_fill_collapse">
                    <div id="parent_collapseTwo<?=$two?>" class="panel panel-default">
                        <div class="panel-heading" style="padding-top: 5px; padding-bottom: 5px;">
                            <h4 class="panel-title">
                                <a class="a_panel_title" style="display: flex;align-items: center;justify-content: space-between;" data-toggle="collapse" data-parent="#accordion<?=$two?>" href="#collapseTwo<?=$two?>">
                                    <i class="title_left_icon act_plus" style=""></i>
                                    <span class="title_left_text"><?= $this->session->userdata('site_lang') == 'english' ? $l1->category_en : $l1->category ?></span>
                                    <!-- <i style="font-size: 19px;" class="fa fa-angle-down" aria-hidden="true"></i> -->
                                </a>
                            </h4>
                        </div>

                        <div id="collapseTwo<?=$two?>" class="panel-collapse collapse">
                            <div class="panel-body">
                                <div class="panel-body">
                                    
                                    <?php 
                                        $level2 = $this->db->select('*')->from('faq')->where('parent',$l1->id_categories)->where('status',1)->order_by('priority','asc')->get()->result();
                                        $twoOne=0; 
                                        foreach ($level2 as $l2) : 
                                        $twoOne++; 
                                    ?>

                                    <h2><?= $this->session->userdata('site_lang') == 'english' ? $l2->category_en : $l2->category  ?></h2>
                                    <div class="panel-group" id="accordion<?=$twoOne?>">
        
                                        <?php  
                                            $level3 = $this->db->select('*')->from('faq')->where('parent',$l2->id_categories)->where('status',1)->order_by('priority','asc')->get()->result();
                                            $twoOneOne=0;
                                            foreach ($level3 as $l3) :
                                            $twoOneOne++; 
                                        ?>
                                        
                                        <div class="panel">
                                            <a data-toggle="collapse" data-parent="" href="#collapse<?=$two.$twoOne.$twoOneOne?>"><?= $this->session->userdata('site_lang') == 'english' ? $l3->category_en : $l3->category ?>
                                            </a>
                                            <div id="collapse<?=$two.$twoOne.$twoOneOne?>" class="panel-collapse collapse">
                                                <div class="panel-body">
                                                  <?= $this->session->userdata('site_lang') == 'english' ? $l3->description_en : $l3->description ?>
                                                  </div>
                                            </div>
                                        </div>
                                        <?php endforeach ?>

                                    </div>
                                    <?php endforeach ?>
                                </div>
                            </div>
                        </div>                      
                    </div>

                    <?php endforeach ?>

                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
                    <script>

                        $(document).ready(function(){ 
                            let current_collapse = window.location.hash; 
                            if (current_collapse != "" && current_collapse != null) {
                                $(".collapse").collapse('hide');
                                let cek_length = $(current_collapse).parents('.div_fill_collapse').length;
                                // alert(cek_length);
                                if (cek_length>0) {
                                    // $(current_collapse).parents('.div_fill_collapse').find("");
                                    let get_parent_coll = $(current_collapse).parents('.div_fill_collapse').eq(0).find("a.a_panel_title:eq(0)");
                                    // alert(get_parent_coll.attr("href"));
                                    $(get_parent_coll.attr("href")).collapse('show');
                                    $(current_collapse).collapse('show');
                                }else{ 
                                    $(current_collapse).collapse('show');
                                }
                                $('html, body').animate({
                                    scrollTop: $(current_collapse).offset().top-200
                                }, 800, function(){

                                });
                            }
                            // alert(current_collapse);

                            $("button#btn_faq_collapse_expand").click(function(){
                                var this_tag = $(this); 
                                if (this_tag.text().toLowerCase() == '<?=lang("expand_all")?>') {
                                    this_tag.text('<?=ucwords(lang("collapse_all"))?>');
                                    <?php $two=0; ?>
                                    <?php foreach ($level1 as $l1) : ?>
                                        <?php $two++; ?>
                                        $('div#parent_collapseTwo<?=$two?> .panel-collapse').collapse('show');
                                    <?php endforeach; ?>

                                    $(".title_left_icon").removeClass("act_plus").addClass("act_minus");
                                }else{
                                    this_tag.text('<?=ucwords(lang("expand_all"))?>'); 
                                    <?php $two=0; ?>
                                    <?php foreach ($level1 as $l1) : ?>
                                        <?php $two++; ?>
                                        $('div#parent_collapseTwo<?=$two?> .panel-collapse').collapse('hide');
                                    <?php endforeach; ?>
                                    
                                    $(".title_left_icon").addClass("act_plus")
                                    .removeClass("act_minus");
                                }
                            });

                            $(".panel-title a.a_panel_title").click(function(){
                            	let t_ele = $(this).find(".title_left_icon");
                            	if (t_ele.hasClass("act_plus")) {
                            		t_ele.removeClass("act_plus")
                            		.addClass("act_minus");
                            	}else{
                            		t_ele.addClass("act_plus")
                            		.removeClass("act_minus");
                            	}
                            });
                        });
                    </script>
                    
                </div>
            </article>    
          </div><!-- end col-xs-12-->  
        </div><!-- end row-->

      </div><!-- container -->
    </div>  

</main>