@extends('web_layouts.layout')
{{-- title --}}

@section('title',"$metaDetails->meta_title")
@section('meta_description',$metaDetails->meta_description)
@section('meta_keywords',$metaDetails->meta_keyword)
@section('meta_name',$metaDetails->meta_name)
@section('meta_tag',$metaDetails->meta_tag)

@section('content')
<style>
    label.error {
        color: red;
        font-size: 18px;
    }

    .write-msg-form input[type="text"] {
        margin: 0px !important;
    }
</style>
<div id="middle">
    <section class="midd-inner-banner shadow-bottom">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="inner-banner-area-pages">
                        <!-- <h1 class="cmn-hd-inner"><span></span>Need help? Talk to us</h1>
                        <p>The easy and trustworthy option to stay connected with
                            your loved ones around the world.</p>

                        <div class="breadcrumb"><a href="{{url('/')}}">Home</a> <em></em> Contact Us</div> -->
                    </div>

                </div>
            </div>
        </div>
    </section>
    <!-- <section class="common-section getintouch-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h2 class="cmn-hd">Get In Touch </h2>
                    <p class="cmn-subhd">How can we help you? We would love to hear from you.</p> <br><br>
                </div>

                <div class="col-md-4">
                    <div class="howitwork-cnt">
                        <div class="howitwork-icon"><a href="https://wa.me/18009999999" target="_blank"><img alt="" src="images/webimage/whatsapp.png" height="60px" width="60px"></a></div>
                        <div class="howitwork-details">
                            <div class="howitwork-hd">Office Address</div>
                            <div class="howitwork-desc">503, Garden City, New York - 11530</div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="howitwork-cnt second">
                        <div class="howitwork-icon bluecolor"><img alt="" src="images/webimage/get-touch-icon2.png"></div>
                        <div class="howitwork-details">
                            <div class="howitwork-hd">Email Us</div>
                            <div class="howitwork-desc"><a href="mailto:help@Bursato.com">help@Bursato.com</a></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="howitwork-cnt last">
                        <div class="howitwork-icon"><img alt="" src="images/webimage/get-touch-icon3.png"></div>
                        <div class="howitwork-details">
                            <div class="howitwork-hd">Call Us</div>
                            <div class="howitwork-desc"><a href="tel:+1 718 713 8417">+1 718 713 8417</a></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section> -->
    {!! $metaDetails->description !!}


    <section class="common-section write-message-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h2 class="cmn-hd text-center">{{ __('messages.contact_message_heading')}} </h2>
                    <p class="cmn-subhd text-center">{{ __('messages.contact_messages_para')}}…</p>
                    <div class="write-msg-form">
                    
                    @if ($message = Session::get('success'))
<div class="alert alert-success alert-block">
    <button type="button" class="close" data-dismiss="alert">×</button>
    <strong>{{ $message }}</strong>
</div>
@endif
                    @if($errors->any())
              {!! implode('', $errors->all('<div class="alert alert-danger mb-1">:message</div>')) !!}
              @endif
                        <form action="{{route('contact')}}" method="POST" enctype="multipart/form-data" id="contactForm">
                            @csrf
                            <div class="row">
                                <div class="col-md-6 mb-4">
                                    <input type="text" id="first_name" class="form-control" placeholder="{{ __('messages.contact_form_first_name_placeholder')}}" name="first_name">
                                </div>
                                <div class="col-md-6 mb-4">
                                    <input type="text" id="last_name" class="form-control" placeholder="{{ __('messages.contact_form_last_name_placeholder')}}" name="last_name">
                                </div>
                                <div class="col-md-6 mb-4">
                                    <input type="text" id="mo_number" class="form-control" placeholder="{{ __('messages.contact_form_mobile_number_placeholder')}}" name="mo_number">
                                </div>
                                <div class="col-md-6 mb-4">
                                    <input type="text" id="email" class="form-control" placeholder="{{ __('messages.contact_form_email_placeholder')}}" name="email">
                                </div>
                                <div class="col-md-12">
                                    <textarea cols="" rows="" id="description" class="form-control" placeholder="{{ __('messages.contact_form_your_message_placeholder')}}" style="height:150px;" name="description"></textarea>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-btn">
                                        <input type="submit" name="submit" class="btn btn-primary" value="{{ __('messages.contact_form_submit_button')}}">
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @endsection
    @section('topup-home.script')
    <script>
        $(document).ready(function() {
            $("#contactForm").validate({
                rules: {
                    first_name: "required",
                    last_name: "required",
                    mo_number: {
                        required: true,
                        maxlength: 10,
                    },
                    email: {
                        required: true,
                        email: true,
                    },
                    description: "required",
                },
                messages: {
                    first_name: 'First name is required',
                    last_name: 'last name is required',
                    mo_number: {
                        required: 'mobile number is required',
                        maxlength: 'Enter only 10 digits',
                    },
                    email: {
                        required: 'email is required',
                        email: 'enter valid email address',
                    },
                    description: 'description is required',
                },
                tooltip_options: {
                    example4: {
                        trigger: 'focus'
                    },
                    example5: {
                        placement: 'right',
                        html: true
                    }
                },
            });
        });
    </script>
    <!-- <script src="{{ asset('js/scripts/jquery.validate.min.js') }}"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
    @endsection