@{
    ViewData["Title"] = "Dashboard";
    Layout = "_AdminLayout";
}

<div class="row">
    <div class="col-md-3">
        <a href="/admin/products" class="text-decoration-none">
            <div class="card dashboard-stat-card">
                <div class="card-body">
                    <h6 class="text-muted">Total Products</h6>
                    <h2 class="mb-0">@ViewBag.ProductCount</h2>
                    <span class="stat-link">Manage →</span>
                </div>
            </div>
        </a>
    </div>
    <div class="col-md-3">
        <a href="/admin/portfolio/projects" class="text-decoration-none">
            <div class="card dashboard-stat-card">
                <div class="card-body">
                    <h6 class="text-muted">Portfolio Projects</h6>
                    <h2 class="mb-0">@ViewBag.ProjectCount</h2>
                    <span class="stat-link">Manage →</span>
                </div>
            </div>
        </a>
    </div>
    <div class="col-md-3">
        <a href="/admin/blog" class="text-decoration-none">
            <div class="card dashboard-stat-card">
                <div class="card-body">
                    <h6 class="text-muted">Blog Posts</h6>
                    <h2 class="mb-0">@ViewBag.BlogCount</h2>
                    <span class="stat-link">Manage →</span>
                </div>
            </div>
        </a>
    </div>
    <div class="col-md-3">
        <a href="/admin/pages" class="text-decoration-none">
            <div class="card dashboard-stat-card">
                <div class="card-body">
                    <h6 class="text-muted">Custom Pages</h6>
                    <h2 class="mb-0">@ViewBag.PageCount</h2>
                    <span class="stat-link">Manage →</span>
                </div>
            </div>
        </a>
    </div>
</div>

<div class="row mt-4">
    <div class="col-md-3">
        <a href="/admin/homepage" class="text-decoration-none">
            <div class="card dashboard-stat-card">
                <div class="card-body text-center">
                    <i class="bi bi-house-fill" style="font-size: 2.5rem; color: #28a745;"></i>
                    <h6 class="mt-3 mb-0">Homepage Editor</h6>
                </div>
            </div>
        </a>
    </div>
    <div class="col-md-3">
        <a href="/admin/products/create" class="text-decoration-none">
            <div class="card dashboard-stat-card">
                <div class="card-body text-center">
                    <i class="bi bi-plus-circle" style="font-size: 2.5rem; color: #3498db;"></i>
                    <h6 class="mt-3 mb-0">Add New Product</h6>
                </div>
            </div>
        </a>
    </div>
    <div class="col-md-3">
        <a href="/admin/blog/create" class="text-decoration-none">
            <div class="card dashboard-stat-card">
                <div class="card-body text-center">
                    <i class="bi bi-plus-circle" style="font-size: 2.5rem; color: #3498db;"></i>
                    <h6 class="mt-3 mb-0">Create Blog Post</h6>
                </div>
            </div>
        </a>
    </div>
    <div class="col-md-3">
        <a href="/admin/portfolio/projects/create" class="text-decoration-none">
            <div class="card dashboard-stat-card">
                <div class="card-body text-center">
                    <i class="bi bi-plus-circle" style="font-size: 2.5rem; color: #3498db;"></i>
                    <h6 class="mt-3 mb-0">Add Portfolio Project</h6>
                </div>
            </div>
        </a>
    </div>
</div>

<div class="row mt-5">
    <div class="col-md-4">
        <div class="card system-info-card">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="bi bi-info-circle-fill"></i> System Information</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <strong><i class="bi bi-globe"></i> Site Name:</strong><br>
                    <span class="text-muted">@ViewBag.SiteName</span>
                </div>
                <div class="mb-3">
                    <strong><i class="bi bi-database-fill"></i> Database:</strong><br>
                    <span id="dbStatus" class="badge bg-secondary">
                        <span class="spinner-border spinner-border-sm"></span> Checking...
                    </span>
                    <small id="dbInfo" class="d-block text-muted mt-1"></small>
                </div>
                <div class="mb-3">
                    <strong><i class="bi bi-person-circle"></i> Admin User:</strong><br>
                    <span class="text-muted">@ViewBag.AdminEmail</span>
                </div>
                <div class="mb-3">
                    <strong><i class="bi bi-clock-fill"></i> Server Time:</strong><br>
                    <span id="serverTime" class="text-muted">@DateTime.Now.ToString("MMM dd, yyyy HH:mm:ss")</span>
                </div>
                <div>
                    <strong><i class="bi bi-hdd-fill"></i> System:</strong><br>
                    <span id="systemStatus" class="badge bg-success">
                        <i class="bi bi-check-circle-fill"></i> Online
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
<script>
// Update server time every second
function updateServerTime() {
    const timeEl = document.getElementById('serverTime');
    if (timeEl) {
        const now = new Date();
        timeEl.textContent = now.toLocaleString('en-US', { 
            month: 'short', 
            day: '2-digit', 
            year: 'numeric',
            hour: '2-digit', 
            minute: '2-digit', 
            second: '2-digit',
            hour12: false
        });
    }
}

// Check database connection status
async function checkDatabaseStatus() {
    const statusEl = document.getElementById('dbStatus');
    const infoEl = document.getElementById('dbInfo');
    
    try {
        const response = await fetch('/admin/system-status');
        const data = await response.json();
        
        if (data.databaseConnected) {
            statusEl.className = 'badge bg-success';
            statusEl.innerHTML = '<i class="bi bi-check-circle-fill"></i> PostgreSQL Connected';
            infoEl.innerHTML = `Host: ${data.dbHost || 'localhost'} | Database: ${data.dbName || 'skyartshop'}`;
        } else {
            statusEl.className = 'badge bg-danger';
            statusEl.innerHTML = '<i class="bi bi-x-circle-fill"></i> Database Disconnected';
            infoEl.textContent = data.error || 'Connection failed';
        }
    } catch (error) {
        statusEl.className = 'badge bg-warning';
        statusEl.innerHTML = '<i class="bi bi-exclamation-triangle-fill"></i> Status Unknown';
        infoEl.textContent = 'Unable to check status';
    }
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    updateServerTime();
    checkDatabaseStatus();
    
    // Update time every second
    setInterval(updateServerTime, 1000);
    
    // Check database status every 10 seconds
    setInterval(checkDatabaseStatus, 10000);
});
</script>
}