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

@section('content')

@php
$typeStyle = [
  'alert'        => ['bg'=>'#dc2626', 'label'=>'Alert', 'icon'=>'M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z'],
  'announcement' => ['bg'=>'#ef4444', 'label'=>'Announcement', 'icon'=>'M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z'],
  'release'      => ['bg'=>'#22c55e', 'label'=>'Release',      'icon'=>'M13 10V3L4 14h7v7l9-11h-7z'],
  'update'       => ['bg'=>'#3b82f6', 'label'=>'Update',       'icon'=>'M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15'],
  'maintenance'  => ['bg'=>'#f59e0b', 'label'=>'Maintenance',  'icon'=>'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065zM15 12a3 3 0 11-6 0 3 3 0 016 0z'],
  'warning'      => ['bg'=>'#ef4444', 'label'=>'Warning',      'icon'=>'M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z'],
];
$ts = $typeStyle[$bulletin->type] ?? $typeStyle['announcement'];
@endphp

{{-- ── Header row: badges + back button ── --}}
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem">
  <div style="display:flex;align-items:center;gap:.5rem">
    {{-- Type badge - exact pill with icon + text --}}
    <span style="display:inline-flex;align-items:center;gap:.3rem;
      padding:.3rem .75rem;border-radius:9999px;
      background:{{ $ts['bg'] }};color:#fff;
      font-size:.8125rem;font-weight:600;letter-spacing:.005em">
      <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.2">
        <path stroke-linecap="round" stroke-linejoin="round" d="{{ $ts['icon'] ?? 'M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z' }}"/>
      </svg>
      {{ $ts['label'] }}
    </span>

    {{-- Pinned badge - outlined pill --}}
    @if($bulletin->is_pinned)
    <span style="display:inline-flex;align-items:center;gap:.3rem;
      padding:.3rem .75rem;border-radius:9999px;
      background:var(--background);color:var(--foreground);
      border:1.5px solid var(--border);
      font-size:.8125rem;font-weight:500">
      <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
        <path stroke-linecap="round" stroke-linejoin="round"
          d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/>
      </svg>
      Pinned
    </span>
    @endif
  </div>

  {{-- Back button --}}
  <a href="{{ route('customer.bulletin') }}"
     style="display:inline-flex;align-items:center;gap:.375rem;
       padding:.375rem .75rem;border-radius:var(--radius);
       border:1px solid var(--border);background:var(--background);
       font-size:.875rem;font-weight:500;color:var(--muted-foreground);
       transition:background .1s,color .1s"
     onmouseover="this.style.background='var(--muted)';this.style.color='var(--foreground)'"
     onmouseout="this.style.background='var(--background)';this.style.color='var(--muted-foreground)'">
    <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> Back
  </a>
</div>

