{% 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">
                Technical Department Dashboard
            </h2>

            <p class="text-muted mb-0">
                Welcome to MAGNUM ERP - Engineering Operations Platform
            </p>

        </div>

        <a href="/dashboard" class="btn btn-outline-primary">

            <i class="bi bi-arrow-clockwise"></i>

            Refresh Dashboard

        </a>

    </div>

    <!-- KPI Cards -->
    <div class="row g-4">

        <div class="col-lg-3">

            <div class="card shadow-sm">

                <div class="card-body">

                    <h6 class="text-muted">

                        Open Enquiries

                    </h6>

                    <h2 class="text-primary">

                        {{ enquiry_count }}

                    </h2>

                    <small class="text-muted">

                        Registered enquiries

                    </small>

                </div>

            </div>

        </div>

        <div class="col-lg-3">

            <div class="card shadow-sm">

                <div class="card-body">

                    <h6 class="text-muted">

                        Customers

                    </h6>

                    <h2 class="text-success">

                        {{ customer_count }}

                    </h2>

                    <small class="text-muted">

                        Active customers

                    </small>

                </div>

            </div>

        </div>

        <div class="col-lg-3">

            <div class="card shadow-sm">

                <div class="card-body">

                    <h6 class="text-muted">

                        Quotations

                    </h6>

                    <h2 class="text-warning">

                        {{ total_count }}

                    </h2>

                    <small class="text-muted">

                        Processed Quotations

                    </small>

                </div>

            </div>

        </div>

        <div class="col-lg-3">

            <div class="card shadow-sm">

                <div class="card-body">

                    <h6 class="text-muted">

                        Projects

                    </h6>

                    <h2 class="text-danger">

                        0

                    </h2>

                    <small class="text-muted">

                        Module coming soon

                    </small>

                </div>

            </div>

        </div>

    </div>

    <!-- Latest Enquiries -->
    <div class="card shadow-sm">

        <div class="card-header bg-primary text-white d-flex justify-content-between">

            <span>
                <i class="bi bi-envelope-fill"></i>
                Latest Enquiries
            </span>

            <a href="/enquiries" class="btn btn-sm btn-light">

                View All

            </a>

        </div>

        <div class="card-body p-0">

            <table class="table table-hover align-middle mb-0">

                <thead class="table-light">

                    <tr>

                        <th>Enquiry</th>
                        <th>Customer</th>
                        <th>Subject</th>
                        <th>Status</th>
                        <th>Received</th>

                    </tr>

                </thead>

                <tbody>

                {% for enquiry in latest_enquiries %}

                    <tr onclick="location.href='/enquiries/{{ enquiry.id }}'"
                        style="cursor:pointer;">

                        <td>

                            <strong>{{ enquiry.enquiry_number }}</strong>

                        </td>

                        <td>

                            {{ enquiry.customer.company_name }}

                        </td>

                        <td>

                            {{ enquiry.subject }}

                        </td>

                        <td>

                            {% if enquiry.status == "New" %}
                                <span class="badge bg-primary">{{ enquiry.status }}</span>

                            {% elif enquiry.status == "Assigned" %}
                                <span class="badge bg-warning text-dark">{{ enquiry.status }}</span>

                            {% elif enquiry.status == "Quoted" %}
                                <span class="badge bg-success">{{ enquiry.status }}</span>

                            {% elif enquiry.status == "Won" %}
                                <span class="badge bg-success">{{ enquiry.status }}</span>

                            {% elif enquiry.status == "Lost" %}
                                <span class="badge bg-danger">{{ enquiry.status }}</span>

                            {% else %}
                                <span class="badge bg-secondary">{{ enquiry.status }}</span>
                            {% endif %}

                        </td>

                        <td>

                            {{ enquiry.created_at.strftime('%d %b %Y') if enquiry.created_at else "" }}

                        </td>

                    </tr>

                {% else %}

                    <tr>

                        <td colspan="5" class="text-center text-muted py-4">

                            No enquiries found.

                        </td>

                    </tr>

                {% endfor %}

                </tbody>

            </table>

        </div>

    </div>

    <!-- Recent Activity + Tasks -->
    <div class="row mt-4">

        <div class="col-lg-6">

            <div class="card shadow-sm h-100">

                <div class="card-header bg-dark text-white">

                    Recent Activity

                </div>

                <div class="card-body">

                    <ul class="list-group list-group-flush">

                        <li class="list-group-item">

                            📐 Drawing REV-C approved

                        </li>

                        <li class="list-group-item">

                            📋 BOQ updated

                        </li>

                        <li class="list-group-item">

                            🛒 Purchase Order created

                        </li>

                        <li class="list-group-item">

                            🚧 Site visit completed

                        </li>

                        <li class="list-group-item">

                            📦 Material delivered

                        </li>

                    </ul>

                </div>

            </div>

        </div>

        <div class="col-lg-6">

            <div class="card shadow-sm h-100">

                <div class="card-header bg-success text-white">

                    Assigned Tasks

                </div>

                <div class="card-body p-0">

                    <table class="table table-hover mb-0">

                        <thead>

                            <tr>

                                <th>Task</th>

                                <th>Engineer</th>

                                <th>Status</th>

                            </tr>

                        </thead>

                        <tbody>

                            <tr>

                                <td>Prepare BOQ</td>

                                <td>John Smith</td>

                                <td>

                                    <span class="badge bg-warning">

                                        In Progress

                                    </span>

                                </td>

                            </tr>

                            <tr>

                                <td>Review Drawings</td>

                                <td>Mary Brown</td>

                                <td>

                                    <span class="badge bg-primary">

                                        Assigned

                                    </span>

                                </td>

                            </tr>

                            <tr>

                                <td>Site Visit</td>

                                <td>Peter Dube</td>

                                <td>

                                    <span class="badge bg-success">

                                        Scheduled

                                    </span>

                                </td>

                            </tr>

                            <tr>

                                <td>Compile Quote</td>

                                <td>Technical Office</td>

                                <td>

                                    <span class="badge bg-info">

                                        Waiting

                                    </span>

                                </td>

                            </tr>

                        </tbody>

                    </table>

                </div>

            </div>

        </div>

    </div>

</div>

{% endblock %}