@extends('front.layouts.master')

@section('title', TranslationHelper::translate('Contact Meta Title', 'site'))

@section('meta_description', TranslationHelper::translate('Contact Meta Description', 'site'))

@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">
            <h2 class="breadcrumb-title">{{ TranslationHelper::translate('Contact Us', 'site') }}</h2>
            <ul class="breadcrumb-menu">
                <li><a href="{{ route('site.index') }}">{{ TranslationHelper::translate('Home', 'site') }}</a></li>
                <li class="active">{{ TranslationHelper::translate('Contact Us', 'site') }}</li>
            </ul>
        </div>
    </div>
    <!-- breadcrumb end -->

    <!-- contact area -->
    <div class="contact-area py-120">
        <div class="container">
            @if(session()->has('success'))
            <div class="alert alert-success">
                {{ session()->get('success') }}
            </div>
            @endif
            <div class="contact-content">
                <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">
                                <h5>{{ TranslationHelper::translate('Address', 'site') }}</h5>
                                <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">
                                <h5>{{ TranslationHelper::translate('Call Us', 'site') }}</h5>
                                <p>{{ setting('phone','en') }}</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">
                                <h5>{{ TranslationHelper::translate('Email Us', 'site') }}</h5>
                                <p>{{ setting('email','en') }}</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>{{ TranslationHelper::translate('Get In Touch', 'site') }}</h2>
                            </div>

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

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

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <input type="number" class="form-control" name="phone" placeholder="{{ TranslationHelper::translate('Your Phone', 'site') }}" required>
                                            <span class="text-danger clear" id="phone"></span>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <input type="text" class="form-control" name="subject" placeholder="{{ TranslationHelper::translate('Your Subject', 'site') }}" required>
                                            <span class="text-danger clear" id="subject"></span>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <textarea name="content" cols="30" rows="5" class="form-control" placeholder="{{ TranslationHelper::translate('Write Your Message', 'site') }}" required></textarea>
                                    <span class="text-danger clear" id="content"></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 Has Been 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).text(value[0]);
                });
            }
        });
    });

</script>
@endpush