{{-- ── Full page content wrapper ── --}}
<div>

  {{-- Title --}}
  <h1 style="font-size:1.5rem;font-weight:700;color:var(--foreground);
    line-height:1.35;letter-spacing:-.02em;margin-bottom:.875rem">
    {{ $bulletin->title }}
  </h1>

  {{-- Meta: author avatar + name + date + views --}}
  <div style="display:flex;align-items:center;gap:.5rem;margin-bottom:1.5rem;
    font-size:.8125rem;color:var(--muted-foreground)">
    <div style="width:1.5rem;height:1.5rem;border-radius:50%;
      background:linear-gradient(135deg,#6366f1,#7c3aed);
      display:flex;align-items:center;justify-content:center;
      font-size:.5625rem;font-weight:700;color:#fff;flex-shrink:0">
      {{ strtoupper(substr($bulletin->author->name??'A',0,1)) }}
    </div>
    <span>Posted by <strong style="font-weight:500;color:var(--foreground)">{{ $bulletin->author->name??'Admin' }}</strong></span>
    <span style="color:var(--border)">•</span>
    <span>{{ $bulletin->published_at?->diffForHumans() }}</span>
    <span style="color:var(--border)">•</span>
    <span style="display:flex;align-items:center;gap:.25rem">
      <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75"
          d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75"
          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>

  {{-- Divider --}}
  <div style="border-top:1px solid var(--border);margin-bottom:1.75rem"></div>

  {{-- ── Main content ── --}}
  <div style="font-size:.9375rem;color:var(--foreground);line-height:1.75;
    letter-spacing:-.005em;word-break:break-word;" class="bulletin-content">
    {!! nl2br(e($bulletin->content)) !!}
  </div>

  {{-- Divider --}}
  <div style="border-top:1px solid var(--border);margin-top:2rem;margin-bottom:1.25rem"></div>

  {{-- ── Likes ── --}}
  <div style="display:flex;align-items:center;gap:.5rem;margin-bottom:1.75rem">
    <button style="display:flex;align-items:center;gap:.375rem;
      padding:.375rem .75rem;border-radius:var(--radius);
      border:1px solid var(--border);background:var(--background);
      font-size:.875rem;color:var(--muted-foreground);cursor:pointer;
      transition:background .1s,border-color .1s,color .1s"
      onmouseover="this.style.background='#fef2f2';this.style.borderColor='#fecaca';this.style.color='#dc2626'"
      onmouseout="this.style.background='var(--background)';this.style.borderColor='var(--border)';this.style.color='var(--muted-foreground)'">
      <svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75"
          d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
      </svg>
      {{ $bulletin->likes_count }}
    </button>
  </div>

  {{-- ── Comments section ── --}}
  <div>
    <h3 style="font-size:1rem;font-weight:600;color:var(--foreground);margin-bottom:1rem">
      Comments ({{ $comments->count() }})
    </h3>

    {{-- Comment list --}}
    @if($comments->count())
    <div style="display:flex;flex-direction:column;gap:1rem;margin-bottom:1.5rem">
      @foreach($comments as $comment)
      <div style="display:flex;gap:.75rem">
        <div style="width:1.75rem;height:1.75rem;border-radius:50%;flex-shrink:0;
          background:linear-gradient(135deg,#6366f1,#7c3aed);
          display:flex;align-items:center;justify-content:center;
          font-size:.625rem;font-weight:700;color:#fff">
          {{ strtoupper(substr($comment->user->name??'U',0,1)) }}
        </div>
        <div style="flex:1">
          <div style="display:flex;align-items:center;gap:.5rem;margin-bottom:.25rem">
            <span style="font-size:.8125rem;font-weight:600;color:var(--foreground)">{{ $comment->user->name??'User' }}</span>
            <span style="font-size:.75rem;color:var(--muted-foreground)">{{ $comment->created_at->diffForHumans() }}</span>
          </div>
          <p style="font-size:.875rem;color:var(--foreground);line-height:1.6;margin:0">{{ $comment->content }}</p>
        </div>
      </div>
      @endforeach
    </div>
    @else
    <p style="font-size:.875rem;color:var(--muted-foreground);margin-bottom:1.25rem">
      No comments yet. Be the first to comment!
    </p>
    @endif

    {{-- Comment form --}}
    <form method="POST" action="{{ route('customer.bulletin.comment',$bulletin) }}">
      @csrf

      {{-- Rich text toolbar (UI only) --}}
      <div style="border:1px solid var(--border);border-radius:var(--radius);
        background:var(--background);overflow:hidden">

        {{-- Toolbar --}}
        <div style="display:flex;align-items:center;gap:0;padding:.375rem .625rem;
          border-bottom:1px solid var(--border);background:var(--muted);
          flex-wrap:wrap;gap:.125rem">
          @foreach([
            ['B',  'font-weight:700',                    'Bold'],
            ['I',  'font-style:italic',                  'Italic'],
            ['S',  'text-decoration:line-through',       'Strikethrough'],
            ['H₂', '',                                   'Heading 2'],
            ['H₄', '',                                   'Heading 4'],
          ] as [$lbl,$style,$title])
          <button type="button" title="{{ $title }}"
            style="min-width:1.75rem;height:1.75rem;display:flex;align-items:center;justify-content:center;
              border-radius:.3rem;border:none;background:transparent;cursor:pointer;
              font-size:.75rem;{{ $style }};color:var(--muted-foreground);
              transition:background .1s,color .1s;padding:0 .25rem;font-family:inherit"
            onmouseover="this.style.background='var(--border)';this.style.color='var(--foreground)'"
            onmouseout="this.style.background='transparent';this.style.color='var(--muted-foreground)'">
            {{ $lbl }}
          </button>
          @endforeach

          <div style="width:1px;height:1rem;background:var(--border);margin:0 .25rem"></div>

          {{-- List icons --}}
          @foreach([
            ['M4 6h16M4 10h16M4 14h16M4 18h16','Bullet List'],
            ['M9 6l12 0M9 12l12 0M9 18l12 0M5 6l.01 0M5 12l.01 0M5 18l.01 0','Ordered List'],
          ] as [$path,$title])
          <button type="button" title="{{ $title }}"
            style="width:1.75rem;height:1.75rem;display:flex;align-items:center;justify-content:center;
              border-radius:.3rem;border:none;background:transparent;cursor:pointer;color:var(--muted-foreground);
              transition:background .1s,color .1s"
            onmouseover="this.style.background='var(--border)';this.style.color='var(--foreground)'"
            onmouseout="this.style.background='transparent';this.style.color='var(--muted-foreground)'">
            <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $path }}"/>
            </svg>
          </button>
          @endforeach

          <div style="width:1px;height:1rem;background:var(--border);margin:0 .25rem"></div>

          {{-- Link, code, braces, image, attach, video icons --}}
          @foreach([
            ['M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1','Link'],
            ['M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4','Code'],
            ['M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z','Code Block'],
            ['M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z','Image'],
            ['M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13','Attachment'],
            ['M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z M21 12a9 9 0 11-18 0 9 9 0 0118 0z','Video'],
            ['M21 15.546c-.523 0-1.046.151-1.5.454a2.704 2.704 0 01-3 0 2.704 2.704 0 00-3 0 2.704 2.704 0 01-3 0 2.704 2.704 0 00-3 0 2.704 2.704 0 01-1.5-.454M9 6l3 3m0 0l3-3m-3 3V3','Embed'],
          ] as [$path,$title])
          <button type="button" title="{{ $title }}"
            style="width:1.75rem;height:1.75rem;display:flex;align-items:center;justify-content:center;
              border-radius:.3rem;border:none;background:transparent;cursor:pointer;color:var(--muted-foreground);
              transition:background .1s,color .1s"
            onmouseover="this.style.background='var(--border)';this.style.color='var(--foreground)'"
            onmouseout="this.style.background='transparent';this.style.color='var(--muted-foreground)'">
            <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="{{ $path }}"/>
            </svg>
          </button>
          @endforeach

          <div style="width:1px;height:1rem;background:var(--border);margin:0 .25rem"></div>

          {{-- Undo --}}
          <button type="button" title="Undo"
            style="width:1.75rem;height:1.75rem;display:flex;align-items:center;justify-content:center;
              border-radius:.3rem;border:none;background:transparent;cursor:pointer;color:var(--muted-foreground);
              transition:background .1s,color .1s"
            onmouseover="this.style.background='var(--border)';this.style.color='var(--foreground)'"
            onmouseout="this.style.background='transparent';this.style.color='var(--muted-foreground)'">
            <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75"
                d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/>
            </svg>
          </button>
        </div>

        {{-- Text area --}}
        <textarea
          name="content"
          rows="4"
          placeholder="Write a comment..."
          style="width:100%;padding:.75rem 1rem;
            border:none;outline:none;resize:none;
            font-family:'Inter',ui-sans-serif,system-ui,sans-serif;
            font-size:.875rem;line-height:1.6;
            color:var(--foreground);background:var(--background);"
          required>{{ old('content') }}</textarea>
      </div>

      <div style="display:flex;justify-content:flex-end;margin-top:.75rem">
        <button type="submit"
          style="display:inline-flex;align-items:center;padding:.4375rem .875rem;
            border-radius:var(--radius);font-size:.875rem;font-weight:500;
            color:var(--foreground);background:var(--background);
            border:1px solid var(--border);cursor:pointer;font-family:inherit;transition:background .1s"
          onmouseover="this.style.background='var(--muted)'"
          onmouseout="this.style.background='var(--background)'">
          Post Comment
        </button>
      </div>
    </form>
  </div>

