@extends('front.layouts.main')

@section('title'){{ @trans('seo.contact_title') }}@endsection

@section('description'){{ @trans('seo.contact_desc') }}@endsection

@section('content')
<main class="before-login-page pt-0">
	<section class="cnct-sec">
		<div class="container">
			<div class="row">
				<div class="col-md-6 my-5 my-md-auto">
					<h1 class="bold wow fadeInUp fast">{{ @trans('client_contact_us.contact_us_head') }}</h1>
					<p class="gray mb-3 wow fadeInDown fast">{{ @trans('client_contact_us.head_tag') }}</p>
					<div class="map my-3">
					<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3961.928470366562!2d39.25041771477208!3d-6.778560395100289!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x185c4c1607b66eab%3A0x22a70bdc0da155e!2sEmpower+Limited+(Recruitment%2C+Training+and+Consultancy)!5e0!3m2!1ssw!2stz!4v1543933454097" frameborder="0" style="border:0; width:100%;height:200px;" allowfullscreen=""></iframe>
					</div>
					<div class="row">
						<div class="col-lg-6 wow fadeInUp fast">
							<address class="gray">
								<p class="mb-2">{{ @trans('client_contact_us.empower_limited') }}</p>
								{{ @trans('client_contact_us.empower_address') }}
							</address>
							<a href="tel:+255758778886" class="d-block gray mb-2"><i class="material-icons mr-2">phone_android</i> +255 758 778 886</a>
							<a href="javascript:void(0)" class="d-block gray mb-2"><i class="material-icons mr-2">bookmark</i> {{ @trans('client_contact_us.po_box') }} 105552</a>
							<a href="mailto:info@empower.co.tz" class="d-block gray"><i class="material-icons mr-2">mail_outline</i> {{ @trans('client_contact_us.empower_email') }}</a>
						</div>
					</div>
				</div>
				<div class="col-md-6 col-lg-5 offset-lg-1 my-md-auto dark-bg">
					<form class="cnct-form" name="contact-form" id="contact-form" autocomplete="off" method="post" action="{{route('sendContactMail')}}">
						<div class="col-md-12">
							<h2 class="bold">{{ @trans('client_contact_us.form_head') }}</h2>
						</div>
						@csrf
						@honeypot
						<div class="col-lg-12">
							@if(Session::get('fail_message', false))
							@component('admin.components.fail_message')
							{{ Session::get('fail_message') }}
							@endcomponent
							@endif
							@if(Session::get('success'))
							@component('admin.components.success_message')
							{{ Session::get('success') }}
							@endcomponent
							@endif
							<div class="row">
								<div class="col-lg-6 col-md-12 col-sm-6">
									<div class="form-group required">
										<label class="control-label">{{ @trans('client_contact_us.full_name') }}</label>
										<input type="text" name="full_name" class="form-control" placeholder="Full Name" 
											value="@if(old('full_name')){{old('full_name')}} @elseif(Auth::user()){{ Auth::user()->full_name }}@endif">
										@if($errors->has('full_name'))
										<span class="invalid-feedback">{{$errors->first('full_name')}}</span>
										@endif
									</div>
								</div>
								<div class="col-lg-6 col-md-12 col-sm-6">
									<div class="form-group required">
										<label class="control-label">{{ @trans('client_contact_us.designation') }}</label>
										<input type="text" name="designation" class="form-control" placeholder="Designation" 
											value="@if(old('designation')){{old('designation')}} @elseif(Auth::user() && count(Auth::user()->currentExperience) == 1){{ Auth::user()->currentExperience[0]->positiontitle }}@endif">
										@if($errors->has('designation'))
										<span class="invalid-feedback">{{$errors->first('designation')}}</span>
										@endif
									</div>
								</div>
								<div class="col-md-12 required">
									<div class="form-group required">
										<label class="control-label">{{ @trans('client_contact_us.company_name') }}</label>
										<input type="text" name="company_name" class="form-control" placeholder="Company Name" 
											value="@if(old('company_name')){{old('company_name')}} @elseif(Auth::user() 
												&& count(Auth::user()->currentExperience) == 1 && isset(Auth::user()->currentExperience[0]->commancompanies) &&
													Auth::user()->currentExperience[0]->commancompanies != null){{ Auth::user()->currentExperience[0]->commancompanies->name }}@endif">
										@if($errors->has('company_name'))
										<span class="invalid-feedback">{{$errors->first('company_name')}}</span>
										@endif
									</div>
								</div>
								<div class="col-lg-6 col-md-12 col-sm-6">
									<div class="form-group required">
										<label class="control-label">{{ @trans('client_contact_us.phone_number') }}</label>
										<input type="text" name="mobile" class="form-control" placeholder="Phone Number" 
											value="@if(old('mobile')){{old('mobile')}} @elseif(Auth::user()){{ Auth::user()->mobile }}@endif">
										@if($errors->has('mobile'))
										<span class="invalid-feedback">{{$errors->first('mobile')}}</span>
										@endif
									</div>
								</div>
								<div class="col-lg-6 col-md-12 col-sm-6">
									<div class="form-group required">
										<label class="control-label">{{ @trans('client_contact_us.email') }}</label>
										<input type="email" name="email" class="form-control" placeholder="Email" 
											value="@if(old('email')){{old('email')}} @elseif(Auth::user()){{ Auth::user()->email }}@endif">
										@if($errors->has('email'))
										<span class="invalid-feedback">{{$errors->first('email')}}</span>
										@endif
									</div>
								</div>
								<div class="col-md-12">
									<div class="form-group select btm-arrow required">
										<label class="control-label">{{ @trans('client_contact_us.reason_for_contact') }}</label>
										<select name="reason" class="form-control">
											<option value="">{{ @trans('client_contact_us.select') }}</option>
											<option value="I want to talk to someone about Recruiting staff for my business">{{ @trans('client_contact_us.talk_about_recruiting_staff') }}</option>
											<option value="I want to find out more about Empower's Training Programmes">{{ @trans('client_contact_us.find_more_about_empower') }}</option>
											<option value="I would like to book a Teambuilding Day for my team">{{ @trans('client_contact_us.book_team_building_day') }}</option>
											<option value="I would like to enquire about Assessment Centres">{{ @trans('client_contact_us.enquire_about_assessment') }}</option>
											<option value="I am interested in conducting a Graduate Programme at my Company">{{ @trans('client_contact_us.conducting_graduate_program_at_company') }}</option>
											<option value="I would like to talk to someone about a Customised Solution for my company">{{ @trans('client_contact_us.talk_about_customised_solution') }}</option>
											<option value="I would like to learn more about Empower by speaking to a member of staff">{{ @trans('client_contact_us.learn_more_about_empower') }}</option>
											<option value="I would like to give Empower feedback on their services">{{ @trans('client_contact_us.give_feedback') }}</option>
										</select>
										@if($errors->has('reason'))
										<span class="invalid-feedback">{{$errors->first('reason')}}</span>
										@endif
									</div>
								</div>
								<div class="col-md-12">
									<div class="form-group required">
										<label class="control-label">{{ @trans('client_contact_us.your_message') }}</label>
										<textarea class="form-control" name="message" placeholder="Your Message">@if(old('message')){{old('message')}} @endif</textarea>
										@if($errors->has('message'))
										<span class="invalid-feedback">{{$errors->first('message')}}</span>
										@endif
									</div>
								</div>
								<div class="col-md-12">
									<div class="form-group">
										<div class="g-recaptcha" data-sitekey="{{ config('custom.google_recaptcha_site_key') }}"></div>
										@if($errors->has('g-recaptcha-response'))
										<span class="invalid-feedback">{{$errors->first('g-recaptcha-response')}}</span>
										@endif
									</div>
								</div>
								<div class="col-md-12">
									<input type="submit" class="btn btn-transparent" value="{{ @trans('client_contact_us.submit') }}">
								</div>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</section>
</main>
@endsection
@push('pageJs')
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
	function myMap(){
		var mapProp = {
			center: new google.maps.LatLng(51.508742, -0.120850),
			zoom: 5,
		};
		var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
	}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDFMPyjtbvLttxwg56FItDhtf8x-4k25pY&callback=myMap"></script>
@endpush