{% extends 'base.html' %}
{% block title %}Assign Tenant{% endblock %}

{% block content %}
<div class="container mt-3">

    <div class="card p-4 shadow-lg">

        <h5>Assign Tenant to Unit {{ unit.unit_number }}</h5>
        <p class="text-muted">{{ unit.building.name }}</p>

        <form method="POST" enctype="multipart/form-data">
            {% csrf_token %}

            <!-- ================= TENANT SELECTION ================= -->
            {% if tenants %}
            <div class="mb-3">
                <label>Select Tenant</label>
                <select name="tenant_id" class="form-select" required>
                    {% for tenant in tenants %}
                        <option value="{{ tenant.id }}">
                            {{ tenant.username }} ({{ tenant.phone_number }})
                        </option>
                    {% endfor %}
                </select>
            </div>
            {% else %}
                <input type="hidden" name="tenant_id" value="{{ tenant.id }}">
                <div class="mb-3">
                    <label>Tenant</label>
                    <input type="text" class="form-control"
                           value="{{ tenant.username }}"
                           disabled>
                </div>
            {% endif %}

            <!-- ================= INSPECTION ================= -->
            <hr>
            <h6>Unit Inspection</h6>

            <div class="mb-3">
                <label>Inspection Notes</label>
                <textarea name="inspection_notes"
                          class="form-control"
                          rows="4"></textarea>
            </div>

            <div class="mb-3">
                <label>Upload Inspection Image</label>
                <input type="file"
                       name="inspection_image"
                       class="form-control">
            </div>

            <div class="form-check mb-3">
                <input class="form-check-input"
                       type="checkbox"
                       name="skip_inspection"
                       id="skipInspection">

                <label class="form-check-label">
                    Skip inspection
                </label>
            </div>

            <button class="btn btn-primary w-100">
                Complete Assignment
            </button>

        </form>

    </div>

</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const skip = document.getElementById("skipInspection");
    const notes = document.querySelector("textarea[name='inspection_notes']");
    const image = document.querySelector("input[name='inspection_image']");

    function toggleInspection() {
        const disabled = skip.checked;
        notes.disabled = disabled;
        image.disabled = disabled;
    }

    skip.addEventListener("change", toggleInspection);
    toggleInspection();
});
</script>

{% endblock %}