<?php
// Database Connection via 100% Safe Environment Variables
$servername = getenv('DB_SERVER');
$username   = getenv('DB_USER');
$password   = getenv('DB_PASSWORD');
$dbname     = getenv('DB_NAME');

$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}
// Fetch skills from database
$sql = "SELECT * FROM skills ORDER BY priority DESC, skill_name ASC";
$result = $conn->query($sql);

// ==========================================
// DYNAMIC RESUME AUTOMATION ENGINE
// ==========================================
// Scan directory for any file ending in .pdf
$pdf_files = glob("*.pdf");
$resume_file = !empty($pdf_files) ? $pdf_files[0] : "resume.pdf";

// Default fallback text if parsing fails
$version_text = "v3.0-SNAPSHOT";

// If the file matches a version format like "resume_v3.1.pdf", extract "v3.1"
if (preg_match('/resume_(.*?)\.pdf$/i', $resume_file, $matches)) {
    $version_text = $matches[1];
}
// If it's a standard name like "resume.pdf", pull the server's modification timestamp
elseif (file_exists($resume_file)) {
    $version_text = "Updated: " . date("M d, Y", filemtime($resume_file));
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta property="og:image" content="https://akib-devopss.duckdns.org/cover.jpg">
    <title>Akib | DevOps Portfolio</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        :root {
            --primary-red: #ff0000;
            --bg-dark: #000000;
            --card-bg: #0a0a0a;
            --border-color: #1a1a1a;
            --text-dim: #888;
        }

        body {
            background-color: var(--bg-dark);
            color: #ffffff;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        }

        /* NAVIGATION BAR */
        .navbar {
            position: sticky;
            top: 0;
            width: 100%;
            background: rgba(10, 10, 10, 0.9);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--border-color);
            z-index: 1000;
            padding: 15px 0;
        }
        .nav-content {
            max-width: 1100px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
        }
        .nav-logo { font-weight: bold; letter-spacing: 2px; font-size: 1.1rem; }
        .nav-logo span { color: var(--primary-red); }
        .nav-links { list-style: none; display: flex; gap: 25px; margin: 0; padding: 0; }
        .nav-links a { text-decoration: none; color: var(--text-dim); font-size: 0.75rem; text-transform: uppercase; transition: 0.3s; letter-spacing: 1px; }
        .nav-links a:hover { color: var(--primary-red); }

        /* MAIN WRAPPER - Centering everything on PC */
        .main-page-wrapper {
            width: 100%;
            max-width: 1100px;
            margin: 0 auto;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-sizing: border-box;
        }

        .header-wrapper {
            display: flex;
            flex-direction: row;
            justify-content: center; /* Centers cards on PC */
            align-items: stretch;
            gap: 30px;
            width: 100%;
            margin-bottom: 40px;
        }

        /* PROFILE CONTAINER */
        .profile-container {
            flex: 1.2;
            background-color: var(--card-bg);
            border-radius: 12px;
            border: 1px solid var(--border-color);
            overflow: hidden;
        }

        /* FIX: Cover Photo using CSS Background */
        .cover-photo {
            width: 100%;
            height: 160px;
            background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('cover.jpg');
            background-size: cover;
            background-position: center;
            border-bottom: 1px solid var(--border-color);
        }

        .profile-content {
            padding: 0 30px 30px 30px;
            margin-top: -60px;
            position: relative;
            text-align: left;
        }

        .profile-pic {
            width: 115px;
            height: 115px;
            border-radius: 50%;
            border: 5px solid var(--card-bg);
            object-fit: cover;
            box-shadow: 0 0 15px rgba(255, 0, 0, 0.2);
            margin-bottom: 15px;
            background: #1a1a1a;
        }

        h1 {
            color: var(--primary-red);
            text-transform: uppercase;
            letter-spacing: 3px;
            margin: 5px 0;
            font-size: 1.5rem;
        }

        .social-links {
            margin: 15px 0;
            display: flex;
            gap: 12px;
            justify-content: flex-start;
        }

        .social-icon {
            color: #fff;
            text-decoration: none;
            font-size: 0.9rem;
            padding: 8px 16px;
            border: 1px solid #222;
            border-radius: 5px;
            background: #000;
            transition: 0.3s;
        }

        .social-icon:hover { color: var(--primary-red); border-color: var(--primary-red); }

        .resume-link {
            display: inline-block;
            padding: 10px 25px;
            background-color: var(--primary-red);
            color: #fff;
            text-decoration: none;
            font-weight: bold;
            font-size: 0.8rem;
            border-radius: 4px;
            transition: 0.3s;
            text-transform: uppercase;
            letter-spacing: 1px;
            border: none;
        }

        /* STATUS BADGES - Responsive Fix */
        .build-info-container {
            margin-top: 25px;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-items: center;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid var(--border-color);
            border-radius: 4px;
            padding: 10px;
            font-size: 0.65rem;
            letter-spacing: 1px;
            text-transform: uppercase;
            gap: 10px;
        }

        .build-item { display: flex; align-items: center; white-space: nowrap; }
        .build-label { color: #555; margin-right: 5px; }
        .build-value { font-weight: bold; }
        .text-red { color: var(--primary-red); }
        .text-white { color: #ffffff; }

        .build-separator {
            width: 1px;
            height: 12px;
            background: #222;
        }

        /* CONTACT FORM */
        .contact-container {
            flex: 0.8;
            background-color: var(--card-bg);
            padding: 25px;
            border-radius: 12px;
            border: 1px solid var(--border-color);
            border-top: 4px solid var(--primary-red);
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        input, textarea {
            width: 100%;
            background: #000;
            border: 1px solid #222;
            color: #fff;
            padding: 12px;
            margin-bottom: 12px;
            border-radius: 4px;
            font-size: 0.85rem;
            box-sizing: border-box;
        }

        /* INFINITE SCROLLING CAROUSEL LAYOUT */
        .skills-slider-window {
            overflow: hidden;
            white-space: nowrap;
            position: relative;
            width: 100%;
            padding: 20px 0;
            margin-top: 20px;
        }

        /* Gradient shadows on sides for clean edge transitions */
        .skills-slider-window::before, .skills-slider-window::after {
            content: "";
            height: 100%;
            position: absolute;
            width: 150px;
            z-index: 2;
            pointer-events: none;
        }
        .skills-slider-window::before {
            left: 0;
            top: 0;
            background: linear-gradient(to right, var(--bg-dark) 0%, rgba(0,0,0,0) 100%);
        }
        .skills-slider-window::after {
            right: 0;
            top: 0;
            background: linear-gradient(to left, var(--bg-dark) 0%, rgba(0,0,0,0) 100%);
        }

        .skills-track {
            display: inline-flex;
            gap: 25px;
            width: max-content;
            animation: infiniteMarquee 30s linear infinite;
        }

        /* Pause slider track animation on card hover */
        .skills-slider-window:hover .skills-track {
            animation-play-state: paused;
        }

        .skill-card {
            background-color: var(--card-bg);
            padding: 20px;
            border-radius: 8px;
            border: 1px solid var(--border-color);
            border-left: 4px solid var(--primary-red);
            transition: 0.3s;
            cursor: pointer;
            display: inline-block;
            width: 260px;
            white-space: normal;
            vertical-align: top;
        }

        .skill-card:hover { transform: translateY(-5px); border-color: var(--primary-red); }
        .category { font-size: 0.65rem; color: #666; text-transform: uppercase; margin-bottom: 5px; }
        .skill-name { font-size: 1.1rem; font-weight: bold; display: flex; justify-content: space-between; align-items: center; }
        .badge { background-color: rgba(255, 0, 0, 0.1); color: var(--primary-red); padding: 3px 10px; border-radius: 4px; font-size: 0.7rem; border: 1px solid rgba(255, 0, 0, 0.3); }
        .pulse-dot { height: 8px; width: 8px; background-color: #00ff00; border-radius: 50%; display: inline-block; box-shadow: 0 0 8px #00ff00; }

        /* SCROLL ANIMATION */
        @keyframes infiniteMarquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        footer {
            margin-top: 60px;
            padding: 20px;
            text-align: center;
            border-top: 1px solid var(--border-color);
            width: 100%;
            color: #444;
            font-size: 0.7rem;
            letter-spacing: 1px;
        }

        /* MOBILE FIXES */
        @media (max-width: 768px) {
            .header-wrapper { flex-direction: column; align-items: center; }
            .profile-content { text-align: center; }
            .social-links, .build-info-container { justify-content: center; }
            .build-separator { display: none; }
            .contact-container { width: 100%; }
            .nav-logo { font-size: 1rem; }
            h1 { font-size: 1.2rem; }
            .skills-slider-window::before, .skills-slider-window::after { width: 50px; }
        }

        .modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); backdrop-filter: blur(5px); }
        .modal-content { background-color: var(--card-bg); margin: 15% auto; padding: 30px; border: 1px solid var(--primary-red); max-width: 400px; border-radius: 10px; text-align: center; }
    </style>
</head>
<body>

<nav class="navbar">
    <div class="nav-content">
        <div class="nav-logo">AKIB<span>.DEVOPS</span></div>
        <ul class="nav-links">
            <li><a href="#skills">Skills</a></li>
            <li><a href="https://github.com/jabarbhatakib" target="_blank">Github</a></li>
            <li><a href="https://www.linkedin.com/in/akibjabarbhat/" target="_blank">LinkedIn</a></li>
        </ul>
    </div>
</nav>

<div class="main-page-wrapper">

    <div class="header-wrapper">
        <div class="profile-container">
            <div class="cover-photo"></div>

            <div class="profile-content">
                <img src="profile.jpg" alt="Akib" class="profile-pic">
                <h1>AKIB'S DEVOPS STACK</h1>
                <div class="social-links">
                    <a href="https://github.com/jabarbhatakib" target="_blank" class="social-icon"><i class="fab fa-github"></i></a>
                    <a href="https://www.linkedin.com/in/akibjabarbhat/" target="_blank" class="social-icon"><i class="fab fa-linkedin"></i></a>
                </div>

                <a href="<?php echo htmlspecialchars($resume_file); ?>" target="_blank" class="resume-link">
                    Download Resume (<?php echo htmlspecialchars($version_text); ?>)
                </a>

                <div class="build-info-container">
                    <div class="build-item">
                        <span class="build-label">Env:</span>
                        <span class="build-value text-red">LAMP Stack</span>
                    </div>
                    <div class="build-separator"></div>
                    <div class="build-item">
                        <span class="build-label">Cloud:</span>
                        <span class="build-value text-white">AWS EC2</span>
                    </div>
                    <div class="build-separator"></div>
                    <div class="build-item">
                        <span class="build-label">Status:</span>
                        <span class="build-value" style="color: #00ff00;">Stable</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="contact-container" id="contact">
            <h3 style="color:var(--primary-red); font-size:0.8rem; text-transform:uppercase; text-align:center; margin-top:0; letter-spacing: 2px;">Secure Connection</h3>
            <form action="https://formspree.io/f/xlgzvkwg" method="POST">
                <input type="text" name="name" placeholder="Name" required>
                <input type="email" name="email" placeholder="Email" required>
                <textarea name="message" placeholder="Message" rows="3" required></textarea>
                <button type="submit" class="resume-link" style="width:100%; cursor:pointer;">Initiate Transmission</button>
            </form>
        </div>
    </div>

    <div class="skills-slider-window" id="skills">
        <div class="skills-track">
            <?php
            if ($result && $result->num_rows > 0) {

                // Read all database data safely into an array first
                $skills_array = [];
                while($row = $result->fetch_assoc()) {
                    $skills_array[] = $row;
                }

                // LOOP PART 1: First set of cards
                foreach($skills_array as $row) {
                    $status = isset($row["status"]) ? strtolower($row["status"]) : "";
                    $isLearning = ($status == 'learning' || $status == 'coming soon');
                    $isActive = (isset($row['is_active']) && $row['is_active'] == 1);
                    $cardClass = $isLearning ? "skill-card learning-mode" : "skill-card";

                    $sName = htmlspecialchars($row["skill_name"] ?? "Unknown Skill");
                    $sDesc = htmlspecialchars($row["description"] ?? "Infrastructure automation with $sName.");
                    $sCat = htmlspecialchars($row["category"] ?? "DevOps");
                    $sProf = htmlspecialchars($row["proficiency"] ?? "Intermediate");

                    echo "<div class='$cardClass' onclick=\"openModal('$sName', '$sDesc')\">";
                        echo "<div class='category'>$sCat</div>";
                        echo "<div class='skill-name'>";
                            echo "<span>$sName</span>";
                            if($isActive && !$isLearning) echo "<span class='pulse-dot'></span>";
                        echo "</div>";
                        echo "<div style='margin-top:8px;'><span class='badge'>$sProf</span></div>";
                    echo "</div>";
                }

                // LOOP PART 2: Duplicate tracking set for seamless wrapping
                foreach($skills_array as $row) {
                    $status = isset($row["status"]) ? strtolower($row["status"]) : "";
                    $isLearning = ($status == 'learning' || $status == 'coming soon');
                    $isActive = (isset($row['is_active']) && $row['is_active'] == 1);
                    $cardClass = $isLearning ? "skill-card learning-mode" : "skill-card";

                    $sName = htmlspecialchars($row["skill_name"] ?? "Unknown Skill");
                    $sDesc = htmlspecialchars($row["description"] ?? "Infrastructure automation with $sName.");
                    $sCat = htmlspecialchars($row["category"] ?? "DevOps");
                    $sProf = htmlspecialchars($row["proficiency"] ?? "Intermediate");

                    echo "<div class='$cardClass' onclick=\"openModal('$sName', '$sDesc')\">";
                        echo "<div class='category'>$sCat</div>";
                        echo "<div class='skill-name'>";
                            echo "<span>$sName</span>";
                            if($isActive && !$isLearning) echo "<span class='pulse-dot'></span>";
                        echo "</div>";
                        echo "<div style='margin-top:8px;'><span class='badge'>$sProf</span></div>";
                    echo "</div>";
                }

            } else {
                echo "<p style='text-align:center; color:#888; width: 100%;'>[ System Note: Skills database returned 0 results. ]</p>";
            }
            ?>
        </div>
    </div>
    <footer>
        &copy; 2026 AKIB DEVOPS | ALL SYSTEMS OPERATIONAL
    </footer>
</div>

<div id="detailsModal" class="modal">
    <div class="modal-content">
        <h2 id="modalTitle" style="color: var(--primary-red); margin-top:0;"></h2>
        <p id="modalDesc" style="color: #ccc; line-height:1.5;"></p>
        <button onclick="closeModal()" class="resume-link" style="background:#333; margin-top:20px;">Close</button>
    </div>
</div>

<script>
    function openModal(name, desc) {
        document.getElementById('modalTitle').innerText = name;
        document.getElementById('modalDesc').innerText = desc;
        document.getElementById('detailsModal').style.display = "block";
    }
    function closeModal() {
        document.getElementById('detailsModal').style.display = "none";
    }
    window.onclick = function(e) { if (e.target.className == 'modal') closeModal(); }
</script>

</body>
</html>
<?php $conn->close(); ?>
