@extends('reachassuree_web/layouts.main')
@section('title', $data['title'])
@section('content')
<style>
	input#search_value {
		/* border: transparent; */
		border-radius: 20px;
	}

	.form-control {
		height: 45px;
	}

	.row.searchBar {
		justify-content: end;
	}

	button.search-btn {
		background: transparent;
	}

	.searching {
		display: flex;
		justify-content: space-between;
	}

	.position-relative {
		position: relative !important;
	}

	.search-box .search-icon {
		font-size: 20px;
		position: absolute;
		right: 20px;
		top: 0;
		line-height: 45px;
	}

	.col-lg-12.search-button {
		display: block;
	}


	.btn-primary.clear-search {
		color: #fff;
		background-color: #023E8A;
		border-color: #0d6efd;
		height: 45px;
		text-align: center;
		padding: 10px;
		border-radius: 31px;
	}

	.section-title {
		max-width: 750px;
	}

	.alertmsg {
		color: #4e4e4eb5;
	}
</style>
<!-- Start Page Title Area -->
<div class="page-title-area">
	<div class="container">
		<div class="page-title-content">
			<h2>Frequently Asked Questions</h2>

			<ul>
				<li>
					<a href="{{ route('home.page') }}">
						Home
					</a>
				</li>

				<li class="active">
					FAQs

				</li>
			</ul>

			{{-- <img src="{{ asset('rassets/images/choose-shape.png') }}" alt="Image" class="shape shape-3" data-speed="0.09" data-revert="true"> --}}
		</div>
	</div>

	<img src="{{ asset('rassets/images/subscribe-shape-1.png') }}" alt="Image" class="shape shape-1" data-speed="0.04" data-revert="true">
	<img src="{{ asset('rassets/images/subscribe-shape-2.png') }}" alt="Image" class="shape shape-2" data-speed="0.04" data-revert="true">
</div>
<!-- End Page Title Area -->

<div class="container">
	<!-- Start FAQ Area -->
	<section class="faq-area pt-50 pb-50">
		<div class="container">
			<div class="row">
				<div class="section-title">
					<form action="{{route('faq')}}" method="post" id="formfaqs" class="search-form" novalidate enctype="multipart/form-data">
						@csrf
						<div class="row searchBar search-box">
							<div class="col-lg-12 search-button">
								<div class="col-lg-12 position-relative">
									<input type="search_value" class="form-control" value="" id="search_value" name="search_value" placeholder="Search" value="" required>
									<button class="search-btn" type="button" onclick="ClearFields();" id="clear-search"><i class="mdi mdi-close search-icon"></i></button>
								</div>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
		<div class="row">
			@foreach ($data['faqs'] as $key => $value)
			<div class="col-lg-6 faq_box" id='faq_box_{{$value->id}}'>
				<div class="faq-accordion">
					<ul class="accordion">
						<li class="accordion-item">
							<a class="accordion-title" href="javascript:void(0)">
								<i class="ri-add-line"></i>
								{{$value['question']}}
							</a>
							<div class="accordion-content show" style="display:none;">
								<p>{{ $value['ans'] }}</p>
							</div>
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						</li>
					</ul>
				</div>
			</div>
			@endforeach
		</div>
		<div class="row">
			<h5 id="message" class="text-center alertmsg"></h5>
		</div>
</div>
</div>
@endsection

@section('custom-scripts')

<script type="text/javascript">
	var dataOFFaq = @json($data['faqs']);
	function ClearFields() {
		document.getElementById("search_value").value = "";
		$(".faq_box").show();
	    $('#message').html("");
	}

	$(function() {
		$('#search_value').bind('input', function() {
			var searchInput = $(this).val();
			if (searchInput != "") {
				var result;
				$(".faq_box").hide();
				for (var i = 0; i < dataOFFaq.length; i++) {
					result = dataOFFaq[i]['question'].includes(searchInput);
					if (result) {
						$("#faq_box_" + dataOFFaq[i]['id']).show();
					}
					result = dataOFFaq[i]['ans'].includes(searchInput);
					if (result) {
						$("#faq_box_" + dataOFFaq[i]['id']).show();
					}
				}
			} else {
				$(".faq_box").show();
			}
		});

	});
	$('input[type=search_value]').keyup('change', function(e) {

		var length = $('.faq_box:not([style*="display: none"])').length;
		if (length == 0) {
			$('#message').html("No data found");
		} else {
			$('#message').html("");
		}
	});
</script>
@endsection