<?php
session_start();
if (!isset($_SESSION['user_name'])) {
    header("Location: login.php"); // Agar login nahi hai to wapas bhej do
    exit();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Gallery - Hamna Sheikh</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body { background-color: #0f172a; color: white; font-family: 'Segoe UI', sans-serif; margin: 0; }
        nav { display: flex; justify-content: space-between; align-items: center; padding: 15px 50px; background: #1e293b; border-bottom: 1px solid #334155; }
        nav h2 { color: #38bdf8; margin: 0; }
        .logout-btn { color: #f87171; text-decoration: none; border: 1px solid #f87171; padding: 5px 15px; border-radius: 5px; }
        
        .upload-section { background: #1e293b; max-width: 600px; margin: 30px auto; padding: 20px; border-radius: 12px; border: 1px dashed #38bdf8; }
        input, textarea, select { width: 100%; padding: 10px; margin: 10px 0; border-radius: 5px; background: #0f172a; color: white; border: 1px solid #334155; box-sizing: border-box; }
        .btn-post { background: #38bdf8; color: #0f172a; border: none; padding: 12px; width: 100%; font-weight: bold; border-radius: 5px; cursor: pointer; }
        
        #gallery_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 0 50px 50px 50px; }
        .gallery-item { background: #1e293b; border-radius: 12px; border: 1px solid #334155; overflow: hidden; transition: 0.4s; padding: 10px; }
        .gallery-item img { width: 100%; height: 200px; object-fit: cover; border-radius: 8px; }
        .delete-btn { background: #ef4444; color: white; border: none; padding: 8px; width: 100%; border-radius: 5px; cursor: pointer; margin-top: 10px; }
        
        @media (max-width: 1024px) { #gallery_grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 600px) { #gallery_grid { grid-template-columns: repeat(1, 1fr); } }
    </style>
</head>
<body>

    <nav>
        <h2>Hamna Sheikh</h2>
        <div>
            <span style="margin-right:20px;">Welcome, <?php echo $_SESSION['user_name']; ?></span>
            <a href="logout.php" class="logout-btn">Logout</a>
        </div>
    </nav>

    <div class="upload-section">
        <h3 style="text-align:center; color:#38bdf8;">Add New Picture</h3>
        <form id="uploadForm" enctype="multipart/form-data">
            <input type="file" name="fileupload" required>
            <textarea name="description" placeholder="Description..." required></textarea>
            <select name="visibility">
                <option value="public">🌐 Public</option>
                <option value="private">🔒 Private</option>
            </select>
            <button type="submit" class="btn-post">Upload & Show</button>
        </form>
        <div id="status" style="margin-top:10px; text-align:center;"></div>
    </div>

    <div id="gallery_grid">
        </div>

    <script>
        function loadGallery() {
            $.ajax({
                url: 'gallery_show.php',
                type: 'GET',
                success: function(data) { $('#gallery_grid').html(data); }
            });
        }

        $(document).ready(function() {
            loadGallery();

            $('#uploadForm').on('submit', function(e) {
                e.preventDefault();
                var formData = new FormData(this);
                $.ajax({
                    url: 'gallery_upload.php',
                    type: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(res) {
                        if(res.trim() == "success") {
                            $('#status').html("<span style='color:#4ade80'>Uploaded!</span>");
                            $('#uploadForm')[0].reset();
                            loadGallery();
                        } else { $('#status').html("<span style='color:#f87171'>"+res+"</span>"); }
                    }
                });
            });
        });

        function deletePic(id) {
            if(confirm("Delete this picture?")) {
                $.ajax({
                    url: 'gallery_delete.php',
                    type: 'POST',
                    data: {id: id},
                    success: function() { loadGallery(); }
                });
            }
        }
    </script>
</body>
</html>