@extends('admin.layouts.app')

@section('title', 'داشبورد')

@section('content')
<div class="row">
    <!-- Statistics Cards -->
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="stat-card" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
            <i class="fas fa-users icon"></i>
            <div class="value">{{ number_format($stats['totalUsers'] ?? 0) }}</div>
            <div class="label">کل کاربران</div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="stat-card" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
            <i class="fas fa-id-card icon"></i>
            <div class="value">{{ number_format($stats['totalDrivers'] ?? 0) }}</div>
            <div class="label">رانندگان</div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="stat-card" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
            <i class="fas fa-boxes icon"></i>
            <div class="value">{{ number_format($stats['totalLoads'] ?? 0) }}</div>
            <div class="label">کل بارها</div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="stat-card" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
            <i class="fas fa-dollar-sign icon"></i>
            <div class="value">{{ number_format($stats['revenueThisMonth'] ?? 0) }}</div>
            <div class="label">درآمد این ماه (تومان)</div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Quick Stats -->
    <div class="col-lg-3 col-md-6 mb-4">
        <div class="card">
            <div class="card-body text-center">
                <div class="mb-3">
                    <i class="fas fa-clock fa-2x text-warning"></i>
                </div>
                <h3 class="mb-1">{{ number_format($stats['loadsByStatus']['pending'] ?? 0) }}</h3>
                <p class="text-muted mb-0">بارهای در انتظار</p>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6 mb-4">
        <div class="card">
            <div class="card-body text-center">
                <div class="mb-3">
                    <i class="fas fa-truck fa-2x text-primary"></i>
                </div>
                <h3 class="mb-1">{{ number_format($stats['loadsByStatus']['in_transit'] ?? 0) }}</h3>
                <p class="text-muted mb-0">بارهای در حال حمل</p>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6 mb-4">
        <div class="card">
            <div class="card-body text-center">
                <div class="mb-3">
                    <i class="fas fa-check-circle fa-2x text-success"></i>
                </div>
                <h3 class="mb-1">{{ number_format($stats['loadsByStatus']['delivered'] ?? 0) }}</h3>
                <p class="text-muted mb-0">بارهای تحویل شده</p>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6 mb-4">
        <div class="card">
            <div class="card-body text-center">
                <div class="mb-3">
                    <i class="fas fa-user-check fa-2x text-info"></i>
                </div>
                <h3 class="mb-1">{{ number_format($stats['activeDrivers'] ?? 0) }}</h3>
                <p class="text-muted mb-0">رانندگان آنلاین</p>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Monthly Revenue Chart -->
    <div class="col-lg-8 mb-4">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">نمودار درآمد ماهانه</h5>
                <div class="btn-group btn-group-sm" role="group">
                    <button type="button" class="btn btn-outline-primary active" data-period="month">ماهانه</button>
                    <button type="button" class="btn btn-outline-primary" data-period="year">سالانه</button>
                </div>
            </div>
            <div class="card-body">
                <canvas id="revenueChart" height="80"></canvas>
            </div>
        </div>
    </div>

    <!-- Load Status Pie Chart -->
    <div class="col-lg-4 mb-4">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">وضعیت بارها</h5>
            </div>
            <div class="card-body">
                @php
                    $totalLoadsCount = ($stats['loadsByStatus']['pending'] ?? 0) +
                                      ($stats['loadsByStatus']['in_transit'] ?? 0) +
                                      ($stats['loadsByStatus']['delivered'] ?? 0) +
                                      ($stats['loadsByStatus']['cancelled'] ?? 0);
                @endphp

                @if($totalLoadsCount > 0)
                    <canvas id="loadStatusChart"></canvas>
                @else
                    <div class="text-center py-5">
                        <i class="fas fa-chart-pie fa-3x text-muted mb-3"></i>
                        <p class="text-muted mb-0">اطلاعاتی برای نمایش در نمودار وجود ندارد</p>
                    </div>
                @endif

                <div class="mt-3">
                    <div class="d-flex justify-content-between mb-2">
                        <span><i class="fas fa-circle text-warning"></i> در انتظار</span>
                        <strong>{{ $stats['loadsByStatus']['pending'] ?? 0 }}</strong>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span><i class="fas fa-circle text-primary"></i> در حال حمل</span>
                        <strong>{{ $stats['loadsByStatus']['in_transit'] ?? 0 }}</strong>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span><i class="fas fa-circle text-success"></i> تحویل شده</span>
                        <strong>{{ $stats['loadsByStatus']['delivered'] ?? 0 }}</strong>
                    </div>
                    <div class="d-flex justify-content-between">
                        <span><i class="fas fa-circle text-danger"></i> لغو شده</span>
                        <strong>{{ $stats['loadsByStatus']['cancelled'] ?? 0 }}</strong>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Recent Loads -->
    <div class="col-lg-8 mb-4">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">آخرین بارها</h5>
                <a href="{{ route('admin.loads.index') }}" class="btn btn-sm btn-outline-primary">
                    مشاهده همه
                    <i class="fas fa-arrow-left me-1"></i>
                </a>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead>
                            <tr>
                                <th>کد</th>
                                <th>عنوان</th>
                                <th>درخواست کننده</th>
                                <th>راننده</th>
                                <th>قیمت</th>
                                <th>وضعیت</th>
                                <th>عملیات</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($stats['recentLoads'] ?? [] as $load)
                            <tr>
                                <td>#{{ $load->id }}</td>
                                <td>{{ $load->title }}</td>
                                <td>{{ $load->requester->name ?? 'نامشخص' }}</td>
                                <td>
                                    @if($load->driver)
                                        {{ $load->driver->name }}
                                    @else
                                        <span class="text-muted">تخصیص نیافته</span>
                                    @endif
                                </td>
                                <td>{{ number_format($load->price) }} تومان</td>
                                <td>
                                    @if($load->status === 'pending')
                                        <span class="badge bg-warning">در انتظار</span>
                                    @elseif($load->status === 'approved')
                                        <span class="badge bg-info">تایید شده</span>
                                    @elseif($load->status === 'in_progress')
                                        <span class="badge bg-primary">در حال انجام</span>
                                    @elseif($load->status === 'completed')
                                        <span class="badge bg-success">تکمیل شده</span>
                                    @else
                                        <span class="badge bg-danger">لغو شده</span>
                                    @endif
                                </td>
                                <td>
                                    <a href="{{ route('admin.loads.show', $load->id) }}" class="btn btn-sm btn-outline-primary">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="7" class="text-center text-muted py-4">
                                    <i class="fas fa-inbox fa-2x mb-2"></i>
                                    <p class="mb-0">هیچ باری یافت نشد</p>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Activities -->
    <div class="col-lg-4 mb-4">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">فعالیت‌های اخیر</h5>
            </div>
            <div class="card-body" style="max-height: 400px; overflow-y: auto;">
                @forelse($stats['recentUsers'] ?? [] as $user)
                <div class="d-flex mb-3 pb-3 border-bottom">
                    <div class="flex-shrink-0">
                        <div class="rounded-circle bg-{{ $user->role === 'driver' ? 'success' : 'primary' }} text-white d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                            <i class="fas fa-{{ $user->role === 'driver' ? 'car' : 'user' }}"></i>
                        </div>
                    </div>
                    <div class="flex-grow-1 me-3">
                        <p class="mb-1 fw-bold">{{ $user->name }}</p>
                        <p class="mb-1 text-muted small">{{ $user->email }}</p>
                        <small class="text-muted">
                            <i class="fas fa-clock"></i>
                            {{ \Morilog\Jalali\Jalalian::forge($user->created_at)->ago() }}
                        </small>
                    </div>
                </div>
                @empty
                <div class="text-center text-muted py-4">
                    <i class="fas fa-history fa-2x mb-2"></i>
                    <p class="mb-0">کاربر جدیدی یافت نشد</p>
                </div>
                @endforelse
            </div>
        </div>
    </div>
