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

@section('content')

@php
/* Exact Titan Systems type badge colors from screenshot */
$typeStyle = [
  'alert'        => ['bg'=>'#dc2626','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','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','icon'=>'M13 10V3L4 14h7v7l9-11h-7z'],
  'update'       => ['bg'=>'#3b82f6','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','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.065z'],
  'warning'      => ['bg'=>'#ef4444','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'],
];

/* Icon colors for Latest Releases list (same colorful squares as Titan) */
$releaseColors = ['#c0392b','#6c3483','#e91e63','#1565c0','#4527a0','#00838f','#d84315','#2e7d32'];
$typeEmoji     = ['plugin'=>'🔌','module'=>'🧩','software'=>'💻','theme'=>'🎨','api'=>'⚡','saas'=>'☁️','script'=>'📜','desktop'=>'🖥️'];
@endphp

{{-- ── Page header ── --}}
<div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.5rem">
  <div>
    <h1 style="font-size:1.875rem;font-weight:700;color:var(--foreground);
      letter-spacing:-.025em;line-height:1.2;margin-bottom:.25rem">Bulletin</h1>
    <p style="font-size:.875rem;color:var(--muted-foreground)">
      Stay updated with the latest news and updates.
    </p>
  </div>

  {{-- All Types dropdown --}}
  <form method="GET" style="flex-shrink:0">
    <div style="position:relative;display:inline-flex;align-items:center">
      <select name="type" onchange="this.form.submit()"
        style="padding:.4375rem 2rem .4375rem .75rem;
          border:1px solid var(--border);border-radius:var(--radius);
          background:var(--background);color:var(--foreground);
          font-family:inherit;font-size:.875rem;font-weight:400;
          outline:none;cursor:pointer;appearance:none;-webkit-appearance:none;
          transition:border-color .15s;min-width:130px">
        <option value="">All Types</option>
        @foreach(['alert'=>'Alerts','announcement'=>'Announcements','release'=>'Releases','update'=>'Updates','maintenance'=>'Maintenance','warning'=>'Warnings'] as $v=>$l)
        <option value="{{ $v }}" @selected(request('type')===$v)>{{ $l }}</option>
        @endforeach
      </select>
      <svg width="14" height="14" fill="none" stroke="var(--muted-foreground)" viewBox="0 0 24 24"
        style="position:absolute;right:.5rem;top:50%;transform:translateY(-50%);pointer-events:none">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
      </svg>
    </div>
  </form>
</div>

