<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);

// Database configuration for PostgreSQL (menggunakan konfigurasi dari dokumen)
$host = '202.46.28.160';
$port = '45432';
$username = '5803024011';
$password = 'pw5803024011';
$database = 'tgs01_5803024011';

try {
    // Create PDO connection for PostgreSQL
    $dsn = "pgsql:host=$host;port=$port;dbname=$database";
    $pdo = new PDO($dsn, $username, $password, [
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC
    ]);
    
    // Create tables if they don't exist
    $create_groups_table = "CREATE TABLE IF NOT EXISTS groups (
        group_id SERIAL PRIMARY KEY,
        group_name VARCHAR(100) NOT NULL
    )";

    $create_tasks_table = "CREATE TABLE IF NOT EXISTS tasks (
        task_id SERIAL PRIMARY KEY,
        task_name VARCHAR(255) NOT NULL,
        task_description TEXT,
        group_id INTEGER NOT NULL,
        is_done BOOLEAN DEFAULT FALSE,
        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
        FOREIGN KEY (group_id) REFERENCES groups(group_id) ON DELETE CASCADE
    )";
    
    $pdo->exec($create_groups_table);
    $pdo->exec($create_tasks_table);
    
} catch(PDOException $e) {
    die("Connection failed: " . $e->getMessage());
}

// Handle form submissions
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    if (isset($_POST['add_group'])) {
        $group_name = trim($_POST['group_name']);
        if (!empty($group_name)) {
            $stmt = $pdo->prepare("INSERT INTO groups (group_name) VALUES (?)");
            $stmt->execute([$group_name]);
        }
    }
    
    if (isset($_POST['add_task'])) {
        $task_name = trim($_POST['task_name']);
        $task_description = trim($_POST['task_description']);
        $group_id = $_POST['group_id'];
        
        if (!empty($task_name) && !empty($group_id)) {
            $stmt = $pdo->prepare("INSERT INTO tasks (task_name, task_description, group_id) VALUES (?, ?, ?)");
            $stmt->execute([$task_name, $task_description, $group_id]);
        }
    }
    
    if (isset($_POST['update_task'])) {
        $task_id = $_POST['task_id'];
        $task_name = trim($_POST['task_name']);
        $task_description = trim($_POST['task_description']);
        $group_id = $_POST['group_id'];
        
        if (!empty($task_name) && !empty($group_id)) {
            $stmt = $pdo->prepare("UPDATE tasks SET task_name = ?, task_description = ?, group_id = ? WHERE task_id = ?");
            $stmt->execute([$task_name, $task_description, $group_id, $task_id]);
        }
    }
    
    if (isset($_POST['toggle_task'])) {
        $task_id = $_POST['task_id'];
        $stmt = $pdo->prepare("UPDATE tasks SET is_done = NOT is_done WHERE task_id = ?");
        $stmt->execute([$task_id]);
    }
    
    if (isset($_POST['delete_task'])) {
        $task_id = $_POST['delete_task'];
        $stmt = $pdo->prepare("DELETE FROM tasks WHERE task_id = ?");
        $stmt->execute([$task_id]);
    }
    
    if (isset($_POST['delete_group'])) {
        $group_id = $_POST['delete_group'];
        $stmt = $pdo->prepare("DELETE FROM groups WHERE group_id = ?");
        $stmt->execute([$group_id]);
    }
    
    // Redirect to prevent form resubmission
    header("Location: " . $_SERVER['PHP_SELF']);
    exit();
}

// Get task to edit if requested
$edit_task = null;
if (isset($_GET['edit_task'])) {
    $task_id = $_GET['edit_task'];
    $stmt = $pdo->prepare("SELECT * FROM tasks WHERE task_id = ?");
    $stmt->execute([$task_id]);
    $edit_task = $stmt->fetch(PDO::FETCH_ASSOC);
}

// Fetch groups and tasks organized by groups
$groups = $pdo->query("SELECT * FROM groups ORDER BY group_name")->fetchAll(PDO::FETCH_ASSOC);

