<?php include __DIR__ . '/../layouts/header.php'; ?>
<?php include __DIR__ . '/../layouts/sidebar.php'; ?>

<div class="d-flex justify-content-between align-items-center mb-4">
    <h2 class="mb-0"><?= __('overview') ?></h2>
</div>

<div class="row g-4 mb-4">
    <!-- Stat Cards (Top Row) -->
    <div class="col-md-3">
        <a href="?page=customers" class="text-decoration-none text-dark d-block">
            <div class="card p-4 card-hover border-0 shadow-sm rounded-4">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <h6 class="text-secondary mb-2"><?= __('total_customers') ?></h6>
                        <h2 class="mb-0 text-primary fw-bold"><?= number_format($total_customers ?? 0) ?></h2>
                    </div>
                    <div class="stat-icon bg-primary bg-opacity-10 text-primary rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
                        <i class="fas fa-users"></i>
                    </div>
                </div>
            </div>
        </a>
    </div>
    
    <div class="col-md-3">
        <a href="?page=vendors" class="text-decoration-none text-dark d-block">
            <div class="card p-4 card-hover border-0 shadow-sm rounded-4">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <h6 class="text-secondary mb-2"><?= __('total_vendors') ?></h6>
                        <h2 class="mb-0 text-success fw-bold"><?= number_format($total_vendors ?? 0) ?></h2>
                        <small class="text-warning fw-semibold"><?= $pending_vendors ?> <?= __('pending') ?></small>
                    </div>
                    <div class="stat-icon bg-success bg-opacity-10 text-success rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
                        <i class="fas fa-building"></i>
                    </div>
                </div>
            </div>
        </a>
    </div>

    <div class="col-md-3">
        <a href="?page=maids" class="text-decoration-none text-dark d-block">
            <div class="card p-4 card-hover border-0 shadow-sm rounded-4">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <h6 class="text-secondary mb-2"><?= __('total_maids') ?></h6>
                        <h2 class="mb-0 text-info fw-bold"><?= number_format($total_maids ?? 0) ?></h2>
                        <small class="text-primary fw-semibold"><?= $available_maids ?> <?= __('available') ?></small>
                    </div>
                    <div class="stat-icon bg-info bg-opacity-10 text-info rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
                        <i class="fas fa-user-nurse"></i>
                    </div>
                </div>
            </div>
        </a>
    </div>

    <div class="col-md-3">
        <a href="?page=payments" class="text-decoration-none text-dark d-block">
            <div class="card p-4 card-hover border-0 shadow-sm rounded-4">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <h6 class="text-secondary mb-2"><?= __('revenue_aed') ?></h6>
                        <h2 class="mb-0 text-dark fw-bold"><?= number_format($total_revenue ?? 0, 2) ?></h2>
                    </div>
                    <div class="stat-icon bg-dark bg-opacity-10 text-dark rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
                        <i class="fas fa-wallet"></i>
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>

<div class="row g-4 mb-4">
    <!-- Stat Cards (Bottom Row) -->
    <div class="col-md-3">
        <a href="?page=quotations" class="text-decoration-none text-dark d-block">
            <div class="card p-4 card-hover border-0 shadow-sm rounded-4">
                <h6 class="text-secondary mb-1 small"><?= __('pending_quotations') ?></h6>
                <h3 class="mb-0 fw-bold"><?= $pending_quotations ?></h3>
            </div>
        </a>
    </div>
    <div class="col-md-3">
        <a href="?page=interviews" class="text-decoration-none text-dark d-block">
            <div class="card p-4 card-hover border-0 shadow-sm rounded-4">
                <h6 class="text-secondary mb-1 small"><?= __('interviews_today') ?></h6>
                <h3 class="mb-0 fw-bold"><?= $interviews_today ?></h3>
            </div>
        </a>
    </div>
    <div class="col-md-3">
        <a href="?page=vendor_subscriptions" class="text-decoration-none text-dark d-block">
            <div class="card p-4 card-hover border-0 shadow-sm rounded-4">
                <h6 class="text-secondary mb-1 small"><?= __('active_subscriptions') ?></h6>
                <h3 class="mb-0 fw-bold"><?= $active_subscriptions ?></h3>
            </div>
        </a>
    </div>
    <div class="col-md-3">
        <a href="?page=vendor_ads" class="text-decoration-none text-dark d-block">
            <div class="card p-4 card-hover border-0 shadow-sm rounded-4">
                <h6 class="text-secondary mb-1 small"><?= __('active_ads') ?></h6>
                <h3 class="mb-0 fw-bold"><?= $active_ads ?></h3>
            </div>
        </a>
    </div>
