<div class="title">검색조건</div>
<div>
    <div style="width: 72px;">통계구분</div>
    <select id="type" onchange="selectChange(this)" style="width: 174px; padding: 2px;">
        <option value="hh">시간 통계(1시간)</option>
        <option value="dd">일 통계(1일)</option>
        <option value="mm">수집이력</option>
    </select>
</div>
<div>
    <div>검색시작일시</div>
    <input th:value="${#temporals.format(#temporals.createNow().minusDays(1), 'yyyy-MM-dd')}"
           th:max="${#temporals.format(#temporals.createNow(), 'yyyy-MM-dd')}" type="date" id="start-dt" name="start-dt">
    <select id="start-tm"></select>
</div>
<div>
    <div>검색종료일시</div>
    <input th:value="${#temporals.format(#temporals.createNow().minusDays(1), 'yyyy-MM-dd')}"
           th:max="${#temporals.format(#temporals.createNow(), 'yyyy-MM-dd')}" type="date" id="end-dt" name="end-dt">
    <select id="end-tm"></select>
</div>
<div>
    <div class="red">검색기간에 따라 검색결과가 늦어질 수 있습니다.</div>
    <div class="button" onclick="search()"><img src="/static/image/search.svg">조회</div>
</div>


<script>
    const startDt = $('#start-dt');
    const startTm = $('#start-tm');
    const endDt   = $('#end-dt');
    const endTm   = $('#end-tm');
    const selType = $('#type');
    const now = new Date();
    let options = "";
    for (let ii = 0; ii <= 23; ii++) {
        const value = timeFormatter(ii);
        options += `<option value="${value}">${value}시</option>`;
    }
    startTm.html(options);
    endTm.html(options);
    startTm.val('00');
    endTm.val('23');
    function timeFormatter(value) {
        return String(value).padStart(2, '0');
    }

    function selectChange(el) {
        const $this = $(el);
        const isHour = $this.val() === 'dd' ? 'none' : 'block';
        startTm.css('display', isHour);
        endTm.css('display', isHour);
    }
</script>