<?php
/**
 * Projects List
 * LandSales Pro - Manage land development projects
 */
define('APP_RUNNING', true);
require_once '../../db_connect.php';
require_once '../../includes/auth.php';
require_once '../../includes/subscription.php';
require_once '../../includes/functions.php';

initSecureSession();
requireAuth();
requireSubscription();

$userId = $_SESSION['user_id'];

// Check if user can create more projects
$projectLimit = checkPlanLimit($userId, 'projects');

// Get projects with stats
$projects = db_fetch_all("SELECT p.*,
    (SELECT COUNT(*) FROM plots WHERE project_id = p.id) as total_plots,
    (SELECT COUNT(*) FROM plots WHERE project_id = p.id AND status = 'available') as available_plots,
    (SELECT COUNT(*) FROM plots WHERE project_id = p.id AND status = 'sold') as sold_plots,
    (SELECT COUNT(*) FROM plots WHERE project_id = p.id AND status = 'reserved') as reserved_plots
    FROM projects p
    WHERE p.user_id = ?
    ORDER BY p.created_at DESC", 'i', [$userId]);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Projects - <?php echo APP_NAME; ?></title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="<?php echo SITE_URL; ?>/assets/font-awesome/css/all.min.css">
</head>
<body>
    <?php include '../includes/sidebar.php'; ?>

    <div class="main-content">
        <?php
        $pageTitle = 'Projects';
        if ($projectLimit['allowed']) {
            $headerActions = '<a href="create.php" class="btn btn-primary"><i class="fas fa-plus"></i> New Project</a>';
        } else {
            $headerActions = '<span class="limit-badge"><i class="fas fa-lock"></i> Limit reached (' . $projectLimit['current'] . '/' . $projectLimit['limit'] . ')</span>';
        }
        include '../includes/header.php';
        ?>

        <div class="content-wrapper">
            <?php if (!$projectLimit['unlimited']): ?>
            <div class="usage-notice">
                <i class="fas fa-info-circle"></i>
                Using <?php echo $projectLimit['current']; ?> of <?php echo $projectLimit['limit']; ?> projects
                <?php if ($projectLimit['remaining'] <= 2 && $projectLimit['remaining'] > 0): ?>
                <span class="text-warning">(<?php echo $projectLimit['remaining']; ?> remaining)</span>
                <?php endif; ?>
            </div>
            <?php endif; ?>

            <?php if (empty($projects)): ?>
            <div class="empty-card">
                <div class="empty-icon">
                    <i class="fas fa-project-diagram"></i>
                </div>
                <h3>No Projects Yet</h3>
                <p>Create your first land development project to start managing plots.</p>
                <?php if ($projectLimit['allowed']): ?>
                <a href="create.php" class="btn btn-primary">
                    <i class="fas fa-plus"></i> Create Project
                </a>
                <?php endif; ?>
            </div>
            <?php else: ?>
            <div class="projects-grid">
                <?php foreach ($projects as $project): ?>
                <div class="project-card">
                    <div class="project-header">
                        <h3><?php echo htmlspecialchars($project['name']); ?></h3>
                        <div class="project-actions">
                            <a href="view.php?id=<?php echo $project['id']; ?>" class="btn-icon" title="View">
                                <i class="fas fa-eye"></i>
                            </a>
                            <a href="edit.php?id=<?php echo $project['id']; ?>" class="btn-icon" title="Edit">
                                <i class="fas fa-edit"></i>
                            </a>
                        </div>
                    </div>

                    <?php if ($project['location']): ?>
                    <div class="project-location">
                        <i class="fas fa-map-marker-alt"></i>
                        <?php echo htmlspecialchars($project['location']); ?>
                    </div>
                    <?php endif; ?>

                    <div class="project-stats">
                        <div class="stat">
                            <div class="stat-value"><?php echo $project['total_plots']; ?></div>
                            <div class="stat-label">Total Plots</div>
                        </div>
                        <div class="stat available">
                            <div class="stat-value"><?php echo $project['available_plots']; ?></div>
                            <div class="stat-label">Available</div>
                        </div>
                        <div class="stat reserved">
                            <div class="stat-value"><?php echo $project['reserved_plots']; ?></div>
                            <div class="stat-label">Reserved</div>
                        </div>
                        <div class="stat sold">
                            <div class="stat-value"><?php echo $project['sold_plots']; ?></div>
                            <div class="stat-label">Sold</div>
                        </div>
                    </div>

                    <div class="project-progress">
                        <?php
                        $total = $project['total_plots'];
                        $soldPercent = $total > 0 ? ($project['sold_plots'] / $total) * 100 : 0;
                        $reservedPercent = $total > 0 ? ($project['reserved_plots'] / $total) * 100 : 0;
                        ?>
                        <div class="progress-bar">
                            <div class="progress-sold" style="width: <?php echo $soldPercent; ?>%"></div>
                            <div class="progress-reserved" style="width: <?php echo $reservedPercent; ?>%"></div>
                        </div>
                        <div class="progress-legend">
                            <span class="sold"><i class="fas fa-square"></i> Sold <?php echo round($soldPercent); ?>%</span>
                            <span class="reserved"><i class="fas fa-square"></i> Reserved <?php echo round($reservedPercent); ?>%</span>
                        </div>
                    </div>

                    <div class="project-footer">
                        <a href="../plots/?project=<?php echo $project['id']; ?>" class="btn btn-outline btn-sm">
                            <i class="fas fa-th"></i> View Plots
                        </a>
                        <a href="../plots/grid.php?project=<?php echo $project['id']; ?>" class="btn btn-outline btn-sm">
                            <i class="fas fa-border-all"></i> Grid View
                        </a>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
            <?php endif; ?>
        </div>
    </div>

    <style>
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            margin: 0;
            background: #f1f5f9;
        }

        .header-actions { display: flex; gap: 0.75rem; align-items: center; }

        .btn {
            padding: 0.625rem 1.25rem;
            border-radius: 8px;
            font-weight: 500;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.2s;
            border: none;
            cursor: pointer;
            font-size: 0.875rem;
        }

        .btn-sm { padding: 0.5rem 0.875rem; font-size: 0.8rem; }

        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        .btn-outline {
            border: 1px solid #e2e8f0;
            background: white;
            color: #64748b;
        }

        .btn-outline:hover { border-color: #667eea; color: #667eea; }

        .limit-badge {
            font-size: 0.8rem;
            color: #94a3b8;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .usage-notice {
            background: #dbeafe;
            color: #1e40af;
            padding: 0.75rem 1rem;
            border-radius: 8px;
            font-size: 0.85rem;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .text-warning { color: #d97706; }

        /* Empty State */
        .empty-card {
            background: white;
            border-radius: 16px;
            padding: 4rem 2rem;
            text-align: center;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }

        .empty-icon {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 50%;
            margin: 0 auto 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            color: white;
        }

        .empty-card h3 {
            font-size: 1.25rem;
            color: #1e293b;
            margin-bottom: 0.5rem;
        }

        .empty-card p {
            color: #64748b;
            margin-bottom: 1.5rem;
        }

        /* Projects Grid */
        .projects-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
            gap: 1.5rem;
        }

        .project-card {
            background: white;
            border-radius: 14px;
            padding: 1.5rem;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .project-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
        }

        .project-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 0.75rem;
        }

        .project-header h3 {
            font-size: 1.1rem;
            font-weight: 600;
            color: #1e293b;
            margin: 0;
        }

        .project-actions { display: flex; gap: 0.5rem; }

        .btn-icon {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #64748b;
            background: #f1f5f9;
            text-decoration: none;
            transition: all 0.2s;
        }

        .btn-icon:hover { background: #667eea; color: white; }

        .project-location {
            color: #64748b;
            font-size: 0.85rem;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .project-location i { color: #667eea; }

        .project-stats {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0.75rem;
            margin-bottom: 1rem;
        }

        .project-stats .stat {
            text-align: center;
            padding: 0.5rem;
            background: #f8fafc;
            border-radius: 8px;
        }

        .project-stats .stat.available { border-bottom: 2px solid #22c55e; }
        .project-stats .stat.reserved { border-bottom: 2px solid #f59e0b; }
        .project-stats .stat.sold { border-bottom: 2px solid #ef4444; }

        .project-stats .stat-value {
            font-size: 1.25rem;
            font-weight: 700;
            color: #1e293b;
        }

        .project-stats .stat-label {
            font-size: 0.7rem;
            color: #64748b;
            text-transform: uppercase;
        }

        .project-progress {
            margin-bottom: 1rem;
        }

        .progress-bar {
            height: 8px;
            background: #e2e8f0;
            border-radius: 4px;
            overflow: hidden;
            display: flex;
        }

        .progress-sold {
            background: #ef4444;
            height: 100%;
        }

        .progress-reserved {
            background: #f59e0b;
            height: 100%;
        }

        .progress-legend {
            display: flex;
            gap: 1rem;
            margin-top: 0.5rem;
            font-size: 0.75rem;
            color: #64748b;
        }

        .progress-legend .sold i { color: #ef4444; }
        .progress-legend .reserved i { color: #f59e0b; }

        .project-footer {
            display: flex;
            gap: 0.75rem;
            padding-top: 1rem;
            border-top: 1px solid #f1f5f9;
        }

        .project-footer .btn { flex: 1; justify-content: center; }

        @media (max-width: 768px) {
            .projects-grid {
                grid-template-columns: 1fr;
            }

            .project-stats {
                grid-template-columns: repeat(2, 1fr);
            }
        }
    </style>
</body>
</html>
