{% 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-boxes text-primary"></i>
                Material Management
            </h2>

            <p class="text-muted mb-0">
                Manage engineering materials
            </p>

        </div>

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

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

            New Material

        </a>

    </div>

    <!-- Stats -->
    <div class="row g-3 mb-4">

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

            <div class="card shadow-sm">

                <div class="card-body">

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

                    <h2 class="text-primary">{{ materials|length }}</h2>

                </div>

            </div>

        </div>

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

            <div class="card shadow-sm">

                <div class="card-body">

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

                    <h2 class="text-success">{{ materials|selectattr('status', 'equalto', 'Active')|list|length }}</h2>

                </div>

            </div>

        </div>

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

            <div class="card shadow-sm">

                <div class="card-body">

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

                    <h2 class="text-warning">{{ materials|map(attribute='category')|unique|list|length }}</h2>

                </div>

            </div>

        </div>

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

            <div class="card shadow-sm">

                <div class="card-body">

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

                    <h2 class="text-info">{{ materials|map(attribute='supplier')|unique|list|length }}</h2>

                </div>

            </div>

        </div>

    </div>

    <!-- Search & Filter Bar -->
    <div class="card shadow-sm mb-4">

        <div class="card-body">

            <form method="get" action="/materials" class="row g-3">

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

                    <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 by code, description, supplier..." value="{{ search or '' }}">

                    </div>

                </div>

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

                    <select class="form-select" name="category_filter">

                        <option value="">All Categories</option>

                        {% for category in categories %}

                        <option value="{{ category }}" {% if category_filter == category %}selected{% endif %}>{{ category }}</option>

                        {% endfor %}

                    </select>

                </div>

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

                    <select class="form-select" name="status_filter">

                        <option value="">All Statuses</option>

                        {% for status in statuses %}

                        <option value="{{ status }}" {% if status_filter == status %}selected{% endif %}>{{ status }}</option>

                        {% endfor %}

                    </select>

                </div>

                <div class="col-md-2">

                    <button type="submit" class="btn btn-primary w-100">

                        <i class="bi bi-funnel"></i> Filter

                    </button>

                </div>

            </form>

            {% if search or category_filter or status_filter %}

            <div class="mt-3">

                <span class="badge bg-info">

                    <i class="bi bi-funnel"></i> Active Filters

                    <a href="/materials" class="text-white ms-2">

                        <i class="bi bi-x-circle"></i> Clear All

                    </a>

                </span>

            </div>

            {% endif %}

        </div>

    </div>

    <!-- Materials Table -->
    <div class="card shadow-sm">

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

            <span>

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

                Material Register

            </span>

            <span class="badge bg-light text-dark">

                {{ materials|length }} Materials

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

                            <th>Description</th>

                            <th>Category</th>

                            <th>Supplier</th>

                            <th>Unit</th>

                            <th>Price</th>

                            <th>Status</th>

                            <th></th>

                        </tr>

                    </thead>

                    <tbody>

                    {% for material in materials %}

                        <tr>

                            <td><code>{{ material.material_code }}</code></td>

                            <td>{{ material.description }}</td>

                            <td>{{ material.category or "-" }}</td>

                            <td>{{ material.supplier or "-" }}</td>

                            <td>{{ material.unit or "-" }}</td>

                            <td>{{ "%.2f"|format(material.current_price) }}</td>

                            <td>

                                {% if material.status == "Active" %}

                                    <span class="badge bg-success">Active</span>

                                {% elif material.status == "Inactive" %}

                                    <span class="badge bg-secondary">Inactive</span>

                                {% else %}

                                    <span class="badge bg-danger">{{ material.status }}</span>

                                {% endif %}

                            </td>

                            <td>

                                <a href="/materials/{{ material.id }}" class="btn btn-sm btn-outline-primary">

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

                                </a>

                            </td>

                        </tr>

                    {% else %}

                        <tr>

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

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

                                No materials found.

                            </td>

                        </tr>

                    {% endfor %}

                    </tbody>

                </table>

            </div>

        </div>

    </div>

</div>

{% endblock %}