@extends("website.layouts.layout")

@section("title")
Contact Us
@endsection

@section("body")
    @include('partials.event')

    <div class="flex flex-col md:flex-row gap-6">
        <div class="flex-1">
            <div class="flex justify-center text-2xl mb-1">
                <i class="fa-solid fa-phone"></i>
            </div>

            <div class="relative flex py-5 items-center">
                <div class="flex-grow border-t-2 border-gray-900"></div>
                <span class="flex-shrink mx-4 ml-4 mr-4 font-semibold text-lg">
                    Contact Details
                </span>
                <div class="flex-grow border-t-2 border-gray-900"></div>
            </div>

            @if ($officeLocations->count() > 0)
                <div class="flex flex-col gap-y-4">
                    @foreach ($officeLocations as $officeLocation)
                        <div class="flex-1">
                            <h1 class="font-semibold text-lg mb-3">{{ $officeLocation->name }}</h1>

                            <table class="w-full">
                                <tbody>
                                <tr>
                                    <td class="w-36">Number</td>
                                    <td>
                                        <a href="tel:{{ $officeLocation->phone }}">{{ $officeLocation->phone }}</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="w-36">Email</td>
                                    <td>
                                        <a href="mailto:{{ $officeLocation->email }}">{{ $officeLocation->email }}</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="w-36">Address</td>
                                    <td>{{ $officeLocation->address }}</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>

        <div class="flex-1">
            <div class="flex justify-center text-2xl mb-1">
                <i class="fa-solid fa-paper-plane"></i>
            </div>

            <div class="relative flex py-5 items-center">
                <div class="flex-grow border-t-2 border-gray-900"></div>
                <span class="flex-shrink mx-4 ml-4 mr-4 font-semibold text-lg">
                    Hear From Us
                </span>
                <div class="flex-grow border-t-2 border-gray-900"></div>
            </div>

            @include('website.partials.contact-form')
        </div>
    </div>
@endsection