@extends('layouts.admin')

@section('title', __('blog.blog_analytics'))

@section('content')
<div class="container-fluid" dir="{{ $text_direction }}">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">{{ __('blog.blog_analytics') }}</h1>
            <p class="mb-0 text-muted">{{ __('blog.performance_metrics_and_insights') }}</p>
        </div>
        <div>
            <select id="periodSelect" class="form-control" style="width: auto;">
                <option value="7" {{ request('period') == '7' ? 'selected' : '' }}>{{ __('blog.last_7_days') }}</option>
                <option value="30" {{ request('period') == '30' || !request('period') ? 'selected' : '' }}>{{ __('blog.last_30_days') }}</option>
                <option value="90" {{ request('period') == '90' ? 'selected' : '' }}>{{ __('blog.last_90_days') }}</option>
                <option value="365" {{ request('period') == '365' ? 'selected' : '' }}>{{ __('blog.last_year') }}</option>
            </select>
        </div>
    </div>

    <!-- Overall Statistics Cards -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                {{ __('blog.total_posts') }}
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($stats['total_posts']) }}</div>
                            <div class="text-xs text-muted">{{ __('blog.published_colon') }} {{ number_format($stats['published_posts']) }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-newspaper fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                {{ __('blog.total_views') }}
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($stats['total_views']) }}</div>
                            <div class="text-xs text-muted">{{ __('blog.period_colon') }} {{ number_format($periodStats['views_gained']) }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-eye fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                {{ __('blog.comments') }}
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($stats['total_comments']) }}</div>
                            <div class="text-xs text-muted">{{ __('blog.period_colon') }} {{ number_format($periodStats['comments_received']) }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-comments fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                {{ __('blog.categories') }}
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($stats['total_categories']) }}</div>
                            <div class="text-xs text-muted">{{ __('blog.active_colon') }} {{ number_format($stats['active_categories']) }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-folder fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Period Statistics -->
    <div class="row mb-4">
        <div class="col-lg-12">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('blog.period_overview') }}</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3 text-center">
                            <h4 class="text-primary">{{ number_format($periodStats['posts_created']) }}</h4>
                            <p class="text-muted mb-0">{{ __('blog.posts_created') }}</p>
                        </div>
                        <div class="col-md-3 text-center">
                            <h4 class="text-success">{{ number_format($periodStats['posts_published']) }}</h4>
                            <p class="text-muted mb-0">{{ __('blog.posts_published') }}</p>
                        </div>
                        <div class="col-md-3 text-center">
                            <h4 class="text-info">{{ number_format($periodStats['views_gained']) }}</h4>
                            <p class="text-muted mb-0">{{ __('blog.views_gained') }}</p>
                        </div>
                        <div class="col-md-3 text-center">
                            <h4 class="text-warning">{{ number_format($periodStats['comments_received']) }}</h4>
                            <p class="text-muted mb-0">{{ __('blog.comments_received') }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Row -->
    <div class="row mb-4">
        <div class="col-lg-6">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('blog.posts_created_over_time') }}</h6>
                </div>
                <div class="card-body">
                    <canvas id="postsChart" width="100%" height="300"></canvas>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('blog.views_over_time') }}</h6>
                </div>
                <div class="card-body">
                    <canvas id="viewsChart" width="100%" height="300"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Top Performing Content -->
    <div class="row mb-4">
        <div class="col-lg-6">
            <div class="card shadow">
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('blog.top_viewed_posts') }}</h6>
                    <a href="{{ route('admin.blog.list', ['locale' => app()->getLocale()]) }}" class="btn btn-sm btn-primary">{{ __('blog.view_all') }}</a>
                </div>
                <div class="card-body">
                    @if($topPosts->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-borderless">
                                <tbody>
                                    @foreach($topPosts as $index => $post)
                                    <tr>
                                        <td width="40">
                                            <span class="badge badge-primary">{{ $index + 1 }}</span>
                                        </td>
                                        <td>
                                            <div>
                                                <a href="{{ route('admin.blog.show', ['locale' => app()->getLocale(), 'blog' => $post]) }}" class="font-weight-bold">
                                                    {{ $post->title }}
                                                </a>
                                                <br>
                                                <small class="text-muted">
                                                    {{ $post->category->name ?? __('blog.uncategorized') }} •
                                                    {{ $post->author->name ?? __('blog.unknown') }}
                                                </small>
                                            </div>
                                        </td>
                                        <td class="text-right">
                                            <span class="badge badge-info">{{ number_format($post->views_count) }} {{ __('blog.views') }}</span>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="text-center py-4">
                            <i class="fas fa-chart-line fa-3x text-muted mb-3"></i>
                            <p class="text-muted">{{ __('blog.no_data_available_yet') }}</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="card shadow">
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('blog.most_commented_posts') }}</h6>
                    <a href="{{ route('admin.blog.comments.index', ['locale' => app()->getLocale()]) }}" class="btn btn-sm btn-primary">{{ __('blog.view_all') }}</a>
                </div>
                <div class="card-body">
                    @if($mostCommentedPosts->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-borderless">
                                <tbody>
                                    @foreach($mostCommentedPosts as $index => $post)
                                    <tr>
                                        <td width="40">
                                            <span class="badge badge-success">{{ $index + 1 }}</span>
                                        </td>
                                        <td>
                                            <div>
                                                <a href="{{ route('admin.blog.show', ['locale' => app()->getLocale(), 'blog' => $post]) }}" class="font-weight-bold">
                                                    {{ $post->title }}
                                                </a>
                                                <br>
                                                <small class="text-muted">
                                                    {{ $post->category->name ?? __('blog.uncategorized') }} •
                                                    {{ $post->author->name ?? __('blog.unknown') }}
                                                </small>
                                            </div>
                                        </td>
                                        <td class="text-right">
                                            <span class="badge badge-warning">{{ $post->comments_count }} {{ __('blog.comments') }}</span>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="text-center py-4">
                            <i class="fas fa-comments fa-3x text-muted mb-3"></i>
                            <p class="text-muted">{{ __('blog.no_comments_yet') }}</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Category Performance -->
    <div class="row mb-4">
        <div class="col-lg-12">
            <div class="card shadow">
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('blog.category_performance') }}</h6>
                    <a href="{{ route('admin.blog.categories.index', ['locale' => app()->getLocale()]) }}" class="btn btn-sm btn-primary">{{ __('blog.manage_categories') }}</a>
                </div>
                <div class="card-body">
                    @if($categoryStats->count() > 0)
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>{{ __('blog.category') }}</th>
                                        <th>{{ __('blog.posts') }}</th>
                                        <th>{{ __('blog.total_views') }}</th>
                                        <th>{{ __('blog.avg_views_per_post') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($categoryStats as $category)
                                    <tr>
                                        <td>{{ $category['name'] }}</td>
                                        <td>{{ number_format($category['posts_count']) }}</td>
                                        <td>{{ number_format($category['total_views']) }}</td>
                                        <td>{{ $category['posts_count'] > 0 ? number_format($category['total_views'] / $category['posts_count'], 1) : 0 }}</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="text-center py-4">
                            <i class="fas fa-folder fa-3x text-muted mb-3"></i>
                            <p class="text-muted">{{ __('blog.no_categories_found') }}</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Activity -->
    <div class="row mb-4">
        <div class="col-lg-12">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('blog.recent_activity') }}</h6>
                </div>
                <div class="card-body">
                    @if($recentActivity->count() > 0)
                        <div class="timeline">
                            @foreach($recentActivity as $activity)
                            <div class="timeline-item">
                                <div class="timeline-marker bg-{{ $activity['color'] }}">
                                    <i class="{{ $activity['icon'] }}"></i>
                                </div>
                                <div class="timeline-content">
                                    <h6 class="timeline-title">{{ $activity['title'] }}</h6>
                                    <p class="timeline-text">
                                        {{ __('blog.by') }} {{ $activity['user'] }} •
                                        {{ $activity['date']->diffForHumans() }}
                                    </p>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-4">
                            <i class="fas fa-history fa-3x text-muted mb-3"></i>
                            <p class="text-muted">{{ __('blog.no_recent_activity') }}</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Export Options -->
    <div class="row">
        <div class="col-lg-12">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('blog.export_data') }}</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4">
                            <h6>{{ __('blog.posts_analytics') }}</h6>
                            <a href="{{ route('admin.blog.analytics.export', ['locale' => app()->getLocale(), 'type' => 'posts', 'format' => 'csv', 'period' => $period]) }}" class="btn btn-outline-primary btn-sm">
                                <i class="fas fa-download"></i> {{ __('blog.export_csv') }}
                            </a>
                        </div>
                        <div class="col-md-4">
                            <h6>{{ __('blog.comments_analytics') }}</h6>
                            <a href="{{ route('admin.blog.analytics.export', ['locale' => app()->getLocale(), 'type' => 'comments', 'format' => 'csv', 'period' => $period]) }}" class="btn btn-outline-primary btn-sm">
                                <i class="fas fa-download"></i> {{ __('blog.export_csv') }}
                            </a>
                        </div>
                        <div class="col-md-4">
                            <h6>{{ __('blog.categories_analytics') }}</h6>
                            <a href="{{ route('admin.blog.analytics.export', ['locale' => app()->getLocale(), 'type' => 'categories', 'format' => 'csv', 'period' => $period]) }}" class="btn btn-outline-primary btn-sm">
                                <i class="fas fa-download"></i> {{ __('blog.export_csv') }}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.timeline {
    position: relative;
    padding-left: 30px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e9ecef;
}