</div>

<!-- Quick Actions -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">دسترسی سریع</h5>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-3">
                        <a href="{{ route('admin.users.create') }}" class="btn btn-outline-primary w-100">
                            <i class="fas fa-user-plus fa-2x mb-2"></i>
                            <p class="mb-0">افزودن کاربر جدید</p>
                        </a>
                    </div>
                    <div class="col-md-3">
                        <a href="{{ route('admin.loads.index') }}?status=pending" class="btn btn-outline-warning w-100">
                            <i class="fas fa-clock fa-2x mb-2"></i>
                            <p class="mb-0">بارهای در انتظار تایید</p>
                        </a>
                    </div>
                    <div class="col-md-3">
                        <a href="{{ route('admin.map') }}" class="btn btn-outline-success w-100">
                            <i class="fas fa-map-marked-alt fa-2x mb-2"></i>
                            <p class="mb-0">نقشه آنلاین رانندگان</p>
                        </a>
                    </div>
                    <div class="col-md-3">
                        <a href="{{ route('admin.reports.index') }}" class="btn btn-outline-info w-100">
                            <i class="fas fa-chart-bar fa-2x mb-2"></i>
                            <p class="mb-0">گزارشات</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    // Revenue Chart
    const revenueCtx = document.getElementById('revenueChart').getContext('2d');
    const revenueChart = new Chart(revenueCtx, {
        type: 'line',
        data: {
            labels: {!! json_encode($revenueLabels ?? ['فروردین', 'اردیبهشت', 'خرداد', 'تیر', 'مرداد', 'شهریور']) !!},
            datasets: [{
                label: 'درآمد (تومان)',
                data: {!! json_encode($revenueData ?? [1200000, 1900000, 3000000, 5000000, 2300000, 4500000]) !!},
                borderColor: 'rgb(30, 58, 138)',
                backgroundColor: 'rgba(30, 58, 138, 0.1)',
                tension: 0.4,
                fill: true
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            plugins: {
                legend: {
                    display: true,
                    position: 'top',
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return value.toLocaleString('fa-IR');
                        }
                    }
                }
            }
        }
    });

    // Load Status Pie Chart
    const statusCtx = document.getElementById('loadStatusChart');
    if (statusCtx) {
        const statusChart = new Chart(statusCtx, {
            type: 'doughnut',
            data: {
                labels: ['در انتظار', 'در حال حمل', 'تحویل شده', 'لغو شده'],
                datasets: [{
                    data: [
                        {{ $stats['loadsByStatus']['pending'] ?? 0 }},
                        {{ $stats['loadsByStatus']['in_transit'] ?? 0 }},
                        {{ $stats['loadsByStatus']['delivered'] ?? 0 }},
                        {{ $stats['loadsByStatus']['cancelled'] ?? 0 }}
                    ],
                    backgroundColor: [
                        'rgb(251, 191, 36)',
                        'rgb(59, 130, 246)',
                        'rgb(34, 197, 94)',
                        'rgb(239, 68, 68)'
                    ],
                    borderWidth: 2,
                    borderColor: '#fff'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                plugins: {
                    legend: {
                        display: false
                    }
                }
            }
        });
    }

    // Period switcher for revenue chart
    document.querySelectorAll('[data-period]').forEach(btn => {
        btn.addEventListener('click', function() {
            document.querySelectorAll('[data-period]').forEach(b => b.classList.remove('active'));
            this.classList.add('active');

            const period = this.dataset.period;
            // Here you would typically make an AJAX call to fetch new data
            showLoading();
            setTimeout(() => {
                hideLoading();
                showToast('داده‌های نمودار به‌روز شد', 'success');
            }, 1000);
        });
    });
</script>
@endpush