@extends('layouts.app')

    @section('title', 'Statistik Berita')

    @section('content')
    <div class="page-header">
        <h2><i class="fas fa-chart-bar"></i> Statistik Berita</h2>
    </div>

    <!-- Back Button -->
    <div style="margin-bottom: 14px;">
        <a href="{{ route('admin.berita.index') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left"></i> Kembali ke Daftar Berita
        </a>
    </div>

    <!-- Dashboard Cards -->
    <div class="row-cards">
        <div class="card card-info">
            <h3>Total Berita</h3>
            <div class="card-value">{{ $totalBerita }}</div>
            <i class="fas fa-newspaper card-icon"></i>
        </div>
        
        <div class="card card-success">
            <h3>Published</h3>
            <div class="card-value">{{ $totalPublished }}</div>
            <i class="fas fa-check-circle card-icon"></i>
        </div>
        
        <div class="card card-warning">
            <h3>Draft</h3>
            <div class="card-value">{{ $totalDraft }}</div>
            <i class="fas fa-edit card-icon"></i>
        </div>
        
        <div class="card card-primary">
            <h3>Semua Santri</h3>
            <div class="card-value">{{ $beritaSemua }}</div>
            <i class="fas fa-globe card-icon"></i>
        </div>
        
        <div class="card card-secondary">
            <h3>Kelas Tertentu</h3>
            <div class="card-value">{{ $beritaKelas }}</div>
            <i class="fas fa-graduation-cap card-icon"></i>
        </div>
    </div>

    <!-- Grafik Distribusi -->
    <div class="content-box" style="margin-top: 22px;">
        <h3 style="color: var(--primary-color); margin-bottom: 25px; display: flex; align-items: center;">
            <i class="fas fa-chart-pie" style="margin-right: 10px;"></i>
            Distribusi Berita
        </h3>
        
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px;">
            <!-- Status Distribution -->
            <div style="background: linear-gradient(135deg, #F8FBF9 0%, #FFFFFF 100%); padding: 18px; border-radius: var(--border-radius); box-shadow: var(--shadow-sm); border: 2px solid var(--primary-light);">
                <h4 style="margin-bottom: 14px; color: var(--primary-dark); display: flex; align-items: center;">
                    <i class="fas fa-toggle-on" style="margin-right: 8px;"></i>
                    Berdasarkan Status
                </h4>
                
                @php
                    $totalForPercentage = max($totalBerita, 1);
                    $publishedPercent = round(($totalPublished / $totalForPercentage) * 100, 1);
                    $draftPercent = round(($totalDraft / $totalForPercentage) * 100, 1);
                @endphp
                
                <!-- Published -->
                <div style="margin-bottom: 14px;">
                    <div style="display: flex; justify-content: space-between; margin-bottom: 8px; align-items: center;">
                        <span style="font-weight: 600; color: var(--text-color);">
                            <i class="fas fa-check-circle" style="color: var(--success-color);"></i> Published
                        </span>
                        <span style="font-weight: 700; color: var(--success-color); font-size: 1.1em;">
                            {{ $publishedPercent }}%
                        </span>
                    </div>
                    <div style="background-color: #E8F7F2; border-radius: 20px; height: 12px; overflow: hidden;">
                        <div style="background: linear-gradient(90deg, var(--success-color), #5EA98C); width: {{ $publishedPercent }}%; height: 100%; border-radius: 20px; transition: width 0.5s ease;"></div>
                    </div>
                    <small style="color: var(--text-light); margin-top: 5px; display: block;">
                        {{ $totalPublished }} dari {{ $totalBerita }} berita
                    </small>
                </div>
                
                <!-- Draft -->
                <div>
                    <div style="display: flex; justify-content: space-between; margin-bottom: 8px; align-items: center;">
                        <span style="font-weight: 600; color: var(--text-color);">
                            <i class="fas fa-edit" style="color: var(--warning-color);"></i> Draft
                        </span>
                        <span style="font-weight: 700; color: #E6B85C; font-size: 1.1em;">
                            {{ $draftPercent }}%
                        </span>
                    </div>
                    <div style="background-color: #FFF8E1; border-radius: 20px; height: 12px; overflow: hidden;">
                        <div style="background: linear-gradient(90deg, var(--warning-color), #FFAB91); width: {{ $draftPercent }}%; height: 100%; border-radius: 20px; transition: width 0.5s ease;"></div>
                    </div>
                    <small style="color: var(--text-light); margin-top: 5px; display: block;">
                        {{ $totalDraft }} dari {{ $totalBerita }} berita
                    </small>
                </div>
            </div>
            
            <!-- Target Distribution -->
            <div style="background: linear-gradient(135deg, #F8FBF9 0%, #FFFFFF 100%); padding: 18px; border-radius: var(--border-radius); box-shadow: var(--shadow-sm); border: 2px solid var(--primary-light);">
                <h4 style="margin-bottom: 14px; color: var(--primary-dark); display: flex; align-items: center;">
                    <i class="fas fa-bullseye" style="margin-right: 8px;"></i>
                    Berdasarkan Target
                </h4>
                
                @php
                    $semuaPercent = round(($beritaSemua / $totalForPercentage) * 100, 1);
                    $kelasPercent = round(($beritaKelas / $totalForPercentage) * 100, 1);
                @endphp
                
                <!-- Semua Santri -->
                <div style="margin-bottom: 14px;">
                    <div style="display: flex; justify-content: space-between; margin-bottom: 8px; align-items: center;">
                        <span style="font-weight: 600; color: var(--text-color);">
                            <i class="fas fa-globe" style="color: var(--info-color);"></i> Semua Santri
                        </span>
                        <span style="font-weight: 700; color: var(--info-color); font-size: 1.1em;">
                            {{ $semuaPercent }}%
                        </span>
                    </div>
                    <div style="background-color: #E3F2FD; border-radius: 20px; height: 12px; overflow: hidden;">
                        <div style="background: linear-gradient(90deg, var(--info-color), #5EAED4); width: {{ $semuaPercent }}%; height: 100%; border-radius: 20px; transition: width 0.5s ease;"></div>
                    </div>
                    <small style="color: var(--text-light); margin-top: 5px; display: block;">
                        {{ $beritaSemua }} dari {{ $totalBerita }} berita
                    </small>
                </div>
                
                <!-- Kelas Tertentu -->
                <div>
                    <div style="display: flex; justify-content: space-between; margin-bottom: 8px; align-items: center;">
                        <span style="font-weight: 600; color: var(--text-color);">
                            <i class="fas fa-graduation-cap" style="color: var(--secondary-color);"></i> Kelas Tertentu
                        </span>
                        <span style="font-weight: 700; color: var(--secondary-color); font-size: 1.1em;">
                            {{ $kelasPercent }}%
                        </span>
                    </div>
                    <div style="background-color: #FFE8EA; border-radius: 20px; height: 12px; overflow: hidden;">
                        <div style="background: linear-gradient(90deg, var(--secondary-color), #FF6B7A); width: {{ $kelasPercent }}%; height: 100%; border-radius: 20px; transition: width 0.5s ease;"></div>
                    </div>
                    <small style="color: var(--text-light); margin-top: 5px; display: block;">
                        {{ $beritaKelas }} dari {{ $totalBerita }} berita
                    </small>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="content-box" style="margin-top: 22px;">
        <h3 style="color: var(--primary-color); margin-bottom: 14px; display: flex; align-items: center;">
            <i class="fas fa-bolt" style="margin-right: 10px;"></i>
            Aksi Cepat
        </h3>
        
        <div style="display: flex; flex-wrap: wrap; gap: 12px;">
            <a href="{{ route('admin.berita.create') }}" class="btn btn-success">
                <i class="fas fa-plus"></i> Tambah Berita Baru
            </a>
            
            <a href="{{ route('admin.berita.index') }}?status=draft" class="btn btn-warning">
                <i class="fas fa-edit"></i> Lihat Draft ({{ $totalDraft }})
            </a>
            
            <a href="{{ route('admin.berita.index') }}?status=published" class="btn btn-primary">
                <i class="fas fa-eye"></i> Lihat Published ({{ $totalPublished }})
            </a>
            
            <a href="{{ route('admin.berita.index') }}?target=kelas_tertentu" class="btn btn-secondary">
                <i class="fas fa-graduation-cap"></i> Berita Kelas Tertentu ({{ $beritaKelas }})
            </a>
        </div>
    </div>

    <!-- Empty State -->
    @if($totalBerita == 0)
        <div class="content-box" style="margin-top: 22px; text-align: center; padding: 44px 14px;">
            <i class="fas fa-newspaper" style="font-size: 5em; color: #ccc; margin-bottom: 25px;"></i>
            <h3 style="color: var(--text-light); margin-bottom: 15px;">Belum Ada Berita</h3>
            <p style="color: var(--text-light); margin-bottom: 22px; max-width: 500px; margin-left: auto; margin-right: auto;">
                Mulai dengan membuat berita pertama untuk pesantren Anda. Berita dapat dipublikasikan untuk semua santri atau target tertentu.
            </p>
            <a href="{{ route('admin.berita.create') }}" class="btn btn-success btn-lg">
                <i class="fas fa-plus"></i> Buat Berita Pertama
            </a>
        </div>
    @endif
    @endsection