{% extends base_template %}
{% load humanize %}
{% block content %}
    <div class="container-fluid" id="request-details-content" style="padding-top: 15px;">
        <div class="row">
            <div class="col-md-12">
                <h2 style="margin-top: 0;">
                    Material Request: <span class="text-primary">{{ chemical_request.name }}</span>
                </h2>
                <hr>
            </div>
        </div>
        <div class="row">
            <!-- Left Column: Request Overview & Safety -->
            <div class="col-md-6">
                <!-- Request Information Panel -->
                <div class="panel panel-info">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            <i class="glyphicon glyphicon-info-sign"></i> Request Information
                        </h3>
                    </div>
                    <div class="panel-body">
                        <dl class="dl-horizontal" style="margin-bottom: 0;">
                            <dt>Requester</dt>
                            <dd>
                                {{ chemical_request.requester.get_full_name|default:chemical_request.requester }}
                            </dd>
                            <dt>Date Submitted</dt>
                            <dd>
                                {{ chemical_request.date|date:"Y-m-d" }} <small class="text-muted">({{ chemical_request.date|naturaltime }})</small>
                            </dd>
                            <dt>Current Status</dt>
                            <dd>
                                {% if chemical_request.approved == 1 %}
                                    <span class="label label-success">Approved</span>
                                {% elif chemical_request.approved == 2 %}
                                    <span class="label label-danger">Denied</span>
                                {% else %}
                                    <span class="label label-warning">Pending</span>
                                {% endif %}
                            </dd>
                            {% if chemical_request.approver %}
                                <dt>Approver</dt>
                                <dd>
                                    {{ chemical_request.approver.get_full_name|default:chemical_request.approver }}
                                </dd>
                            {% endif %}
                            {% if chemical_request.cas %}
                                <dt>CAS Number</dt>
                                <dd>
                                    {{ chemical_request.cas }}
                                </dd>
                            {% endif %}
                            <dt>Container</dt>
                            <dd>
                                {{ chemical_request.container }}
                            </dd>
                            <dt>SDS Document</dt>
                            <dd>
                                {% if chemical_request.sds %}
                                    <a href="{{ chemical_request.sds.url }}" target="_blank" class="btn btn-xs btn-default">
                                        <i class="glyphicon glyphicon-file"></i> View SDS
                                    </a>
                                {% else %}
                                    <span class="text-muted">No SDS Uploaded</span>
                                {% endif %}
                            </dd>
                        </dl>
                    </div>
                </div>
                <!-- Hazards Panel -->
                <div class="panel panel-danger">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            <i class="glyphicon glyphicon-warning-sign"></i> Hazards & Safety
                        </h3>
                    </div>
                    <div class="panel-body">
                        <dl>
                            <dt>Hazards Identification</dt>
                            <dd>
                                {% for hazard in hazards %}
                                    <span class="label label-danger" style="font-size: 90%; display: inline-block; margin-bottom: 3px;">{{ hazard.name }}</span>
                                {% empty %}
                                    <span class="text-muted">None listed</span>
                                {% endfor %}
                            </dd>
                        </dl>
                        <hr style="margin: 10px 0;">
                        <dl>
                            <dt>Stability Concerns</dt>
                            <dd>
                                {{ chemical_request.stability|linebreaksbr|default:"None" }}
                            </dd>
                            <br>
                            <dt>Incompatibilities</dt>
                            <dd>
                                {{ chemical_request.incompatibilities|linebreaksbr|default:"None" }}
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
            <!-- Right Column: Procedure, Exposure & Waste -->
            <div class="col-md-6">
                <!-- Usage & Exposure Panel -->
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Usage & Exposure</h3>
                    </div>
                    <div class="panel-body">
                        <dl>
                            <dt>Procedure</dt>
                            <dd>
                                {{ chemical_request.procedure|linebreaksbr }}
                            </dd>
                        </dl>
                        <hr style="margin: 10px 0;">
                        <dl>
                            <dt>Exposure Routes</dt>
                            <dd>
                                {{ chemical_request.exposure_routes|linebreaksbr|default:"None" }}
                            </dd>
                            <br>
                            <dt>Exposure Controls</dt>
                            <dd>
                                {{ chemical_request.exposure_controls|linebreaksbr|default:"None" }}
                            </dd>
                        </dl>
                    </div>
                </div>
                <!-- Waste Panel -->
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Waste Management</h3>
                    </div>
                    <div class="panel-body">
                        <p>
                            <strong>Hazardous Waste Generation:</strong>
                            {% if chemical_request.hazardous_waste %}
                                <span class="label label-warning">Yes</span>
                            {% else %}
                                <span class="label label-success">No</span>
                            {% endif %}
                        </p>
                        <dl style="margin-bottom: 0;">
                            <dt>Disposal Procedure</dt>
                            <dd>
                                {{ chemical_request.waste_disposal|linebreaksbr }}
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
        <!-- Approval Section (Only visible to staff) -->
        {% if user.is_staff %}
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <h3 class="panel-title">Administrative Action</h3>
                        </div>
                        <div class="panel-body">
                            <form class="form-horizontal" action="{% url 'update_request' chemical_request.id %}" method="post">
                                {% csrf_token %}
                                <div class="form-group">
                                    <label for="approved" class="control-label col-sm-2">Approval Status</label>
                                    <div class="col-sm-4">
                                        <select id="approved" name="approved" class="form-control">
                                            {% for status in chemical_request.Approval.Choices %}
                                                <option value="{{ status.0 }}" {% if chemical_request.approved == status.0 %}selected{% endif %}>
                                                    {{ status.1 }}
                                                </option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="approval_comments" class="control-label col-sm-2">Comments</label>
                                    <div class="col-sm-8">
                                        <textarea id="approval_comments"
                                                  name="approval_comments"
                                                  class="form-control"
                                                  rows="3"
                                                  placeholder="Enter reasons for approval/denial or other administrative notes...">{% if chemical_request.approval_comments %}{{ chemical_request.approval_comments }}{% endif %}</textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-offset-2 col-sm-10">
                                        <button type="submit" class="btn btn-primary">
                                            <i class="glyphicon glyphicon-save"></i> Update Request Status
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}
        <!-- Spacing at bottom -->
        <div style="margin-bottom: 50px;"></div>
    </div>
{% endblock %}