{% extends "base.html" %}

{% block title %}Projects - Architecture PM System{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1><i class="bi bi-folder"></i> Projects</h1>
        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addProjectModal">
            <i class="bi bi-plus-circle"></i> Add Project
        </button>
    </div>

    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-striped table-hover">
                    <thead class="table-dark">
                        <tr>
                            <th>Project ID</th>
                            <th>Project Name</th>
                            <th>Client</th>
                            <th>Type</th>
                            <th>Status</th>
                            <th>Contract Value (AED)</th>
                            <th>Planned Cost (AED)</th>
                            <th>Start Date</th>
                            <th>End Date</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for project in projects %}
                        <tr>
                            <td>{{ project.project_id }}</td>
                            <td>{{ project.project_name }}</td>
                            <td>{{ project.client_name }}</td>
                            <td><span class="badge bg-info">{{ project.project_type }}</span></td>
                            <td>
                                {% if project.project_status == 'In Progress' %}
                                <span class="badge bg-success">{{ project.project_status }}</span>
                                {% elif project.project_status == 'Planning' %}
                                <span class="badge bg-warning">{{ project.project_status }}</span>
                                {% else %}
                                <span class="badge bg-secondary">{{ project.project_status }}</span>
                                {% endif %}
                            </td>
                            <td>{{ "{:,.2f}".format(project.contract_value_aed) }}</td>
                            <td>{{ "{:,.2f}".format(project.planned_cost_aed) }}</td>
                            <td>{{ project.project_start_date }}</td>
                            <td>{{ project.project_end_date }}</td>
                            <td>
                                <form method="post" action="/projects/delete/{{ project.project_id }}" style="display:inline;">
                                    <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Are you sure?')">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </form>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Add Project Modal -->
<div class="modal fade" id="addProjectModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add New Project</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="post" action="/projects/create">
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Project ID</label>
                            <input type="text" class="form-control" name="project_id" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Project Name</label>
                            <input type="text" class="form-control" name="project_name" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Client Name</label>
                            <input type="text" class="form-control" name="client_name" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Project Type</label>
                            <select class="form-select" name="project_type" required>
                                <option value="Mixed-Use">Mixed-Use</option>
                                <option value="Hospitality">Hospitality</option>
                                <option value="Office">Office</option>
                                <option value="Residential">Residential</option>
                                <option value="Cultural">Cultural</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Contract Value (AED)</label>
                            <input type="number" step="0.01" class="form-control" name="contract_value_aed" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Planned Cost (AED)</label>
                            <input type="number" step="0.01" class="form-control" name="planned_cost_aed" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Start Date</label>
                            <input type="date" class="form-control" name="project_start_date" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">End Date</label>
                            <input type="date" class="form-control" name="project_end_date" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Project Status</label>
                            <select class="form-select" name="project_status" required>
                                <option value="Planning">Planning</option>
                                <option value="In Progress">In Progress</option>
                                <option value="Design Phase">Design Phase</option>
                                <option value="On Hold">On Hold</option>
                                <option value="Completed">Completed</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Current Phase</label>
                            <input type="text" class="form-control" name="current_phase">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Add Project</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}