@extends('unit-admin.layout')
@section('title', 'News')
@section('page_title', 'News & Announcements')

@section('content')

<div class="card">
  <div class="ch">
    <div class="ct">
      <i class="fas fa-newspaper"></i> News & Announcements
    </div>
    <button class="btn bp bsm" onclick="om('addNewsM')">
      <i class="fas fa-plus"></i> Create News
    </button>
  </div>

  <div class="tw">
    <table>
      <thead>
        <tr>
          <th>#</th>
          <th>Title</th>
          <th>Status</th>
          <th>Published At</th>
          <th>Created</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        @forelse($news as $item)
        <tr>
          <td style="color:var(--text-dim)">{{ $loop->iteration }}</td>
          <td>
            <div class="mn">{{ $item->title }}</div>
            <div class="me">{{ Str::limit(strip_tags($item->content), 60) }}</div>
          </td>
          <td>
            <span class="badge {{ $item->status === 'PUBLISHED' ? 'bap' : 'bpe' }}">
              {{ $item->status }}
            </span>
          </td>
          <td style="color:var(--text-dim)">
            {{ $item->published_at ? $item->published_at->format('d M Y h:i A') : '—' }}
          </td>
          <td style="color:var(--text-dim)">{{ $item->created_at->format('d M Y') }}</td>
          <td>
            <div class="abr">
              {{-- VIEW --}}
              <div class="ab vw"
                   onclick="viewNews(
                     '{{ addslashes($item->title) }}',
                     '{{ addslashes($item->content) }}',
                     '{{ $item->status }}',
                     '{{ $item->published_at ? $item->published_at->format('d M Y h:i A') : '' }}')"
                   title="View">
                <i class="fas fa-eye"></i>
              </div>

              {{-- EDIT --}}
              <div class="ab ed"
                   onclick="editNews({{ $item->id }}, '{{ addslashes($item->title) }}', '{{ addslashes($item->content) }}')"
                   title="Edit">
                <i class="fas fa-edit"></i>
              </div>

              {{-- TOGGLE STATUS --}}
              <form method="POST" action="{{ route('unit-admin.news.toggle-status') }}" style="display:inline">
                @csrf
                <input type="hidden" name="id" value="{{ $item->id }}">
                <button type="submit"
                  class="ab {{ $item->status === 'PUBLISHED' ? 'rej' : 'app' }}"
                  title="{{ $item->status === 'PUBLISHED' ? 'Unpublish' : 'Publish' }}"
                  onclick="return confirm('{{ $item->status === 'PUBLISHED' ? 'Unpublish' : 'Publish' }} this news?')">
                  <i class="fas fa-{{ $item->status === 'PUBLISHED' ? 'eye-slash' : 'paper-plane' }}"></i>
                </button>
              </form>

              {{-- DELETE --}}
              <form method="POST" action="{{ route('unit-admin.news.delete') }}" style="display:inline"
                    onsubmit="return confirm('Delete {{ addslashes($item->title) }}?')">
                @csrf @method('DELETE')
                <input type="hidden" name="id" value="{{ $item->id }}">
                <button type="submit" class="ab rej" title="Delete">
                  <i class="fas fa-trash"></i>
                </button>
              </form>
            </div>
          </td>
        </tr>
        @empty
        <tr>
          <td colspan="6" style="text-align:center;color:var(--text-dim);padding:40px;">
            <div style="font-size:32px;margin-bottom:10px;">📰</div>
            <div style="font-size:13px;font-weight:600;margin-bottom:6px;">No news yet</div>
            <div style="font-size:11px;color:var(--text-dim);margin-bottom:14px;">Create your first announcement</div>
            <button class="btn bp bsm" onclick="om('addNewsM')">
              <i class="fas fa-plus"></i> Create News
            </button>
          </td>
        </tr>
        @endforelse
      </tbody>
    </table>
  </div>
</div>

