{% extends 'client/base.html' %}
{% load static %}
{% load thumbnail %}
{% block title %}AquaGuardian{% endblock %}

{% block content %}

<div class="container" style="margin-top: 10em;">
    <div class="d-flex align-items-center justify-content-center mb-2">
        <h1 class="display-4 text-primary me-3">Water Conservation Survey</h1>
        <img src="{% static 'images/water_conservation.png' %}" alt="Water Conservation" class="img-fluid"
            style="max-width: 10%; height: auto;">
    </div>
    <p class="text-center text-muted mb-5 fs-5">
        Your feedback is essential in helping us understand water usage habits and find ways to conserve this precious
        resource. Please take a moment to complete this short survey and contribute to a sustainable future.
    </p>


    <form id="surveyForm" method="post" action="{% url 'survey:survey_form' %}" class="bg-light p-5 rounded shadow">
        {% csrf_token %}

        <!-- General Awareness -->
        <fieldset class="form-group mb-4">
            <legend class="h4 text-secondary mb-3">1. General Awareness</legend>
            <div class="mb-3">
                <label for="dailyWaterUsage" class="form-label">How much water do you think an average person uses
                    daily?</label>
                <select name="dailyWaterUsage" id="dailyWaterUsage" class="form-select" required>
                    <option value="" disabled selected>Select an option</option>
                    <option value="less_50">Less than 50 liters</option>
                    <option value="50_100">50–100 liters</option>
                    <option value="100_200">100–200 liters</option>
                    <option value="more_200">More than 200 liters</option>
                </select>
            </div>
            <div class="mb-3">
                <label class="form-label">Are you aware of your household’s daily water consumption?</label><br>
                <div class="form-check">
                    <input type="radio" class="form-check-input" name="householdWater" value="yes"
                        id="householdWaterYes" required>
                    <label for="householdWaterYes" class="form-check-label">Yes</label>
                </div>
                <div class="form-check">
                    <input type="radio" class="form-check-input" name="householdWater" value="no" id="householdWaterNo">
                    <label for="householdWaterNo" class="form-check-label">No</label>
                </div>
                <div class="form-check">
                    <input type="radio" class="form-check-input" name="householdWater" value="not_sure"
                        id="householdWaterNotSure">
                    <label for="householdWaterNotSure" class="form-check-label">Not sure</label>
                </div>
            </div>
            <div class="mb-3">
                <label for="drippingTap" class="form-label">Do you know how much water is wasted by a dripping tap per
                    day?</label>
                <select name="drippingTap" id="drippingTap" class="form-select" required>
                    <option value="" disabled selected>Select an option</option>
                    <option value="less_5">Less than 5 liters</option>
                    <option value="5_10">5–10 liters</option>
                    <option value="10_20">10–20 liters</option>
                    <option value="more_20">More than 20 liters</option>
                </select>
            </div>
        </fieldset>

        <!-- Personal Habits -->
        <fieldset class="form-group mb-4">
            <legend class="h4 text-secondary mb-3">2. Personal Habits</legend>
            <div class="mb-3">
                <label for="tapWhileBrushing" class="form-label">How often do you turn off the tap while brushing your
                    teeth?</label>
                <select name="tapWhileBrushing" id="tapWhileBrushing" class="form-select" required>
                    <option value="" disabled selected>Select an option</option>
                    <option value="always">Always</option>
                    <option value="sometimes">Sometimes</option>
                    <option value="never">Never</option>
                </select>
            </div>
            <div class="mb-3">
                <label for="fixLeaks" class="form-label">Do you fix leaks in your home promptly?</label>
                <select name="fixLeaks" id="fixLeaks" class="form-select" required>
                    <option value="" disabled selected>Select an option</option>
                    <option value="yes">Yes</option>
                    <option value="no">No</option>
                </select>
            </div>
            <div class="mb-3">
                <label for="reuseWater" class="form-label">How frequently do you reuse water (e.g., for gardening or
                    cleaning)?</label>
                <select name="reuseWater" id="reuseWater" class="form-select" required>
                    <option value="" disabled selected>Select an option</option>
                    <option value="always">Always</option>
                    <option value="sometimes">Sometimes</option>
                    <option value="never">Never</option>
                </select>
            </div>
            <div class="mb-3">
                <label for="waterAppliances" class="form-label">What water-saving appliances do you use at home?</label>
                <select name="waterAppliances" id="waterAppliances" class="form-select" required>
                    <option value="" disabled selected>Select an option</option>
                    <option value="low_flow">Low-flow faucets</option>
                    <option value="dual_flush">Dual-flush toilets</option>
                    <option value="efficient_machines">Water-efficient washing machines</option>
                    <option value="none">None</option>
                </select>
            </div>
        </fieldset>

        <!-- Feedback and Suggestions -->
        <fieldset class="form-group mb-4">
            <legend class="h4 text-secondary mb-3">3. Feedback and Suggestions</legend>
            <div class="mb-3">
                <label for="waterWastageCause" class="form-label">What do you think is the biggest cause of water
                    wastage in your community?</label>
                <textarea name="waterWastageCause" id="waterWastageCause" class="form-control" rows="3"
                    required></textarea>
            </div>
            <div class="mb-3">
                <label for="conservationResources" class="form-label">What resources or tools would help you conserve
                    water?</label>
                <textarea name="conservationResources" id="conservationResources" class="form-control"
                    rows="3"></textarea>
            </div>
            <div class="mb-3">
                <label for="conservationSuggestions" class="form-label">Any suggestions for improving water conservation
                    in your area?</label>
                <textarea name="conservationSuggestions" id="conservationSuggestions" class="form-control"
                    rows="3"></textarea>
            </div>
        </fieldset>

        <div class="text-center">
            <button type="submit" class="btn btn-primary btn-lg">
                <i class="bi bi-check-circle-fill"></i> Submit Survey
            </button>
        </div>
    </form>
</div>

{% endblock %}


{% block modal %}
{% include 'account/modal/loginModal.html' %}
{% include 'account/modal/registerModal.html' %}
{% endblock %}