import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";

export default function AdvancedSearch() {
    let { t } = useTranslation();

    const router = useRouter();
    const { locale } = router;
    return (
        <div className="card" id="advancedsearch-card">
            <div className="card-body">
                <div class="govuk-body-m ">
                    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
                        <h3 class="govuk-heading-m">
                            {t("search:advanced-search-title-label")}
                        </h3>
                    </legend>
                    <div class="govuk-form-group">
                        <label class="govuk-label" for="address-line-1">
                            {t("search:applicant-label")}
                        </label>
                        <input
                            class="govuk-input"
                            id="address-line-1"
                            name="address-line-1"
                            type="text"
                            autocomplete="address-line1"
                        />
                    </div>
                    <div class="govuk-form-group">
                        <label class="govuk-label" for="address-town">
                            {t("search:other-party-label")}
                        </label>
                        <input
                            class="govuk-input govuk-!-width-two-thirds"
                            id="address-town"
                            name="address-town"
                            type="text"
                            autocomplete="address-level2"
                        />
                    </div>
                    <div class="govuk-form-group form-inline-label">
                        <fieldset
                            class="govuk-fieldset"
                            role="group"
                            aria-describedby="passport-issued-hint"
                        >
                            {" "}
                            <div className="inlineFieldset">
                                <legend class="govuk-fieldset__legend govuk-!-width-one-third">
                                    {t("search:hearing-date-label")}
                                </legend>
                                <div
                                    class="govuk-date-input"
                                    id="passport-issued"
                                >
                                    <div class="govuk-date-input__item">
                                        <div class="govuk-form-group">
                                            <label
                                                class="govuk-label govuk-date-input__label"
                                                for="passport-issued-day"
                                            >
                                                Day
                                            </label>
                                            <input
                                                class="govuk-input govuk-date-input__input govuk-input--width-2"
                                                id="passport-issued-day"
                                                name="passport-issued-day"
                                                type="text"
                                                pattern="[0-9]*"
                                                inputMode="numeric"
                                            />
                                        </div>
                                    </div>
                                    <div class="govuk-date-input__item">
                                        <div class="govuk-form-group">
                                            <label
                                                class="govuk-label govuk-date-input__label"
                                                for="passport-issued-month"
                                            >
                                                Month
                                            </label>
                                            <input
                                                class="govuk-input govuk-date-input__input govuk-input--width-2"
                                                id="passport-issued-month"
                                                name="passport-issued-month"
                                                type="text"
                                                pattern="[0-9]*"
                                                inputMode="numeric"
                                            />
                                        </div>
                                    </div>
                                    <div class="govuk-date-input__item">
                                        <div class="govuk-form-group">
                                            <label
                                                class="govuk-label govuk-date-input__label"
                                                for="passport-issued-year"
                                            >
                                                Year
                                            </label>
                                            <input
                                                class="govuk-input govuk-date-input__input govuk-input--width-4"
                                                id="passport-issued-year"
                                                name="passport-issued-year"
                                                type="text"
                                                pattern="[0-9]*"
                                                inputMode="numeric"
                                            />
                                        </div>
                                    </div>

                                    <div class="govuk-date-input__item">
                                        <div class="govuk-form-group"></div>

                                        <div class="govuk-checkboxes__item">
                                            <input
                                                class="govuk-checkboxes__input"
                                                id="waste-3"
                                                name="waste"
                                                type="checkbox"
                                                value="farm"
                                            />
                                            <label
                                                class="govuk-label govuk-checkboxes__label no__right_padding"
                                                for="waste-3"
                                            >
                                                {t("search:date-margin-label")}
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                    </div>
                    <div class="govuk-form-group form-inline-label">
                        <fieldset
                            class="govuk-fieldset"
                            role="group"
                            aria-describedby="passport-issued-hint"
                        >
                            {" "}
                            <div className="inlineFieldset">
                                <legend class="govuk-fieldset__legend govuk-!-width-one-third">
                                    {t("search:site-visit-date-label")}
                                </legend>
                                <div
                                    class="govuk-date-input"
                                    id="passport-issued"
                                >
                                    <div class="govuk-date-input__item">
                                        <div class="govuk-form-group">
                                            <label
                                                class="govuk-label govuk-date-input__label"
                                                for="passport-issued-day"
                                            >
                                                Day
                                            </label>
                                            <input
                                                class="govuk-input govuk-date-input__input govuk-input--width-2"
                                                id="passport-issued-day"
                                                name="passport-issued-day"
                                                type="text"
                                                pattern="[0-9]*"
                                                inputMode="numeric"
                                            />
                                        </div>
                                    </div>
                                    <div class="govuk-date-input__item">
                                        <div class="govuk-form-group">
                                            <label
                                                class="govuk-label govuk-date-input__label"
                                                for="passport-issued-month"
                                            >
                                                Month
                                            </label>
                                            <input
                                                class="govuk-input govuk-date-input__input govuk-input--width-2"
                                                id="passport-issued-month"
                                                name="passport-issued-month"
                                                type="text"
                                                pattern="[0-9]*"
                                                inputMode="numeric"
                                            />
                                        </div>
                                    </div>
                                    <div class="govuk-date-input__item">
                                        <div class="govuk-form-group">
                                            <label
                                                class="govuk-label govuk-date-input__label"
                                                for="passport-issued-year"
                                            >
                                                Year
                                            </label>
                                            <input
                                                class="govuk-input govuk-date-input__input govuk-input--width-4"
                                                id="passport-issued-year"
                                                name="passport-issued-year"
                                                type="text"
                                                pattern="[0-9]*"
                                                inputMode="numeric"
                                            />
                                        </div>
                                    </div>

                                    <div class="govuk-date-input__item">
                                        <div class="govuk-form-group"></div>

                                        <div class="govuk-checkboxes__item">
                                            <input
                                                class="govuk-checkboxes__input"
                                                id="waste-3"
                                                name="waste"
                                                type="checkbox"
                                                value="farm"
                                            />
                                            <label
                                                class="govuk-label govuk-checkboxes__label no__right_padding"
                                                for="waste-3"
                                            >
                                                {t("search:date-margin-label")}
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                    </div>
                    <div class="govuk-form-group form-inline-label">
                        <fieldset
                            class="govuk-fieldset"
                            role="group"
                            aria-describedby="passport-issued-hint"
                        >
                            {" "}
                            <div className="inlineFieldset">
                                <legend class="govuk-fieldset__legend govuk-!-width-one-third">
                                    {t("search:callin-date-label")}
                                </legend>
                                <div
                                    class="govuk-date-input"
                                    id="passport-issued"
                                >
                                    <div class="govuk-date-input__item">
                                        <div class="govuk-form-group">
                                            <label
                                                class="govuk-label govuk-date-input__label"
                                                for="passport-issued-day"
                                            >
                                                Day
                                            </label>
                                            <input
                                                class="govuk-input govuk-date-input__input govuk-input--width-2"
                                                id="passport-issued-day"
                                                name="passport-issued-day"
                                                type="text"
                                                pattern="[0-9]*"
                                                inputMode="numeric"
                                            />
                                        </div>
                                    </div>
                                    <div class="govuk-date-input__item">
                                        <div class="govuk-form-group">
                                            <label
                                                class="govuk-label govuk-date-input__label"
                                                for="passport-issued-month"
                                            >
                                                Month
                                            </label>
                                            <input
                                                class="govuk-input govuk-date-input__input govuk-input--width-2"
                                                id="passport-issued-month"
                                                name="passport-issued-month"
                                                type="text"
                                                pattern="[0-9]*"
                                                inputMode="numeric"
                                            />
                                        </div>
                                    </div>
                                    <div class="govuk-date-input__item">
                                        <div class="govuk-form-group">
                                            <label
                                                class="govuk-label govuk-date-input__label"
                                                for="passport-issued-year"
                                            >
                                                Year
                                            </label>
                                            <input
                                                class="govuk-input govuk-date-input__input govuk-input--width-4"
                                                id="passport-issued-year"
                                                name="passport-issued-year"
                                                type="text"
                                                pattern="[0-9]*"
                                                inputMode="numeric"
                                            />
                                        </div>
                                    </div>

                                    <div class="govuk-date-input__item">
                                        <div class="govuk-form-group"></div>

                                        <div class="govuk-checkboxes__item">
                                            <input
                                                class="govuk-checkboxes__input"
                                                id="waste-3"
                                                name="waste"
                                                type="checkbox"
                                                value="farm"
                                            />
                                            <label
                                                class="govuk-label govuk-checkboxes__label no__right_padding"
                                                for="waste-3"
                                            >
                                                {t("search:date-margin-label")}
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                    </div>
                    <div class="govuk-form-group form-inline-label">
                        <fieldset
                            class="govuk-fieldset"
                            role="group"
                            aria-describedby="passport-issued-hint"
                        >
                            {" "}
                            <div className="inlineFieldset">
                                <legend class="govuk-fieldset__legend govuk-!-width-one-third">
                                    {t("search:date-received")}
                                </legend>
                                <div
                                    class="govuk-date-input"
                                    id="passport-issued"
                                >
                                    <div class="govuk-date-input__item">
                                        <div class="govuk-form-group">
                                            <label
                                                class="govuk-label govuk-date-input__label"
                                                for="passport-issued-day"
                                            >
                                                Day
                                            </label>
                                            <input
                                                class="govuk-input govuk-date-input__input govuk-input--width-2"
                                                id="passport-issued-day"
                                                name="passport-issued-day"
                                                type="text"
                                                pattern="[0-9]*"
                                                inputMode="numeric"
                                            />
                                        </div>
                                    </div>
                                    <div class="govuk-date-input__item">
                                        <div class="govuk-form-group">
                                            <label
                                                class="govuk-label govuk-date-input__label"
                                                for="passport-issued-month"
                                            >
                                                Month
                                            </label>
                                            <input
                                                class="govuk-input govuk-date-input__input govuk-input--width-2"
                                                id="passport-issued-month"
                                                name="passport-issued-month"
                                                type="text"
                                                pattern="[0-9]*"
                                                inputMode="numeric"
                                            />
                                        </div>
                                    </div>
                                    <div class="govuk-date-input__item">
                                        <div class="govuk-form-group">
                                            <label
                                                class="govuk-label govuk-date-input__label"
                                                for="passport-issued-year"
                                            >
                                                Year
                                            </label>
                                            <input
                                                class="govuk-input govuk-date-input__input govuk-input--width-4"
                                                id="passport-issued-year"
                                                name="passport-issued-year"
                                                type="text"
                                                pattern="[0-9]*"
                                                inputMode="numeric"
                                            />
                                        </div>
                                    </div>

                                    <div class="govuk-date-input__item">
                                        <div class="govuk-form-group"></div>

                                        <div class="govuk-checkboxes__item">
                                            <input
                                                class="govuk-checkboxes__input"
                                                id="waste-3"
                                                name="waste"
                                                type="checkbox"
                                                value="farm"
                                            />
                                            <label
                                                class="govuk-label govuk-checkboxes__label no__right_padding"
                                                for="waste-3"
                                            >
                                                {t("search:date-margin-label")}
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                    </div>
                    <div class="govuk-form-group form-inline-label">
                        <fieldset
                            class="govuk-fieldset"
                            role="group"
                            aria-describedby="passport-issued-hint"
                        >
                            {" "}
                            <div className="inlineFieldset">
                                <legend class="govuk-fieldset__legend govuk-!-width-one-third">
                                    {t("search:start-date-label")}
                                </legend>
                                <div
                                    class="govuk-date-input"
                                    id="passport-issued"
                                >
                                    <div class="govuk-date-input__item">
                                        <div class="govuk-form-group">
                                            <label
                                                class="govuk-label govuk-date-input__label"
                                                for="passport-issued-day"
                                            >
                                                Day
                                            </label>
                                            <input
                                                class="govuk-input govuk-date-input__input govuk-input--width-2"
                                                id="passport-issued-day"
                                                name="passport-issued-day"
                                                type="text"
                                                pattern="[0-9]*"
                                                inputMode="numeric"
                                            />
                                        </div>
                                    </div>
                                    <div class="govuk-date-input__item">
                                        <div class="govuk-form-group">
                                            <label
                                                class="govuk-label govuk-date-input__label"
                                                for="passport-issued-month"
                                            >
                                                Month
                                            </label>
                                            <input
                                                class="govuk-input govuk-date-input__input govuk-input--width-2"
                                                id="passport-issued-month"
                                                name="passport-issued-month"
                                                type="text"
                                                pattern="[0-9]*"
                                                inputMode="numeric"
                                            />
                                        </div>
                                    </div>
                                    <div class="govuk-date-input__item">
                                        <div class="govuk-form-group">
                                            <label
                                                class="govuk-label govuk-date-input__label"
                                                for="passport-issued-year"
                                            >
                                                Year
                                            </label>
                                            <input
                                                class="govuk-input govuk-date-input__input govuk-input--width-4"
                                                id="passport-issued-year"
                                                name="passport-issued-year"
                                                type="text"
                                                pattern="[0-9]*"
                                                inputMode="numeric"
                                            />
                                        </div>
                                    </div>

                                    <div class="govuk-date-input__item">
                                        <div class="govuk-form-group"></div>

                                        <div class="govuk-checkboxes__item">
                                            <input
                                                class="govuk-checkboxes__input"
                                                id="waste-3"
                                                name="waste"
                                                type="checkbox"
                                                value="farm"
                                            />
                                            <label
                                                class="govuk-label govuk-checkboxes__label no__right_padding"
                                                for="waste-3"
                                            >
                                                {t("search:date-margin-label")}
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                    </div>
                    <div class="govuk-form-group form-inline-label">
                        <fieldset
                            class="govuk-fieldset"
                            role="group"
                            aria-describedby="passport-issued-hint"
                        >
                            {" "}
                            <div className="inlineFieldset">
                                <legend class="govuk-fieldset__legend govuk-!-width-one-third">
                                    {t("search:decision-date-label")}
                                </legend>
                                <div
                                    class="govuk-date-input"
                                    id="passport-issued"
                                >
                                    <div class="govuk-date-input__item">
                                        <div class="govuk-form-group">
                                            <label
                                                class="govuk-label govuk-date-input__label"
                                                for="passport-issued-day"
                                            >
                                                Day
                                            </label>
                                            <input
                                                class="govuk-input govuk-date-input__input govuk-input--width-2"
                                                id="passport-issued-day"
                                                name="passport-issued-day"
                                                type="text"
                                                pattern="[0-9]*"
                                                inputMode="numeric"
                                            />
                                        </div>
                                    </div>
                                    <div class="govuk-date-input__item">
                                        <div class="govuk-form-group">
                                            <label
                                                class="govuk-label govuk-date-input__label"
                                                for="passport-issued-month"
                                            >
                                                Month
                                            </label>
                                            <input
                                                class="govuk-input govuk-date-input__input govuk-input--width-2"
                                                id="passport-issued-month"
                                                name="passport-issued-month"
                                                type="text"
                                                pattern="[0-9]*"
                                                inputMode="numeric"
                                            />
                                        </div>
                                    </div>
                                    <div class="govuk-date-input__item">
                                        <div class="govuk-form-group">
                                            <label
                                                class="govuk-label govuk-date-input__label"
                                                for="passport-issued-year"
                                            >
                                                Year
                                            </label>
                                            <input
                                                class="govuk-input govuk-date-input__input govuk-input--width-4"
                                                id="passport-issued-year"
                                                name="passport-issued-year"
                                                type="text"
                                                pattern="[0-9]*"
                                                inputMode="numeric"
                                            />
                                        </div>
                                    </div>

                                    <div class="govuk-date-input__item">
                                        <div class="govuk-form-group"></div>

                                        <div class="govuk-checkboxes__item">
                                            <input
                                                class="govuk-checkboxes__input"
                                                id="waste-3"
                                                name="waste"
                                                type="checkbox"
                                                value="farm"
                                            />
                                            <label
                                                class="govuk-label govuk-checkboxes__label no__right_padding"
                                                for="waste-3"
                                            >
                                                {t("search:date-margin-label")}
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                    </div>
                    <div class="govuk-form-group ">
                        <label class="govuk-label" for="sort">
                            {t("search:procedure-type-label")}
                        </label>
                        <select class="govuk-select" id="sort" name="sort">
                            <option value="">
                                {t("search:procedure-type-option-1")}
                            </option>
                            <option value="Hearing">
                                {t("search:procedure-type-option-2")}
                            </option>
                            <option value="Inquiry">
                                {t("search:procedure-type-option-3")}
                            </option>
                            <option value="Written representations">
                                {t("search:procedure-type-option-4")}
                            </option>
                        </select>
                    </div>
                    <div class="govuk-form-group">
                        <label class="govuk-label" for="sort">
                            {t("search:status-label")}
                        </label>
                        <select class="govuk-select" id="sort" name="sort">
                            <option value="">
                                {t("search:status-option-1")}
                            </option>
                            <option value="Any">
                                {t("search:status-option-2")}
                            </option>
                            <option value="In progress">
                                {t("search:status-option-3")}
                            </option>
                            <option value="Complete">
                                {t("search:status-option-4")}
                            </option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    );
}