// Fetch tasks grouped by group_id
$tasks_by_group = [];
if (!empty($groups)) {
    $stmt = $pdo->query("SELECT t.*, g.group_name FROM tasks t 
                         JOIN groups g ON t.group_id = g.group_id 
                         ORDER BY t.is_done ASC, t.created_at DESC");
    $all_tasks = $stmt->fetchAll(PDO::FETCH_ASSOC);
    
    foreach ($all_tasks as $task) {
        $tasks_by_group[$task['group_id']][] = $task;
    }
}

// Calculate statistics
$total_tasks = 0;
$completed_tasks = 0;
foreach ($tasks_by_group as $tasks) {
    foreach ($tasks as $task) {
        $total_tasks++;
        if ($task['is_done']) $completed_tasks++;
    }
}
$pending_tasks = $total_tasks - $completed_tasks;
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Royal Todo List</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Cormorant+Garamond:wght@300;400;600&display=swap');
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Cormorant Garamond', serif;
            background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 50%, #0f0f0f 100%);
            color: #f4e4bc;
            min-height: 100vh;
            position: relative;
            overflow-x: hidden;
        }
        
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: 
                radial-gradient(circle at 25% 25%, rgba(212, 175, 55, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 75% 75%, rgba(212, 175, 55, 0.05) 0%, transparent 50%);
            pointer-events: none;
            z-index: -1;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            position: relative;
            z-index: 1;
        }
        
        .header {
            text-align: center;
            margin-bottom: 40px;
            position: relative;
        }
        
        .title {
            font-family: 'Cinzel', serif;
            font-size: 3.5rem;
            font-weight: 700;
            color: #d4af37;
            text-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
            margin-bottom: 10px;
            position: relative;
        }
        
        .subtitle {
            font-size: 1.3rem;
            color: #f4e4bc;
            font-weight: 300;
            opacity: 0.9;
        }
        
        .royal-divider {
            width: 200px;
            height: 2px;
            background: linear-gradient(90deg, transparent, #d4af37, transparent);
            margin: 20px auto;
            position: relative;
        }
        
        .royal-divider::before {
            content: '♦';
            position: absolute;
            top: -8px;
            left: 50%;
            transform: translateX(-50%);
            background: #0f0f0f;
            color: #d4af37;
            padding: 0 10px;
            font-size: 1rem;
        }
        
        .form-section {
            background: rgba(26, 26, 26, 0.8);
            border: 1px solid #d4af37;
            border-radius: 15px;
            padding: 30px;
            margin-bottom: 30px;
            backdrop-filter: blur(10px);
            box-shadow: 0 8px 32px rgba(212, 175, 55, 0.1);
        }
        
        .form-title {
            font-family: 'Cinzel', serif;
            font-size: 1.8rem;
            color: #d4af37;
            margin-bottom: 20px;
            text-align: center;
            position: relative;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-row {
            display: flex;
            gap: 15px;
            align-items: end;
        }
        
        .form-row .form-group {
            flex: 1;
            margin-bottom: 0;
        }
        
        label {
            display: block;
            color: #d4af37;
            font-weight: 600;
            margin-bottom: 8px;
            font-size: 1.1rem;
        }
        
        input, textarea, select {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid rgba(212, 175, 55, 0.3);
            border-radius: 8px;
            background: rgba(15, 15, 15, 0.7);
            color: #f4e4bc;
            font-size: 1rem;
            font-family: 'Cormorant Garamond', serif;
            transition: all 0.3s ease;
        }
        
        input:focus, textarea:focus, select:focus {
            outline: none;
            border-color: #d4af37;
            box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
        }
        
        textarea {
            resize: vertical;
            min-height: 80px;
        }
        
        .btn {
            background: linear-gradient(145deg, #d4af37, #b8941f);
            color: #0f0f0f;
            border: none;
            padding: 12px 25px;
            border-radius: 8px;
            font-family: 'Cinzel', serif;
            font-weight: 600;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
            text-decoration: none;
            display: inline-block;
        }
        
        .btn:hover {
            background: linear-gradient(145deg, #b8941f, #d4af37);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4);
        }
        
        .btn-small {
            padding: 6px 12px;
            font-size: 0.8rem;
            margin: 0 3px;
        }
        
        .btn-secondary {
            background: linear-gradient(145deg, #4a4a4a, #2a2a2a);
            color: #f4e4bc;
        }
        
        .btn-secondary:hover {
            background: linear-gradient(145deg, #2a2a2a, #4a4a4a);
        }
        
        .btn-danger {
            background: linear-gradient(145deg, #8b0000, #a50000);
            color: #fff;
        }
        
        .btn-danger:hover {
            background: linear-gradient(145deg, #a50000, #8b0000);
        }
        
        .stats {
            display: flex;
            justify-content: center;
            gap: 40px;
            margin: 30px 0;
            flex-wrap: wrap;
        }
        
        .stat-item {
            text-align: center;
        }
        
        .stat-number {
            font-family: 'Cinzel', serif;
            font-size: 2rem;
            font-weight: 700;
            color: #d4af37;
            display: block;
        }
        
        .stat-label {
            font-size: 0.9rem;
            color: rgba(244, 228, 188, 0.8);
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .group-container {
            margin-bottom: 40px;
        }
        
        .group-header {
            background: linear-gradient(145deg, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.1));
            border: 1px solid rgba(212, 175, 55, 0.5);
            border-radius: 12px 12px 0 0;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .group-name {
            font-family: 'Cinzel', serif;
            font-size: 1.5rem;
            font-weight: 600;
            color: #d4af37;
            margin: 0;
        }
        
        .group-actions {
            display: flex;
            gap: 10px;
        }
        
        .tasks-container {
            background: rgba(26, 26, 26, 0.8);
            border: 1px solid rgba(212, 175, 55, 0.3);
            border-top: none;
            border-radius: 0 0 12px 12px;
            padding: 20px;
        }
        
        .task-item {
            background: rgba(15, 15, 15, 0.7);
            border: 1px solid rgba(212, 175, 55, 0.2);
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 15px;
            transition: all 0.3s ease;
            position: relative;
        }
        
        .task-item:hover {
            border-color: rgba(212, 175, 55, 0.5);
            box-shadow: 0 5px 15px rgba(212, 175, 55, 0.1);
        }
        
        .task-item.completed {
            opacity: 0.6;
            background: rgba(15, 15, 15, 0.4);
        }
        
        .task-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 10px;
        }
        
        .task-name {
            font-family: 'Cinzel', serif;
            font-size: 1.2rem;
            font-weight: 600;
            color: #d4af37;
            margin: 0;
        }
        
        .task-name.completed {
            text-decoration: line-through;
            opacity: 0.7;
        }
        
        .task-description {
            color: #f4e4bc;
            line-height: 1.6;
            margin-bottom: 15px;
            font-size: 1rem;
        }
        
        .task-meta {
            font-size: 0.85rem;
            color: rgba(244, 228, 188, 0.6);
            margin-bottom: 15px;
        }
        
        .task-actions {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }
        
        .no-tasks {
            text-align: center;
            color: rgba(244, 228, 188, 0.6);
            font-style: italic;
            font-size: 1.1rem;
            padding: 30px;
        }
        
        .edit-form {
            background: rgba(212, 175, 55, 0.1);
            border: 2px solid #d4af37;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 30px;
        }
        
        .ornament {
            color: #d4af37;
            font-size: 1.5rem;
            margin: 0 10px;
            opacity: 0.7;
        }
        
        .crown {
            position: absolute;
            top: 10px;
            right: 15px;
            color: #d4af37;
            font-size: 1rem;
            opacity: 0.4;
        }
        
        @media (max-width: 768px) {
            .container {
                padding: 15px;
            }
            
            .title {
                font-size: 2.5rem;
            }
            
            .form-row {
                flex-direction: column;
            }
            
            .group-header {
                flex-direction: column;
                gap: 15px;
                text-align: center;
            }
            
            .group-actions {
                justify-content: center;
            }
            
            .task-actions {
                justify-content: center;
            }
            
            .stats {
                gap: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1 class="title">
                <span class="ornament">♔</span>
                Royal Todo List
                <span class="ornament">♔</span>
            </h1>
            <p class="subtitle">Manage your tasks with royal elegance</p>
            <div class="royal-divider"></div>
        </div>

        <div class="stats">
            <div class="stat-item">
                <span class="stat-number"><?php echo count($groups); ?></span>
                <span class="stat-label">Groups</span>
            </div>
            <div class="stat-item">
                <span class="stat-number"><?php echo $total_tasks; ?></span>
                <span class="stat-label">Total Tasks</span>
            </div>
            <div class="stat-item">
                <span class="stat-number"><?php echo $completed_tasks; ?></span>
                <span class="stat-label">Completed</span>
            </div>
            <div class="stat-item">
                <span class="stat-number"><?php echo $pending_tasks; ?></span>
                <span class="stat-label">Pending</span>
            </div>
        </div>

        <!-- Edit Task Form (appears when editing) -->
        <?php if ($edit_task): ?>
        <div class="edit-form">
            <h2 class="form-title">♛ Edit Task</h2>
            <form method="POST">
                <input type="hidden" name="task_id" value="<?php echo $edit_task['task_id']; ?>">
                
                <div class="form-group">
                    <label for="edit_task_name">Task Name</label>
                    <input type="text" id="edit_task_name" name="task_name" value="<?php echo htmlspecialchars($edit_task['task_name']); ?>" required>
                </div>
                
                <div class="form-group">
                    <label for="edit_task_description">Description</label>
                    <textarea id="edit_task_description" name="task_description"><?php echo htmlspecialchars($edit_task['task_description']); ?></textarea>
                </div>
                
                <div class="form-row">
                    <div class="form-group">
                        <label for="edit_group_id">Group</label>
                        <select id="edit_group_id" name="group_id" required>
                            <?php foreach ($groups as $group): ?>
                                <option value="<?php echo $group['group_id']; ?>" <?php echo $group['group_id'] == $edit_task['group_id'] ? 'selected' : ''; ?>>
                                    <?php echo htmlspecialchars($group['group_name']); ?>
                                </option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div>
                        <button type="submit" name="update_task" class="btn">Update Task</button>
                        <a href="<?php echo $_SERVER['PHP_SELF']; ?>" class="btn btn-secondary">Cancel</a>
                    </div>
                </div>
            </form>
        </div>
        <?php endif; ?>

        <!-- Add Group Form -->
        <div class="form-section">
            <h2 class="form-title">♛ Create New Group</h2>
            <form method="POST">
                <div class="form-row">
                    <div class="form-group">
                        <label for="group_name">Group Name</label>
                        <input type="text" id="group_name" name="group_name" required placeholder="e.g., Work, Personal, Urgent...">
                    </div>
                    <div>
                        <button type="submit" name="add_group" class="btn">Create Group</button>
                    </div>
                </div>
            </form>
        </div>

        <!-- Add Task Form -->
        <?php if (!empty($groups)): ?>
        <div class="form-section">
            <h2 class="form-title">♜ Add New Task</h2>
            <form method="POST">
                <div class="form-group">
                    <label for="task_name">Task Name</label>
                    <input type="text" id="task_name" name="task_name" required placeholder="Enter task name...">
                </div>
                
                <div class="form-group">
                    <label for="task_description">Description (Optional)</label>
                    <textarea id="task_description" name="task_description" placeholder="Enter task description..."></textarea>
                </div>
                
                <div class="form-row">
                    <div class="form-group">
                        <label for="group_id">Select Group</label>
                        <select id="group_id" name="group_id" required>
                            <option value="">Choose a group...</option>
                            <?php foreach ($groups as $group): ?>
                                <option value="<?php echo $group['group_id']; ?>">
                                    <?php echo htmlspecialchars($group['group_name']); ?>
                                </option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div>
                        <button type="submit" name="add_task" class="btn">Add Task</button>
                    </div>
                </div>
            </form>
        </div>
        <?php endif; ?>

        <!-- Display Groups and Tasks -->
        <?php if (empty($groups)): ?>
            <div class="form-section">
                <div class="no-tasks">
                    <span style="font-size: 3rem; display: block; margin-bottom: 20px;">👑</span>
                    Your royal kingdom awaits! Create your first group to start organizing tasks.
                </div>
            </div>
        <?php else: ?>
            <?php foreach ($groups as $group): ?>
                <div class="group-container">
                    <div class="group-header">
                        <h3 class="group-name">♠ <?php echo htmlspecialchars($group['group_name']); ?></h3>
                        <div class="group-actions">
                            <form method="POST" style="display: inline;" onsubmit="return confirm('Are you sure you want to delete this group and all its tasks?')">
                                <button type="submit" name="delete_group" value="<?php echo $group['group_id']; ?>" class="btn btn-small btn-danger">
                                    Delete Group
                                </button>
                            </form>
                        </div>
                    </div>
                    
                    <div class="tasks-container">
                        <?php if (empty($tasks_by_group[$group['group_id']])): ?>
                            <div class="no-tasks">
                                No tasks in this group yet. Add some tasks to get started!
                            </div>
                        <?php else: ?>
                            <?php foreach ($tasks_by_group[$group['group_id']] as $task): ?>
                                <div class="task-item <?php echo $task['is_done'] ? 'completed' : ''; ?>">
                                    <div class="crown">♔</div>
                                    
                                    <div class="task-header">
                                        <h4 class="task-name <?php echo $task['is_done'] ? 'completed' : ''; ?>">
                                            <?php echo htmlspecialchars($task['task_name']); ?>
                                        </h4>
                                    </div>
                                    
                                    <?php if (!empty($task['task_description'])): ?>
                                        <div class="task-description">
                                            <?php echo nl2br(htmlspecialchars($task['task_description'])); ?>
                                        </div>
                                    <?php endif; ?>
                                    
                                    <div class="task-meta">
                                        Created: <?php echo date('M j, Y g:i A', strtotime($task['created_at'])); ?>
                                        | Status: <strong><?php echo $task['is_done'] ? 'Completed' : 'Pending'; ?></strong>
                                    </div>
                                    
                                    <div class="task-actions">
                                        <form method="POST" style="display: inline;">
                                            <input type="hidden" name="task_id" value="<?php echo $task['task_id']; ?>">
                                            <button type="submit" name="toggle_task" class="btn btn-small">
                                                <?php echo $task['is_done'] ? '↶ Undo' : '✓ Complete'; ?>
                                            </button>
                                        </form>
                                        
                                        <a href="<?php echo $_SERVER['PHP_SELF']; ?>?edit_task=<?php echo $task['task_id']; ?>" class="btn btn-small btn-secondary">
                                            ✎ Edit
                                        </a>
                                        
                                        <form method="POST" style="display: inline;" onsubmit="return confirm('Are you sure you want to delete this task?')">
                                            <button type="submit" name="delete_task" value="<?php echo $task['task_id']; ?>" class="btn btn-small btn-danger">
                                                🗑 Delete
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        <?php endif; ?>
                    </div>
                </div>
            <?php endforeach; ?>
        <?php endif; ?>
    </div>

    <script>
        // Add royal sparkle effects
        function createSparkle() {
            const sparkle = document.createElement('div');
            sparkle.style.position = 'fixed';
            sparkle.style.width = '4px';
            sparkle.style.height = '4px';
            sparkle.style.background = '#d4af37';
            sparkle.style.borderRadius = '50%';
            sparkle.style.pointerEvents = 'none';
            sparkle.style.opacity = Math.random();
            sparkle.style.left = Math.random() * window.innerWidth + 'px';
            sparkle.style.top = Math.random() * window.innerHeight + 'px';
            sparkle.style.zIndex = '1000';
            sparkle.style.boxShadow = '0 0 6px #d4af37';
            
            document.body.appendChild(sparkle);
            
            // Animate sparkle
            const animation = sparkle.animate([
                { transform: 'translateY(0px)', opacity: sparkle.style.opacity },
                { transform: 'translateY(-100px)', opacity: 0 }
            ], {
                duration: 3000,
                easing: 'ease-out'
            });
            
            animation.onfinish = () => sparkle.remove();
        }
        
        // Create sparkles periodically
        setInterval(createSparkle, 2500);
        
        // Add form validation
        document.addEventListener('DOMContentLoaded', function() {
            const forms = document.querySelectorAll('form');
            forms.forEach(form => {
                form.addEventListener('submit', function(e) {
                    const requiredFields = form.querySelectorAll('[required]');
                    let isValid = true;
                    
                    requiredFields.forEach(field => {
                        if (!field.value.trim()) {
                            field.style.borderColor = '#8b0000';
                            field.style.boxShadow = '0 0 10px rgba(139, 0, 0, 0.3)';
                            isValid = false;
                        } else {
                            field.style.borderColor = 'rgba(212, 175, 55, 0.3)';
                            field.style.boxShadow = 'none';
                        }
                    });
                    
                    if (!isValid) {
                        e.preventDefault();
                        alert('Please fill in all required fields.');
                    }
                });
            });
            
            // Auto-focus on form inputs
            const inputs = document.querySelectorAll('input, textarea, select');
            inputs.forEach(input => {
                input.addEventListener('focus', function() {
                    this.style.transform = 'scale(1.02)';
                });
                
                input.addEventListener('blur', function() {
                    this.style.transform = 'scale(1)';
                });
            });
        });
    </script>
</body>
</html>