camper/web/templates/public/booking.gohtml

<!--
 SPDX-FileCopyrightText: 2023 jordi fita mas <jordi@tandem.blog>
 SPDX-License-Identifier: AGPL-3.0-only
-->
{{ define "title" -}}
    {{( pgettext "Booking" "title" )}}
{{- end }}

{{ define "content" -}}
    {{- /*gotype: dev.tandem.ws/tandem/camper/pkg/booking.publicPage*/ -}}
    <h2>{{( pgettext "Booking" "title" )}}</h2>
    {{ with .Form -}}
        <form id="booking" action="/{{ currentLocale }}/booking" method="post">
            <fieldset>
                <legend>{{( pgettext "Customer Details" "title" )}}</legend>
                {{ with .FullName -}}
                    <label>
                        {{( pgettext "Full name" "input" )}}<br>
                        <input type="text" required autocomplete="name" minlength="2"
                               name="{{ .Name }}" value="{{ .Val }}" {{ template "error-attrs" . }}
                        ><br>
                    </label>
                    {{ template "error-message" . }}
                {{- end }}
                {{ with .Address -}}
                    <label>
                        {{( pgettext "Address (optional)" "input" )}}<br>
                        <input type="text" autocomplete="billing street-address"
                               name="{{ .Name }}" value="{{ .Val }}" {{ template "error-attrs" . }}
                        ><br>
                    </label>
                    {{ template "error-message" . }}
                {{- end }}
                {{ with .PostalCode -}}
                    <label>
                        {{( pgettext "Postcode (optional)" "input" )}}<br>
                        <input type="text" autocomplete="billing postal-code"
                               name="{{ .Name }}" value="{{ .Val }}" {{ template "error-attrs" . }}
                        ><br>
                    </label>
                    {{ template "error-message" . }}
                {{- end }}
                {{ with .City -}}
                    <label>
                        {{( pgettext "Town or village (optional)" "input" )}}<br>
                        <input type="text"
                               name="{{ .Name }}" value="{{ .Val }}" {{ template "error-attrs" . }}
                        ><br>
                    </label>
                    {{ template "error-message" . }}
                {{- end }}
                {{ with .Country -}}
                    <label>
                        {{( pgettext "Country" "input" )}}<br>
                        <select name="{{ .Name }}"
                                required autocomplete="country">
                            <option>{{( gettext "Choose a country" )}}</option>
                            {{ template "error-attrs" . }}>{{ template "list-options" . }}
                        </select><br>
                    </label>
                    {{ template "error-message" . }}
                {{- end }}
                {{ with .Email -}}
                    <label>
                        {{( pgettext "Email" "input" )}}<br>
                        <input type="email" required autocomplete="email"
                               name="{{ .Name }}" value="{{ .Val }}" {{ template "error-attrs" . }}
                        ><br>
                    </label>
                    {{ template "error-message" . }}
                {{- end }}
                {{ with .Phone -}}
                    <label>
                        {{( pgettext "Phone" "input" )}}<br>
                        <input type="tel" required autocomplete="tel"
                               name="{{ .Name }}" value="{{ .Val }}" {{ template "error-attrs" . }}
                        ><br>
                    </label>
                    {{ template "error-message" . }}
                {{- end }}
            </fieldset>
            <fieldset>
                <legend>{{( pgettext "Accommodation" "title" )}}</legend>
                {{ range .CampsiteType.Options -}}
                    <label><input type="radio" name="{{ $.Form.CampsiteType.Name }}" value="{{ .Value }}"
                                  {{ if $.Form.CampsiteType.IsSelected .Value }}checked{{ end }}
                        > {{ .Label }}</label><br>
                {{- end }}
                {{ template "error-message" .CampsiteType }}
            </fieldset>
            {{ range $campsiteType := .CampsiteType.Options -}}
                {{ $options := index $.Form.CampsiteTypeOptions .Value }}
                {{ if $options -}}
                    <fieldset class="campsite-options" data-campsite="{{ $campsiteType.Value }}">
                        <legend>{{ .Label }}</legend>
                        {{ with $.Form.AreaPreferences -}}
                            <label>
                                {{( pgettext "Area preferences (optional)" "input" )}}<br>
                                <input type="text"
                                       name="{{ .Name }}" value="{{ .Val }}" {{ template "error-attrs" . }}
                                ><br>
                            </label>
                            {{ template "error-message" . }}
                        {{- end }}
                        {{ range $options -}}
                            <label>
                                {{ .Label }}<br>
                                <input type="number" required
                                       name="{{ .Input.Name }}" value="{{ .Input.Val }}"
                                       min="{{ .Min }}" max="{{ .Max }}"
                                        {{ template "error-attrs" .Input }}
                                ><br>
                            </label>
                            {{ template "error-message" .Input }}
                        {{- end }}
                    </fieldset>
                {{- end }}
            {{- end }}
            <fieldset>
                <legend>{{( pgettext "Booking Period" "title" )}}</legend>
                {{ with .ArrivalDate -}}
                    <label>
                        {{( pgettext "Arrival date" "input" )}}<br>
                        <input type="date" required
                               name="{{ .Name }}" value="{{ .Val }}" {{ template "error-attrs" . }}
                        ><br>
                    </label>
                    {{ template "error-message" . }}
                {{- end }}
                {{ with .DepartureDate -}}
                    <label>
                        {{( pgettext "Departure date" "input" )}}<br>
                        <input type="date" required
                               name="{{ .Name }}" value="{{ .Val }}" {{ template "error-attrs" . }}
                        ><br>
                    </label>
                    {{ template "error-message" . }}
                {{- end }}
                {{ with .ACSICard -}}
                    <label>
                        <input type="checkbox" name="{{ .Name }}" {{ if .Checked}}checked{{ end }}
                                {{ template "error-attrs" . }}
                        > {{( pgettext "ACSI card? (optional)" "input" )}}</label><br>
                    {{ template "error-message" . }}
                {{- end }}
                {{ with .Agreement -}}
                    <label>
                        <input type="checkbox" required name="{{ .Name }}" {{ if .Checked}}checked{{ end }}
                                {{ template "error-attrs" . }}
                        > {{( pgettext "I have read and I accept the reservation conditions" "input" )}}</label><br>
                    {{ template "error-message" . }}
                {{- end }}
            </fieldset>
            <footer>
                <button type="submit">{{( pgettext "Book" "action" )}} <span>→</span></button>
            </footer>
        </form>
    {{- end }}

    <script>
        const fieldSets = Array.from(document.querySelectorAll('fieldset[data-campsite]'));
        const options = document.querySelectorAll('input[type="radio"]');

        function toggleFieldSets(input) {
            const campsite = input.value;
            for (const fieldSet of fieldSets) {
                if (fieldSet.dataset.campsite === campsite) {
                    fieldSet.classList.add('is-visible');
                } else {
                    fieldSet.classList.remove('is-visible');
                }
            }
        }

        for (const option of Array.from(options)) {
            option.addEventListener('change', (e) => toggleFieldSets(e.target));
            if (option.checked) {
                toggleFieldSets(option);
            }
        }
    </script>
{{- end }}