</div>

<div class="row g-4 mb-4">
    <!-- Advanced Engagement & Performance -->
    <div class="col-md-3">
        <a href="?page=reports" class="text-decoration-none text-dark d-block">
            <div class="card p-4 card-hover border-0 shadow-sm rounded-4 d-flex flex-row align-items-center justify-content-between">
                <div>
                    <h6 class="text-secondary mb-1 small"><?= __('total_maid_views') ?></h6>
                    <h3 class="mb-0 fw-bold text-primary"><?= number_format($total_maid_views) ?></h3>
                </div>
                <div class="bg-primary bg-opacity-10 text-primary rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
                    <i class="fas fa-eye" style="font-size: 20px;"></i>
                </div>
            </div>
        </a>
    </div>
    <div class="col-md-3">
        <a href="?page=reports" class="text-decoration-none text-dark d-block">
            <div class="card p-4 card-hover border-0 shadow-sm rounded-4 d-flex flex-row align-items-center justify-content-between">
                <div>
                    <h6 class="text-secondary mb-1 small"><?= __('customer_conversion') ?></h6>
                    <h3 class="mb-0 fw-bold text-success"><?= $customer_conversion_rate ?>%</h3>
                </div>
                <div class="bg-success bg-opacity-10 text-success rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
                    <i class="fas fa-percentage" style="font-size: 20px;"></i>
                </div>
            </div>
        </a>
    </div>
    <div class="col-md-3">
        <a href="?page=interviews" class="text-decoration-none text-dark d-block">
            <div class="card p-4 card-hover border-0 shadow-sm rounded-4 d-flex flex-row align-items-center justify-content-between">
                <div>
                    <h6 class="text-secondary mb-1 small"><?= __('avg_interviews_user') ?></h6>
                    <h3 class="mb-0 fw-bold text-info"><?= $avg_interviews ?></h3>
                </div>
                <div class="bg-info bg-opacity-10 text-info rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
                    <i class="fas fa-video" style="font-size: 20px;"></i>
                </div>
            </div>
        </a>
    </div>
    <div class="col-md-3">
        <a href="?page=reports" class="text-decoration-none text-dark d-block">
            <div class="card p-4 card-hover border-0 shadow-sm rounded-4 d-flex flex-row align-items-center justify-content-between">
                <div>
                    <h6 class="text-secondary mb-1 small"><?= __('total_favorites') ?></h6>
                    <h3 class="mb-0 fw-bold text-danger"><?= number_format($total_favorites) ?></h3>
                </div>
                <div class="bg-danger bg-opacity-10 text-danger rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
                    <i class="fas fa-heart" style="font-size: 20px;"></i>
                </div>
            </div>
        </a>
    </div>
</div>

<div class="row g-4 mb-4">
    <!-- Charts Section -->
    <div class="col-lg-8">
        <div class="card border-0 shadow-sm rounded-4 p-4 h-100">
            <h5 class="fw-bold mb-4"><?= __('registration_growth') ?></h5>
            <div style="height: 300px; position: relative;">
                <canvas id="growthChart"></canvas>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card border-0 shadow-sm rounded-4 p-4 h-100">
            <h5 class="fw-bold mb-4"><?= __('revenue_overview') ?></h5>
            <div style="height: 300px; position: relative;">
                <canvas id="revenuePieChart"></canvas>
            </div>
        </div>
    </div>
</div>

