@extends('master')
@section('content')
    <main class="p-6 flex-1 overflow-hidden">
        <header>
            <h2 class="text-xl font-bold text-gray-900">
                {{ __('Announcements') }}
            </h2>
            <p class="mt-1 text-md text-gray-600">
                {{ __('View the latest announcements') }}
            </p>
        </header>

        <section class="mt-2 bg-white shadow sm:rounded-lg p-4 mb-6">
            <form action="" method="get" class="w-full flex flex-row gap-2 text-xs mb-6">
                <input type="search" class="w-full rounded " name="search" value="{{ request('search') }}" placeholder="Search announcements...">
                <button type="submit" class="bg-main-dark text-main-light px-4 py-2 rounded">Search</button>
            </form>
            @forelse ($announcements as $announcement)
                <div class="border-l-4 border-main-dark pl-4 mb-4">
                    <h3 class="text-md font-bold">{{ $announcement->title }}</h3>
                    <p class="text-md text-gray-700">{{ $announcement->description }}</p>
                    <p class="text-xs text-gray-700 italic">{{ $announcement->created_at->diffForHumans() }} | {{ $announcement->created_at->format('M. d, Y') }}</p>
                </div>
            @empty
                <p>No announcements available.</p>
            @endforelse
            <div class="mt-4">
                {{ $announcements->appends(['search' => request('search')])->links('pagination::tailwind') }}
            </div>
        </section>

        <header>
            <h2 class="text-xl font-bold text-gray-900">
                {{ __('Services') }}
            </h2>
            <p class="mt-1 text-md text-gray-600">
                {{ __('View available services') }}
            </p>
        </header>

        <section class="mt-2 bg-white shadow sm:rounded-lg p-4 mb-6">
            <ul class="list-disc pl-5 space-y-4">
                @forelse ($services as $service)
                    <li>
                        <a href="{{ route('certificate-request.index') }}">
                            <h3 class="text-md font-bold">{{ $service->name }}</h3>
                            <p class="text-md text-gray-700">{{ $service->description }}</p>
                        </a>
                    </li>
                @empty
                    <p>No services available.</p>
                @endforelse
            </ul>
        </section>
    </main>
@endsection