{% extends "base.html" %}

{% block content %}

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

    <div>

        <h2 class="mb-1">

            <i class="bi bi-box text-primary"></i>

            {{ material.description }}

        </h2>

        <small class="text-muted">

            Material Code: <code>{{ material.material_code }}</code>

        </small>

    </div>

    <div>

        <a href="/materials/edit/{{ material.id }}" class="btn btn-warning">

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

            Edit

        </a>

        <a href="/materials" class="btn btn-secondary">

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

            Back

        </a>

    </div>

</div>

<hr>

<div class="row">

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

        <div class="card shadow-sm mb-4">

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

                Material Details

            </div>

            <div class="card-body">

                <table class="table">

                    <tr>

                        <th width="200">Material Code</th>

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

                    </tr>

                    <tr>

                        <th>Description</th>

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

                    </tr>

                    <tr>

                        <th>Category</th>

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

                    </tr>

                    <tr>

                        <th>Supplier</th>

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

                    </tr>

                    <tr>

                        <th>Manufacturer</th>

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

                    </tr>

                    <tr>

                        <th>Part Number</th>

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

                    </tr>

                    <tr>

                        <th>Unit</th>

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

                    </tr>

                    <tr>

                        <th>Current Price</th>

                        <td><h4 class="text-success">${{ "%.2f"|format(material.current_price) }}</h4></td>

                    </tr>

                    <tr>

                        <th>Minimum Stock</th>

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

                    </tr>

                    <tr>

                        <th>Reorder Level</th>

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

                    </tr>

                    <tr>

                        <th>Location</th>

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

                    </tr>

                    <tr>

                        <th>Status</th>

                        <td>

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

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

                            {% else %}

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

                            {% endif %}

                        </td>

                    </tr>

                    <tr>

                        <th>Created</th>

                        <td>{{ material.created_at.strftime('%d %b %Y') if material.created_at else "-" }}</td>

                    </tr>

                    <tr>

                        <th>Last Updated</th>

                        <td>{{ material.updated_at.strftime('%d %b %Y %H:%M') if material.updated_at else "-" }}</td>

                    </tr>

                </table>

            </div>

        </div>

    </div>

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

        <!-- Update Price -->
        <div class="card shadow-sm mb-3">

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

                <i class="bi bi-currency-dollar"></i>

                Update Price

            </div>

            <div class="card-body">

                <form method="POST" action="/materials/{{ material.id }}/price">

                    <div class="mb-3">

                        <label class="form-label">New Price</label>

                        <input type="number" step="0.01" name="new_price" class="form-control" required>

                    </div>

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

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

                        Update Price

                    </button>

                </form>

            </div>

        </div>

        <!-- Price History -->
        <div class="card shadow-sm">

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

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

                Price History

            </div>

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

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

                    <thead>

                        <tr>

                            <th>Date</th>

                            <th>Price</th>

                        </tr>

                    </thead>

                    <tbody>

                    {% for price in prices %}

                        <tr>

                            <td>{{ price.created_at.strftime('%d %b %Y') }}</td>

                            <td>${{ "%.2f"|format(price.price) }}</td>

                        </tr>

                    {% else %}

                        <tr>

                            <td colspan="2" class="text-center text-muted py-3">

                                No price history available.

                            </td>

                        </tr>

                    {% endfor %}

                    </tbody>

                </table>

            </div>

        </div>

    </div>

</div>

{% endblock %}