{% extends 'base.html' %}
{% load custom_tags_and_filters %}
{% block title %}New Material Requests{% endblock %}
{% block content %}
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <h1>Material Requests</h1>
                {% if user.is_staff %}
                    <p>
                        <a href="{% url 'view_requests' %}" class="btn btn-success">View Material Requests</a>
                    </p>
                {% endif %}
                <div class="alert alert-info">
                    <p>
                        Use this form to request to bring new materials into the {{ facility_name }}. This is necessary to make sure that there is an
                        adequate plan to minimize contamination and safety risks. Staff will review your request and may ask for more details.
                        If your material is permitted, they will work with you on storage, waste disposal, and allowed processes.
                    </p>
                </div>
                <h3 style="margin-top: 20px;">
                    {% if chemical_request %}
                        Edit Request
                    {% else %}
                        Request permission
                    {% endif %}
                    to bring a new material into the {{ facility_name }}
                </h3>
                <hr>
            </div>
        </div>
        <form action="{% if chemical_request %}{% url 'edit_chemical_request' chemical_request.id %}{% else %}{% url 'chemical_request' %}{% endif %}"
              method="post"
              enctype="multipart/form-data">
            {% csrf_token %}
            <div class="row">
                <!-- Left Column: Chemical Info & Hazards -->
                <div class="col-md-6">
                    <!-- Chemical Information Panel -->
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <h3 class="panel-title">
                                <i class="glyphicon glyphicon-flask"></i> Chemical Information
                            </h3>
                        </div>
                        <div class="panel-body">
                            <div class="form-group">
                                <label for="name">
                                    Chemical Name <span class="text-danger">*</span>
                                </label>
                                <!-- Use form.name.value to populate if editing -->
                                <input type="text"
                                       name="name"
                                       id="name"
                                       class="form-control"
                                       placeholder="Full name of chemical"
                                       value="{{ form.name.value|default_if_none:'' }}"
                                       required>
                            </div>
                            <!-- Trade Name Field Removed -->
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="cas">CAS Number</label>
                                        <input type="text"
                                               name="cas"
                                               id="cas"
                                               class="form-control"
                                               placeholder="e.g. 67-64-1"
                                               value="{{ form.cas.value|default_if_none:'' }}">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="container">
                                            Container Type/Size <span class="text-danger">*</span>
                                        </label>
                                        <input type="text"
                                               name="container"
                                               id="container"
                                               class="form-control"
                                               placeholder="e.g. 500mL glass bottle"
                                               value="{{ form.container.value|default_if_none:'' }}"
                                               required>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="sds">SDS Document</label>
                                {% if chemical_request and chemical_request.sds %}
                                    <p>
                                        Current: <a href="{{ chemical_request.sds.url }}" target="_blank">{{ chemical_request.sds.name }}</a>
                                    </p>
                                {% endif %}
                                <input type="file" name="sds" id="sds" class="form-control" accept=".pdf" onchange="validate_pdf(this);">
                                <p class="help-block">Upload the Safety Data Sheet (PDF only).</p>
                            </div>
                        </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 & Stability
                            </h3>
                        </div>
                        <div class="panel-body">
                            <div class="form-group">
                                <label>Hazards Identification</label>
                                <div class="well well-sm" style="max-height: 200px; overflow-y: auto; background-color: #fff;">
                                    {% for h in hazards %}
                                        <div class="checkbox" style="margin-top: 5px; margin-bottom: 5px;">
                                            <label>
                                                <!-- Check if hazard is in the form's initial data or related objects -->
                                                <input type="checkbox"
                                                       name="hazards"
                                                       value="{{ h.id }}"
                                                       {% if h.id in form.initial.hazards or h in form.instance.hazards.all %}checked{% endif %}>
                                                {{ h.name }}
                                            </label>
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="stability">
                                    Stability Concerns <span class="text-danger">*</span>
                                </label>
                                <textarea name="stability"
                                          id="stability"
                                          class="form-control"
                                          rows="2"
                                          placeholder="Describe any stability concerns (e.g. light sensitive, air sensitive, shelf life)"
                                          required>{{ form.stability.value|default_if_none:'' }}</textarea>
                            </div>
                            <div class="form-group">
                                <label for="incompatibilities">
                                    Incompatibilities <span class="text-danger">*</span>
                                </label>
                                <textarea name="incompatibilities"
                                          id="incompatibilities"
                                          class="form-control"
                                          rows="2"
                                          placeholder="List any chemical incompatibilities"
                                          required>{{ form.incompatibilities.value|default_if_none:'' }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Right Column: Procedure & Waste -->
                <div class="col-md-6">
                    <!-- Usage Panel -->
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            <h3 class="panel-title">
                                <i class="glyphicon glyphicon-list-alt"></i> Usage & Exposure
                            </h3>
                        </div>
                        <div class="panel-body">
                            <div class="form-group">
                                <label for="procedure">
                                    Procedure <span class="text-danger">*</span>
                                </label>
                                <div class="alert alert-warning" style="padding: 10px; margin-bottom: 10px; font-size: 0.9em;">
                                    <strong>Be sure to include:</strong>
                                    <ul style="padding-left: 20px; margin-bottom: 0;">
                                        <li>Where in the facility it will be used</li>
                                        <li>In what tools it will be used</li>
                                        <li>Any special handling requirements</li>
                                        <li>Expected duration and usage rate</li>
                                        <li>Storage proposal</li>
                                    </ul>
                                </div>
                                <textarea name="procedure"
                                          id="procedure"
                                          class="form-control"
                                          rows="6"
                                          placeholder="Describe the procedure..."
                                          required>{{ form.procedure.value|default_if_none:'' }}</textarea>
                            </div>
                            <div class="form-group">
                                <label for="exposure_routes">
                                    Exposure Routes <span class="text-danger">*</span>
                                </label>
                                <textarea name="exposure_routes"
                                          id="exposure_routes"
                                          class="form-control"
                                          rows="2"
                                          placeholder="e.g. Inhalation, skin absorption"
                                          required>{{ form.exposure_routes.value|default_if_none:'' }}</textarea>
                            </div>
                            <div class="form-group">
                                <label for="exposure_controls">
                                    Exposure Controls <span class="text-danger">*</span>
                                </label>
                                <textarea name="exposure_controls"
                                          id="exposure_controls"
                                          class="form-control"
                                          rows="2"
                                          placeholder="e.g. Fume hood, gloves, safety glasses"
                                          required>{{ form.exposure_controls.value|default_if_none:'' }}</textarea>
                            </div>
                        </div>
                    </div>
                    <!-- Waste Panel -->
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">
                                <i class="glyphicon glyphicon-trash"></i> Waste Management
                            </h3>
                        </div>
                        <div class="panel-body">
                            <div class="form-group">
                                <div class="checkbox">
                                    <label style="font-weight: bold;">
                                        <input type="checkbox" name="hazardous_waste" {% if form.hazardous_waste.value %}checked{% endif %}>
                                        Will hazardous waste be generated?
                                    </label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="waste_disposal">
                                    Waste Disposal Plan <span class="text-danger">*</span>
                                </label>
                                <textarea oninput="auto_size_textarea(this);"
                                          name="waste_disposal"
                                          id="waste_disposal"
                                          class="form-control"
                                          rows="3"
                                          placeholder="How should the waste generated by this material be disposed?"
                                          required>{{ form.waste_disposal.value|default_if_none:'' }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Submit Button -->
            <div class="row">
                <div class="col-md-12 text-center">
                    <button type="submit" class="btn btn-lg btn-success" style="padding-left: 50px; padding-right: 50px;">
                        {% if chemical_request %}
                            Update
                        {% else %}
                            Submit
                        {% endif %}
                        Request
                    </button>
                </div>
            </div>
            <!-- Bottom spacing -->
            <div style="margin-bottom: 50px;"></div>
        </form>
    </div>
    <script>
        function auto_size_textarea(element) {
            element.style.height = "5px";
            element.style.height = (element.scrollHeight)+"px";
        }

        function validate_pdf(input) {
            const fileName = input.value;
            if (fileName) {
                const idxDot = fileName.lastIndexOf(".") + 1;
                const extFile = fileName.substr(idxDot, fileName.length).toLowerCase();
                if (extFile !== "pdf") {
                    alert("Only PDF files are accepted.");
                    input.value = "";
                }
            }
        }
    </script>
{% endblock %}