@extends('layouts.admin-simple')

@section('title', 'Dashboard')
@section('page-title', 'Dashboard')

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

@push('styles')
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- Vector Maps -->
    <link type="text/css" href="{{ asset('admin-assets/vendor/jqvmap/jqvmap.min.css') }}" rel="stylesheet">
@endpush

@section('content')
    <!-- Stats Cards Row 1 - Core Business Metrics -->
    <div class="row mb-4">
        <!-- Total Products -->
        <div class="col-lg-3 col-md-6 mb-4">
            <div class="card border-0 shadow-sm h-100" style="background: linear-gradient(135deg, #f0f9ff 0%, #dbeafe 100%); border-left: 4px solid #3b82f6 !important;">
                <div class="card-body">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <div class="text-muted small font-weight-bold text-uppercase mb-1">Total Products</div>
                            <div class="h3 mb-0 font-weight-bold text-dark">{{ $totalProducts }}</div>
                            <div class="text-muted small">{{ $activeProducts }} active</div>
                        </div>
                        <div class="text-info">
                            <i class="fas fa-box fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Active Job Positions -->
        <div class="col-lg-3 col-md-6 mb-4">
            <div class="card border-0 shadow-sm h-100" style="background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); border-left: 4px solid #10b981 !important;">
                <div class="card-body">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <div class="text-muted small font-weight-bold text-uppercase mb-1">Job Positions</div>
                            <div class="h3 mb-0 font-weight-bold text-dark">{{ $totalJobPositions }}</div>
                            <div class="text-muted small">{{ $activeJobPositions }} active</div>
                        </div>
                        <div class="text-success">
                            <i class="fas fa-briefcase fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- News Articles -->
        <div class="col-lg-3 col-md-6 mb-4">
            <div class="card border-0 shadow-sm h-100" style="background: linear-gradient(135deg, #fef7ff 0%, #f3e8ff 100%); border-left: 4px solid #8b5cf6 !important;">
                <div class="card-body">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <div class="text-muted small font-weight-bold text-uppercase mb-1">News Articles</div>
                            <div class="h3 mb-0 font-weight-bold text-dark">{{ $totalNews }}</div>
                            <div class="text-muted small">{{ $publishedNews }} published</div>
                        </div>
                        <div class="text-purple">
                            <i class="fas fa-newspaper fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Total Inquiries Today -->
        <div class="col-lg-3 col-md-6 mb-4">
            <div class="card border-0 shadow-sm h-100" style="background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); border-left: 4px solid #f59e0b !important;">
                <div class="card-body">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <div class="text-muted small font-weight-bold text-uppercase mb-1">Inquiries Today</div>
                            <div class="h3 mb-0 font-weight-bold text-dark">{{ $inquiriesToday }}</div>
                            <div class="text-muted small">{{ $pendingContactInquiries }} pending</div>
                        </div>
                        <div class="text-warning">
                            <i class="fas fa-envelope fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Stats Cards Row 2 - Detailed Metrics -->
    <div class="row mb-4">
        <!-- Contact Inquiries -->
        <div class="col-lg-3 col-md-6 mb-4">
            <div class="card border-0 shadow-sm h-100" style="background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%); border-left: 4px solid #ef4444 !important;">
                <div class="card-body">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <div class="text-muted small font-weight-bold text-uppercase mb-1">Contact Inquiries</div>
                            <div class="h3 mb-0 font-weight-bold text-dark">{{ $totalContactInquiries }}</div>
                            <div class="text-muted small">{{ $pendingContactInquiries }} pending</div>
                        </div>
                        <div class="text-danger">
                            <i class="fas fa-headset fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Job Applications -->
        <div class="col-lg-3 col-md-6 mb-4">
            <div class="card border-0 shadow-sm h-100" style="background: linear-gradient(135deg, #ecfdf5 0%, #bbf7d0 100%); border-left: 4px solid #22c55e !important;">
                <div class="card-body">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <div class="text-muted small font-weight-bold text-uppercase mb-1">Job Applications</div>
                            <div class="h3 mb-0 font-weight-bold text-dark">{{ $totalJobApplications }}</div>
                            <div class="text-muted small">{{ $pendingApplications }} pending</div>
                        </div>
                        <div class="text-success">
                            <i class="fas fa-file-alt fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Videos & Media -->
        <div class="col-lg-3 col-md-6 mb-4">
            <div class="card border-0 shadow-sm h-100" style="background: linear-gradient(135deg, #f1f5f9 0%, #cbd5e1 100%); border-left: 4px solid #64748b !important;">
                <div class="card-body">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <div class="text-muted small font-weight-bold text-uppercase mb-1">Videos</div>
                            <div class="h3 mb-0 font-weight-bold text-dark">{{ $totalVideos }}</div>
                            <div class="text-muted small">{{ $publishedVideos }} published</div>
                        </div>
                        <div class="text-secondary">
                            <i class="fas fa-video fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- System Users -->
        <div class="col-lg-3 col-md-6 mb-4">
            <div class="card border-0 shadow-sm h-100" style="background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); border-left: 4px solid #6366f1 !important;">
                <div class="card-body">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <div class="text-muted small font-weight-bold text-uppercase mb-1">System Users</div>
                            <div class="h3 mb-0 font-weight-bold text-dark">{{ $totalUsers }}</div>
                            <div class="text-muted small">{{ $newUsersThisMonth }} this month</div>
                        </div>
                        <div class="text-primary">
                            <i class="fas fa-users fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Row -->
    <div class="row mb-4">
        <!-- Content Growth Chart -->
        <div class="col-lg-6 mb-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-0 d-flex align-items-center">
                    <div class="flex">
                        <h5 class="card-title mb-1 font-weight-bold">Content Growth</h5>
                        <div class="card-subtitle text-muted small">News & Products published over time</div>
                    </div>
                </div>
                <div class="card-body">
                    <div style="height: 300px;">
                        <canvas id="contentGrowthChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- Inquiry Status Distribution -->
        <div class="col-lg-6 mb-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-0 d-flex align-items-center">
                    <div class="flex">
                        <h5 class="card-title mb-1 font-weight-bold">Inquiry Status Distribution</h5>
                        <div class="card-subtitle text-muted small">Current inquiry status breakdown</div>
                    </div>
                </div>
                <div class="card-body">
                    <div style="height: 300px;">
                        <canvas id="inquiryStatusChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Activity Table -->
    <div class="row">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-0 d-flex align-items-center">
                    <div class="flex">
                        <h5 class="card-title mb-1 font-weight-bold">Recent Activities</h5>
                        <div class="card-subtitle text-muted small">Latest system activities and content updates</div>
                    </div>
                    <div class="ml-auto">
                        <a href="#" class="btn btn-outline-primary btn-sm">
                            <i class="fas fa-eye"></i> View All
                        </a>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table mb-0">
                        <thead class="thead-light">
                            <tr>
                                <th class="border-0">Type</th>
                                <th class="border-0">Activity</th>
                                <th class="border-0">Date</th>
                                <th class="border-0">Status</th>
                                <th class="border-0">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($recentActivities as $activity)
                            <tr>
                                <td class="align-middle">
                                    <div class="d-flex align-items-center">
                                        <div class="avatar avatar-sm mr-3 d-flex align-items-center justify-content-center rounded-circle text-white" 
                                             style="width: 32px; height: 32px; background: {{ $activity['type'] === 'news' ? '#8b5cf6' : ($activity['type'] === 'inquiry' ? '#ef4444' : '#22c55e') }};">
                                            <i class="fas {{ $activity['type'] === 'news' ? 'fa-newspaper' : ($activity['type'] === 'inquiry' ? 'fa-envelope' : 'fa-file-alt') }} fa-sm"></i>
                                        </div>
                                        <span class="badge badge-soft-{{ $activity['type'] === 'news' ? 'purple' : ($activity['type'] === 'inquiry' ? 'danger' : 'success') }}">
                                            {{ ucfirst($activity['type']) }}
                                        </span>
                                    </div>
                                </td>
                                <td class="align-middle">
                                    <strong>{{ $activity['title'] }}</strong>
                                </td>
                                <td class="align-middle">{{ $activity['created_at']->format('M d, Y H:i') }}</td>
                                <td class="align-middle">
                                    <span class="badge {{ $activity['badge_class'] }}">{{ $activity['status'] }}</span>
                                </td>
                                <td class="align-middle">
                                    <div class="dropdown">
                                        <a href="#" class="dropdown-toggle text-muted" data-toggle="dropdown" data-caret="false">
                                            <i class="fas fa-ellipsis-v"></i>
                                        </a>
                                        <div class="dropdown-menu dropdown-menu-right">
                                            <a href="#" class="dropdown-item">
                                                <i class="fas fa-eye"></i> View Details
                                            </a>
                                            @if($activity['type'] === 'inquiry' && $activity['status'] === 'Pending')
                                            <a href="#" class="dropdown-item">
                                                <i class="fas fa-reply"></i> Respond
                                            </a>
                                            @endif
                                            @if($activity['type'] === 'application' && $activity['status'] === 'Pending')
                                            <a href="#" class="dropdown-item">
                                                <i class="fas fa-check"></i> Review
                                            </a>
                                            @endif
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                            @if($recentActivities->isEmpty())
                            <tr>
                                <td colspan="5" class="text-center py-4 text-muted">
                                    <i class="fas fa-inbox fa-2x mb-2"></i>
                                    <div>No recent activities found</div>
                                </td>
                            </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <!-- Charts JavaScript -->
    <script>
        // Content Growth Chart
        const contentCtx = document.getElementById('contentGrowthChart').getContext('2d');
        new Chart(contentCtx, {
            type: 'line',
            data: {
                labels: {!! json_encode($contentLabels) !!},
                datasets: [{
                    label: 'Content Published',
                    data: {!! json_encode($contentData) !!},
                    borderColor: '#3b82f6',
                    backgroundColor: 'rgba(59, 130, 246, 0.1)',
                    tension: 0.4,
                    fill: true
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    title: {
                        display: true,
                        text: 'News & Products Published Over Time'
                    },
                    legend: {
                        display: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            stepSize: 1
                        }
                    }
                }
            }
        });

        // Inquiry Status Distribution Chart
        const inquiryCtx = document.getElementById('inquiryStatusChart').getContext('2d');
        new Chart(inquiryCtx, {
            type: 'doughnut',
            data: {
                labels: ['Pending', 'Reviewed', 'Responded', 'Closed'],
                datasets: [{
                    data: [
                        {{ $pendingContactInquiries }},
                        {{ $totalContactInquiries - $pendingContactInquiries - ($totalContactInquiries * 0.2) - ($totalContactInquiries * 0.1) }},
                        {{ intval($totalContactInquiries * 0.2) }},
                        {{ intval($totalContactInquiries * 0.1) }}
                    ],
                    backgroundColor: [
                        '#f59e0b', // Warning (Pending)
                        '#3b82f6', // Info (Reviewed)
                        '#10b981', // Success (Responded)
                        '#6b7280'  // Secondary (Closed)
                    ],
                    borderWidth: 2,
                    borderColor: '#ffffff'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            padding: 20,
                            usePointStyle: true
                        }
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                const percentage = ((context.parsed * 100) / total).toFixed(1);
                                return context.label + ': ' + context.parsed + ' (' + percentage + '%)';
                            }
                        }
                    }
                }
            }
        });
    </script>
@endpush