@extends('layouts.public')

@section('title') {{trans('seo.title.contact')}} @endsection
@section('description') {{trans('seo.description.contact')}} @endsection
@section('image', asset('images/share/contact.jpg'))

@section('content')
<div class="rs-breadcrumbs">
	<div class="breadcrumbs-image">
		<img src="/images/breadcrumbs/contact.jpg" alt="Zona Plus agencija za digitalni marketing - Zadar">
		<div class="breadcrumbs-inner">
			<div class="container">
				<div class="breadcrumbs-text">
					<h1 class="breadcrumbs-title">{!!trans('navigation.contact')!!}</h1>
					<ul class="breadcrumbs-subtitle">
						<li><a href="{{route('public.index')}}"><i class="fa fa-home"></i>  {!!trans('navigation.index')!!}</a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>                
</div>
<section id="rs-contact" class="rs-contact">
	<div class="rs-contact-icon pt-94 pb-100 md-mb-0">
		<div class="container">
			<div class="sec-title">
				<h2 class="title secondary-color">{!!trans('global.contact-info.title')!!}</h2>
				<p class="sub-title left-line primary secondary-color normal-font-weight normalcase">{!!trans('global.contact-info.subtitle')!!}</p>
			</div>
			<div class="row">
				<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 mb-md-30">
					<div class="single-icon map-icon box-style">
						<div class="icon-part">
							<a href="https://maps.app.goo.gl/DUpryiPMxYiCuLy88" target="_blank"><i class="fa fa-map-marker"></i></a>
						</div>
						<div class="icon-text after-none">
							<h3 class="icon-title">{!!trans('global.office')!!}</h3>
							<a class="icon-info" href="https://maps.app.goo.gl/DUpryiPMxYiCuLy88" target="_blank">Hrvoja Ćustića 70, 23000 Zadar</a>
						</div>
					</div>
				</div>
				<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 mb-md-30">
					<div class="single-icon mobile-icon box-style">
						<div class="icon-part">
							<a href="tel:+38598764283"><i class="fa fa-mobile"></i></a>
						</div>
						<div class="icon-text">
							<h3 class="icon-title">{!!trans('global.phone')!!}</h3>
							<a class="icon-info" href="tel:+38598764283">+385 98 764 283</a>
						</div>
					</div>
				</div>
				<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 mb-md-30">
					<div class="single-icon message-icon box-style">
						<div class="icon-part">
							<a href="mailto:info@zonaplus.hr"><i class="fa fa-envelope-o"></i></a>
						</div>
						<div class="icon-text">
							<h3 class="icon-title">{!!trans('global.email')!!}</h3>
							<a class="icon-info" href="mailto:info@zonaplus.hr">info@zonaplus.hr</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="container-fluid contact-page-one  pt-100">
		<div class="row">
			<div class="col-lg-6">
				<div id="rs-map">
					<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2864.4612579858817!2d15.244131976066194!3d44.11510727108408!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4761fa87b7135595%3A0xc175733c07daaa2a!2sZona%20Plus%20-%20agencija%20za%20digitalni%20marketing!5e0!3m2!1sen!2shr!4v1726658131635!5m2!1sen!2shr" width="100%" height="750" style="border:0; display: block" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
				</div>
			</div>
			<div class="col-lg-6">
				<div class="contact-form map-top secondary-bg">
					<div class="sec-title">
						<h2 class="title white-color">{!!trans('global.inquiry-title')!!}</h2>
						<p class="sub-title left-line primary white-color normal-font-weight normalcase">{!!trans('global.inquiry-subtitle')!!}</p>
					</div>
					<form method="post" action="{{ route('public.mail') }}">
						{{ csrf_field() }}
						<div class="row">
							<div class="col-lg-12">
								<div class="form-field">
									<input type="text" placeholder="{!!trans('global.name')!!} *" name="name" required>
								</div>                              
							</div>
						</div>
						<div class="row">
							<div class="col-lg-6 col-md-12">
								<div class="form-field">
									<input type="email" placeholder="{!!trans('global.email')!!} *" name="email" required>
								</div>                              
							</div>
							<div class="col-lg-6 col-md-12">
								<div class="form-field">
									<input type="text" placeholder="{!!trans('global.phone')!!} *" name="phone" required>
								</div>                             
							</div>
						</div> 
						<div class="row">
							<div class="col-lg-12 mb-30">                       
								<div class="form-field">
									<textarea placeholder="{!!trans('global.message')!!} *" rows="7" name="message" required></textarea>
								</div>
							</div>
							<div class="col-lg-12 mb-30">
								<input type="checkbox" name="gdpr" required> {!!trans('global.gdpr', ['link' => route('privacy-policy')])!!}
							</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">								
								<div class="form-button">
									<button type="submit" class="readon">{!!trans('global.send')!!}</button>
								</div>
							</div>
						</div>
					</form>
				</div> 
			</div>
		</div>
	</div>
</section>
@endsection