{% extends 'base.html' %}
{% load static %}

{% block title %}{% if project %}Edit Project{% else %}New Project{% endif %} - Quality Management{% endblock %}

{% block css %}
<link href="{% static 'plugins/select2/dist/css/select2.min.css' %}" rel="stylesheet" />
<link href="{% static 'plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css' %}" rel="stylesheet" />
<style>
.form-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 0.5rem;
    padding: 2rem;
    margin-bottom: 2rem;
}

.form-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

.form-main {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.form-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-section {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    overflow: hidden;
}

.section-header {
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    padding: 1rem 1.5rem;
    font-weight: 600;
    color: #495057;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-content {
    padding: 1.5rem;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-row.single {
    grid-template-columns: 1fr;
}

.form-group {
    margin-bottom: 1rem;
}

.form-label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.5rem;
}

.form-label.required::after {
    content: ' *';
    color: #dc3545;
}

.form-control, .form-select {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 0.75rem;
    transition: all 0.2s;
}

.form-control:focus, .form-select:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.form-text {
    font-size: 0.875rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

.priority-selector {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.priority-option {
    padding: 0.75rem;
    border: 2px solid #dee2e6;
    border-radius: 0.375rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: white;
}

.priority-option:hover {
    border-color: #007bff;
}

.priority-option.selected {
    border-color: #007bff;
    background: #e3f2fd;
    color: #1976d2;
}

.priority-low.selected { border-color: #28a745; background: #e8f5e8; color: #2e7d32; }
.priority-medium.selected { border-color: #ffc107; background: #fff3e0; color: #f57c00; }
.priority-high.selected { border-color: #dc3545; background: #ffebee; color: #d32f2f; }
.priority-critical.selected { border-color: #6f42c1; background: #f3e5f5; color: #7b1fa2; }

.status-selector {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.5rem;
}

.status-option {
    padding: 0.75rem;
    border: 2px solid #dee2e6;
    border-radius: 0.375rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: white;
    font-size: 0.875rem;
}

.status-option:hover {
    border-color: #007bff;
}

.status-option.selected {
    border-color: #007bff;
    background: #e3f2fd;
    color: #1976d2;
}

.team-selector {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    max-height: 200px;
    overflow-y: auto;
}

.team-member {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.2s;
}

.team-member:hover {
    background: #f8f9fa;
}

.team-member:last-child {
    border-bottom: none;
}

.team-member.selected {
    background: #e3f2fd;
}

.member-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #007bff;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.member-info {
    flex: 1;
}

.member-name {
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.25rem;
}

.member-role {
    font-size: 0.75rem;
    color: #6c757d;
}

.milestone-item {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 1rem;
    background: white;
}

.milestone-header {
    display: flex;
    justify-content: between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.milestone-title {
    font-weight: 600;
    color: #495057;
}

.milestone-actions {
    display: flex;
    gap: 0.25rem;
}

.btn-icon {
    width: 32px;
    height: 32px;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    background: white;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-icon:hover {
    border-color: #007bff;
    color: #007bff;
}

.btn-icon.danger:hover {
    border-color: #dc3545;
    color: #dc3545;
}

.milestone-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.deliverable-item {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 1rem;
    background: white;
}

.deliverable-header {
    display: flex;
    justify-content: between;
    align-items: start;
    margin-bottom: 0.75rem;
}

.deliverable-title {
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.25rem;
}

.deliverable-type {
    font-size: 0.75rem;
    color: #6c757d;
}

.deliverable-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.progress-slider {
    margin: 1rem 0;
}

.progress-value {
    text-align: center;
    font-size: 1.25rem;
    font-weight: bold;
    color: #007bff;
    margin-bottom: 0.5rem;
}

.progress-bar-container {
    background: #e9ecef;
    border-radius: 0.5rem;
    height: 8px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-bar {
    background: linear-gradient(90deg, #007bff, #0056b3);
    height: 100%;
    transition: width 0.3s ease;
    border-radius: 0.5rem;
}

.form-actions {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1.5rem;
    display: flex;
    justify-content: between;
    align-items: center;
    gap: 1rem;
}

.btn-group {
    display: flex;
    gap: 0.5rem;
}

.auto-save-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #6c757d;
    font-size: 0.875rem;
}

.auto-save-indicator.saving {
    color: #ffc107;
}

.auto-save-indicator.saved {
    color: #28a745;
}

.validation-errors {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

.validation-errors ul {
    margin: 0;
    padding-left: 1.5rem;
}

.validation-errors li {
    color: #721c24;
}

@media (max-width: 1200px) {
    .form-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .form-sidebar {
        order: -1;
    }
}

@media (max-width: 768px) {
    .form-header {
        padding: 1.5rem;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .priority-selector {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .status-selector {
        grid-template-columns: 1fr;
    }
    
    .milestone-form, .deliverable-form {
        grid-template-columns: 1fr;
    }
    
    .form-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .btn-group {
        justify-content: center;
    }
}

@media print {
    .form-sidebar, .form-actions {
        display: none !important;
    }
    
    .form-layout {
        grid-template-columns: 1fr;
    }
    
    .section-header {
        background: none;
        border-bottom: 2px solid #000;
        color: #000;
    }
}
</style>
{% endblock %}

{% block content %}
<div id="content" class="app-content">
    <!-- Page Header -->
    <div class="d-flex align-items-center mb-3">
        <div>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{% url 'quality:dashboard' %}">Quality</a></li>
                <li class="breadcrumb-item"><a href="{% url 'quality:improvement_project_list' %}">Projects</a></li>
                <li class="breadcrumb-item active">{% if project %}Edit{% else %}New{% endif %} Project</li>
            </ol>
            <h1 class="page-header mb-0">
                <i class="fas fa-project-diagram me-2"></i>{% if project %}Edit Project{% else %}New Quality Project{% endif %}
            </h1>
        </div>
        <div class="ms-auto">
            <a href="{% url 'quality:improvement_project_list' %}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-1"></i>Back to Projects
            </a>
        </div>
    </div>

    <!-- Form Header -->
    <div class="form-header">
        <div class="row align-items-center">
            <div class="col-md-8">
                <h2 class="mb-2">{% if project %}{{ project.name }}{% else %}Create New Quality Project{% endif %}</h2>
                <p class="mb-0">{% if project %}Update project details and settings{% else %}Define project scope, objectives, and team assignments{% endif %}</p>
            </div>
            <div class="col-md-4 text-md-end">
                <div class="auto-save-indicator" id="auto-save-status">
                    <i class="fas fa-save"></i>
                    <span>Auto-save enabled</span>
                </div>
            </div>
        </div>
    </div>

    <form method="post" id="project-form" enctype="multipart/form-data">
        {% csrf_token %}
        
        <!-- Validation Errors -->
        {% if form.errors %}
        <div class="validation-errors">
            <h6><i class="fas fa-exclamation-triangle me-2"></i>Please correct the following errors:</h6>
            <ul>
                {% for field, errors in form.errors.items %}
                    {% for error in errors %}
                    <li>{{ field|title }}: {{ error }}</li>
                    {% endfor %}
                {% endfor %}
            </ul>
        </div>
        {% endif %}

        <div class="form-layout">
            <!-- Main Form Content -->
            <div class="form-main">
                <!-- Basic Information -->
                <div class="form-section">
                    <div class="section-header">
                        <i class="fas fa-info-circle"></i>
                        Basic Information
                    </div>
                    <div class="section-content">
                        <div class="form-row single">
                            <div class="form-group">
                                <label class="form-label required">Project Name</label>
                                <input type="text" class="form-control" name="name" 
                                       value="{{ form.name.value|default:'' }}" 
                                       placeholder="Enter project name..." required>
                                <div class="form-text">A clear, descriptive name for the quality project</div>
                            </div>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">Project ID</label>
                                <input type="text" class="form-control" name="project_id" 
                                       value="{{ form.project_id.value|default:'' }}" 
                                       placeholder="Auto-generated if left blank">
                                <div class="form-text">Unique identifier for the project</div>
                            </div>
                            
                            <div class="form-group">
                                <label class="form-label required">Department</label>
                                <select class="form-select" name="department" required>
                                    <option value="">Select Department</option>
                                    {% for dept in departments %}
                                    <option value="{{ dept.id }}" {% if form.department.value == dept.id %}selected{% endif %}>
                                        {{ dept.name }}
                                    </option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        
                        <div class="form-row single">
                            <div class="form-group">
                                <label class="form-label required">Description</label>
                                <textarea class="form-control" name="description" rows="4" 
                                          placeholder="Describe the project objectives, scope, and expected outcomes..." required>{{ form.description.value|default:'' }}</textarea>
                                <div class="form-text">Detailed description of project goals and scope</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Project Settings -->
                <div class="form-section">
                    <div class="section-header">
                        <i class="fas fa-cog"></i>
                        Project Settings
                    </div>
                    <div class="section-content">
                        <div class="form-group">
                            <label class="form-label required">Priority Level</label>
                            <div class="priority-selector">
                                <div class="priority-option priority-low" data-priority="low">
                                    <i class="fas fa-arrow-down mb-2"></i>
                                    <div>Low</div>
                                </div>
                                <div class="priority-option priority-medium" data-priority="medium">
                                    <i class="fas fa-minus mb-2"></i>
                                    <div>Medium</div>
                                </div>
                                <div class="priority-option priority-high" data-priority="high">
                                    <i class="fas fa-arrow-up mb-2"></i>
                                    <div>High</div>
                                </div>
                                <div class="priority-option priority-critical" data-priority="critical">
                                    <i class="fas fa-exclamation-triangle mb-2"></i>
                                    <div>Critical</div>
                                </div>
                            </div>
                            <input type="hidden" name="priority" id="priority-input" value="{{ form.priority.value|default:'medium' }}">
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label required">Project Status</label>
                            <div class="status-selector">
                                <div class="status-option" data-status="planning">
                                    <i class="fas fa-clipboard-list mb-1"></i>
                                    <div>Planning</div>
                                </div>
                                <div class="status-option" data-status="active">
                                    <i class="fas fa-play mb-1"></i>
                                    <div>Active</div>
                                </div>
                                <div class="status-option" data-status="on-hold">
                                    <i class="fas fa-pause mb-1"></i>
                                    <div>On Hold</div>
                                </div>
                                <div class="status-option" data-status="completed">
                                    <i class="fas fa-check mb-1"></i>
                                    <div>Completed</div>
                                </div>
                                <div class="status-option" data-status="cancelled">
                                    <i class="fas fa-times mb-1"></i>
                                    <div>Cancelled</div>
                                </div>
                            </div>
                            <input type="hidden" name="status" id="status-input" value="{{ form.status.value|default:'planning' }}">
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">Start Date</label>
                                <input type="date" class="form-control" name="start_date" 
                                       value="{{ form.start_date.value|date:'Y-m-d'|default:'' }}">
                            </div>
                            
                            <div class="form-group">
                                <label class="form-label">End Date</label>
                                <input type="date" class="form-control" name="end_date" 
                                       value="{{ form.end_date.value|date:'Y-m-d'|default:'' }}">
                            </div>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">Budget</label>
                                <div class="input-group">
                                    <span class="input-group-text">$</span>
                                    <input type="number" class="form-control" name="budget" 
                                           value="{{ form.budget.value|default:'' }}" 
                                           placeholder="0.00" step="0.01" min="0">
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label class="form-label">Project Manager</label>
                                <select class="form-select" name="manager">
                                    <option value="">Select Manager</option>
                                    {% for manager in managers %}
                                    <option value="{{ manager.id }}" {% if form.manager.value == manager.id %}selected{% endif %}>
                                        {{ manager.get_full_name }}
                                    </option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Progress Tracking -->
                {% if project %}
                <div class="form-section">
                    <div class="section-header">
                        <i class="fas fa-chart-line"></i>
                        Progress Tracking
                    </div>
                    <div class="section-content">
                        <div class="form-group">
                            <label class="form-label">Project Progress</label>
                            <div class="progress-slider">
                                <div class="progress-value" id="progress-value">{{ form.progress.value|default:0 }}%</div>
                                <div class="progress-bar-container">
                                    <div class="progress-bar" id="progress-bar" style="width: {{ form.progress.value|default:0 }}%;"></div>
                                </div>
                                <input type="range" class="form-range" name="progress" 
                                       value="{{ form.progress.value|default:0 }}" 
                                       min="0" max="100" step="5" id="progress-slider">
                            </div>
                            <div class="form-text">Adjust the slider to reflect current project completion percentage</div>
                        </div>
                    </div>
                </div>
                {% endif %}

                <!-- Milestones -->
                <div class="form-section">
                    <div class="section-header">
                        <i class="fas fa-flag-checkered"></i>
                        Project Milestones
                        <div class="ms-auto">
                            <button type="button" class="btn btn-outline-primary btn-sm" onclick="addMilestone()">
                                <i class="fas fa-plus me-1"></i>Add Milestone
                            </button>
                        </div>
                    </div>
                    <div class="section-content">
                        <div id="milestones-container">
                            {% for milestone in project.milestones.all %}
                            <div class="milestone-item" data-milestone-id="{{ milestone.id }}">
                                <div class="milestone-header">
                                    <div class="milestone-title">{{ milestone.name }}</div>
                                    <div class="milestone-actions">
                                        <button type="button" class="btn-icon" onclick="editMilestone(this)">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button type="button" class="btn-icon danger" onclick="removeMilestone(this)">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="milestone-form" style="display: none;">
                                    <input type="text" class="form-control" placeholder="Milestone name" value="{{ milestone.name }}">
                                    <input type="date" class="form-control" value="{{ milestone.due_date|date:'Y-m-d' }}">
                                    <textarea class="form-control" placeholder="Description" rows="2">{{ milestone.description }}</textarea>
                                    <select class="form-select">
                                        <option value="">Assign to...</option>
                                        {% for member in team_members %}
                                        <option value="{{ member.id }}" {% if milestone.assignee_id == member.id %}selected{% endif %}>
                                            {{ member.get_full_name }}
                                        </option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            {% empty %}
                            <div class="text-center text-muted py-3">
                                <i class="fas fa-flag-checkered fa-2x mb-2"></i>
                                <p>No milestones defined yet. Add milestones to track project progress.</p>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>

                <!-- Deliverables -->
                <div class="form-section">
                    <div class="section-header">
                        <i class="fas fa-box"></i>
                        Project Deliverables
                        <div class="ms-auto">
                            <button type="button" class="btn btn-outline-primary btn-sm" onclick="addDeliverable()">
                                <i class="fas fa-plus me-1"></i>Add Deliverable
                            </button>
                        </div>
                    </div>
                    <div class="section-content">
                        <div id="deliverables-container">
                            {% for deliverable in project.deliverables.all %}
                            <div class="deliverable-item" data-deliverable-id="{{ deliverable.id }}">
                                <div class="deliverable-header">
                                    <div>
                                        <div class="deliverable-title">{{ deliverable.name }}</div>
                                        <div class="deliverable-type">{{ deliverable.get_type_display }}</div>
                                    </div>
                                    <div class="milestone-actions">
                                        <button type="button" class="btn-icon" onclick="editDeliverable(this)">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button type="button" class="btn-icon danger" onclick="removeDeliverable(this)">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="deliverable-form" style="display: none;">
                                    <input type="text" class="form-control" placeholder="Deliverable name" value="{{ deliverable.name }}">
                                    <select class="form-select">
                                        <option value="document" {% if deliverable.type == 'document' %}selected{% endif %}>Document</option>
                                        <option value="report" {% if deliverable.type == 'report' %}selected{% endif %}>Report</option>
                                        <option value="presentation" {% if deliverable.type == 'presentation' %}selected{% endif %}>Presentation</option>
                                        <option value="software" {% if deliverable.type == 'software' %}selected{% endif %}>Software</option>
                                        <option value="other" {% if deliverable.type == 'other' %}selected{% endif %}>Other</option>
                                    </select>
                                    <textarea class="form-control" placeholder="Description" rows="2">{{ deliverable.description }}</textarea>
                                    <input type="date" class="form-control" value="{{ deliverable.due_date|date:'Y-m-d' }}">
                                </div>
                            </div>
                            {% empty %}
                            <div class="text-center text-muted py-3">
                                <i class="fas fa-box fa-2x mb-2"></i>
                                <p>No deliverables defined yet. Add deliverables to track project outputs.</p>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="form-sidebar">
                <!-- Team Selection -->
                <div class="form-section">
                    <div class="section-header">
                        <i class="fas fa-users"></i>
                        Team Members
                    </div>
                    <div class="section-content">
                        <div class="team-selector" id="team-selector">
                            {% for user in available_users %}
                            <div class="team-member" data-user-id="{{ user.id }}">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="team_members" 
                                           value="{{ user.id }}" id="team-{{ user.id }}"
                                           {% if user in project.team_members.all %}checked{% endif %}>
                                </div>
                                <div class="member-avatar">
                                    {{ user.first_name.0|upper }}{{ user.last_name.0|upper }}
                                </div>
                                <div class="member-info">
                                    <div class="member-name">{{ user.get_full_name }}</div>
                                    <div class="member-role">{{ user.profile.role|default:"Staff" }}</div>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                        <div class="form-text">Select team members who will work on this project</div>
                    </div>
                </div>

                <!-- Project Categories -->
                <div class="form-section">
                    <div class="section-header">
                        <i class="fas fa-tags"></i>
                        Categories & Tags
                    </div>
                    <div class="section-content">
                        <div class="form-group">
                            <label class="form-label">Project Category</label>
                            <select class="form-select" name="category">
                                <option value="">Select Category</option>
                                <option value="process-improvement" {% if form.category.value == 'process-improvement' %}selected{% endif %}>Process Improvement</option>
                                <option value="compliance" {% if form.category.value == 'compliance' %}selected{% endif %}>Compliance</option>
                                <option value="safety" {% if form.category.value == 'safety' %}selected{% endif %}>Safety</option>
                                <option value="training" {% if form.category.value == 'training' %}selected{% endif %}>Training</option>
                                <option value="technology" {% if form.category.value == 'technology' %}selected{% endif %}>Technology</option>
                                <option value="research" {% if form.category.value == 'research' %}selected{% endif %}>Research</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Tags</label>
                            <input type="text" class="form-control" name="tags" 
                                   value="{{ form.tags.value|default:'' }}" 
                                   placeholder="Enter tags separated by commas">
                            <div class="form-text">Use tags to categorize and search projects</div>
                        </div>
                    </div>
                </div>

                <!-- Risk Assessment -->
                <div class="form-section">
                    <div class="section-header">
                        <i class="fas fa-exclamation-triangle"></i>
                        Risk Assessment
                    </div>
                    <div class="section-content">
                        <div class="form-group">
                            <label class="form-label">Overall Risk Level</label>
                            <select class="form-select" name="risk_level">
                                <option value="low" {% if form.risk_level.value == 'low' %}selected{% endif %}>Low Risk</option>
                                <option value="medium" {% if form.risk_level.value == 'medium' %}selected{% endif %}>Medium Risk</option>
                                <option value="high" {% if form.risk_level.value == 'high' %}selected{% endif %}>High Risk</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Risk Notes</label>
                            <textarea class="form-control" name="risk_notes" rows="3" 
                                      placeholder="Describe potential risks and mitigation strategies...">{{ form.risk_notes.value|default:'' }}</textarea>
                        </div>
                    </div>
                </div>

                <!-- Additional Information -->
                <div class="form-section">
                    <div class="section-header">
                        <i class="fas fa-info"></i>
                        Additional Info
                    </div>
                    <div class="section-content">
                        <div class="form-group">
                            <label class="form-label">Success Criteria</label>
                            <textarea class="form-control" name="success_criteria" rows="3" 
                                      placeholder="Define what success looks like for this project...">{{ form.success_criteria.value|default:'' }}</textarea>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Notes</label>
                            <textarea class="form-control" name="notes" rows="3" 
                                      placeholder="Additional notes or comments...">{{ form.notes.value|default:'' }}</textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Form Actions -->
        <div class="form-actions">
            <div class="auto-save-indicator" id="auto-save-indicator">
                <i class="fas fa-save"></i>
                <span>All changes saved</span>
            </div>
            
            <div class="btn-group">
                <a href="{% url 'quality:improvement_project_list' %}" class="btn btn-outline-secondary">
                    <i class="fas fa-times me-1"></i>Cancel
                </a>
                <button type="button" class="btn btn-outline-info" onclick="saveDraft()">
                    <i class="fas fa-save me-1"></i>Save Draft
                </button>
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-check me-1"></i>{% if project %}Update Project{% else %}Create Project{% endif %}
                </button>
            </div>
        </div>
    </form>
</div>
{% endblock %}

{% block js %}
<script src="{% static 'plugins/select2/dist/js/select2.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js' %}"></script>

<script>
let autoSaveTimer;
let milestoneCounter = 0;
let deliverableCounter = 0;

$(document).ready(function() {
    // Initialize form
    initializeForm();
    
    // Set up auto-save
    setupAutoSave();
    
    // Initialize priority and status selectors
    initializePrioritySelector();
    initializeStatusSelector();
    
    // Initialize progress slider
    initializeProgressSlider();
    
    // Set initial values
    setInitialValues();
});

function initializeForm() {
    // Initialize Select2 for dropdowns
    $('.form-select').select2({
        width: '100%',
        placeholder: function() {
            return $(this).data('placeholder') || 'Select an option...';
        }
    });
    
    // Initialize date pickers
    $('input[type="date"]').datepicker({
        format: 'yyyy-mm-dd',
        autoclose: true,
        todayHighlight: true
    });
}

function setupAutoSave() {
    // Auto-save form data every 30 seconds
    $('#project-form input, #project-form textarea, #project-form select').on('input change', function() {
        clearTimeout(autoSaveTimer);
        
        $('#auto-save-indicator').removeClass('saved').addClass('saving');
        $('#auto-save-indicator span').text('Saving...');
        
        autoSaveTimer = setTimeout(function() {
            saveDraft();
        }, 2000);
    });
}

function initializePrioritySelector() {
    $('.priority-option').click(function() {
        $('.priority-option').removeClass('selected');
        $(this).addClass('selected');
        $('#priority-input').val($(this).data('priority'));
    });
}

function initializeStatusSelector() {
    $('.status-option').click(function() {
        $('.status-option').removeClass('selected');
        $(this).addClass('selected');
        $('#status-input').val($(this).data('status'));
    });
}

function initializeProgressSlider() {
    $('#progress-slider').on('input', function() {
        const value = $(this).val();
        $('#progress-value').text(value + '%');
        $('#progress-bar').css('width', value + '%');
    });
}

function setInitialValues() {
    // Set initial priority
    const initialPriority = $('#priority-input').val();
    $(`.priority-option[data-priority="${initialPriority}"]`).addClass('selected');
    
    // Set initial status
    const initialStatus = $('#status-input').val();
    $(`.status-option[data-status="${initialStatus}"]`).addClass('selected');
}

function addMilestone() {
    milestoneCounter++;
    const milestoneHtml = `
        <div class="milestone-item" data-milestone-id="new-${milestoneCounter}">
            <div class="milestone-header">
                <div class="milestone-title">New Milestone</div>
                <div class="milestone-actions">
                    <button type="button" class="btn-icon" onclick="editMilestone(this)">
                        <i class="fas fa-edit"></i>
                    </button>
                    <button type="button" class="btn-icon danger" onclick="removeMilestone(this)">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            </div>
            <div class="milestone-form">
                <input type="text" class="form-control" placeholder="Milestone name" value="New Milestone">
                <input type="date" class="form-control">
                <textarea class="form-control" placeholder="Description" rows="2"></textarea>
                <select class="form-select">
                    <option value="">Assign to...</option>
                    {% for member in team_members %}
                    <option value="{{ member.id }}">{{ member.get_full_name }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
    `;
    
    $('#milestones-container').append(milestoneHtml);
    editMilestone($('#milestones-container .milestone-item:last .btn-icon:first')[0]);
}

function editMilestone(button) {
    const milestoneItem = $(button).closest('.milestone-item');
    const form = milestoneItem.find('.milestone-form');
    const header = milestoneItem.find('.milestone-header');
    
    if (form.is(':visible')) {
        // Save changes
        const name = form.find('input[type="text"]').val();
        header.find('.milestone-title').text(name || 'Unnamed Milestone');
        form.hide();
        $(button).html('<i class="fas fa-edit"></i>');
    } else {
        // Show form
        form.show();
        $(button).html('<i class="fas fa-save"></i>');
    }
}

function removeMilestone(button) {
    if (confirm('Remove this milestone?')) {
        $(button).closest('.milestone-item').remove();
    }
}

function addDeliverable() {
    deliverableCounter++;
    const deliverableHtml = `
        <div class="deliverable-item" data-deliverable-id="new-${deliverableCounter}">
            <div class="deliverable-header">
                <div>
                    <div class="deliverable-title">New Deliverable</div>
                    <div class="deliverable-type">Document</div>
                </div>
                <div class="milestone-actions">
                    <button type="button" class="btn-icon" onclick="editDeliverable(this)">
                        <i class="fas fa-edit"></i>
                    </button>
                    <button type="button" class="btn-icon danger" onclick="removeDeliverable(this)">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            </div>
            <div class="deliverable-form">
                <input type="text" class="form-control" placeholder="Deliverable name" value="New Deliverable">
                <select class="form-select">
                    <option value="document">Document</option>
                    <option value="report">Report</option>
                    <option value="presentation">Presentation</option>
                    <option value="software">Software</option>
                    <option value="other">Other</option>
                </select>
                <textarea class="form-control" placeholder="Description" rows="2"></textarea>
                <input type="date" class="form-control">
            </div>
        </div>
    `;
    
    $('#deliverables-container').append(deliverableHtml);
    editDeliverable($('#deliverables-container .deliverable-item:last .btn-icon:first')[0]);
}

function editDeliverable(button) {
    const deliverableItem = $(button).closest('.deliverable-item');
    const form = deliverableItem.find('.deliverable-form');
    const header = deliverableItem.find('.deliverable-header');
    
    if (form.is(':visible')) {
        // Save changes
        const name = form.find('input[type="text"]').val();
        const type = form.find('select').val();
        header.find('.deliverable-title').text(name || 'Unnamed Deliverable');
        header.find('.deliverable-type').text(type.charAt(0).toUpperCase() + type.slice(1));
        form.hide();
        $(button).html('<i class="fas fa-edit"></i>');
    } else {
        // Show form
        form.show();
        $(button).html('<i class="fas fa-save"></i>');
    }
}

function removeDeliverable(button) {
    if (confirm('Remove this deliverable?')) {
        $(button).closest('.deliverable-item').remove();
    }
}

function saveDraft() {
    const formData = new FormData($('#project-form')[0]);
    formData.append('save_draft', 'true');
    
    fetch(window.location.href, {
        method: 'POST',
        headers: {
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            $('#auto-save-indicator').removeClass('saving').addClass('saved');
            $('#auto-save-indicator span').text('Draft saved');
            
            setTimeout(() => {
                $('#auto-save-indicator').removeClass('saved');
                $('#auto-save-indicator span').text('Auto-save enabled');
            }, 3000);
        }
    })
    .catch(error => {
        console.error('Auto-save error:', error);
        $('#auto-save-indicator').removeClass('saving');
        $('#auto-save-indicator span').text('Save failed');
    });
}

// Team member selection
$('#team-selector .team-member').click(function(e) {
    if (e.target.type !== 'checkbox') {
        const checkbox = $(this).find('input[type="checkbox"]');
        checkbox.prop('checked', !checkbox.prop('checked'));
    }
    
    $(this).toggleClass('selected', $(this).find('input[type="checkbox"]').prop('checked'));
});

// Form validation
$('#project-form').on('submit', function(e) {
    let isValid = true;
    const errors = [];
    
    // Validate required fields
    if (!$('input[name="name"]').val().trim()) {
        errors.push('Project name is required');
        isValid = false;
    }
    
    if (!$('textarea[name="description"]').val().trim()) {
        errors.push('Project description is required');
        isValid = false;
    }
    
    if (!$('select[name="department"]').val()) {
        errors.push('Department selection is required');
        isValid = false;
    }
    
    // Validate date range
    const startDate = new Date($('input[name="start_date"]').val());
    const endDate = new Date($('input[name="end_date"]').val());
    
    if (startDate && endDate && startDate >= endDate) {
        errors.push('End date must be after start date');
        isValid = false;
    }
    
    if (!isValid) {
        e.preventDefault();
        showAlert('Please correct the following errors:\n' + errors.join('\n'), 'danger');
    }
});

function showAlert(message, type) {
    const alertDiv = document.createElement('div');
    alertDiv.className = `alert alert-${type} alert-dismissible fade show position-fixed`;
    alertDiv.style.cssText = 'top: 20px; right: 20px; z-index: 1060; min-width: 300px;';
    alertDiv.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    
    document.body.appendChild(alertDiv);
    
    setTimeout(() => {
        if (alertDiv.parentNode) {
            alertDiv.remove();
        }
    }, 5000);
}
</script>
{% endblock %}