{{-- resources/views/v_admin/analytics/dashboard.blade.php --}}
@extends('v_admin.admin')

@section('title', 'لوحة الإحصائيات المتقدمة')

@section('content')
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">
        <i class="fas fa-chart-line me-2"></i>
        لوحة الإحصائيات المتقدمة
    </h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <div class="btn-group me-2">
            <button type="button" class="btn btn-outline-primary" onclick="changePeriod('7days')">7 أيام</button>
            <button type="button" class="btn btn-outline-primary active" onclick="changePeriod('30days')">30 يوم</button>
            <button type="button" class="btn btn-outline-primary" onclick="changePeriod('90days')">90 يوم</button>
            <button type="button" class="btn btn-outline-primary" onclick="changePeriod('1year')">سنة</button>
        </div>
        <button type="button" class="btn btn-success" onclick="exportDashboard()">
            <i class="fas fa-download me-2"></i>
            تصدير التقرير
        </button>
    </div>
</div>

<!-- KPI Cards -->
<div class="row mb-4" id="kpiCards">
    <!-- Will be populated by JavaScript -->
</div>

<!-- Charts Row 1 -->
<div class="row mb-4">
    <!-- Sales Trend Chart -->
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="fas fa-chart-line me-2"></i>
                    اتجاه المبيعات والاستخدام
                </h5>
            </div>
            <div class="card-body">
                <canvas id="salesTrendChart" height="100"></canvas>
            </div>
        </div>
    </div>

    <!-- Conversion Funnel -->
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="fas fa-filter me-2"></i>
                    قمع التحويل
                </h5>
            </div>
            <div class="card-body">
                <canvas id="conversionFunnelChart" height="200"></canvas>
            </div>
        </div>
    </div>
</div>

<!-- Charts Row 2 -->
<div class="row mb-4">
    <!-- Package Performance -->
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="fas fa-box me-2"></i>
                    أداء الباقات
                </h5>
            </div>
            <div class="card-body">
                <canvas id="packagePerformanceChart" height="150"></canvas>
            </div>
        </div>
    </div>

    <!-- Distributor Performance -->
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="fas fa-users me-2"></i>
                    أداء الشركات الموزعة
                </h5>
            </div>
            <div class="card-body">
                <canvas id="distributorPerformanceChart" height="150"></canvas>
            </div>
        </div>
    </div>
</div>

<!-- Real-time Activity -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">
                    <i class="fas fa-pulse me-2"></i>
                    النشاط المباشر
                    <span class="badge bg-success ms-2" id="liveIndicator">مباشر</span>
                </h5>
                <button type="button" class="btn btn-sm btn-outline-primary" onclick="toggleRealTime()">
                    <i class="fas fa-pause" id="realTimeIcon"></i>
                </button>
            </div>
            <div class="card-body">
                <div class="row text-center" id="realTimeStats">
                    <!-- Will be populated by JavaScript -->
                </div>
                <hr>
                <canvas id="realTimeChart" height="80"></canvas>
            </div>
        </div>
    </div>
</div>

<!-- Top Performers -->
<div class="row">
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="fas fa-trophy me-2"></i>
                    أفضل الباقات أداءً
                </h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-sm" id="topPackagesTable">
                        <!-- Will be populated by JavaScript -->
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="fas fa-star me-2"></i>
                    أفضل الشركات الموزعة أداءً
                </h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-sm" id="topDistributorsTable">
                        <!-- Will be populated by JavaScript -->
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
let currentPeriod = '30days';
let realTimeInterval;
let isRealTimeActive = true;

// Chart instances
let salesTrendChart, conversionFunnelChart, packagePerformanceChart, 
    distributorPerformanceChart, realTimeChart;

$(document).ready(function() {
    loadDashboardData();
    startRealTimeUpdates();
});

function changePeriod(period) {
    currentPeriod = period;
    $('.btn-group .btn').removeClass('active');
    $(`button[onclick="changePeriod('${period}')"]`).addClass('active');
    loadDashboardData();
}

function loadDashboardData() {
    $.ajax({
        url: '/admin/analytics/dashboard',
        method: 'GET',
        data: { period: currentPeriod },
        success: function(response) {
            if (response.success) {
                updateKPICards(response.data.overview);
                updateSalesTrendChart(response.data.trends);
                updateConversionFunnelChart(response.data.performance.conversion_funnel);
                updatePackagePerformanceChart(response.data.top_performers.top_packages);
                updateDistributorPerformanceChart(response.data.top_performers.top_distributors);
                updateTopPerformersTable(response.data.top_performers);
            }
        },
        error: function() {
            showAlert('حدث خطأ في تحميل البيانات', 'error');
        }
    });
}

