<?= $this->extend('admin/layout') ?>

<?= $this->section('content') ?>
<div class="container-fluid fade-in">
    <!-- Page Header -->
    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-4 border-bottom">
        <div>
            <h1 class="h2 mb-0">
                <i class="bi bi-speedometer2 text-primary me-2"></i>Dashboard
            </h1>
            <p class="text-muted mb-0">Welcome back! Here's an overview of your betting tips platform.</p>
        </div>
        <div class="btn-toolbar mb-2 mb-md-0">
            <div class="btn-group me-2">
                <button type="button" class="btn btn-sm btn-outline-secondary" onclick="window.print()">
                    <i class="bi bi-printer me-1"></i> Print
                </button>
                <button type="button" class="btn btn-sm btn-outline-secondary" onclick="exportDashboard()">
                    <i class="bi bi-download me-1"></i> Export
                </button>
            </div>
        </div>
    </div>

    <!-- Summary Cards -->
    <div class="row g-4 mb-4">
        <div class="col-lg-3 col-md-6">
            <div class="card stat-card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <h6 class="card-title text-muted fw-normal mb-1">
                                <i class="bi bi-list-ul me-1"></i>Total Tips
                            </h6>
                            <h2 class="mb-0 fw-bold text-primary"><?= number_format($totalTips ?? 0) ?></h2>
                            <small class="text-muted">
                                <i class="bi bi-calendar me-1"></i> All time
                            </small>
                        </div>
                        <div class="bg-primary bg-opacity-10 rounded-3 p-3">
                            <i class="bi bi-list-ul text-primary fs-4"></i>
                        </div>
                    </div>
                    <div class="mt-3">
                        <a href="<?= site_url('admin/tips') ?>" class="btn btn-sm btn-outline-primary">
                            View Details <i class="bi bi-arrow-right ms-1"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6">
            <div class="card stat-card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <h6 class="card-title text-muted fw-normal mb-1">
                                <i class="bi bi-trophy me-1"></i>Active Predictions
                            </h6>
                            <h2 class="mb-0 fw-bold text-success"><?= number_format($activePredictions ?? 0) ?></h2>
                            <small class="text-muted">
                                <i class="bi bi-clock me-1"></i> Currently active
                            </small>
                        </div>
                        <div class="bg-success bg-opacity-10 rounded-3 p-3">
                            <i class="bi bi-trophy text-success fs-4"></i>
                        </div>
                    </div>
                    <div class="mt-3">
                        <a href="<?= site_url('admin/predictions') ?>" class="btn btn-sm btn-outline-success">
                            View Details <i class="bi bi-arrow-right ms-1"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6">
            <div class="card stat-card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <h6 class="card-title text-muted fw-normal mb-1">
                                <i class="bi bi-people me-1"></i>Total Authors
                            </h6>
                            <h2 class="mb-0 fw-bold text-info"><?= number_format($totalAuthors ?? 0) ?></h2>
                            <small class="text-muted">
                                <i class="bi bi-person-check me-1"></i> Registered authors
                            </small>
                        </div>
                        <div class="bg-info bg-opacity-10 rounded-3 p-3">
                            <i class="bi bi-people text-info fs-4"></i>
                        </div>
                    </div>
                    <div class="mt-3">
                        <a href="<?= site_url('admin/author-stats') ?>" class="btn btn-sm btn-outline-info">
                            View Details <i class="bi bi-arrow-right ms-1"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6">
            <div class="card stat-card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <h6 class="card-title text-muted fw-normal mb-1">
                                <i class="bi bi-bar-chart-line me-1"></i>Site Visitors
                            </h6>
                            <h2 class="mb-0 fw-bold text-warning"><?= number_format($globalDailyHits ?? 0) ?></h2>
                            <small class="text-muted">
                                <i class="bi bi-calendar-day me-1"></i> Today
                            </small>
                        </div>
                        <div class="bg-warning bg-opacity-10 rounded-3 p-3">
                            <i class="bi bi-bar-chart-line text-warning fs-4"></i>
                        </div>
                    </div>
                    <div class="mt-3">
                        <a href="#" class="btn btn-sm btn-outline-warning">
                            View Analytics <i class="bi bi-arrow-right ms-1"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Financial & Subscription Overview -->
    <div class="row g-4 mb-4">
        <div class="col-lg-6">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-0 pb-0">
                    <div class="d-flex justify-content-between align-items-center">
                        <h6 class="card-title mb-0">
                            <i class="bi bi-cash-stack me-2 text-success"></i>Financial Overview
                        </h6>
                        <small class="text-muted">Current period</small>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-6">
                            <div class="border-end">
                                <h4 class="mb-1 text-success"><?= number_format($recentTransactions ?? 0) ?></h4>
                                <small class="text-muted">Transactions</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="ps-3">
                                <h4 class="mb-1 text-primary">$<?= number_format($totalRevenue ?? 0) ?></h4>
                                <small class="text-muted">Revenue</small>
                            </div>
                        </div>
                    </div>
                    <div class="mt-3">
                        <a href="<?= site_url('admin/transactions') ?>" class="btn btn-sm btn-outline-primary">
                            View Transactions <i class="bi bi-arrow-right ms-1"></i>
                        </a>
                    </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 pb-0">
                    <div class="d-flex justify-content-between align-items-center">
                        <h6 class="card-title mb-0">
                            <i class="bi bi-person-check me-2 text-info"></i>Subscription Stats
                        </h6>
                        <small class="text-muted">Current</small>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-6">
                            <div class="border-end">
                                <h4 class="mb-1 text-info"><?= number_format($totalSubscribers ?? 0) ?></h4>
                                <small class="text-muted">Subscribers</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="ps-3">
                                <h4 class="mb-1 text-warning"><?= number_format($activePlans ?? 0) ?></h4>
                                <small class="text-muted">Active Plans</small>
                            </div>
                        </div>
                    </div>
                    <div class="mt-3">
                        <a href="<?= site_url('admin/subscribers') ?>" class="btn btn-sm btn-outline-info">
                            View Subscribers <i class="bi bi-arrow-right ms-1"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="row g-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-0 pb-0">
                    <h5 class="card-title mb-0">
                        <i class="bi bi-lightning me-2 text-warning"></i>Quick Actions
                    </h5>
                    <p class="text-muted mb-0">Frequently used admin functions</p>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6 col-lg-3">
                            <div class="d-grid">
                                <a href="<?= site_url('admin/addTip') ?>" class="btn btn-outline-primary btn-lg">
                                    <i class="bi bi-plus-circle mb-2 d-block fs-3"></i>
                                    <span class="d-block">Add New Tip</span>
                                </a>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-3">
                            <div class="d-grid">
                                <a href="<?= site_url('admin/recalculate-stats') ?>" class="btn btn-outline-success btn-lg">
                                    <i class="bi bi-arrow-clockwise mb-2 d-block fs-3"></i>
                                    <span class="d-block">Recalculate Stats</span>
                                </a>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-3">
                            <div class="d-grid">
                                <a href="<?= site_url('admin/predictions') ?>" class="btn btn-outline-info btn-lg">
                                    <i class="bi bi-check2-circle mb-2 d-block fs-3"></i>
                                    <span class="d-block">Update Predictions</span>
                                </a>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-3">
                            <div class="d-grid">
                                <a href="<?= site_url('admin/award-points') ?>" class="btn btn-outline-warning btn-lg">
                                    <i class="bi bi-gift mb-2 d-block fs-3"></i>
                                    <span class="d-block">Award Points</span>
                                </a>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-3">
                            <div class="d-grid">
                                <form method="post" action="<?= site_url('admin/deleteHitStats') ?>" onsubmit="return confirm('Are you sure you want to reset all hit stats? This cannot be undone.');">
                                    <button type="submit" class="btn btn-outline-danger btn-lg">
                                        <i class="bi bi-x-circle mb-2 d-block fs-3"></i>
                                        <span class="d-block">Reset Hit Stats</span>
                                    </button>
                                </form>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-3">
                            <div class="d-grid">
                                <a href="<?= site_url('admin/transactions') ?>" class="btn btn-outline-secondary btn-lg">
                                    <i class="bi bi-cash-stack mb-2 d-block fs-3"></i>
                                    <span class="d-block">View Transactions</span>
                                </a>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-3">
                            <div class="d-grid">
                                <a href="<?= site_url('admin/subscribers') ?>" class="btn btn-outline-dark btn-lg">
                                    <i class="bi bi-people mb-2 d-block fs-3"></i>
                                    <span class="d-block">Manage Subscribers</span>
                                </a>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-3">
                            <div class="d-grid">
                                <a href="<?= site_url('admin/plans') ?>" class="btn btn-outline-primary btn-lg">
                                    <i class="bi bi-card-list mb-2 d-block fs-3"></i>
                                    <span class="d-block">Manage Plans</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function exportDashboard() {
    // Implementation for dashboard export
    alert('Dashboard export feature coming soon!');
}

// Add loading state to buttons
document.addEventListener('DOMContentLoaded', function() {
    const buttons = document.querySelectorAll('.btn');
    buttons.forEach(button => {
        button.addEventListener('click', function() {
            if (!this.classList.contains('btn-outline-secondary')) {
                this.classList.add('loading');
                setTimeout(() => {
                    this.classList.remove('loading');
                }, 1000);
            }
        });
    });
});
</script>

<style>
.btn-lg {
    padding: 1.5rem 1rem;
    height: auto;
    transition: all 0.3s ease;
    border-radius: 12px;
    font-weight: 500;
}

.btn-lg:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.btn-lg i {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.loading {
    opacity: 0.6;
    pointer-events: none;
}

@media print {
    .btn-toolbar, .btn {
        display: none !important;
    }
    
    .card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
}
</style>
<?= $this->endSection() ?>