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

<section class="page_breadcrumbs ds parallax section_padding_top_65 section_padding_bottom_65">
    <div class="container">
        <div class="row">
            <div class="col-sm-12 text-center">
                <h2 class="highlight">Contact</h2>
                <ol class="breadcrumb darklinks">
                    <li>
                        <a href="{{route('home')}}">
                            Home
                        </a>
                    </li>
                    <li class="active">Contact</li>
                </ol>
            </div>
        </div>
    </div>
</section>

<section class="ls section_padding_top_100 section_padding_bottom_75">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <!--<section id="map" class="ls ms">-->
                    <!-- marker description and marker icon goes here -->
                    <!--<div class="map_marker_description">-->
                        {{-- <h3>Map Title</h3>
                        <p>Map description text</p>
                        <img class="map_marker_icon" src="images/map_marker_icon.png" alt=""> --}}
                    
                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d54822.36984576634!2d39.13376909282254!3d-6.639113800000007!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x185c57005398ec13%3A0x74e91e1bb353a17c!2sGIN%20INVESTMENT%20LTD%20HQ!5e1!3m2!1sen!2sug!4v1711098360326!5m2!1sen!2sug" width="1200" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                    
                    <!--</div>-->
                <!--</section>-->
            </div>
        </div>

        <br>

        <div class="row topmargin_40">
            <div class="col-sm-4 to_animate" data-animation="pullDown">
                <div class="teaser text-center">
                    <div class="teaser_icon highlight size_normal">
                        <i class="rt-icon2-phone5"></i>
                    </div>

                    <p>
                        <span class="grey">Phone:</span> +255 656 295 486 | +255784295483<br>
                        {{-- <span class="grey">Fax:</span> +12 345 678 9123 --}}
                    </p>

                </div>
            </div>
            <div class="col-sm-4 to_animate" data-animation="pullDown">
                <div class="teaser text-center">
                    <div class="teaser_icon highlight size_normal">
                        <i class="rt-icon2-location2"></i>
                    </div>

                    <p> 
                        Main Office, Tegeta Dar es salaam 
                    </p>

                    <p>
                        P.O Box 96218 Dar es salaam
                    </p>

                </div>
            </div>
            <div class="col-sm-4 to_animate" data-animation="pullDown">
                <div class="teaser text-center">
                    <div class="teaser_icon highlight size_normal">
                        <i class="rt-icon2-mail"></i>
                    </div>

                    <p>info@gininvestment.com</p>

                </div>
            </div>

        </div>

        <div class="row topmargin_40">
            <div class="col-sm-12 to_animate">
                <form action="{{route('contact.store')}}" method="POST" id="contactForm" novalidate="novalidate">
                    @csrf
                    <div class="row">

                        <div class="col-sm-6">
                            <p class="form-group">
                                <label for="name">Name <span class="required">*</span></label>
                                {{-- <i class="fa fa-user highlight2" aria-hidden="true"></i> --}}
                                <input type="text" aria-required="true" size="30" value="" name="name" id="name" class="form-control @error('name') is-invalid @enderror" placeholder="Full Name" required>
                                @error('name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </p>

                            <p class="form-group">
                                <label for="contact">Email address / Phone Number<span class="required">*</span></label>
                                {{-- <i class="fa fa-envelope highlight2" aria-hidden="true"></i> --}}
                                <input type="text" aria-required="true" size="30" value="" name="contact" id="contact" class="form-control @error('contact') is-invalid @enderror" placeholder="Enter email address or phone number" required>
                                @error('contact')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </p>

                            <p class="form-group">
                                <label for="subject">Subject<span class="required">*</span></label>
                                {{-- <i class="fa fa-flag highlight2" aria-hidden="true"></i> --}}
                                <input type="text" aria-required="true" size="30" value="" name="subject" id="subject" class="form-control @error('subject') is-invalid @enderror" placeholder="Subject" required>
                                @error('subject')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </p>
                        </div>
                        <div class="col-sm-6">

                            <p class="contact-form-message form-group">
                                <label for="message">Message</label>
                                {{-- <i class="fa fa-comment-o highlight2" aria-hidden="true"></i> --}}
                                <textarea aria-required="true" rows="5" cols="45" name="message" id="message" class="form-control @error('message') is-invalid @enderror" placeholder="Message"></textarea>
                                @error('message')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">

                            <p class="contact-form-submit text-center topmargin_30">
                                <button type="submit" id="contact_form_submit" name="contact_submit" class="theme_button color1">Send Message</button>
                            </p>
                        </div>

                    </div>
                </form>
            </div>
        </div>
    </div>
</section>

@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