@php
	$sectionOptions = $getSearchFormOp ?? [];
	$sectionData ??= [];
	
	// Get Search Form Options
	$enableFormAreaCustomization = data_get($sectionOptions, 'enable_extended_form_area') ?? '0';
	$hideTitles = data_get($sectionOptions, 'hide_titles') ?? '0';
	
	$headerTitle = data_get($sectionOptions, 'title_' . config('app.locale'));
	$headerTitle = (!empty($headerTitle)) ? replaceGlobalPatterns($headerTitle) : null;
	
	$headerSubTitle = data_get($sectionOptions, 'sub_title_' . config('app.locale'));
	$headerSubTitle = (!empty($headerSubTitle)) ? replaceGlobalPatterns($headerSubTitle) : null;
	
	$parallax = data_get($sectionOptions, 'parallax') ?? '0';
	$hideForm = data_get($sectionOptions, 'hide_form') ?? '0';
	$displayStatesSearchTip = config('settings.list.display_states_search_tip');
	
	$hideOnMobile = (data_get($sectionOptions, 'hide_on_mobile') == '1') ? ' hidden-sm' : '';
@endphp
@if (isset($enableFormAreaCustomization) && $enableFormAreaCustomization == '1')
	
	@if (isset($firstSection) && !$firstSection)
		<div class="p-0 mt-lg-4 mt-md-3 mt-3"></div>
	@endif
	
		<div class="intro{{ $hideOnMobile }}{{ $parallax }}">
		<div class="container text-center">
			
			@if ($hideTitles != '1')
				<h1 class="intro-title animated fadeInDown">
					{{ $headerTitle }}
				</h1>
				<p class="sub animateme fittext3 animated fadeIn">
					{!! $headerSubTitle !!}
				</p>
			@endif
			
			@if ($hideForm != '1')
					<form id="search" name="search" action="{{ \App\Helpers\UrlGen::searchWithoutQuery() }}" method="GET">
						<div class="row search-row animated fadeInUp">
							
							<div class="col-md-5 col-sm-12 search-col relative mb-1 mb-xxl-0 mb-xl-0 mb-lg-0 mb-md-0">
								<div class="search-col-inner">
									<i class="fas {{ (config('lang.direction')=='rtl') ? 'fa-angle-double-left' : 'fa-angle-double-right' }} icon-append"></i>
									<div class="search-col-input">
										<input class="form-control has-icon" name="q" placeholder="{{ ('I am looking for...') }}" type="text" value="">
									</div>
								</div>
							</div>
							
							<input type="hidden" id="lSearch" name="l" value="">
							
							<div class="col-md-5 col-sm-12 search-col relative locationicon mb-1 mb-xxl-0 mb-xl-0 mb-lg-0 mb-md-0">
								<div class="search-col-inner">
									<i class="fas fa-map-marker-alt icon-append"></i>
									<div class="search-col-input">
						@if ($displayStatesSearchTip)
    <select class="form-control locinput input-rel searchtag-input bg-white" id="locSearch" name="location">
        <option value="" selected>{{ ('All Kenya') }}</option>
                <option value="Nairobi">Nairobi</option>
        <option value="Nairobi">Mombasa</option>
                <option value="Mombasa">Mombasa</option>

        <option value="Kisumu">Kisumu</option>
        <option value="Nakuru">Nakuru</option>
        <option value="Eldoret">Eldoret</option>
        <option value="Ruiru">Ruiru</option>
        <option value="Kikuyu">Kikuyu</option>
        <option value="Thika">Thika</option>
        <option value="Naivasha">Naivasha</option>
        <option value="Karuri">Karuri</option>
        <option value="Ongata Rongai">Ongata Rongai</option>
        <option value="Malindi">Malindi</option>
        <option value="Kitui">Kitui</option>
        <option value="Machakos">Machakos</option>
        <option value="Mlolongo">Mlolongo</option>
        <option value="Kilifi">Kilifi</option>
        <option value="Garissa">Garissa</option>
        <option value="Vihiga">Vihiga</option>
        <option value="Wote">Wote</option>
        <option value="Mumias">Mumias</option>
        <option value="Bomet">Bomet</option>
        <option value="Molo">Molo</option>
        <option value="Ngong">Ngong</option>
        <option value="Kitale">Kitale</option>
        <option value="Litein">Litein</option>
        <option value="Limuru">Limuru</option>
        <option value="Kericho">Kericho</option>
        <option value="Kimilili">Kimilili</option>
        <option value="Awasi">Awasi</option>
        <option value="Kakamega">Kakamega</option>
        <option value="Kapsabet">Kapsabet</option>
        <option value="Mariakani">Mariakani</option>
        <option value="Kiambu">Kiambu</option>
        <option value="Mandera">Mandera</option>
        <option value="Nyamira">Nyamira</option>
        <option value="Mwingi">Mwingi</option>
        <option value="Kisii">Kisii</option>
        <option value="Wajir">Wajir</option>
        <option value="Rongo">Rongo</option>
        <option value="Bungoma">Bungoma</option>
        <option value="Ahero">Ahero</option>
        <option value="Nandi Hills">Nandi Hills</option>
        <option value="Makuyu">Makuyu</option>
        <option value="Kapenguria">Kapenguria</option>
        <option value="Taveta">Taveta</option>
        <option value="Narok">Narok</option>
        <option value="Ol Kalou">Ol Kalou</option>
        <option value="Kakuma">Kakuma</option>
        <!-- Add more towns here -->
    </select>