.timeline-item {
    position: relative;
    margin-bottom: 20px;
}

.timeline-marker {
    position: absolute;
    left: -22px;
    top: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.7rem;
}

.timeline-content {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 5px;
}

.timeline-title {
    margin: 0 0 5px 0;
    font-size: 0.9rem;
    font-weight: 600;
}

.timeline-text {
    margin: 0;
    font-size: 0.8rem;
    color: #6c757d;
}
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
$(document).ready(function() {
    // Period selector
    $('#periodSelect').on('change', function() {
        const period = $(this).val();
        const url = new URL(window.location);
        url.searchParams.set('period', period);
        window.location.href = url.toString();
    });

    // Posts Chart
    const postsCtx = document.getElementById('postsChart').getContext('2d');
    new Chart(postsCtx, {
        type: 'line',
        data: {
            labels: @json($postsChartData['labels']),
            datasets: [{
                label: '{{ __("blog.posts_created") }}',
                data: @json($postsChartData['data']),
                borderColor: 'rgb(78, 115, 223)',
                backgroundColor: 'rgba(78, 115, 223, 0.1)',
                tension: 0.4,
                fill: true
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        stepSize: 1
                    }
                }
            },
            plugins: {
                legend: {
                    display: false
                }
            }
        }
    });

    // Views Chart
    const viewsCtx = document.getElementById('viewsChart').getContext('2d');
    new Chart(viewsCtx, {
        type: 'line',
        data: {
            labels: @json($viewsChartData['labels']),
            datasets: [{
                label: '{{ __("blog.views") }}',
                data: @json($viewsChartData['data']),
                borderColor: 'rgb(28, 200, 138)',
                backgroundColor: 'rgba(28, 200, 138, 0.1)',
                tension: 0.4,
                fill: true
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true
                }
            },
            plugins: {
                legend: {
                    display: false
                }
            }
        }
    });
});
</script>
@endpush