@extends('layouts.master')

@section('page-title', 'Prolex Dashboard')

@push('styles')
@vite(['resources/css/dashboard.css'])
@endpush

@section('content')
<div class="dashboard-container" role="main">
    <!-- Dashboard Header -->
    <header class="dashboard-header">
        <h1 class="dashboard-title">Welcome back, {{ auth()->user()->name ?? 'User' }}!</h1>
        <p class="dashboard-subtitle">Here's your comprehensive legal practice overview for {{ date('l, F j, Y') }}</p>
    </header>

    <!-- Executive KPI Summary -->
    <section class="kpi-section" aria-labelledby="kpi-title">
        <div class="kpi-header">
            <h2 id="kpi-title" class="kpi-title">
                <i class="fas fa-chart-line" aria-hidden="true"></i>
                Executive Summary
            </h2>
            <span class="update-timestamp" aria-live="polite">
                <i class="fas fa-sync-alt" aria-hidden="true"></i> 
                <span class="sr-only">Last updated</span>
                Updated {{ now()->format('M j, Y H:i') }}
            </span>
        </div>
        <div class="kpi-grid">
            <div class="kpi-item status-green" role="article" aria-labelledby="kpi-dso">
                <div class="kpi-label" id="kpi-dso">DSO (Days Sales Outstanding)</div>
                <div class="kpi-value" aria-label="{{ $dashboardData['kpi']['dso'] ?? 0 }} days">{{ $dashboardData['kpi']['dso'] ?? 0 }} days</div>
                <div class="kpi-change neutral" aria-label="Accounts receivable balance">
                    <i class="fas fa-receipt" aria-hidden="true"></i>
                    AR balance: ${{ number_format($dashboardData['financial']['ar_balance'] ?? 0) }}
                </div>
            </div>
            <div class="kpi-item status-green" role="article" aria-labelledby="kpi-collection">
                <div class="kpi-label" id="kpi-collection">Collection Rate</div>
                <div class="kpi-value" aria-label="{{ $dashboardData['kpi']['collection_rate'] ?? 0 }} percent">{{ $dashboardData['kpi']['collection_rate'] ?? 0 }}%</div>
                <div class="kpi-change neutral" aria-label="Paid this month">
                    <i class="fas fa-hand-holding-dollar" aria-hidden="true"></i>
                    Paid this month: ${{ number_format($dashboardData['financial']['paidThisMonth'] ?? 0) }}
                </div>
            </div>
            <div class="kpi-item status-amber" role="article" aria-labelledby="kpi-realization">
                <div class="kpi-label" id="kpi-realization">Realization Rate</div>
                <div class="kpi-value" aria-label="{{ $dashboardData['kpi']['realization_rate'] ?? 0 }} percent">{{ $dashboardData['kpi']['realization_rate'] ?? 0 }}%</div>
                <div class="kpi-change neutral" aria-label="Total invoiced revenue">
                    <i class="fas fa-file-invoice-dollar" aria-hidden="true"></i>
                    Total revenue: ${{ number_format($dashboardData['financial']['revenue'] ?? 0) }}
                </div>
            </div>
            <div class="kpi-item status-green" role="article" aria-labelledby="kpi-utilization">
                <div class="kpi-label" id="kpi-utilization">Utilization Rate</div>
                <div class="kpi-value" aria-label="{{ $dashboardData['kpi']['utilization_rate'] ?? 0 }} percent">{{ $dashboardData['kpi']['utilization_rate'] ?? 0 }}%</div>
                <div class="kpi-change neutral" aria-label="Billable hours month to date">
                    <i class="fas fa-clock" aria-hidden="true"></i>
                    Billable MTD: {{ number_format($dashboardData['billable_hours'] ?? 0) }}
                </div>
            </div>
            <div class="kpi-item status-red" role="article" aria-labelledby="kpi-wip">
                <div class="kpi-label" id="kpi-wip">Unbilled WIP</div>
                <div class="kpi-value" aria-label="{{ number_format($dashboardData['kpi']['unbilled_wip'] ?? 0) }} dollars">${{ number_format($dashboardData['kpi']['unbilled_wip'] ?? 0) }}</div>
                <div class="kpi-change neutral" aria-label="Unbilled work in progress value">
                    <i class="fas fa-briefcase" aria-hidden="true"></i>
                    Pending & in-progress value
                </div>
            </div>
            <div class="kpi-item status-green" role="article" aria-labelledby="kpi-retention">
                <div class="kpi-label" id="kpi-retention">Client Retention</div>
                <div class="kpi-value" aria-label="{{ $dashboardData['kpi']['client_retention'] ?? 0 }} percent">{{ $dashboardData['kpi']['client_retention'] ?? 0 }}%</div>
                <div class="kpi-change neutral" aria-label="Active clients count">
                    <i class="fas fa-users" aria-hidden="true"></i>
                    Active clients: {{ $dashboardData['clients']['active'] ?? 0 }}
                </div>
            </div>
        </div>
    </section>

    <!-- Enhanced Statistics Cards -->
    <section class="stats-grid" aria-label="Key Statistics">
        <article class="stat-card">
            <div class="stat-icon revenue" aria-hidden="true">
                <i class="fas fa-dollar-sign"></i>
            </div>
            <div class="stat-label">Monthly Revenue</div>
            <div class="stat-value" aria-label="{{ number_format($dashboardData['financial']['paidThisMonth'] ?? ($dashboardData['financial']['revenue'] ?? 0)) }} dollars">
                ${{ number_format($dashboardData['financial']['paidThisMonth'] ?? ($dashboardData['financial']['revenue'] ?? 0)) }}
            </div>
            @php $revMom = $dashboardData['financial']['revenue_mom'] ?? null; @endphp
            <div class="stat-trend {{ ($revMom ?? 0) < 0 ? 'negative' : 'positive' }}"
                 aria-label="{{ $revMom === null ? 'No prior month data' : ($revMom . ' percent vs last month') }}">
                @if($revMom === null)
                    <i class="fas fa-minus" aria-hidden="true"></i>
                    No prior month data
                @elseif($revMom < 0)
                    <i class="fas fa-arrow-down" aria-hidden="true"></i>
                    {{ $revMom }}% vs last month
                @else
                    <i class="fas fa-arrow-up" aria-hidden="true"></i>
                    +{{ $revMom }}% vs last month
                @endif
            </div>
        </article>

        <article class="stat-card">
            <div class="stat-icon cases" aria-hidden="true">
                <i class="fas fa-gavel"></i>
            </div>
            <div class="stat-label">Total Cases</div>
            <div class="stat-value" aria-label="{{ number_format($dashboardData['total_cases']) }} cases">{{ number_format($dashboardData['total_cases']) }}</div>
            <div class="stat-trend positive" aria-label="{{ $dashboardData['new_cases_this_month'] ?? 0 }} new cases this month">
                <i class="fas fa-plus" aria-hidden="true"></i>
                +{{ $dashboardData['new_cases_this_month'] ?? 0 }} new this month
            </div>
        </article>

        <article class="stat-card">
            <div class="stat-icon active" aria-hidden="true">
                <i class="fas fa-clock"></i>
            </div>
            <div class="stat-label">Active Matters</div>
            <div class="stat-value" aria-label="{{ number_format($dashboardData['active_cases']) }} active matters">{{ number_format($dashboardData['active_cases']) }}</div>
            <div class="stat-trend neutral" aria-label="{{ $dashboardData['active_cases'] }} active of {{ $dashboardData['total_cases'] }} total">
                <i class="fas fa-layer-group" aria-hidden="true"></i>
                {{ number_format($dashboardData['active_cases']) }} of {{ number_format($dashboardData['total_cases']) }} active
            </div>
        </article>

        <article class="stat-card">
            <div class="stat-icon clients" aria-hidden="true">
                <i class="fas fa-users"></i>
            </div>
            <div class="stat-label">Active Clients</div>
            <div class="stat-value" aria-label="{{ $dashboardData['clients']['active'] ?? 0 }} active clients">{{ $dashboardData['clients']['active'] ?? 0 }}</div>
            <div class="stat-trend positive" aria-label="{{ $dashboardData['clients']['new_this_month'] ?? 0 }} new clients this month">
                <i class="fas fa-arrow-up" aria-hidden="true"></i>
                +{{ $dashboardData['clients']['new_this_month'] ?? 0 }} new this month
            </div>
        </article>

        <article class="stat-card">
            <div class="stat-icon utilization" aria-hidden="true">
                <i class="fas fa-chart-bar"></i>
            </div>
            <div class="stat-label">Billable Hours (MTD)</div>
            <div class="stat-value" aria-label="{{ number_format($dashboardData['billable_hours'] ?? 0) }} billable hours">{{ number_format($dashboardData['billable_hours'] ?? 0) }}</div>
            <div class="stat-trend neutral" aria-label="Last month billable hours">
                <i class="fas fa-clock" aria-hidden="true"></i>
                Last month: {{ number_format($dashboardData['billable_hours_last_month'] ?? 0) }}
            </div>
        </article>

        <article class="stat-card">
            <div class="stat-icon settled" aria-hidden="true">
                <i class="fas fa-check-circle"></i>
            </div>
            <div class="stat-label">Settled Cases</div>
            <div class="stat-value" aria-label="{{ number_format($dashboardData['settled_cases']) }} settled cases">{{ number_format($dashboardData['settled_cases']) }}</div>
            <div class="stat-trend neutral" aria-label="Settled cases vs total cases">
                <i class="fas fa-scale-balanced" aria-hidden="true"></i>
                {{ number_format($dashboardData['settled_cases']) }} of {{ number_format($dashboardData['total_cases']) }} settled
            </div>
        </article>

        <article class="stat-card">
            <div class="stat-icon win-rate" aria-hidden="true">
                <i class="fas fa-trophy"></i>
            </div>
            <div class="stat-label">Win Rate</div>
            <div class="stat-value" aria-label="{{ $dashboardData['win_rate'] }} percent win rate">{{ $dashboardData['win_rate'] }}<span class="stat-unit">%</span></div>
            <div class="stat-trend neutral" aria-label="{{ $dashboardData['won_cases'] ?? 0 }} won cases">
                <i class="fas fa-trophy" aria-hidden="true"></i>
                Won cases: {{ number_format($dashboardData['won_cases'] ?? 0) }}
            </div>
        </article>

        <article class="stat-card">
            <div class="stat-icon collection" aria-hidden="true">
                <i class="fas fa-wallet"></i>
            </div>
            <div class="stat-label">AR Balance</div>
            <div class="stat-value" aria-label="{{ number_format($dashboardData['financial']['ar_balance'] ?? 0) }} dollars accounts receivable">${{ number_format($dashboardData['financial']['ar_balance'] ?? 0) }}</div>
            <div class="stat-trend neutral" aria-label="Current AR 0-30 days">
                <i class="fas fa-coins" aria-hidden="true"></i>
                Current (0-30): ${{ number_format($dashboardData['financial']['aging']['current'] ?? 0) }}
            </div>
        </article>
    </section>

    <!-- Charts Section -->
    <section class="charts-section" aria-label="Data Visualizations">
        <!-- Revenue Trend -->
        <article class="chart-card">
            <div class="chart-header">
                <div>
                    <h3 class="chart-title">
                        <i class="fas fa-chart-line" aria-hidden="true"></i>
                        Revenue Trend
                    </h3>
                    <p class="chart-subtitle">Last 6 months performance</p>
                </div>
            </div>
            <div class="chart-container">
                <canvas id="revenueChart" role="img" aria-label="Revenue trend chart showing monthly performance over the last 6 months"></canvas>
            </div>
        </article>

        <!-- Practice Area Distribution -->
        <article class="chart-card">
            <div class="chart-header">
                <div>
                    <h3 class="chart-title">
                        <i class="fas fa-balance-scale" aria-hidden="true"></i>
                        Practice Area Revenue
                    </h3>
                    <p class="chart-subtitle">Distribution by practice area</p>
                </div>
            </div>
            <div class="chart-container">
                <canvas id="practiceAreaChart" role="img" aria-label="Pie chart showing revenue distribution across practice areas"></canvas>
            </div>
        </article>

        <!-- Utilization Rate -->
        <article class="chart-card">
            <div class="chart-header">
                <div>
                    <h3 class="chart-title">
                        <i class="fas fa-user-clock" aria-hidden="true"></i>
                        Attorney Utilization
                    </h3>
                    <p class="chart-subtitle">Billable vs non-billable hours</p>
                </div>
            </div>
            <div class="chart-container">
                <canvas id="utilizationChart" role="img" aria-label="Bar chart comparing billable and non-billable hours by week"></canvas>
            </div>
        </article>

        <!-- AR Aging -->
        <article class="chart-card">
            <div class="chart-header">
                <div>
                    <h3 class="chart-title">
                        <i class="fas fa-money-bill-wave" aria-hidden="true"></i>
                        AR Aging Analysis
                    </h3>
                    <p class="chart-subtitle">Accounts receivable by age bucket</p>
                </div>
            </div>
            <div class="chart-container">
                <canvas id="arAgingChart" role="img" aria-label="Horizontal bar chart showing accounts receivable aging by time period"></canvas>
            </div>
        </article>

        <!-- Matter Performance -->
        <article class="chart-card chart-full-width">
            <div class="chart-header">
                <div>
                    <h3 class="chart-title">
                        <i class="fas fa-briefcase" aria-hidden="true"></i>
                        Matter Performance Tracker
                    </h3>
                    <p class="chart-subtitle">Budget vs Actual spend by matter</p>
                </div>
            </div>
            <div class="chart-container">
                <canvas id="matterPerformanceChart" role="img" aria-label="Bar chart comparing budgeted versus actual spending across different matters"></canvas>
            </div>
        </article>

        <!-- Time Tracking -->
        <article class="chart-card">
            <div class="chart-header">
                <div>
                    <h3 class="chart-title">
                        <i class="fas fa-clock" aria-hidden="true"></i>
                        Time Tracking Trends
                    </h3>
                    <p class="chart-subtitle">Billable hours over time</p>
                </div>
            </div>
            <div class="chart-container">
                <canvas id="timeTrackingChart" role="img" aria-label="Line chart showing billable hours trends over the past 6 weeks"></canvas>
            </div>
        </article>

        <!-- Financial Overview -->
        <article class="chart-card">
            <div class="chart-header">
                <div>
                    <h3 class="chart-title">
                        <i class="fas fa-chart-pie" aria-hidden="true"></i>
                        Financial Overview
                    </h3>
                    <p class="chart-subtitle">Revenue, Expenses & Profit</p>
                </div>
            </div>
            <div class="chart-container">
                <canvas id="financialChart" role="img" aria-label="Doughnut chart showing financial breakdown of revenue, expenses, and profit"></canvas>
            </div>
        </article>
    </section>

    <!-- Activity Section -->
    <section class="activity-section" aria-label="Recent Activity and Upcoming Deadlines">
        <article class="activity-card">
            <div class="activity-header">
                <h3 class="activity-title">Recent Activity</h3>
                <a href="#" class="view-all-link" aria-label="View all recent activity">View All</a>
            </div>
            <div class="activity-list">
                @foreach($dashboardData['recentActivity'] as $activity)
                <div class="activity-item">
                    <div class="activity-avatar" aria-hidden="true">
                        {{ strtoupper(substr($activity->client->full_name, 0, 1)) }}
                    </div>
                    <div class="activity-content">
                        <div class="activity-text">{{ $activity->client->full_name }}</div>
                        <div class="activity-meta">Case: {{ $activity->case_code }} • {{ $activity->updated_at->diffForHumans() }}</div>
                    </div>
                </div>
                @endforeach
            </div>
        </article>

        <article class="activity-card">
            <div class="activity-header">
                <h3 class="activity-title">Upcoming Deadlines</h3>
                <a href="{{ route('modules.processing.diary.calendar') }}" class="view-all-link" aria-label="View calendar">View Calendar</a>
            </div>
            <div class="activity-list">
                @foreach($dashboardData['deadlines']['today'] as $deadline)
                <div class="activity-item">
                    <div class="activity-avatar activity-avatar-deadline" aria-hidden="true">
                        <i class="fas fa-calendar-day"></i>
                    </div>
                    <div class="activity-content">
                        <div class="activity-text">{{ $deadline['title'] }}</div>
                        <div class="activity-meta">{{ $deadline['time'] }} • {{ $deadline['location'] }}</div>
                    </div>
                </div>
                @endforeach
            </div>
        </article>
    </section>

    <!-- Tasks Section -->
    <section class="tasks-section" aria-labelledby="tasks-title">
        <div class="tasks-header">
            <h3 id="tasks-title" class="tasks-title">
                <i class="fas fa-tasks" aria-hidden="true"></i>
                Daily Tasks
            </h3>
            <a href="#" class="view-all-link" aria-label="View all tasks">View All Tasks</a>
        </div>

        <div class="task-tabs" role="tablist" aria-label="Task categories">
            <button class="task-tab active" 
                    role="tab" 
                    aria-selected="true" 
                    aria-controls="daily-tasks" 
                    id="tab-daily"
                    data-tab="daily">
                <i class="fas fa-calendar-day" aria-hidden="true"></i> Daily
            </button>
            <button class="task-tab" 
                    role="tab" 
                    aria-selected="false" 
                    aria-controls="overdue-tasks" 
                    id="tab-overdue"
                    data-tab="overdue">
                <i class="fas fa-exclamation-circle" aria-hidden="true"></i> Overdue
            </button>
        </div>

        <div id="daily-tasks" role="tabpanel" aria-labelledby="tab-daily">
            @foreach($dashboardData['tasks']['daily'] as $task)
            <div class="task-item">
                <input type="checkbox" 
                       class="task-checkbox" 
                       id="task-{{ $loop->index }}"
                       aria-label="Mark task as complete: {{ $task['title'] }}">
                <label for="task-{{ $loop->index }}" class="task-content">
                    <div class="task-title">{{ $task['title'] }}</div>
                    <div class="task-meta">
                        <span class="task-priority priority-{{ $task['priority'] }}" aria-label="Priority: {{ $task['priority'] }}">{{ $task['priority'] }}</span>
                        <span aria-hidden="true">•</span>
                        <span>Assigned to {{ $task['assigned'] }}</span>
                        <span aria-hidden="true">•</span>
                        <span>Due {{ $task['due'] }}</span>
                    </div>
                </label>
            </div>
            @endforeach
        </div>

        <div id="overdue-tasks" role="tabpanel" aria-labelledby="tab-overdue" hidden>
            @foreach($dashboardData['tasks']['overdue'] as $task)
            <div class="task-item task-item-overdue">
                <input type="checkbox" 
                       class="task-checkbox" 
                       id="task-overdue-{{ $loop->index }}"
                       aria-label="Mark overdue task as complete: {{ $task['title'] }}">
                <label for="task-overdue-{{ $loop->index }}" class="task-content">
                    <div class="task-title">{{ $task['title'] }}</div>
                    <div class="task-meta">
                        <span class="task-priority priority-high" aria-label="Priority: High">High</span>
                        <span aria-hidden="true">•</span>
                        <span>Assigned to {{ $task['assigned'] }}</span>
                        <span aria-hidden="true">•</span>
                        <span>Overdue by {{ $task['overdue'] }}</span>
                    </div>
                </label>
            </div>
            @endforeach
        </div>
    </section>

    {{-- Legal News & Research --}}
    <div class="ns-wrap">
      <div class="ns-header">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
          <path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2"/>
          <path d="M18 14h-8M15 18h-5M10 6h8v4h-8z"/>
        </svg>
        <h2 class="ns-title">Legal News &amp; Research</h2>
      </div>

      <div class="ns-form">
        <input class="ns-input" id="ns-query" type="text" placeholder="Search a legal topic, case, or keyword..." />
        <button class="ns-btn" id="ns-search-btn">
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
          </svg>
          Search
        </button>
      </div>

      <div id="ns-error" style="display:none;" class="ns-error"></div>
      <div id="ns-results"></div>
    </div>

    <style>
    .ns-wrap { padding: 1.5rem 0; }
    .ns-header { display: flex; align-items: center; gap: 10px; margin-bottom: 1.25rem; }
    .ns-title { font-size: 20px; font-weight: 600; margin: 0; color: #1a2535; }
    .ns-form { display: flex; gap: 10px; margin-bottom: 1.5rem; }
    .ns-input { flex: 1; height: 42px; padding: 0 14px; font-size: 14px; border: 1px solid #d1d5db; border-radius: 8px; outline: none; transition: border 0.15s, box-shadow 0.15s; }
    .ns-input:focus { border-color: #185FA5; box-shadow: 0 0 0 3px rgba(24,95,165,0.12); }
    .ns-btn { height: 42px; padding: 0 20px; font-size: 14px; font-weight: 500; background: #185FA5; color: #fff; border: none; border-radius: 8px; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: background 0.15s; white-space: nowrap; }
    .ns-btn:hover { background: #0C447C; }
    .ns-btn:disabled { background: #9ca3af; cursor: not-allowed; }
    .ns-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
    .ns-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; transition: border-color 0.15s, box-shadow 0.15s; }
    .ns-card:hover { border-color: #185FA5; box-shadow: 0 2px 8px rgba(24,95,165,0.08); }
    .ns-card-img { width: 100%; height: 160px; object-fit: cover; background: #f3f4f6; display: block; }
    .ns-card-img-placeholder { width: 100%; height: 160px; background: #f3f4f6; display: flex; align-items: center; justify-content: center; }
    .ns-card-body { padding: 14px 16px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
    .ns-source { font-size: 11px; font-weight: 600; color: #185FA5; text-transform: uppercase; letter-spacing: 0.05em; }
    .ns-card-title { font-size: 14px; font-weight: 600; color: #111827; line-height: 1.45; margin: 0; }
    .ns-card-desc { font-size: 13px; color: #6b7280; line-height: 1.5; margin: 0; flex: 1; }
    .ns-card-footer { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-top: 1px solid #f3f4f6; }
    .ns-date { font-size: 12px; color: #9ca3af; }
    .ns-read { font-size: 12px; font-weight: 500; color: #185FA5; text-decoration: none; }
    .ns-read:hover { text-decoration: underline; }
    .ns-empty { text-align: center; padding: 3rem 1rem; }
    .ns-empty-title { font-size: 15px; font-weight: 600; color: #374151; margin: 0 0 4px; }
    .ns-empty-sub { font-size: 13px; color: #6b7280; margin: 0; }
    .ns-error { background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; padding: 12px 16px; font-size: 13px; color: #b91c1c; margin-bottom: 1rem; }
    .ns-spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; border-radius: 50%; animation: ns-spin 0.7s linear infinite; display: inline-block; }
    @keyframes ns-spin { to { transform: rotate(360deg); } }
    </style>

    <script>
    (function () {
        const ENDPOINT = '/api/news/search';

        function esc(s) {
            return String(s)
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;');
        }

        function truncate(str, n) {
            if (!str) return '';
            return str.length > n ? str.slice(0, n).trimEnd() + '...' : str;
        }

        function formatDate(iso) {
            if (!iso) return '';
            try {
                return new Date(iso).toLocaleDateString('en-GB', {
                    day: 'numeric', month: 'short', year: 'numeric'
                });
            } catch (e) { return ''; }
        }

        function renderEmpty() {
            return '<div class="ns-empty">' +
                '<p class="ns-empty-title">No results found</p>' +
                '<p class="ns-empty-sub">Try different keywords or check your spelling</p>' +
                '</div>';
        }

        function renderCards(articles) {
            return '<div class="ns-grid">' + articles.map(function (a) {
                const img = a.urlToImage
                    ? '<img class="ns-card-img" src="' + esc(a.urlToImage) + '" alt="" onerror="this.style.display=\'none\'">'
                    : '<div class="ns-card-img-placeholder"><svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#d1d5db" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg></div>';

                const source = (a.source && a.source.name) ? esc(a.source.name) : 'Unknown';
                const title = esc(truncate(a.title, 90));
                const desc = esc(truncate(a.description, 120));
                const date = esc(formatDate(a.publishedAt));
                const url = esc(a.url);

                return '<div class="ns-card">' +
                    img +
                    '<div class="ns-card-body">' +
                    '<span class="ns-source">' + source + '</span>' +
                    '<p class="ns-card-title">' + title + '</p>' +
                    '<p class="ns-card-desc">' + desc + '</p>' +
                    '</div>' +
                    '<div class="ns-card-footer">' +
                    '<span class="ns-date">' + date + '</span>' +
                    '<a class="ns-read" href="' + url + '" target="_blank" rel="noopener">Read article</a>' +
                    '</div>' +
                    '</div>';
            }).join('') + '</div>';
        }

        async function doSearch() {
            const queryEl = document.getElementById('ns-query');
            const btn = document.getElementById('ns-search-btn');
            const resultsEl = document.getElementById('ns-results');
            const errorEl = document.getElementById('ns-error');

            const query = queryEl.value.trim();
            if (!query) { queryEl.focus(); return; }

            errorEl.style.display = 'none';
            resultsEl.innerHTML = '';
            btn.disabled = true;
            btn.innerHTML = '<span class="ns-spinner"></span>';

            try {
                const params = new URLSearchParams({ q: query });
                const resp = await fetch(ENDPOINT + '?' + params.toString(), {
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': (document.querySelector('meta[name="csrf-token"]') || {}).content || ''
                    }
                });

                const data = await resp.json();

                if (!resp.ok) {
                    throw new Error(data.error || 'Server error (' + resp.status + ')');
                }

                const articles = Array.isArray(data.articles) ? data.articles : [];
                resultsEl.innerHTML = articles.length === 0 ? renderEmpty() : renderCards(articles);

            } catch (err) {
                errorEl.textContent = err.message || 'Something went wrong. Please try again.';
                errorEl.style.display = 'block';
            } finally {
                btn.disabled = false;
                btn.innerHTML = '<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg> Search';
            }
        }

        function bindEvents() {
            const btn = document.getElementById('ns-search-btn');
            const input = document.getElementById('ns-query');
            if (!btn || !input) return;

            btn.addEventListener('click', doSearch);
            input.addEventListener('keydown', function (e) {
                if (e.key === 'Enter') doSearch();
            });
        }

        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', bindEvents);
        } else {
            bindEvents();
        }
    }());
    </script>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@vite(['resources/js/dashboard.js', 'resources/js/dashboard-charts.js', 'resources/js/dashboard-app.js'])
<script>
    // Initialize dashboard with server data
    document.addEventListener('DOMContentLoaded', function() {
        const serverData = {
            charts: {!! json_encode($dashboardData['charts'] ?? []) !!}
        };
        
        DashboardApp.init(serverData);
    });
</script>
@endpush