@extends('layouts.staff')

@section('title', 'Lopac Staff Client › MTU Library')

@section('breadcrumb-trail')
    <!-- Home is default in layout -->
@endsection

@section('content')
    <!-- ===== HOME DASHBOARD VIEW ===== -->
    <div id="view-home" class="view active" style="display: flex; gap:16px; align-items:flex-start; width:100%;">

        <!-- LEFT: NEWS SIDEBAR -->
        <div id="sidebar">
            <div class="news-widget">
                <div class="news-section-title" style="display:flex; justify-content:space-between; align-items:center;">
                    <span>News</span>
                    <a href="{{ route('staff.admin.news') }}" style="font-size:11px; font-weight:normal; color:#1b4880;">+ Manage News</a>
                </div>

                @forelse($news as $article)
                    <div class="news-article">
                        <h4>{{ $article->title }}</h4>
                        <p>{{ $article->content }}</p>
                        <div class="news-meta">Posted on {{ \Carbon\Carbon::parse($article->published_date)->format('d.m.Y') }}
                            | <a href="{{ route('staff.admin.news') }}">Edit / Delete</a>
                        </div>
                    </div>
                    @if(!$loop->last)
                        <hr class="news-divider">
                    @endif
                @empty
                    <p style="color:#777; font-size:12px;">No news updates found.</p>
                @endforelse
            </div>
        </div>

        <!-- RIGHT: MODULE GRID -->
        <div id="dashboard" style="flex:1;">
            @if(isset($analyticsSummary))
                <!-- Site Analytics Live Telemetry Widget -->
                <div style="background: #fff; border: 1px solid #d0d0d0; border-radius: 4px; padding: 12px 16px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
                        <span style="font-size: 12px; font-weight: bold; color: #1b4880; display: flex; align-items: center; gap: 6px;">
                            <span>📈</span>
                            <span>OPAC Traffic &amp; Page View Telemetry</span>
                        </span>
                        <a href="{{ route('staff.analytics.index') }}" style="font-size: 11.5px; font-weight: bold; color: #4f7fb5; text-decoration: none;">
                            Full Analytics Console →
                        </a>
                    </div>
                    <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; text-align: center;">
                        <div style="background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 3px; padding: 6px;">
                            <div style="font-size: 10px; color: #777; text-transform: uppercase;">Total Views</div>
                            <div style="font-size: 16px; font-weight: bold; color: #1b4880;">{{ number_format($analyticsSummary['total_views']) }}</div>
                        </div>
                        <div style="background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 3px; padding: 6px;">
                            <div style="font-size: 10px; color: #777; text-transform: uppercase;">Today's Views</div>
                            <div style="font-size: 16px; font-weight: bold; color: #28a745;">{{ number_format($analyticsSummary['today_views']) }}</div>
                        </div>
                        <div style="background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 3px; padding: 6px;">
                            <div style="font-size: 10px; color: #777; text-transform: uppercase;">Unique Today</div>
                            <div style="font-size: 16px; font-weight: bold; color: #e65100;">{{ number_format($analyticsSummary['unique_visitors_today']) }}</div>
                        </div>
                        <div style="background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 3px; padding: 6px;">
                            <div style="font-size: 10px; color: #777; text-transform: uppercase;">Unique Total</div>
                            <div style="font-size: 16px; font-weight: bold; color: #6a1b9a;">{{ number_format($analyticsSummary['total_unique_visitors']) }}</div>
                        </div>
                    </div>
                </div>
            @endif

            <div class="module-grid">
                <!-- Left column -->
                <a class="module-btn" href="{{ route('staff.circulation') }}">
                    <span class="module-icon">⇄</span>
                    <span class="module-label">Circulation</span>
                </a>
                <a class="module-btn" href="{{ route('staff.cataloging') }}">
                    <span class="module-icon">🏷️</span>
                    <span class="module-label">Cataloging</span>
                </a>

                <a class="module-btn" href="{{ route('staff.patrons') }}">
                    <span class="module-icon">👤</span>
                    <span class="module-label">Patrons</span>
                </a>
                <a class="module-btn" href="{{ route('staff.serials') }}">
                    <span class="module-icon">📰</span>
                    <span class="module-label">Serials</span>
                </a>

                <a class="module-btn" href="{{ route('staff.cataloging') }}?advanced=1">
                    <span class="module-icon">🔍</span>
                    <span class="module-label">Advanced search</span>
                </a>
                <a class="module-btn" href="{{ route('staff.acquisitions') }}">
                    <span class="module-icon">🎁</span>
                    <span class="module-label">Acquisitions</span>
                </a>

                <a class="module-btn" href="{{ route('staff.lists') }}">
                    <span class="module-icon">≡</span>
                    <span class="module-label">Lists</span>
                </a>
                <a class="module-btn" href="{{ route('staff.reports') }}">
                    <span class="module-icon">📊</span>
                    <span class="module-label">Reports</span>
                </a>

                <a class="module-btn" href="{{ route('staff.coursereserves') }}">
                    <span class="module-icon">📋</span>
                    <span class="module-label">Course reserves</span>
                </a>
                <a class="module-btn" href="{{ route('staff.tools') }}">
                    <span class="module-icon">🔧</span>
                    <span class="module-label">Tools</span>
                </a>

                <a class="module-btn" href="{{ route('staff.authorities') }}">
                    <span class="module-icon">🔑</span>
                    <span class="module-label">Authorities</span>
                </a>
                <a class="module-btn" href="{{ route('staff.administration') }}">
                    <span class="module-icon">⚙️</span>
                    <span class="module-label">Lopac administration</span>
                </a>

                <a class="module-btn" href="{{ route('staff.analytics.index') }}">
                    <span class="module-icon">📈</span>
                    <span class="module-label">Site Analytics</span>
                </a>
                <a class="module-btn" href="{{ route('staff.about') }}">
                    <span class="module-icon">🐦</span>
                    <span class="module-label">About Lopac</span>
                </a>
            </div>
        </div>

    </div><!-- /#view-home -->
@endsection