@extends('front.template.master') 
@section('title', $title)
@section('content')

<link rel="stylesheet" href="{{asset('public/assets/css/util.css')}}">
<link rel="stylesheet" href="{{asset('public/assets/css/main.css')}}">

<!-- Content Area Starts Here -->
<main id="content"> <!-- Landing Section Content Starts Here -->
	<div class="container">
    	<h1 class="text-center my-5">Reach Out To Us</h1>
        
        <div class="container-contact100">
		<div class="wrap-contact100">
			<form action="{{ route('contactForm') }}" method="post" enctype="multipart/form-data" class="contact100-form validate-form">
		        @csrf()

				<label class="label-input100" for="first-name">Tell us your name *</label>
				<div class="wrap-input100 validate-input" data-validate="Type first name">
					<input id="first-name" class="input100" type="text" name="name" placeholder="Name" required="">
					<span class="focus-input100"></span>
				</div>

				<label class="label-input100" for="email">Enter your email *</label>
				<div class="wrap-input100 validate-input" data-validate = "Valid email is required: ex@abc.xyz">
					<input id="email" class="input100" type="text" name="email" placeholder="Eg. example@email.com" required="">
					<span class="focus-input100"></span>
				</div>

				<label class="label-input100" for="phone">Enter phone number *</label>
				<div class="wrap-input100">
					<input id="phone" class="input100" type="text" name="contact" placeholder="Eg. +1 800 000000" required="">
					<span class="focus-input100"></span>
				</div>

				<label class="label-input100" for="message">Message *</label>
				<div class="wrap-input100 validate-input" data-validate = "Message is required">
					<textarea id="message" class="input100" name="message" placeholder="Write us a message"></textarea>
					<span class="focus-input100"></span>
				</div>
				
				<div class="form-group" style="margin-top: 20px;">
                    <div class="g-recaptcha" data-sitekey="{{env('CAPTCHA_KEY')}}"></div>
                    @if($errors->has('g-recaptcha-response'))
                    <span class="invalid-feedback" style="display: block;">
                    	<strong>{{ $errors->first('g-recaptcha-response') }}</strong>
                    </span>
                    @endif
                </div>

				<div class="container-contact100-form-btn">
					<button class="contact100-form-btn" type="submit">
						Reach Out To Us
					</button>
				</div>
			</form>

			<div class="contact100-more flex-col-c-m" style="background-image: url('{{asset('public/assets/img/bg-01.jpg')}}');">
				<div class="flex-w size1 p-b-47">
					<div class="txt1 p-r-25">
						<span class="lnr lnr-map-marker"></span>
					</div>

					<div class="flex-col size2">
						<span class="txt1 p-b-20">
							Address
						</span>

						<span class="txt2">
							Building No. 30, 2nd & 3rd Floor, 
							Basant Lok Community Centre,
							Vasant Vihar, New Delhi 110057, India
						</span>
					</div>
				</div>

				<div class="dis-flex size1 p-b-47">
					<div class="txt1 p-r-25">
						<span class="lnr lnr-phone-handset"></span>
					</div>

					<div class="flex-col size2">
						<span class="txt1 p-b-20">
							Lets Talk
						</span>

						<span class="txt3">
							011 4095 6600
						</span>
					</div>
				</div>

				<div class="dis-flex size1 p-b-47">
					<div class="txt1 p-r-25">
						<span class="lnr lnr-envelope"></span>
					</div>

					<div class="flex-col size2">
						<span class="txt1 p-b-20">
							General Support
						</span>

						<span class="txt3">
							info@csrability.com
						</span>
					</div>
				</div>
			</div>
		</div>
	</div>
    </div>
</main>
@endsection