@extends('layouts.app-admin')

@section('content')
    <div class="page-header d-print-none">
        <div class="container-xl">
            <div class="row g-2 align-items-center">
                <div class="col">
                    <h2 class="page-title">
                        Announcement Details ℹ️
                    </h2>
                    <div class="text-muted mt-1">View the full details of this announcement.</div>
                </div>
                <div class="col-auto ms-auto d-print-none">
                    <div class="btn-list">

                        <a href="{{ route('admin.announcements.index') }}" class="btn btn-primary d-none d-sm-inline-block">

                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24"
                                viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                <path d="M5 12l14 0" />
                                <path d="M5 12l6 6" />
                                <path d="M5 12l6 -6" />
                            </svg>
                            Back to Announcements
                        </a>
                        <a href="{{ route('admin.announcements.index') }}" class="btn btn-primary d-sm-none btn-icon">

                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24"
                                viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                <path d="M5 12l14 0" />
                                <path d="M5 12l6 6" />
                                <path d="M5 12l6 -6" />
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="page-body">
        <div class="container-xl">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Announcement Information</h3>
                </div>
                <div class="card-body">

                    <div class="mb-3">
                        <label class="form-label fw-bold">Title:</label>
                        <p>{{ $announcement->title }}</p>
                    </div>


                    <div class="mb-3">
                        <label class="form-label fw-bold">Content:</label>
                        <p>{{ $announcement->content }}</p>
                    </div>


                    <div class="mb-3">
                        <label class="form-label fw-bold">Status:</label>
                        <p>{{ ucfirst($announcement->status) }}</p>
                    </div>


                    @if ($announcement->picture)
                        <div class="mb-3">
                            <label class="form-label fw-bold">Picture:</label><br>

                            <img src="{{ asset('storage/' . $announcement->picture) }}" alt="Announcement Picture"
                                class="img-fluid rounded" style="max-width: 400px;">
                        </div>
                    @else
                        <div class="mb-3">
                            <label class="form-label fw-bold">Picture:</label>
                            <p>No picture uploaded.</p>
                        </div>
                    @endif


                    <div class="mb-3">
                        <label class="form-label fw-bold">Published At:</label>
                        <p>{{ optional($announcement->published_at)->format('d F Y') ?? 'Not set' }}</p>
                    </div>


                    <div class="mb-3">
                        <label class="form-label fw-bold">Expired At:</label>
                        <p>{{ optional($announcement->expired_at)->format('d F Y') ?? 'Not set' }}</p>
                    </div>


                    <div class="mb-3 text-muted">
                        <small>Created: {{ $announcement->created_at->format('d M Y, H:i:s') }}</small><br>
                        <small>Last Updated: {{ $announcement->updated_at->format('d M Y, H:i:s') }}</small>
                    </div>
                </div>
                <div class="card-footer text-end">

                    <a href="{{ route('admin.announcements.edit', $announcement->id) }}" class="btn btn-primary">
                        Edit Announcement
                    </a>
                </div>
            </div>
        </div>
    </div>
@endsection