<?php
session_start();
require_once 'db.php';

// Check if user is logged in
if (!isset($_SESSION['user_id'])) {
    header('Location: signin');
    exit();
}

// Verify role-based access
checkAccess();

$user_id = $_SESSION['user_id'];
$user_name = $_SESSION['user_name'] ?? 'User';
$user_email = $_SESSION['user_email'] ?? '';

// Handle form submission and AJAX requests
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    header('Content-Type: application/json');

    try {
        $action = $_POST['action'] ?? '';

        if ($action === 'add' || $action === 'update') {
            $assignment_id = $_POST['assignment_id'] ?? '';
            $person = trim($_POST['person'] ?? '');
            $mobile = trim($_POST['mobile'] ?? '');
            $project = trim($_POST['project'] ?? '');
            $date = $_POST['date'] ?? '';
            $notes = $_POST['notes_html'] ?? '';

            // Validate required fields
            if (empty($person) || empty($project) || empty($date)) {
                throw new Exception("All fields are required");
            }

            if ($assignment_id) {
                // Update existing assignment
                $stmt = mysqli_prepare($conn,
                    "UPDATE assignments SET person=?, mobile=?, project=?, assignment_date=?, notes=? WHERE id=?"
                );
                if (!$stmt) {
                    throw new Exception("Prepare failed: " . mysqli_error($conn));
                }
                mysqli_stmt_bind_param($stmt, "sssssi", $person, $mobile, $project, $date, $notes, $assignment_id);
                if (!mysqli_stmt_execute($stmt)) {
                    throw new Exception("Update failed: " . mysqli_stmt_error($stmt));
                }
                mysqli_stmt_close($stmt);

                echo json_encode(['success' => true, 'id' => $assignment_id, 'message' => 'Assignment updated successfully']);
            } else {
                // Insert new assignment
                $stmt = mysqli_prepare($conn,
                    "INSERT INTO assignments (person, mobile, project, assignment_date, notes, created_by_user_id)
                     VALUES (?, ?, ?, ?, ?, ?)"
                );
                if (!$stmt) {
                    throw new Exception("Prepare failed: " . mysqli_error($conn));
                }
                mysqli_stmt_bind_param($stmt, "sssssi", $person, $mobile, $project, $date, $notes, $user_id);
                if (!mysqli_stmt_execute($stmt)) {
                    throw new Exception("Insert failed: " . mysqli_stmt_error($stmt));
                }
                $new_id = mysqli_insert_id($conn);
                mysqli_stmt_close($stmt);

                echo json_encode(['success' => true, 'id' => $new_id, 'message' => 'Assignment created successfully']);
            }

        } elseif ($action === 'delete') {
            $assignment_id = $_POST['assignment_id'] ?? '';

            if (empty($assignment_id)) {
                throw new Exception("Assignment ID is required");
            }

            // Check if assignment belongs to user
            $stmt = mysqli_prepare($conn,
                "SELECT id FROM assignments WHERE id = ?"
            );
            mysqli_stmt_bind_param($stmt, "i", $assignment_id);
            mysqli_stmt_execute($stmt);
            $result = mysqli_stmt_get_result($stmt);
            $assignment = mysqli_fetch_assoc($result);
            mysqli_stmt_close($stmt);

            if (!$assignment) {
                throw new Exception("Assignment not found or access denied");
            }

            // Delete assignment
            $stmt = mysqli_prepare($conn, "DELETE FROM assignments WHERE id = ?");
            if (!$stmt) {
                throw new Exception("Prepare failed: " . mysqli_error($conn));
            }
            mysqli_stmt_bind_param($stmt, "i", $assignment_id);
            if (!mysqli_stmt_execute($stmt)) {
                throw new Exception("Delete failed: " . mysqli_stmt_error($stmt));
            }
            mysqli_stmt_close($stmt);

            echo json_encode(['success' => true, 'message' => 'Assignment deleted successfully']);

        } else {
            throw new Exception("Invalid action");
        }

    } catch (Exception $e) {
        echo json_encode(['success' => false, 'message' => $e->getMessage()]);
    }

    exit();
}

