@extends('layouts.app')
@section('title', 'KDHC | Officials Registration')
@section('content')
    <div
        class="container min-h-screen min-vh-100 container d-flex flex-column bg-light justify-content-center align-items-center">
        <div class="row justify-content-center">
            <div class="col-md-7">
                <div class="card">
                    <div
                        class="card-header d-flex align-items-center flex-column border-top border-info @if (session()->has('status')) d-none @endif">
                        <a href="{{ route('welcome') }}" class="nav-link d-none">
                            <img src="{{ asset('assets/img/logo.png') }}" alt="Logo" height="60"
                                class="rounded-circle -mb-2"></a>
                        <p class="text-center">
                            Welcome to the Kenya Diaspora Homecoming Convention officials registration! Your
                            participation is invaluable in reconnecting and fostering stronger bonds. Kindly complete
                            the
                            form below. <span class="fw-bold ">We look
                                forward to
                                celebrating this homecoming with you!</span></p>
                    </div>

                    <div class="card-body">
                        @if (session()->has('status'))
                            <div class="alert alert-success" role="alert">
                                Thank you <span class="fw-bold">{{ session('official_name') }}</span>, for registering for
                                the Kenya Diaspora Homecoming
                                Convention! Your
                                participation is greatly appreciated. Get ready to join us in a celebration of
                                culture,
                                connections, and opportunities. We're excited to have you with us for this incredible
                                event!
                            </div>
                            <a href="{{ route('welcome') }}" class="btn rounded-1 btn-success">Take me home</a>
                        @endif

                        <form class="d-inline @if (session()->has('status')) d-none @endif" method="POST"
                            action="{{ route('officials.store') }}">
                            @csrf
                            <div class="row g-3">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="name">Your name</label>
                                        <input type="text"
                                            class="form-control rounded-1 border-info @error('name') border-danger is-invalid @enderror"
                                            name="name" placeholder="Enter your name" value="{{ old('name') }}">
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="email">Your email</label>
                                        <input type="text"
                                            class="form-control rounded-1 border-info @error('email') border-danger is-invalid @enderror"
                                            name="email" placeholder="Enter your email" value="{{ old('email') }}">
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="contact">Phone number</label>
                                        <input type="text"
                                            class="form-control rounded-1 border-info @error('contact') border-danger is-invalid @enderror"
                                            name="contact" placeholder="Enter your contact" value="{{ old('contact') }}">
                                    </div>
                                </div>
                                <div class="col-12">
                                    <button class="btn btn-info rounded-1 ">Submit</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection