Enhanced PHP File Manager

⬆️ Go Up (..)

📊 Server Information

Server:

LiteSpeed

System:

Linux 5.14.0-503.34.1.el9_5.x86_64

PHP Version:

8.3.30

User:

u231988116

Directory:

/home/u231988116/domains/ominteriorstudio.in/public_html/crm

Free Space:

7.42 TB

🔧 Quick Actions

✏️ Editing: imagepin.php

<?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>

* {
            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 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">
            
            <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>

<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>

<div class="content-wrapper">
            
            <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>

<div class="main-content">

<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>

<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>

<div class="content-grid">
                    
                    <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>

<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>

<div id="top-status-message" class="alert-fixed alert d-none" role="alert"></div>

// 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 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 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;
        }

// 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>

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: imagepin.php

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation