<?php
session_start();
if (!isset($_SESSION['user_id'])) {
    header("Location: index");
    exit;
}
require_once 'db.php';

// Verify role-based access
checkAccess();

$user_id = $_SESSION['user_id'];
$user_name = $_SESSION['user_name'] ?? 'User';
$user_email = $_SESSION['user_email'] ?? '';

// Verify project access if project_id is provided via GET (for direct links)
if (isset($_GET['project_id'])) {
    verifyProjectAccess($_GET['project_id'], $conn);
}

// Verify access if an image_id is passed directly in the URL
if (isset($_GET['image_id'])) {
    verifyImageAccess($_GET['image_id'], $conn);
}

// Handle set project
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['set_project'])) {
    header('Content-Type: application/json');
    
    // Verify project belongs to user before setting
    verifyProjectAccess($_POST['project_id'], $conn);
    
    $_SESSION['project_id'] = $_POST['project_id'];
    echo json_encode(['success' => true]);
    exit;
}

// Handle fetch final image
if ($_SERVER['REQUEST_METHOD'] === 'GET' && isset($_GET['fetch_final_image'])) {
    header('Content-Type: application/json');
    $finalImage = null;
    if (isset($_SESSION['project_id'])) {
        $stmt = $conn->prepare("SELECT * FROM design_images WHERE project_id = ? AND image_type = 'final' LIMIT 1");
        $stmt->bind_param('i', $_SESSION['project_id']);
        $stmt->execute();
        $result = $stmt->get_result();
        $finalImage = $result->fetch_assoc();
    }
    echo json_encode($finalImage);
    exit;
}

// Handle AJAX requests for pins
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
    header('Content-Type: application/json');

    if ($_POST['action'] === 'save_pin') {
        $design_image_id = $_POST['design_image_id'];
        $x_position = $_POST['x_position'];
        $y_position = $_POST['y_position'];
        $comment_text = $_POST['comment_text'];
        $user_id = $_SESSION['user_id'];

        // Verify user has access to this image's project
        verifyImageAccess($design_image_id, $conn);

        // Debug logging
        error_log("Save pin attempt: design_image_id=$design_image_id, x=$x_position, y=$y_position, comment=$comment_text, user_id=$user_id");

        $stmt = $conn->prepare("INSERT INTO image_pins (design_image_id, x_position, y_position, comment_text, created_by_user_id) VALUES (?, ?, ?, ?, ?)");
        if (!$stmt) {
            error_log("Prepare failed: " . $conn->error);
            echo json_encode(['success' => false, 'message' => 'Database prepare failed']);
            exit;
        }

        $stmt->bind_param('iddsi', $design_image_id, $x_position, $y_position, $comment_text, $user_id);

        if ($stmt->execute()) {
            $pin_id = $conn->insert_id;
            error_log("Pin saved successfully with ID: $pin_id");
            echo json_encode(['success' => true, 'pin_id' => $pin_id]);
        } else {
            error_log("Execute failed: " . $stmt->error);
            echo json_encode(['success' => false, 'message' => 'Failed to save pin: ' . $stmt->error]);
        }
        $stmt->close();
        exit;
    }

    if ($_POST['action'] === 'load_pins') {
        $design_image_id = $_POST['design_image_id'];
        // Verify user has access to this image's project before loading pins
        verifyImageAccess($design_image_id, $conn);

        // Load all pins for that image
        $stmt = $conn->prepare("SELECT ip.*, u.name as user_name FROM image_pins ip JOIN users u ON ip.created_by_user_id = u.id WHERE ip.design_image_id = ? ORDER BY ip.created_at ASC");
        $stmt->bind_param('i', $design_image_id);
        $stmt->execute();
        $result = $stmt->get_result();

        $pins = [];
        while ($row = $result->fetch_assoc()) {
            $pins[] = $row;
        }

        echo json_encode(['success' => true, 'pins' => $pins]);
        $stmt->close();
        exit;
    }

    if ($_POST['action'] === 'delete_pin') {
        $pin_id = $_POST['pin_id'];

        $stmt = $conn->prepare("DELETE FROM image_pins WHERE id = ?");
        $stmt->bind_param('i', $pin_id);

        if ($stmt->execute()) {
            echo json_encode(['success' => true]);
        } else {
            echo json_encode(['success' => false, 'message' => 'Failed to delete pin']);
        }
        $stmt->close();
        exit;
    }

    if ($_POST['action'] === 'update_pin') {
        $pin_id = $_POST['pin_id'];
        $comment_text = $_POST['comment_text'];

        $stmt = $conn->prepare("UPDATE image_pins SET comment_text = ? WHERE id = ?");
        $stmt->bind_param('si', $comment_text, $pin_id);

        if ($stmt->execute()) {
            echo json_encode(['success' => true]);
        } else {
            echo json_encode(['success' => false, 'message' => 'Failed to update pin']);
        }
        $stmt->close();
        exit;
    }
}

// Handle loading image by ID
if ($_SERVER['REQUEST_METHOD'] === 'GET' && isset($_GET['get_image'])) {
    header('Content-Type: application/json');
    $image_id = $_GET['image_id'];

    // Verify access
    verifyImageAccess($image_id, $conn);

    $stmt = $conn->prepare("SELECT * FROM design_images WHERE id = ?");
    $stmt->bind_param('i', $image_id);
    $stmt->execute();
    $result = $stmt->get_result();

    if ($row = $result->fetch_assoc()) {
        echo json_encode(['success' => true, 'image' => $row]);
    } else {
        echo json_encode(['success' => false, 'message' => 'Image not found']);
    }
    $stmt->close();
    exit;
}

