@extends('layouts.admin')

@section('content')

<h2 style="margin-bottom:20px;"></h2>Pengumuman</h2>

<div class="card" style="margin-bottom:25px;">

<form method="POST" action="/admin/announcements/store">
@csrf

<label>Judul</label>
<input type="text" name="title" placeholder="Masukkan judul disini" required>

<br><br>

<label>Pesan</label>
<textarea name="message" rows="5" placeholder="Ketik pengumuman disini..." required></textarea>

<br><br>

<button class="btn-green">Publikasi Pengumuman</button>

</form>

</div>


<h3 style="margin-bottom:15px;">Pengumuman Terbaru</h3>

@foreach($announcements as $announcement)

<div class="card announcement-box" style="
    position:relative;
    padding:40px 60px;
    min-height:260px;
">

<!-- TOP RIGHT BUTTONS -->
<div style="position:absolute; top:18px; right:18px; display:flex; gap:8px;">

<a href="/admin/announcement/{{ $announcement->id }}/edit"
style="
background:#16a34a;
color:white;
padding:7px 14px;
border-radius:8px;
text-decoration:none;
font-size:13px;
font-weight:600;
">
Edit
</a>

<a href="/admin/announcement/{{ $announcement->id }}/delete"
onclick="return confirm('Delete this announcement?')"
style="
background:#dc2626;
color:white;
padding:7px 14px;
border-radius:8px;
text-decoration:none;
font-size:13px;
font-weight:600;
">
Delete
</a>

</div>

<!-- HEADER -->
<div style="
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:30px;
">

    <!-- LEFT -->
    <span class="announce-badge">
        Pengumuman
    </span>

    <!-- RIGHT -->
    <div style="
        text-align:right;
        padding-right:120px;
    ">

        <div style="
            color:gray;
            font-size:14px;
            margin-top:8px;
        ">
            {{ $announcement->created_at->format('d M Y') }}
        </div>

    </div>

</div>

<!-- CONTENT -->
<div>

    <h2 style="
        text-align:center;
        margin-bottom:40px;
        font-size:24px;
    ">
        {{ $announcement->title }}
    </h2>

    <div style="
        max-width:850px;
        margin:auto;
        text-align:left;
    ">

        <p style="
            white-space: pre-line;
            line-height:2.3;
            font-size:22px;
            font-weight:600;
        ">
            {{ $announcement->message }}
        </p>

    </div>

</div>


</div>

@endforeach

@endsection