<div class="row g-4">
    <!-- Recent Vendors -->
    <div class="col-md-6">
        <div class="card border-0 shadow-sm rounded-4 h-100">
            <div class="p-4 border-bottom d-flex justify-content-between align-items-center">
                <h5 class="fw-bold mb-0"><?= __('recent_vendors') ?></h5>
                <a href="?page=vendors" class="text-primary text-decoration-none small fw-semibold"><?= __('view_all') ?></a>
            </div>
            <div class="p-0">
                <ul class="list-group list-group-flush">
                    <?php foreach($recent_vendors as $rv): ?>
                    <li class="list-group-item px-4 py-3 border-0 border-bottom d-flex justify-content-between align-items-center">
                        <div>
                            <a href="?page=vendor_documents&vendor_id=<?= $rv['id'] ?>" class="fw-bold text-dark text-decoration-none hover-primary">
                                <?= htmlspecialchars($rv['agency_name']) ?>
                            </a>
                            <small class="text-muted d-block"><?= date('M d, Y', strtotime($rv['created_at'])) ?></small>
                        </div>
                        <span class="badge <?= $rv['status'] === 'active' ? 'badge-success' : 'badge-warning' ?>"><?= __($rv['status']) ?></span>
                    </li>
                    <?php endforeach; ?>
                </ul>
            </div>
        </div>
    </div>
    
    <!-- Recent Payments -->
    <div class="col-md-6">
        <div class="card border-0 shadow-sm rounded-4 h-100">
            <div class="p-4 border-bottom d-flex justify-content-between align-items-center">
                <h5 class="fw-bold mb-0"><?= __('latest_payments') ?></h5>
                <a href="?page=payments" class="text-primary text-decoration-none small fw-semibold"><?= __('view_all') ?></a>
            </div>
            <div class="p-0">
                <ul class="list-group list-group-flush">
                    <?php foreach($recent_payments as $rp): ?>
                    <li class="list-group-item px-4 py-3 border-0 border-bottom d-flex justify-content-between align-items-center">
                        <div>
                            <div class="fw-bold text-dark">AED <?= number_format($rp['amount'], 2) ?></div>
                            <small class="text-muted"><?= date('M d, Y', strtotime($rp['created_at'])) ?></small>
                        </div>
                        <span class="badge <?= $rp['status'] === 'paid' ? 'badge-success' : 'badge-danger' ?>"><?= __($rp['status']) ?></span>
                    </li>
                    <?php endforeach; ?>
                </ul>
            </div>
        </div>
    </div>
</div>

<script>
    // Registration Growth Chart
    const ctxGrowth = document.getElementById('growthChart').getContext('2d');
    new Chart(ctxGrowth, {
        type: 'line',
        data: {
            labels: <?= json_encode($chart_growth_labels) ?>,
            datasets: [{
                label: 'New Registrations',
                data: <?= json_encode($chart_growth_values) ?>,
                borderColor: '#2F6BFF',
                backgroundColor: 'rgba(47, 107, 255, 0.1)',
                tension: 0.4,
                fill: true
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: { legend: { display: false } },
            scales: { 
                y: { beginAtZero: true, grid: { color: '#F3F4F6' } }, 
                x: { grid: { display: false } } 
            }
        }
    });

    // Revenue Pie Chart
    const ctxRevenue = document.getElementById('revenuePieChart').getContext('2d');
    new Chart(ctxRevenue, {
        type: 'doughnut',
        data: {
            labels: ['Subscriptions', 'Ads', 'Contracts', 'Quotations'],
            datasets: [{
                data: [
                    <?= (float)($chart_revenue_breakdown['subscription'] ?? 0) ?>,
                    <?= (float)($chart_revenue_breakdown['ad'] ?? 0) ?>,
                    <?= (float)($chart_revenue_breakdown['contract'] ?? 0) ?>,
                    <?= (float)($chart_revenue_breakdown['quotation'] ?? 0) ?>
                ],
                backgroundColor: ['#2F6BFF', '#16A34A', '#F59E0B', '#EF4444'],
                hoverOffset: 4,
                borderWidth: 0
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: { 
                legend: { 
                    position: 'bottom',
                    labels: { padding: 20, usePointStyle: true } 
                } 
            },
            cutout: '70%'
        }
    });
</script>

<?php include __DIR__ . '/../layouts/footer.php'; ?>
