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

@section('content')
<section class="pengumuman-detail-hero">
    <div class="container py-5">
        <div class="row align-items-center">
            <div class="col-lg-8">
                <a href="{{ route('pengumuman') }}" class="btn btn-light border mb-4">
                    <i class="fas fa-arrow-left mr-1"></i> Kembali ke Pengumuman
                </a>

                <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>

                <h1 class="pengumuman-detail-title mb-3">
                    {{ $item->judul }}
                </h1>

                <p class="pengumuman-detail-subtitle mb-0">
                    Informasi resmi SILONTAR yang dipublikasikan untuk mendukung layanan dan pelaksanaan kegiatan secara terintegrasi.
                </p>
            </div>

            <div class="col-lg-4 text-center mt-4 mt-lg-0">
                <div class="pengumuman-detail-ornament mx-auto">
                    <i class="fas fa-newspaper"></i>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="pengumuman-detail-section py-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <article class="pengumuman-detail-card">
                    @if($item->gambar)
                        <div class="pengumuman-detail-image-wrapper">
                            <img
                                src="{{ $item->publicImageUrl() }}"
                                alt="{{ $item->judul }}"
                                class="pengumuman-detail-image"
                            >
                        </div>
                    @endif

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

                            @if(!empty($item->link_url))
                                <a href="{{ $item->link_url }}" target="_blank" rel="noopener noreferrer" class="btn btn-info btn-sm mb-2">
                                    <i class="fas fa-external-link-alt mr-1"></i> Buka Link Terkait
                                </a>
                            @endif
                        </div>

                        <div class="pengumuman-content">
                            {!! $item->sanitizedIsi() !!}
                        </div>
                    </div>
                </article>
            </div>
        </div>
    </div>
</section>

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

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

    .pengumuman-detail-subtitle {
        font-size: 1.05rem;
        line-height: 1.9;
        color: #5c6773;
        max-width: 760px;
    }

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

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

    .pengumuman-detail-card {
        background: #fff;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
    }

    .pengumuman-detail-image-wrapper {
        overflow: hidden;
        background: #eef2f7;
    }

    .pengumuman-detail-image {
        width: 100%;
        max-height: 480px;
        object-fit: cover;
        display: block;
    }

    .pengumuman-detail-body {
        padding: 32px 28px;
    }

    .pengumuman-content {
        font-size: 1.05rem;
        line-height: 1.95;
        color: #2d3748;
    }

    .pengumuman-content p {
        margin-bottom: 1rem;
    }

    .pengumuman-content img {
        max-width: 100%;
        height: auto;
        border-radius: 12px;
        margin: 1rem 0;
    }

    .pengumuman-content a {
        color: #007bff;
        text-decoration: none;
        word-break: break-word;
    }

    .pengumuman-content a:hover {
        text-decoration: underline;
    }

    .pengumuman-content ul,
    .pengumuman-content ol {
        padding-left: 1.5rem;
        margin-bottom: 1rem;
    }

    .pengumuman-content blockquote {
        border-left: 4px solid #007bff;
        padding-left: 1rem;
        color: #6c757d;
        margin: 1rem 0;
        font-style: italic;
    }

    .pengumuman-content table {
        width: 100%;
        margin-bottom: 1rem;
        border-collapse: collapse;
        display: block;
        overflow-x: auto;
    }

    .pengumuman-content table,
    .pengumuman-content th,
    .pengumuman-content td {
        border: 1px solid #dee2e6;
    }

    .pengumuman-content th,
    .pengumuman-content td {
        padding: 10px;
        vertical-align: top;
    }

    .pengumuman-content h1,
    .pengumuman-content h2,
    .pengumuman-content h3,
    .pengumuman-content h4,
    .pengumuman-content h5,
    .pengumuman-content h6 {
        margin-top: 1.5rem;
        margin-bottom: .75rem;
        color: #1f2d3d;
        font-weight: 700;
    }

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

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

        .pengumuman-detail-ornament {
            width: 135px;
            height: 135px;
            font-size: 3rem;
        }

        .pengumuman-detail-body {
            padding: 24px 20px;
        }
    }
</style>
@endsection