@extends('layouts/landing')

@section('content') 


 <link rel="stylesheet" href="{{ asset('assets/css/bootstrap.css') }}">
 <style type="text/css">
	.nav-tabs>li>a{
		background: #B8398A;
	}
	.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
	    line-height: 1.42857143;
	    font-size: 14px;
	    color: #ffffff;
	    padding: 14px 18px;
	    background: #fd787e;
	    border: 2px solid #f87878;
	}
	.nav-tabs>li>a {
     background: none; 
	}
	.nav-tabs>li>a {
	    color: #b15a0f;
	    background-color: white;   
	    border:2px solid #b15a18;
	    font-weight: bold;
  	}
  	.ui-title-bar__title {
    font-size: 2.8rem !important;
    line-height: 3.2rem !important;
    font-weight: 600 !important;
	}
	.nav>li>a:focus, .nav>li>a:hover{
		background-color:white ;
		 border: 2px solid #0f86b1
	}
	.nav-tabs>li{
		margin-right: 0px !important;
		padding-left: 0px;
	}
	.tab-content{
		padding-left: 15px;padding-right: 15px;
	}
	.panel-title{
		font-size: 15px !important; color: #212b36;
	}
	.nav-tabs{
		margin-left: 15px;margin-right: 15px;
	}
	.header{
		margin-left: 30px;
	}
	.tab-pane {
	    margin-top: 20px;
	}
	.navbar-expand-lg .navbar-collapse {    
	    display: flex!important;    
	}
</style>
<div id="home" class="header-hero bg_cover" style="background-image: url(images/banner-bg.svg);height:300px;">
    <div id="particles-1" class="particles"></div>
</div> <!-- header hero -->
<section id="features" class="services-area">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-10">
                    <div class="section-title text-center pb-40">
                        <div class="line m-auto"></div>
                        <h3 class="title"> <span> FAQs!</span></h3>
                    </div> <!-- section title -->
                </div>
            </div> <!-- row -->
            <div class="row justify-content-center">
                
			<div class="col-md-12">
					<ul id="wf-tab" class="nav nav-tabs text-left" role="tablist">
					@php $i = 1; @endphp
					@foreach($Faqcategories as $value)
						<li class="col-xs-2 @if($i == 1) active @endif"><a href="#tab{{$i}}" data-toggle="tab">{{$value->title}}</a></li>	
						@php $i = $i+1;@endphp	
					@endforeach
					</ul>
					<div class="tab-content">
							@php $i = 1; @endphp
							@foreach($Faqcategories as $value)
							<div id="tab{{$i}}" class="tab-pane @if($i == 1) active @endif">
								<div class="panel-group accordion" id="accordion">
									@php $j = 1; @endphp
									@foreach($faqQueAns as $value1)
									@if($value->id == $value1->faq_categories_id)
									<div class="panel panel-default">
										<div class="panel-heading">
										<a class="accordion-toggle collapsed" style="text-decoration: none;" href="#question{{$i}}_{{$j}}" data-toggle="collapse" ><h4 class="panel-title"><b>{{$value1->question}}</b></h4></a> </div>
										<div id="question{{$i}}_{{$j}}" class="panel-collapse collapse">
											<div class="panel-body">
												{{$value1->answer}}
											</div>
										</div>
									</div>
									@php $j = $j+1;@endphp	
									@endif
									@endforeach					
								</div>
							</div>
							@php $i = $i+1;@endphp	
							@endforeach
					</div>
				</div>
            </div> <!-- row -->
        </div> <!-- container -->
    </section>

<a href="#" class="back-to-top"><i class="lni-chevron-up"></i></a>

@stop

@section('moar_scripts')
<script type="text/javascript">

	// $('.navbar-area').addClass('sticky');
	// $(".navbar .navbar-brand img").attr("src", "images/logo-2.svg");
	// $('.sticky').removeClass('navbar-area');
</script>
@stop