@extends('layouts.front')

@section('content')
<div class="modal fade" id="contact-agent-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-body">
				<div class="modal-agent-info-box">
					<div class="img-holder">
						<img src="img/contact-agent-modal/1.png" alt="contact-modal">
					</div>
					<div class="content">
						<h3><span class="name"></span></h3>
						@if (session('contact_success'))
						<p>
							Thank you for your interest. Email Sent successfully!
						</p>
						@else

						@endif			
						<h3><span class="name">Avdou Collection Suites</span> <span class="position">(contact details)</span></h3>
						<p>Phone : +30 28970 51510 &emsp; Email : info@avdoucollection.com</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<section id="page-title" style="background-image: url({{ asset('assets/img/page-title/avdou-collection-suites-contact-us-1.jpg') }});">
	<div class="container">
		<div class="row">
			<div class="col-lg-12">
				<h2>Contact Us</h2>
			</div>
		</div>
	</div>
</section>	
<section class="contact-content anim-3-all">
	<div class="container">
		<div class="row">
			<div class="col-lg-12">
				<div class="section-title text-center">
					<span>Contact form</span>
					<h2><span>Avdou Collection</span></h2>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
				<div class="contact-form-wrap">
					<form method="POST" action="{{ route('front.checkin_send') }}" class="contact-form" novalidate="novalidate">
						@csrf
						<div class="form-row">
						    <div class="form-group col-12 col-sm-2">
					            <select name="title" id="title" placeholder="Select" class="form-control required" data-val="true" data-val-required="true" aria-required="true" style="height: 47px; margin-bottom: 20px;">
                                  <option value="Mr.">Mr.</option>
                                  <option value="Mrs.">Mrs.</option>
                                  <option value="Dr.">Dr.</option>
                                </select>
						    </div>
						    <div class="form-group col-12 col-sm-4">
					            <input name="firstname" type="text" placeholder="Name *" required="">
						    </div>
						    <div class="form-group col-12 col-sm-6">
					            <input name="surname" type="text" placeholder="Surname *" required="">
						    </div>
						</div>
						<div class="form-row">
						    <div class="form-group col-12 col-sm-6">
					            <input name="Nationality" type="text" placeholder="Nationality *" required="">
						    </div>
						    <div class="form-group col-12 col-sm-6">
					            <input name="Passport" type="text" placeholder="Passport No. *" required="">
						    </div>
						</div>
						<div class="form-row">
						    <div class="form-group col-12 col-sm-6">
					            <input name="Birthday" type="text" placeholder="Date of Birth *" required="">
						    </div>
						    <div class="form-group col-12 col-sm-6">
					            <input name="Address" type="text" placeholder="Street Address *" required="">
						    </div>
						</div>
						<div class="form-row">
						    <div class="form-group col-12 col-sm-6">
					            <input name="ZipCode" type="text" placeholder="Zip Code *" required="">
						    </div>
						    <div class="form-group col-12 col-sm-6">
					            <input name="City" type="text" placeholder="Town/ City *" required="">
						    </div>
						</div>
						<div class="form-row">
						    <div class="form-group col-12 col-sm-6">
					            <input name="Country" type="text" placeholder="Country *" required="">
						    </div>
						    <div class="form-group col-12 col-sm-6">
					            <input name="Mobile" type="text" placeholder="Mobile Telephone *" required="">
						    </div>
						</div>
						<div class="form-row">
						    <div class="form-group col-12 col-sm-6">
					            <input name="email" type="text" placeholder="E-mail *" required="">
						    </div>
						    <div class="form-group col-12 col-sm-6">
					            <input name="TravelAgency" type="text" placeholder="Tour Operator / Travel Agency">
						    </div>
						</div>
						<div class="form-row">
						    <div class="form-group col-12 col-sm-6">
					            <input name="ArrivalDate" type="text" placeholder="Arrival Date *" required="">
						    </div>
						    <div class="form-group col-12 col-sm-6">
					            <input name="DepartureDate" type="text" placeholder="Departure Date *" required="">
						    </div>
						</div>
						<div class="form-row">
						    <div class="form-group col-12 col-sm-6">
					            <input name="ReferenceNumber" type="text" placeholder="Reference Number">
						    </div>
						    <div class="form-group col-12 col-sm-6">
					            <label class="sr-only" for="GuestsNo">No. of Guests</label>
					            <select class="form-control" data-val="true" data-val-required="The GuestsNo field is required." id="GuestsNo" name="GuestsNo" onchange="Open(this.value)" style="height: 47px; margin-bottom: 20px;">
					                <option selected="selected" value="1">No. of Guests</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                    <option value="6">6</option>
                                </select>
						    </div>
						</div>
						<div id="placeholder-names"></div>
						<div class="form-row">
						    <div class="form-group col-12 col-sm-6">
						        <label class="">Have you visited our estates before?</label>
					            <div class="row-sm-6">
					                <input type="radio" id="revisit" name="revisit" value="Yes" style="height:unset; width:10%;display:inline;"><label style="height:unset; width:10%;" for="Yes">Yes</label>
                                    <input checked="" type="radio" id="revisit" name="revisit" value="No" style="height:unset; width:10%;display:inline;"><label style="height:unset; width:10%;" for="No">No</label>
                                </div>
						    </div>
						    <div class="form-group col-12 col-sm-6">
					            <input name="revisitDate" type="text" placeholder="When? ">
						    </div>
						</div>
						<div class="form-row">
						    <div class="form-group col-12 col-sm-12">
						       <textarea name="comments" placeholder="Message"></textarea>
						    </div>
						    
						</div>
						<p><input required="" type="checkbox" id="privacy_policy" name="privacy_policy" value="Yes" style="height:unset; width:10%;display:inline;"><label style="height:unset; width:90%;" for="privacy_policy">I accept the <a target="_blank" href="{{ asset('assets/PRIVACY_POLICY.DOCX') }}">Privacy Policy</a></label><small id="warn_privacy" class="hidden" style="color:red;margin-left: 30px;">You have to accept the Privacy policy to continue.</small></p>
						<p><input type="checkbox" id="newsletter" name="newsletter" value="Yes" style="height:unset; width:10%;display:inline;"><label style="height:unset; width:90%; display: inline-flex;" for="newsletter">I would like to receive updates on news, announcements and information</label></p>
						<p><button type="submit" onclick="Check()">submit now</button></p>
					</form>
				</div>
			</div>
			<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
				<div class="agent-info style-two text-center">
					<img width="141" src="{{ asset('assets/img/resources/avdou_logo.png') }}" alt="contact-logo">
					<div class="content">
						<h3>Avdou Collection Suites</h3>
						<p>Phone : <a href="tel:+302897051510">+30 28970 51510</a></p>
						<p>Email : <a href="mailto:info@avdoucollection.com">info@avdoucollection.com</a></p>
					</div>
					<div class="social-icons">
						<ul>
							<li><a target="_blank" href="https://www.facebook.com/avdousuites"><i class="fa fa-facebook"></i></a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</section> 

@endsection

@section('extra_js')
<script src="{{ asset('assets/js/validate.js') }}"></script>
<script>

    function Check(){
        if (!$("#privacy_policy").is( ":checked" )){
            $("#warn_privacy").removeClass("hidden");
        }
    }
    
    function Open(guests){
        $("#placeholder-names").html('');
        if(guests>1){
            var i;
            for (i = 2; i <= guests; i++) {
              $("#placeholder-names").append('<div class="form-row"><div class="form-group col-12 col-sm-6"><input name="name'+i+'" type="text" placeholder="'+i+') Name *" required></div><div class="form-group col-12 col-sm-6"><input name="surname'+i+'" type="text" placeholder="'+i+') Surname *" required></div></div><div class="form-row"><div class="form-group col-12 col-sm-6"><input name="Passport'+i+'" type="text" placeholder="'+i+') Passport No. *" required></div><div class="form-group col-12 col-sm-6"><input name="Birthday'+i+'" type="text" placeholder="'+i+') Date of Birth *" required></div></div>');
            }
            
        }
    }
</script>
@endsection