@extends('layouts.app')

@section('title', 'Notices & Announcements')

@section('breadcrumbs')
    <div class="breadcrumb">
        <a href="{{ route('dashboard') }}">Dashboard</a>
        <span class="separator">/</span>
        <span class="current">Notices</span>
    </div>
@endsection

@section('content')
<div x-data="{
    showExpired: {{ $showExpired ? 'true' : 'false' }},
    deleteId: null,
    showDeleteModal: false
}">

    {{-- Page Header --}}
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
        <div>
            <h1 class="font-display text-2xl font-semibold text-gray-900">Notices & Announcements</h1>
            <p class="text-sm text-gray-500 mt-1">Stay informed with company news and updates</p>
        </div>
        @if(in_array(auth()->user()->role, ['company_admin', 'company_user']))
            <a href="{{ route('notices.create') }}" class="btn-primary">
                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                Post Notice
            </a>
        @endif
    </div>

    {{-- Type Tabs --}}
    <div class="flex flex-wrap items-center gap-2 mb-5">
        <a href="{{ route('notices.index', ['type' => 'all']) }}"
           class="inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-lg text-sm font-medium transition-all duration-150
                  {{ $type === 'all' && !$showExpired ? 'bg-primary-600 text-white shadow-primary' : 'bg-white text-gray-600 border border-gray-200 hover:bg-gray-50' }}">
            All
            <span class="text-xs opacity-75">({{ $typeCounts['all'] }})</span>
        </a>
        <a href="{{ route('notices.index', ['type' => 'general']) }}"
           class="inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-lg text-sm font-medium transition-all duration-150
                  {{ $type === 'general' && !$showExpired ? 'bg-primary-600 text-white shadow-primary' : 'bg-white text-gray-600 border border-gray-200 hover:bg-gray-50' }}">
            <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 01-3.46 0"/></svg>
            General
            <span class="text-xs opacity-75">({{ $typeCounts['general'] }})</span>
        </a>
        <a href="{{ route('notices.index', ['type' => 'policy']) }}"
           class="inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-lg text-sm font-medium transition-all duration-150
                  {{ $type === 'policy' && !$showExpired ? 'bg-primary-600 text-white shadow-primary' : 'bg-white text-gray-600 border border-gray-200 hover:bg-gray-50' }}">
            <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
            Policy
            <span class="text-xs opacity-75">({{ $typeCounts['policy'] }})</span>
        </a>
        <a href="{{ route('notices.index', ['type' => 'event']) }}"
           class="inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-lg text-sm font-medium transition-all duration-150
                  {{ $type === 'event' && !$showExpired ? 'bg-primary-600 text-white shadow-primary' : 'bg-white text-gray-600 border border-gray-200 hover:bg-gray-50' }}">
            <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
            Events
            <span class="text-xs opacity-75">({{ $typeCounts['event'] }})</span>
        </a>
        <a href="{{ route('notices.index', ['type' => 'urgent']) }}"
           class="inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-lg text-sm font-medium transition-all duration-150
                  {{ $type === 'urgent' && !$showExpired ? 'bg-primary-600 text-white shadow-primary' : 'bg-white text-gray-600 border border-gray-200 hover:bg-gray-50' }}">
            <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.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"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
            Urgent
            <span class="text-xs opacity-75">({{ $typeCounts['urgent'] }})</span>
        </a>

        {{-- Separator --}}
        <div class="hidden sm:block w-px h-6 bg-gray-200 mx-1"></div>

        {{-- Show Expired Toggle --}}
        @if($expiredCount > 0)
            <a href="{{ route('notices.index', ['show_expired' => !$showExpired ? '1' : '0', 'type' => $type]) }}"
               class="inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-lg text-sm font-medium transition-all duration-150
                      {{ $showExpired ? 'bg-gray-700 text-white' : 'bg-white text-gray-500 border border-gray-200 hover:bg-gray-50' }}">
                <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                Expired
                <span class="text-xs opacity-75">({{ $expiredCount }})</span>
            </a>
        @endif
    </div>

    {{-- Notices List --}}
    @if($notices->isEmpty())
        <div class="card">
            <div class="empty-state">
                <div class="empty-state-icon">
                    <svg class="w-16 h-16 mx-auto text-gray-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 01-3.46 0"/></svg>
                </div>
                <p class="empty-state-title">{{ $showExpired ? 'No expired notices' : 'No notices yet' }}</p>
                <p class="empty-state-text">{{ $showExpired ? 'There are no expired notices to display.' : 'Be the first to share something with the team.' }}</p>
                @if(!$showExpired && in_array(auth()->user()->role, ['company_admin', 'company_user']))
                    <a href="{{ route('notices.create') }}" class="btn-primary">Post First Notice</a>
                @endif
            </div>
        </div>
    @else
        <div class="space-y-3">
            @foreach($notices as $notice)
                <div class="card {{ $notice->type === 'urgent' ? 'border-l-4 border-l-danger-500' : '' }} {{ $notice->is_expired ? 'opacity-60' : '' }} animate-fade-up"
                     style="animation-delay: {{ $loop->index * 0.04 }}s">
                    <div class="p-5">
                        <div class="flex items-start justify-between gap-4">
                            {{-- Left: Content --}}
                            <div class="flex-1 min-w-0">
                                <div class="flex items-center gap-2 mb-2 flex-wrap">
                                    @if($notice->is_pinned)
                                        <span class="inline-flex items-center gap-1 text-xxs font-semibold text-primary-600 bg-primary-50 px-2 py-0.5 rounded-full">
                                            <svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M16 12V4h1V2H7v2h1v8l-2 2v2h5.2v6h1.6v-6H18v-2l-2-2z"/></svg>
                                            Pinned
                                        </span>
                                    @endif
                                    <span class="badge {{ $notice->type_badge_class }}">
                                        {{ $notice->type_label }}
                                    </span>
                                    @if($notice->is_expired)
                                        <span class="badge badge-inactive">Expired</span>
                                    @endif
                                </div>

                                <a href="{{ route('notices.show', $notice->id) }}" class="block group">
                                    <h3 class="font-display text-lg font-semibold text-gray-800 group-hover:text-primary-600 transition-colors">
                                        {{ $notice->title }}
                                    </h3>
                                    <p class="text-sm text-gray-500 mt-1.5 line-clamp-2">
                                        {{ $notice->content_preview }}
                                    </p>
                                </a>

                                <div class="flex items-center gap-3 mt-3 text-xs text-gray-400">
                                    {{-- Posted by --}}
                                    <span class="flex items-center gap-1.5">
                                        @php
                                            $initial = strtoupper(substr($notice->postedBy->name ?? 'U', 0, 1));
                                            $gradients = [
                                                'A' => 'from-primary-600 to-accent-500', 'B' => 'from-primary-600 to-accent-500',
                                                'C' => 'from-primary-600 to-accent-500', 'D' => 'from-primary-600 to-accent-500',
                                                'E' => 'from-success-500 to-success-600', 'F' => 'from-success-500 to-success-600',
                                                'G' => 'from-success-500 to-success-600', 'H' => 'from-success-500 to-success-600',
                                                'I' => 'from-violet-500 to-pink-500', 'J' => 'from-violet-500 to-pink-500',
                                                'K' => 'from-violet-500 to-pink-500', 'L' => 'from-violet-500 to-pink-500',
                                                'M' => 'from-warning-500 to-danger-500', 'N' => 'from-warning-500 to-danger-500',
                                                'O' => 'from-warning-500 to-danger-500', 'P' => 'from-warning-500 to-danger-500',
                                                'Q' => 'from-accent-500 to-indigo-500', 'R' => 'from-accent-500 to-indigo-500',
                                                'S' => 'from-accent-500 to-indigo-500', 'T' => 'from-accent-500 to-indigo-500',
                                                'U' => 'from-pink-500 to-violet-500', 'V' => 'from-pink-500 to-violet-500',
                                                'W' => 'from-pink-500 to-violet-500', 'X' => 'from-pink-500 to-violet-500',
                                                'Y' => 'from-pink-500 to-violet-500', 'Z' => 'from-pink-500 to-violet-500',
                                            ];
                                            $gradient = $gradients[$initial] ?? 'from-primary-600 to-accent-500';
                                        @endphp
                                        <span class="avatar avatar-xs bg-gradient-to-br {{ $gradient }}">{{ $initial }}</span>
                                        {{ $notice->postedBy->name ?? 'Unknown' }}
                                    </span>

                                    <span class="text-gray-300">&middot;</span>

                                    {{-- Published date --}}
                                    <span>{{ $notice->published_at->format('d M Y, h:i A') }}</span>

                                    @if($notice->expires_at)
                                        <span class="text-gray-300">&middot;</span>
                                        <span class="{{ $notice->is_expired ? 'text-danger-500' : '' }}">
                                            {{ $notice->is_expired ? 'Expired' : 'Expires' }} {{ $notice->expires_at->format('d M Y') }}
                                        </span>
                                    @endif
                                </div>
                            </div>

                            {{-- Right: Actions --}}
                            @if(auth()->user()->role === 'company_admin' || (auth()->user()->role === 'company_user' && $notice->posted_by === auth()->id()))
                                <div class="flex items-center gap-1 flex-shrink-0">
                                    @if(auth()->user()->role === 'company_admin')
                                        <form action="{{ route('notices.pin', $notice->id) }}" method="POST">
                                            @csrf
                                            <button type="submit" class="btn-icon" title="{{ $notice->is_pinned ? 'Unpin' : 'Pin' }}">
                                                @if($notice->is_pinned)
                                                    <svg class="w-4 h-4 text-primary-600" viewBox="0 0 24 24" fill="currentColor"><path d="M16 12V4h1V2H7v2h1v8l-2 2v2h5.2v6h1.6v-6H18v-2l-2-2z"/></svg>
                                                @else
                                                    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="17" x2="12" y2="22"/><path d="M5 17h14v-1.76a2 2 0 00-1.11-1.79l-1.78-.9A2 2 0 0115 10.76V6h1V4H8v2h1v4.76a2 2 0 01-1.11 1.79l-1.78.9A2 2 0 005 15.24V17z"/></svg>
                                                @endif
                                            </button>
                                        </form>
                                    @endif

                                    <a href="{{ route('notices.edit', $notice->id) }}" class="btn-icon" title="Edit">
                                        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                                    </a>

                                    <button type="button"
                                            class="btn-icon"
                                            title="Delete"
                                            @click="deleteId = {{ $notice->id }}; showDeleteModal = true">
                                        <svg class="w-4 h-4 text-danger-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>
                                    </button>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        {{-- Pagination --}}
        <div class="mt-6">
            {{ $notices->appends(request()->query())->links() }}
        </div>
    @endif

    {{-- Delete Confirmation Modal --}}
    <div x-show="showDeleteModal"
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="transition ease-in duration-150"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         class="modal-backdrop"
         @click.self="showDeleteModal = false"
         style="display: none;">
        <div class="modal animate-modal-in" @click.stop>
            <div class="modal-header">
                <h3 class="font-display text-lg font-semibold text-gray-800">Delete Notice</h3>
            </div>
            <div class="modal-body">
                <p class="text-sm text-gray-600">Are you sure you want to delete this notice? This action cannot be undone.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn-secondary" @click="showDeleteModal = false">Cancel</button>
                <form :action="'/notices/' + deleteId" method="POST" class="inline">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn-danger">Delete Notice</button>
                </form>
            </div>
        </div>
    </div>

</div>
@endsection