@extends('layouts.app')

@section('title', 'Social Media Analytics')

@section('styles')
<link rel="stylesheet" href="{{ asset('css/social-media-analytics.css') }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
@endsection

@section('content')
<div class="container py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3">Social Media Analytics</h1>
        <div class="date-range-selector">
            <select id="date-range" class="form-select">
                <option value="7">Last 7 days</option>
                <option value="30" selected>Last 30 days</option>
                <option value="90">Last 90 days</option>
                <option value="custom">Custom range</option>
            </select>
            <input type="date" id="start-date" class="form-control d-none">
            <input type="date" id="end-date" class="form-control d-none">
            <button id="apply-date" class="btn btn-primary d-none">Apply</button>
        </div>
    </div>

    <div class="social-analytics-dashboard">
        <!-- Performance Summary -->
        <div class="summary-cards">
            <div class="summary-card">
                <div class="summary-card-title">Total Followers</div>
                <div class="summary-card-value">{{ number_format($summary['total_followers']) }}</div>
                <div class="summary-card-change positive">
                    <i class="fas fa-arrow-up me-1"></i> 5.2% from last period
                </div>
            </div>
            <div class="summary-card">
                <div class="summary-card-title">Total Posts</div>
                <div class="summary-card-value">{{ number_format($summary['total_posts']) }}</div>
                <div class="summary-card-change positive">
                    <i class="fas fa-arrow-up me-1"></i> 3.8% from last period
                </div>
            </div>
            <div class="summary-card">
                <div class="summary-card-title">Total Engagement</div>
                <div class="summary-card-value">{{ number_format($summary['total_engagement']) }}</div>
                <div class="summary-card-change positive">
                    <i class="fas fa-arrow-up me-1"></i> 7.1% from last period
                </div>
            </div>
            <div class="summary-card">
                <div class="summary-card-title">Avg. Engagement Rate</div>
                <div class="summary-card-value">{{ number_format($summary['average_engagement_rate'] * 100, 2) }}%</div>
                <div class="summary-card-change positive">
                    <i class="fas fa-arrow-up me-1"></i> 1.5% from last period
                </div>
            </div>
        </div>

        <!-- Platform Tabs -->
        <div class="platform-tabs">
            <div class="platform-tab active" data-platform="all">
                <i class="fas fa-globe platform-icon"></i> All Platforms
            </div>
            @foreach($analytics as $platform => $data)
                @if(isset($data['success']) && $data['success'])
                <div class="platform-tab" data-platform="{{ $platform }}">
                    <i class="fab fa-{{ $platform }} platform-icon"></i> {{ ucfirst($platform) }}
                </div>
                @endif
            @endforeach
        </div>

        <!-- Charts -->
        <div class="charts-container">
            <div class="chart-card">
                <div class="chart-title">Engagement Over Time</div>
                <canvas id="engagement-chart" height="250"></canvas>
            </div>
            <div class="chart-card">
                <div class="chart-title">Followers Growth</div>
                <canvas id="followers-chart" height="250"></canvas>
            </div>
        </div>

        <!-- Best Performing Posts -->
        <div class="best-posts-container">
            <div class="best-posts-title">Best Performing Posts</div>
            @foreach($bestPosts as $post)
            <div class="post-card">
                @if(isset($post['type']) && $post['type'] == 'image')
                <img src="https://via.placeholder.com/80" class="post-image" alt="Post image">
                @endif
                <div class="post-content">
                    <div class="post-platform {{ $post['platform'] }}">
                        <i class="fab fa-{{ $post['platform'] }}"></i> {{ ucfirst($post['platform']) }}
                    </div>
                    <div class="post-text">{{ $post['content'] }}</div>
                    <div class="post-metrics">
                        <div class="post-metric">
                            <i class="far fa-heart"></i> {{ number_format($post['metrics']['likes']) }}
                        </div>
                        <div class="post-metric">
                            <i class="far fa-comment"></i> {{ number_format($post['metrics']['comments']) }}
                        </div>
                        <div class="post-metric">
                            <i class="far fa-share-square"></i> {{ number_format($post['metrics']['shares']) }}
                        </div>
                        <div class="post-metric">
                            <i class="far fa-chart-bar"></i> {{ number_format($post['metrics']['engagement_rate'] * 100, 2) }}% Engagement
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>

        <!-- Platform Breakdown -->
        <div class="platform-breakdown">
            <div class="platform-breakdown-title">Platform Breakdown</div>
            @foreach($summary['platform_breakdown'] as $platform => $metrics)
            <div class="platform-breakdown-item">
                <img src="{{ asset('images/platforms/' . $platform . '.png') }}" class="platform-breakdown-icon" alt="{{ $platform }} icon" onerror="this.src='https://via.placeholder.com/32'">
                <div class="platform-breakdown-info">
                    <div class="platform-breakdown-name">{{ ucfirst($platform) }}</div>
                    <div class="platform-breakdown-stats">
                        <div>{{ number_format($metrics['followers']) }} followers</div>
                        <div>{{ number_format($metrics['posts']) }} posts</div>
                        <div>{{ number_format($metrics['engagement_rate'] * 100, 2) }}% engagement</div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Date range selector
        const dateRangeSelect = document.getElementById('date-range');
        const startDateInput = document.getElementById('start-date');
        const endDateInput = document.getElementById('end-date');
        const applyDateBtn = document.getElementById('apply-date');
        
        dateRangeSelect.addEventListener('change', function() {
            if (this.value === 'custom') {
                startDateInput.classList.remove('d-none');
                endDateInput.classList.remove('d-none');
                applyDateBtn.classList.remove('d-none');
            } else {
                startDateInput.classList.add('d-none');
                endDateInput.classList.add('d-none');
                applyDateBtn.classList.add('d-none');
                // Here you would reload the data based on the selected range
                // loadAnalyticsData(this.value);
            }
        });
        
        // Platform tabs
        const platformTabs = document.querySelectorAll('.platform-tab');
        platformTabs.forEach(tab => {
            tab.addEventListener('click', function() {
                platformTabs.forEach(t => t.classList.remove('active'));
                this.classList.add('active');
                const platform = this.dataset.platform;
                // Here you would filter the data based on the selected platform
                // filterDataByPlatform(platform);
            });
        });
        
        // Sample chart data
        const engagementCtx = document.getElementById('engagement-chart').getContext('2d');
        const followersCtx = document.getElementById('followers-chart').getContext('2d');
        
        // Sample dates for x-axis
        const dates = [];
        const today = new Date();
        for (let i = 29; i >= 0; i--) {
            const date = new Date(today);
            date.setDate(today.getDate() - i);
            dates.push(date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }));
        }
        
        // Engagement chart
        new Chart(engagementCtx, {
            type: 'line',
            data: {
                labels: dates,
                datasets: [{
                    label: 'Engagement Rate',
                    data: Array.from({length: 30}, () => Math.random() * 5 + 1),
                    borderColor: '#0d6efd',
                    backgroundColor: 'rgba(13, 110, 253, 0.1)',
                    borderWidth: 2,
                    fill: true,
                    tension: 0.4
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return context.raw.toFixed(2) + '%';
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            callback: function(value) {
                                return value + '%';
                            }
                        }
                    }
                }
            }
        });
        
        // Followers chart
        new Chart(followersCtx, {
            type: 'line',
            data: {
                labels: dates,
                datasets: [{
                    label: 'Followers',
                    data: Array.from({length: 30}, (_, i) => 5000 + (i * 50) + (Math.random() * 100)),
                    borderColor: '#198754',
                    backgroundColor: 'rgba(25, 135, 84, 0.1)',
                    borderWidth: 2,
                    fill: true,
                    tension: 0.4
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        display: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: false
                    }
                }
            }
        });
    });
</script>
@endsection