@extends('layouts.app')

@section('title', __('app.demo.title'))
@section('meta_description', __('app.demo.meta_description'))

@section('content')
    <section class="bg-brand-deep py-16 text-white sm:py-20">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            @include('partials.breadcrumbs', [
                'crumbs' => [
                    ['name' => __('app.nav.home'), 'url' => lroute('home')],
                    ['name' => __('app.nav.book_demo')],
                ],
                'dark' => true,
                'navClass' => 'mb-10',
            ])
            <div class="mx-auto max-w-2xl">
                <h1 class="text-3xl font-extrabold sm:text-4xl">{{ __('app.demo.h1') }}</h1>
                <p class="mt-4 text-white/80">{{ __('app.demo.lead') }}</p>

                <div class="mt-10 rounded-2xl bg-white p-6 text-ink shadow-xl sm:p-8">
                    @if (session('status'))
                        <div class="rounded-xl bg-leaf/15 p-6 text-center" role="status">
                            <p class="font-semibold text-brand-deep">{{ session('status') }}</p>
                            <a href="{{ lroute('home') }}" class="mt-4 inline-block text-sm font-semibold text-brand hover:underline">{{ __('app.demo.back_home') }}</a>
                        </div>
                    @else
                        <form method="POST" action="{{ lroute('demo.store') }}" class="space-y-4">
                            @csrf
                            <input type="text" name="website" tabindex="-1" autocomplete="off" class="hidden" aria-hidden="true">

                            <div>
                                <label for="name" class="mb-1 block text-sm font-medium">{{ __('app.demo.fields.name') }} *</label>
                                <input id="name" name="name" type="text" value="{{ old('name') }}" required autocomplete="name"
                                       class="w-full rounded-lg border border-black/15 px-3 py-2.5 text-sm outline-none transition focus:border-brand focus:ring-2 focus:ring-brand/30">
                                @error('name')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                            </div>

                            <div>
                                <label for="company_name" class="mb-1 block text-sm font-medium">{{ __('app.demo.fields.company') }}</label>
                                <input id="company_name" name="company_name" type="text" value="{{ old('company_name') }}" autocomplete="organization"
                                       class="w-full rounded-lg border border-black/15 px-3 py-2.5 text-sm outline-none transition focus:border-brand focus:ring-2 focus:ring-brand/30">
                                @error('company_name')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                            </div>

                            <div class="grid gap-4 sm:grid-cols-2">
                                <div>
                                    <label for="email" class="mb-1 block text-sm font-medium">{{ __('app.demo.fields.email') }} *</label>
                                    <input id="email" name="email" type="email" value="{{ old('email') }}" required autocomplete="email"
                                           class="w-full rounded-lg border border-black/15 px-3 py-2.5 text-sm outline-none transition focus:border-brand focus:ring-2 focus:ring-brand/30">
                                    @error('email')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                                </div>
                                <div>
                                    <label for="phone" class="mb-1 block text-sm font-medium">{{ __('app.demo.fields.phone') }}</label>
                                    <input id="phone" name="phone" type="tel" value="{{ old('phone') }}" autocomplete="tel" dir="ltr"
                                           class="w-full rounded-lg border border-black/15 px-3 py-2.5 text-sm outline-none transition focus:border-brand focus:ring-2 focus:ring-brand/30">
                                    @error('phone')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                                </div>
                            </div>

                            <div class="grid gap-4 sm:grid-cols-2">
                                <div>
                                    <label for="country" class="mb-1 block text-sm font-medium">{{ __('app.demo.fields.country') }}</label>
                                    <select id="country" name="country" class="w-full rounded-lg border border-black/15 px-3 py-2.5 text-sm outline-none transition focus:border-brand focus:ring-2 focus:ring-brand/30">
                                        <option value="">{{ __('app.demo.fields.choose') }}</option>
                                        @foreach (__('app.demo.countries') as $countryOption)
                                            <option value="{{ $countryOption }}" @selected(old('country') === $countryOption)>{{ $countryOption }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div>
                                    <label for="branches_count" class="mb-1 block text-sm font-medium">{{ __('app.demo.fields.branches') }}</label>
                                    <input id="branches_count" name="branches_count" type="number" min="1" max="10000" value="{{ old('branches_count') }}"
                                           class="w-full rounded-lg border border-black/15 px-3 py-2.5 text-sm outline-none transition focus:border-brand focus:ring-2 focus:ring-brand/30">
                                    @error('branches_count')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                                </div>
                            </div>

                            <div>
                                <label for="pos_provider" class="mb-1 block text-sm font-medium">{{ __('app.demo.fields.pos') }}</label>
                                <input id="pos_provider" name="pos_provider" type="text" value="{{ old('pos_provider') }}"
                                       class="w-full rounded-lg border border-black/15 px-3 py-2.5 text-sm outline-none transition focus:border-brand focus:ring-2 focus:ring-brand/30">
                            </div>

                            <label class="flex items-start gap-2 text-sm text-ink-soft">
                                <input type="checkbox" name="consent" value="1" required @checked(old('consent')) class="mt-0.5 h-4 w-4 rounded border-black/20 text-brand focus:ring-brand/40">
                                <span>{{ __('app.demo.consent') }}</span>
                            </label>
                            @error('consent')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror

                            <button type="submit" class="w-full rounded-lg bg-brand py-2.5 text-sm font-semibold text-white transition hover:bg-brand-deep">
                                {{ __('app.demo.submit') }}
                            </button>
                        </form>
                    @endif
                </div>
            </div>
        </div>
    </section>
@endsection