{{-- ══ ADD NEWS MODAL ══ --}}
<div id="addNewsM" class="mo">
  <div class="md" style="width:560px">
    <div class="mh">
      <span class="mt2">Create News / Announcement</span>
      <div class="mc3" onclick="cm('addNewsM')"><i class="fas fa-times"></i></div>
    </div>
    <form method="POST" action="{{ route('unit-admin.news.store') }}" enctype="multipart/form-data">
      @csrf
      <div class="fgrid c1">
        <div class="fg">
          <label>Title</label>
          <input type="text" name="title" placeholder="Enter news title" required>
        </div>
        <div class="fg">
          <label>Content</label>
          <textarea name="content" placeholder="Write your announcement here..."
                    style="min-height:120px" required></textarea>
        </div>
        <div class="fg">
          <label>Image (optional)</label>
          <input type="file" name="image" accept="image/jpg,image/jpeg,image/png" style="padding:6px 11px;">
        </div>
        <div class="fg">
          <label>Status</label>
          <select name="status" required>
            <option value="DRAFT">Draft (not visible to members)</option>
            <option value="PUBLISHED">Published (visible to members)</option>
          </select>
        </div>
      </div>
      <div class="ff">
        <button type="button" class="btn bo" onclick="cm('addNewsM')">Cancel</button>
        <button type="submit" class="btn bp">
          <i class="fas fa-paper-plane"></i> Create News
        </button>
      </div>
    </form>
  </div>
</div>

{{-- ══ EDIT NEWS MODAL ══ --}}
<div id="editNewsM" class="mo">
  <div class="md" style="width:560px">
    <div class="mh">
      <span class="mt2">Edit News</span>
      <div class="mc3" onclick="cm('editNewsM')"><i class="fas fa-times"></i></div>
    </div>
    <form method="POST" action="{{ route('unit-admin.news.update') }}" enctype="multipart/form-data">
      @csrf
      <input type="hidden" name="id" id="editNewsId">
      <div class="fgrid c1">
        <div class="fg">
          <label>Title</label>
          <input type="text" name="title" id="editNewsTitle" required>
        </div>
        <div class="fg">
          <label>Content</label>
          <textarea name="content" id="editNewsContent" style="min-height:120px" required></textarea>
        </div>
        <div class="fg">
          <label>New Image (optional)</label>
          <input type="file" name="image" accept="image/jpg,image/jpeg,image/png" style="padding:6px 11px;">
        </div>
      </div>
      <div class="ff">
        <button type="button" class="btn bo" onclick="cm('editNewsM')">Cancel</button>
        <button type="submit" class="btn bp">
          <i class="fas fa-save"></i> Update News
        </button>
      </div>
    </form>
  </div>
</div>

{{-- ══ VIEW NEWS MODAL ══ --}}
<div id="viewNewsM" class="mo">
  <div class="md" style="width:560px">
    <div class="mh">
      <span class="mt2" id="viewNewsTitle">News Detail</span>
      <div class="mc3" onclick="cm('viewNewsM')"><i class="fas fa-times"></i></div>
    </div>
    <div style="padding:20px;">
      <div style="display:flex;gap:8px;margin-bottom:14px;align-items:center;flex-wrap:wrap;">
        <span id="viewNewsStatus" class="badge"></span>
        <span id="viewNewsDate" style="font-size:11px;color:var(--text-dim);"></span>
      </div>
      <div id="viewNewsContent"
           style="font-size:13px;line-height:1.8;color:var(--text-dim);white-space:pre-wrap;"></div>
    </div>
    <div class="ff">
      <button class="btn bo" onclick="cm('viewNewsM')">Close</button>
    </div>
  </div>
</div>

@endsection

@section('scripts')
<script>
function editNews(id, title, content) {
  document.getElementById('editNewsId').value      = id;
  document.getElementById('editNewsTitle').value   = title;
  document.getElementById('editNewsContent').value = content;
  om('editNewsM');
}

function viewNews(title, content, status, publishedAt) {
  document.getElementById('viewNewsTitle').textContent   = title;
  document.getElementById('viewNewsContent').textContent = content;
  const statusEl = document.getElementById('viewNewsStatus');
  statusEl.textContent = status;
  statusEl.className   = 'badge ' + (status === 'PUBLISHED' ? 'bap' : 'bpe');
  document.getElementById('viewNewsDate').textContent =
    publishedAt ? '📅 Published: ' + publishedAt : '📝 Not published yet';
  om('viewNewsM');
}
</script>
@endsection