</div>

<style>
.bulletin-content strong { font-weight: 600; color: var(--foreground); }
.bulletin-content em     { font-style: italic; }
.bulletin-content code   { background: var(--muted); border: 1px solid var(--border); border-radius: .3rem; padding: .125rem .375rem; font-size: .8125rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; color: var(--foreground); }
.bulletin-content h2     { font-size: 1.25rem; font-weight: 700; color: var(--foreground); margin: 1.5rem 0 .625rem; letter-spacing: -.02em; }
.bulletin-content h3     { font-size: 1.0625rem; font-weight: 600; color: var(--foreground); margin: 1.25rem 0 .5rem; }
.bulletin-content ul     { padding-left: 1.25rem; margin: .625rem 0; list-style-type: disc; }
.bulletin-content ol     { padding-left: 1.25rem; margin: .625rem 0; list-style-type: decimal; }
.bulletin-content li     { margin-bottom: .375rem; font-size: .9375rem; line-height: 1.65; color: var(--foreground); }
.bulletin-content a      { color: #3b82f6; text-decoration: underline; text-underline-offset: 2px; }
.bulletin-content a:hover{ color: #2563eb; }
.bulletin-content p      { margin-bottom: .875rem; }
.bulletin-content hr     { border: none; border-top: 1px solid var(--border); margin: 1.5rem 0; }
</style>

@endsection
