@extends('layouts.admin')

@section('title', 'Company Advisories - ' . ($appName ?? 'ElevateWell') . ' Admin')

@section('content')
<div class="space-y-6" x-data="{ showCreateModal: false, editModalOpen: false, currentAdvisory: {} }">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <h1 class="text-2xl font-black text-slate-900 dark:text-white tracking-tight">Company Advisories</h1>
            <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">Publish and manage official memoranda, policy announcements, and system alerts for all members.</p>
        </div>
        <button @click="showCreateModal = true; $nextTick(() => { if (window.lucide) lucide.createIcons(); })" 
            class="inline-flex items-center gap-2 px-4 py-2.5 bg-sky-600 hover:bg-sky-500 text-white rounded-xl text-xs font-bold shadow-xs transition active:scale-95">
            <i data-lucide="plus-circle" class="w-4 h-4"></i>
            <span>Post New Advisory</span>
        </button>
    </div>

    <!-- KPI Summary Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
        <div class="bg-white dark:bg-slate-900 rounded-2xl p-5 border border-slate-200 dark:border-slate-800 shadow-xs flex items-center justify-between">
            <div>
                <p class="text-xs font-bold text-slate-400 uppercase tracking-wider">Total Advisories</p>
                <h3 class="text-2xl font-black text-slate-900 dark:text-white mt-1">{{ $totalCount }}</h3>
                <p class="text-[11px] text-slate-500 mt-0.5">Historical broadcasts</p>
            </div>
            <div class="w-12 h-12 rounded-2xl bg-sky-50 dark:bg-sky-950/50 text-sky-600 dark:text-sky-400 flex items-center justify-center">
                <i data-lucide="megaphone" class="w-6 h-6"></i>
            </div>
        </div>

        <div class="bg-white dark:bg-slate-900 rounded-2xl p-5 border border-slate-200 dark:border-slate-800 shadow-xs flex items-center justify-between">
            <div>
                <p class="text-xs font-bold text-slate-400 uppercase tracking-wider">Active Broadcasts</p>
                <h3 class="text-2xl font-black text-emerald-600 dark:text-emerald-400 mt-1">{{ $activeCount }}</h3>
                <p class="text-[11px] text-emerald-600/80 dark:text-emerald-400/80 mt-0.5">Visible to all members</p>
            </div>
            <div class="w-12 h-12 rounded-2xl bg-emerald-50 dark:bg-emerald-950/50 text-emerald-600 dark:text-emerald-400 flex items-center justify-center">
                <i data-lucide="check-circle" class="w-6 h-6"></i>
            </div>
        </div>

        <div class="bg-white dark:bg-slate-900 rounded-2xl p-5 border border-slate-200 dark:border-slate-800 shadow-xs flex items-center justify-between">
            <div>
                <p class="text-xs font-bold text-slate-400 uppercase tracking-wider">Member Portal Sync</p>
                <h3 class="text-2xl font-black text-purple-600 dark:text-purple-400 mt-1">Live Sync</h3>
                <p class="text-[11px] text-slate-500 mt-0.5">Instant push on post</p>
            </div>
            <div class="w-12 h-12 rounded-2xl bg-purple-50 dark:bg-purple-950/50 text-purple-600 dark:text-purple-400 flex items-center justify-center">
                <i data-lucide="radio" class="w-6 h-6"></i>
            </div>
        </div>
    </div>

    <!-- Search & Filter Bar -->
    <div class="bg-white dark:bg-slate-900 rounded-2xl p-4 border border-slate-200 dark:border-slate-800 shadow-xs">
        <form method="GET" action="{{ route('admin.advisories') }}" class="grid grid-cols-1 sm:grid-cols-3 gap-3">
            <div class="relative sm:col-span-2">
                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-slate-400">
                    <i data-lucide="search" class="w-4 h-4"></i>
                </div>
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Search by title, series number, content..."
                    class="w-full pl-9 pr-3 py-2 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl text-xs text-slate-900 dark:text-white placeholder-slate-400 focus:outline-none focus:ring-1 focus:ring-sky-600">
            </div>

            <div class="flex items-center gap-2">
                <select name="category" onchange="this.form.submit()"
                    class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl text-xs font-semibold text-slate-700 dark:text-slate-200 focus:outline-none focus:ring-1 focus:ring-sky-600">
                    <option value="">All Categories</option>
                    <option value="GENERAL" {{ request('category') === 'GENERAL' ? 'selected' : '' }}>General Announcement</option>
                    <option value="SYSTEM" {{ request('category') === 'SYSTEM' ? 'selected' : '' }}>System Update</option>
                    <option value="PAYOUT" {{ request('category') === 'PAYOUT' ? 'selected' : '' }}>Payout / Finance</option>
                    <option value="HOLIDAY" {{ request('category') === 'HOLIDAY' ? 'selected' : '' }}>Holiday Notice</option>
                    <option value="POLICY" {{ request('category') === 'POLICY' ? 'selected' : '' }}>Policy & Compliance</option>
                </select>
                @if(request('search') || request('category'))
                    <a href="{{ route('admin.advisories') }}" class="px-3 py-2 bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 text-slate-600 dark:text-slate-300 rounded-xl text-xs font-bold transition">
                        Clear
                    </a>
                @endif
            </div>
        </form>
    </div>

    <!-- Advisories Table -->
    <div class="bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-800 shadow-xs overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left text-xs">
                <thead class="bg-slate-50 dark:bg-slate-800/60 text-slate-400 dark:text-slate-500 font-bold border-b border-slate-200 dark:border-slate-800">
                    <tr>
                        <th class="p-4">Series & Date</th>
                        <th class="p-4">Title & Details</th>
                        <th class="p-4">Category</th>
                        <th class="p-4">Status</th>
                        <th class="p-4 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 dark:divide-slate-800 text-slate-700 dark:text-slate-300">
                    @forelse($advisories as $adv)
                        <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/40 transition">
                            <td class="p-4 whitespace-nowrap">
                                <span class="font-mono font-bold text-sky-700 dark:text-sky-400 block">{{ $adv->series_number }}</span>
                                <span class="text-[11px] text-slate-400">{{ $adv->created_at->format('M d, Y') }}</span>
                            </td>
                            <td class="p-4">
                                <p class="font-bold text-slate-900 dark:text-white text-sm">{{ $adv->title }}</p>
                                <p class="text-[11px] text-slate-500 dark:text-slate-400 mt-1 line-clamp-2">{{ Str::limit($adv->content, 120) }}</p>
                            </td>
                            <td class="p-4 whitespace-nowrap">
                                <span class="px-2.5 py-1 rounded-full text-[10px] font-extrabold uppercase bg-sky-100 dark:bg-sky-950/60 text-sky-800 dark:text-sky-300 border border-sky-200 dark:border-sky-800">
                                    {{ $adv->category }}
                                </span>
                            </td>
                            <td class="p-4 whitespace-nowrap">
                                @if($adv->is_active)
                                    <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[10px] font-bold bg-emerald-100 dark:bg-emerald-950/60 text-emerald-800 dark:text-emerald-300 border border-emerald-200 dark:border-emerald-800">
                                        <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
                                        Active
                                    </span>
                                @else
                                    <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[10px] font-bold bg-slate-100 dark:bg-slate-800 text-slate-500 border border-slate-200 dark:border-slate-700">
                                        <span class="w-1.5 h-1.5 rounded-full bg-slate-400"></span>
                                        Hidden
                                    </span>
                                @endif
                            </td>
                            <td class="p-4 text-right whitespace-nowrap">
                                <div class="inline-flex items-center gap-1">
                                    <button @click="currentAdvisory = {{ json_encode($adv) }}; editModalOpen = true; $nextTick(() => { if (window.lucide) lucide.createIcons(); })"
                                        class="p-1.5 bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-600 dark:text-slate-200 rounded-lg transition" title="Edit Advisory">
                                        <i data-lucide="edit-3" class="w-3.5 h-3.5"></i>
                                    </button>
                                    <form method="POST" action="{{ route('admin.advisories.delete', $adv->id) }}" onsubmit="return confirm('Are you sure you want to delete this advisory?');" class="inline">
                                        @csrf
                                        <button type="submit" class="p-1.5 bg-rose-50 hover:bg-rose-100 dark:bg-rose-950/40 dark:hover:bg-rose-900 text-rose-600 dark:text-rose-400 rounded-lg transition" title="Delete Advisory">
                                            <i data-lucide="trash-2" class="w-3.5 h-3.5"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="p-8 text-center text-slate-400">
                                No advisories found matching your query.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($advisories->hasPages())
            <div class="p-4 border-t border-slate-100 dark:border-slate-800">
                {{ $advisories->links() }}
            </div>
        @endif
    </div>

    <!-- POST NEW ADVISORY MODAL -->
    <div x-show="showCreateModal" 
         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="fixed inset-0 z-50 overflow-y-auto bg-slate-900/60 backdrop-blur-xs flex items-center justify-center p-4"
         style="display: none;">
        <div class="bg-white dark:bg-slate-900 rounded-3xl max-w-lg w-full p-6 shadow-2xl border border-slate-200 dark:border-slate-800 space-y-4" 
             @click.outside="showCreateModal = false">
            <div class="flex items-center justify-between pb-3 border-b border-slate-100 dark:border-slate-800">
                <div class="flex items-center gap-2.5">
                    <div class="w-8 h-8 rounded-xl bg-sky-50 dark:bg-sky-950/40 text-sky-600 dark:text-sky-400 flex items-center justify-center">
                        <i data-lucide="megaphone" class="w-4 h-4"></i>
                    </div>
                    <div>
                        <h3 class="text-base font-bold text-slate-900 dark:text-white">Post New Advisory</h3>
                        <p class="text-[11px] text-slate-500">Instantly broadcast to all distributor dashboards.</p>
                    </div>
                </div>
                <button @click="showCreateModal = false" class="p-1 rounded-lg text-slate-400 hover:text-slate-600 dark:hover:text-white">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>

            <form method="POST" action="{{ route('admin.advisories.store') }}" class="space-y-3.5 text-xs">
                @csrf
                <div>
                    <label class="text-[10px] text-slate-500 dark:text-slate-400 font-bold block mb-1">Advisory Title</label>
                    <input type="text" name="title" required placeholder="e.g. Scheduled System Maintenance & Payout Release"
                        class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl font-bold text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-sky-600">
                </div>

                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label class="text-[10px] text-slate-500 dark:text-slate-400 font-bold block mb-1">Category</label>
                        <select name="category" required class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl font-semibold text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-sky-600">
                            <option value="GENERAL">General Notice</option>
                            <option value="SYSTEM">System Update</option>
                            <option value="PAYOUT">Payout Advisory</option>
                            <option value="HOLIDAY">Holiday Schedule</option>
                            <option value="POLICY">Policy & Guidelines</option>
                        </select>
                    </div>
                    <div>
                        <label class="text-[10px] text-slate-500 dark:text-slate-400 font-bold block mb-1">Series Number (Optional)</label>
                        <input type="text" name="series_number" placeholder="Auto-generated if blank"
                            class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl font-mono text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-sky-600">
                    </div>
                </div>

                <div>
                    <label class="text-[10px] text-slate-500 dark:text-slate-400 font-bold block mb-1">Advisory Content / Body</label>
                    <textarea name="content" rows="5" required placeholder="Full details of the announcement, schedules, instructions for members..."
                        class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-sky-600"></textarea>
                </div>

                <div>
                    <label class="text-[10px] text-slate-500 dark:text-slate-400 font-bold block mb-1">Visibility Status</label>
                    <select name="is_active" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl font-semibold text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-sky-600">
                        <option value="1">Active (Published Immediately to Members)</option>
                        <option value="0">Draft / Hidden</option>
                    </select>
                </div>

                <div class="pt-3 border-t border-slate-100 dark:border-slate-800 flex items-center justify-end gap-2">
                    <button type="button" @click="showCreateModal = false" class="px-4 py-2 border border-slate-200 dark:border-slate-700 rounded-xl text-xs font-bold text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800">
                        Cancel
                    </button>
                    <button type="submit" class="px-5 py-2 bg-sky-600 hover:bg-sky-500 text-white rounded-xl text-xs font-bold shadow-xs">
                        Publish Advisory
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- EDIT ADVISORY MODAL -->
    <div x-show="editModalOpen" 
         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="fixed inset-0 z-50 overflow-y-auto bg-slate-900/60 backdrop-blur-xs flex items-center justify-center p-4"
         style="display: none;">
        <div class="bg-white dark:bg-slate-900 rounded-3xl max-w-lg w-full p-6 shadow-2xl border border-slate-200 dark:border-slate-800 space-y-4" 
             @click.outside="editModalOpen = false">
            <div class="flex items-center justify-between pb-3 border-b border-slate-100 dark:border-slate-800">
                <div class="flex items-center gap-2.5">
                    <div class="w-8 h-8 rounded-xl bg-sky-50 dark:bg-sky-950/40 text-sky-600 dark:text-sky-400 flex items-center justify-center">
                        <i data-lucide="edit-3" class="w-4 h-4"></i>
                    </div>
                    <div>
                        <h3 class="text-base font-bold text-slate-900 dark:text-white">Edit Advisory</h3>
                        <p class="text-[11px] text-slate-500" x-text="currentAdvisory.series_number"></p>
                    </div>
                </div>
                <button @click="editModalOpen = false" class="p-1 rounded-lg text-slate-400 hover:text-slate-600 dark:hover:text-white">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>

            <form method="POST" :action="'{{ url('/admin/advisories') }}/' + currentAdvisory.id" class="space-y-3.5 text-xs">
                @csrf
                <div>
                    <label class="text-[10px] text-slate-500 dark:text-slate-400 font-bold block mb-1">Advisory Title</label>
                    <input type="text" name="title" x-model="currentAdvisory.title" required
                        class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl font-bold text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-sky-600">
                </div>

                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label class="text-[10px] text-slate-500 dark:text-slate-400 font-bold block mb-1">Category</label>
                        <select name="category" x-model="currentAdvisory.category" required 
                            class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl font-semibold text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-sky-600">
                            <option value="GENERAL">General Notice</option>
                            <option value="SYSTEM">System Update</option>
                            <option value="PAYOUT">Payout Advisory</option>
                            <option value="HOLIDAY">Holiday Schedule</option>
                            <option value="POLICY">Policy & Guidelines</option>
                        </select>
                    </div>
                    <div>
                        <label class="text-[10px] text-slate-500 dark:text-slate-400 font-bold block mb-1">Series Number</label>
                        <input type="text" name="series_number" x-model="currentAdvisory.series_number" required
                            class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl font-mono text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-sky-600">
                    </div>
                </div>

                <div>
                    <label class="text-[10px] text-slate-500 dark:text-slate-400 font-bold block mb-1">Advisory Content / Body</label>
                    <textarea name="content" rows="5" x-model="currentAdvisory.content" required
                        class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-sky-600"></textarea>
                </div>

                <div>
                    <label class="text-[10px] text-slate-500 dark:text-slate-400 font-bold block mb-1">Visibility Status</label>
                    <select name="is_active" x-model="currentAdvisory.is_active" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl font-semibold text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-sky-600">
                        <option :value="1">Active (Published Immediately to Members)</option>
                        <option :value="0">Draft / Hidden</option>
                    </select>
                </div>

                <div class="pt-3 border-t border-slate-100 dark:border-slate-800 flex items-center justify-end gap-2">
                    <button type="button" @click="editModalOpen = false" class="px-4 py-2 border border-slate-200 dark:border-slate-700 rounded-xl text-xs font-bold text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800">
                        Cancel
                    </button>
                    <button type="submit" class="px-5 py-2 bg-sky-600 hover:bg-sky-500 text-white rounded-xl text-xs font-bold shadow-xs">
                        Save Changes
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection