@extends('admin.layouts.app')

@section('title', 'Enhanced Dashboard')

@section('breadcrumb')
    <li class="breadcrumb-item active"></li>
@endsection

@section('page-header')
    <div>
        <h1 class="h3 mb-0">
            <i class="fas fa-tachometer-alt text-primary me-2"></i>
            {{ __('Dashboard') }}
        </h1>
        <p class="text-muted mb-0">{{ __('Welcome back') }}, {{ Auth::guard('admin')->user()->name }}! 👋</p>
    </div>
    <div class="d-flex gap-2">
        <div class="dropdown">
            <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                <i class="fas fa-calendar-alt me-2"></i>
                <span id="periodText">{{ __('Last 30 Days') }}</span>
            </button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#" onclick="changePeriod(7, '{{ __('Last 7 Days') }}')">{{ __('Last 7 Days') }}</a></li>
                <li><a class="dropdown-item" href="#" onclick="changePeriod(30, '{{ __('Last 30 Days') }}')">{{ __('Last 30 Days') }}</a></li>
                <li><a class="dropdown-item" href="#" onclick="changePeriod(90, '{{ __('Last 3 Months') }}')">{{ __('Last 3 Months') }}</a></li>
            </ul>
        </div>
        <button class="btn btn-outline-info" onclick="refreshDashboard()">
            <i class="fas fa-sync-alt me-2"></i>
            {{ __('Refresh') }}
        </button>
        <button class="btn btn-primary-custom dropdown-toggle" type="button" data-bs-toggle="dropdown">
            <i class="fas fa-plus me-2"></i>
            {{ __('Quick Add') }}
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="{{ route('admin.products.create') }}">
                    <i class="fas fa-box me-2"></i>{{ __('Add Product') }}
                </a></li>
            <li><a class="dropdown-item" href="{{ route('admin.categories.create') }}">
                    <i class="fas fa-tags me-2"></i>{{ __('Add Category') }}
                </a></li>
        </ul>
    </div>
@endsection

