{% extends "base.html" %}

{% block content %}

<div class="container-fluid">

    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="fw-bold">
                <i class="bi bi-folder2-open text-primary"></i>
                Projects
            </h2>
            <p class="text-muted mb-0">Manage all engineering projects</p>
        </div>
        <div>
            <a href="/projects/reports" class="btn btn-info me-2">
                <i class="bi bi-bar-chart-line"></i> Reports
            </a>
            <a href="/projects/new" class="btn btn-primary">
                <i class="bi bi-plus-circle"></i> New Project
            </a>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="row g-3 mb-4">
        <div class="col-md-3">
            <div class="card shadow-sm border-0 bg-primary text-white">
                <div class="card-body">
                    <small class="text-white-50">Total Projects</small>
                    <h2 class="text-white">{{ projects|length }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card shadow-sm border-0 bg-warning text-dark">
                <div class="card-body">
                    <small class="text-dark-50">In Progress</small>
                    <h2>{{ projects|selectattr('status', 'in', ['Design', 'Construction'])|list|length }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card shadow-sm border-0 bg-success text-white">
                <div class="card-body">
                    <small class="text-white-50">Completed</small>
                    <h2 class="text-white">{{ projects|selectattr('status', 'equalto', 'Completed')|list|length }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card shadow-sm border-0 bg-info text-white">
                <div class="card-body">
                    <small class="text-white-50">Pipeline</small>
                    <h2 class="text-white">{{ projects|selectattr('status', 'equalto', 'Pipeline')|list|length }}</h2>
                </div>
            </div>
        </div>
    </div>

    <!-- Filter Bar -->
    <div class="card shadow-sm mb-4">
        <div class="card-body">
            <form method="get" action="/projects" class="row g-3">
                <div class="col-md-3">
                    <div class="input-group">
                        <span class="input-group-text"><i class="bi bi-search"></i></span>
                        <input type="text" class="form-control" name="search" placeholder="Search projects..." value="{{ search or '' }}">
                    </div>
                </div>
                <div class="col-md-3">
                    <select class="form-select" name="status_filter">
                        <option value="">All Statuses</option>
                        <option value="Pipeline" {% if status_filter == 'Pipeline' %}selected{% endif %}>Pipeline</option>
                        <option value="Design" {% if status_filter == 'Design' %}selected{% endif %}>Design</option>
                        <option value="Construction" {% if status_filter == 'Construction' %}selected{% endif %}>Construction</option>
                        <option value="Completed" {% if status_filter == 'Completed' %}selected{% endif %}>Completed</option>
                        <option value="On Hold" {% if status_filter == 'On Hold' %}selected{% endif %}>On Hold</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <select class="form-select" name="assigned_filter">
                        <option value="">All Users</option>
                        {% for user in users %}
                        <option value="{{ user.username }}" {% if assigned_filter == user.username %}selected{% endif %}>
                            {{ user.full_name or user.username }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-3">
                    <button type="submit" class="btn btn-primary w-100"><i class="bi bi-funnel"></i> Filter</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Projects Table -->
    <div class="card shadow-sm">
        <div class="card-header bg-primary text-white d-flex justify-content-between">
            <span><i class="bi bi-folder2-open"></i> Project List</span>
            <span class="badge bg-light text-dark">{{ projects|length }} Projects</span>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>Client</th>
                            <th>LPO/JCARD NO</th>
                            <th>Work Order Ref</th>  <!-- ✅ NEW -->
                            <th>Date Received</th>
                            <th>Job Description</th>
                            <th>Quotation</th>
                            <th>Enquiry</th>
                            <th>Qty Ordered</th>
                            <th>Assigned To</th>
                            <th>Section</th>
                            <th>Status</th>
                            <th>Remarks</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for project in projects %}
                        <tr>
                            <td>
                                <strong>{{ project.customer.company_name }}</strong>
                            </td>
                            
                            <td>
                                {% if project.client_lpo_number %}
                                <strong class="text-dark">{{ project.client_lpo_number }}</strong>
                                {% else %}
                                <strong class="text-dark">-</strong>
                                {% endif %}
                            </td>
                            <td>
                                {% if project.work_order_ref and project.work_order_ref != 'undefined' %}
                                <strong class="text-dark">{{ project.work_order_ref }}</strong>
                                {% else %}
                                <strong class="text-dark">-</strong>
                                {% endif %}
                            </td>
                            <td>
                                {{ project.date_received.strftime('%d %b %Y') if project.date_received else project.created_at.strftime('%d %b %Y') }}
                            </td>
                            <td>
                                <span title="{{ project.job_description or project.description or project.project_name }}">
                                    {{ (project.job_description or project.description or project.project_name)|truncate(30) }}
                                </span>
                            </td>
                            <td>
                                {% if project.boq_id %}
                                <a href="/boq/view/{{ project.boq_id }}" class="text-decoration-none">
                                    <code>{{ project.boq.quotation_number }}</code>
                                </a>
                                {% else %}
                                <span class="text-muted">-</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if project.enquiry_id %}
                                <a href="/enquiries/{{ project.enquiry_id }}" class="text-decoration-none">
                                    <code>{{ project.enquiry.enquiry_number }}</code>
                                </a>
                                {% else %}
                                <span class="text-muted">-</span>
                                {% endif %}
                            </td>
                            <td class="text-center">
                                {% if project.boq and project.boq.items %}
                                    {{ project.boq.items|sum(attribute='qty')|round(2) }}
                                {% else %}
                                    <span class="text-muted">0</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if project.assigned_to %}
                                <span class="badge bg-info">
                                    {{ project.assigned_to }}
                                </span>
                                {% else %}
                                <span class="text-muted">Unassigned</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if project.assigned_to %}
                                    {% set user = users|selectattr('username', 'equalto', project.assigned_to)|first %}
                                    {% if user %}
                                    <span class="badge bg-secondary">{{ user.department or user.role or "N/A" }}</span>
                                    {% else %}
                                    <span class="text-muted">-</span>
                                    {% endif %}
                                {% else %}
                                <span class="text-muted">-</span>
                                {% endif %}
                            </td>
                            <td>
                                <span class="badge bg-{% if project.status == 'Pipeline' %}secondary{% elif project.status == 'Design' %}info{% elif project.status == 'Construction' %}warning{% elif project.status == 'Completed' %}success{% elif project.status == 'On Hold' %}danger{% else %}dark{% endif %}">
                                    {{ project.status }}
                                </span>
                            </td>
                            <td>
                                <span title="{{ project.remarks or '' }}" class="text-truncate d-inline-block" style="max-width: 100px;">
                                    {% if project.remarks %}
                                    <i class="bi bi-chat-dots text-muted"></i>
                                    {{ project.remarks|truncate(15) }}
                                    {% else %}
                                    <span class="text-muted">-</span>
                                    {% endif %}
                                </span>
                            </td>
                            <td>
                                <a href="/projects/{{ project.id }}" class="btn btn-sm btn-outline-primary">
                                    <i class="bi bi-eye"></i>
                                </a>
                            </td>
                        </tr>
                        {% else %}
                        <tr>
                            <td colspan="14" class="text-center text-muted py-4">
                                <i class="bi bi-folder2-open fs-1 d-block mb-2"></i>
                                No projects found. Create your first project!
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>

{% endblock %}