@extends('frontend.master')
@section('content')
<style>
body{
   position: relative; /* required */
}
.flex-column{
    position: sticky; /* Supported in latest version of Chrome, Firefox, Safari, Opera and Edge browsers */
    top: 15px;
}
</style>
<div class="container">
    <div id="faqsGeo">
        <div class="row" style="margin-top: 20px;">
            <div class="col-sm-3" id="myScrollspy">
				<ul class="nav nav-pills flex-column">
					<li class="nav-item">
						<a class="nav-link" href="#item-1">FAQs</a>
					</li>
					<div class="image-fqas">
						<img src='/frontend/images/img_faqs.png' style='max-width:100%;'/>
					</div>
                </ul>
            </div>
            <div class="col-sm-9 content-fqas">
				<div data-spy="scroll" data-target="#navbar-example3" data-offset="0">
					<h1 id="item-1">FAQs</h1>
										@if ($data->item_1_1 != '')
						<p>
							<div class="question_box" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
								<span>{{ $flag }}. {!! $data->item_1_1 !!}</span><i class="fas fa-angle-down"></i>
							</div>
						</p>
						<div class="collapse show" id="collapseExample">
							<div class="card card-body">
								{!! $data->item_1_2 !!}
							</div>
							<br>
						</div>
											@endif

					@if ($data->item_2_1 != '')
						<p>
							<div class="question_box" data-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="false" aria-controls="collapseExample">
								<span>{{ $flag }}. {!! $data->item_2_1 !!}</span><i class="fas fa-angle-down"></i>
							</div>
						</p>
						<div class="collapse show" id="collapseExample2">
							<div class="card card-body">
								{!! $data->item_2_2 !!}
							</div>
							<br>
						</div>
											@endif
						
					@if ($data->item_3_1 != '')
						<p>
							<div class="question_box" data-toggle="collapse" href="#collapseExample3" role="button" aria-expanded="false" aria-controls="collapseExample">
								<span>{{ $flag }}. {{ $data->item_3_1 }}</span><i class="fas fa-angle-down"></i>
							</div>
						</p>
						<div class="collapse show" id="collapseExample3">
							<div class="card card-body">
								{!! $data->item_3_2 !!}
							</div>
							<br>
						</div>
					@endif
				</div>
			</div>
		</div>
	</div>
</div>
<style>
    .nav-pills .nav-link.active, .nav-pills .show>.nav-link{
		color: #007bff !important;
		background-color: transparent;
		border-left: 3px solid #007bff !important;
	}
    .image-fqas{
        width: 100%;
        height: 350px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
    #myScrollspy li a{
        border-left: 3px solid #d8d2d2;
		color: #212529;
		font-weight:bold;
    }
	#myScrollspy .nav-pills .nav-link {
        border-radius: 0px;
    }
    .content-fqas a{
        width:100%;
    }
    .content-fqas i{
        float: right;
    }
	.question_box{
		display:block;
		background:#007bff;
		color:white;
		padding:10px;
		cursor:pointer;
		border-radius:3px;
	}
	.section_title{font-size: 1.2rem;}
	h3{font-size: 1.0rem;}
	
</style>
@endsection