@extends('layouts.admin')

@section('title', 'Dashboard')

@section('content')
<!-- Page Header -->
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1 class="h3 mb-1 text-gray-800 font-weight-bold">Dashboard</h1>
        <p class="text-muted mb-0">Welcome back! Here's what's happening with your business platform.</p>
    </div>
    <div class="d-flex gap-2">
        <button type="button" class="btn btn-outline-primary btn-sm">
            <i class="bi bi-download me-1"></i>
            Export Report
        </button>
        <button type="button" class="btn btn-primary btn-sm">
            <i class="bi bi-plus-lg me-1"></i>
            Quick Add
        </button>
    </div>
</div>

<!-- Stats Cards -->
<div class="row g-4 mb-4">
    <div class="col-xl-3 col-md-6">
        <div class="card h-100 border-0 shadow-sm">
            <div class="card-body p-4">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        <div class="small text-muted fw-medium mb-1">TOTAL USERS</div>
                        <div class="h4 mb-0 fw-bold text-dark">{{ number_format($totalUsers) }}</div>
                        <div class="small text-success mt-1">
                            <i class="bi bi-arrow-up me-1"></i>
                            <span class="fw-medium">+12%</span> from last month
                        </div>
                    </div>
                    <div class="ms-3">
                        <div class="d-flex align-items-center justify-content-center rounded-3" 
                             style="width: 48px; height: 48px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                            <i class="bi bi-people text-white" style="font-size: 20px;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6">
        <div class="card h-100 border-0 shadow-sm">
            <div class="card-body p-4">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        <div class="small text-muted fw-medium mb-1">BUSINESSES</div>
                        <div class="h4 mb-0 fw-bold text-dark">{{ number_format($totalBusinesses) }}</div>
                        <div class="small text-success mt-1">
                            <i class="bi bi-arrow-up me-1"></i>
                            <span class="fw-medium">+8%</span> from last month
                        </div>
                    </div>
                    <div class="ms-3">
                        <div class="d-flex align-items-center justify-content-center rounded-3" 
                             style="width: 48px; height: 48px; background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);">
                            <i class="bi bi-building text-white" style="font-size: 20px;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6">
        <div class="card h-100 border-0 shadow-sm">
            <div class="card-body p-4">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        <div class="small text-muted fw-medium mb-1">PRODUCTS</div>
                        <div class="h4 mb-0 fw-bold text-dark">{{ number_format($totalProducts) }}</div>
                        <div class="small text-info mt-1">
                            <i class="bi bi-arrow-up me-1"></i>
                            <span class="fw-medium">+24%</span> from last month
                        </div>
                    </div>
                    <div class="ms-3">
                        <div class="d-flex align-items-center justify-content-center rounded-3" 
                             style="width: 48px; height: 48px; background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);">
                            <i class="bi bi-box text-white" style="font-size: 20px;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6">
        <div class="card h-100 border-0 shadow-sm">
            <div class="card-body p-4">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        <div class="small text-muted fw-medium mb-1">NEW MESSAGES</div>
                        <div class="h4 mb-0 fw-bold text-dark">{{ number_format($newMessages) }}</div>
                        <div class="small text-warning mt-1">
                            <i class="bi bi-arrow-up me-1"></i>
                            <span class="fw-medium">+15%</span> from last month
                        </div>
                    </div>
                    <div class="ms-3">
                        <div class="d-flex align-items-center justify-content-center rounded-3" 
                             style="width: 48px; height: 48px; background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);">
                            <i class="bi bi-chat-dots text-white" style="font-size: 20px;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Charts Section -->
<div class="row g-4 mb-4">
    <div class="col-lg-8">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-header bg-white border-0 pt-4 pb-3">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <h5 class="card-title mb-1 fw-bold">Business Registrations</h5>
                        <p class="text-muted mb-0 small">Daily registrations over the last 30 days</p>
                    </div>
                    <div class="dropdown">
                        <button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown">
                            Last 30 Days
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">Last 7 Days</a></li>
                            <li><a class="dropdown-item" href="#">Last 30 Days</a></li>
                            <li><a class="dropdown-item" href="#">Last 90 Days</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="card-body pt-2">
                <div class="chart-container" style="position: relative; height: 350px;">
                    <canvas id="businessChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-header bg-white border-0 pt-4 pb-3">
                <h5 class="card-title mb-1 fw-bold">Business Types</h5>
                <p class="text-muted mb-0 small">Distribution of business categories</p>
            </div>
            <div class="card-body pt-2">
                <div class="chart-container" style="position: relative; height: 300px;">
                    <canvas id="businessTypesChart"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Recent Activity Section -->
