@extends('layouts/master')

@section('css')
@stop

@section('title')
Contact Us | Get in Touch with Our Experts
@stop

@section('metas')
    <meta name="title" content="Contact Us | Get in Touch with Our Experts">
    <meta name="description" content="Have questions or need assistance with your design and construction project? Contact us today for expert advice and personalized solutions. We're here to bring your vision to life!">
    <meta name="keywords" content="{{ setting('site.keywords') }}">
    <meta property="og:title" content="Contact Us | Get in Touch with Our Experts">
    <meta property="og:description" content="Have questions or need assistance with your design and construction project? Contact us today for expert advice and personalized solutions. We're here to bring your vision to life!">
    <meta property="og:url" content="{{ url()->current() }}">
    <meta property="og:site_name" content="{{ ucwords(config('app.name')) }}">
    <meta property="og:locale" content="en_GB">
    <meta property="og:type" content="{{ ucwords(config('app.name')) }}">
    <meta name="twitter:title" content="Contact Us | Get in Touch with Our Experts">
    <meta name="twitter:description" content="Have questions or need assistance with your design and construction project? Contact us today for expert advice and personalized solutions. We're here to bring your vision to life!">
    <meta name="twitter:domain" content="{{ env("APP_URL") }}">
@stop

@section('content')
<!-- Page Header Start -->
<div class="page-header parallaxie">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <!-- Page Header Box Start -->
                <div class="page-header-box">
                    <h1 class="text-anime-style-2" data-cursor="-opaque">Contact Us</h1>
                    <nav class="wow fadeInUp">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Contact Us</li>
                        </ol>
                    </nav>
                </div>
                <!-- Page Header Box End -->
            </div>
        </div>
    </div>
</div>
<!-- Page Header End -->

<!-- Page Contact Us Start -->
<div class="page-contact-us">
    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <!-- Contact Us Image Start -->
                <div class="contact-us-image">
                    <figure class="image-anime reveal">
                        <img src="{{ url('frontend/images/contact-us-image.jpg') }}" alt="contact-us">
                    </figure>
                </div>
                <!-- Contact Us Image End -->
            </div>
            
            <div class="col-lg-6">
                <!-- Contact Us Form Start -->
                <div class="contact-us-form">
                    <!-- Section Title Start -->
                    <div class="section-title">
                        <h3 class="wow fadeInUp">contact form</h3>
                        <h2 class="text-anime-style-2" data-cursor="-opaque">Let’s Connect and <span>Create Together</span></h2>
                        <p class="wow fadeInUp" data-wow-delay="0.2s">Your email address will not be published. Required fields are marked *</p>
                    </div>
                    <!-- Section Title End -->

                    <!-- Contact Form Start -->
                    <div class="contact-form">
                        <!-- Contact Form Start -->
                        <form action="{{ route('contact_us_submit') }}" method="POST" data-toggle="validator" class="wow fadeInUp" data-wow-delay="0.4s">
                            @csrf
                            <div class="row">
                                <!-- Name Field -->
                                <div class="form-group col-md-6 mb-4">
                                    <input type="text" name="name" class="form-control" id="name" placeholder="Name*" required value="{{ old('name') }}">
                                    <div class="help-block with-errors">
                                        @error('name')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                        
                                <!-- Email Field -->
                                <div class="form-group col-md-6 mb-4">
                                    <input type="email" name="email" class="form-control" id="email" placeholder="Email Address*" required value="{{ old('email') }}">
                                    <div class="help-block with-errors">
                                        @error('email')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                        
                                <!-- Phone Field -->
                                <div class="form-group col-md-12 mb-4">
                                    <input type="text" name="phone" class="form-control" id="phone" placeholder="Your Phone*" required value="{{ old('phone') }}">
                                    <div class="help-block with-errors">
                                        @error('phone')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                        
                                <!-- Message Field -->
                                <div class="form-group col-md-12 mb-5">
                                    <textarea name="message" class="form-control" id="message" rows="4" placeholder="Your Message">{{ old('message') }}</textarea>
                                    <div class="help-block with-errors">
                                        @error('message')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                        
                                <!-- Submit Button -->
                                <div class="col-md-12">
                                    <button type="submit" class="btn-default">Submit</button>
                                    <div id="msgSubmit" class="h3 hidden"></div>
                                </div>
                            </div>
                        </form>
                        <!-- Contact Form End -->
                    </div>
                    <!-- Contact Form End -->
                </div>
                <!-- Contact Us Form End -->
            </div>
        </div>
    </div>
