@extends('layout.app')
@section('title')
    <title>Contact Us</title>
@endsection
@section('content')

    <section class="contact-us-section">
        <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 Us</li>
            </ol>
        </nav>
    </section>
    <section class="get-in-touch-section">
        <div class="get-in-card">
            <div class="row">
                <div class="col-md-5">
                    <div class="get-in-desc">
                        <div class="contact-icon">
                            <img src="{{url('frontend/icons/contact-icon.svg')}}" alt="">
                            <h5>Contact us</h5>
                        </div>
                        <h2>Get in touch with us</h2>
                        <p>If you have an enquiry regarding immigration to
                            Australia, please fill out the enquiry form below and
                            one of our migration agents will be in touch.
                        </p>
                        <div class="contact-desc">
                           @if($phone !== null)
                            <a href="tel: {{$phone->value}}" class="contact-phone">
                              <img src="{{url('frontend/icons/contact-call-icon.svg')}}" alt="">
                              <h5>{{$phone->value}}</h5>
                            </a>
                            @endif
                            @if($email !== null)
                            <a href="mailto: {{$email}}" class="contact-phone">
                              <img src="{{url('frontend/icons/contact-mail-icon.svg')}}" alt="">
                              <h5>{{$email->value}}</h5>
                            </a>
                            @endif
                            @if($address !== null)
                            <a href="https://goo.gl/maps/P4Y2PYGMpGa83L2R8" target="_blank" class="contact-phone">
                              <img src="{{url('frontend/icons/contact-location-icon.svg')}}" alt="">
                              <h5>{{$address->value}}</h5>
                            </a>
                            @endif
                          </div>
                    </div>
                </div>
                <div class="col-md-7">
                    <div class="contact-form">
                        <h2>Please fill-up the form</h2>
                        @include('success.success')
                        @include('errors.error')

                        <form action="{{route('send_contact_mail')}}" method = "post">
                            @csrf
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="">Full name</label>
                                        <input type="text" class="form-control" placeholder="Enter your name" name="fullname" id="">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="">Email address</label>
                                        <input type="email" class="form-control" placeholder="Enter your email adress" name="email" id="">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="">Phone</label>
                                        <input type="text" class="form-control" placeholder="Enter your phone number" name="phone" id="">
                                    </div>
                                </div>
                                <input type = "hidden" name = "check" value = "1"/>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="">Services</label>
                                        <select name="service_id" id="" class="form-select">
                                            <option hidden>Choose service</option>
                                            @foreach($services as $service)
                                             <option value="{{$service->id}}" class="aplus-display-select">{{$service->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-12">
                        @php
                            $code = Str::random(5);
                        @endphp
                    <div class="captcha-field">
                        <div>
                            <label>Enter Your Captcha</label>
                            <input id="captcha" type="text" name = "entered_captcha_code" class="form-control" placeholder="Enter Captcha as Shown" required>
                            <input type = "hidden" id = "displayed_captcha_code" name = "displayed_captcha_code" value = "{{$code}}"/>
                        </div>
                        <div>
                            <label>Captcha</label>
                            <div class="captcha-ref">
                                <input type = "text" id = "captcha_code" readonly class="form-control"  name = "captcha_code" value = "{{$code}}"/>
                                <button id = "refresh"><i class="fas fa-sync-alt"></i></button>
                            </div>
                        </div>

                    </div>
                    @if ($errors->has('captcha'))
                        <span class="help-block">
                            <strong>{{ $errors->first('captcha') }}</strong>
                        </span>
                    @endif
                </div>
                                <div class="col-md-12">
                                    <div class="mb-5">
                                        <label for="">Message</label>
                                        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Write a message.." name="message"></textarea>
                                    </div>
                                </div>
                                <div class="submit-btn">
                                    <button type="submit">Send Message</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!1d3312.514012872817!2d151.2047258!3d-33.8764135!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6b12ae3c9ed85d5f%3A0x778da1aae43c7216!2sSuite%20503%2C%20Level%205%2F368%20Sussex%20St%2C%20Sydney%20NSW%202000%2C%20Australia!5e0!3m2!1sen!2snp!4v1670397808126!5m2!1sen!2snp" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
    </section>

    @section('script')
        <script>
            $('#refresh').click(function(event){
                event.preventDefault();
                $.ajax({
                    type:'GET',
                    url:'refreshcaptcha',
                    success:function(data){
                        document.getElementById('captcha_code').readOnly
                                        = false;
                        document.getElementById('captcha_code').value = (data.captcha_code);
                        document.getElementById('displayed_captcha_code').value = (data.captcha_code);
                        document.getElementById('captcha_code').readOnly
                                        = true;
                    }
                });
            });
</script>
    @endsection
@endsection