@extends('layouts.app')

@section('title', 'Available Forms')
@section('heading', 'Available Forms')

@section('content')
@include('documents.top-submenu')
    <x-card>
        @if(session('success'))
            <div class="mb-4 rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm text-emerald-800">{{ session('success') }}</div>
        @endif

        <p class="mb-6 text-sm text-slate-600">Complete published HR forms assigned to your organization.</p>

        <div class="grid gap-4 sm:grid-cols-2">
            @forelse($forms as $form)
                <div class="rounded-xl border border-slate-200 p-5">
                    <h3 class="text-base font-semibold text-slate-900">{{ $form->name }}</h3>
                    @if($form->description)
                        <p class="mt-1 text-sm text-slate-500">{{ $form->description }}</p>
                    @endif
                    <a href="{{ route('forms.fill', $form) }}" class="mt-4 inline-block rounded-lg bg-primary px-3 py-1.5 text-sm font-medium text-white">Fill form</a>
                </div>
            @empty
                <p class="text-sm text-slate-500">No published forms right now.</p>
            @endforelse
        </div>

        @if($mySubmissions->isNotEmpty())
            <div class="mt-8 border-t border-slate-200 pt-6">
                <h3 class="mb-3 text-sm font-semibold text-slate-800">Your recent submissions</h3>
                <ul class="space-y-2 text-sm text-slate-600">
                    @foreach($mySubmissions as $submission)
                        <li>{{ $submission->form?->name }} — {{ $submission->created_at?->format('d M Y H:i') }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
    </x-card>
@endsection