@extends('layouts.main-app')

@section('title','Home')

@section('content')

@include('layouts.navbar')
<div class="relative">
    <img class="absolute inset-0 object-cover w-full h-full" src="{{asset('images/blogs/banner.webp')}}" alt="">
    <div class="relative pb-32 pt-52 ">
        <h1 class="text-[#dab97d] text-6xl text-center">Contact Us</h1>
    </div>
</div>

<div class="relative">
    <img class="absolute inset-0 w-full h-full" src="{{asset('images/blogs/bg-body.webp')}}" alt="">
    <div class="container relative max-w-screen-xl px-4 mx-auto">
        <form action="{{ route('save.form') }}" method="POST">
            @csrf
            <div class="grid grid-cols-1 gap-12 py-12 md:grid-cols-2">
                <div>
                    <div class="p-8 space-y-4 bg-white rounded-xl">
                        <div class="text-center">
                            <h1 class="font-bold text-[#7700ce] text-2xl md:text-4xl">Got Any Questions?</h1>
                            <p class="text-sm">Use the form below to get in touch with the support team</p>
                        </div>
                        <div class="space-y-4">
                            <div class="flex items-center justify-between">
                                <label for="full_name">Full Name:</label>
                                <input type="text" id="default-input" name="full_name" value="{{old('full_name')}}" class="w-1/2 rounded-full ">

                            </div>
                            <div class="flex justify-end">
                                @error('full_name')
                                <span class="text-red-500"> {{ $message }} </span>
                                @enderror
                            </div>

                            <div class="flex items-center justify-between">
                                <label for="contact_number">Contact Number:</label>
                                <input type="text" id="default-input" name="contact_number" value="{{old('contact_number')}}" class="w-1/2 rounded-full ">

                            </div>
                            <div class="flex justify-end">
                                @error('contact_number')
                                <span class="text-red-500"> {{ $message }} </span>
                                @enderror
                            </div>

                            <div class="flex items-center justify-between">
                                <label for="email">Email Address:</label>
                                <input type="text" id="default-input" name="email" value="{{old('email')}}" class="w-1/2 rounded-full ">
                            </div>
                            <div class="flex justify-end">
                                @error('email')
                                <span class="text-red-500"> {{ $message }} </span>
                                @enderror
                            </div>
                        </div>

                        <div class="flex flex-col space-y-4 ">
                            <label for="full_name">Message</label>
                            <textarea id="message" rows="6" name="message" type="text" class="rounded-xl">{{old('message')}}</textarea>
                            @error('message')
                            <span class="text-red-500"> {{ $message }} </span>
                            @enderror
                        </div>

                        <div>
                            <button type="submit" class="rounded text-black bg-[#fcbb45] px-8 py-2">Submit Message</button>
                        </div>
                    </div>
                </div>

                <div>
                    <img src="{{asset('images/blogs/img.webp')}}" alt="">
                </div>
            </div>
        </form>


    </div>
</div>

@if(session('success'))
<div id="successModal" class="fixed inset-0 z-50 flex items-center justify-center">
    <div onclick="event.stopPropagation();" class="relative z-50 w-full max-w-xl p-6 space-y-8 text-center bg-white rounded-lg shadow-lg">
        <div class="flex justify-center">
            <img class="w-40" src="{{asset('images/contact_us/Check.png')}}" alt="">
        </div>
        <div>
            <p class="mt-2 text-2xl font-bold text-gray-700">{{ session('success') }}</p>
        </div>
        <div>
            <p class="mt-2 text-gray-700">{{ session('message') }}</p>
            <p class="mt-2 text-gray-700">{{ session('message2') }}</p>
        </div>
    </div>

    <div id="modalOverlay" class="fixed inset-0 z-0 bg-black opacity-80" onclick="closeModal()"></div>
</div>
@endif

<script>
    function closeModal() {
        document.getElementById('successModal').style.display = 'none';
    }
    setTimeout(closeModal, 5000);
</script>

@include('layouts.footer')

@endsection