{% extends "base.html" %}

{% block content %}
    <div class="container mx-auto p-4">

        <div class="space-y-2 mb-3 my-6">
            <p class="mb-3 text-lg md:text-xl dark:text-gray-400">
                TheraPy hilft dir, Telefonzeiten für psychotherapeutische Angebote basierend auf den Daten der 116 117
                Arztsuche der kassenärztlichen Vereinigung zu finden.
                Mit dem gewünschten Standort und Suchkriterien erhältst du aktuelle Telefonzeiten sortiert nach Datum.
            </p>
            <h1 class="text-3xl font-bold mb-6 mt-6">Suche</h1>
            <form method="POST" action="/search" class="space-y-6">
                {{ form.csrf_token }}


                <div class="space-y-2">
                    <label for="locationInput" class="block text-lg font-medium">{{ form.location.label }}</label>
                    <div class="flex flex-initial items-center space-x-2">
                        {{ form.location(class="input input-bordered w-full text-lg", id="locationInput", placeholder="Standort/PLZ eingeben") }}
                    </div>
                    {% if form.location.errors %}
                        <div class="text-red-500 text-sm mt-1">
                            {{ form.location.errors[0] }}
                        </div>
                    {% endif %}
                </div>

                <div class="space-y-2">
                    <label for="distanceRange" class="block text-lg font-medium">{{ form.therapy_distance.label }}:
                        <span
                                id="distanceValue">{{ form.therapy_distance.data or 25 }} km</span></label>
                    <div class="flex items-center">
                        {{ form.therapy_distance(class="range range-primary flex-grow", id="distanceRange", min=0, max=50, step=1, oninput="document.getElementById('distanceValue').textContent = this.value + ' km'") }}
                    </div>
                    {% if form.therapy_distance.errors %}
                        <div class="text-red-500 text-sm mt-1">
                            {{ form.therapy_distance.errors[0] }}
                        </div>
                    {% endif %}
                </div>

                <div>
                    <fieldset>
                        <legend class="block text-lg font-medium">{{ form.therapy_type.label }}</legend>
                        <div class="space-y-2 mt-2">
                            {% for subfield in form.therapy_type %}
                                <div class="flex flex-initial items-center space-x-2">
                                    {{ subfield(class="checkbox checkbox-primary") }}
                                    <label class="text-lg" for="{{ subfield.id }}">
                                        {{ subfield.label.text }}
                                    </label>
                                </div>
                            {% endfor %}
                            {% if form.therapy_type.errors %}
                                <div class="text-red-500 text-sm mt-1">
                                    {{ form.therapy_type.errors[0] }}
                                </div>
                            {% endif %}
                        </div>
                    </fieldset>
                </div>

                <div>
                    <fieldset>
                        <legend class="block text-lg font-medium">{{ form.therapy_age_range.label }}</legend>
                        <div class="space-y-2 mt-2">
                            {% for subfield in form.therapy_age_range %}
                                <div class="flex flex-initial items-center space-x-2">
                                    {{ subfield(class="radio radio-primary") }}
                                    <label class="text-lg" for="{{ subfield.id }}">
                                        {{ subfield.label.text }}
                                    </label>
                                </div>
                            {% endfor %}
                            {% if form.therapy_age_range.errors %}
                                <div class="text-red-500 text-sm mt-1">
                                    {{ form.therapy_age_range.errors[0] }}
                                </div>
                            {% endif %}
                        </div>
                    </fieldset>
                </div>

                <div>
                    <fieldset>
                        <legend class="block text-lg font-medium">{{ form.therapy_setting.label }}</legend>
                        <div class="space-y-2 mt-2">
                            {% for subfield in form.therapy_setting %}
                                <div class="flex flex-initial items-center space-x-2">
                                    {{ subfield(class="radio radio-primary") }}
                                    <label class="text-lg" for="{{ subfield.id }}">
                                        {{ subfield.label.text }}
                                    </label>
                                </div>
                            {% endfor %}
                            {% if form.therapy_setting.errors %}
                                <div class="text-red-500 text-sm mt-1">
                                    {{ form.therapy_setting.errors[0] }}
                                </div>
                            {% endif %}
                        </div>
                    </fieldset>
                </div>

                <div class="space-y-2">
                    <label for="timeRange" class="block text-lg font-medium">{{ form.amount_of_weeks.label }} <span
                            id="weeksValue">{{ form.amount_of_weeks.data or 4 }} nächste(n) Woche(n)</span></label>
                    <div class="flex items-center">
                        {{ form.amount_of_weeks(class="range range-primary flex-grow", id="timeRange", min=1, max=4, step=1, oninput="document.getElementById('weeksValue').textContent = this.value + ' nächste(n) Woche(n)'") }}
                    </div>
                    {% if form.amount_of_weeks.errors %}
                        <div class="text-red-500 text-sm mt-1">
                            {{ form.amount_of_weeks.errors[0] }}
                        </div>
                    {% endif %}
                </div>

                <div>
                    <fieldset>
                        <div class="space-y-2 mt-4">
                            <div class="flex items-center space-x-2">
                                {{ form.privacy_agreement(class="checkbox checkbox-primary") }}
                                <label for="privacyAgreement" class="text-lg">
                                    Ich habe die <a href="/privacy" class="text-purple-500 underline">Datenschutzerklärung</a> zur Kenntnis genommen und stimme der Verarbeitung meiner personenbezogenen Daten zu.
                                </label>
                            </div>
                            {% if form.privacy_agreement.errors %}
                                <div class="text-red-500 text-sm mt-1">
                                    {{ form.privacy_agreement.errors[0] }}
                                </div>
                            {% endif %}
                        </div>
                    </fieldset>
                </div>


                <div>
                    <button type="submit" class="btn btn-primary btn-lg w-full">Suche</button>
                </div>
            </form>
        </div>
    </div>
{% endblock %}