{% extends 'industry_reforged/base.html' %}
{% load i18n %}
{% load humanize %}

{% block details %}
<div class="container-fluid">
    <div class="row mb-3">
        <div class="col-12 d-flex justify-content-between align-items-center">
            <h3><i class="fas fa-clipboard-list"></i> {% translate "Blueprint Requests Management" %}</h3>
            <a href="{% url 'industry_reforged:trigger_blueprint_sync' %}" class="btn btn-primary">
                <i class="fas fa-sync"></i> {% translate "Sync Corp Blueprints" %}
            </a>
        </div>
    </div>

    <div class="card mb-4">
        <div class="card-header">
            <h5 class="card-title">{% translate "Incoming Requests" %}</h5>
        </div>
        <div class="card-body">
            <div class="mb-3 d-flex align-items-center">
                <label class="me-2">{% translate "Filter by Status:" %}</label>
                <select id="status-filter" class="form-select w-auto d-inline-block">
                    <option value="ALL" {% if status_filter == 'ALL' %}selected{% endif %}>{% translate "All" %}</option>
                    <option value="PENDING" {% if status_filter == 'PENDING' %}selected{% endif %}>{% translate "Pending" %}</option>
                    <option value="ACCEPTED" {% if status_filter == 'ACCEPTED' %}selected{% endif %}>{% translate "Accepted" %}</option>
                    <option value="PROCESSED" {% if status_filter == 'PROCESSED' %}selected{% endif %}>{% translate "Processed" %}</option>
                    <option value="REJECTED" {% if status_filter == 'REJECTED' %}selected{% endif %}>{% translate "Rejected" %}</option>
                    <option value="CANCELLED" {% if status_filter == 'CANCELLED' %}selected{% endif %}>{% translate "Cancelled" %}</option>
                </select>
            </div>

            <div class="table-responsive">
                <table class="table table-striped table-hover align-middle" id="blueprint-requests-table">
                    <thead>
                        <tr>
                            <th>{% translate "Date" %}</th>
                            <th>{% translate "Requester" %}</th>
                            <th>{% translate "Blueprint" %}</th>
                            <th>{% translate "Quantity" %}</th>
                            <th>{% translate "Runs" %}</th>
                            <th>{% translate "Status" %}</th>
                            <th>{% translate "Notes" %}</th>
                            <th>{% translate "Actions" %}</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_javascript %}
{{ block.super }}
<script>
    $(document).ready(function() {
        if ($('#blueprint-requests-table').length) {
            var table = $('#blueprint-requests-table').DataTable({
                "serverSide": true,
                "ajax": {
                    "url": "{% url 'industry_reforged:dt_blueprint_requests' %}",
                    "data": function (d) {
                        d.status = $('#status-filter').val();
                    }
                },
                "autoWidth": false,
                "order": [[ 0, "desc" ]],
                "columnDefs": [
                    { "orderable": false, "targets": [6, 7] }
                ]
            });

            $('#status-filter').on('change', function() {
                table.draw();
            });
        }
    });
</script>
{% endblock %}