@extends('frontend-v3.pages.layout')

@section('page')
    @include('frontend-v3.pages.partials.styles')

    <section class="v3-inner-hero">
        <div class="container">
            <div class="v3-eyebrow">Public Documents</div>
            <h1 class="v3-title">Tenders and Notices</h1>
            <p class="v3-summary">Published tenders and notices with publication dates, closing dates and downloadable documents.</p>
        </div>
    </section>

    <section class="v3-section">
        <div class="container">
            @php
                $documentFilters = [
                    'all' => 'All',
                    'tender' => 'Tenders',
                    'notice' => 'Notifications',
                ];
            @endphp
            <nav class="tender-filter-tabs mb-4" aria-label="Filter tenders and notifications">
                @foreach ($documentFilters as $filterKey => $filterLabel)
                    <a class="tender-filter-tab {{ $activeFilter === $filterKey ? 'is-active' : '' }}"
                        href="{{ route('frontend-v3.tenders.index', ['filter' => $filterKey]) }}"
                        @if ($activeFilter === $filterKey) aria-current="page" @endif>
                        <span>{{ $filterLabel }}</span>
                        <span class="tender-filter-count">{{ $counts[$filterKey] }}</span>
                    </a>
                @endforeach
            </nav>

            <div class="v3-form-panel overflow-hidden">
                <div class="table-responsive">
                    <table class="table align-middle mb-0">
                        <thead>
                            <tr>
                                <th>Title</th>
                                <th>Type</th>
                                <th>Date</th>
                                <th>Submission Deadline</th>
                                <th class="text-end">PDF</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($records as $record)
                                <tr>
                                    <td>
                                        @if ($record->file)
                                            <strong><a class="tender-document-title" href="{{ $fileUrl($record->file) }}" target="_blank" rel="noopener">{{ $localized($record, 'title') }}</a></strong>
                                        @else
                                            <strong>{{ $localized($record, 'title') }}</strong>
                                        @endif
                                        <div class="small v3-muted">{{ str(strip_tags((string) $localized($record, 'description')))->limit(90) }}</div>
                                    </td>
                                    <td>{{ ucfirst($record->type) }}</td>
                                    <td>{{ $record->published_at?->format('d M Y') ?: $record->created_at?->format('d M Y') }}</td>
                                    <td>{{ $record->last_date?->format('d M Y') ?: '-' }}</td>
                                    <td class="text-end">
                                        @if ($record->file)
                                            <a class="btn v3-btn px-3" href="{{ $fileUrl($record->file) }}" target="_blank" rel="noopener">Download</a>
                                        @else
                                            <span class="v3-muted">Not uploaded</span>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr><td class="text-center v3-muted py-5" colspan="5">
                                    @if ($activeFilter === 'tender')
                                        No tenders are published yet.
                                    @elseif ($activeFilter === 'notice')
                                        No notifications are published yet.
                                    @else
                                        No tenders or notifications are published yet.
                                    @endif
                                </td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="mt-5">{{ $records->links() }}</div>
        </div>
    </section>

    <style>
        .tender-filter-tabs {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            padding: 7px;
            border: 1px solid rgba(118, 14, 29, .1);
            border-radius: 14px;
            background: rgba(255, 253, 249, .72);
        }

        .tender-filter-tab {
            display: inline-flex;
            min-height: 42px;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 0 16px;
            border: 1px solid transparent;
            border-radius: 10px;
            color: #67584f;
            font-size: 13px;
            font-weight: 750;
            text-decoration: none;
            transition: color .18s ease, background .18s ease, border-color .18s ease;
        }

        .tender-filter-tab:hover { border-color: rgba(118, 14, 29, .14); color: var(--maroon); }
        .tender-filter-tab.is-active { border-color: rgba(118, 14, 29, .12); background: var(--maroon); color: #fffaf1; }

        .tender-filter-count {
            display: inline-grid;
            min-width: 22px;
            height: 22px;
            padding: 0 5px;
            place-items: center;
            border-radius: 99px;
            background: rgba(118, 14, 29, .08);
            color: inherit;
            font-size: 10px;
            font-weight: 800;
        }

        .tender-filter-tab.is-active .tender-filter-count { background: rgba(255, 255, 255, .18); }
        .tender-document-title { color: inherit; text-decoration: none; }
        .tender-document-title:hover { color: var(--maroon); text-decoration: underline; }
    </style>
@endsection