@extends('layouts.public')

@section('title', 'Contact — '.setting('university_name'))
@section('description', 'Contact King Ceasor University, Plot 32 Ggaba Road, Bunga Hill, Kampala.')

@section('content')

    <section class="border-b border-slate-200 bg-canvas">
        <div class="container-page py-12">
            <x-breadcrumb :items="[['label' => 'Home', 'url' => route('home')], ['label' => 'Contact']]" />
            <h1 class="mt-4 font-display text-4xl tracking-tight text-slate-900 sm:text-5xl">Contact us</h1>
            <p class="mt-3 max-w-2xl text-lg text-slate-600">
                We are happy to answer questions about programmes, admissions and campus life.
            </p>
        </div>
    </section>

    <div class="container-page py-14">
        <div class="grid gap-12 lg:grid-cols-3">

            <div class="lg:col-span-2">
                @if (session('status'))
                    <x-alert type="success" class="mb-6">{{ session('status') }}</x-alert>
                @endif

                @if ($errors->any())
                    <x-alert type="danger" title="Please check the form" class="mb-6">
                        <ul class="mt-1 list-disc space-y-0.5 pl-4">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </x-alert>
                @endif

                <x-card>
                    <h2 class="text-lg font-semibold text-slate-900">Send us a message</h2>

                    <form method="POST" action="{{ route('contact.store') }}" class="mt-6 space-y-5">
                        @csrf

                        <div class="grid gap-5 sm:grid-cols-2">
                            <x-input name="name" label="Full name" required :value="old('name')" autocomplete="name" />
                            <x-input name="email" type="email" label="Email address" required :value="old('email')" autocomplete="email" />
                        </div>

                        <div class="grid gap-5 sm:grid-cols-2">
                            <x-input name="phone" type="tel" label="Phone number" :value="old('phone')"
                                     hint="Optional" autocomplete="tel" placeholder="0771 234 567" />
                            <x-input name="subject" label="Subject" required :value="old('subject')" />
                        </div>

                        <x-textarea name="message" label="Message" required rows="6"
                                    hint="Tell us how we can help.">{{ old('message') }}</x-textarea>

                        <x-button type="submit" size="lg">Send message</x-button>
                    </form>
                </x-card>
            </div>

            <aside class="space-y-6">
                <x-card>
                    <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-900">Main campus</h2>
                    <address class="mt-4 space-y-4 text-sm not-italic text-slate-600">
                        <p>
                            {{ setting('university_address') }}<br>
                            {{ setting('university_city') }}, {{ setting('university_country') }}<br>
                            {{ setting('university_postal') }}
                        </p>

                        <p>
                            <span class="block text-xs uppercase tracking-wider text-slate-400">Telephone</span>
                            <a href="tel:{{ preg_replace('/\s+/', '', setting('university_phone')) }}" class="text-brand-700 hover:underline">{{ setting('university_phone') }}</a><br>
                            <a href="tel:{{ preg_replace('/\s+/', '', setting('university_phone_alt')) }}" class="text-brand-700 hover:underline">{{ setting('university_phone_alt') }}</a>
                        </p>

                        <p>
                            <span class="block text-xs uppercase tracking-wider text-slate-400">Email</span>
                            <a href="mailto:{{ setting('university_email') }}" class="text-brand-700 hover:underline">{{ setting('university_email') }}</a><br>
                            <a href="mailto:{{ setting('university_admissions_email') }}" class="text-brand-700 hover:underline">{{ setting('university_admissions_email') }}</a>
                        </p>
                    </address>
                </x-card>

                <x-card>
                    <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-900">Our campuses</h2>
                    <ul class="mt-4 space-y-3 text-sm text-slate-600">
                        @foreach ([
                            'Bunga Campus' => 'Ggaba Road, Makindye Division, Kampala',
                            'Mulago Campus' => 'Adjacent to Mulago National Referral Hospital',
                            'Namugongo Campus' => 'Kira Town, Wakiso District',
                            'Kisoro Campus' => 'South-western Uganda',
                        ] as $name => $detail)
                            <li>
                                <span class="block font-medium text-slate-800">{{ $name }}</span>
                                <span class="text-xs">{{ $detail }}</span>
                            </li>
                        @endforeach
                    </ul>
                </x-card>

                <x-card class="border-brand-200 bg-brand-50">
                    <h2 class="text-base font-semibold text-slate-900">Applying to KCU?</h2>
                    <p class="mt-2 text-sm text-slate-600">Most admissions questions are answered in our FAQs.</p>
                    <x-button :href="route('faqs')" variant="outline" class="mt-4 w-full">Read the FAQs</x-button>
                </x-card>
            </aside>
        </div>
    </div>

@endsection
