<?php include 'db_connect.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blood Availability | LifeStream Precision</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="theme.js"></script>
    <style>
        .theme-toggle-floating {
            position: fixed;
            bottom: 40px;
            right: 40px;
            background: var(--primary);
            color: var(--background);
            width: 56px;
            height: 56px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 32px rgba(0,0,0,0.2);
            cursor: pointer;
            z-index: 9999;
            border: none;
            transition: var(--transition);
        }
    </style>
    <style>
        .stock-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 24px;
            margin-top: 48px;
        }
        .stock-card {
            padding: 40px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        .stock-card .blood-group {
            font-size: 48px;
            font-weight: 800;
            font-family: 'Manrope';
            color: #fff;
            margin-bottom: 8px;
            background: var(--accent-gradient);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .stock-card .units {
            font-size: 18px;
            color: var(--on-surface);
            font-weight: 500;
        }
        .stock-card .units span {
            color: var(--on-surface-variant);
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .status-pill {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            margin-top: 16px;
        }
        .status-available { background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3); color: #4ade80; }
        .status-low { background: rgba(255, 85, 64, 0.1); border: 1px solid var(--primary); color: var(--primary); }
    </style>
</head>
<body>
    <button onclick="toggleTheme()" class="theme-toggle-floating" title="Toggle Theme">
        <i id="theme-toggle-icon" class="fas fa-sun"></i>
    </button>
    <div class="container">
        <nav>
            <div class="logo">LifeStream</div>
            <button class="nav-toggle" onclick="toggleMenu()">
                <i class="fas fa-bars"></i>
            </button>
            <ul class="nav-links">
                <li><a href="index.html">Home</a></li>
                <li><a href="donor_guide.php">Donor Guide</a></li>
                <li><a href="availability.php" class="active">Availability</a></li>
                <li><a href="donor_registration.php">Become Donor</a></li>
                <li><a href="donor_login.php">Donor Login</a></li>
                <li><a href="request_blood.php">Request Blood</a></li>
                <li><a href="admin_login.php">Admin Login</a></li>
            </ul>
        </nav>

        <section style="text-align: center; margin-bottom: 60px; padding-top: 60px;">
            <h1 style="font-size: 48px; font-family: 'Manrope'; margin-bottom: 16px;">Live Inventory</h1>
            <p style="color: var(--on-surface-variant); font-size: 18px; max-width: 600px; margin: 0 auto;">Precision tracking of available blood units across our network.</p>
        </section>

        <div class="stock-grid">
            <?php
            $stmt = $conn->prepare("SELECT * FROM blood_stock");
            $stmt->execute();
            $result = $stmt->get_result();
            if ($result->num_rows > 0) {
                while($row = $result->fetch_assoc()) {
                    $units = $row["totalUnits"];
                    
                    if ($units == 0) {
                        $status_class = 'status-depleted';
                        $status_text = 'Critical Depletion';
                    } elseif ($units < 5) {
                        $status_class = 'status-deficit';
                        $status_text = 'Biological Deficit';
                    } else {
                        $status_class = 'status-equilibrium';
                        $status_text = 'Genetic Equilibrium';
                    }
                    
                    echo '<div class="stock-card glass">';
                    echo '<div class="blood-group">' . htmlspecialchars($row["bloodGroup"]) . '</div>';
                    echo '<div class="units">' . htmlspecialchars($units) . ' <span>Units Available</span></div>';
                    echo '<div class="status-pill ' . $status_class . '">' . $status_text . '</div>';
                    echo '</div>';
                }
            } else {
                echo '<p style="grid-column: 1/-1; text-align: center; color: var(--on-surface-variant);">No stock data currently available.</p>';
            }
            ?>
        </div>

        <footer>
            <p>&copy; 2026 LifeStream - Precision Blood Management System. All rights reserved.</p>
        </footer>
    </div>
</body>
</html>
