@extends('layouts.main-app')

@section('title', 'Inquiry Form')

@section('content')

    @include('layouts.navbar')
    <div class="relative h-[20rem]">
        <div class="relative z-50 py-20 text-center">
            <h1 class="text-4xl font-bold text-black">INQUIRY FORM </h1>
        </div>
    </div>

    <div class="container max-w-screen-lg px-4 mx-auto py-14">
        <div class="grid grid-cols-1">
            <div class="space-y-8">
                <h1 class="text-xl font-medium">Kindly fill out the inquiry form below.</h1>
                <form action="{{ route('inquiries.store') }}" method="POST">
                    @csrf
                    <div class="space-y-4">
                        <div class="space-y-2">
                            <label for="full_name">Full Name</label>
                            <input type="text" id="full_name" name="full_name" class="w-full p-2 border border-black"
                                required>
                        </div>
                        <div class="space-y-2">
                            <label for="email">Email</label>
                            <input type="email" id="email" name="email" class="w-full p-2 border border-black"
                                required>
                        </div>
                        <div class="space-y-2">
                            <label for="contact_number">Phone Number</label>
                            <input type="text" id="contact_number" name="contact_number"
                                class="w-full p-2 border border-black" required>
                        </div>
                        <div>
                            <label for="message">*Message</label>
                            <textarea id="message" name="message" rows="8" class="w-full p-2 border border-black" required></textarea>
                        </div>
                        <div>
                            <button type="submit" class="rounded-full text-white bg-[#0f1d18] px-20 py-2">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>


    @include('layouts.footer')


@endsection