@else
    <select class="form-control locinput input-rel searchtag-input bg-white" id="locSearch" name="location">
        <option value="" selected>{{ ('All Kenya') }}</option>
                <option value="Nairobi">Nairobi</option>
        <option value="Nairobi">Mombasa</option>
        <option value="Mombasa">Mombasa</option>
        <option value="Kisumu">Kisumu</option>
        <option value="Nakuru">Nakuru</option>
        <option value="Eldoret">Eldoret</option>
        <option value="Ruiru">Ruiru</option>
        <option value="Kikuyu">Kikuyu</option>
        <option value="Thika">Thika</option>
        <option value="Naivasha">Naivasha</option>
        <option value="Karuri">Karuri</option>
        <option value="Ongata Rongai">Ongata Rongai</option>
        <option value="Malindi">Malindi</option>
        <option value="Kitui">Kitui</option>
        <option value="Machakos">Machakos</option>
        <option value="Mlolongo">Mlolongo</option>
        <option value="Kilifi">Kilifi</option>
        <option value="Garissa">Garissa</option>
        <option value="Vihiga">Vihiga</option>
        <option value="Wote">Wote</option>
        <option value="Mumias">Mumias</option>
        <option value="Bomet">Bomet</option>
        <option value="Molo">Molo</option>
        <option value="Ngong">Ngong</option>
        <option value="Kitale">Kitale</option>
        <option value="Litein">Litein</option>
        <option value="Limuru">Limuru</option>
        <option value="Kericho">Kericho</option>
        <option value="Kimilili">Kimilili</option>
        <option value="Awasi">Awasi</option>
        <option value="Kakamega">Kakamega</option>
        <option value="Kapsabet">Kapsabet</option>
        <option value="Mariakani">Mariakani</option>
        <option value="Kiambu">Kiambu</option>
        <option value="Mandera">Mandera</option>
        <option value="Nyamira">Nyamira</option>
        <option value="Mwingi">Mwingi</option>
        <option value="Kisii">Kisii</option>
        <option value="Wajir">Wajir</option>
        <option value="Rongo">Rongo</option>
        <option value="Bungoma">Bungoma</option>
        <option value="Ahero">Ahero</option>
        <option value="Nandi Hills">Nandi Hills</option>
        <option value="Makuyu">Makuyu</option>
        <option value="Kapenguria">Kapenguria</option>
        <option value="Taveta">Taveta</option>
        <option value="Narok">Narok</option>
        <option value="Ol Kalou">Ol Kalou</option>
        <option value="Kakuma">Kakuma</option>
        <!-- Add more towns here -->
    </select>
@endif

									</div>
								</div>
							</div>
							
							<div class="col-md-2 col-sm-12 search-col">
								<div class="search-btn-border bg-primary">
									<button class="btn btn-primary btn-search btn-block btn-gradient">
										<i class="fas fa-search"></i> <strong>{{ t('find') }}</strong>
									</button>
								</div>
							</div>
							
						</div>
					</form>
			@endif
			
		</div>
	</div>
	
@else
	
	@includeFirst([config('larapen.core.customizedViewPath') . 'home.inc.spacer', 'home.inc.spacer'])
	<div class="intro only-search-bar{{ $hideOnMobile }}">
		<div class="container text-center">
			
			@if ($hideForm != '1')
				<form id="search" name="search" action="{{ \App\Helpers\UrlGen::searchWithoutQuery() }}" method="GET">
					<div class="row search-row animated fadeInUp">
						
						<div class="col-md-5 col-sm-12 search-col relative mb-1 mb-xxl-0 mb-xl-0 mb-lg-0 mb-md-0">
							<div class="search-col-inner">
								<i class="fas {{ (config('lang.direction')=='rtl') ? 'fa-angle-double-left' : 'fa-angle-double-right' }} icon-append"></i>
								<div class="search-col-input">
									<input class="form-control has-icon" name="q" placeholder="{{ t('what') }}" type="text" value="">
								</div>
							</div>
						</div>
						
						<input type="hidden" id="lSearch" name="l" value="">
						
						<div class="col-md-5 col-sm-12 search-col relative locationicon mb-1 mb-xxl-0 mb-xl-0 mb-lg-0 mb-md-0">
							<div class="search-col-inner">
								<i class="fas fa-map-marker-alt icon-append"></i>
								<div class="search-col-input">
									@if ($displayStatesSearchTip)
										<input class="form-control locinput input-rel searchtag-input has-icon"
											   id="locSearch"
											   name="location"
											   placeholder="{{ t('where') }}"
											   type="text"
											   value=""
											   data-bs-placement="top"
											   data-bs-toggle="tooltipHover"
											   title="{{ t('Enter a city name OR a state name with the prefix', ['prefix' => t('area')]) . t('State Name') }}"
										>
									@else
										<input class="form-control locinput input-rel searchtag-input has-icon"
											   id="locSearch"
											   name="location"
											   placeholder="{{ t('where') }}"
											   type="text"
											   value=""
										>
									@endif
								</div>
							</div>
						</div>
						
						<div class="col-md-2 col-sm-12 search-col">
							<div class="search-btn-border bg-primary">
								<button class="btn btn-primary btn-search btn-block btn-gradient">
									<i class="fas fa-search"></i> <strong>{{ t('find') }}</strong>
								</button>
							</div>
						</div>
					
					</div>
				</form>
			@endif
		
		</div>
	</div>
	
@endif