{% extends 'base.html' %}
{% block title %}User Chemicals{% endblock %}
{% block content %}
    <h1>User Chemical Inventory</h1>
    {% if user.is_staff %}
        <p>
            <a href="{% url 'add_user_chemical' %}" class="btn btn-success">Add a new chemical</a>
        </p>
    {% endif %}
    <div class="col-lg-12" style="margin-top:30px">
        <table class="table table-bordered table-condensed">
            <thead>
                <tr>
                    <th>
                        <a href="{% url 'user_chemicals' sort_by='owner' %}">Owner</a>
                    </th>
                    <th>
                        <a href="{% url 'user_chemicals' sort_by='chemical' %}">Name</a>
                    </th>
                    <th>
                        <a href="{% url 'user_chemicals' sort_by='label_id' %}">Label ID</a>
                    </th>
                    <th>
                        <a href="{% url 'user_chemicals' sort_by='in_date' %}">Date of Entry</a>
                    </th>
                    <th>
                        <a href="{% url 'user_chemicals' sort_by='expiration' %}">Expiration Date</a>
                    </th>
                    <th>
                        <a href="{% url 'user_chemicals' sort_by='location' %}">Location</a>
                    </th>
                    <th>Request</th>
                    <th>History</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                {% for x in user_chemicals %}
                    <tr>
                        <!-- Updated owner column to be a link -->
                        <td>
                            <a href="{% url 'create_or_modify_user' x.owner.id %}">{{ x.owner }}</a>
                        </td>
                        <td>
                            {% if x.chemical.document %}
                                <a href="{{ x.chemical.document.url }}" target="_blank">{{ x.chemical.name }}</a>
                            {% elif x.chemical.url %}
                                <a href="{{ x.chemical.url }}" target="_blank">{{ x.chemical.name }}</a>
                            {% else %}
                                {{ x.chemical.name }}
                            {% endif %}
                        </td>
                        <td>{{ x.label_id }}</td>
                        <td>{{ x.in_date }}</td>
                        <td>{{ x.expiration }}</td>
                        <td>{{ x.location }}</td>
                        <td>
                            {% if x.request %}
                                <a href="{% url 'request_details' x.request.id %}">View Request</a>
                            {% endif %}
                        </td>
                        <!-- History Link -->
                        <td>
                            {% if x.history %}
                                <a href="javascript:void(0)"
                                   onclick="view_history('{{ x.history|escapejs }}', '{{ x.chemical.name|escapejs }}')">View</a>
                            {% else %}
                                None
                            {% endif %}
                        </td>
                        <td>
                            <a href="{% url 'update_user_chemical' x.id %}" class="btn btn-default">Update</a>
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <!-- History Modal -->
    <div id="historyModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">
                        History for <span id="history_chemical_name"></span>
                    </h4>
                </div>
                <div class="modal-body">
                    <pre id="history_content" style="white-space: pre-wrap; word-wrap: break-word;"></pre>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <script>
      function view_history(history_text, chemical_name) {
          $('#history_chemical_name').text(chemical_name);
          $('#history_content').text(history_text);
          $('#historyModal').modal('show');
      }
    </script>
{% endblock %}