<div class="row g-4">
    <div class="col-lg-6">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-header bg-white border-0 pt-4 pb-3">
                <div class="d-flex align-items-center justify-content-between">
                    <h5 class="card-title mb-0 fw-bold">Recent Users</h5>
                    <a href="{{ url('/admin/users') }}" class="btn btn-outline-primary btn-sm">View All</a>
                </div>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th class="border-0 fw-medium text-muted small">USER</th>
                                <th class="border-0 fw-medium text-muted small">ROLE</th>
                                <th class="border-0 fw-medium text-muted small">JOINED</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($latestUsers as $user)
                            <tr>
                                <td class="border-0 py-3">
                                    <div class="d-flex align-items-center">
                                        <div class="rounded-circle d-flex align-items-center justify-content-center me-3" 
                                             style="width: 36px; height: 36px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                                            <span class="text-white fw-medium small">{{ substr($user->name, 0, 1) }}</span>
                                        </div>
                                        <div>
                                            <div class="fw-medium text-dark">{{ $user->name }}</div>
                                            <div class="small text-muted">{{ $user->email }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="border-0 py-3">
                                    <span class="badge 
                                        @if($user->role === 'admin') badge-primary
                                        @elseif($user->role === 'seller') badge-success
                                        @else badge-secondary
                                        @endif
                                    ">{{ ucfirst($user->role) }}</span>
                                </td>
                                <td class="border-0 py-3">
                                    <span class="small text-muted">{{ $user->created_at->format('M d, Y') }}</span>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-header bg-white border-0 pt-4 pb-3">
                <div class="d-flex align-items-center justify-content-between">
                    <h5 class="card-title mb-0 fw-bold">Recent Businesses</h5>
                    <a href="{{ url('/admin/businesses') }}" class="btn btn-outline-primary btn-sm">View All</a>
                </div>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th class="border-0 fw-medium text-muted small">BUSINESS</th>
                                <th class="border-0 fw-medium text-muted small">TYPE</th>
                                <th class="border-0 fw-medium text-muted small">CREATED</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($latestBusinesses as $business)
                            <tr>
                                <td class="border-0 py-3">
                                    <div class="d-flex align-items-center">
                                        <div class="rounded-3 d-flex align-items-center justify-content-center me-3" 
                                             style="width: 36px; height: 36px; background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);">
                                            <i class="bi bi-building text-white"></i>
                                        </div>
                                        <div>
                                            <div class="fw-medium text-dark">{{ $business->name }}</div>
                                            <div class="small text-muted">{{ $business->user->name ?? 'N/A' }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="border-0 py-3">
                                    <span class="badge badge-success">{{ ucfirst($business->type) }}</span>
                                </td>
                                <td class="border-0 py-3">
                                    <span class="small text-muted">{{ $business->created_at->format('M d, Y') }}</span>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    // Modern chart configuration
    Chart.defaults.font.family = 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
    Chart.defaults.font.size = 12;
    Chart.defaults.color = '#64748b';

    // Business Registrations Chart
    var ctx = document.getElementById('businessChart').getContext('2d');
    var businessChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: {!! json_encode($chartLabels) !!},
            datasets: [{
                label: 'New Businesses',
                data: {!! json_encode($chartData) !!},
                backgroundColor: 'rgba(99, 102, 241, 0.1)',
                borderColor: '#6366f1',
                borderWidth: 3,
                pointRadius: 0,
                pointHoverRadius: 8,
                pointBackgroundColor: '#6366f1',
                pointBorderColor: '#ffffff',
                pointBorderWidth: 3,
                pointHoverBackgroundColor: '#6366f1',
                pointHoverBorderColor: '#ffffff',
                pointHoverBorderWidth: 3,
                tension: 0.4,
                fill: true
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            interaction: {
                intersect: false,
                mode: 'index'
            },
            plugins: {
                legend: {
                    display: false
                },
                tooltip: {
                    backgroundColor: '#1e293b',
                    titleColor: '#ffffff',
                    bodyColor: '#ffffff',
                    borderColor: '#374151',
                    borderWidth: 1,
                    cornerRadius: 8,
                    displayColors: false,
                    titleFont: {
                        weight: 600
                    },
                    bodyFont: {
                        weight: 500
                    }
                }
            },
            scales: {
                x: {
                    grid: {
                        display: false
                    },
                    border: {
                        display: false
                    },
                    ticks: {
                        color: '#9ca3af',
                        font: {
                            weight: 500
                        }
                    }
                },
                y: {
                    grid: {
                        color: '#f1f5f9',
                        drawBorder: false
                    },
                    border: {
                        display: false
                    },
                    ticks: {
                        beginAtZero: true,
                        color: '#9ca3af',
                        font: {
                            weight: 500
                        },
                        padding: 10
                    }
                }
            }
        }
    });

    // Business Types Chart
    var ctx2 = document.getElementById('businessTypesChart').getContext('2d');
    var businessTypesChart = new Chart(ctx2, {
        type: 'doughnut',
        data: {
            labels: {!! json_encode($businessTypeLabels) !!},
            datasets: [{
                data: {!! json_encode($businessTypeCounts) !!},
                backgroundColor: [
                    '#6366f1',
                    '#10b981',
                    '#f59e0b',
                    '#ef4444',
                    '#8b5cf6',
                    '#06b6d4'
                ],
                borderWidth: 0,
                hoverOffset: 4
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom',
                    labels: {
                        usePointStyle: true,
                        pointStyle: 'circle',
                        padding: 20,
                        font: {
                            weight: 500
                        }
                    }
                },
                tooltip: {
                    backgroundColor: '#1e293b',
                    titleColor: '#ffffff',
                    bodyColor: '#ffffff',
                    borderColor: '#374151',
                    borderWidth: 1,
                    cornerRadius: 8,
                    displayColors: true,
                    titleFont: {
                        weight: 600
                    },
                    bodyFont: {
                        weight: 500
                    }
                }
            },
            cutout: '65%'
        }
    });

    // Chart animations on scroll
    const observerOptions = {
        threshold: 0.1
    };

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.animation = 'fadeIn 0.6s ease forwards';
            }
        });
    }, observerOptions);

    document.querySelectorAll('.card').forEach(card => {
        observer.observe(card);
    });
</script>

<style>
    .badge-secondary {
        background: #e2e8f0;
        color: #64748b;
    }
    
    .table-hover tbody tr:hover {
        background-color: #f8fafc;
    }
    
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .card {
        transition: all 0.3s ease;
    }
    
    .card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
    }
</style>
@endsection