@extends('layouts.admin')

@section('title', 'Article Analysis')

@push('styles')
<style>
/* ══════════════════════════════════════════════════════════════
   ARTICLE ANALYSIS - REDESIGNED UI/UX
   Modern Dashboard Design with Bootstrap + Custom CSS
   ══════════════════════════════════════════════════════════════ */

/* Main Layout */
.article-analysis-container {
    padding: 20px;
    background: #FAFBFC;
    min-height: 100vh;
}

/* Header Section */
.article-header {
    background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 28px 32px;
    margin-bottom: 32px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.article-header h1 {
    color: #1E293B;
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

.article-header h1 .highlight {
    color: var(--primary-color, #F59E0B);
    background: linear-gradient(135deg, #F59E0B, #D97706);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.article-header p {
    color: #64748B;
    font-size: 1.1rem;
    margin-bottom: 0;
    line-height: 1.6;
}

.header-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
/* Statistics Cards */
.stats-section {
    margin-bottom: 32px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.stat-card {
    background: linear-gradient(135deg, #FFFFFF 0%, #F1F5F9 100%);
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 24px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    border-color: var(--primary-color, #F59E0B);
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, var(--primary-color, #F59E0B), var(--secondary-color, #D97706));
}

.stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, var(--primary-color, #F59E0B), var(--secondary-color, #D97706));
    color: white;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: #1E293B;
    line-height: 1;
    margin-bottom: 8px;
}
.stat-label {
    font-size: 1rem;
    color: #64748B;
    font-weight: 600;
    margin-bottom: 8px;
}

.stat-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-badge.primary { background: #FEF3C7; color: #92400E; }
.stat-badge.success { background: #D1FAE5; color: #065F46; }
.stat-badge.info { background: #DBEAFE; color: #1E40AF; }
.stat-badge.warning { background: #FEF3C7; color: #92400E; }

/* Tabs Navigation */
.tabs-section {
    margin-bottom: 32px;
}

.nav-tabs-custom {
    border: none;
    background: #FFFFFF;
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 0;
}

.nav-tabs-custom .nav-link {
    color: #64748B;
    border: none;
    border-radius: 8px;
    padding: 12px 20px;
    font-weight: 600;
    transition: all 0.2s ease;
    position: relative;
}

.nav-tabs-custom .nav-link:hover {
    color: var(--primary-color, #F59E0B);
    background: #FEF3C7;
}

.nav-tabs-custom .nav-link.active {
    color: white;
    background: linear-gradient(135deg, var(--primary-color, #F59E0B), var(--secondary-color, #D97706));
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}
/* Filters Section */
.filters-section {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 32px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    align-items: end;
}

.filter-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}

.filter-group .form-control,
.filter-group .form-select {
    border: 2px solid #E5E7EB;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    transition: all 0.2s ease;
}

.filter-group .form-control:focus,
.filter-group .form-select:focus {
    border-color: var(--primary-color, #F59E0B);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
    outline: none;
}

/* Table Section */
.content-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 32px;
}

.table-section {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.table-header {
    background: linear-gradient(135deg, #F8FAFC 0%, #E2E8F0 100%);
    padding: 20px 24px;
    border-bottom: 1px solid #E2E8F0;
}
.articles-table {
    width: 100%;
    margin: 0;
}

.articles-table th {
    background: linear-gradient(135deg, #FAFBFC 0%, #F1F5F9 100%);
    border-bottom: 2px solid #E2E8F0;
    padding: 16px 20px;
    font-weight: 600;
    color: #374151;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.articles-table td {
    padding: 20px;
    border-bottom: 1px solid #F1F5F9;
    vertical-align: middle;
}

.articles-table tbody tr:hover {
    background: linear-gradient(135deg, #FEFEFE 0%, #F8FAFC 100%);
    cursor: pointer;
}

/* Article Thumbnail */
.article-thumbnail {
    width: 60px;
    height: 45px;
    border-radius: 8px;
    object-fit: cover;
    border: 2px solid #E5E7EB;
}

.thumbnail-placeholder {
    width: 60px;
    height: 45px;
    background: linear-gradient(135deg, #F3F4F6, #E5E7EB);
    border: 2px solid #E5E7EB;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9CA3AF;
}

/* Badges and Status */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.badge.api { background: #DBEAFE; color: #1E40AF; }
.badge.manual { background: #F3E8FF; color: #7C3AED; }
.badge.published { background: #D1FAE5; color: #065F46; }
.badge.draft { background: #FEF3C7; color: #92400E; }

/* Sentiment Badges */
.sentiment-positive { background: #DCFCE7; color: #166534; border: 1px solid #BBF7D0; }
.sentiment-negative { background: #FEE2E2; color: #991B1B; border: 1px solid #FECACA; }
.sentiment-neutral { background: #F3F4F6; color: #374151; border: 1px solid #D1D5DB; }

/* Risk Score */
.risk-score { font-weight: 700; font-size: 14px; }
.risk-positive { color: #059669; }
.risk-negative { color: #DC2626; }
.risk-neutral { color: #6B7280; }

/* Action Buttons */
.action-buttons { display: flex; gap: 8px; align-items: center; }

.btn-action {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-action:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }

.btn-view { border-color: #3B82F6; color: #3B82F6; background: #DBEAFE; }
.btn-view:hover { background: #3B82F6; color: white; }
.btn-analyze { border-color: #8B5CF6; color: #8B5CF6; background: #F3E8FF; }
.btn-analyze:hover { background: #8B5CF6; color: white; }
.btn-publish { border-color: #10B981; color: #10B981; background: #D1FAE5; }
.btn-publish:hover { background: #10B981; color: white; }
.btn-delete { border-color: #EF4444; color: #EF4444; background: #FEE2E2; }
.btn-delete:hover { background: #EF4444; color: white; }

/* Header Action Buttons */
.btn-primary-custom {
    background: linear-gradient(135deg, var(--primary-color, #F59E0B), var(--secondary-color, #D97706));
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.btn-primary-custom:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.3);
    color: white;
}
.btn-secondary-custom {
    background: #FFFFFF;
    color: #374151;
    border: 2px solid #E5E7EB;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.btn-secondary-custom:hover {
    border-color: var(--primary-color, #F59E0B);
    color: var(--primary-color, #F59E0B);
    background: #FEF3C7;
}

/* Detail Panel */
.detail-panel {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    height: fit-content;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.detail-panel-header {
    background: linear-gradient(135deg, #F8FAFC 0%, #E2E8F0 100%);
    padding: 20px 24px;
    border-bottom: 1px solid #E2E8F0;
}

.detail-panel-body { padding: 24px; }

.detail-empty {
    text-align: center;
    padding: 40px 20px;
    color: #64748B;
}

.detail-empty .icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #F3F4F6, #E5E7EB);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px auto;
    font-size: 32px;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .content-layout { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .article-analysis-container { padding: 16px; }
    .article-header { padding: 20px 24px; }
    .article-header h1 { font-size: 2rem; }
    .stats-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
    .filters-grid { grid-template-columns: 1fr; gap: 12px; }
}
</style>
@endpush
@section('content')
<div class="article-analysis-container">
    {{-- Modern Page Header --}}
    <div class="article-header">
        <div class="d-flex justify-content-between align-items-start flex-wrap gap-3">
            <div>
                <h1>Article <span class="highlight">Analysis</span></h1>
                <p>Kelola artikel berita, analisis sentimen, dan integrasi Risk Score</p>
            </div>
            <div class="header-actions">
                <form method="POST" action="{{ route('admin.articles.analyze-all') }}" class="d-inline">
                    @csrf
                    <button type="submit" 
                            class="btn-primary-custom"
                            onclick="return confirm('Apakah Anda yakin ingin menganalisis semua artikel yang belum dianalisis?')">
                        <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                        </svg>
                        Refresh API
                    </button>
                </form>
                <a href="#" class="btn-secondary-custom" onclick="alert('Feature coming soon!')">
                    <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                    </svg>
                    Create Manual Article
                </a>
            </div>
        </div>
    </div>

    {{-- Modern Statistics Cards --}}
    <div class="stats-section">
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-icon">📰</div>
                <div>
                    <div class="stat-number">{{ number_format($totalArticles) }}</div>
                    <div class="stat-label">Total Articles</div>
                    <span class="stat-badge primary">All sources</span>
                </div>
            </div>
            
            <div class="stat-card">
                <div class="stat-icon">🌐</div>
                <div>
                    <div class="stat-number">{{ number_format($apiArticles) }}</div>
                    <div class="stat-label">API Articles</div>
                    <span class="stat-badge info">External feeds</span>
                </div>
            </div>
            
            <div class="stat-card">
                <div class="stat-icon">✍️</div>
                <div>
                    <div class="stat-number">{{ number_format($manualArticles) }}</div>
                    <div class="stat-label">Manual Articles</div>
                    <span class="stat-badge warning">Created by admin</span>
                </div>
            </div>
        </div>
        
        {{-- Additional Statistics Row --}}
        <div class="row mt-4">
            <div class="col-md-4">
                <div class="stat-card">
                    <div class="stat-icon">🔍</div>
                    <div>
                        <div class="stat-number">{{ number_format($analyzedArticles) }}</div>
                        <div class="stat-label">Analyzed Articles</div>
                        <span class="stat-badge success">{{ $totalArticles > 0 ? round(($analyzedArticles / $totalArticles) * 100) : 0 }}% completed</span>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="stat-card">
                    <div class="stat-icon">📌</div>
                    <div>
                        <div class="stat-number">{{ number_format($publishedArticles) }}</div>
                        <div class="stat-label">Published Articles</div>
                        <span class="stat-badge success">Live</span>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="stat-card">
                    <div class="stat-icon">⏳</div>
                    <div>
                        <div class="stat-number">{{ number_format($pendingAnalysis) }}</div>
                        <div class="stat-label">Pending Analysis</div>
                        <span class="stat-badge warning">Queue</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Tabs Navigation --}}
    <div class="tabs-section">
        <ul class="nav nav-tabs nav-tabs-custom">
            <li class="nav-item">
                <a class="nav-link active" href="#" data-tab="all">
                    <span>All Articles</span>
                    <span class="badge badge-light ms-2">{{ number_format($totalArticles) }}</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" data-tab="api">
                    <span>API Articles</span>
                    <span class="badge badge-light ms-2">{{ number_format($apiArticles) }}</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" data-tab="manual">
                    <span>Manual Articles</span>
                    <span class="badge badge-light ms-2">{{ number_format($manualArticles) }}</span>
                </a>
            </li>
        </ul>
    </div>
    
    {{-- Filters Section --}}
    <div class="filters-section">
        <form method="GET" action="{{ route('admin.articles.index') }}" class="filters-grid">
            <div class="filter-group">
                <label for="search">Search Articles</label>
                <input type="text" 
                       id="search" 
                       name="search" 
                       class="form-control" 
                       placeholder="Search by title, description..."
                       value="{{ request('search') }}">
            </div>
            
            <div class="filter-group">
                <label for="category">Category</label>
                <select id="category" name="category" class="form-select">
                    <option value="">All Categories</option>
                    @foreach(\App\Models\NewsCategory::all() as $category)
                        <option value="{{ $category->id }}" {{ request('category') == $category->id ? 'selected' : '' }}>
                            {{ $category->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            
            <div class="filter-group">
                <label for="country">Country</label>
                <select id="country" name="country" class="form-select">
                    <option value="">All Countries</option>
                    @foreach(\App\Models\Country::all() as $country)
                        <option value="{{ $country->id }}" {{ request('country') == $country->id ? 'selected' : '' }}>
                            {{ $country->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            
            <div class="filter-group">
                <label for="sentiment">Sentiment</label>
                <select id="sentiment" name="sentiment" class="form-select">
                    <option value="">All Sentiments</option>
                    <option value="positive" {{ request('sentiment') == 'positive' ? 'selected' : '' }}>Positive</option>
                    <option value="neutral" {{ request('sentiment') == 'neutral' ? 'selected' : '' }}>Neutral</option>
                    <option value="negative" {{ request('sentiment') == 'negative' ? 'selected' : '' }}>Negative</option>
                </select>
            </div>
            
            <div class="filter-group">
                <label>&nbsp;</label>
                <div class="d-flex gap-2">
                    <button type="submit" class="btn btn-primary flex-1">
                        <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                        </svg>
                        Filter
                    </button>
                    <a href="{{ route('admin.articles.index') }}" class="btn btn-outline-secondary">Reset</a>
                </div>
            </div>
        </form>
    </div>
    
    {{-- Main Content Layout with Table and Detail Panel --}}
    <div class="content-layout">
        {{-- Articles Table Section --}}
        <div class="table-section">
            <div class="table-header">
                <div class="d-flex justify-content-between align-items-center">
                    <h3>Article Management</h3>
                    <div class="d-flex align-items-center gap-3">
                        {{-- Bulk Actions Bar (Hidden by default) --}}
                        <div id="bulk-actions-bar" class="d-none">
                            <div class="d-flex align-items-center gap-2">
                                <span class="small text-muted" id="selected-count">0 selected</span>
                                <div class="btn-group" role="group">
                                    <button type="button" class="btn btn-sm btn-outline-success" onclick="bulkAction('publish')" title="Publish Selected">
                                        <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                        </svg>
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-warning" onclick="bulkAction('unpublish')" title="Unpublish Selected">
                                        <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7"></path>
                                        </svg>
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-info" onclick="bulkAction('analyze')" title="Analyze Selected">
                                        <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                                        </svg>
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-danger" onclick="bulkAction('delete')" title="Delete Selected">
                                        <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                                        </svg>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="table-responsive">
                <table class="articles-table">
                    <thead>
                        <tr>
                            <th width="40">
                                <input type="checkbox" id="select-all" class="form-check-input" title="Select All">
                            </th>
                            <th>Thumbnail</th>
                            <th>Title & Description</th>
                            <th>Source & Type</th>
                            <th>Category</th>
                            <th>Country</th>
                            <th>Sentiment</th>
                            <th>Status</th>
                            <th>Risk Level</th>
                            <th>Published Date</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($news as $article)
                        <tr onclick="selectArticle({{ $article->id }})" data-article-id="{{ $article->id }}" data-url="{{ $article->url }}">
                            <td onclick="event.stopPropagation();">
                                <input type="checkbox" name="article_ids[]" value="{{ $article->id }}" class="form-check-input article-checkbox">
                            </td>
                            <td>
                                @if($article->image_url)
                                    <img src="{{ $article->image_url }}" alt="Article thumbnail" class="article-thumbnail">
                                @else
                                    <div class="thumbnail-placeholder">
                                        <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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"></path>
                                        </svg>
                                    </div>
                                @endif
                            </td>
                            
                            <td>
                                <div class="article-info">
                                    <h4>
                                        @if($article->url)
                                            <a href="{{ $article->url }}" target="_blank" rel="noopener noreferrer" class="text-dark text-decoration-none hover-text-primary" onclick="event.stopPropagation();">
                                                {{ Str::limit($article->title, 60) }}
                                            </a>
                                        @else
                                            {{ Str::limit($article->title, 60) }}
                                        @endif
                                    </h4>
                                    <p>{{ Str::limit($article->description, 80) }}</p>
                                </div>
                            </td>
                            
                            <td>
                                <div>
                                    <div class="mb-1">{{ $article->source ?? 'Unknown' }}</div>
                                    @if($article->source === 'Manual')
                                        <span class="badge manual">Manual</span>
                                    @else
                                        <span class="badge api">API</span>
                                    @endif
                                </div>
                            </td>
                            
                            <td>{{ $article->newsCategory?->name ?? 'Uncategorized' }}</td>
                            
                            <td>
                                @if($article->country)
                                    <span class="badge" style="background: #DBEAFE; color: #1E40AF;">
                                        {{ $article->country->name }}
                                    </span>
                                @else
                                    <span class="badge" style="background: #F3F4F6; color: #6B7280;">Global</span>
                                @endif
                            </td>
                            
                            <td>
                                @if($article->newsSentiment)
                                    @php $sentiment = $article->newsSentiment->sentiment; @endphp
                                    <span class="badge sentiment-{{ $sentiment }}">{{ ucfirst($sentiment) }}</span>
                                @else
                                    <span class="badge" style="background: #FEE2E2; color: #DC2626;">Not Analyzed</span>
                                @endif
                            </td>
                            
                            <td>
                                @if($article->published_at)
                                    <span class="badge published">Published</span>
                                @else
                                    <span class="badge draft">Draft</span>
                                @endif
                            </td>
                            
                            <td>
                                @if($article->newsSentiment)
                                    @php
                                        $impact = 0;
                                        if ($article->newsSentiment->sentiment === 'positive') {
                                            $impact = round($article->newsSentiment->positive_score * 10);
                                        } elseif ($article->newsSentiment->sentiment === 'negative') {
                                            $impact = -round($article->newsSentiment->negative_score * 10);
                                        }
                                    @endphp
                                    <span class="risk-score {{ $impact > 0 ? 'risk-positive' : ($impact < 0 ? 'risk-negative' : 'risk-neutral') }}">
                                        @if($impact > 0)
                                            +{{ $impact }}
                                        @elseif($impact < 0)
                                            {{ $impact }}
                                        @else
                                            0
                                        @endif
                                    </span>
                                @else
                                    <span class="risk-score risk-neutral">-</span>
                                @endif
                            </td>
                            
                            <td>{{ $article->published_at ? $article->published_at->format('M d, Y') : '-' }}</td>
                            
                            <td>
                                <div class="action-buttons">
                                    <a href="{{ route('admin.articles.show', $article) }}" class="btn-action btn-view" title="View Details">
                                        <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 616 0z"></path>
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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"></path>
                                        </svg>
                                    </a>
                                    
                                    @if(!$article->newsSentiment)
                                        <form method="POST" action="{{ route('admin.articles.analyze', $article) }}" class="d-inline">
                                            @csrf
                                            <button type="submit" class="btn-action btn-analyze" title="Analyze Sentiment">
                                                <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                                                </svg>
                                            </button>
                                        </form>
                                    @endif
                                    
                                    <form method="POST" action="{{ route('admin.articles.toggle-publish', $article) }}" class="d-inline">
                                        @csrf
                                        @method('PATCH')
                                        <button type="submit" class="btn-action btn-publish" title="{{ $article->published_at ? 'Set to Draft' : 'Publish Article' }}">
                                            @if($article->published_at)
                                                <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L3 3m6.878 6.878L21 21"></path>
                                                </svg>
                                            @else
                                                <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 616 0z"></path>
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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"></path>
                                                </svg>
                                            @endif
                                        </button>
                                    </form>
                                    
                                    <form method="POST" action="{{ route('admin.articles.destroy', $article) }}" class="d-inline">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn-action btn-delete" title="Delete Article" onclick="return confirm('Are you sure you want to delete this article?')">
                                            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                                            </svg>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="11" class="text-center py-5">
                                <div class="detail-empty">
                                    <div class="icon">📄</div>
                                    <h4>No Articles Found</h4>
                                    <p>Articles from News API will appear here</p>
                                </div>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            
            {{-- Pagination --}}
            @if($news->hasPages())
                <div class="d-flex justify-content-center py-4">
                    {{ $news->links() }}
                </div>
            @endif
        </div>

        {{-- Detail Panel --}}
        <div class="detail-panel">
            <div class="detail-panel-header">
                <h3>Article Details</h3>
            </div>
            <div class="detail-panel-body">
                <div class="detail-empty">
                    <div class="icon">📄</div>
                    <h4>Select an Article</h4>
                    <p>Click on any article from the table to view detailed information including sentiment analysis, risk factors, and content preview.</p>
                </div>
            </div>
        </div>
    </div>
</div>
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Tab switching functionality
    const tabs = document.querySelectorAll('.nav-tabs-custom .nav-link');
    const tableRows = document.querySelectorAll('tbody tr[data-article-id]');
    
    tabs.forEach(tab => {
        tab.addEventListener('click', function(e) {
            e.preventDefault();
            tabs.forEach(t => t.classList.remove('active'));
            this.classList.add('active');
            
            const filterType = this.dataset.tab;
            
            tableRows.forEach(row => {
                let shouldShow = false;
                
                if (filterType === 'all') {
                    shouldShow = true;
                } else if (filterType === 'api') {
                    const sourceCell = row.querySelector('td:nth-child(4)');
                    shouldShow = sourceCell && sourceCell.textContent.includes('API');
                } else if (filterType === 'manual') {
                    const sourceCell = row.querySelector('td:nth-child(4)');
                    shouldShow = sourceCell && sourceCell.textContent.includes('Manual');
                }
                
                row.style.display = shouldShow ? '' : 'none';
            });
        });
    });
    
    // Article selection for detail panel
    window.selectArticle = function(articleId) {
        const detailPanel = document.querySelector('.detail-panel-body');
        
        detailPanel.innerHTML = `
            <div class="detail-empty">
                <div class="icon">⏳</div>
                <h4>Loading...</h4>
                <p>Fetching article details...</p>
            </div>
        `;
        
        // Find article data from table row
        const row = document.querySelector(`tr[data-article-id="${articleId}"]`);
        if (!row) return;
        
        setTimeout(() => {
            const title = row.querySelector('.article-info h4')?.textContent || 'No title';
            const description = row.querySelector('.article-info p')?.textContent || 'No description';
            const url = row.getAttribute('data-url');
            
            let originalArticleButton = '';
            if (url) {
                originalArticleButton = `<a href="${url}" target="_blank" rel="noopener noreferrer" class="btn btn-outline-info btn-sm ms-2">🌐 Read Original Article</a>`;
            } else {
                originalArticleButton = `<span class="text-muted small ms-2">Original article unavailable</span>`;
            }
            
            detailPanel.innerHTML = `
                <div class="article-detail">
                    <h4 class="mb-3">${title}</h4>
                    <p class="text-muted mb-4">${description}</p>
                    <div class="article-actions">
                        <a href="/admin/articles/${articleId}" class="btn btn-primary btn-sm">View Full Article</a>
                        ${originalArticleButton}
                    </div>
                </div>
            `;
        }, 300);
    };
    
    // Bulk actions functionality
    const selectAllCheckbox = document.querySelector('#select-all');
    const articleCheckboxes = document.querySelectorAll('.article-checkbox');
    const bulkActionsBar = document.querySelector('#bulk-actions-bar');
    const selectedCountSpan = document.querySelector('#selected-count');
    
    if (selectAllCheckbox) {
        selectAllCheckbox.addEventListener('change', function() {
            articleCheckboxes.forEach(checkbox => {
                checkbox.checked = this.checked;
            });
            updateBulkActionsVisibility();
        });
    }
    
    articleCheckboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            updateBulkActionsVisibility();
        });
    });
    
    function updateBulkActionsVisibility() {
        const checkedCheckboxes = document.querySelectorAll('.article-checkbox:checked');
        const count = checkedCheckboxes.length;
        
        if (count > 0) {
            bulkActionsBar.classList.remove('d-none');
            selectedCountSpan.textContent = `${count} selected`;
        } else {
            bulkActionsBar.classList.add('d-none');
        }
    }
    
    window.bulkAction = function(action) {
        const checkedCheckboxes = document.querySelectorAll('.article-checkbox:checked');
        const articleIds = Array.from(checkedCheckboxes).map(cb => cb.value);
        
        if (articleIds.length === 0) {
            alert('Please select articles first.');
            return;
        }
        
        let confirmMessage = '';
        switch (action) {
            case 'publish':
                confirmMessage = `Publish ${articleIds.length} selected article(s)?`;
                break;
            case 'unpublish':
                confirmMessage = `Unpublish ${articleIds.length} selected article(s)?`;
                break;
            case 'analyze':
                confirmMessage = `Analyze ${articleIds.length} selected article(s)? This may take some time.`;
                break;
            case 'delete':
                confirmMessage = `Delete ${articleIds.length} selected article(s)? This action cannot be undone.`;
                break;
        }
        
        if (!confirm(confirmMessage)) return;
        
        // Create form and submit
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = '{{ route("admin.articles.bulk-action") }}';
        
        // Add CSRF token
        const csrfToken = document.createElement('input');
        csrfToken.type = 'hidden';
        csrfToken.name = '_token';
        csrfToken.value = '{{ csrf_token() }}';
        form.appendChild(csrfToken);
        
        // Add action
        const actionInput = document.createElement('input');
        actionInput.type = 'hidden';
        actionInput.name = 'action';
        actionInput.value = action;
        form.appendChild(actionInput);
        
        // Add article IDs
        articleIds.forEach(id => {
            const idInput = document.createElement('input');
            idInput.type = 'hidden';
            idInput.name = 'article_ids[]';
            idInput.value = id;
            form.appendChild(idInput);
        });
        
        document.body.appendChild(form);
        form.submit();
    };
    
    // Show flash messages as simple alerts
    @if(session('success'))
        alert({!! json_encode(session('success')) !!});
    @endif
    
    @if(session('error'))
        alert({!! json_encode(session('error')) !!});
    @endif
    
    @if(session('warning'))
        alert({!! json_encode(session('warning')) !!});
    @endif
});
</script>
@endpush

@endsection