@extends('layouts.frontend')

@section('content')
    @include('frontend.partials.inner-hero', [
        'title' => 'Tenders',
        'eyebrow' => 'Official Notices',
        'summary' => 'Official tender notices, dates, status updates and downloadable documents.',
        'image' => $heroImage,
        'breadcrumbs' => ['Tenders' => null],
    ])

    <section class="content-container my-space-xl py-space-md">
        <div class="bg-surface-container-lowest rounded-2xl border border-surface-container shadow-sm overflow-hidden d-none d-md-block">
            <table class="table mb-0 align-middle">
                <thead class="bg-surface-container-low">
                    <tr>
                        <th>Title</th>
                        <th>Date</th>
                        <th>Last Date</th>
                        <th>Status</th>
                        <th class="text-end">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($tenders as $tender)
                        <tr>
                            <td class="font-semibold">{{ $tender['title'] }}</td>
                            <td>{{ $tender['date'] }}</td>
                            <td>{{ $tender['lastDate'] }}</td>
                            <td><span class="px-2 py-1 rounded text-xs {{ $tender['status'] === 'Open' ? 'bg-green-100 text-green-800' : 'bg-surface-container text-outline' }}">{{ $tender['status'] }}</span></td>
                            <td class="text-end">
                                <a class="px-3 py-2 bg-surface-container rounded text-xs font-semibold" href="#">View</a>
                                <a class="px-3 py-2 bg-primary-container text-on-primary rounded text-xs font-semibold" href="{{ $tender['pdf'] }}">Download PDF</a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <div class="d-md-none">
            @foreach ($tenders as $tender)
                <div class="bg-surface-container-lowest rounded-xl p-space-md border border-surface-container shadow-sm mb-space-md">
                    <span class="px-2 py-1 rounded text-xs {{ $tender['status'] === 'Open' ? 'bg-green-100 text-green-800' : 'bg-surface-container text-outline' }}">{{ $tender['status'] }}</span>
                    <h3 class="font-title-lg text-title-lg text-on-surface font-semibold mt-space-sm">{{ $tender['title'] }}</h3>
                    <p class="font-body-sm text-body-sm text-on-surface-variant mb-space-sm">Published: {{ $tender['date'] }} | Last Date: {{ $tender['lastDate'] }}</p>
                    <div class="d-flex gap-2">
                        <a class="flex-1 px-3 py-2 bg-surface-container rounded text-xs font-semibold text-center" href="#">View</a>
                        <a class="flex-1 px-3 py-2 bg-primary-container text-on-primary rounded text-xs font-semibold text-center" href="{{ $tender['pdf'] }}">Download PDF</a>
                    </div>
                </div>
            @endforeach
        </div>
    </section>
@endsection