// Fetch assignments from database
$current_assignments = [];
try {
    $stmt = mysqli_prepare($conn,
        "SELECT id, person, mobile, project, assignment_date as date, notes, created_at as date_added FROM assignments ORDER BY assignment_date DESC"
    );
    if (!$stmt) {
        throw new Exception("Prepare failed: " . mysqli_error($conn));
    }
    if (!mysqli_stmt_execute($stmt)) {
        throw new Exception("Execute failed: " . mysqli_stmt_error($stmt));
    }
    $result = mysqli_stmt_get_result($stmt);
    while ($row = mysqli_fetch_assoc($result)) {
        $current_assignments[] = $row;
    }
    mysqli_stmt_close($stmt);

} catch (Exception $e) {
    // Handle error silently - continue with empty assignments
    $current_assignments = [];
}

// Fetch projects for dropdown
$user_projects = [];
try {
    $stmt = mysqli_prepare($conn,
        "SELECT p.id, p.project_name, c.client_name
         FROM projects p
         JOIN clients c ON p.client_id = c.id
         ORDER BY p.project_name ASC"
    );
    if (!$stmt) {
        throw new Exception("Prepare failed: " . mysqli_error($conn));
    }
    if (!mysqli_stmt_execute($stmt)) {
        throw new Exception("Execute failed: " . mysqli_stmt_error($stmt));
    }
    $result = mysqli_stmt_get_result($stmt);
    while ($row = mysqli_fetch_assoc($result)) {
        $user_projects[] = $row;
    }
    mysqli_stmt_close($stmt);

} catch (Exception $e) {
    // Handle error silently - continue with empty projects
    $user_projects = [];
}

// Prepare assignments for FullCalendar
 $calendar_events = array_map(function($a) {
    return [
        'id'    => $a['id'],
        'title' => "{$a['project']} ({$a['person']})",
        'start' => $a['date'],
        'allDay'=> true,
        'className' => 'bg-info border-info'
    ];
}, $current_assignments);

 $calendar_events_json = json_encode($calendar_events);
 $current_assignments_json = json_encode($current_assignments); // Added for JS access

