@extends('layouts.app')

@section('content')
    <!-- Form Contact -->
    <section class="container bg0 pt-0 p-b-90"  style="margin-top: 30px; padding-bottom: 40px; background:white">
        <div class="row">
            <div class="col-sm-12">
                <div class="pt-5 p-l-70 p-rl-0-lg">
                    <div class="size-a-1 flex-col-l p-b-70">

                        <h2 class="txt-l-101 cl0 txt-center p-b-14 respon1">
                            Get in touch
                        </h2>
                        <h3 class="txt-l-101 cl3 respon1">
                           Whether you have a question regarding an order, one of our products or even becoming a supplier. Simply drop us a message below and we will get back to you as soon as possible.
                        </h3>
                        @if(session('success',false))
                            <div class="alert alert-success">
                                <ul>
                                    <li>{{ session('success','') }}</li>
                                </ul>
                            </div>
                        @endif
                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                    </div>

                    <form id="contact-form" class="validate-form" method="post" action="{{ route('contact.submit') }}" name="contact">  {{ csrf_field() }}
                        <div class="row">
                            <div class="col-lg-12 p-b-20">
                                <br>
                                <div class="m-r--5 m-rl-0-lg validate-input" data-validate="Name is required">
                                    <input class="no-round-input" type="text" name="name" placeholder="Your Full Name *" value="{{ old('name') }}">
                                </div>
                                <br>
                            </div>

                            <div class="col-lg-6 p-b-20">
                                <div class="m-l--5 m-rl-0-lg validate-input" data-validate="Valid email is: ex@abc.xyz">
                                    <input class="no-round-input" type="text" name="email" placeholder="Your Email *" value="{{ old('email') }}">
                                </div>
                                <br>
                            </div>

                            <div class="col-lg-6 p-b-20">
                                <div class="m-l--5 m-rl-0-lg validate-input" data-validate="Phone is required">
                                    <input class="no-round-input" type="text" name="phone" placeholder="Your Phone *" value="{{ old('phone') }}">
                                </div>
                            </div>

                            <div class="col-12 p-b-20">
                                <div class="validate-input" data-validate="Message is required">
                                    <textarea rows="6" class="no-round-input p-4" style="height: 200px;" name="message" placeholder="Your Message">{{ old('message') }}</textarea>
                                </div>
                            </div>
                        </div>
                        <br>

                        <div class="flex-l p-t-10">
                            <button class="btn btn-secondary btn-lg" type="submit">
                                Send us a message
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!-- Ccontact -->
    <section class="how-pos2-parent">
        <div class="map how-pos2 s-full respon19">
            <div class="contact-map h-full" id="google_map" data-map-x="52.444705" data-map-y="-0.918436" data-scrollwhell="0" data-draggable="1" data-zoom="15"></div>
        </div>

    </section>


@endsection

@section('myjsfile')
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDyO3x7uKn93SypSRbLZnY2AXgrfeKBwfY"></script>
    <script src="js/map-custom.js?t=1"></script>
    <!--===============================================================================================-->
{{--    <script src="js/contact.js"></script>--}}

@endsection