@extends('layouts.app', ['title' => 'Pengumuman - SILONTAR'])

@section('content')
<section class="pengumuman-hero">
    <div class="container py-5">
        <div class="row align-items-center">
            <div class="col-lg-7 mb-4 mb-lg-0">
                <span class="badge badge-primary px-3 py-2 mb-3">Portal Informasi SILONTAR</span>
                <h1 class="pengumuman-hero-title mb-3">
                    Pengumuman dan Informasi Terbaru
                </h1>
                <p class="pengumuman-hero-text mb-0">
                    Temukan informasi resmi, agenda penting, pembaruan kegiatan,
                    dan kebijakan terbaru seputar layanan SILONTAR dalam satu halaman.
                </p>
            </div>

            <div class="col-lg-5 text-center">
                <div class="pengumuman-hero-ornament mx-auto">
                    <i class="fas fa-bullhorn"></i>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="pengumuman-list-section py-5">
    <div class="container">
        <div class="row">
            @forelse($pengumuman as $item)
                <div class="col-lg-4 col-md-6 mb-4">
                    <article class="pengumuman-card h-100">
                        <div class="pengumuman-card-media">
                            @if($item->gambar)
                                <img
                                    src="{{ $item->publicImageUrl() }}"
                                    alt="{{ $item->judul }}"
                                    class="pengumuman-card-image"
                                >
                            @else
                                <div class="pengumuman-card-placeholder">
                                    <i class="fas fa-image fa-2x mb-2"></i>
                                    <div>Tidak ada gambar</div>
                                </div>
                            @endif
                        </div>

                        <div class="pengumuman-card-body">
                            <div class="mb-3">
                                <span class="badge badge-primary px-3 py-2">
                                    <i class="far fa-calendar-alt mr-1"></i>
                                    {{ \Carbon\Carbon::parse($item->tanggal)->translatedFormat('d F Y') }}
                                </span>
                            </div>

                            <h5 class="pengumuman-card-title">
                                {{ $item->judul }}
                            </h5>

                            <p class="pengumuman-card-text">
                                {{ \Illuminate\Support\Str::limit(strip_tags($item->isi), 140) }}
                            </p>

                            <div class="mb-3">
                                @if(!empty($item->file_pdf))
                                    <span class="badge badge-danger mr-1 mb-1">
                                        <i class="fas fa-file-pdf mr-1"></i> PDF
                                    </span>
                                @endif

                                @if(!empty($item->link_url))
                                    <span class="badge badge-info mb-1">
                                        <i class="fas fa-external-link-alt mr-1"></i> Link
                                    </span>
                                @endif
                            </div>

                            <div class="pengumuman-card-actions">
                                <a href="{{ route('pengumuman.show', $item->id) }}" class="btn btn-primary btn-sm mr-2 mb-2">
                                    Baca Selengkapnya
                                </a>

                                @if(!empty($item->file_pdf))
                                    <a href="{{ $item->publicPdfUrl() }}" target="_blank" rel="noopener noreferrer" class="btn btn-outline-danger btn-sm mb-2">
                                        <i class="fas fa-file-pdf mr-1"></i> PDF
                                    </a>
                                @endif

                                @if(!empty($item->link_url))
                                    <a href="{{ $item->link_url }}" target="_blank" rel="noopener noreferrer" class="btn btn-outline-info btn-sm mb-2">
                                        <i class="fas fa-external-link-alt mr-1"></i> Link
                                    </a>
                                @endif
                            </div>
                        </div>
                    </article>
                </div>
            @empty
                <div class="col-12">
                    <div class="pengumuman-empty text-center">
                        <div class="pengumuman-empty-icon mb-3">
                            <i class="fas fa-bullhorn"></i>
                        </div>
                        <h4 class="mb-2">Belum Ada Pengumuman</h4>
                        <p class="text-muted mb-0">
                            Saat ini belum ada pengumuman yang dipublikasikan.
                        </p>
                    </div>
                </div>
            @endforelse
        </div>

        @if(method_exists($pengumuman, 'links'))
            <div class="pagination-shell mt-4">
                {{ $pengumuman->links() }}
            </div>
        @endif
    </div>
</section>

<style>
    .pengumuman-hero {
        background: linear-gradient(135deg, #eef5ff 0%, #f8fbff 100%);
        border-bottom: 1px solid rgba(13, 110, 253, 0.08);
    }

    .pengumuman-hero-title {
        font-size: 2.4rem;
        font-weight: 800;
        line-height: 1.25;
        color: #1f2d3d;
    }

    .pengumuman-hero-text {
        font-size: 1.05rem;
        line-height: 1.9;
        color: #5c6773;
        max-width: 680px;
    }

    .pengumuman-hero-ornament {
        width: 180px;
        height: 180px;
        border-radius: 32px;
        background: linear-gradient(135deg, #0d6efd, #3a86ff);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 4rem;
        box-shadow: 0 18px 40px rgba(13, 110, 253, 0.25);
    }

    .pengumuman-list-section {
        background: #f5f8fc;
    }

    .pengumuman-card {
        background: #fff;
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
        transition: all .25s ease;
        height: 100%;
    }

    .pengumuman-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.10);
    }

    .pengumuman-card-media {
        overflow: hidden;
    }

    .pengumuman-card-image {
        width: 100%;
        height: 220px;
        object-fit: cover;
        transition: transform .3s ease;
    }

    .pengumuman-card:hover .pengumuman-card-image {
        transform: scale(1.03);
    }

    .pengumuman-card-placeholder {
        height: 220px;
        background: #eef2f7;
        color: #8a94a6;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .pengumuman-card-body {
        padding: 24px;
        display: flex;
        flex-direction: column;
        height: calc(100% - 220px);
    }

    .pengumuman-card-title {
        font-weight: 700;
        color: #1f2d3d;
        line-height: 1.5;
        margin-bottom: 14px;
        min-height: 52px;
    }

    .pengumuman-card-text {
        color: #6c757d;
        line-height: 1.8;
        margin-bottom: 18px;
        flex-grow: 1;
    }

    .pengumuman-card-actions .btn {
        border-radius: 10px;
        font-weight: 600;
    }

    .pengumuman-empty {
        background: #fff;
        border-radius: 18px;
        padding: 50px 20px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    }

    .pengumuman-empty-icon {
        width: 84px;
        height: 84px;
        border-radius: 50%;
        margin: 0 auto;
        background: rgba(13, 110, 253, 0.08);
        color: #0d6efd;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
    }

    @media (max-width: 991.98px) {
        .pengumuman-hero-title {
            font-size: 2rem;
        }

        .pengumuman-hero-ornament {
            width: 140px;
            height: 140px;
            font-size: 3rem;
        }
    }
</style>
@endsection