?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Assignment Calendar - ConstructCRM</title>
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.11/main.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.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 cubic-bezier(0.4, 0, 0.2, 1);
        --gradient-primary: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
        --gradient-light: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
        --shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
        --shadow-card: 0 4px 15px rgba(0, 0, 0, 0.08);
    }

    * {
        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;
        display: flex;
        padding: 30px;
        gap: 30px;
    }

    /* Calendar Container */
    .calendar-container {
        flex: 1;
        background-color: #fff;
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .calendar-header {
        background-color: var(--primary-color);
        color: white;
        padding: 20px 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .calendar-title {
        font-size: 18px;
        font-weight: 600;
        margin: 0;
    }

    .calendar-body {
        padding: 20px;
        flex: 1;
        overflow: auto;
    }

    /* Assignment Sidebar */
    .assignment-sidebar {
        width: var(--sidebar-width);
        background-color: #fff;
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .sidebar-header {
        padding: 20px;
        border-bottom: 1px solid #eee;
    }

    .sidebar-title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 15px;
        color: #333;
    }

    .assignment-list {
        flex: 1;
        overflow-y: auto;
        padding: 10px;
    }

    .assignment-item {
        padding: 15px;
        margin-bottom: 10px;
        border-radius: var(--border-radius);
        border: 1px solid #eee;
        cursor: pointer;
        transition: var(--transition);
    }

    .assignment-item:hover {
        border-color: var(--primary-color);
        box-shadow: 0 6px 15px rgba(151, 124, 73, 0.2) !important;
        transform: translateY(-2px);
        background-color: #faf8f5;
    }

    .assignment-item.active {
        background-color: rgba(151, 124, 73, 0.1);
        border-color: var(--primary-color);
    }

    .assignment-project {
        font-weight: 600;
        color: #333;
        margin-bottom: 5px;
    }

    .assignment-person {
        font-size: 13px;
        color: #666;
    }

    .assignment-mobile {
        font-size: 12px;
        color: #17a2b8;
        margin-top: 4px;
    }

    .assignment-mobile i {
        margin-right: 4px;
    }

    .assignment-meta {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        font-size: 12px;
        color: #999;
    }

    .assignment-status {
        padding: 3px 8px;
        border-radius: 12px;
        font-size: 11px;
        font-weight: 500;
        background-color: #f0f0f0;
    }

    .status-upcoming {
        background-color: #e3f2fd;
        color: #1976d2;
    }

    .status-today {
        background-color: #fff8e1;
        color: #ff8f00;
    }

    .status-overdue {
        background-color: #ffebee;
        color: #d32f2f;
    }

    /* 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 p {
        margin: 0;
    }

    /* Modal Styling */
    .modal-content {
        border-radius: var(--border-radius);
        border: none;
    }

    .modal-header {
        background-color: var(--primary-color);
        color: white;
        border-radius: var(--border-radius) var(--border-radius) 0 0;
    }

    .modal-title {
        font-weight: 600;
    }

    .btn-close-white {
        filter: invert(1);
    }

    .quill-container { 
        height: 150px; 
        border-radius: var(--border-radius);
    }

    .btn {
        border-radius: var(--border-radius);
        font-weight: 500;
        padding: 10px 20px;
        font-size: 14px;
        transition: var(--transition);
        cursor: pointer;
    }

    .btn-primary {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
    }

    .btn-primary:hover {
        background-color: var(--primary-dark);
        border-color: var(--primary-dark);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(151, 124, 73, 0.3);
    }

    .btn-danger {
        background-color: var(--danger-color);
        border-color: var(--danger-color);
    }

    .btn-danger:hover {
        background-color: #c82333;
        border-color: #bd2130;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
    }

    /* Enhanced Calendar Styling */
    #calendar {
        height: 70vh; 
        min-height: 500px;
    }

    /* Calendar Header */
    #calendar .fc-toolbar {
        margin-bottom: 20px !important;
    }

    #calendar .fc-toolbar-title {
        color: var(--primary-color) !important;
        font-weight: 700 !important;
        font-size: 24px !important;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    #calendar .fc-button-group {
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        border-radius: var(--border-radius) !important;
    }

    #calendar .fc-button-primary {
        background-color: #fff !important;
        color: var(--primary-color) !important;
        border: 1px solid var(--primary-color) !important;
        font-weight: 500 !important;
        padding: 8px 16px !important;
        transition: var(--transition) !important;
    }

    #calendar .fc-button-primary:hover {
        background-color: var(--primary-color) !important;
        color: #fff !important;
        transform: translateY(-1px);
        box-shadow: 0 3px 6px rgba(151, 124, 73, 0.2);
    }

    #calendar .fc-button-primary:not(:disabled):active, 
    #calendar .fc-button-primary:not(:disabled).fc-button-active {
        background-color: var(--primary-dark) !important;
        border-color: var(--primary-dark) !important;
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
    }

    /* Calendar Grid */
    #calendar .fc-daygrid {
        border-radius: var(--border-radius);
        overflow: hidden;
    }

    #calendar .fc-col-header {
        background-color: var(--primary-light);
    }

    #calendar .fc-col-header-cell {
        padding: 12px 8px !important;
        text-align: center;
        font-weight: 600;
        color: var(--primary-color);
        text-transform: uppercase;
        font-size: 13px;
        letter-spacing: 0.5px;
        border-right: 1px solid #e0e0e0;
    }

    #calendar .fc-col-header-cell:last-child {
        border-right: none;
    }

    /* Enhanced Date Cells */
    #calendar .fc-daygrid-day {
        border: 1px solid #f0f0f0;
        padding: 0;
        transition: var(--transition);
        position: relative;
    }

    #calendar .fc-daygrid-day:hover {
        background-color: rgba(151, 124, 73, 0.08) !important;
        box-shadow: inset 0 0 0 2px var(--primary-color) !important;
        transform: scale(1.02);
        z-index: 1;
    }

    /* Enhanced Date Numbers */
    #calendar .fc-daygrid-day-number {
        color: #333 !important;
        font-weight: 600 !important;
        font-size: 16px !important;
        padding: 12px !important;
        display: inline-block;
        width: 36px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        border-radius: 50%;
        transition: var(--transition);
        margin: 8px;
    }

    #calendar .fc-daygrid-day:hover .fc-daygrid-day-number {
        background-color: var(--primary-color) !important;
        color: white !important;
        transform: scale(1.15) !important;
        box-shadow: 0 4px 12px rgba(151, 124, 73, 0.4) !important;
        width: 36px !important;
        height: 36px !important;
        line-height: 36px !important;
        padding: 0 !important;
        margin: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Today's Date */
    #calendar .fc-day-today {
        background-color: rgba(151, 124, 73, 0.05) !important;
    }

    #calendar .fc-day-today .fc-daygrid-day-number {
        background-color: var(--primary-color) !important;
        color: white !important;
        box-shadow: 0 3px 8px rgba(151, 124, 73, 0.3);
        font-weight: 700 !important;
        padding: 0 !important;
    }

    /* Weekend Days */
    #calendar .fc-day-sat,
    #calendar .fc-day-sun {
        background-color: #fafafa;
    }

    #calendar .fc-day-sat .fc-daygrid-day-number,
    #calendar .fc-day-sun .fc-daygrid-day-number {
        color: #999 !important;
    }

    /* Other Month Days */
    #calendar .fc-day-other-month {
        background-color: #f8f8f8;
        opacity: 0.6;
    }

    #calendar .fc-day-other-month .fc-daygrid-day-number {
        color: #bbb !important;
        font-weight: 400 !important;
    }

    /* Events */
    #calendar .fc-event {
        border-radius: 6px !important;
        font-size: 12px !important;
        padding: 4px 8px !important;
        margin: 2px 4px !important;
        border: none !important;
        font-weight: 500 !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
        transition: var(--transition) !important;
    }

    #calendar .fc-event:hover {
        transform: translateY(-2px) scale(1.02) !important;
        box-shadow: 0 6px 15px rgba(0,0,0,0.2) !important;
        z-index: 10 !important;
    }

    #calendar .fc-daygrid-event {
        white-space: normal !important;
        line-height: 1.3 !important;
    }

    /* More Events Link */
    #calendar .fc-more-link {
        color: var(--primary-color) !important;
        font-weight: 600 !important;
        font-size: 12px !important;
        padding: 2px 6px !important;
        border-radius: 10px !important;
        transition: var(--transition) !important;
    }

    #calendar .fc-more-link:hover {
        background-color: var(--primary-color) !important;
        color: #fff !important;
    }

    /* Week View */
    #calendar .fc-timegrid-slot {
        border-top: 1px solid #f0f0f0;
    }

    #calendar .fc-timegrid-slot-label {
        font-size: 12px;
        color: #666;
        font-weight: 500;
    }

    /* Responsive */
    @media (max-width: 1200px) {
        .assignment-sidebar {
            width: 280px;
        }
    }

    @media (max-width: 992px) {
        .main-content {
            flex-direction: column;
        }
        
        .assignment-sidebar {
            width: 100%;
            max-height: 400px;
        }
    }

    @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;
        }

        #calendar .fc-toolbar-title {
            font-size: 18px !important;
        }

        #calendar .fc-daygrid-day-number {
            font-size: 14px !important;
            width: 32px;
            height: 32px;
            line-height: 32px;
            margin: 6px;
        }
    }

    /* 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 htmlspecialchars(strtoupper(substr($user_name, 0, 1))); ?></div>
                    <span class="user-name"><?php echo htmlspecialchars($user_name); ?></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 active">
                            <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">
                            <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">Assignment Calendar</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">Assignment Calendar</li>
                    </ol>
                </nav>
            </div>

            <!-- Main Content -->
            <div class="main-content">
                <!-- Calendar Container -->
                <div class="calendar-container">
                    <div class="calendar-header">
                        <h4 class="calendar-title">
                            <i class="bi bi-calendar3"></i> Work Assignment Calendar
                        </h4>
                        <button class="btn btn-light" id="addNewAssignmentBtn">
                            <i class="bi bi-plus-lg"></i> Add New Assignment
                        </button>
                    </div>
                    <div class="calendar-body">
                        <div id="calendar"></div>
                    </div>
                </div>

                <!-- Assignment Sidebar -->
                <div class="assignment-sidebar">
                    <div class="sidebar-header">
                        <h5 class="sidebar-title">Assigned Work Details</h5>
                    </div>
                    <div class="assignment-list" id="assignment-list">
                        <?php if (empty($current_assignments)): ?>
                            <div class="empty-state">
                                <i class="bi bi-inbox"></i>
                                <p>No assignments yet.</p>
                            </div>
                        <?php else: ?>
                            <?php foreach ($current_assignments as $assignment): 
                                $today = date('Y-m-d');
                                $statusClass = 'status-upcoming';
                                $statusText = 'Upcoming';
                                
                                if ($assignment['date'] < $today) {
                                    $statusClass = 'status-overdue';
                                    $statusText = 'Overdue';
                                } elseif ($assignment['date'] == $today) {
                                    $statusClass = 'status-today';
                                    $statusText = 'Today';
                                }
                            ?>
                                <div class="assignment-item" data-id="<?= $assignment['id'] ?>">
                                    <div class="assignment-project"><?= htmlspecialchars($assignment['project']) ?></div>
                                    <div class="assignment-person"><?= htmlspecialchars($assignment['person']) ?></div>
                                    <div class="assignment-meta">
                                        <span class="assignment-date"><?= date('M d, Y', strtotime($assignment['date'])) ?></span>
                                        <span class="assignment-status <?= $statusClass ?>"><?= $statusText ?></span>
                                    </div>
                                   <?php 
                                        if (!empty($assignment['mobile'])): 
                                            $plain_notes = strip_tags($assignment['notes']);

                                            $wa_msg = "Hello " . $assignment['person'] . ",\n\n"
                                                . "You have been assigned a new task.\n\n"
                                                . "*Project:* " . $assignment['project'] . "\n"
                                                . "*Work Details:* " . $plain_notes . "\n"
                                                . "*Due Date:* " . date('M d, Y', strtotime($assignment['date'])) . "\n\n"
                                                . "Please review the work details carefully and confirm once you start.\n\n"
                                                . "Thank you.";

                                            $wa_url = "https://wa.me/" . preg_replace('/[^0-9]/', '', $assignment['mobile']) . "?text=" . urlencode($wa_msg);
                                        ?>
                                        <a href="<?= $wa_url ?>" target="_blank" class="btn btn-sm btn-success mt-2 w-100" onclick="event.stopPropagation();">
                                            <i class="bi bi-whatsapp"></i> Send to WhatsApp
                                        </a>
                                    <?php endif; ?>
                                </div>
                            <?php endforeach; ?>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Assignment Modal -->
    <div class="modal fade" id="assignmentModal" tabindex="-1" aria-labelledby="assignmentModalLabel" aria-hidden="true" data-bs-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="assignmentModalLabel">Assign Work for <span id="modal-date-display"></span></h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="assignment-form">
                        <input type="hidden" name="assignment_id" id="assignment-id-input">
                        <input type="hidden" name="date" id="assignment-date-input">
                        
                        <div class="mb-3">
                            <label for="person" class="form-label">Person to Assign</label>
                            <input type="text" class="form-control" id="person" name="person" required placeholder="e.g. Team Alpha">
                        </div>
                        
                        <div class="mb-3">
                            <label for="mobile" class="form-label">Mobile Number</label>
                            <input type="tel" class="form-control" id="mobile" name="mobile" placeholder="e.g., +91 9876543210">
                        </div>
                        
                        <div class="mb-3">
                            <label for="project" class="form-label">Project Name</label>
                            <select class="form-select" id="project" name="project" required>
                                <option value="" selected disabled>Select a project...</option>
                                <?php foreach ($user_projects as $project): ?>
                                <option value="<?php echo htmlspecialchars($project['project_name']); ?>">
                                    <?php echo htmlspecialchars($project['project_name']); ?> (<?php echo htmlspecialchars($project['client_name']); ?>)
                                </option>
                                <?php endforeach; ?>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label for="notes" class="form-label">Notes (Rich Text Box)</label>
                            <div id="notes-editor" class="quill-container"></div>
                            <input type="hidden" name="notes_html" id="notes-html-input">
                        </div>

                        <div class="d-flex justify-content-between pt-2">
                            <button type="button" class="btn btn-danger" id="delete-btn" style="display:none;">
                                <i class="bi bi-trash"></i> Delete Assignment
                            </button>
                            <button type="submit" class="btn btn-primary" id="submit-btn">
                                <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
                                Save Assignment
                            </button>
                        </div>
                        <div class="mt-2 text-center" id="form-status"></div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.11/index.global.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.min.js"></script>

    <script>
        // Store all mock data globally for easy access, editing, and deletion in JS.
        let allAssignments = <?php echo $current_assignments_json; ?>;
        
        // Helper function to find assignment by ID
        const findAssignment = (id) => allAssignments.find(a => String(a.id) === String(id));

        document.addEventListener('DOMContentLoaded', function() {
            // --- DOM Elements ---
            const calendarEl = document.getElementById('calendar');
            const assignmentModal = new bootstrap.Modal(document.getElementById('assignmentModal'));
            const form = document.getElementById('assignment-form');
            const modalDateDisplay = document.getElementById('modal-date-display');
            const assignmentDateInput = document.getElementById('assignment-date-input');
            const assignmentIdInput = document.getElementById('assignment-id-input'); 
            const assignmentList = document.getElementById('assignment-list');
            const formStatus = document.getElementById('form-status');
            const submitBtn = document.getElementById('submit-btn');
            const deleteBtn = document.getElementById('delete-btn'); 
            const spinner = submitBtn.querySelector('.spinner-border');
            const addNewAssignmentBtn = document.getElementById('addNewAssignmentBtn');
            const mobileMenuToggle = document.getElementById('mobileMenuToggle');
            const sidebarNav = document.getElementById('sidebarNav');
            const overlay = document.getElementById('overlay');
            const userDropdown = document.getElementById('userDropdown');
            const userProfile = document.getElementById('userProfile');
            
            // Input fields
            const personInput = document.getElementById('person');
            const mobileInput = document.getElementById('mobile');
            const projectInput = document.getElementById('project');
            
            // --- 1. Initialize Quill Rich Text Editor ---
            const quill = new Quill('#notes-editor', {
                theme: 'snow', 
                placeholder: 'Add detailed instructions or notes here...',
                modules: {
                    toolbar: [
                        ['bold', 'italic', 'underline'], 
                        [{ 'list': 'ordered'}, { 'list': 'bullet' }], 
                        [{ 'header': [1, 2, 3, false] }], 
                    ]
                }
            });

            // --- 2. Initialize FullCalendar ---
            const calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
                },
                events: <?php echo $calendar_events_json; ?>, 
                height: '100%', // Make calendar fill its container
                
                dateClick: function(info) {
                    // This handles **ADDING** a new assignment
                    openAssignmentModal(info.dateStr);
                },
                
                eventClick: function(info) {
                    // This handles **EDITING** an assignment from the calendar
                    const assignmentId = info.event.id;
                    openAssignmentModal(info.event.startStr, assignmentId);
                }
            });
            calendar.render();

            // --- 3. Modal Management Functions (New/Edit) ---
            function openAssignmentModal(dateStr, assignmentId = null) {
                // Reset Form State
                form.reset();
                quill.setContents([]);
                formStatus.innerHTML = '';
                assignmentIdInput.value = '';
                deleteBtn.style.display = 'none';
                submitBtn.textContent = 'Save Assignment';
                submitBtn.classList.remove('ms-auto'); // Reset alignment
                
                // Set Date
                assignmentDateInput.value = dateStr;
                modalDateDisplay.textContent = new Date(dateStr).toLocaleDateString('en-US', { dateStyle: 'long' });

                if (assignmentId) {
                    const assignment = findAssignment(assignmentId);
                    if (assignment) {
                        assignmentIdInput.value = assignment.id;
                        personInput.value = assignment.person || '';
                        mobileInput.value = assignment.mobile || '';

                        // Set project dropdown value
                        projectInput.value = assignment.project || '';

                        // Populate Quill from HTML string
                        quill.root.innerHTML = assignment.notes || '';

                        submitBtn.textContent = 'Update Assignment';
                        deleteBtn.style.display = 'block';
                        submitBtn.classList.add('ms-auto'); // Push save button to the right

                        document.getElementById('assignmentModalLabel').innerHTML = `Edit Work Assignment`;
                    }
                } else {
                    document.getElementById('assignmentModalLabel').innerHTML = `Assign Work`;
                }
                
                assignmentModal.show();
            }

            // --- 4. Event Listener for List Cards (Edit) ---
            assignmentList.addEventListener('click', function(e) {
                const item = e.target.closest('.assignment-item');
                if (item) {
                    const assignmentId = parseInt(item.dataset.id);
                    const assignment = findAssignment(assignmentId);
                    if (assignment) {
                        openAssignmentModal(assignment.date, assignmentId);
                    }
                }
            });

            // Save button listener
            form.addEventListener('submit', function(e) {
                e.preventDefault();
                
                const assignmentId = assignmentIdInput.value;
                const isEditing = !!assignmentId;

                const formData = new FormData();
                formData.append('action', isEditing ? 'update' : 'add');
                if (isEditing) formData.append('assignment_id', assignmentId);
                formData.append('person', personInput.value);
                formData.append('mobile', mobileInput.value);
                formData.append('project', projectInput.value);
                formData.append('date', assignmentDateInput.value);
                formData.append('notes_html', quill.root.innerHTML);

                submitBtn.disabled = true;
                spinner.classList.remove('d-none');
                formStatus.className = 'text-warning small';
                formStatus.textContent = 'Saving...';
                
                fetch('assignmentcalendar.php', {
                    method: 'POST',
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        const newAssignment = {
                            id: data.id,
                            person: personInput.value,
                            mobile: mobileInput.value,
                            project: projectInput.value,
                            date: assignmentDateInput.value,
                            notes: quill.root.innerHTML
                        };

                        if (isEditing) {
                            const index = allAssignments.findIndex(a => a.id == assignmentId);
                            if (index > -1) allAssignments[index] = newAssignment;
                            updateCalendarEvent(newAssignment, calendar);
                            updateAssignmentCard(newAssignment);
                        } else {
                            allAssignments.push(newAssignment);
                            addCalendarEvent(newAssignment, calendar);
                            appendAssignmentToList(newAssignment);
                        }
                        
                        formStatus.className = 'text-success small';
                        formStatus.textContent = isEditing ? 'Updated!' : 'Saved!';
                        assignmentModal.hide();
                    } else {
                        formStatus.className = 'text-danger small';
                        formStatus.textContent = 'Error: ' + data.message;
                    }
                    submitBtn.disabled = false;
                    spinner.classList.add('d-none');
                })
                .catch(error => {
                    formStatus.className = 'text-danger small';
                    formStatus.textContent = 'Error: ' + error.message;
                    submitBtn.disabled = false;
                    spinner.classList.add('d-none');
                });
            });

            // --- 6. Delete Handler ---
            deleteBtn.addEventListener('click', function() {
                const assignmentId = assignmentIdInput.value;
                if (!assignmentId || !confirm("Delete this assignment?")) return;
                
                deleteBtn.disabled = true;
                formStatus.className = 'text-warning small';
                formStatus.textContent = 'Deleting...';

                const formData = new FormData();
                formData.append('action', 'delete');
                formData.append('assignment_id', assignmentId);

                fetch('assignmentcalendar.php', {
                    method: 'POST',
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        allAssignments = allAssignments.filter(a => a.id != assignmentId);
                        removeCalendarEvent(assignmentId, calendar);
                        removeAssignmentCard(assignmentId);
                        assignmentModal.hide();
                        formStatus.className = 'text-success small';
                        formStatus.textContent = 'Deleted!';
                    } else {
                        formStatus.className = 'text-danger small';
                        formStatus.textContent = 'Error: ' + data.message;
                    }
                    deleteBtn.disabled = false;
                })
                .catch(error => {
                    formStatus.className = 'text-danger small';
                    formStatus.textContent = 'Error: ' + error.message;
                    deleteBtn.disabled = false;
                });
            });

            // --- 7. Add New Assignment Button ---
            addNewAssignmentBtn.addEventListener('click', function() {
                const today = new Date().toISOString().split('T')[0];
                openAssignmentModal(today);
            });

            // --- 8. Mobile Menu Toggle ---
            mobileMenuToggle.addEventListener('click', () => {
                sidebarNav.classList.toggle('show');
                overlay.classList.toggle('show');
            });

            overlay.addEventListener('click', () => {
                sidebarNav.classList.remove('show');
                overlay.classList.remove('show');
            });

            // Close sidebar when clicking a nav link on mobile
            document.querySelectorAll('.nav-link').forEach(link => {
                link.addEventListener('click', () => {
                    if (window.innerWidth <= 768) {
                        sidebarNav.classList.remove('show');
                        overlay.classList.remove('show');
                    }
                });
            });

            // --- User Dropdown Toggle ---
            userProfile.addEventListener('click', (e) => {
                e.stopPropagation();
                userDropdown.classList.toggle('show');
            });

            // Close dropdown when clicking outside
            document.addEventListener('click', () => {
                userDropdown.classList.remove('show');
            });

            // --- 9. Utility Functions for UI Updates ---
            
            // Adds an assignment card to the right list
            function appendAssignmentToList(assignment) {
                const noDataMessage = document.querySelector('.empty-state');
                if (noDataMessage) noDataMessage.remove();
                
                const cardHtml = createAssignmentCardHtml(assignment);
                assignmentList.insertAdjacentHTML('afterbegin', cardHtml);
            }

            // Updates an existing assignment card in the right list
            function updateAssignmentCard(assignment) {
                const cardEl = document.querySelector(`.assignment-item[data-id="${assignment.id}"]`);
                if (cardEl) {
                    cardEl.outerHTML = createAssignmentCardHtml(assignment);
                }
            }
            
            // Removes an assignment card from the right list
            function removeAssignmentCard(id) {
                const cardEl = document.querySelector(`.assignment-item[data-id="${id}"]`);
                if (cardEl) cardEl.remove();
                
                if (allAssignments.length === 0) {
                    assignmentList.innerHTML = '<div class="empty-state"><i class="bi bi-inbox"></i><p>No assignments yet.</p></div>';
                }
            }
            
            // Helper function to generate card HTML
            function createAssignmentCardHtml(assignment) {
                const today = new Date().toISOString().split('T')[0];
                let statusClass = 'status-upcoming';
                let statusText = 'Upcoming';
                
                if (assignment.date < today) {
                    statusClass = 'status-overdue';
                    statusText = 'Overdue';
                } else if (assignment.date == today) {
                    statusClass = 'status-today';
                    statusText = 'Today';
                }
                
                const mobileHtml = assignment.mobile ? `<div class="assignment-mobile"><i class="bi bi-phone"></i> ${assignment.mobile}</div>` : '';
                
                const plainNotes = assignment.notes ? assignment.notes.replace(/<[^>]*>?/gm, '') : '';
                const formattedDate = new Date(assignment.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
                const waMsg = `Hello ${assignment.person},\n\nYou have been assigned a new task.\n\n📌 Task: ${assignment.project}\n📝 Work Details: ${plainNotes}\n📅 Due Date: ${formattedDate}\n\nPlease review the work details carefully and confirm once you start.\n\nThank you.`;
                const waUrl = `https://wa.me/${assignment.mobile.replace(/\D/g, '')}?text=${encodeURIComponent(waMsg)}`;
                
                const whatsappBtnHtml = assignment.mobile ? `
                    <a href="${waUrl}" target="_blank" class="btn btn-sm btn-success mt-2 w-100" onclick="event.stopPropagation();">
                        <i class="bi bi-whatsapp"></i> Send to WhatsApp
                    </a>` : '';
                
                return `
                    <div class="assignment-item" data-id="${assignment.id}">
                        <div class="assignment-project">${assignment.project}</div>
                        <div class="assignment-person">${assignment.person}</div>
                        ${mobileHtml}
                        <div class="assignment-meta">
                            <span class="assignment-date">${new Date(assignment.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}</span>
                            <span class="assignment-status ${statusClass}">${statusText}</span>
                        </div>
                        ${whatsappBtnHtml}
                    </div>
                `;
            }

            // Calendar Utilities
            function addCalendarEvent(assignment, calendarInstance) {
                calendarInstance.addEvent({
                    id: assignment.id,
                    title: `${assignment.project} (${assignment.person})`,
                    start: assignment.date,
                    allDay: true,
                    className: 'bg-info border-info'
                });
            }

            function updateCalendarEvent(assignment, calendarInstance) {
                const event = calendarInstance.getEventById(assignment.id);
                if (event) {
                    event.setProp('title', `${assignment.project} (${assignment.person})`);
                    event.setStart(assignment.date);
                    event.setEnd(assignment.date); // Keep single day
                }
            }
            
            function removeCalendarEvent(id, calendarInstance) {
                const event = calendarInstance.getEventById(id);
                if (event) {
                    event.remove();
                }
            }
        });
    </script>
</body>
</html>