@extends('welcome')

@section('seo_title', __('Get In Touch | '))

@section('content')
<div class="min-h-screen">
    <div class="pt-20 w-full py-4 bg-white shadow-sm">
        <div class="max-w-3xl px-2 mx-auto text-slate-600 lg:text-lg flex items-center justify-center">
            {{__("Contact Page")}}
        </div>
    </div>

    <div class="mt-10 mx-auto max-w-7xl w-full md:flex md:items-center p-4 review-box rounded-lg text-slate-600">

        <div class="lg:w-[600px]">
            <img src="{{asset('images/contact-image.png')}}" alt="contact image" class="w-full">
        </div>
        <div class="md:ml-10 mt-5 flex-grow max-w-xl pb-5">

            <h3 class="text-3xl text-center text-slate-600 heading-gradient font-black">{{__("Get In Touch") }}</h3>
            <div class="text-xl text-center text-slate-600 mb-5">{{__("Contact us for any inquiries you might have.")}}</div>

            @if ($errors->any())
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-2">
                <ul>
                    @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
            @endif

            @if(session('success'))
            <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-2">
                {{ session('success') }}
            </div>
            @endif

            <form method="POST" action="{{route('contact.process')}}">
                @csrf
                <label class="block text-slate-600 text-lg font-semibold">
                    {{ __('Your Name') }}
                </label>
                <x-input name="name" type="text" placeholder="{{__('Name') }}" class="w-full" value="{{ old('name') }}" required />

                <label class="mt-4 block text-slate-600 text-lg font-semibold">
                    {{ __('Email Address') }}
                </label>
                <x-input id="email" name="email" type="text" placeholder="you@example.org" class="w-full" value="{{ old('email') }}" required />

                <label class="mt-4 block text-slate-600 text-lg font-semibold">
                    {{ __('Subject') }}
                </label>
                <x-input id="subject" name="subject" type="text" placeholder="{{__('Subject') }}" class="w-full" value="{{ old('subject') }}" required />

                <label class="block mt-3 text-slate-600 text-lg font-semibold">
                    {{ __('Your math answer') }}
                </label>
                <x-input type="number" name="offer-answer" class="w-full lg:w-1/3" placeholder="{{__('How much is :no1+:no2 ?', ['no1' => $no1, 'no2' => $no2])}}" />

                <label class="block mt-3 text-slate-600 text-lg font-semibold">
                    {{ __('Your Message') }}
                </label>
                <textarea rows="9" class="w-full bg-stone-100 px-2 py-2 rounded-lg shadow-sm focus:ring-0 border-0 outline-0 text-stone-500 font-medium placeholder-stone-400" id="message" name="message" placeholder="" required>{{ old('message') }}</textarea>
                <x-button type="submit" class="mt-3">{{ __('Send Message') }}</x-button>
            </form>

            @if ($errors->any())
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-2">
                <ul>
                    @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
            @endif

        </div>
    </div>
</div>
@endsection