@extends('layouts.app')

@section('content')
    @php($company = config('site.company'))

    <x-page-hero title="Contact Us" subtitle="Send us a message and we will reply as soon as we can." :breadcrumbs="[['label' => 'Contact']]" />

    <section class="section">
        <div class="container-page grid gap-10 lg:grid-cols-3">
            {{-- Form --}}
            <div class="lg:col-span-2">
                @if ($errors->any())
                    <div role="alert" class="mb-6 rounded-md border border-red-300 bg-red-50 p-4 text-sm text-red-800">
                        Please fix the highlighted fields and submit again.
                    </div>
                @endif

                <form method="POST" action="{{ route('contact.submit') }}" class="grid gap-5 sm:grid-cols-2" novalidate>
                    @csrf

                    {{-- Honeypot: hidden from people, bots tend to fill it. --}}
                    <div class="hidden" aria-hidden="true">
                        <label for="company_website">Leave this field empty</label>
                        <input type="text" id="company_website" name="company_website" tabindex="-1" autocomplete="off">
                    </div>

                    <x-field name="name" label="Name" required autocomplete="name" />
                    <x-field name="email" label="Email" type="email" required autocomplete="email" />
                    <x-field name="phone" label="Phone" type="tel" autocomplete="tel-national" hint="Optional. 10-digit Indian mobile number." />
                    <x-field name="subject" label="Subject" />
                    <x-field class="sm:col-span-2" name="message" label="Message" type="textarea" required />

                    <x-recaptcha class="sm:col-span-2" />

                    <div class="sm:col-span-2">
                        <button type="submit" class="btn-primary">Send message</button>
                        <p class="mt-3 text-xs text-slate-500">
                            By submitting you agree to our <a href="{{ route('privacy-policy') }}" class="underline">Privacy Policy</a>.
                        </p>
                    </div>
                </form>
            </div>

            {{-- Details --}}
            <aside class="space-y-4 self-start rounded-lg border border-slate-200 bg-slate-50 p-6 text-sm">
                <h2 class="text-lg font-semibold">{{ $company['name'] }}</h2>
                <address class="space-y-2 not-italic">
                    <p>Phone:
                        @foreach ($company['phones'] as $phone)
                            <a href="tel:{{ preg_replace('/\s+/', '', $phone) }}" class="text-brand-700 hover:underline">{{ $phone }}</a>@if (! $loop->last), @endif
                        @endforeach
                    </p>
                    <p>Email:
                        @foreach ($company['emails'] as $email)
                            <a href="mailto:{{ $email }}" class="break-all text-brand-700 hover:underline">{{ $email }}</a>@if (! $loop->last), @endif
                        @endforeach
                    </p>
                </address>

                @if (! empty($company['whatsapp']))
                    <a href="https://wa.me/{{ $company['whatsapp'] }}?text={{ rawurlencode('Hello, I would like to know more about your HMIS software.') }}"
                       target="_blank" rel="noopener noreferrer" class="btn-outline w-full justify-center">
                        <x-icon name="whatsapp" class="h-5 w-5 text-[#128C7E]" />Chat on WhatsApp
                    </a>
                @endif
            </aside>
        </div>
    </section>
@endsection