@extends('layouts.app')

@section('title', 'Services')

@section('content')

    @include('layouts.navbar')

    <div class="relative w-full h-full md:-mt-12">
        <div>
            {{-- <div class="hidden md:block">
                <img src="{{ asset('assets/MAIN MATERIALS/BODY.jpg') }}" alt="background"
                    class="absolute inset-0 w-full h-full object-cover object-right sm:bg-[#38247b] ">
            </div> --}}
            <div class="hidden md:block">
                <img src="{{ asset('assets/MAIN MATERIALS/Contact-bckgrnd.png') }}" alt="background"
                    class="absolute inset-0 w-full h-full object-cover object-right sm:bg-[#38247b] ">
            </div>
            <div class="block md:hidden">
                <img src="{{ asset('assets/MAIN MATERIALS/mobile_banner_09-06-2024.jpg') }}" alt="background"
                    class="absolute w-full">
            </div>
        </div>
        <!-- Form Container -->
        <div class="bg-[#38247b]">
            <div class="py-56 relative md:py-32">
                <form method="POST" action="{{ url('contact-form') }}">
                    @csrf
                    <div class="w-full h-full relative py-56">
                        <div
                            class="w-full container mx-auto z-50 inset-0 flex md:justify-start items-center justify-center">
                            <div class="flex justify-center">
                                <div class="bg-white rounded-2xl">
                                    @if (Session::get('success'))
                                        <div class="col-12 float-start p-2">
                                            <div class="alert alert-success">
                                                {{ Session::get('success') }}
                                            </div>
                                        </div>
                                    @endif
                                    <div class="">
                                        <div class="m-4 sm:m-8">
                                            <input type="text"
                                                class="w-full p-2 text-black bg-white border border-black rounded-lg font-poppins"
                                                placeholder="Name" name="name" required />
                                            @error('name')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                        <div class="flex flex-col sm:flex-row m-4 sm:m-8 gap-4">
                                            <div class="w-full">
                                                <input type="text"
                                                    class="w-full p-2 tracking-widest lg:text-sm xl:text-base text-black bg-white border border-black rounded-lg font-poppins"
                                                    placeholder="Phone Number" name="phone_no" required />
                                                @error('phone_no')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                            </div>
                                            <div class="w-full">
                                                <input type="text"
                                                    class="w-full p-2 tracking-widest lg:text-sm xl:text-base text-black bg-white border border-black rounded-lg font-poppins"
                                                    placeholder="Email" name="email" required />
                                                @error('email')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="m-4 sm:m-8">
                                            <input type="text"
                                                class="w-full p-2 tracking-widest text-black lg:text-sm xl:text-base bg-white border border-black rounded-lg font-poppins"
                                                placeholder="Subject" name="subject" required />
                                            @error('subject')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                        <div class="flex flex-col md:flex-row m-4 sm:m-8">
                                            <textarea name="message" id="message" cols="30" rows="10"
                                                class="w-full border-2 font-poppins border-black text-black tracking-widest rounded-lg p-2" placeholder="Message"></textarea>
                                            @error('message')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                            <div class="flex flex-col space-y-4 mt-4 md:mt-0 md:ml-4">
                                                <h1
                                                    class="text-lg 2xl:text-base font-semibold tracking-wider lg:text-sm xl:text-base uppercase font-poppins">
                                                    Contact Information:</h1>
                                                <ul class="space-y-2">
                                                    <li
                                                        class="flex items-center lg:text-sm font-medium font-poppins sm:text-sm 2xl:text-base">
                                                        <i class="mr-2 fas fa-phone-alt"></i>09674236608
                                                    </li>
                                                    <li
                                                        class="flex items-center lg:text-sm font-medium font-poppins text-sm xl:text-base 2xl:text-base">
                                                        <i class="mr-2 fas fa-envelope"></i>teampayamanfair2024@gmail.com
                                                    </li>
                                                    <li
                                                        class="flex items-center lg:text-sm font-medium font-poppins sm:text-sm xl:text-base 2xl:text-base">
                                                        <i class="mr-2 fas fa-envelope"></i>marketing@viyline.net
                                                    </li>
                                                </ul>
                                                <div class="flex flex-col justify-start mt-4 md:mt-4 space-y-4">
                                                    <!-- reCAPTCHA Widget -->
                                                    <div class="g-recaptcha"
                                                        data-sitekey="{{ config('services.nocaptcha.sitekey') }}"></div>
                                                    @error('g-recaptcha-response')
                                                        <span class="text-danger">{{ $message }}</span>
                                                    @enderror
                                                    <button
                                                        class="w-full sm:w-14 md:w-32 h-10 md:h-8 font-bold tracking-widest uppercase bg-[#fdbb00] font-poppins rounded-2xl text-xl sm:text-sm text-[#38247b]"
                                                        type="submit">Submit</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>

                <script src="https://www.google.com/recaptcha/api.js" async defer></script>

            </div>


        </div>
        
    </div>
    <div class="relative z-50 -mt-10">
      @include('layouts.footer')  
    </div>
    

    <script src="https://www.google.com/recaptcha/api.js" async defer></script>

@endsection