@section('content')
    {{-- System Alerts --}}
    @if(isset($alerts) && count($alerts) > 0)
        <div class="row mb-4">
            <div class="col-12">
                @foreach($alerts as $alert)
                    <div class="alert alert-{{ $alert['type'] }} alert-dismissible fade show" role="alert">
                        <i class="{{ $alert['icon'] }} me-2"></i>
                        <strong>{{ $alert['title'] }}:</strong> {{ $alert['message'] }}
                        @if(isset($alert['url']))
                            <a href="{{ $alert['url'] }}" class="alert-link ms-2">{{ __('View Details') }} →</a>
                        @endif
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                @endforeach
            </div>
        </div>
    @endif

    {{-- Main Statistics Cards --}}
    <div class="row g-4 mb-4">
        {{-- Revenue Card --}}
        <div class="col-xl-3 col-md-6">
            <div class="stats-card revenue-card">
                <div class="d-flex align-items-center">
                    <div class="stats-icon bg-success me-3">
                        <i class="fas fa-dollar-sign"></i>
                    </div>
                    <div class="flex-grow-1">
                        <h3 class="mb-0" id="totalRevenue">{{ number_format($stats['total_revenue'] ?? 0, 2) }}</h3>
                        <p class="text-muted mb-0">{{ __('Total Revenue (SAR)') }}</p>
                        <small class="text-info">
                            {{ __('Today') }}: {{ number_format($stats['today_revenue'] ?? 0, 2) }} SAR
                        </small>
                    </div>
                </div>
                <div class="mt-3">
                    <small class="text-{{ ($stats['revenue_growth'] ?? 0) >= 0 ? 'success' : 'danger' }}">
                        <i class="fas fa-arrow-{{ ($stats['revenue_growth'] ?? 0) >= 0 ? 'up' : 'down' }}"></i>
                        {{ number_format(abs($stats['revenue_growth'] ?? 0), 1) }}% {{ __('from last month') }}
                    </small>
                </div>
            </div>
        </div>

        {{-- Orders Card --}}
        <div class="col-xl-3 col-md-6">
            <div class="stats-card orders-card">
                <div class="d-flex align-items-center">
                    <div class="stats-icon bg-primary me-3">
                        <i class="fas fa-shopping-cart"></i>
                    </div>
                    <div class="flex-grow-1">
                        <h3 class="mb-0" id="totalOrders">{{ $stats['total_orders'] ?? 0 }}</h3>
                        <p class="text-muted mb-0">{{ __('Total Orders') }}</p>
                        <small class="text-info">
                            {{ __('Pending') }}: {{ $stats['pending_orders'] ?? 0 }} |
                            {{ __('Today') }}: {{ $stats['today_orders'] ?? 0 }}
                        </small>
                    </div>
                </div>
                <div class="mt-3">
                    <small class="text-{{ ($stats['orders_growth'] ?? 0) >= 0 ? 'success' : 'danger' }}">
                        <i class="fas fa-arrow-{{ ($stats['orders_growth'] ?? 0) >= 0 ? 'up' : 'down' }}"></i>
                        {{ number_format(abs($stats['orders_growth'] ?? 0), 1) }}% {{ __('from last month') }}
                    </small>
                </div>
            </div>
        </div>

        {{-- Products Card --}}
        <div class="col-xl-3 col-md-6">
            <div class="stats-card products-card">
                <div class="d-flex align-items-center">
                    <div class="stats-icon bg-info me-3">
                        <i class="fas fa-box"></i>
                    </div>
                    <div class="flex-grow-1">
                        <h3 class="mb-0" id="totalProducts">{{ $stats['total_products'] ?? 0 }}</h3>
                        <p class="text-muted mb-0">{{ __('Total Products') }}</p>
                        <small class="text-info">
                            {{ $stats['active_products'] ?? 0 }} {{ __('active') }} |
                            {{ $stats['inactive_products'] ?? 0 }} {{ __('inactive') }}
                        </small>
                    </div>
                </div>
                <div class="mt-3">
                    <a href="{{ route('admin.products.index') }}" class="text-decoration-none">
                        <small class="text-primary">
                            <i class="fas fa-eye"></i> {{ __('Manage Products') }} →
                        </small>
                    </a>
                </div>
            </div>
        </div>

        {{-- Customers Card --}}
        <div class="col-xl-3 col-md-6">
            <div class="stats-card customers-card">
                <div class="d-flex align-items-center">
                    <div class="stats-icon bg-warning me-3">
                        <i class="fas fa-users"></i>
                    </div>
                    <div class="flex-grow-1">
                        <h3 class="mb-0" id="totalCustomers">{{ $stats['total_users'] ?? 0 }}</h3>
                        <p class="text-muted mb-0">{{ __('Total Customers') }}</p>
                        <small class="text-info">
                            {{ __('Categories') }}: {{ $stats['total_categories'] ?? 0 }}
                        </small>
                    </div>
                </div>
                <div class="mt-3">
                    <small class="text-success">
                        <i class="fas fa-user-plus"></i> {{ __('Growing steadily') }}
                    </small>
                </div>
            </div>
        </div>
    </div>

    {{-- Performance Metrics Row --}}
    @if(isset($performanceMetrics))
        <div class="row g-4 mb-4">
            <div class="col-lg-3 col-md-6">
                <div class="metric-card">
                    <div class="metric-icon bg-success">
                        <i class="fas fa-percentage"></i>
                    </div>
                    <div class="metric-content">
                        <h4>{{ number_format($performanceMetrics['conversion_rate'], 1) }}%</h4>
                        <p>{{ __('Conversion Rate') }}</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="metric-card">
                    <div class="metric-icon bg-primary">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <div class="metric-content">
                        <h4>{{ number_format($performanceMetrics['average_order_value'], 2) }}</h4>
                        <p>{{ __('Avg Order Value (SAR)') }}</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="metric-card">
                    <div class="metric-icon bg-info">
                        <i class="fas fa-redo"></i>
                    </div>
                    <div class="metric-content">
                        <h4>{{ $performanceMetrics['repeat_customers'] }}</h4>
                        <p>{{ __('Repeat Customers') }}</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="metric-card">
                    <div class="metric-icon bg-warning">
                        <i class="fas fa-exclamation-triangle"></i>
                    </div>
                    <div class="metric-content">
                        <h4>{{ $stats['low_stock_products'] ?? 0 }}</h4>
                        <p>{{ __('Low Stock Items') }}</p>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <div class="row g-4 mb-4">
        {{-- Sales Analytics Chart --}}
        <div class="col-lg-8">
            <div class="admin-card">
                <div class="card-header-custom d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">
                        <i class="fas fa-chart-area text-success me-2"></i>
                        {{ __('Sales Analytics') }}
                    </h5>
                    <div class="btn-group btn-group-sm" role="group">
                        <button type="button" class="btn btn-outline-primary active" onclick="showChart('orders')">
                            {{ __('Orders') }}
                        </button>
                        <button type="button" class="btn btn-outline-primary" onclick="showChart('revenue')">
                            {{ __('Revenue') }}
                        </button>
                    </div>
                </div>
                <div class="card-body-custom">
                    <canvas id="salesChart" height="300"></canvas>
                </div>
            </div>
        </div>

        {{-- Popular Products --}}
        <div class="col-lg-4">
            <div class="admin-card">
                <div class="card-header-custom">
                    <h5 class="mb-0">
                        <i class="fas fa-fire text-danger me-2"></i>
                        {{ __('Popular Products') }}
                    </h5>
                </div>
                <div class="card-body-custom">
                    @if(isset($popularProducts) && count($popularProducts) > 0)
                        @foreach($popularProducts as $product)
                            <div class="popular-product-item d-flex justify-content-between align-items-center mb-3">
                                <div class="flex-grow-1">
                                    <h6 class="mb-1">{{ $product->name }}</h6>
                                    <small class="text-muted">{{ __('Sold') }}: {{ $product->total_sold }} {{ __('units') }}</small>
                                </div>
                                <div class="text-end">
                                    <div class="text-success fw-bold">{{ number_format($product->total_revenue, 2) }} SAR</div>
                                    <small class="text-muted">{{ $product->order_count }} {{ __('orders') }}</small>
                                </div>
                            </div>
                        @endforeach
                    @else
                        <div class="text-center py-4">
                            <i class="fas fa-box fa-3x text-muted mb-3"></i>
                            <p class="text-muted">{{ __('No sales data available') }}</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4 mb-4">
        {{-- Recent Orders --}}
        <div class="col-lg-8">
            <div class="admin-card">
                <div class="card-header-custom">
                    <h5 class="mb-0">
                        <i class="fas fa-clock text-primary me-2"></i>
                        {{ __('Recent Orders') }}
                    </h5>
                    <a href="{{ route('admin.orders.list') }}" class="btn btn-sm btn-outline-primary">
                        {{ __('View All') }}
                    </a>
                </div>
                <div class="card-body-custom">
                    @if(isset($recentOrders) && count($recentOrders) > 0)
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                <tr>
                                    <th>{{ __('Order') }}</th>
                                    <th>{{ __('Customer') }}</th>
                                    <th>{{ __('Amount') }}</th>
                                    <th>{{ __('Status') }}</th>
                                    <th>{{ __('Date') }}</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($recentOrders as $order)
                                    <tr>
                                        <td>
                                            <a href="{{ route('admin.orders.show', $order->id) }}" class="text-decoration-none">
                                                {{ $order->order_number }}
                                            </a>
                                        </td>
                                        <td>{{ $order->customer_name }}</td>
                                        <td class="fw-bold text-success">{{ number_format($order->total_amount, 2) }} SAR</td>
                                        <td>
                                                <span class="badge bg-{{
                                                    $order->status === 'delivered' ? 'success' :
                                                    ($order->status === 'shipped' ? 'info' :
                                                    ($order->status === 'processing' ? 'warning' : 'secondary'))
                                                }}">
                                                    {{ ucfirst($order->status) }}
                                                </span>
                                        </td>
                                        <td>{{ $order->created_at->diffForHumans() }}</td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="text-center py-4">
                            <i class="fas fa-shopping-cart fa-3x text-muted mb-3"></i>
                            <p class="text-muted">{{ __('No recent orders') }}</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        {{-- Quick Actions --}}
        <div class="col-lg-4">
            <div class="admin-card">
                <div class="card-header-custom">
                    <h5 class="mb-0">
                        <i class="fas fa-bolt text-warning me-2"></i>
                        {{ __('Quick Actions') }}
                    </h5>
                </div>
                <div class="card-body-custom">
                    <div class="d-grid gap-3">
                        <a href="{{ route('admin.products.create') }}" class="btn btn-outline-primary">
                            <i class="fas fa-plus me-2"></i>{{ __('Add Product') }}
                        </a>
                        <a href="{{ route('admin.categories.create') }}" class="btn btn-outline-success">
                            <i class="fas fa-tag me-2"></i>{{ __('Add Category') }}
                        </a>
                        <a href="{{ route('admin.orders.list') }}" class="btn btn-outline-info">
                            <i class="fas fa-list me-2"></i>{{ __('Manage Orders') }}
                        </a>
                        <button class="btn btn-outline-secondary" onclick="clearCache()">
                            <i class="fas fa-sync me-2"></i>{{ __('Clear Cache') }}
                        </button>
                    </div>

                    <hr class="my-4">

                    <h6 class="mb-3">{{ __('System Status') }}</h6>
                    <div class="d-flex justify-content-between mb-2">
                        <span>{{ __('Environment') }}</span>
                        <span class="badge bg-{{ app()->environment() === 'production' ? 'danger' : 'warning' }}">
                            {{ ucfirst(app()->environment()) }}
                        </span>
                    </div>
                    <div class="d-flex justify-content-between">
                        <span>{{ __('Debug Mode') }}</span>
                        <span class="badge bg-{{ config('app.debug') ? 'warning' : 'success' }}">
                            {{ config('app.debug') ? __('Enabled') : __('Disabled') }}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .stats-card {
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
            border-left: 4px solid transparent;
        }

        .stats-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }

        .revenue-card { border-left-color: #28a745; }
        .orders-card { border-left-color: #007bff; }
        .products-card { border-left-color: #17a2b8; }
        .customers-card { border-left-color: #ffc107; }

        .metric-card {
            background: white;
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
            border: 1px solid #e3e6f0;
            display: flex;
            align-items: center;
            transition: all 0.3s ease;
        }

        .metric-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
        }

        .metric-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            font-size: 1.5rem;
            color: white;
        }

        .metric-content h4 {
            margin: 0;
            font-size: 1.8rem;
            font-weight: bold;
            color: #2c3e50;
        }

        .metric-content p {
            margin: 0;
            color: #6c757d;
            font-size: 0.9rem;
        }

        .popular-product-item {
            padding: 15px;
            border-radius: 10px;
            background: #f8f9fa;
            transition: all 0.2s ease;
        }

        .popular-product-item:hover {
            background: #e9ecef;
            transform: translateX(5px);
        }

        .stats-card::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 100px;
            height: 100px;
            background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), transparent);
            border-radius: 50%;
            transform: translate(30px, -30px);
        }

        #salesChart {
            max-height: 300px;
        }

        .table th {
            border-top: none;
            font-weight: 600;
            color: #495057;
            background-color: #f8f9fa;
        }

        .table-hover tbody tr:hover {
            background-color: rgba(0, 123, 255, 0.05);
        }

        .admin-card {
            transition: all 0.3s ease;
        }

        .admin-card:hover {
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .stats-card {
            animation: fadeInUp 0.6s ease forwards;
        }

        .metric-card {
            animation: fadeInUp 0.8s ease forwards;
        }
    </style>
@endpush

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        let currentPeriod = 30;
        let salesChart;
        let currentChartType = 'orders';
        let salesData = @json($salesAnalytics ?? []);

        // Initialize dashboard
        document.addEventListener('DOMContentLoaded', function () {
            initializeSalesChart();
            animateStatsCards();

            // Auto refresh every 5 minutes
            setInterval(refreshDashboard, 300000);
        });

        // Initialize sales chart
        function initializeSalesChart() {
            const ctx = document.getElementById('salesChart').getContext('2d');

            salesChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: salesData.map(item => item.label),
                    datasets: [{
                        label: '{{ __("Orders") }}',
                        data: salesData.map(item => item.orders),
                        borderColor: 'rgb(54, 162, 235)',
                        backgroundColor: 'rgba(54, 162, 235, 0.1)',
                        tension: 0.4,
                        fill: true,
                        pointBackgroundColor: 'rgb(54, 162, 235)',
                        pointBorderColor: '#fff',
                        pointBorderWidth: 2,
                        pointRadius: 4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top',
                        },
                        tooltip: {
                            mode: 'index',
                            intersect: false,
                            backgroundColor: 'rgba(0, 0, 0, 0.8)',
                            titleColor: '#fff',
                            bodyColor: '#fff',
                            borderColor: 'rgba(54, 162, 235, 1)',
                            borderWidth: 1
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                color: 'rgba(0, 0, 0, 0.05)'
                            },
                            ticks: {
                                callback: function(value) {
                                    if (currentChartType === 'revenue') {
                                        return value.toLocaleString() + ' SAR';
                                    }
                                    return value;
                                }
                            }
                        },
                        x: {
                            grid: {
                                color: 'rgba(0, 0, 0, 0.05)'
                            }
                        }
                    },
                    interaction: {
                        mode: 'nearest',
                        axis: 'x',
                        intersect: false
                    }
                }
            });
        }

        // Show different chart types
        function showChart(type) {
            currentChartType = type;

            // Update button states
            document.querySelectorAll('.btn-group .btn').forEach(btn => {
                btn.classList.remove('active');
            });
            event.target.classList.add('active');

            // Update chart data
            if (type === 'orders') {
                salesChart.data.datasets[0].data = salesData.map(item => item.orders);
                salesChart.data.datasets[0].label = '{{ __("Orders") }}';
                salesChart.data.datasets[0].borderColor = 'rgb(54, 162, 235)';
                salesChart.data.datasets[0].backgroundColor = 'rgba(54, 162, 235, 0.1)';
            } else if (type === 'revenue') {
                salesChart.data.datasets[0].data = salesData.map(item => item.revenue);
                salesChart.data.datasets[0].label = '{{ __("Revenue (SAR)") }}';
                salesChart.data.datasets[0].borderColor = 'rgb(75, 192, 192)';
                salesChart.data.datasets[0].backgroundColor = 'rgba(75, 192, 192, 0.1)';
            }

            salesChart.update();
        }

        // Change time period
        function changePeriod(days, text) {
            currentPeriod = days;
            document.getElementById('periodText').textContent = text;
            loadChartData();
        }

        // Load chart data
        function loadChartData() {
            fetch(`{{ route('admin.dashboard.chart-data') }}?period=${currentPeriod}&type=${currentChartType}`)
                .then(response => response.json())
                .then(data => {
                    salesChart.data.labels = data.map(item => item.label);
                    salesChart.data.datasets[0].data = data.map(item => item.value);
                    salesChart.update();
                })
                .catch(error => {
                    console.error('Error loading chart data:', error);
                });
        }

        // Animate stats cards
        function animateStatsCards() {
            const statsCards = document.querySelectorAll('.stats-card, .metric-card');
            statsCards.forEach((card, index) => {
                card.style.opacity = '0';
                card.style.transform = 'translateY(20px)';

                setTimeout(() => {
                    card.style.transition = 'all 0.6s ease';
                    card.style.opacity = '1';
                    card.style.transform = 'translateY(0)';
                }, index * 100);
            });
        }

        // Refresh dashboard
        function refreshDashboard() {
            const button = event?.target;
            let originalContent = '';

            if (button) {
                originalContent = button.innerHTML;
                button.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>{{ __("Refreshing...") }}';
                button.disabled = true;
            }

            // Refresh stats
            fetch('{{ route('admin.dashboard.quick-stats') }}')
                .then(response => response.json())
                .then(data => {
                    // Update stats
                    document.getElementById('totalRevenue').textContent =
                        new Intl.NumberFormat().format(data.today_revenue || 0);
                    document.getElementById('totalOrders').textContent = data.total_orders || 0;
                    document.getElementById('totalProducts').textContent = data.total_products || 0;
                    document.getElementById('totalCustomers').textContent = data.total_users || 0;

                    // Refresh chart
                    loadChartData();

                    showNotification('{{ __("Dashboard refreshed successfully!") }}', 'success');
                })
                .catch(error => {
                    console.error('Error refreshing dashboard:', error);
                    showNotification('{{ __("Error refreshing dashboard") }}', 'error');
                })
                .finally(() => {
                    if (button) {
                        button.innerHTML = originalContent;
                        button.disabled = false;
                    }
                });
        }

        // Clear cache
        function clearCache() {
            if (confirm('{{ __("Are you sure you want to clear the cache?") }}')) {
                fetch('{{ route('admin.dashboard.clear-cache') }}', {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'Content-Type': 'application/json'
                    }
                })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            showNotification(data.message, 'success');
                        } else {
                            showNotification(data.message, 'error');
                        }
                    })
                    .catch(error => {
                        console.error('Error clearing cache:', error);
                        showNotification('{{ __("Error clearing cache") }}', 'error');
                    });
            }
        }

        // Show notification
        function showNotification(message, type) {
            const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
            const icon = type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle';

            const alert = document.createElement('div');
            alert.className = `alert ${alertClass} alert-dismissible fade show position-fixed`;
            alert.style.cssText = 'top: 80px; right: 20px; z-index: 9999; min-width: 300px;';
            alert.innerHTML = `
                <i class="fas ${icon} me-2"></i>
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            `;

            document.body.appendChild(alert);

            setTimeout(() => {
                if (alert.parentNode) {
                    alert.remove();
                }
            }, 5000);
        }
    </script>
@endpush