</div>
<!-- Page Contact Us End -->

<!-- Google Map Section Start -->
<div class="google-map">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <!-- Section Title Start -->
                <div class="section-title">
                    <h3 class="wow fadeInUp">Our contact</h3>
                    <h2 class="text-anime-style-2" data-cursor="-opaque">Get in touch with us</h2>
                    <p class="wow fadeInUp" data-wow-delay="0.2s">Get in touch to discuss your employee wellbeing needs today. Please give us a call, drop us an email or fill out the contact form and we'll get back to you.</p>
                </div>
                <!-- Section Title End -->
            </div>

            <div class="col-lg-12">
                <!-- Google Map IFrame Start -->
                <div class="google-map-iframe">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1984.1234567890123!2d-0.1234567!3d51.1234567!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4876101234567890%3A0x1234567890abcdef!2sSilicon%20Business%20Centre%2C%2028%20Wadsworth%20Rd%2C%20Perivale%2C%20Greenford%20UB6%207JD%2C%20UK!5e0!3m2!1sen!2suk!4v1234567890123" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
                </div>
                <!-- Google Map IFrame End -->
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <!-- Contact Info Box Start -->
                <div class="contact-info-box">
                    <!-- Conatct Info Item Start -->
                    <div class="contact-info-item wow fadeInUp">
                        <!-- Icon Box Start -->
                        <div class="icon-box">
                            <i class="fa-solid fa-phone"></i>
                        </div>
                        <!-- Icon Box End -->

                        <!-- Contact Info Content Start -->
                        <div class="contact-info-content">
                            <h3>phone number</h3>
                            <a style="color: black;" href = "tel:{{ setting('site.phoneno') }}"><p>{{ setting('site.contactno') }}</p></a>
                        </div>
                        <!-- Contact Info Content End -->
                    </div>
                    <!-- Conatct Info Item End -->

                    <!-- Conatct Info Item Start -->
                    <div class="contact-info-item wow fadeInUp" data-wow-delay="0.2s">
                        <!-- Icon Box Start -->
                        <div class="icon-box">
                            <i class="fa-regular fa-envelope"></i>
                        </div>
                        <!-- Icon Box End -->

                        <!-- Contact Info Content Start -->
                        <div class="contact-info-content">
                            <h3>e-mail support</h3>
                            <a style="color: black;" href = "mailto:{{ setting('site.mail') }}"><p>{{ setting('site.mail') }}</p></a>
                        </div>
                        <!-- Contact Info Content End -->
                    </div>
                    <!-- Conatct Info Item End -->

                    <!-- Conatct Info Item Start -->
                    <div class="contact-info-item wow fadeInUp" data-wow-delay="0.4s">
                        <!-- Icon Box Start -->
                        <div class="icon-box">
                            <i class="fa-solid fa-house"></i>
                        </div>
                        <!-- Icon Box End -->

                        <!-- Contact Info Content Start -->
                        <div class="contact-info-content">
                            <h3>headquarter</h3>
                            <p>{{ setting('site.address') }}</p>
                        </div>
                        <!-- Contact Info Content End -->
                    </div>
                    <!-- Conatct Info Item End -->
                </div>
                <!-- Contact Info Box End -->
            </div>
        </div>
    </div>
</div>
<!-- Google Map Section End -->
@stop

@section('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@if (session('success'))
    <script>
        Swal.fire({
            position: "center",
            icon: "success",
            text: "{{ session('success') }}",
            showConfirmButton: false,
            timer: 1500
        });
    </script>
@endif
@stop