{% extends "layout.html" %}

{% block content %}
<div class="timetrack-container">
    <h2>Edit Project: {{ project.name }}</h2>
    
    <form method="POST" action="{{ url_for('projects.edit_project', project_id=project.id) }}" class="project-form">
        <div class="form-row">
            <div class="form-group">
                <label for="name">Project Name *</label>
                <input type="text" id="name" name="name" required 
                       value="{{ request.form.name if request.form.name else project.name }}"
                       placeholder="Enter project name">
            </div>
            
            <div class="form-group">
                <label for="code">Project Code *</label>
                <input type="text" id="code" name="code" required 
                       value="{{ request.form.code if request.form.code else project.code }}"
                       placeholder="e.g., PRJ001" maxlength="20" style="text-transform: uppercase;">
            </div>
        </div>
        
        <div class="form-group">
            <label for="description">Description</label>
            <textarea id="description" name="description" rows="3" 
                      placeholder="Enter project description">{{ request.form.description if request.form.description else (project.description or '') }}</textarea>
        </div>
        
        <div class="form-row">
            <div class="form-group">
                <label for="team_id">Assigned Team</label>
                <select id="team_id" name="team_id">
                    <option value="">All Teams</option>
                    {% for team in teams %}
                    <option value="{{ team.id }}" 
                            {% if (request.form.team_id and request.form.team_id|int == team.id) or (not request.form.team_id and project.team_id == team.id) %}selected{% endif %}>
                        {{ team.name }}
                    </option>
                    {% endfor %}
                </select>
            </div>
            
            <div class="form-group">
                <label for="category_id">Project Category</label>
                <select id="category_id" name="category_id">
                    <option value="">No Category</option>
                    {% for category in categories %}
                    <option value="{{ category.id }}" 
                            {% if (request.form.category_id and request.form.category_id|int == category.id) or (not request.form.category_id and project.category_id == category.id) %}selected{% endif %}>
                        {{ category.icon or '📁' }} {{ category.name }}
                    </option>
                    {% endfor %}
                </select>
            </div>
        </div>
        
        <div class="form-row">
            <div class="form-group">
                <label class="checkbox-label">
                    <input type="checkbox" name="is_active" 
                           {% if (request.form.is_active and request.form.is_active == 'on') or (not request.form and project.is_active) %}checked{% endif %}>
                    Active Project
                </label>
            </div>
        </div>
        
        <div class="form-row">
            <div class="form-group">
                <label for="start_date">Start Date</label>
                <input type="date" id="start_date" name="start_date" 
                       value="{{ request.form.start_date if request.form.start_date else (project.start_date.strftime('%Y-%m-%d') if project.start_date else '') }}">
            </div>
            
            <div class="form-group">
                <label for="end_date">End Date</label>
                <input type="date" id="end_date" name="end_date" 
                       value="{{ request.form.end_date if request.form.end_date else (project.end_date.strftime('%Y-%m-%d') if project.end_date else '') }}">
            </div>
        </div>
        
        <div class="project-info">
            <div class="info-row">
                <span class="info-label">Created by:</span>
                <span class="info-value">{{ project.created_by.username }}</span>
            </div>
            <div class="info-row">
                <span class="info-label">Created on:</span>
                <span class="info-value">{{ project.created_at.strftime('%Y-%m-%d %H:%M') }}</span>
            </div>
            <div class="info-row">
                <span class="info-label">Time entries:</span>
                <span class="info-value">{{ project.time_entries|length }}</span>
            </div>
        </div>
        
        <div class="form-actions">
            <button type="submit" class="btn">Update Project</button>
            <a href="{{ url_for('projects.admin_projects') }}" class="btn btn-secondary">Cancel</a>
        </div>
    </form>
    
    <!-- Danger Zone (only for admins) -->
    {% if g.user.role in [Role.ADMIN, Role.SYSTEM_ADMIN] %}
    <div class="danger-zone">
        <h3><i class="ti ti-alert-triangle"></i> Danger Zone</h3>
        <div class="danger-content">
            <p><strong>Delete Project</strong></p>
            <p>Once you delete a project, there is no going back. This will permanently delete:</p>
            <ul>
                <li>All tasks and subtasks in this project</li>
                <li>All time entries logged to this project</li>
                <li>All sprints associated with this project</li>
                <li>All comments and activity history</li>
            </ul>
            <form method="POST" action="{{ url_for('projects.delete_project', project_id=project.id) }}" onsubmit="return confirm('Are you absolutely sure you want to delete {{ project.name }}? This action cannot be undone!');">
                <button type="submit" class="btn btn-danger">Delete This Project</button>
            </form>
        </div>
    </div>
    {% endif %}
</div>

<style>
.project-form {
    max-width: 600px;
    margin: 0 auto;
}

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

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

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #333;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    margin-top: 1.5rem;
}

.checkbox-label input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #e9ecef;
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #4CAF50;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.project-info {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 6px;
    margin: 1.5rem 0;
}

.info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.info-row:last-child {
    margin-bottom: 0;
}

.info-label {
    font-weight: 500;
    color: #666;
}

.info-value {
    color: #333;
}

.form-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2rem;
}

/* Button styles now centralized in main style.css */

#code {
    text-transform: uppercase;
}

/* Danger Zone */
.danger-zone {
    margin-top: 3rem;
    padding: 1.5rem;
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.danger-zone h3 {
    color: #dc2626;
    margin-top: 0;
    margin-bottom: 1rem;
}

.danger-content {
    color: #7f1d1d;
}

.danger-content p {
    margin-bottom: 0.5rem;
}

.danger-content ul {
    margin: 1rem 0 1.5rem 2rem;
}

.danger-content .btn-danger {
    background-color: #dc2626;
    color: white;
    border: none;
    padding: 0.5rem 1.5rem;
}

.danger-content .btn-danger:hover {
    background-color: #b91c1c;
}
</style>

<script>
// Auto-uppercase project code
document.getElementById('code').addEventListener('input', function(e) {
    e.target.value = e.target.value.toUpperCase();
});
</script>
{% endblock %}