@section('title', config('app.name', 'Streamline') .' - '. __('Waiting List'))
@section('description', __('Join the waiting list for ') . config('app.name', 'Streamline'))

<x-guest-layout>
    <x-t-section class="bg-slate-200 dark:bg-slate-600">
        <x-t-container
            size="xl"
            border="false"
            class="md:p-0 p-0"
        >
            <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 bg-white dark:bg-slate-950">            
                <div class="p-10 md:p-20 flex flex-col justify-center items-center text-center">
                    <x-t-heading
                        variant="brand"
                        level="1"
                        balance
                    >
                        New Awesome {{ config('app.name', 'Streamline') }} App Coming Soon
                    </x-t-heading>
                    <x-t-text pretty>
                        Join our waiting list today to make sure you're the first to know once our awesome new product is available to purchase.
                    </x-t-text>
                    <x-t-badge
                        variant="brand"
                    >
                        <i class="fa-solid fa-users"></i> {{ __('Join 300+ other users already on the list') }}
                    </x-t-badge>
                </div>
                <div class="p-10 md:p-20 flex flex-col justify-center items-center bg-slate-100 dark:bg-slate-900">

                    @if ($errors->any())
                        <x-t-alert
                            variant="danger"
                            dismissible
                            class="mb-5 w-full"
                        >
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </x-t-alert>
                    @endif

                    @if (session('success'))
                        <x-t-alert
                            variant="success"
                            dismissible
                            class="mb-5 w-full"
                        >
                            {{ session('success') }}
                        </x-t-alert>
                    @endif

                    <form method="POST" action="{{ route('prospects.store') }}" class="w-full">
                        @csrf
                        <x-t-input
                            type="hidden"
                            name="waiting-list"
                        />
                        <x-t-grid cols="1" gap="sm">
                            <x-t-grid cols="2" gap="sm">                            
                                <x-t-input
                                    variant="brand"
                                    type="text"
                                    name="name"
                                    label="Name"
                                    placeholder="{{ __('Enter your name...') }}"
                                    required
                                    :value="old('name')"
                                />
                                <x-t-input
                                    variant="brand"
                                    type="email"
                                    name="email"
                                    label="Email"
                                    placeholder="{{ __('Enter your email...') }}"
                                    required
                                    :value="old('email')"
                                />
                            </x-t-grid>
                            <x-t-button
                                type="submit"
                                variant="brand"
                                prefix="<i class='fa-solid fa-envelope'></i>"
                                full
                            >
                                {{ __('Notify Me') }}
                            </x-t-button>
                        </x-t-grid>
                    </form>
                </div>
            </div>
        </x-t-container>
    </x-t-section>
</x-guest-layout>