{{-- ── 2-col layout ── --}}
<div style="display:grid;grid-template-columns:1fr 20rem;gap:1.5rem;align-items:start">

  {{-- LEFT ── --}}
  <div>

    {{-- Pinned section --}}
    @if($pinned->count())
    <div style="display:flex;align-items:center;gap:.375rem;margin-bottom:.875rem">
      <svg width="14" height="14" fill="none" stroke="var(--foreground)" viewBox="0 0 24 24" style="opacity:.8">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75"
          d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/>
      </svg>
      <span style="font-size:1rem;font-weight:600;color:var(--foreground)">Pinned</span>
    </div>

    <div style="display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:1.75rem">
      @foreach($pinned as $post)
      @php $ts = $typeStyle[$post->type] ?? $typeStyle['announcement']; @endphp

      <a href="{{ route('customer.bulletin.show',$post) }}"
        style="background:var(--muted);border:1px solid var(--border);
        border-radius:var(--radius);padding:1rem;
        transition:box-shadow .15s;display:flex;flex-direction:column;gap:.75rem;
        text-decoration:none;color:inherit;cursor:pointer"
        onmouseover="this.style.boxShadow='0 1px 8px rgba(0,0,0,.06)'"
        onmouseout="this.style.boxShadow='none'">

        {{-- badge + pin + time --}}
        <div style="display:flex;align-items:center;justify-content:space-between">
          <div style="display:flex;align-items:center;gap:.375rem">
            {{-- Type pill badge --}}
            <span style="display:inline-flex;align-items:center;gap:.275rem;
              padding:.2rem .625rem;border-radius:9999px;
              background:{{ $ts['bg'] }};color:#fff;
              font-size:.72rem;font-weight:600">
              <svg width="10" height="10" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.2">
                <path stroke-linecap="round" stroke-linejoin="round" d="{{ $ts['icon'] }}"/>
              </svg>
              {{ ucfirst($post->type) }}
            </span>
            {{-- Pinned pill --}}
            @if($post->is_pinned)
            <span style="display:inline-flex;align-items:center;gap:.275rem;
              padding:.2rem .625rem;border-radius:9999px;
              background:var(--background);color:var(--foreground);
              border:1.5px solid var(--border);font-size:.72rem;font-weight:500">
              <svg width="10" height="10" 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>
          <span style="font-size:.75rem;color:var(--muted-foreground)">
            {{ $post->published_at?->diffForHumans() }}
          </span>
        </div>

        {{-- Title --}}
        <h3 style="font-size:.9375rem;font-weight:600;color:var(--foreground);
          line-height:1.4;margin:0;
          display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden">
          {{ $post->title }}
        </h3>

        {{-- Body --}}
        <p style="font-size:.8125rem;color:var(--muted-foreground);line-height:1.6;
          margin:0;flex:1;
          display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden">
          {{ Str::limit(strip_tags($post->content), 200) }}
        </p>

        {{-- Footer --}}
        <div style="display:flex;align-items:center;justify-content:space-between;
          padding-top:.625rem;border-top:1px solid var(--border)">
          <div style="display:flex;align-items:center;gap:.4rem">
            <div style="width:1.375rem;height:1.375rem;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($post->author->name??'A',0,1)) }}
            </div>
            <span style="font-size:.75rem;color:var(--muted-foreground)">
              Posted by {{ $post->author->name??'Admin' }}
            </span>
          </div>
          <div style="display:flex;align-items:center;gap:.625rem;
            font-size:.75rem;color:var(--muted-foreground)">
            {{-- views --}}
            <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($post->views_count) }}
            </span>
            {{-- likes --}}
            <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="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>
              0
            </span>
            {{-- comments --}}
            <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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
              </svg>
              0
            </span>
          </div>
        </div>
      </a>
      @endforeach
    </div>
    @endif

    {{-- Recent section --}}
    <div style="font-size:1rem;font-weight:600;color:var(--foreground);margin-bottom:.875rem">Recent</div>

    @forelse($recent as $post)
    @php $ts = $typeStyle[$post->type] ?? $typeStyle['announcement']; @endphp

    <a href="{{ route('customer.bulletin.show',$post) }}"
      style="background:var(--muted);border:1px solid var(--border);
      border-radius:var(--radius);padding:1rem 1.125rem;margin-bottom:.75rem;
      transition:box-shadow .15s;display:block;text-decoration:none;color:inherit"
      onmouseover="this.style.boxShadow='0 1px 8px rgba(0,0,0,.06)'"
      onmouseout="this.style.boxShadow='none'">

      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:.625rem">
        <div style="display:flex;align-items:center;gap:.375rem">
          {{-- Type pill --}}
          <span style="display:inline-flex;align-items:center;gap:.275rem;
            padding:.2rem .625rem;border-radius:9999px;
            background:{{ $ts['bg'] }};color:#fff;
            font-size:.72rem;font-weight:600">
            <svg width="10" height="10" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.2">
              <path stroke-linecap="round" stroke-linejoin="round" d="{{ $ts['icon'] }}"/>
            </svg>
            {{ ucfirst($post->type) }}
          </span>
          {{-- Pinned pill --}}
          @if($post->is_pinned)
          <span style="display:inline-flex;align-items:center;gap:.275rem;
            padding:.2rem .625rem;border-radius:9999px;
            background:var(--background);color:var(--foreground);
            border:1.5px solid var(--border);font-size:.72rem;font-weight:500">
            <svg width="10" height="10" 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>
        <span style="font-size:.75rem;color:var(--muted-foreground)">
          {{ $post->published_at?->diffForHumans() }}
        </span>
      </div>

      <h3 style="font-size:.9375rem;font-weight:600;color:var(--foreground);
        line-height:1.4;margin:0 0 .5rem">
        {{ $post->title }}
      </h3>

      <p style="font-size:.8125rem;color:var(--muted-foreground);line-height:1.65;
        margin:0 0 .875rem;
        display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden">
        {{ Str::limit(strip_tags($post->content), 280) }}
      </p>

      <div style="display:flex;align-items:center;justify-content:space-between;
        padding-top:.625rem;border-top:1px solid var(--border)">
        <div style="display:flex;align-items:center;gap:.4rem">
          <div style="width:1.375rem;height:1.375rem;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($post->author->name??'A',0,1)) }}
          </div>
          <span style="font-size:.75rem;color:var(--muted-foreground)">
            Posted by {{ $post->author->name??'Admin' }}
          </span>
        </div>
        <div style="display:flex;align-items:center;gap:.625rem;font-size:.75rem;color:var(--muted-foreground)">
          <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($post->views_count) }}
          </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="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>
            0
          </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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
            </svg>
            0
          </span>
        </div>
      </div>
    </a>
    @empty
    @if(!$pinned->count())
    <div style="background:var(--muted);border:1px solid var(--border);border-radius:var(--radius);
      padding:3rem;text-align:center">
      <div style="font-size:2rem;margin-bottom:.625rem">📢</div>
      <p style="font-size:.875rem;font-weight:500;color:var(--foreground);margin-bottom:.25rem">No announcements yet</p>
      <p style="font-size:.8125rem;color:var(--muted-foreground)">Check back soon for news from the team.</p>
    </div>
    @endif
    @endforelse

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

  </div>

  {{-- RIGHT - Latest Releases --}}
  <div style="position:sticky;top:calc(3.5rem + 1.5rem)">
    <div style="background:var(--card);border:1px solid var(--border);
      border-radius:var(--radius);overflow:hidden;
      box-shadow:0 1px 3px rgba(0,0,0,.04)">

      <div style="padding:.875rem 1rem;border-bottom:1px solid var(--border)">
        <span style="font-size:.9375rem;font-weight:600;color:var(--foreground)">Latest Releases</span>
      </div>

      @php
        $releases = \App\Models\ProductVersion::with('product')
          ->where('is_active', true)
          ->latest('released_at')
          ->take(8)
          ->get();
      @endphp

      @forelse($releases as $i => $rel)
      <a href="{{ route('customer.market.show', $rel->product) }}"
        style="display:flex;align-items:center;gap:.75rem;padding:.625rem 1rem;
          border-bottom:1px solid var(--border);transition:background .1s;text-decoration:none"
        onmouseover="this.style.background='var(--muted)'" onmouseout="this.style.background=''">

        {{-- Colorful rounded square icon --}}
        <div style="width:2.5rem;height:2.5rem;border-radius:.5rem;flex-shrink:0;
          background:{{ $releaseColors[$i % count($releaseColors)] }};
          display:flex;align-items:center;justify-content:center;font-size:1rem;
          box-shadow:0 1px 3px rgba(0,0,0,.15)">
          {{ $typeEmoji[$rel->product->type??'-'] ??'-' }}
        </div>

        <div style="flex:1;min-width:0">
          <div style="font-size:.8125rem;font-weight:500;color:var(--foreground);
            white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
            {{ $rel->product->name }}@if($rel->product->short_description && $rel->product->short_description !== $rel->product->name) — {{ Str::limit($rel->product->short_description, 24) }}@endif
          </div>
          <div style="font-size:.75rem;color:var(--muted-foreground);margin-top:.125rem">
            v{{ $rel->version }} · {{ $rel->released_at?->diffForHumans()??'Recently' }}
          </div>
        </div>
        <svg width="12" height="12" fill="none" stroke="var(--muted-foreground)" 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>
      @empty
      <div style="padding:1.5rem 1rem;text-align:center;font-size:.8125rem;
        color:var(--muted-foreground)">No releases yet.</div>
      @endforelse
    </div>
  </div>

</div>

@endsection
