@extends('front.main')
@section('content')

<!-- start content -->
    <!-- breadcume section -->
    <div class="breadcume_bg">
        <div class="max-w-screen-xl mx-auto px-3 py-20 flex flex-col items-start justify-center">
            <h1 class="md:text-4xl sm:text-2xl text-xl text-white font-medium mb-3 uppercase">Contact Us</h1>
            <ul class="flex items-center">
                <li>
                    <a href="/" class="text-lg text-white hover:text-black">Home</a>
                </li>
                <li><p class="text-white mx-4">/</p></li>
                <li>
                    <p class="text-lg text-white">Contact Us</p>
                </li>
            </ul>
        </div>
    </div>

    <div class="px-3 py-20 bg-white">
        <div class="max-w-screen-xl mx-auto">
            <div class="text-center mb-10">
                <h2 class="text-3xl text-green font-semibold mb-3">Get In Touch</h2>
                <p class="text-base text-black font-normal mb-4">
                    If you had like to know more about our work or process feel free to get in touch. You can send us your inquiry by usign this form.
                </p>
            </div>
            <div class="grid lg:grid-cols-2 md:grid-cols-2 grid-cols-1 gap-8 mt-12">
                <div class="xl:p-8 lg:p-6 p-4 border-1 border-green rounded-xl bg-white relative">
                    <form action="contactus_forrm" method="post">
                        @csrf
                        <div class="mb-3">
                            <x-text-input id="" class="block mt-1 w-full" type="text" name="name" placeholder="Name *" />
                            @error('name')
                                <div class="text-red-500">{{ $message }}</div>
                            @enderror

                        </div>
                        <div class="mb-3">
                            <x-text-input id="email" class="block mt-1 w-full" type="email" name="email" placeholder="Email *" />
                            @error('email')
                                <div class="text-red-500">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="mb-3">
                            <x-text-input id="email" class="block mt-1 w-full" type="number" name="contact_number" placeholder="Contact Number *" />
                            @error('contact_number')
                                <div class="text-red-500">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="mb-3">
                            <x-text-input id="email" class="block mt-1 w-full" type="text" name="company_name" placeholder="Company Name" />
                            @error('company_name')
                                <div class="text-red-500">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="mb-3">
                            <x-text-input id="email" class="block mt-1 w-full" type="text" name="subject" placeholder="Subject *" />
                            @error('subject')
                                <div class="text-red-500">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="mb-3">
                            <textarea name="message" placeholder="Message..." rows="4" class="w-full border border-gray-300 focus:border-green focus:ring-green rounded-md py-2.5 text-base"></textarea>
                        </div>
                        <div>
                            <x-primary-button class="w-full text-center">Send</x-primary-button>
                        </div>
                    </form>
                </div>

                <div>
                    <div class="xl:px-8 lg:px-6 px-4 py-2 border-l-4 border-green group hover:border-brown">
                        <h4 class="text-xl text-green font-semibold group-hover:text-brown">Visit Us At</h4>
                        <p class="text-base text-black font-normal">
                            44 Standard Rd, London NW10 6EU, United Kingdom
                        </p>
                    </div>
                    <hr class="my-6 bg-green" />
                    <div class="xl:px-8 lg:px-6 px-4 py-2 border-l-4 border-green group hover:border-brown">
                        <h4 class="text-xl text-green font-semibold group-hover:text-brown">Head Office Timing</h4>
                        <p class="text-base text-black font-normal">Monday to Friday : 9 to 6</p>
                        <p class="text-base text-black font-normal">Saturday : 9 to 1</p>
                        <p class="text-base text-black font-normal">Sunday Closed</p>
                    </div>
                    <hr class="my-6 bg-green" />
                    <div class="xl:px-8 lg:px-6 px-4 py-2 border-l-4 border-green group hover:border-brown">
                        <h4 class="text-xl text-green font-semibold group-hover:text-brown">Call Us On</h4>
                        <p class="text-base text-black font-normal">+44 20 7870 9071</p>
                    </div>
                    <hr class="my-6 bg-green" />
                    <div class="xl:px-8 lg:px-6 px-4 py-2 border-l-4 border-green group hover:border-brown">
                        <h4 class="text-xl text-green font-semibold group-hover:text-brown">Mail Us On</h4>
                        <p class="text-base text-black font-normal">info@graingreens.com</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2482.1847330783535!2d-0.2671102233786729!3d51.528171471818105!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487611e92b88bc41%3A0xb12dae4d2a56043c!2s44%20Standard%20Rd%2C%20London%20NW10%206HF%2C%20UK!5e0!3m2!1sen!2sin!4v1732536650732!5m2!1sen!2sin" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>


<!-- end content -->

@endsection
@push('script')
    @if(session('reload'))
        <script>
            window.location.reload(true);
        </script>
    @endif
@endpush