{% 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-book"></i> {% translate "Corp Blueprint Library" %}</h3>
        </div>
    </div>

    <div class="card mb-4">
        <div class="card-header">
            <h5 class="card-title">{% translate "Available Blueprints" %}</h5>
        </div>
        <div class="card-body">
            <div class="mb-3 d-flex align-items-center">
                <label class="me-2">{% translate "Filter by Type:" %}</label>
                <select id="group-filter" class="form-select w-auto d-inline-block">
                    <option value="ALL">{% translate "All Types" %}</option>
                    {% for group in bp_groups %}
                        <option value="{{ group.id }}">{{ group.name|cut:" Blueprint"|cut:" Blueprints" }}</option>
                    {% endfor %}
                </select>
            </div>

            <div class="table-responsive">
                <table class="table table-striped table-hover align-middle" id="blueprint-library-table">
                    <thead>
                        <tr>
                            <th>{% translate "Blueprint" %}</th>
                            <th>{% translate "Corporation" %}</th>
                            <th>{% translate "Runs" %}</th>
                            <th>{% translate "Actions" %}</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Global Request Modal -->
<div class="modal fade" id="requestModal" tabindex="-1" aria-labelledby="requestModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" id="requestModalForm" action="">
                {% csrf_token %}
                <div class="modal-header">
                    <h5 class="modal-title" id="requestModalLabel">{% translate "Request Copy of" %} <span id="requestModalBpName"></span></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">{% translate "Quantity (Number of Copies)" %}</label>
                        <input type="number" class="form-control" name="requested_quantity" value="1" min="1" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">{% translate "Runs per Copy" %}</label>
                        <input type="number" class="form-control" name="requested_runs" value="1" min="1" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">{% translate "Notes (Optional)" %}</label>
                        <textarea class="form-control" name="notes" rows="3"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% translate "Cancel" %}</button>
                    <button type="submit" class="btn btn-primary">{% translate "Submit Request" %}</button>
                </div>
            </form>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_javascript %}
{{ block.super }}
<script>
    $(document).ready(function() {
        if ($('#blueprint-library-table').length) {
            var urlParams = new URLSearchParams(window.location.search);
            var initialSearch = urlParams.get('q') || "{{ query|escapejs }}";

            $('#blueprint-library-table').DataTable({
                "serverSide": true,
                "ajax": {
                    "url": "{% url 'industry_reforged:dt_blueprint_library' %}",
                    "data": function (d) {
                        d.group = $('#group-filter').val();
                    }
                },
                "autoWidth": false,
                "search": {
                    "search": initialSearch
                },
                "order": [[ 0, "asc" ]],
                "columnDefs": [
                    { "orderable": false, "targets": [3] }
                ]
            });

            $('#group-filter').on('change', function() {
                $('#blueprint-library-table').DataTable().draw();
            });
        }

        // Handle modal population
        var requestModal = document.getElementById('requestModal');
        requestModal.addEventListener('show.bs.modal', function (event) {
            var button = event.relatedTarget;
            var bpId = button.getAttribute('data-bp-id');
            var bpName = button.getAttribute('data-bp-name');

            var modalTitleSpan = requestModal.querySelector('#requestModalBpName');
            var modalForm = requestModal.querySelector('#requestModalForm');

            modalTitleSpan.textContent = bpName;
            var baseUrl = "{% url 'industry_reforged:request_blueprint' 0 %}".replace('0', bpId);
            modalForm.setAttribute('action', baseUrl);
        });
    });
</script>
{% endblock %}