{% extends "base.html" %}

{% block content %}

<div class="container-fluid">

    <!-- ===================================================== -->
    <!-- Header with Logout Button -->
    <!-- ===================================================== -->

    <div class="d-flex justify-content-between align-items-center mb-4">

        <div>

            <h2 class="fw-bold">
                <i class="bi bi-speedometer2 text-primary"></i>
                Technical Department Dashboard
            </h2>

            <p class="text-muted mb-0">
                Welcome back, <strong>{{ current_user.full_name or current_user.username }}</strong>!
                Here's your engineering operations overview.
            </p>

        </div>

        <div class="d-flex gap-2 align-items-center">

            <span class="badge bg-primary fs-6">
                <i class="bi bi-person-circle"></i> {{ current_user.role }}
            </span>

            <a href="/dashboard" class="btn btn-outline-primary btn-sm">
                <i class="bi bi-arrow-clockwise"></i> Refresh
            </a>

            <!-- ✅ Logout Button -->
            <a href="/auth/logout" class="btn btn-danger btn-sm">
                <i class="bi bi-box-arrow-right"></i> Logout
            </a>

        </div>

    </div>

    <!-- ===================================================== -->
    <!-- KPI Cards -->
    <!-- ===================================================== -->

    <div class="row g-4 mb-4">

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

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

                <div class="card-body">

                    <div class="d-flex justify-content-between align-items-center">

                        <div>

                            <h6 class="text-muted mb-1">

                                <i class="bi bi-envelope-paper text-primary"></i>

                                Open Enquiries

                            </h6>

                            <h2 class="fw-bold text-primary mb-0">

                                {{ enquiry_count }}

                            </h2>

                        </div>

                        <div class="bg-primary bg-opacity-10 p-3 rounded-circle">

                            <i class="bi bi-envelope-paper fs-3 text-primary"></i>

                        </div>

                    </div>

                    <small class="text-muted">

                        <i class="bi bi-arrow-up text-success"></i>

                        +12% from last month

                    </small>

                </div>

            </div>

        </div>

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

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

                <div class="card-body">

                    <div class="d-flex justify-content-between align-items-center">

                        <div>

                            <h6 class="text-muted mb-1">

                                <i class="bi bi-buildings text-success"></i>

                                Customers

                            </h6>

                            <h2 class="fw-bold text-success mb-0">

                                {{ customer_count }}

                            </h2>

                        </div>

                        <div class="bg-success bg-opacity-10 p-3 rounded-circle">

                            <i class="bi bi-buildings fs-3 text-success"></i>

                        </div>

                    </div>

                    <small class="text-muted">

                        <i class="bi bi-arrow-up text-success"></i>

                        +5 new this month

                    </small>

                </div>

            </div>

        </div>

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

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

                <div class="card-body">

                    <div class="d-flex justify-content-between align-items-center">

                        <div>

                            <h6 class="text-muted mb-1">

                                <i class="bi bi-file-earmark-text text-warning"></i>

                                Quotations

                            </h6>

                            <h2 class="fw-bold text-warning mb-0">

                                {{ total_count }}

                            </h2>

                        </div>

                        <div class="bg-warning bg-opacity-10 p-3 rounded-circle">

                            <i class="bi bi-file-earmark-text fs-3 text-warning"></i>

                        </div>

                    </div>

                    <small class="text-muted">

                        <i class="bi bi-arrow-up text-success"></i>

                        +8 this month

                    </small>

                </div>

            </div>

        </div>

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

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

                <div class="card-body">

                    <div class="d-flex justify-content-between align-items-center">

                        <div>

                            <h6 class="text-muted mb-1">

                                <i class="bi bi-box-seam text-info"></i>

                                Materials

                            </h6>

                            <h2 class="fw-bold text-info mb-0">

                                {{ material_count }}

                            </h2>

                        </div>

                        <div class="bg-info bg-opacity-10 p-3 rounded-circle">

                            <i class="bi bi-box-seam fs-3 text-info"></i>

                        </div>

                    </div>

                    <small class="text-muted">

                        <i class="bi bi-arrow-up text-success"></i>

                        +3 new materials

                    </small>

                </div>

            </div>

        </div>

    </div>

    <!-- ===================================================== -->
    <!-- Two Column Layout -->
    <!-- ===================================================== -->

    <div class="row g-4">

        <!-- Left Column -->
        <div class="col-lg-8">

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

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

                    <span>

                        <i class="bi bi-envelope-fill"></i>

                        Latest Enquiries

                    </span>

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

                        <i class="bi bi-eye"></i>

                        View All

                    </a>

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

                                    <th>Customer</th>

                                    <th>Subject</th>

                                    <th>Status</th>

                                    <th>Date</th>

                                    <th></th>

                                </tr>

                            </thead>

                            <tbody>

                            {% for enquiry in latest_enquiries %}

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

                                    <td>

                                        <strong class="text-primary">

                                            {{ enquiry.enquiry_number }}

                                        </strong>

                                    </td>

                                    <td>

                                        {{ enquiry.customer.company_name }}

                                    </td>

                                    <td>

                                        {{ enquiry.subject|truncate(30) }}

                                    </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-info">{{ 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>

                                    <td>

                                        <i class="bi bi-chevron-right text-muted"></i>

                                    </td>

                                </tr>

                            {% else %}

                                <tr>

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

                                        <i class="bi bi-inbox fs-1 d-block"></i>

                                        No enquiries found.

                                    </td>

                                </tr>

                            {% endfor %}

                            </tbody>

                        </table>

                    </div>

                </div>

            </div>

        </div>

        <!-- Right Column -->
        <div class="col-lg-4">

            <!-- Quick Actions -->
            <div class="card shadow-sm border-0">

                <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-grid gap-2">

                        <a href="/enquiries/new" class="btn btn-primary">

                            <i class="bi bi-plus-circle"></i>

                            New Enquiry

                        </a>

                        <a href="/customers/new" class="btn btn-success">

                            <i class="bi bi-person-plus"></i>

                            New Customer

                        </a>

                        <a href="/materials/new" class="btn btn-warning">

                            <i class="bi bi-box-plus"></i>

                            New Material

                        </a>

                        <a href="/boq" class="btn btn-info">

                            <i class="bi bi-rulers"></i>

                            BOQ Builder

                        </a>

                    </div>

                </div>

            </div>

            <!-- Upcoming Deadlines -->
            <div class="card shadow-sm border-0 mt-4">

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

                    <i class="bi bi-clock-history"></i>

                    Upcoming Deadlines

                </div>

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

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

                        <li class="list-group-item d-flex justify-content-between align-items-center">

                            <div>

                                <strong>Hospital Tender</strong>

                                <br>

                                <small class="text-muted">Due tomorrow</small>

                            </div>

                            <span class="badge bg-danger">Urgent</span>

                        </li>

                        <li class="list-group-item d-flex justify-content-between align-items-center">

                            <div>

                                <strong>Generator Quotation</strong>

                                <br>

                                <small class="text-muted">Due Friday</small>

                            </div>

                            <span class="badge bg-warning text-dark">High</span>

                        </li>

                        <li class="list-group-item d-flex justify-content-between align-items-center">

                            <div>

                                <strong>Site Visit Report</strong>

                                <br>

                                <small class="text-muted">Due Monday</small>

                            </div>

                            <span class="badge bg-info">Medium</span>

                        </li>

                    </ul>

                </div>

            </div>

            <!-- Recent Activity -->
            <div class="card shadow-sm border-0 mt-4">

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

                    <i class="bi bi-activity"></i>

                    Recent Activity

                </div>

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

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

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

                            <i class="bi bi-check-circle text-success"></i>

                            Drawing REV-C approved

                            <br>

                            <small class="text-muted">2 hours ago</small>

                        </li>

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

                            <i class="bi bi-file-earmark-text text-primary"></i>

                            BOQ updated for Enquiry #ENQ0001

                            <br>

                            <small class="text-muted">4 hours ago</small>

                        </li>

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

                            <i class="bi bi-box-seam text-warning"></i>

                            New material added: Generator Cable

                            <br>

                            <small class="text-muted">Yesterday</small>

                        </li>

                    </ul>

                </div>

            </div>

        </div>

    </div>

</div>

{% endblock %}