@extends('layouts.panel')

@section('title', 'داشبورد منیجینو ابزار برای مدیریت خرید و فروش مواد شیمیایی')
@section('meta_description', 'نمای کلی فعالیت‌ها و میانبرها در پنل مدیریت منیجینو ابزار برای مدیریت خرید و فروش مواد شیمیایی')

@push('styles')
<style>
	/* فقط پاراگراف‌های توضیحی در داشبورد */
	#dashboard-container p.text-slate-300 { font-size: 12px !important; }
	/* Activity colors */
	.bg-blue-500\/10 { background-color: rgba(59, 130, 246, 0.1); }
	.ring-blue-500\/20 { --tw-ring-color: rgba(59, 130, 246, 0.2); }
	.bg-emerald-500\/10 { background-color: rgba(16, 185, 129, 0.1); }
	.ring-emerald-500\/20 { --tw-ring-color: rgba(16, 185, 129, 0.2); }
	.bg-indigo-500\/10 { background-color: rgba(99, 102, 241, 0.1); }
	.ring-indigo-500\/20 { --tw-ring-color: rgba(99, 102, 241, 0.2); }
	.bg-violet-500\/10 { background-color: rgba(139, 92, 246, 0.1); }
	.ring-violet-500\/20 { --tw-ring-color: rgba(139, 92, 246, 0.2); }
	.bg-yellow-500\/10 { background-color: rgba(234, 179, 8, 0.1); }
	.ring-yellow-500\/20 { --tw-ring-color: rgba(234, 179, 8, 0.2); }
	.bg-orange-500\/10 { background-color: rgba(249, 115, 22, 0.1); }
	.ring-orange-500\/20 { --tw-ring-color: rgba(249, 115, 22, 0.2); }
	
	/* Custom scrollbar for activities */
	.max-h-96::-webkit-scrollbar {
		width: 6px;
	}
	.max-h-96::-webkit-scrollbar-track {
		background: rgba(30, 41, 59, 0.3);
		border-radius: 3px;
	}
	.max-h-96::-webkit-scrollbar-thumb {
		background: rgba(148, 163, 184, 0.3);
		border-radius: 3px;
	}
	.max-h-96::-webkit-scrollbar-thumb:hover {
		background: rgba(148, 163, 184, 0.5);
	}
	
	/* User Activity Stats Scrollbar */
	.user-activity-scroll::-webkit-scrollbar {
		width: 6px;
	}
	.user-activity-scroll::-webkit-scrollbar-track {
		background: rgba(30, 41, 59, 0.2);
		border-radius: 3px;
	}
	.user-activity-scroll::-webkit-scrollbar-thumb {
		background: rgba(148, 163, 184, 0.3);
		border-radius: 3px;
	}
	.user-activity-scroll::-webkit-scrollbar-thumb:hover {
		background: rgba(148, 163, 184, 0.5);
	}
</style>
@endpush

