@extends('end-user.layouts.app')

@section('content')


<main class="main">

    <!-- breadcrumb -->
    <div class="site-breadcrumb" style="background: url({{ asset('end-user/assets/img/logo/logo-nav.png') }})">
        <div class="container">
            <h1 class="breadcrumb-title">{{ TranslationHelper::translate('Contact Us', 'site') }}</h1>
            <ul class="breadcrumb-menu">
                <li><a href="{{ route('end-user.index') }}">{{ TranslationHelper::translate('Home', 'site') }}</a></li>
                <li class="active">{{ TranslationHelper::translate('Contact Us', 'site') }}</li>
            </ul>
        </div>
    </div>
    <!-- breadcrumb end -->
    <script type="application/ld+json">
    {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "{{ TranslationHelper::translate('Home', 'site') }}",
        "item": "{{ route('end-user.index') }}"
    },{
        "@type": "ListItem",
        "position": 2,
        "name": "{{ TranslationHelper::translate('Contact Us', 'site') }}",
        "item": "{{ url()->current() }}"
    }]
    }
    </script>


    <!-- contact area -->
    <div class="contact-area py-120">
        <div class="container">
            <div class="contact-content">
                <h2 class="section-title text-center mb-4">
                    {{ TranslationHelper::translate('Contact Information', 'site') }}
                </h2>
                <div class="row">

                    <div class="col-md-4">
                        <div class="contact-info">
                            <div class="contact-info-icon">
                                <i class="fal fa-map-location-dot"></i>
                            </div>
                            <div class="contact-info-content">
                                <h3 class="contact-title">
                                    {{ TranslationHelper::translate('Address', 'site') }}
                                </h3>
                                <p>{{ setting('address') }}</p>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="contact-info">
                            <div class="contact-info-icon">
                                <i class="fal fa-phone-volume"></i>
                            </div>
                            <div class="contact-info-content">
                                <h3 class="contact-title">
                                    {{ TranslationHelper::translate('Call Us', 'site') }}
                                </h3>
                                <p>
                                    <a href="tel:{{ setting('phone','en') }}">
                                        {{ setting('phone','en') }}
                                    </a>
                                </p>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="contact-info">
                            <div class="contact-info-icon">
                                <i class="fal fa-envelopes"></i>
                            </div>
                            <div class="contact-info-content">
                                <h3 class="contact-title">
                                    {{ TranslationHelper::translate('Email Us', 'site') }}
                                </h3>
                                <p>
                                    <a href="mailto:{{ setting('email','en') }}">
                                        {{ setting('email','en') }}
                                    </a>
                                </p>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="contact-wrapper">
                <div class="row">
                    <div class="col-lg-12 align-self-center">
                        <div class="contact-form">

                            <div class="contact-form-header">
                                <h2 class="section-title">
                                    {{ TranslationHelper::translate('Get In Touch', 'site') }}
                                </h2>
                            </div>

                            <form method="post" action="{{ route('end-user.contact.store') }}" id="contact">
                                @csrf

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="name" class="form-label">
                                                {{ TranslationHelper::translate('Name', 'site') }}
                                            </label>
                                            <input type="text" class="form-control" id="name" name="name" placeholder="{{ TranslationHelper::translate('Name', 'site') }}" required />
                                            <span class="text-danger clear" id="name_message" aria-live="polite"></span>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="email" class="form-label">
                                                {{ TranslationHelper::translate('Email', 'site') }}
                                            </label>
                                            <input type="email" class="form-control" id="email" name="email" placeholder="{{ TranslationHelper::translate('Email', 'site') }}" required />
                                            <span class="text-danger clear" id="email_message" aria-live="polite"></span>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="phone" class="form-label">
                                                {{ TranslationHelper::translate('Phone', 'site') }}
                                            </label>
                                            <input type="tel" class="form-control" name="phone" id="phone" placeholder="{{ TranslationHelper::translate('Phone', 'site') }}" required />
                                            <span class="text-danger clear" id="phone_message" aria-live="polite"></span>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="subject" class="form-label">
                                                {{ TranslationHelper::translate('Subject', 'site') }}
                                            </label>
                                            <input type="text" class="form-control" name="subject" id="subject" placeholder="{{ TranslationHelper::translate('Subject', 'site') }}" required />
                                            <span class="text-danger clear" id="subject_message" aria-live="polite"></span>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="content" class="form-label">
                                        {{ TranslationHelper::translate('Message', 'site') }}
                                    </label>
                                    <textarea name="content" id="content" cols="30" rows="5" class="form-control" placeholder=" {{ TranslationHelper::translate('Write Your Message', 'site') }}" required></textarea>
                                    <span class="text-danger clear" id="content_message" aria-live="polite"></span>
                                </div>

                                <button type="submit" class="theme-btn">
                                    {{ TranslationHelper::translate('Send Message', 'site') }} <i class="far fa-paper-plane"></i>
                                </button>

                                <div class="col-md-12 mt-3">
                                    <div class="form-messege text-success"></div>
                                </div>

                            </form>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end contact area -->

</main>

@endsection

@push('scripts')

<script>
    $('#contact').submit(function(e) {
        e.preventDefault();

        $('.clear').text(' ');

        const action = $(this).attr("action");
        let formData = new FormData($(this)[0]);

        $.ajax({
            url: action
            , data: formData
            , type: 'POST'
            , processData: false
            , contentType: false
            , cache: false
            , success: function(res) {
                $('#contact')[0].reset();
                Swal.fire({
                    position: 'top-end',
                    icon: 'success',
                    title: '{{ TranslationHelper::translate("Message Sent Successfully", "site") }}',
                    showConfirmButton: false,
                    timer: 1500
                });
            }
            , error: function(reject) {
                let res = $.parseJSON(reject.responseText);
                console.log(res.errors);
                $.each(res.errors, function(key, value) {
                    $("#" + key + "_message").text(value[0]);
                });
            }
        });
    });

</script>

@endpush