@extends('layouts.admin')
@section('title', 'Bulletin')

@section('content')

<div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.5rem">
  <div>
    <h1 style="font-size:1.25rem;font-weight:800;color:var(--foreground);letter-spacing:-.025em;margin:0 0 .25rem">Bulletin</h1>
    <p style="font-size:.8125rem;color:var(--muted-foreground);margin:0">Create and manage announcements visible to all customers</p>
  </div>
  <a href="{{ route('admin.bulletin.create') }}" class="btn btn-primary btn-sm">
    <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 4v16m8-8H4"/>
    </svg>
    New Bulletin
  </a>
</div>

{{-- Stats chips --}}
<div style="display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:1.25rem">
  @foreach([
    ['label'=>'Total',     'val'=>$stats['total'],     'bg'=>'var(--muted)',  'br'=>'var(--border)', 'c'=>'var(--foreground)'],
    ['label'=>'Published', 'val'=>$stats['published'], 'bg'=>'#f0fdf4',       'br'=>'#bbf7d0',       'c'=>'#166534'],
    ['label'=>'Pinned',    'val'=>$stats['pinned'],    'bg'=>'#faf5ff',       'br'=>'#e9d5ff',       'c'=>'#6b21a8'],
    ['label'=>'Draft',     'val'=>$stats['draft'],     'bg'=>'#fefce8',       'br'=>'#fef08a',       'c'=>'#854d0e'],
  ] as $s)
  <div style="display:flex;align-items:center;gap:.5rem;padding:.45rem .875rem;
    border-radius:.6rem;background:{{ $s['bg'] }};border:1px solid {{ $s['br'] }}">
    <span style="font-size:.9rem;font-weight:800;color:{{ $s['c'] }}">{{ $s['val'] }}</span>
    <span style="font-size:.75rem;color:var(--foreground)">{{ $s['label'] }}</span>
  </div>
  @endforeach
</div>

{{-- Filters --}}
<div class="card" style="padding:.875rem 1.25rem;margin-bottom:1rem">
  <form method="GET" style="display:flex;flex-wrap:wrap;gap:.625rem;align-items:center">
    <select name="type" class="select" style="width:160px">
      <option value="">All Types</option>
      @foreach(['alert','announcement','release','update','maintenance','warning'] as $t)
      <option value="{{ $t }}" @selected(request('type')===$t)>{{ ucfirst($t) }}</option>
      @endforeach
    </select>
    <select name="status" class="select" style="width:140px">
      <option value="">All Statuses</option>
      <option value="published" @selected(request('status')==='published')>Published</option>
      <option value="draft"     @selected(request('status')==='draft')>Draft</option>
    </select>
    <button type="submit" class="btn btn-primary btn-sm">Filter</button>
    @if(request()->anyFilled(['type','status']))
    <a href="{{ route('admin.bulletin.index') }}" class="btn btn-ghost btn-sm">Clear</a>
    @endif
  </form>
</div>

{{-- Bulletin list --}}
@php
  $typeColors = [
    'alert'        => 'b-red',
    'announcement' => 'b-purple',
    'release'      => 'b-green',
    'update'       => 'b-blue',
    'maintenance'  => 'b-yellow',
    'warning'      => 'b-red',
  ];
@endphp

