{% include 'admin/partials/header.html' %}
{% include 'admin/partials/sidebar.html' %}
<div class="acp-page-head utility-page-head">
  <div>
    <span class="eyebrow">COMMUNICATION</span>
    <h1>Announcements</h1>
    <p>Create scheduled board-wide notices shown above public pages.</p>
  </div>
  <button class="btn primary" type="button" data-acp-disclosure="announcement-create">+ New announcement</button>
</div>

<div class="admin-stat-grid compact utility-stat-grid">
  <article><span>Total notices</span><strong>{{ count($announcements) }}</strong></article>
  <article><span>Enabled</span><strong>{{ count(array_filter($announcements, fn($a) => !empty($a['enabled']))) }}</strong></article>
  <article><span>Scheduled</span><strong>{{ count(array_filter($announcements, fn($a) => !empty($a['starts_at']))) }}</strong></article>
  <article><span>Expiring</span><strong>{{ count(array_filter($announcements, fn($a) => !empty($a['ends_at']))) }}</strong></article>
</div>

<section id="announcement-create" class="dash-card utility-create-card" hidden>
  <div class="dash-card-head">
    <div><h2>Create announcement</h2><p>Set an optional display window and visual style.</p></div>
    <button class="icon-btn utility-close" type="button" data-acp-disclosure-close="announcement-create" aria-label="Close">×</button>
  </div>
  <form method="post" action="{{ $baseUrl }}/admin/announcements/save" class="admin-form-grid utility-form-grid">
    <input type="hidden" name="_token" value="{{ $csrfToken }}">
    <label><span>Title</span><input class="input" name="title" maxlength="180" required></label>
    <label><span>Style</span><select class="select" name="style"><option value="info">Information</option><option value="success">Success</option><option value="warning">Warning</option><option value="danger">Urgent</option></select></label>
    <label class="full"><span>Message</span><textarea class="input" name="message" rows="4" maxlength="2000" required></textarea></label>
    <label><span>Starts</span><input class="input" type="datetime-local" name="starts_at"></label>
    <label><span>Ends</span><input class="input" type="datetime-local" name="ends_at"></label>
    <label class="setting-toggle-row full"><input type="checkbox" name="enabled" value="1" checked><span><b>Enabled</b><small>Show this announcement when its schedule is active.</small></span></label>
    <div class="full utility-form-actions"><button class="btn primary">Publish announcement</button><button class="btn secondary" type="button" data-acp-disclosure-close="announcement-create">Cancel</button></div>
  </form>
</section>

<section class="dash-card utility-list-card">
  <div class="dash-card-head"><div><h2>Existing announcements</h2><p>Review, edit, disable, or remove published notices.</p></div></div>
  {% if !$announcements %}
    <div class="empty-state utility-empty"><i>◈</i><b>No announcements yet</b><p>Create a notice when you need to share board-wide information.</p><button class="btn secondary" type="button" data-acp-disclosure="announcement-create">Create the first announcement</button></div>
  {% else %}
    <div class="announcement-admin-list compact-list">
    {% foreach $announcements as $announcement %}
      <article class="announcement-admin-row">
        <div class="announcement-summary">
          <span class="state {{ $announcement['enabled']?'active':'archived' }}">{{ $announcement['enabled']?'Enabled':'Disabled' }}</span>
          <div><strong>{{ $announcement['title'] }}</strong><p>{{ $announcement['message'] }}</p><small>{{ $announcement['starts_at']?:'Immediate' }} → {{ $announcement['ends_at']?:'No end date' }}</small></div>
        </div>
        <details class="announcement-editor"><summary>Edit</summary>
          <form method="post" action="{{ $baseUrl }}/admin/announcements/save" class="admin-form-grid compact utility-form-grid">
            <input type="hidden" name="_token" value="{{ $csrfToken }}"><input type="hidden" name="id" value="{{ $announcement['id'] }}">
            <label><span>Title</span><input class="input" name="title" value="{{ $announcement['title'] }}" required></label>
            <label><span>Style</span><select class="select" name="style"><option value="info" {{ $announcement['style']==='info'?'selected':'' }}>Information</option><option value="success" {{ $announcement['style']==='success'?'selected':'' }}>Success</option><option value="warning" {{ $announcement['style']==='warning'?'selected':'' }}>Warning</option><option value="danger" {{ $announcement['style']==='danger'?'selected':'' }}>Urgent</option></select></label>
            <label class="full"><span>Message</span><textarea class="input" name="message" rows="4" required>{{ $announcement['message'] }}</textarea></label>
            <label><span>Starts</span><input class="input" type="datetime-local" name="starts_at" value="{{ $announcement['starts_at']?date('Y-m-d\TH:i',strtotime($announcement['starts_at'])):'' }}"></label>
            <label><span>Ends</span><input class="input" type="datetime-local" name="ends_at" value="{{ $announcement['ends_at']?date('Y-m-d\TH:i',strtotime($announcement['ends_at'])):'' }}"></label>
            <label class="setting-toggle-row full"><input type="checkbox" name="enabled" value="1" {{ $announcement['enabled']?'checked':'' }}><span><b>Enabled</b><small>Show this announcement when its schedule is active.</small></span></label>
            <div class="full utility-form-actions"><button class="btn primary">Save changes</button></div>
          </form>
          <form method="post" action="{{ $baseUrl }}/admin/announcements/delete" class="utility-delete-form" onsubmit="return confirm('Delete this announcement?')"><input type="hidden" name="_token" value="{{ $csrfToken }}"><input type="hidden" name="id" value="{{ $announcement['id'] }}"><button class="btn danger">Delete announcement</button></form>
        </details>
      </article>
    {% endforeach %}
    </div>
  {% endif %}
</section>
<script>
document.addEventListener('click', function (event) {
  const opener = event.target.closest('[data-acp-disclosure]');
  const closer = event.target.closest('[data-acp-disclosure-close]');
  if (opener) {
    const panel = document.getElementById(opener.getAttribute('data-acp-disclosure'));
    if (panel) { panel.hidden = false; panel.scrollIntoView({behavior:'smooth', block:'start'}); }
  }
  if (closer) {
    const panel = document.getElementById(closer.getAttribute('data-acp-disclosure-close'));
    if (panel) panel.hidden = true;
  }
});
</script>
{% include 'admin/partials/footer.html' %}