function updateKPICards(overview) {
    const kpiCards = $('#kpiCards');
    kpiCards.html(`
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card stats-card">
                <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-uppercase mb-1">الكروت المباعة</div>
                            <div class="h5 mb-0 font-weight-bold">${overview.current.vouchers_sold.toLocaleString()}</div>
                            <div class="text-xs ${overview.growth.vouchers_sold >= 0 ? 'text-success' : 'text-danger'}">
                                <i class="fas fa-arrow-${overview.growth.vouchers_sold >= 0 ? 'up' : 'down'} me-1"></i>
                                ${Math.abs(overview.growth.vouchers_sold).toFixed(1)}%
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-shopping-cart fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card stats-card-success">
                <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-uppercase mb-1">الكروت المستخدمة</div>
                            <div class="h5 mb-0 font-weight-bold">${overview.current.vouchers_redeemed.toLocaleString()}</div>
                            <div class="text-xs ${overview.growth.vouchers_redeemed >= 0 ? 'text-success' : 'text-danger'}">
                                <i class="fas fa-arrow-${overview.growth.vouchers_redeemed >= 0 ? 'up' : 'down'} me-1"></i>
                                ${Math.abs(overview.growth.vouchers_redeemed).toFixed(1)}%
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-check-circle fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card stats-card-info">
                <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-uppercase mb-1">إجمالي الإيرادات</div>
                            <div class="h5 mb-0 font-weight-bold">${overview.current.total_revenue.toLocaleString()} د.ل</div>
                            <div class="text-xs ${overview.growth.total_revenue >= 0 ? 'text-success' : 'text-danger'}">
                                <i class="fas fa-arrow-${overview.growth.total_revenue >= 0 ? 'up' : 'down'} me-1"></i>
                                ${Math.abs(overview.growth.total_revenue).toFixed(1)}%
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-dollar-sign fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card stats-card-warning">
                <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-uppercase mb-1">إجمالي العمولات</div>
                            <div class="h5 mb-0 font-weight-bold">${overview.current.total_commissions.toLocaleString()} د.ل</div>
                            <div class="text-xs ${overview.growth.total_commissions >= 0 ? 'text-success' : 'text-danger'}">
                                <i class="fas fa-arrow-${overview.growth.total_commissions >= 0 ? 'up' : 'down'} me-1"></i>
                                ${Math.abs(overview.growth.total_commissions).toFixed(1)}%
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-percentage fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `);
}

function updateSalesTrendChart(trends) {
    const ctx = document.getElementById('salesTrendChart').getContext('2d');
    
    if (salesTrendChart) {
        salesTrendChart.destroy();
    }
    
    salesTrendChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: trends.daily.map(item => item.date),
            datasets: [{
                label: 'الكروت المباعة',
                data: trends.daily.map(item => item.vouchers_sold),
                borderColor: '#667eea',
                backgroundColor: 'rgba(102, 126, 234, 0.1)',
                tension: 0.4
            }, {
                label: 'الكروت المستخدمة',
                data: trends.daily.map(item => item.vouchers_redeemed),
                borderColor: '#38ef7d',
                backgroundColor: 'rgba(56, 239, 125, 0.1)',
                tension: 0.4
            }, {
                label: 'الإيرادات',
                data: trends.daily.map(item => item.revenue),
                borderColor: '#f5576c',
                backgroundColor: 'rgba(245, 87, 108, 0.1)',
                tension: 0.4,
                yAxisID: 'y1'
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    type: 'linear',
                    display: true,
                    position: 'left',
                },
                y1: {
                    type: 'linear',
                    display: true,
                    position: 'right',
                    grid: {
                        drawOnChartArea: false,
                    },
                }
            },
            plugins: {
                legend: {
                    position: 'top'
                }
            }
        }
    });
}

function startRealTimeUpdates() {
    realTimeInterval = setInterval(function() {
        if (isRealTimeActive) {
            updateRealTimeData();
        }
    }, 30000); // Update every 30 seconds
}

function updateRealTimeData() {
    $.ajax({
        url: '/admin/analytics/real-time',
        method: 'GET',
        success: function(response) {
            if (response.success) {
                updateRealTimeStats(response.data.today_stats);
                updateRealTimeChart(response.data.hourly_breakdown);
            }
        }
    });
}

function toggleRealTime() {
    isRealTimeActive = !isRealTimeActive;
    const icon = $('#realTimeIcon');
    const indicator = $('#liveIndicator');
    
    if (isRealTimeActive) {
        icon.removeClass('fa-play').addClass('fa-pause');
        indicator.removeClass('bg-secondary').addClass('bg-success').text('مباشر');
    } else {
        icon.removeClass('fa-pause').addClass('fa-play');
        indicator.removeClass('bg-success').addClass('bg-secondary').text('متوقف');
    }
}

function exportDashboard() {
    window.open(`/admin/analytics/generate-report?type=sales&format=pdf&date_from=${getDateFromPeriod()}&date_to=${new Date().toISOString().split('T')[0]}`, '_blank');
}

function getDateFromPeriod() {
    const today = new Date();
    let daysBack = 30;
    
    switch(currentPeriod) {
        case '7days': daysBack = 7; break;
        case '30days': daysBack = 30; break;
        case '90days': daysBack = 90; break;
        case '1year': daysBack = 365; break;
    }
    
    const fromDate = new Date(today.getTime() - (daysBack * 24 * 60 * 60 * 1000));
    return fromDate.toISOString().split('T')[0];
}

function showAlert(message, type) {
    const alertClass = type === 'error' ? 'alert-danger' : 'alert-success';
    const alertHtml = `
        <div class="alert ${alertClass} alert-dismissible fade show" role="alert">
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    `;
    $('.main-content').prepend(alertHtml);
}
</script>
@endpush