@extends('frontend.layout.master')

@section('title', __('frontend::static.contact_us.contact_us'))

@section('breadcrumb')
    <nav class="breadcrumb breadcrumb-icon">
        <a class="breadcrumb-item" href="{{ url('/') }}"><i class="iconsax" icon-name="home-2"></i>
            {{ __('frontend::static.contact_us.home') }}</a>
        <span class="breadcrumb-item active">{{ __('frontend::static.contact_us.contact_us') }}</span>
    </nav>
@endsection

@section('content')
    <!-- Contact Section Start -->
    <section class="contact-section section-b-space">
        <div class="container-fluid-lg">
            <div class="contact-content">
                <div class="row g-xxl-5 g-lg-4 g-3 justify-content-center">
                    <div class="col-xxl-6 col-lg-6">
                        <form action="{{ route('frontend.contact.mail') }}" method="post" id="contactUsForm">
                            @csrf
                            @method('POST')
                            <div class="contact-us-form">
                                <div class="contact-title">
                                    <h3>Contact our sales team</h3>
                                    <p>We improve and grow because of your ideas, queries, and criticism. We are available to listen, whether you have a recommendation.</p>
                                </div>
                                <div class="row g-3">
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label
                                                for="firstname">{{ __('frontend::static.contact_us.first_name') }}</label>
                                            <input type="text" id="firstname" name="firstname" class="form-control"
                                                placeholder="{{ __('frontend::static.contact_us.enter_your_first_name') }}">
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label for="lastname">{{ __('frontend::static.contact_us.last_name') }}</label>
                                            <input type="text" id="lastname" name="lastname" class="form-control"
                                                placeholder="{{ __('frontend::static.contact_us.enter_your_last_name') }}">
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label for="email">{{ __('frontend::static.contact_us.email') }}</label>
                                            <input type="email" id="email" name="email" class="form-control"
                                                placeholder="{{ __('frontend::static.contact_us.enter_your_email') }}">
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label for="location">Location</label>
                                            <input type="text" id="location" name="text" class="form-control"
                                                placeholder="{{ __('frontend::static.contact_us.enter_your_email') }}">
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label for="message">{{ __('frontend::static.contact_us.message') }}</label>
                                            <textarea class="form-control" name="message" id="" rows="5"
                                                placeholder="{{ __('frontend::static.contact_us.write_your_message') }}"></textarea>
                                        </div>
                                    </div>
                                </div>
                                <button class="btn btn-solid send-btn"
                                    id="sendMsg">{{ __('frontend::static.contact_us.send_message') }}</button>
                            </div>
                        </form>
                    </div>
                    <div class="col-xxl-6 col-lg-6">
                        <div class="title-1">
                            <h2>{{ $themeOptions['contact_us']['title'] }}</h2>
                            <p class="heading-p">{{ $themeOptions['contact_us']['description'] }}</p>
                        </div>
                        <div class="contact-info">
                            <div class="contact-box">
                                <h4>Chat to sales</h4>
                                <p>Interested in switching? Speak to our friendly team.</p>
                                <a href="#!">sales@example.com</a>
                            </div>

                            <div class="contact-box">
                                <h4>Email support</h4>
                                <p>Email us and we'll get back to you within 24 hours.</p>
                                <a href="#!">support@example.com</a>
                            </div>

                            <div class="contact-box">
                                <h4>Call us</h4>
                                <p>Mon - Fri, 9:00 AM - 5:00 PM (UTC/GMT +10:00).</p>
                                <a href="#!">1300 132 642</a>
                                <a href="#!">+61 402 020 024</a>
                            </div>

                            <div class="contact-box">
                                <h4>Melbourne</h4>
                                <p>Visit our office Mon - fri, 9:00 AM - 5:00 PM.</p>
                                <a href="#!">10 Gertude Street <br> Fitzroy VIC 3065 Australia</a>
                            </div>

                            <div class="contact-box">
                                <h4>Sydney</h4>
                                <p>Visit our office Mon - fri, 9:00 AM - 5:00 PM.</p>
                                <a href="#!">40 Gertude Street <br> Fitzroy VIC 2000 Australia</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Contact Section End -->

    @if ($themeOptions['contact_us']['google_map_embed_url'] ?? false)
    @endif
@endsection


@push('js')
    <script>
        (function($) {
            "use strict";
            $(document).ready(function() {
                let profileFormRules = {
                    "firstname": "required",
                    "lastname": "required",
                    "email": "required",
                    "message": "required",
                };

                $("#contactUsForm").validate({
                    ignore: [],
                    rules: profileFormRules
                });

                $('#sendMsg').on('click', function() {
                    if ($("#contactUsForm").valid()) {
                        $('#contactUsForm').submit();
                    }
                });
            });

        })(jQuery);
    </script>
@endpush