{% 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>
                {{ project.project_name }}
            </h2>
            <p class="text-muted mb-0">{{ project.project_code }} | {{ project.status }}</p>
        </div>
        <div>
            <a href="/projects/{{ project.id }}/edit" class="btn btn-warning"><i class="bi bi-pencil"></i> Edit</a>
            <a href="/projects" class="btn btn-secondary"><i class="bi bi-arrow-left"></i> Back</a>
        </div>
    </div>

    <!-- ========================================================== -->
    <!-- PROJECT INFO 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">Progress</small>
                    <h2 class="text-white">{{ project.progress|default(0) }}%</h2>
                    <small>{{ task_analytics.completion_rate|default(0)|round(1) }}% tasks complete</small>
                </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">Budget</small>
                    <h2 class="text-white">{{ "%.2f"|format(project.budget|default(0)) }}</h2>
                    <small>Actual: {{ "%.2f"|format(project.actual_cost|default(0)) }}</small>
                </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">Tasks</small>
                    <h2>{{ task_analytics.total_tasks|default(0) }}</h2>
                    <small>{{ task_analytics.completed_tasks|default(0) }} completed</small>
                </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">Man Hours</small>
                    <h2 class="text-white">{{ task_analytics.total_estimated_hours|default(0) }}</h2>
                    <small>{{ task_analytics.completed_hours|default(0) }} completed</small>
                </div>
            </div>
        </div>
    </div>

    <!-- ========================================================== -->
    <!-- CLIENT & ORDER INFO - UPDATED -->
    <!-- ========================================================== -->

    <div class="card shadow-sm mb-4">
        <div class="card-header bg-primary text-white">
            <i class="bi bi-building"></i> Client & Order Information
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-4">
                    <small class="text-muted">Client</small>
                    <h6><strong>{{ project.customer.company_name }}</strong></h6>
                </div>
                <div class="col-md-4">
                    <small class="text-muted">Client Order Number (PO)</small>
                    <h6><strong>{{ project.client_order_number or "-" }}</strong></h6>
                </div>
                <div class="col-md-4">
                    <small class="text-muted">Client LPO Number</small>
                    <h6><strong>{{ project.client_lpo_number or "-" }}</strong></h6>
                </div>
            </div>
            <div class="row mt-2">
                <div class="col-md-4">
                    <small class="text-muted">MEGCL Work Order Reference</small>
                    <h6><strong><code>{{ project.work_order_ref or "-" }}</code></strong></h6>
                </div>
                <div class="col-md-4">
                    <small class="text-muted">Date Received</small>
                    <h6><strong>{{ project.date_received.strftime('%d %b %Y') if project.date_received else "-" }}</strong></h6>
                </div>
                <div class="col-md-4">
                    <small class="text-muted">Job Description</small>
                    <h6><strong>{{ project.job_description or project.description or "-" }}</strong></h6>
                </div>
            </div>
        </div>
    </div>

    <!-- ========================================================== -->
    <!-- ASSIGNMENT & REMARKS -->
    <!-- ========================================================== -->

    <div class="row g-4 mb-4">
        <div class="col-md-6">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-info text-white">
                    <i class="bi bi-person-badge"></i> Assignment Details
                </div>
                <div class="card-body">
                    <table class="table">
                        <tr>
                            <th width="150">Assigned To</th>
                            <td>
                                {% if project.assigned_to %}
                                <span class="badge bg-info fs-6">{{ project.assigned_to }}</span>
                                {% else %}
                                <span class="text-muted">Unassigned</span>
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th>Assigned By</th>
                            <td><strong>{{ project.assigned_by or "-" }}</strong></td>
                        </tr>
                        <tr>
                            <th>Quotation Reference</th>
                            <td>
                                {% if project.boq_id %}
                                <a href="/boq/view/{{ project.boq_id }}">
                                    <code>{{ project.boq.quotation_number }}</code>
                                </a>
                                {% else %}
                                <span class="text-muted">-</span>
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th>Enquiry Reference</th>
                            <td>
                                {% if project.enquiry_id %}
                                <a href="/enquiries/{{ project.enquiry_id }}">
                                    <code>{{ project.enquiry.enquiry_number }}</code>
                                </a>
                                {% else %}
                                <span class="text-muted">-</span>
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th>Quantities Ordered</th>
                            <td>
                                {% if project.boq and project.boq.items %}
                                    <strong>{{ project.boq.items|sum(attribute='qty')|round(2) }}</strong>
                                {% else %}
                                    <span class="text-muted">0</span>
                                {% endif %}
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-warning text-dark">
                    <i class="bi bi-chat-dots"></i> Remarks / Comments
                </div>
                <div class="card-body">
                    {% if project.remarks %}
                    <div class="alert alert-light border" style="max-height: 200px; overflow-y: auto;">
                        <p style="white-space: pre-wrap; font-size: 0.9rem;">{{ project.remarks }}</p>
                    </div>
                    {% else %}
                    <p class="text-muted text-center py-3">No remarks yet.</p>
                    {% endif %}
                    <form method="POST" action="/projects/{{ project.id }}/remarks">
                        <div class="mb-2">
                            <textarea class="form-control" name="remarks" rows="2" placeholder="Add a comment or instruction..."></textarea>
                        </div>
                        <button type="submit" class="btn btn-warning btn-sm w-100">
                            <i class="bi bi-send"></i> Add Comment
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- ========================================================== -->
    <!-- PROGRESS & TIMELINE -->
    <!-- ========================================================== -->

    <div class="row g-4 mb-4">
        <div class="col-md-6">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-primary text-white"><i class="bi bi-graph-up-arrow"></i> Project Progress</div>
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <span>Overall Progress</span>
                        <span>{{ project.progress|default(0) }}%</span>
                    </div>
                    <div class="progress" style="height: 30px;">
                        <div class="progress-bar bg-{% if (project.progress|default(0)) < 30 %}danger{% elif (project.progress|default(0)) < 70 %}warning{% else %}success{% endif %} progress-bar-striped progress-bar-animated" 
                             role="progressbar" style="width: {{ project.progress|default(0) }}%;" 
                             aria-valuenow="{{ project.progress|default(0) }}" aria-valuemin="0" aria-valuemax="100">
                            {{ project.progress|default(0) }}%
                        </div>
                    </div>
                    <hr>
                    <div class="row text-center">
                        <div class="col-4">
                            <h6 class="text-muted">Tasks</h6>
                            <h4>{{ task_analytics.completion_rate|default(0)|round(1) }}%</h4>
                            <small>{{ task_analytics.completed_tasks|default(0) }}/{{ task_analytics.total_tasks|default(0) }}</small>
                        </div>
                        <div class="col-4">
                            <h6 class="text-muted">Financial</h6>
                            <h4 class="text-{% if financials.variance_percentage|default(0) < -10 %}danger{% elif financials.variance_percentage|default(0) < 0 %}warning{% else %}success{% endif %}">
                                {{ financials.variance_percentage|default(0)|round(1) }}%
                            </h4>
                            <small>{{ financials.status }}</small>
                        </div>
                        <div class="col-4">
                            <h6 class="text-muted">Timeline</h6>
                            <h4 class="text-{% if timeline.status == 'Overdue' %}danger{% elif timeline.status == 'Urgent' %}warning{% else %}success{% endif %}">
                                {{ timeline.days_remaining|default(0) }}d
                            </h4>
                            <small>{{ timeline.status }}</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-dark text-white"><i class="bi bi-calendar"></i> Timeline</div>
                <div class="card-body">
                    <table class="table">
                        <tr><th width="150">Start Date</th><td>{{ project.start_date.strftime('%d %b %Y') if project.start_date else "Not set" }}</td></tr>
                        <tr><th>Expected End</th><td>{{ project.expected_end_date.strftime('%d %b %Y') if project.expected_end_date else "Not set" }}</td></tr>
                        <tr><th>Days Planned</th><td>{{ timeline.days_planned|default(0) }} days</td></tr>
                        <tr><th>Days Elapsed</th><td>{{ timeline.days_elapsed|default(0) }} days</td></tr>
                        <tr><th>Days Remaining</th>
                            <td><span class="badge bg-{% if timeline.days_remaining|default(0) < 0 %}danger{% elif timeline.days_remaining|default(0) < 7 %}warning{% else %}success{% endif %} fs-6">{{ timeline.days_remaining|default(0) }} days</span></td>
                        </tr>
                        <tr><th>Status</th>
                            <td><span class="badge bg-{% if timeline.status == 'Overdue' %}danger{% elif timeline.status == 'Urgent' %}warning{% elif timeline.status == 'Approaching' %}info{% else %}success{% endif %} fs-6">{{ timeline.status }}</span></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- ========================================================== -->
    <!-- MATERIALS & FINANCIALS -->
    <!-- ========================================================== -->

    <div class="row g-4 mb-4">
        <div class="col-md-6">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-success text-white"><i class="bi bi-box-seam"></i> Materials Used</div>
                <div class="card-body p-0">
                    {% if materials.material_list %}
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead class="table-light"><tr><th>Material</th><th>Qty</th><th>Unit</th><th>Total</th></tr></thead>
                            <tbody>
                                {% for item in materials.material_list %}
                                <tr>
                                    <td>{{ item.description|truncate(30) }}</td>
                                    <td>{{ item.quantity }}</td>
                                    <td>{{ item.unit }}</td>
                                    <td>{{ "%.2f"|format(item.total) }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                            <tfoot class="table-light">
                                <tr><th colspan="3">Total Materials Cost</th><th><strong>{{ "%.2f"|format(materials.total_materials_cost) }}</strong></th></tr>
                                <tr><th colspan="3">Total Quantity</th><th>{{ materials.total_quantity|round(2) }}</th></tr>
                            </tfoot>
                        </table>
                    </div>
                    {% else %}
                    <p class="text-center text-muted py-4"><i class="bi bi-inbox fs-1 d-block"></i>No materials linked to this project</p>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-warning text-dark"><i class="bi bi-currency-dollar"></i> Financial Summary</div>
                <div class="card-body">
                    <table class="table">
                        <tr><th>Budget</th><td class="text-end"><strong>{{ "%.2f"|format(financials.budget|default(0)) }}</strong></td></tr>
                        <tr><th>BOQ Total</th><td class="text-end">{{ "%.2f"|format(financials.boq_total|default(0)) }}</td></tr>
                        <tr><th>Actual Cost</th><td class="text-end">{{ "%.2f"|format(financials.actual_cost|default(0)) }}</td></tr>
                        <tr class="table-light"><th><strong>Variance</strong></th>
                            <td class="text-end"><strong class="text-{% if financials.variance|default(0) >= 0 %}success{% else %}danger{% endif %}">{{ "%.2f"|format(financials.variance|default(0)) }}</strong></td>
                        </tr>
                        <tr><th>Variance %</th>
                            <td class="text-end"><span class="badge bg-{% if financials.variance_percentage|default(0) < -10 %}danger{% elif financials.variance_percentage|default(0) < 0 %}warning{% else %}success{% endif %} fs-6">{{ financials.variance_percentage|default(0)|round(1) }}%</span></td>
                        </tr>
                        <tr><th>Status</th>
                            <td class="text-end"><span class="badge bg-{% if financials.status == 'Over Budget' %}danger{% elif financials.status == 'At Risk' %}warning{% elif financials.status == 'Under Budget' %}success{% else %}info{% endif %} fs-6">{{ financials.status }}</span></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- ========================================================== -->
    <!-- TASK SUMMARY & MAN HOURS -->
    <!-- ========================================================== -->

    <div class="card shadow-sm mb-4">
        <div class="card-header bg-secondary text-white"><i class="bi bi-clock-history"></i> Task Summary & Man Hours</div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-6">
                    <h6>Task Breakdown</h6>
                    <div class="d-flex justify-content-between mb-2"><span>Total Tasks</span><strong>{{ task_analytics.total_tasks|default(0) }}</strong></div>
                    <div class="d-flex justify-content-between mb-2"><span>Completed</span><strong class="text-success">{{ task_analytics.completed_tasks|default(0) }}</strong></div>
                    <div class="d-flex justify-content-between mb-2"><span>In Progress</span><strong class="text-warning">{{ task_analytics.in_progress_tasks|default(0) }}</strong></div>
                    <div class="d-flex justify-content-between mb-2"><span>To Do</span><strong class="text-secondary">{{ task_analytics.todo_tasks|default(0) }}</strong></div>
                </div>
                <div class="col-md-6">
                    <h6>Man Hours (Estimated)</h6>
                    <div class="d-flex justify-content-between mb-2"><span>Total Hours</span><strong>{{ task_analytics.total_estimated_hours|default(0) }}</strong></div>
                    <div class="d-flex justify-content-between mb-2"><span>Completed Hours</span><strong class="text-success">{{ task_analytics.completed_hours|default(0) }}</strong></div>
                    <div class="d-flex justify-content-between mb-2"><span>Remaining Hours</span><strong class="text-warning">{{ task_analytics.remaining_hours|default(0) }}</strong></div>
                    <div class="progress mt-2" style="height: 20px;">
                        <div class="progress-bar bg-success" role="progressbar" style="width: {{ task_analytics.completion_rate|default(0) }}%;" aria-valuenow="{{ task_analytics.completion_rate|default(0) }}" aria-valuemin="0" aria-valuemax="100">{{ task_analytics.completion_rate|default(0)|round(1) }}%</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ========================================================== -->
    <!-- TASK LIST -->
    <!-- ========================================================== -->

    <div class="card shadow-sm">
        <div class="card-header bg-dark text-white"><i class="bi bi-list-task"></i> Linked Tasks <span class="badge bg-light text-dark ms-2">{{ tasks|length }}</span></div>
        <div class="card-body p-0">
            {% if tasks %}
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead class="table-light"><tr><th>Task</th><th>Status</th><th>Priority</th><th>Assigned To</th><th>Due Date</th><th></th></tr></thead>
                    <tbody>
                        {% for task in tasks %}
                        <tr>
                            <td>{{ task.title }}</td>
                            <td><span class="badge bg-{% if task.status == 'Completed' %}success{% elif task.status == 'In Progress' %}warning{% else %}secondary{% endif %}">{{ task.status }}</span></td>
                            <td><span class="badge bg-{% if task.priority == 'High' %}danger{% elif task.priority == 'Medium' %}warning{% else %}info{% endif %}">{{ task.priority }}</span></td>
                            <td>{{ task.assigned_to or "-" }}</td>
                            <td>{{ task.due_date.strftime('%d %b %Y') if task.due_date else "-" }}</td>
                            <td><a href="/task-board/{{ task.id }}" class="btn btn-sm btn-outline-primary"><i class="bi bi-eye"></i></a></td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <p class="text-center text-muted py-4"><i class="bi bi-inbox fs-1 d-block"></i>No tasks linked to this project</p>
            {% endif %}
        </div>
    </div>

    <!-- ========================================================== -->
    <!-- QUICK ACTIONS -->
    <!-- ========================================================== -->

    <div class="row mt-4">
        <div class="col-md-12">
            <div class="card shadow-sm">
                <div class="card-header bg-dark text-white"><i class="bi bi-lightning-fill"></i> Quick Actions</div>
                <div class="card-body">
                    <div class="d-flex gap-2 flex-wrap">
                        <a href="/projects/{{ project.id }}/edit" class="btn btn-warning"><i class="bi bi-pencil"></i> Edit Project</a>
                        <a href="/projects/{{ project.id }}/procurement" class="btn btn-info"><i class="bi bi-truck"></i> Procurement List</a>
                        <a href="/enquiries/new?customer={{ project.customer_id }}" class="btn btn-primary"><i class="bi bi-envelope-plus"></i> New Enquiry</a>
                        <a href="/boq/builder/{{ project.enquiry_id if project.enquiry_id else 0 }}" class="btn btn-success"><i class="bi bi-file-earmark-text"></i> Create BOQ</a>
                        <form method="POST" action="/projects/{{ project.id }}/status" class="d-inline">
                            <select name="status" class="form-select d-inline-block w-auto">
                                <option value="Pipeline" {% if project.status == 'Pipeline' %}selected{% endif %}>Pipeline</option>
                                <option value="Design" {% if project.status == 'Design' %}selected{% endif %}>Design</option>
                                <option value="Construction" {% if project.status == 'Construction' %}selected{% endif %}>Construction</option>
                                <option value="On Hold" {% if project.status == 'On Hold' %}selected{% endif %}>On Hold</option>
                                <option value="Completed" {% if project.status == 'Completed' %}selected{% endif %}>Completed</option>
                                <option value="Cancelled" {% if project.status == 'Cancelled' %}selected{% endif %}>Cancelled</option>
                            </select>
                            <button type="submit" class="btn btn-success"><i class="bi bi-save"></i> Update Status</button>
                        </form>
                        <form method="POST" action="/projects/{{ project.id }}/progress" class="d-inline">
                            <input type="number" name="progress" value="{{ project.progress|default(0) }}" min="0" max="100" style="width:80px;" class="form-control d-inline-block w-auto">
                            <button type="submit" class="btn btn-info"><i class="bi bi-percent"></i> Update Progress</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

{% endblock %}