@section('content')
<div id="dashboard-container" class="space-y-6">
    <!-- Quick Stats -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
        <!-- Products -->
        <div class="glass rounded-2xl border border-slate-700/60 p-6 flex items-center justify-between group hover:border-indigo-500/50 transition-all duration-300">
            <div class="flex flex-col">
                <span class="text-slate-400 text-sm mb-2 font-medium">محصولات</span>
                <span class="text-white text-4xl font-bold leading-none">{{ $stats['productCount'] ?? 0 }}</span>
                <span class="text-slate-500 text-xs mt-1">کل محصولات سیستم</span>
            </div>
            <div class="size-16 flex items-center justify-center rounded-2xl bg-gradient-to-br from-indigo-500/20 to-purple-600/20 ring-1 ring-inset ring-indigo-500/30 text-indigo-400 text-2xl group-hover:scale-110 transition-transform duration-300">
                📦
            </div>
        </div>

        <!-- Suppliers -->
        <div class="glass rounded-2xl border border-slate-700/60 p-6 flex items-center justify-between group hover:border-emerald-500/50 transition-all duration-300">
            <div class="flex flex-col">
                <span class="text-slate-400 text-sm mb-2 font-medium">تامین‌کنندگان</span>
                <span class="text-white text-4xl font-bold leading-none">{{ $stats['supplierCount'] ?? 0 }}</span>
                <span class="text-slate-500 text-xs mt-1">کل تامین‌کنندگان</span>
            </div>
            <div class="size-16 flex items-center justify-center rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-600/20 ring-1 ring-inset ring-emerald-500/30 text-emerald-400 text-2xl group-hover:scale-110 transition-transform duration-300">
                🏢
            </div>
        </div>

        <!-- Purchase Requests -->
        <div class="glass rounded-2xl border border-slate-700/60 p-6 flex items-center justify-between group hover:border-violet-500/50 transition-all duration-300">
            <div class="flex flex-col">
                <span class="text-slate-400 text-sm mb-2 font-medium">درخواست‌های خرید</span>
                <span class="text-white text-4xl font-bold leading-none">{{ $stats['purchaseRequestCount'] ?? 0 }}</span>
                <span class="text-slate-500 text-xs mt-1">کل درخواست‌ها</span>
            </div>
            <div class="size-16 flex items-center justify-center rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-600/20 ring-1 ring-inset ring-violet-500/30 text-violet-400 text-2xl group-hover:scale-110 transition-transform duration-300">
                🛒
            </div>
        </div>

        <!-- Inventory -->
        <div class="glass rounded-2xl border border-slate-700/60 p-6 flex items-center justify-between group hover:border-orange-500/50 transition-all duration-300">
            <div class="flex flex-col">
                <span class="text-slate-400 text-sm mb-2 font-medium">موجودی انبار</span>
                <span class="text-white text-4xl font-bold leading-none">{{ $stats['inventoryCount'] ?? 0 }}</span>
                <span class="text-slate-500 text-xs mt-1">محصولات موجود</span>
            </div>
            <div class="size-16 flex items-center justify-center rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-600/20 ring-1 ring-inset ring-orange-500/30 text-orange-400 text-2xl group-hover:scale-110 transition-transform duration-300">
                🏭
            </div>
        </div>
    </div>

    <!-- Two Column Section: Left (Sales Specialists Chart) and Right (Purchase Report Chart) -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Left Column: Sales Specialists Purchase Requests Chart -->
        <div class="glass rounded-2xl p-6">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-lg font-semibold text-slate-200">درخواست‌های خرید کارشناسان فروش</h2>
                <button class="text-slate-400 hover:text-slate-200 transition-colors" title="گزینه‌ها">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path>
                    </svg>
                </button>
            </div>
            
            <!-- Chart Legend -->
            <div class="flex items-center justify-end gap-6 mb-4 text-sm">
                <div class="flex items-center gap-2">
                    <div class="w-3 h-3 rounded bg-blue-500"></div>
                    <span class="text-slate-300">تعداد درخواست‌ها</span>
                </div>
                <div class="flex items-center gap-2">
                    <div class="w-3 h-3 rounded bg-green-500"></div>
                    <span class="text-slate-300">ارزش خرید (میلیون تومان)</span>
                </div>
            </div>
            
            <!-- Chart Container -->
            <div class="relative" style="height: 300px;">
                <canvas id="salesSpecialistsChart"></canvas>
            </div>
        </div>

        <!-- Right Column: Purchase Report Chart -->
        <div class="glass rounded-2xl p-6">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-lg font-semibold text-slate-200">گزارش خرید</h2>
                <button class="text-slate-400 hover:text-slate-200 transition-colors" title="گزینه‌ها">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path>
                    </svg>
                </button>
            </div>
            
            <!-- Chart Legend -->
            <div class="flex items-center justify-end gap-6 mb-4 text-sm">
                <div class="flex items-center gap-2">
                    <div class="w-3 h-3 rounded-full bg-blue-500"></div>
                    <span class="text-slate-300">مقدار مالی</span>
                </div>
                <div class="flex items-center gap-2">
                    <div class="w-3 h-3 rounded-full bg-orange-500"></div>
                    <span class="text-slate-300">تعداد درخواست‌ها</span>
                </div>
            </div>
            
            <!-- Chart Container -->
            <div class="relative" style="height: 300px;">
                <canvas id="purchaseReportChart"></canvas>
            </div>
        </div>
    </div>

    <!-- Recent Activity -->
    <div class="glass rounded-2xl p-6">
        <div class="flex items-center justify-between mb-6">
            <h2 class="text-lg font-semibold text-slate-200">فعالیت‌های اخیر</h2>
            <div class="flex items-center gap-2 text-sm text-slate-400">
                <span class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></span>
                <span>زنده</span>
            </div>
        </div>
        
        @if($recentActivities && $recentActivities->count() > 0)
            <div class="space-y-3 max-h-96 overflow-y-auto">
                @foreach($recentActivities as $activity)
                    <a href="{{ $activity['url'] ?? '#' }}" class="group relative flex items-start gap-4 p-4 rounded-xl bg-slate-800/50 hover:bg-slate-700/50 transition-all duration-200 border border-slate-700/30 hover:border-slate-600/50 block">
                        <!-- Activity Icon -->
                        <div class="flex-shrink-0 w-10 h-10 rounded-full bg-{{ $activity['color'] }}-500/10 ring-1 ring-{{ $activity['color'] }}-500/20 flex items-center justify-center text-lg group-hover:scale-110 transition-transform duration-200">
                            {{ $activity['icon'] }}
                        </div>
                        
                        <!-- Activity Content -->
                        <div class="flex-1 min-w-0">
                            <div class="flex items-start justify-between gap-2">
                                <h3 class="text-sm font-medium text-slate-200 group-hover:text-white transition-colors">
                                    {{ $activity['title'] }}
                                </h3>
                                <time class="text-xs text-slate-400 flex-shrink-0">
                                    {{ \Carbon\Carbon::parse($activity['time'])->diffForHumans() }}
                                </time>
                            </div>
                            <p class="text-sm text-slate-400 mt-1 leading-relaxed">
                                {{ $activity['description'] }}
                            </p>
                        </div>
                        
                        <!-- Hover Arrow -->
                        <div class="opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex-shrink-0">
                            <svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                            </svg>
                        </div>
                    </a>
                @endforeach
            </div>
            
            <!-- View All Activities -->
            <div class="mt-6 pt-4 border-t border-slate-700/50">
                <a href="{{ route('reminders.index') }}" class="inline-flex items-center gap-2 text-sm text-slate-400 hover:text-slate-200 transition-colors group">
                    <span>مشاهده تمام فعالیت‌ها</span>
                    <svg class="w-4 h-4 group-hover:translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                    </svg>
                </a>
            </div>
        @else
            <div class="text-center py-12 text-slate-400">
                <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-slate-800/50 flex items-center justify-center">
                    <span class="text-2xl">📝</span>
                </div>
                <h3 class="text-lg font-medium text-slate-300 mb-2">هنوز فعالیتی ثبت نشده است</h3>
                <p class="text-sm">وقتی فعالیت‌های جدیدی انجام شود، اینجا نمایش داده می‌شود</p>
            </div>
        @endif
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Fetch sales specialists data
    fetch('{{ route("api.dashboard.sales-specialists") }}')
        .then(response => response.json())
        .then(data => {
            const ctx = document.getElementById('salesSpecialistsChart');
            if (!ctx) return;
            
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: data.labels,
                    datasets: [
                        {
                            label: 'تعداد درخواست‌ها',
                            data: data.counts,
                            backgroundColor: 'rgba(59, 130, 246, 0.7)',
                            borderColor: 'rgba(59, 130, 246, 1)',
                            borderWidth: 1,
                            yAxisID: 'y',
                            order: 2
                        },
                        {
                            label: 'ارزش خرید (میلیون تومان)',
                            data: data.values,
                            backgroundColor: 'rgba(16, 185, 129, 0.7)',
                            borderColor: 'rgba(16, 185, 129, 1)',
                            borderWidth: 1,
                            yAxisID: 'y1',
                            order: 1
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            backgroundColor: 'rgba(15, 23, 42, 0.95)',
                            titleColor: '#e2e8f0',
                            bodyColor: '#cbd5e1',
                            borderColor: 'rgba(148, 163, 184, 0.3)',
                            borderWidth: 1,
                            padding: 12,
                            displayColors: true,
                            callbacks: {
                                label: function(context) {
                                    let label = context.dataset.label || '';
                                    if (label) {
                                        label += ': ';
                                    }
                                    if (context.dataset.label === 'ارزش خرید (میلیون تومان)') {
                                        label += Math.round(context.parsed.y) + ' میلیون تومان';
                                    } else {
                                        label += context.parsed.y + ' درخواست';
                                    }
                                    return label;
                                }
                            }
                        }
                    },
                    scales: {
                        y: {
                            type: 'linear',
                            position: 'left',
                            beginAtZero: true,
                            grid: {
                                color: 'rgba(148, 163, 184, 0.1)',
                                drawBorder: false
                            },
                            ticks: {
                                color: '#3b82f6',
                                font: {
                                    size: 11
                                }
                            },
                            title: {
                                display: true,
                                text: 'تعداد درخواست‌ها',
                                color: '#3b82f6',
                                font: {
                                    size: 11
                                }
                            }
                        },
                        y1: {
                            type: 'linear',
                            position: 'right',
                            beginAtZero: true,
                            grid: {
                                drawOnChartArea: false,
                            },
                            ticks: {
                                color: '#10b981',
                                font: {
                                    size: 11
                                },
                                callback: function(value) {
                                    return Math.round(value) + 'M';
                                }
                            },
                            title: {
                                display: true,
                                text: 'ارزش خرید (میلیون تومان)',
                                color: '#10b981',
                                font: {
                                    size: 11
                                }
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            },
                            ticks: {
                                color: '#94a3b8',
                                font: {
                                    size: 10
                                },
                                maxRotation: 45,
                                minRotation: 45
                            }
                        }
                    },
                    interaction: {
                        intersect: false,
                        mode: 'index'
                    }
                }
            });
        })
        .catch(error => {
            console.error('Error loading sales specialists data:', error);
        });
    
    // Fetch purchase report data
    fetch('{{ route("api.dashboard.income-report") }}')
        .then(response => response.json())
        .then(data => {
            const ctx = document.getElementById('purchaseReportChart');
            if (!ctx) return;
            
            // Helper function to format value (convert to billion if >= 1000M)
            function formatAmount(value) {
                if (value >= 1000) {
                    return (value / 1000).toFixed(1) + 'B';
                }
                return Math.round(value) + 'M';
            }
            
            // Helper function to format amount with label
            function formatAmountLabel(value) {
                if (value >= 1000) {
                    return (value / 1000).toFixed(1) + ' میلیارد تومان';
                }
                return Math.round(value) + ' میلیون تومان';
            }
            
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: data.months,
                    datasets: [
                        {
                            label: 'مقدار مالی',
                            data: data.amounts,
                            backgroundColor: 'rgba(59, 130, 246, 0.8)',
                            borderColor: 'rgba(59, 130, 246, 1)',
                            borderWidth: 1,
                            type: 'bar',
                            order: 2,
                            yAxisID: 'y'
                        },
                        {
                            label: 'تعداد درخواست‌ها',
                            data: data.counts,
                            borderColor: 'rgba(249, 115, 22, 1)',
                            backgroundColor: 'transparent',
                            borderWidth: 2,
                            type: 'line',
                            order: 1,
                            pointRadius: 4,
                            pointBackgroundColor: 'rgba(249, 115, 22, 1)',
                            pointBorderColor: '#fff',
                            pointBorderWidth: 2,
                            pointHoverRadius: 6,
                            tension: 0.4,
                            yAxisID: 'y1'
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            backgroundColor: 'rgba(15, 23, 42, 0.95)',
                            titleColor: '#e2e8f0',
                            bodyColor: '#cbd5e1',
                            borderColor: 'rgba(148, 163, 184, 0.3)',
                            borderWidth: 1,
                            padding: 12,
                            displayColors: true,
                            callbacks: {
                                label: function(context) {
                                    let label = context.dataset.label || '';
                                    if (label) {
                                        label += ': ';
                                    }
                                    if (context.dataset.label === 'مقدار مالی') {
                                        label += formatAmountLabel(context.parsed.y);
                                    } else {
                                        label += context.parsed.y + ' درخواست';
                                    }
                                    return label;
                                }
                            }
                        }
                    },
                    scales: {
                        y: {
                            type: 'linear',
                            position: 'left',
                            beginAtZero: true,
                            grid: {
                                color: 'rgba(148, 163, 184, 0.1)',
                                drawBorder: false
                            },
                            ticks: {
                                color: '#94a3b8',
                                font: {
                                    size: 11
                                },
                                callback: function(value) {
                                    return formatAmount(value);
                                }
                            },
                            title: {
                                display: true,
                                text: 'مقدار مالی',
                                color: '#94a3b8',
                                font: {
                                    size: 11
                                }
                            }
                        },
                        y1: {
                            type: 'linear',
                            position: 'right',
                            beginAtZero: true,
                            grid: {
                                drawOnChartArea: false,
                            },
                            ticks: {
                                color: '#f97316',
                                font: {
                                    size: 11
                                }
                            },
                            title: {
                                display: true,
                                text: 'تعداد درخواست‌ها',
                                color: '#f97316',
                                font: {
                                    size: 11
                                }
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            },
                            ticks: {
                                color: '#94a3b8',
                                font: {
                                    size: 11
                                }
                            }
                        }
                    },
                    interaction: {
                        intersect: false,
                        mode: 'index'
                    }
                }
            });
        })
        .catch(error => {
            console.error('Error loading purchase report data:', error);
        });
});
</script>
@endpush