@forelse($bulletins as $bulletin)
<div class="card" style="margin-bottom:.75rem;transition:box-shadow .15s">
  <div style="padding:1.25rem;display:flex;align-items:flex-start;gap:1rem">

    {{-- Type icon --}}
    <div style="width:42px;height:42px;border-radius:.625rem;background:var(--muted);
      border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
      font-size:1.125rem;flex-shrink:0">
      {{ strtoupper(substr($bulletin->type,0,2)) }}
    </div>

    {{-- Content --}}
    <div style="flex:1;min-width:0">
      <div style="display:flex;align-items:center;gap:.5rem;margin-bottom:.375rem;flex-wrap:wrap">
        @if($bulletin->is_pinned)
        <svg width="12" height="12" fill="currentColor" viewBox="0 0 24 24" style="color:#6b21a8">
          <path d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/>
        </svg>
        @endif
        <span style="font-size:.9375rem;font-weight:700;color:var(--foreground)">{{ $bulletin->title }}</span>
        <span class="badge {{ $typeColors[$bulletin->type]??'b-gray' }}" style="font-size:.65rem">{{ ucfirst($bulletin->type) }}</span>
        @if($bulletin->is_published)
        <span class="badge b-green" style="font-size:.65rem">Published</span>
        @else
        <span class="badge b-yellow" style="font-size:.65rem">Draft</span>
        @endif
        @if($bulletin->product)
        <span class="badge b-gray" style="font-size:.65rem">{{ $bulletin->product->name }}</span>
        @endif
      </div>

      <p style="font-size:.8rem;color:var(--foreground);line-height:1.55;margin:0 0 .875rem;
        display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden">
        {{ $bulletin->excerpt ?? Str::limit(strip_tags($bulletin->content),160) }}
      </p>

      <div style="display:flex;align-items:center;gap:1.25rem;font-size:.72rem;color:var(--muted-foreground)">
        <span style="display:flex;align-items:center;gap:.35rem">
          <div class="avatar" style="width:18px;height:18px;font-size:.55rem;border-radius:.3rem">
            {{ strtoupper(substr($bulletin->author->name??'A',0,1)) }}
          </div>
          {{ $bulletin->author->name ?? 'Admin' }}
        </span>
        <span>{{ $bulletin->published_at?->diffForHumans() ?? 'Not published' }}</span>
        <span style="display:flex;align-items:center;gap:.25rem">
          <svg width="11" height="11" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
          </svg>
          {{ number_format($bulletin->views_count) }} views
        </span>
      </div>
    </div>

    {{-- Actions --}}
    <div style="display:flex;align-items:center;gap:.375rem;flex-shrink:0">
      {{-- Pin toggle --}}
      <form method="POST" action="{{ route('admin.bulletin.pin',$bulletin) }}">
        @csrf
        <button class="btn btn-ghost btn-xs" title="{{ $bulletin->is_pinned ? 'Unpin' : 'Pin' }}"
          style="{{ $bulletin->is_pinned ? 'color:#6b21a8' : '' }}">
          <svg width="13" height="13" fill="{{ $bulletin->is_pinned ? 'currentColor' : 'none' }}" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/>
          </svg>
        </button>
      </form>

      @if($bulletin->is_published)
      <form method="POST" action="{{ route('admin.bulletin.unpublish',$bulletin) }}">
        @csrf
        <button class="btn btn-secondary btn-xs" style="color:#854d0e">Unpublish</button>
      </form>
      @else
      <form method="POST" action="{{ route('admin.bulletin.publish',$bulletin) }}">
        @csrf
        <button class="btn btn-secondary btn-xs" style="color:#166534">Publish</button>
      </form>
      @endif

      <a href="{{ route('admin.bulletin.edit',$bulletin) }}" class="btn btn-secondary btn-xs">Edit</a>
      <a href="{{ route('admin.bulletin.show',$bulletin) }}" class="btn btn-primary btn-xs">View <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="flex-shrink:0"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></a>
    </div>
  </div>
</div>
@empty
<div class="card" style="padding:4rem;text-align:center">
  <div style="font-size:2rem;margin-bottom:.75rem">📢</div>
  <div style="font-size:.9rem;font-weight:700;color:var(--foreground);margin-bottom:.5rem">No bulletins yet</div>
  <p style="font-size:.8rem;color:var(--muted-foreground);margin-bottom:1.25rem">Create your first announcement to inform customers.</p>
  <a href="{{ route('admin.bulletin.create') }}" class="btn btn-primary btn-sm">Create Bulletin <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="flex-shrink:0"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></a>
</div>
@endforelse

@if($bulletins->hasPages())
<div style="margin-top:1.25rem">{{ $bulletins->links() }}</div>
@endif

@endsection
