@extends('layouts.admin')
@section('title', Str::limit($bulletin->title, 40))

@section('content')

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

<div style="display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem">
  <a href="{{ route('admin.bulletin.index') }}" class="btn btn-secondary btn-sm"><svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="flex-shrink:0"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg> Bulletin</a>
  <span style="color:var(--muted-foreground)">/</span>
  <span style="font-size:.8125rem;color:var(--muted-foreground)">{{ Str::limit($bulletin->title,50) }}</span>
  <div style="margin-left:auto;display:flex;gap:.5rem">
    <form method="POST" action="{{ route('admin.bulletin.pin',$bulletin) }}">
      @csrf
      <button class="btn btn-secondary btn-sm" 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>
        {{ $bulletin->is_pinned ? 'Pinned' : 'Pin' }}
      </button>
    </form>
    <a href="{{ route('admin.bulletin.edit',$bulletin) }}" class="btn btn-secondary btn-sm">Edit</a>
    @if($bulletin->is_published)
    <form method="POST" action="{{ route('admin.bulletin.unpublish',$bulletin) }}">
      @csrf
      <button class="btn btn-secondary btn-sm" style="color:#854d0e">Unpublish</button>
    </form>
    @else
    <form method="POST" action="{{ route('admin.bulletin.publish',$bulletin) }}">
      @csrf
      <button class="btn btn-primary btn-sm">Publish</button>
    </form>
    @endif
  </div>
</div>

<div style="display:grid;grid-template-columns:1fr 260px;gap:1.25rem;align-items:start">

  {{-- Preview card --}}
  <div class="card" style="padding:1.75rem">
    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem">
      <div style="display:flex;align-items:center;gap:.5rem">
        <span class="badge {{ $typeColors[$bulletin->type]??'b-gray' }}" style="font-size:.7rem">
          {{ ucfirst($bulletin->type) }}
        </span>
        @if($bulletin->is_pinned)
        <span class="badge b-purple" style="font-size:.65rem">Pinned</span>
        @endif
        @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
      </div>
      <span style="font-size:.75rem;color:var(--muted-foreground)">
        {{ $bulletin->published_at?->diffForHumans() ?? 'Not published' }}
      </span>
    </div>

    <h2 style="font-size:1.375rem;font-weight:700;color:var(--foreground);
      letter-spacing:-.025em;margin:0 0 1rem;line-height:1.3">
      {{ $bulletin->title }}
    </h2>

    @if($bulletin->excerpt)
    <p style="font-size:.9rem;color:var(--muted-foreground);line-height:1.7;
      margin:0 0 1.25rem;padding-bottom:1.25rem;border-bottom:1px solid var(--border);font-style:italic">
      {{ $bulletin->excerpt }}
    </p>
    @endif

    <div style="font-size:.9375rem;color:var(--foreground);line-height:1.8;white-space:pre-wrap">
      {{ $bulletin->content }}
    </div>

    <div style="display:flex;align-items:center;justify-content:space-between;
      margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--border)">
      <div style="display:flex;align-items:center;gap:.625rem">
        <div class="avatar" style="width:28px;height:28px;font-size:.72rem;border-radius:.45rem">
          {{ strtoupper(substr($bulletin->author->name??'A',0,1)) }}
        </div>
        <div>
          <div style="font-size:.8rem;font-weight:600;color:var(--foreground)">
            {{ $bulletin->author->name ?? 'Admin' }}
          </div>
          <div style="font-size:.68rem;color:var(--muted-foreground)">
            {{ $bulletin->created_at->format('M d, Y') }}
          </div>
        </div>
      </div>
      <span style="font-size:.75rem;color:var(--muted-foreground)">
        {{ number_format($bulletin->views_count) }} views
      </span>
    </div>
  </div>

  {{-- Sidebar --}}
  <div style="display:flex;flex-direction:column;gap:1rem">
    <div class="card" style="padding:1.125rem">
      <div style="font-size:.875rem;font-weight:600;color:var(--foreground);margin-bottom:.875rem">Actions</div>
      <div style="display:flex;flex-direction:column;gap:.5rem">
        <a href="{{ route('admin.bulletin.edit',$bulletin) }}" class="btn btn-primary btn-sm" style="justify-content:center">
          Edit Bulletin
        </a>
        <a href="{{ route('customer.bulletin') }}" target="_blank" class="btn btn-secondary btn-sm" style="justify-content:center">
          Preview Customer View
        </a>
        <form method="POST" action="{{ route('admin.bulletin.destroy',$bulletin) }}"
              onsubmit="return confirm('Delete this bulletin?')">
          @csrf @method('DELETE')
          <button class="btn btn-danger btn-sm" style="width:100%;justify-content:center">Delete</button>
        </form>
      </div>
    </div>

    <div class="card" style="padding:1.125rem">
      <div style="font-size:.875rem;font-weight:600;color:var(--foreground);margin-bottom:.75rem">Details</div>
      @foreach([
        'Status'    => $bulletin->is_published ? 'Published' : 'Draft',
        'Type'      => ucfirst($bulletin->type),
        'Pinned'    => $bulletin->is_pinned ? 'Yes' : 'No',
        'Product'   => $bulletin->product?->name ?? 'None',
        'Views'     => number_format($bulletin->views_count),
        'Created'   => $bulletin->created_at->format('M d, Y'),
        'Published' => $bulletin->published_at?->format('M d, Y') ?? 'Not yet',
        'Author'    => $bulletin->author?->name ?? 'Admin',
      ] as $k => $v)
      <div style="display:flex;justify-content:space-between;font-size:.8125rem;
        padding:.4rem 0;border-bottom:1px solid var(--border)">
        <span style="color:var(--muted-foreground)">{{ $k }}</span>
        <span style="font-weight:500;color:var(--foreground)">{{ $v }}</span>
      </div>
      @endforeach
    </div>
  </div>
</div>

@endsection
