@extends('layouts.public')

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

@section('content')
<div class="sub-banner overview-bgi">
	<div class="overlay">
		<div class="container">
			<div class="breadcrumb-area">
				<h1>{!!trans('contact.page.title')!!}</h1>
				<ul class="breadcrumbs">
					<li><a href="{{route('public.index')}}">{!!trans('contact.page.subtitle')!!}</a></li>
				</ul>
			</div>
		</div>
	</div>
</div>

<div class="contact-1 content-area-7">
	<div class="container">
		<div class="row">
			<div class="col-lg-7 col-md-7 col-sm-6 col-xs-12">
				<div class="contact-form">
					<form id="contact_form" action="{{route('public.mail')}}" method="POST">
						{{ csrf_field() }}
						<div class="row">
							<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
								<div class="form-group fullname">
									<input type="text" name="name" class="input-text" placeholder="{!!trans('contact.name')!!} *" required>
								</div>
							</div>
							<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
								<div class="form-group enter-email">
									<input type="email" name="email" class="input-text" placeholder="{!!trans('contact.email')!!} *" required>
								</div>
							</div>
							<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
								<div class="form-group number">
									<input type="text" name="phone" class="input-text" placeholder="{!!trans('contact.phone')!!} *" required>
								</div>
							</div>
							<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 clearfix">
								<div class="form-group message">
									<textarea class="input-text" name="message" placeholder="{!!trans('contact.message')!!} *" required></textarea>
								</div>
							</div>
							<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 clearfix">
								<div class="form-group">
									<input type="checkbox" name="gdpr" required> {!!trans('contact.gdpr', ['link' => route('privacy-policy')])!!}
								</div>
							</div>
							<div class="check_email">
								<label for="check_email">Email address</label>
								<input class="text" name="check_email" type="text" id="check_email">
							</div>
							<div class="col-lg-12 col-md-6 col-sm-12 col-xs-12">
								<div class="form-group send-btn mb-0">
									<button type="submit" class="button-md button-theme">{!!trans('contact.button')!!}</button>
								</div>
							</div>
						</div>
					</form>     
				</div>
			</div>
			<div class="col-lg-4 col-lg-offset-1 col-md-4 col-md-offset-1 col-sm-6 col-xs-12">
				<div class="contact-details">
					<div class="main-title-2">
						<h3>{!!trans('contact.info')!!}</h3>
					</div>
					<div class="media">
						<div class="media-left">
							<i class="fa fa-map-marker"></i>
						</div>
						<div class="media-body">
							<h4>{!!trans('contact.info.address')!!}</h4>
							<p>Ul. dr. Franje Tuđmana 46 D<br> 23000, Zadar</p>
						</div>
					</div>
					<div class="media">
						<div class="media-left">
							<i class="fa fa-phone"></i>
						</div>
						<div class="media-body">
							<h4>{!!trans('contact.info.phone')!!}</h4>
							<p>
								<a href="tel:+38598429549">+385 98 429 549</a>
							</p>
						</div>
					</div>
					<div class="media">
						<div class="media-left">
							<i class="fa fa-envelope"></i>
						</div>
						<div class="media-body">
							<h4>{!!trans('contact.info.email')!!}</h4>
							<p>
								<a href="mailto:kongrad@kongrad-zadar.hr">kongrad@kongrad-zadar.hr</a>
							</p>
						</div>
					</div>
					<div class="media mb-0">
						<div class="media-left">
							<i class="fa fa-share-alt"></i>
						</div>
						<div class="media-body">
							<h4>{!!trans('contact.info.social')!!}</h4>
							<p>
								<a href="https://www.facebook.com/Kongrad-Zadar-2336380279788011/" target="_blank"><i class="fa fa-fw fa-facebook"></i></a>
								<a href="https://www.google.com/maps/place/KONGRAD-ZADAR+D.O.O./@44.1183356,15.235538,15z/data=!4m5!3m4!1s0x0:0xb9630c0fee7c431!8m2!3d44.1183356!4d15.235538" target="_blank"><i class="fa fa-fw fa-google"></i></a>
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="section">
	<div class="map">
		<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2864.304766386381!2d15.23334931551289!3d44.11833557910806!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4761fa7a45a1ff8b%3A0xb9630c0fee7c431!2sKONGRAD-ZADAR+D.O.O.!5e0!3m2!1sen!2shr!4v1560845870956!5m2!1sen!2shr" width="100%" height="450" frameborder="0" style="border:0; display: block;"  id="map" class="contact-map" allowfullscreen></iframe>
	</div>
</div>
@endsection