@extends('frontend.layouts.master')
@section('title') {{ __('header.contact_title') }} @endsection
@section('main-content')
@include('frontend.layouts.notification')

<hr>

<!-- Contact Section Begin -->
<section class="contact-section spad">
    <div class="container">
        <div class="row">
            <div class="col-lg-4">
                <div class="contact-text">
                    @php
                        $settings=DB::table('settings')->get();
                    @endphp
                    <h2>{{ __('header.contact_page_title') }}</h2>
                    <p>{{ __('about.home_content') }}</p>
                    <table>
                        <tbody>
                            <tr>
                                <td class="c-o">{{ __('header.contact_address') }}:</td>
                                <td>@foreach($settings as $data) {{$data->address}} @endforeach</td>
                            </tr>
                            <tr>
                                <td class="c-o">{{ __('header.contact_phone') }}:</td>
                                <td>
                                    @foreach($settings as $data) {{$data->phone}} @endforeach
                                    / +257 22404803
                                </td>
                            </tr>
                            <tr>
                                <td class="c-o">{{ __('header.contact_email') }}:</td>
                                <td>@foreach($settings as $data) {{$data->email}} @endforeach</td>
                            </tr>
                            <tr>
                                <td class="c-o">Fax:</td>
                                <td>+257 22404785</td>
                            </tr>
                            <tr>
                                <td class="c-o">Whatsapp:</td>
                                <td>+257 79957123</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="col-lg-7 offset-lg-1">
                @php
                    $settings=DB::table('settings')->get();
                @endphp
                <form class="contact-form" method="post" action="{{route('contact.store')}}" id="contactForm" novalidate="novalidate">
                    @csrf
                    <div class="row">
                        <div class="col-lg-6">
                            <input type="text" class="form-control @error('name') is-invalid @enderror" name="name" id="name" placeholder="{{ __('header.contact_form_name') }}" required>
                            @error('name')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        <div class="col-lg-6">
                            <input type="email" class="form-control @error('email') is-invalid @enderror" name="email" id="email" placeholder="{{ __('header.contact_form_email') }}" required="required">
                            @error('email')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        <div class="col-lg-6">
                            <input type="text" class="form-control @error('phone') is-invalid @enderror" name="phone" id="phone" placeholder="{{ __('header.contact_form_phone') }}" required="required">
                            @error('phone')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        <div class="col-lg-6">
                            <input type="text" class="form-control @error('subject') is-invalid @enderror" name="subject" id="subject" placeholder="{{ __('header.contact_form_subject') }}" required="required">
                            @error('subject')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        <div class="col-lg-12">
                            <textarea placeholder="{{ __('header.contact_form_message') }}" class="form-control @error('message') is-invalid @enderror" id="message" name="message" required="required"></textarea>
                            @error('message')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                            <button type="submit">{{ __('header.contact_button') }}</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="map">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15930.952840218557!2d29.89190131738283!3d-3.413857000000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x19c14492820942c1%3A0xadb5c383dd487f62!2sTropitel%20Gitega%20H%C3%B4tel!5e0!3m2!1sen!2sug!4v1681395926058!5m2!1sen!2sug" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
        </div>
    </div>
</section>
<!-- Contact Section End -->

@endsection

@push('scripts')

$(document).ready(function(){
    
    (function($) {
        "use strict";

    
    jQuery.validator.addMethod('answercheck', function (value, element) {
        return this.optional(element) || /^\bcat\b$/.test(value)
    }, "type the correct answer -_-");

    // validate contactForm form
    $(function() {
        $('#contactForm').validate({
            rules: {
                name: {
                    required: true,
                    minlength: 2
                },
                subject: {
                    required: true,
                    minlength: 4
                },
                phone: {
                    required: true,
                    minlength: 9
                },
                email: {
                    required: true,
                    email: true
                },
                message: {
                    required: true,
                    minlength: 20
                }
            },
            messages: {
                name: {
                    required: "come on, you have a name, don't you?",
                    minlength: "your name must have at least 2 characters"
                },
                subject: {
                    required: "come on, you have a subject, don't you?",
                    minlength: "your subject must have at least 4 characters"
                },
                number: {
                    required: "come on, you have a number, don't you?",
                    minlength: "your Number must have at least 9 characters"
                },
                email: {
                    required: "no email, no message"
                },
                message: {
                    required: "um...yea, you have to write something to send this form.",
                    minlength: "Your subject must have at least 10 characters"
                }
            },
            submitHandler: function(form) {
                $.ajaxSetup({
                    headers: {
                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $(form).ajaxSubmit({
                    type:"POST",
                    data: $(form).serialize(),
                    url: $(form).attr('action'),
                    success: function() {
                        $('#contactForm :input').attr('disabled', 'disabled');
                        $('#contactForm').fadeTo( "slow", 1, function() {
                            $(this).find(':input').attr('disabled', 'disabled');
                            $(this).find('label').css('cursor','default');
                            $('#success').fadeIn()
                            $('.modal').modal('hide');
		                	$('#success').modal('show');
                        })
                    },
                    error: function() {
                        $('#contactForm').fadeTo( "slow", 1, function() {
                            $('#error').fadeIn()
                            $('.modal').modal('hide');
		                	$('#error').modal('show');
                        })
                    }
                })
            }
        })
    })
        
 })(jQuery)
})

@endpush