@extends('layout.app')
@section('title')
<title>Contact Us</title>
    <meta name="description" content="ET Education and Visa Services, presented by Extratech, is an adept provider of excellent education consultation, information, and visa guidance solution to students seeking schooling abroad.">
    <meta name="robots" content="index, follow" />
    <meta property="og:url" content="" />
    <meta property="og:image" content="{{url('frontend/images/banner.png')}}"/>
    <meta property="og:title" content="ET-Visas"/>
    <meta property="og:description" content="ET Education and Visa Services, presented by Extratech, is an adept provider of excellent education consultation, information, and visa guidance solution to students seeking schooling abroad."/>
@endsection
@section('content')
        @php
          $msg = Session::get('msg') ?? null;
        @endphp
    <section class="abroad-banner-section" style="background: url({{$page->banner_image}})">
        <!-- <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Contact</li>
            </ol>
        </nav> -->
        <div class="studyabroad-banner-header">
            <h1>{{$page->title}}</h1>
            <h5>{{$page->sub_title}}</h5>
        </div>
    </section>
    <section class="contact-form-section">
        <div class="contact-form">
            <div class="row gx-5">
                <div class="col-md-4 col-sm-12">
                    <div class="contact-desc">
                        <div class="contact-left-top">
                            <h1>Talk to our Expert</h1>
                            <p>Please contact us or book an appointment with us, we will be glad to answer all your queries.</p>
                        </div>
                        <div class="contact-img">
                            <img src="{{url('frontend/images/two-content.png')}}" class="w-100" alt="">
                        </div>
                        <div class="contact-offices">
                            <h2>Sydney Office</h2>
                            <a href="https://goo.gl/maps/oidE9uWCaccC98gP8" target="_blank" class="offices-des">
                                <img src="{{url('frontend/icons/contact-location.png')}}" class="img-fluid" alt="">
                                <h5>Suite 132 & 133, Level 3, 10 Park Road, Hurstville NSW 2220</h5>
                            </a>
                            <a href="mailto: admin@eteducation.com.au" class="offices-des">
                                <img src="{{url('frontend/icons/contact-email.png')}}" class="img-fluid" alt="">
                                <h5>admin@eteducation.com.au</h5>
                            </a>
                            <a href="tel: +61 405 978 672" class="offices-des">
                                <img src="{{url('frontend/icons/contact-phone.png')}}" class="img-fluid" alt="">
                                <h5>+61 405 978 672</h5>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-md-8 col-sm-12">
                    <div class="form-sec">
                        <h1>Send us a Message!</h1>
                        <p>If you have any queries, let us know.</p>
                        <form action="{{url('contact')}}" method = "post" onsubmit="return validateContact()">
                            @csrf
                            <div class="row gy-2">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Full Name</label>
                                        <input type="text" name = "full_name" class="form-control" id="contact-fullname" value="" placeholder="Your full name" onkeyup="contactFullname()">
                                    </div>
                                    <span class="error" id='contact-fname-error'></span>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Email address</label>
                                        <input type="email" name = "email" class="form-control" placeholder="Your email address" value="" id="contact-email" onkeyup="contactEmail()">
                                    </div>
                                    <span class="error" id='contact-email-error'></span>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Phone number</label>
                                        <input type="number" name = "phone" class="form-control" placeholder="Your phone number" value="" id="contact-phone" onkeyup="contactPhone()">
                                    </div>
                                    <span class="error" id='contact-phone-error'></span>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Nationality</label>
                                        <input type="text" name = "nationality" class="form-control" placeholder="Your nationality" id="contact-nationality" onkeyup="contactNationality()">
                                    </div>
                                    <span class="error" id='contact-nationality-error'></span>
                                </div>
                                <div class="col-md-12 mb-4">
                                    <div class="form-group">
                                        <label for="exampleFormControlTextarea1">Enquiry</label>
                                        <textarea class="form-control" name = "message" id="exampleFormControlTextarea1" placeholder="Your enquiries.." rows="5"></textarea>
                                    </div>
                                    <span class="error" id='contact-message-error'></span>
                                </div>
                                <div class="text-center">
                                    <button type="submit" class="">Submit your enquiry</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="map-section">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3309.0069665910596!2d151.10355791583234!3d-33.966660431577246!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6b12b9bd323606ad%3A0xf85fba58b6ff7bd6!2sSuite%20132%20%26%20133%2C%20Level%2F3%20Park%20Rd%2C%20Hurstville%20NSW%202220%2C%20Australia!5e0!3m2!1sen!2snp!4v1674634288627!5m2!1sen!2snp" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
    </section>
@endsection
@section('script')
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>


    <script>
        // contact us form error declaration
        fnameError = document.getElementById('contact-fname-error');
        emailError = document.getElementById('contact-email-error');
        phoneError = document.getElementById('contact-phone-error');
        nationalityError = document.getElementById('contact-nationality-error');
        messageError = document.getElementById('contact-message-error');

        function contactFullname(){
            var fullname = document.getElementById('contact-fullname').value;
            if(fullname.length == 0){
                $('#contact-fullname').focus();
                fnameError.innerHTML = "Full name is required !";
                return false;
            }
            else{
                fnameError.innerHTML = '';
                return true;
            }
       }

       function contactEmail(){
            var email = document.getElementById('contact-email').value;
            if(email.length == 0){
                $('#contact-email').focus();
                emailError.innerHTML = "Email field is required !";
                return false;
            }
            else{
                emailError.innerHTML = '';
                return true;
            }
        }

        function contactPhone(){
            var phone = document.getElementById('contact-phone').value;
            if(phone.length == 0){
                $('#contact-phone').focus();
                phoneError.innerHTML = "Phone number is required !";
                return false;
            }
            if(!phone.match(/^\d{10}$/)){
                phoneError.innerHTML = "Please provide valid 10 digit number";
                return false;
            }
            else{
                phoneError.innerHTML = '';
                return true;
            }
        }

        function contactNationality(){
            var nationality = document.getElementById('contact-nationality').value;
            if(nationality.length == 0){
                $('#contact-nationality').focus();
                nationalityError.innerHTML = "Nationality field is required !";
                return false;
            }
            else{
                nationalityError.innerHTML = '';
                return true;
            }
        }

       function validateContact(){
            if(!contactFullname() || !contactEmail() || !contactPhone() ||
            !contactNationality()){
                return false;
            }
            else{
                return true;
            }
        }

        var php_var = "<?php echo $msg; ?>";

        if(php_var.length !== 0){
              Swal.fire({
                  title: 'Submitted!!',
                  text: php_var,
                  icon: 'success'
              })
        }
        </script>
@endsection