{% 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">

                        Module Loading.

                    </td>

                </tr>

            {% endfor %}

            </tbody>

        </table>

    </div>

</div>

        <!-- ===================================================== -->
        <!-- Upcoming Deadlines -->
        <!-- ===================================================== -->

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

            <div class="card shadow-sm">

                <div class="card-header bg-warning">

                    Upcoming Deadlines

                </div>

                <div class="card-body">

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

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

                            Hospital Tender

                            <small class="text-muted d-block">

                                Tomorrow

                            </small>

                        </li>

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

                            Generator Quotation

                            <small class="text-muted d-block">

                                Friday

                            </small>

                        </li>

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

                            Site Visit

                            <small class="text-muted d-block">

                                Monday

                            </small>

                        </li>

                    </ul>

                </div>

            </div>

        </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>

    <!-- ===================================================== -->
    <!-- Charts (Coming Soon) -->
    <!-- ===================================================== -->

    <div class="row mt-4">

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

            <div class="card shadow-sm">

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

                    Enquiries by Status

                </div>

                <div class="card-body text-center py-5">

                    <i class="bi bi-pie-chart fs-1 text-muted"></i>

                    <p class="text-muted mt-3">

                        Live chart coming soon.

                    </p>

                </div>

            </div>

        </div>

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

            <div class="card shadow-sm">

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

                    Engineer Workload

                </div>

                <div class="card-body text-center py-5">

                    <i class="bi bi-bar-chart fs-1 text-muted"></i>

                    <p class="text-muted mt-3">

                        Live chart coming soon.

                    </p>

                </div>

            </div>

        </div>

    </div>

</div>

{% endblock %}