// Fetch projects
$projects = getUserProjects($conn);

// Fetch final image
$finalImage = null;
if (isset($_SESSION['project_id'])) {
    $stmt = $conn->prepare("SELECT * FROM design_images WHERE project_id = ? AND image_type = 'final' LIMIT 1");
    $stmt->bind_param('i', $_SESSION['project_id']);
    $stmt->execute();
    $result = $stmt->get_result();
    $finalImage = $result->fetch_assoc();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Pin & Comment - ConstructCRM</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <style>
    :root {
        --primary-color: #977C49;
        --primary-dark: #7a633a;
        --primary-light: #f8f5ef;
        --secondary-color: #343a40;
        --secondary-light: #f8f9fa;
        --success-color: #28a745;
        --info-color: #17a2b8;
        --warning-color: #ffc107;
        --danger-color: #dc3545;
        --light-color: #f8f9fa;
        --dark-color: #343a40;
        --sidebar-width: 320px;
        --nav-width: 260px;
        --header-height: 70px;
        --footer-height: 40px;
    --border-radius: 12px;
    --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        --transition: all 0.3s ease;
    }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: #f5f7fa;
            color: #333;
            font-size: 14px;
            line-height: 1.4;
            overflow-x: hidden;
        }

        /* Header */
        .header {
            background-color: #fff;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: var(--header-height);
            z-index: 1000;
            display: flex;
            align-items: center;
            padding: 0 20px;
        }

        .logo {
            display: flex;
            align-items: center;
            font-weight: 700;
            font-size: 20px;
            color: var(--primary-color);
            text-decoration: none;
        }

        .logo i {
            font-size: 24px;
            margin-right: 10px;
        }

        .header-actions {
            margin-left: auto;
            display: flex;
            align-items: center;
        }

        .mobile-menu-toggle {
            display: none;
            background: none;
            border: none;
            font-size: 24px;
            color: var(--primary-color);
            margin-right: 15px;
            cursor: pointer;
        }

        /* User Dropdown */
        .user-dropdown {
            position: relative;
        }

        .user-profile {
            display: flex;
            align-items: center;
            cursor: pointer;
            padding: 5px 10px;
            border-radius: var(--border-radius);
            transition: var(--transition);
        }

        .user-profile:hover {
            background-color: #f8f9fa;
        }

        .user-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: var(--primary-color);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            margin-right: 10px;
        }

        .user-name {
            font-weight: 500;
            margin-right: 5px;
        }

        .dropdown-arrow {
            font-size: 12px;
            color: #666;
            transition: var(--transition);
        }

        .user-dropdown.show .dropdown-arrow {
            transform: rotate(180deg);
        }

        .user-dropdown-menu {
            position: absolute;
            top: 100%;
            right: 0;
            background-color: #fff;
            border-radius: var(--border-radius);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            min-width: 180px;
            padding: 8px 0;
            margin-top: 5px;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: var(--transition);
            z-index: 1001;
        }

        .user-dropdown.show .user-dropdown-menu {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .dropdown-item {
            display: flex;
            align-items: center;
            padding: 10px 20px;
            color: #555;
            text-decoration: none;
            transition: var(--transition);
        }

        .dropdown-item:hover {
            background-color: #f8f9fa;
            color: var(--primary-color);
        }

        .dropdown-item i {
            margin-right: 10px;
            font-size: 16px;
        }

        .dropdown-divider {
            height: 1px;
            background-color: #eee;
            margin: 8px 0;
        }

        /* Main Layout */
        .main-container {
            display: flex;
            min-height: calc(100vh - var(--header-height));
            margin-top: var(--header-height);
        }

        /* Sidebar Navigation */
        .sidebar-nav {
            width: var(--nav-width);
            background-color: #fff;
            box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
            position: fixed;
            top: var(--header-height);
            left: 0;
            bottom: 0;
            z-index: 999;
            overflow-y: auto;
            transition: var(--transition);
        }

        .nav-section {
            padding: 15px 0;
        }

        .nav-section:last-child {
            padding-bottom: 20px;
        }

        .nav-title {
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: #999;
            padding: 0 20px;
            margin-bottom: 10px;
        }

        .nav-list {
            list-style: none;
        }

        .nav-item {
            margin-bottom: 5px;
        }

        .nav-link {
            display: flex;
            align-items: center;
            padding: 12px 20px;
            color: #555;
            text-decoration: none;
            font-weight: 500;
            transition: var(--transition);
            position: relative;
        }

        .nav-link i {
            font-size: 18px;
            margin-right: 12px;
            width: 20px;
            text-align: center;
        }

        .nav-link:hover {
            background-color: rgba(151, 124, 73, 0.05);
            color: var(--primary-color);
        }

        .nav-link.active {
            background-color: rgba(151, 124, 73, 0.1);
            color: var(--primary-color);
        }

        .nav-link.active::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background-color: var(--primary-color);
        }

        /* Content Wrapper */
        .content-wrapper {
            flex: 1;
            margin-left: var(--nav-width);
            display: flex;
            flex-direction: column;
            transition: var(--transition);
        }

        .content-header {
            background-color: #fff;
            padding: 20px 30px;
            border-bottom: 1px solid #eee;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .page-title {
            font-size: 24px;
            font-weight: 600;
            color: #333;
        }

        .breadcrumb {
            background-color: transparent;
            padding: 0;
            margin: 0;
            font-size: 13px;
        }

        .breadcrumb-item {
            color: #999;
        }

        .breadcrumb-item a {
            color: #999;
            text-decoration: none;
            transition: var(--transition);
        }

        .breadcrumb-item a:hover {
            color: var(--primary-color);
        }

        .breadcrumb-item.active {
            color: var(--primary-color);
        }

        .breadcrumb-item + .breadcrumb-item::before {
            content: "›";
            color: #ccc;
        }

        /* Main Content */
        .main-content {
            flex: 1;
            padding: 30px;
            overflow-y: auto;
        }

        /* Project Info Card */
        .project-info-card {
            background-color: #fff;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            margin-bottom: 30px;
            overflow: hidden;
        }

    .project-info-header {
        background-color: var(--primary-color);
        color: white;
        padding: 15px 20px;
        font-weight: 600;
        font-size: 18px;
    }

    .project-info-body {
        padding: 30px;
        display: flex;
        align-items: center;
    }

        .project-name {
            font-size: 16px;
            font-weight: 500;
        }

        .project-id {
            margin-left: auto;
            background-color: var(--primary-light);
            color: var(--primary-color);
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
        }

        /* Alert Styles */
        .alert {
            border-radius: var(--border-radius);
            padding: 15px 20px;
            margin-bottom: 20px;
            border: none;
            display: flex;
            align-items: center;
        }
    
        .alert i {
            margin-right: 10px;
            font-size: 16px;
        }
    
        .alert-success {
            background-color: rgba(40, 167, 69, 0.1);
            color: var(--success-color);
            border-left: 4px solid var(--success-color);
        }

        /* Form Controls */
        .form-control, .form-select {
            border: 2px solid #e9ecef;
            border-radius: var(--border-radius);
            padding: 12px 16px;
            font-size: 14px;
            transition: var(--transition);
            background: #fff;
        }

        .form-control:focus, .form-select:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 4px rgba(151, 124, 73, 0.1);
            outline: none;
        }

        .form-label {
            font-weight: 600;
            color: var(--dark-color);
            margin-bottom: 10px;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .form-label i {
            color: var(--primary-color);
            font-size: 16px;
        }

        /* Button Styles - Matching Reference */
    .btn {
        border-radius: var(--border-radius);
        font-weight: 600;
        padding: 12px 24px;
        font-size: 14px;
        transition: var(--transition);
        cursor: pointer;
        border: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

        .btn-primary {
            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
            color: white;
            box-shadow: 0 4px 12px rgba(151, 124, 73, 0.3);
        }

        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(151, 124, 73, 0.4);
        }

        .btn-primary:active {
            transform: translateY(-1px);
        }

        .btn-primary:disabled {
            background: #ccc;
            box-shadow: none;
            cursor: not-allowed;
            transform: none;
        }

        .btn-light {
            background: linear-gradient(135deg, #f8f9fa, #e9ecef);
            color: var(--dark-color);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .btn-light:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
        }

        /* Compact Upload Section */
        .upload-section {
            background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            padding: 15px 20px;
            margin-bottom: 25px;
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .upload-area {
            border: 2px dashed #ddd;
            border-radius: var(--border-radius);
            padding: 15px 25px;
            transition: var(--transition);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 15px;
            flex: 1;
            max-width: 400px;
        }

        .upload-area:hover {
            border-color: var(--primary-color);
            background-color: var(--primary-light);
        }

        .upload-area i {
            font-size: 32px;
            color: var(--primary-color);
        }

        .upload-text {
            font-size: 15px;
            font-weight: 600;
            color: #333;
        }

        .upload-subtext {
            font-size: 13px;
            color: #666;
            margin-top: 3px;
        }

        /* Content Grid */
        .content-grid {
            display: flex;
            flex-direction: column;
            gap: 25px;
        }

        /* Image Panel */
        .image-panel {
            background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            min-height: 500px;
        }

        .image-header {
            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
            color: white;
            padding: 20px 30px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .image-title {
            font-size: 18px;
            font-weight: 600;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .image-body {
            padding: 30px;
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            overflow: auto;
        }

        .canvas-container {
            position: relative;
            display: inline-block;
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        #myCanvas {
            display: block;
            border-radius: var(--border-radius);
            cursor: crosshair;
            max-width: 100%;
            height: 480px;
            min-width: 500px;
        }

        .pin {
            position: absolute;
            width: 24px;
            height: 24px;
            background: linear-gradient(135deg, var(--danger-color), #c82333);
            border: 3px solid #fff;
            border-radius: 50%;
            transform: translate(-50%, -100%);
            cursor: pointer;
            transition: var(--transition);
            box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
            z-index: 10;
        }

        .pin:hover {
            transform: translate(-50%, -100%) scale(1.2);
            box-shadow: 0 6px 12px rgba(220, 53, 69, 0.4);
        }

        .pin.active {
            background: linear-gradient(135deg, var(--success-color), #218838);
            transform: translate(-50%, -100%) scale(1.3);
            box-shadow: 0 6px 12px rgba(40, 167, 69, 0.4);
        }

        .comment-box {
            position: absolute;
            background: #fff;
            border: 2px solid var(--primary-color);
            border-radius: var(--border-radius);
            padding: 15px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
            z-index: 20;
            min-width: 280px;
        }

        .comment-box textarea {
            width: 100%;
            resize: none;
            border: 1px solid #e9ecef;
            border-radius: 8px;
            padding: 10px;
            font-size: 14px;
            margin-bottom: 12px;
            transition: var(--transition);
        }

        .comment-box textarea:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(151, 124, 73, 0.1);
            outline: none;
        }

        .comment-box-actions {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .btn-secondary {
            background: linear-gradient(135deg, #6c757d, #5a6268);
            color: white;
        }

        .btn-secondary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(108, 117, 125, 0.3);
        }

        /* Comments Panel */
        .comments-panel {
            background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .comments-header {
            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
            color: white;
            padding: 20px 30px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .comments-title {
            font-size: 18px;
            font-weight: 600;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .comments-count {
            background: rgba(255, 255, 255, 0.2);
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 14px;
        }

        .comments-body {
            padding: 30px;
            flex: 1;
            overflow-y: auto;
        }

        .comment-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .comment-item {
            background: #fff;
            border-radius: var(--border-radius);
            padding: 15px;
            margin-bottom: 15px;
            border: 2px solid transparent;
            transition: var(--transition);
            cursor: pointer;
            position: relative;
        }

        .comment-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: linear-gradient(180deg, var(--primary-color), var(--primary-dark));
            border-radius: 2px 0 0 2px;
            opacity: 0;
            transition: var(--transition);
        }

        .comment-item:hover {
            transform: translateX(5px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
            border-color: var(--primary-light);
        }

        .comment-item:hover::before {
            opacity: 1;
        }

        .comment-item.active {
            background: var(--primary-light);
            border-color: var(--primary-color);
        }

        .comment-number {
            font-weight: 600;
            color: var(--primary-color);
            margin-bottom: 8px;
            font-size: 16px;
        }

        .comment-text {
            margin-bottom: 10px;
            line-height: 1.5;
        }

        .comment-actions {
            display: flex;
            gap: 8px;
            margin-top: 10px;
        }

        .comment-actions button {
            padding: 6px 12px;
            border-radius: 6px;
            border: none;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .btn-edit {
            background: linear-gradient(135deg, #ffc107, #e0a800);
            color: white;
        }

        .btn-edit:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(255, 193, 7, 0.3);
        }

        .btn-delete {
            background: linear-gradient(135deg, var(--danger-color), #c82333);
            color: white;
        }

        .btn-delete:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
        }

        /* Empty State */
        .empty-state {
            text-align: center;
            padding: 40px 20px;
            color: #999;
        }

        .empty-state i {
            font-size: 48px;
            margin-bottom: 15px;
            color: #ddd;
        }

        .empty-state h3 {
            font-size: 18px;
            margin-bottom: 10px;
            color: #666;
        }

        .empty-state p {
            margin: 0;
            font-size: 14px;
        }

        /* Alert Fixed */
        .alert-fixed {
            position: fixed;
            top: 90px;
            right: 30px;
            z-index: 1050;
            min-width: 300px;
            opacity: 0;
            transform: translateX(100%);
            transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            border-radius: var(--border-radius);
            border: none;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }

        .alert-fixed.show {
            opacity: 1;
            transform: translateX(0);
        }

        /* Responsive */
        @media (max-width: 992px) {
            .content-grid {
                grid-template-columns: 1fr;
            }
            
            .upload-section {
                flex-direction: column;
                text-align: center;
            }
            
            .upload-area {
                max-width: 100%;
            }
        }

        @media (max-width: 768px) {
            .mobile-menu-toggle {
                display: block;
            }
            
            .sidebar-nav {
                transform: translateX(-100%);
                width: 280px;
                z-index: 1001;
            }
            
            .sidebar-nav.show {
                transform: translateX(0);
            }
            
            .content-wrapper {
                margin-left: 0;
            }

            .overlay {
                z-index: 1000;
            }

            .overlay.show {
                display: block;
            }

            .content-header {
                padding: 15px 20px;
                flex-direction: column;
                align-items: flex-start;
            }

            .page-title {
                font-size: 20px;
                margin-bottom: 10px;
            }

            .main-content {
                padding: 20px;
            }

            .header {
                padding: 0 15px;
            }

            .logo {
                font-size: 18px;
            }

            .logo i {
                font-size: 20px;
            }

            .user-name {
                display: none;
            }

            .user-avatar {
                width: 32px;
                height: 32px;
                font-size: 14px;
            }
        }

        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        ::-webkit-scrollbar-thumb {
            background: #ddd;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #ccc;
        }

        /* Overlay for mobile menu */
        .overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 998;
        }

        .overlay.show {
            display: block;
        }
    </style>
</head>
<body>
    <!-- Header -->
    <header class="header">
        <button class="mobile-menu-toggle" id="mobileMenuToggle">
            <i class="bi bi-list"></i>
        </button>
        <a href="crmdashboard" class="logo">
            <img src="./assets/logo.png" alt="ConstructCRM Logo" style="height: 60px; width: 85px;">
        </a>
        <div class="header-actions">
            <!-- User Dropdown -->
            <div class="user-dropdown" id="userDropdown">
                <div class="user-profile" id="userProfile">
                    <div class="user-avatar"><?php echo strtoupper(substr($_SESSION['user_name'] ?? 'U', 0, 1)); ?></div>
                    <span class="user-name"><?php echo htmlspecialchars($_SESSION['user_name'] ?? 'User'); ?></span>
                    <i class="bi bi-chevron-down dropdown-arrow"></i>
                </div>
                <div class="user-dropdown-menu">
                    <a href="profile" class="dropdown-item">
                        <i class="bi bi-person"></i>
                        <span>Profile</span>
                    </a>
                    <a href="settings" class="dropdown-item">
                        <i class="bi bi-gear"></i>
                        <span>Settings</span>
                    </a>
                    <div class="dropdown-divider"></div>
                    <a href="signin?logout=true" class="dropdown-item">
                        <i class="bi bi-box-arrow-right"></i>
                        <span>Logout</span>
                    </a>
                </div>
            </div>
        </div>
    </header>

    <div class="main-container">
        
        <!-- Overlay for mobile -->
        <div class="overlay" id="overlay"></div>

        <!-- Sidebar Navigation -->
        <nav class="sidebar-nav" id="sidebarNav">
            <div class="nav-section">
                <div class="nav-title">Main</div>
                <ul class="nav-list">
                    <?php if (($_SESSION['user_role'] ?? '') === 'Admin'): ?>
                    <li class="nav-item">
                        <a href="crmdashboard" class="nav-link">
                            <i class="bi bi-speedometer2"></i>
                            <span>Dashboard</span>
                        </a>
                    </li>
                    <?php endif; ?>
                    <li class="nav-item">
                        <a href="dashboard" class="nav-link">
                            <i class="bi bi-grid-1x2-fill"></i>
                            <span>Client</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="projectlist" class="nav-link">
                            <i class="bi bi-list-ul"></i>
                            <span>Project List</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="designimages" class="nav-link">
                            <i class="bi bi-palette-fill"></i>
                            <span>Design images</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="assignmentcalendar" class="nav-link">
                            <i class="bi bi-calendar-event-fill"></i>
                            <span>Assignment Calendar</span>
                        </a>
                    </li>
                    <?php if (($_SESSION['user_role'] ?? '') === 'Admin'): ?>
                    <li class="nav-item">
                        <a href="<?= BASE_URL ?>place_order" class="nav-link">
                            <i class="bi bi-cart-check"></i> 
                            <span>Place Order</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="financetracker" class="nav-link">
                            <i class="bi bi-cash-stack"></i>
                            <span>Finance Tracker</span>
                        </a>
                    </li>
                    <?php endif; ?>
                    <li class="nav-item">
                        <a href="imagepin" class="nav-link active">
                            <i class="bi bi-pin-map-fill"></i>
                            <span>Image Pin & Comment</span>
                        </a>
                    </li>
                    <?php if (($_SESSION['user_role'] ?? '') === 'Admin'): ?>
                    <li class="nav-item">
                        <a href="designcost" class="nav-link">
                            <i class="bi bi-palette-fill"></i>
                            <span>Designs Cost</span>
                        </a>
                    </li>
                    <?php endif; ?>
                </ul>
            </div>
            
            <div class="nav-section">
                <div class="nav-title">Management</div>
                <ul class="nav-list">
                    <li class="nav-item">
                        <a href="taskmanager" class="nav-link">
                            <i class="bi bi-check2-square"></i>
                            <span>Task Manager</span>
                        </a>
                    </li>
                    <?php if (($_SESSION['user_role'] ?? '') === 'Admin'): ?>
                    <li class="nav-item">
                        <a href="users" class="nav-link">
                            <i class="bi bi-people-fill"></i>
                            <span>Users</span>
                        </a>
                    </li>
                    <?php endif; ?>
                </ul>
            </div>
            
            <?php if (($_SESSION['user_role'] ?? '') === 'Admin'): ?>
            <div class="nav-section">
                <div class="nav-title">Vendor Management</div>
                <ul class="nav-list">
                    <li class="nav-item">
                        <a href="addvendors" class="nav-link">
                            <i class="bi bi-person-plus-fill"></i>
                            <span>Add New Vendor</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="viewvendors" class="nav-link">
                            <i class="bi bi-card-list"></i>
                            <span>View All Vendors</span>
                        </a>
                    </li>
                </ul>
            </div>
            <?php endif; ?>
        </nav>

        <!-- Content Wrapper -->
        <div class="content-wrapper">
            <!-- Content Header -->
            <div class="content-header">
                <h1 class="page-title">Image Pin & Comment</h1>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item"><a href="#">Management</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Image Pin & Comment</li>
                    </ol>
                </nav>
            </div>

            <!-- Main Content -->
            <div class="main-content">

                <!-- Project Selection -->
                <div class="project-info-card">
                    <div class="project-info-header">
                        <i class="bi bi-folder"></i> Select Project
                    </div>
                    <div class="project-info-body">
                        <div class="row align-items-center">
                            <div class="col-md-8">
                                <label for="projectSelect" class="form-label">Choose Project:</label>
                                <select class="form-select" id="projectSelect" name="projectSelect">
                                    <option value="" selected disabled>Select a project...</option>
                                    <?php foreach ($projects as $project): ?>
                                        <option value="<?php echo $project['id']; ?>"><?php echo htmlspecialchars($project['project_name'] . ' - ' . $project['client_name']); ?></option>
                                    <?php endforeach; ?>
                                </select>
                            </div>
                            <div class="col-md-4 text-end">
                                <button class="btn btn-primary" id="loadProjectBtn" disabled style="width: 200px;margin-top: 26px;">
                                    <i class="bi bi-arrow-right-circle"></i> Load Project
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Project Info Card -->
                <div class="project-info-card" id="selectedProjectInfo" style="display: none;">
                    <div class="project-info-header">
                        Project Information
                    </div>
                    <div class="project-info-body">
                        <div class="project-name">My Sample Project</div>
                        <div class="project-id">PRJ-001</div>
                    </div>
                </div>

                <!-- Content Grid: Image Full Width, Comments Below -->
                <div class="content-grid">
                    <!-- Image Panel -->
                    <div class="image-panel">
                        <div class="image-header">
                            <h4 class="image-title">
                                <i class="bi bi-image"></i>
                                Project Image
                            </h4>
                            <button class="btn btn-light" id="clearPinsBtn">
                                <i class="bi bi-arrow-clockwise"></i>
                                Clear All Pins
                            </button>
                        </div>
                        <div class="image-body">
                            <div class="canvas-container">
                                <canvas id="myCanvas" width="800" height="500"></canvas>
                            </div>
                        </div>
                    </div>

                    <!-- Comments Panel -->
                    <div class="comments-panel">
                        <div class="comments-header">
                            <h4 class="comments-title">
                                <i class="bi bi-chat-dots"></i>
                                Comments
                            </h4>
                            <span class="comments-count" id="commentsCount">0</span>
                        </div>
                        <div class="comments-body">
                            <ul class="comment-list" id="commentList">
                                <div class="empty-state">
                                    <i class="bi bi-chat-left-dots"></i>
                                    <h3>No Comments Yet</h3>
                                    <p>Click on the image to add your first comment pin</p>
                                </div>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Status Message -->
    <div id="top-status-message" class="alert-fixed alert d-none" role="alert"></div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

    <script>
        // Canvas and context
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');
        let currentImage = null;
        let currentImageId = null;
        let pins = [];
        let pinIdCounter = 1;
        let activePin = null;
        let isPlacingPin = false;

        // Initialize with a default image
        function initializeCanvas() {
            // Create a default gradient background
            const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
            gradient.addColorStop(0, '#f8f9fa');
            gradient.addColorStop(1, '#e9ecef');
            ctx.fillStyle = gradient;
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            // Add placeholder text
            ctx.fillStyle = '#999';
            ctx.font = '24px Arial';
            ctx.textAlign = 'center';
            ctx.fillText('Select a project to load final image', canvas.width / 2, canvas.height / 2);
        }

        // Initialize canvas on load
        initializeCanvas();

        // Project selection functionality
        const projectSelect = document.getElementById('projectSelect');
        const loadProjectBtn = document.getElementById('loadProjectBtn');
        const selectedProjectInfo = document.getElementById('selectedProjectInfo');

        // Enable/disable load button based on selection
        projectSelect.addEventListener('change', () => {
            loadProjectBtn.disabled = !projectSelect.value;
        });

        // Handle project loading
        loadProjectBtn.addEventListener('click', () => {
            const selectedValue = projectSelect.value;
            if (selectedValue) {
                // Set project in session via AJAX
                fetch('imagepin.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: 'set_project=1&project_id=' + encodeURIComponent(selectedValue)
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Update project info display
                        const projectNameEl = selectedProjectInfo.querySelector('.project-name');
                        const projectIdEl = selectedProjectInfo.querySelector('.project-id');

                        // Get project name from select option
                        const selectedOption = projectSelect.options[projectSelect.selectedIndex];
                        projectNameEl.textContent = selectedOption.text;
                        projectIdEl.textContent = 'PRJ-' + selectedValue.padStart(3, '0');

                        // Show project info card
                        selectedProjectInfo.style.display = 'block';

                        // Load final image and pins
                        loadFinalImage();

                        // Show success message
                        const tempMessage = document.createElement('div');
                        tempMessage.className = 'alert alert-success mt-3';
                        tempMessage.innerHTML = `<i class="bi bi-check-circle"></i> Project loaded successfully!`;
                        selectedProjectInfo.parentNode.insertBefore(tempMessage, selectedProjectInfo.nextSibling);

                        // Remove message after 3 seconds
                        setTimeout(() => {
                            if (tempMessage.parentNode) {
                                tempMessage.parentNode.removeChild(tempMessage);
                            }
                        }, 3000);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Error loading project. Please try again.');
                });
            }
        });

        // Load final image from selected project
        function loadFinalImage() {
            fetch('imagepin.php?fetch_final_image=1')
            .then(response => response.json())
            .then(data => {
                if (data && data.id) {
                    // Load the image
                    const img = new Image();
                    img.onload = function() {
                        // Set canvas size to image size
                        canvas.width = img.width;
                        canvas.height = img.height;
                        ctx.drawImage(img, 0, 0);
                        currentImage = img;
                        currentImageId = data.id;

                        // Clear existing pins
                        clearAllPins();

                        // Load existing pins for this image
                        loadPins(data.id);

                        // Show success message
                        showStatusMessage('Final image loaded successfully!', 'success');
                    };
                    img.src = data.file_path + '?t=' + new Date().getTime();
                } else {
                    // No final image found
                    initializeCanvas();
                    showStatusMessage('No final image found for this project.', 'warning');
                }
            })
            .catch(error => {
                console.error('Error loading final image:', error);
                showStatusMessage('Error loading final image.', 'danger');
            });
        }

        // Load pins for the current image
        function loadPins(imageId) {
            fetch('imagepin.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: 'action=load_pins&design_image_id=' + encodeURIComponent(imageId)
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Clear existing pins
                    clearAllPins();

                    // Add loaded pins
                    data.pins.forEach(pinData => {
                        const x = pinData.x_position * canvas.width;
                        const y = pinData.y_position * canvas.height;

                        // Create pin element
                        const pin = document.createElement('div');
                        pin.className = 'pin';
                        pin.style.left = x + 'px';
                        pin.style.top = y + 'px';
                        pin.dataset.pinId = pinData.id;
                        pin.title = pinData.comment_text;

                        // Add to canvas container
                        canvas.parentElement.appendChild(pin);

                        // Add to pins array
                        pins.push({
                            id: pinData.id,
                            x: pinData.x_position,
                            y: pinData.y_position,
                            comment: pinData.comment_text,
                            element: pin
                        });

                        // Add to comments list
                        addCommentToList({
                            id: pinData.id,
                            comment: pinData.comment_text
                        });
                    });

                    // Update comments count
                    updateCommentsCount();
                }
            })
            .catch(error => {
                console.error('Error loading pins:', error);
            });
        }

        // Canvas click event for placing pins
        canvas.addEventListener('click', (e) => {
            if (!currentImage) {
                showStatusMessage('Please upload an image first!', 'warning');
                return;
            }

            const rect = canvas.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;

            // Check if clicking on existing pin
            const clickedPin = getPinAtPosition(x, y);
            if (clickedPin) {
                // Show comment for this pin
                highlightComment(clickedPin.id);
                return;
            }

            // Place new pin
            placePin(x, y);
        });

        function placePin(x, y) {
            // Create pin element
            const pin = document.createElement('div');
            pin.className = 'pin';
            pin.style.left = x + 'px';
            pin.style.top = y + 'px';
            pin.dataset.pinId = pinIdCounter++;
            
            // Add to canvas container
            canvas.parentElement.appendChild(pin);
            
            // Show comment box
            showCommentBox(x, y, pin);
        }

        function showCommentBox(x, y, pinElement) {
            // Remove existing comment box if any
            const existingBox = document.querySelector('.comment-box');
            if (existingBox) {
                existingBox.remove();
            }

            // Create comment box
            const commentBox = document.createElement('div');
            commentBox.className = 'comment-box';
            commentBox.style.left = (x + 20) + 'px';
            commentBox.style.top = (y - 100) + 'px';
            
            commentBox.innerHTML = `
                <textarea placeholder="Enter your comment here..." rows="3"></textarea>
                <div class="comment-box-actions">
                    <button class="btn btn-secondary btn-sm" id="cancelComment">Cancel</button>
                    <button class="btn btn-primary btn-sm" id="saveComment">Save</button>
                </div>
            `;
            
            canvas.parentElement.appendChild(commentBox);
            
            // Focus on textarea
            const textarea = commentBox.querySelector('textarea');
            textarea.focus();
            
            // Save comment
            const saveBtn = commentBox.querySelector('#saveComment');
            saveBtn.addEventListener('click', () => {
                const comment = textarea.value.trim();
                if (comment) {
                    // Disable save button to prevent double submission
                    saveBtn.disabled = true;
                    saveBtn.textContent = 'Saving...';

                    // Send data to server
                    fetch('imagepin.php', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                        },
                        body: 'action=save_pin&design_image_id=' + encodeURIComponent(currentImageId) +
                              '&x_position=' + encodeURIComponent(x / canvas.width) +
                              '&y_position=' + encodeURIComponent(y / canvas.height) +
                              '&comment_text=' + encodeURIComponent(comment)
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            // Update pin element with database ID
                            pinElement.dataset.pinId = data.pin_id;

                            // Save pin data locally
                            const pinData = {
                                id: data.pin_id,
                                x: x / canvas.width,
                                y: y / canvas.height,
                                comment: comment,
                                element: pinElement
                            };

                            pins.push(pinData);

                            // Set pin tooltip
                            pinElement.title = comment;

                            // Add to comments list
                            addCommentToList(pinData);

                            // Update count
                            updateCommentsCount();

                            // Remove comment box
                            commentBox.remove();

                            // Show success message
                            showStatusMessage('Comment added successfully!', 'success');
                        } else {
                            showStatusMessage('Failed to save comment. Please try again.', 'danger');
                            saveBtn.disabled = false;
                            saveBtn.textContent = 'Save';
                        }
                    })
                    .catch(error => {
                        console.error('Error saving pin:', error);
                        showStatusMessage('Error saving comment. Please try again.', 'danger');
                        saveBtn.disabled = false;
                        saveBtn.textContent = 'Save';
                    });
                } else {
                    showStatusMessage('Please enter a comment!', 'warning');
                }
            });
            
            // Cancel comment
            const cancelBtn = commentBox.querySelector('#cancelComment');
            cancelBtn.addEventListener('click', () => {
                commentBox.remove();
                pinElement.remove();
            });
        }

        function addCommentToList(pinData) {
            const commentList = document.getElementById('commentList');
            
            // Remove empty state if exists
            const emptyState = commentList.querySelector('.empty-state');
            if (emptyState) {
                emptyState.remove();
            }
            
            // Create comment item
            const commentItem = document.createElement('li');
            commentItem.className = 'comment-item';
            commentItem.dataset.commentId = pinData.id;
            
            commentItem.innerHTML = `
                <div class="comment-number">Pin #${pinData.id}</div>
                <div class="comment-text">${pinData.comment}</div>
                <div class="comment-actions">
                    <button class="btn-edit" onclick="editComment(${pinData.id})">
                        <i class="bi bi-pencil"></i> Edit
                    </button>
                    <button class="btn-delete" onclick="deleteComment(${pinData.id})">
                        <i class="bi bi-trash"></i> Delete
                    </button>
                </div>
            `;
            
            // Add click event to highlight pin
            commentItem.addEventListener('click', () => {
                highlightPin(pinData.id);
            });
            
            commentList.appendChild(commentItem);
        }

        function highlightPin(pinId) {
            // Remove active class from all pins
            document.querySelectorAll('.pin').forEach(p => p.classList.remove('active'));
            
            // Find and highlight the pin
            const pin = pins.find(p => p.id == pinId);
            if (pin && pin.element) {
                pin.element.classList.add('active');
                setTimeout(() => {
                    pin.element.classList.remove('active');
                }, 2000);
            }
        }

        function highlightComment(commentId) {
            // Remove active class from all comments
            document.querySelectorAll('.comment-item').forEach(c => c.classList.remove('active'));
            
            // Find and highlight the comment
            const comment = document.querySelector(`[data-comment-id="${commentId}"]`);
            if (comment) {
                comment.classList.add('active');
                comment.scrollIntoView({ behavior: 'smooth', block: 'center' });
                setTimeout(() => {
                    comment.classList.remove('active');
                }, 2000);
            }
        }

        function editComment(pinId) {
            const pin = pins.find(p => p.id == pinId);
            if (pin) {
                // Create edit dialog
                const newComment = prompt('Edit your comment:', pin.comment);
                if (newComment && newComment.trim()) {
                    // Send update to server
                    fetch('imagepin.php', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                        },
                        body: 'action=update_pin&pin_id=' + encodeURIComponent(pinId) +
                              '&comment_text=' + encodeURIComponent(newComment.trim())
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            pin.comment = newComment.trim();
                            pin.element.title = newComment.trim();

                            // Update comment in list
                            const commentItem = document.querySelector(`[data-comment-id="${pinId}"]`);
                            if (commentItem) {
                                commentItem.querySelector('.comment-text').textContent = newComment.trim();
                            }

                            showStatusMessage('Comment updated successfully!', 'success');
                        } else {
                            showStatusMessage('Failed to update comment. Please try again.', 'danger');
                        }
                    })
                    .catch(error => {
                        console.error('Error updating pin:', error);
                        showStatusMessage('Error updating comment. Please try again.', 'danger');
                    });
                }
            }
        }

        function deleteComment(pinId) {
            if (confirm('Are you sure you want to delete this comment?')) {
                const pinIndex = pins.findIndex(p => p.id == pinId);
                if (pinIndex > -1) {
                    const pin = pins[pinIndex];
                    
                    // Remove pin element
                    if (pin.element) {
                        pin.element.remove();
                    }
                    
                    // Remove from array
                    pins.splice(pinIndex, 1);
                    
                    // Remove from list
                    const commentItem = document.querySelector(`[data-comment-id="${pinId}"]`);
                    if (commentItem) {
                        commentItem.remove();
                    }
                    
                    // Update count
                    updateCommentsCount();
                    
                    // Show empty state if no comments
                    if (pins.length === 0) {
                        showEmptyState();
                    }
                    
                    showStatusMessage('Comment deleted successfully!', 'success');
                }
            }
        }

        function getPinAtPosition(x, y) {
            const pinElements = document.querySelectorAll('.pin');
            for (let pin of pinElements) {
                const rect = pin.getBoundingClientRect();
                const canvasRect = canvas.getBoundingClientRect();
                const pinX = rect.left - canvasRect.left + rect.width / 2;
                const pinY = rect.top - canvasRect.top + rect.height / 2;
                
                const distance = Math.sqrt(Math.pow(x - pinX, 2) + Math.pow(y - pinY, 2));
                if (distance < 20) {
                    return pins.find(p => p.element === pin);
                }
            }
            return null;
        }

        function clearAllPins() {
            // Remove all pin elements
            document.querySelectorAll('.pin').forEach(pin => pin.remove());
            
            // Clear pins array
            pins = [];
            
            // Clear comments list
            const commentList = document.getElementById('commentList');
            commentList.innerHTML = '';
            
            // Show empty state
            showEmptyState();
            
            // Update count
            updateCommentsCount();
        }

        function showEmptyState() {
            const commentList = document.getElementById('commentList');
            commentList.innerHTML = `
                <div class="empty-state">
                    <i class="bi bi-chat-left-dots"></i>
                    <h3>No Comments Yet</h3>
                    <p>Click on the image to add your first comment pin</p>
                </div>
            `;
        }

        function updateCommentsCount() {
            document.getElementById('commentsCount').textContent = pins.length;
        }

        function showStatusMessage(message, type) {
            const alertElement = document.getElementById('top-status-message');
            alertElement.className = `alert-fixed alert alert-${type}`;
            alertElement.innerHTML = `
                <i class="bi bi-${type === 'success' ? 'check-circle' : 'exclamation-triangle'}"></i>
                ${message}
            `;
            alertElement.classList.remove('d-none');
            alertElement.classList.add('show');
            
            setTimeout(() => {
                alertElement.classList.remove('show');
                setTimeout(() => {
                    alertElement.classList.add('d-none');
                }, 500);
            }, 3000);
        }

        // Clear all pins button
        document.getElementById('clearPinsBtn').addEventListener('click', () => {
            if (pins.length > 0 && confirm('Are you sure you want to clear all pins?')) {
                clearAllPins();
                showStatusMessage('All pins cleared!', 'success');
            }
        });

        // Mobile menu toggle
        document.getElementById('mobileMenuToggle').addEventListener('click', () => {
            document.getElementById('sidebarNav').classList.toggle('show');
            document.getElementById('overlay').classList.toggle('show');
        });

        document.getElementById('overlay').addEventListener('click', () => {
            document.getElementById('sidebarNav').classList.remove('show');
            document.getElementById('overlay').classList.remove('show');
        });

        // User dropdown toggle
        document.getElementById('userProfile').addEventListener('click', (e) => {
            e.stopPropagation();
            document.getElementById('userDropdown').classList.toggle('show');
        });

        document.addEventListener('click', () => {
            document.getElementById('userDropdown').classList.remove('show');
        });

        // Make editComment and deleteComment globally accessible
        window.editComment = editComment;
        window.deleteComment = deleteComment;
    </script>
</body>
</html>