<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{/web/layout/homeLayout}">
<th:block layout:fragment="layout_css">
    <link rel="stylesheet" href="/css/web/webFeedbackSelectList.css">
    <link rel="stylesheet" href="/css/web/grid.css?v1.1">
    <link rel="stylesheet" href="/css/web/call_log.css">
</th:block>
<th:block layout:fragment="layout_top_script">
    <script>
        let menuClass = "[[${param.menuClass}]]" == "" ? "" : "[[${param.menuClass}]]";
        let selectUseYn = "[[${selectUseYn}]]" == "" ? "N" : "[[${selectUseYn}]]";
        let insertUseYn = "[[${insertUseYn}]]" == "" ? "N" : "[[${insertUseYn}]]";
        let updateUseYn = "[[${updateUseYn}]]" == "" ? "N" : "[[${updateUseYn}]]";
        let deleteUseYn = "[[${deleteUseYn}]]" == "" ? "N" : "[[${deleteUseYn}]]";
        let downloadUseYn = "[[${downloadUseYn}]]" == "" ? "N" : "[[${downloadUseYn}]]";
    </script>
</th:block>
<th:block layout:fragment="layout_content">
    <!-- 센터쪽 -->
    <div class="center_box">
        <p class="page_title">통화 로그 관리</p>

        <!-- 검색 필터 영역 -->
        <div class="cl_filter_wrap">
            <!-- 1행: 구분 필터 -->
            <div class="cl_filter_row">
                <div class="cl_filter_item">
                    <label>구분1</label>
                    <select id="callType" class="cl_select">
                        <option value="">전체</option>
                        <option value="1">상담</option>
                        <option value="2">예약</option>
                        <option value="3">위치안내</option>
                        <option value="callback">Call Back</option>
                    </select>
                </div>
                <div class="cl_filter_item">
                    <label>구분2</label>
                    <select id="callType1" class="cl_select">
                        <option value="">전체</option>
                        <option value="초진">초진</option>
                        <option value="재진">재진</option>
                    </select>
                </div>
                <div class="cl_filter_item">
                    <label>구분3</label>
                    <select id="callType2" class="cl_select">
                        <option value="">전체</option>
                        <option value="상담">상담</option>
                        <option value="상담후예약">상담후예약</option>
                        <option value="회차예약">회차예약</option>
                    </select>
                </div>
                <div class="cl_filter_item">
                    <label>고객전화번호</label>
                    <input type="text" id="mCid" placeholder="전화번호 입력" />
                </div>
            </div>

            <!-- 2행: 날짜 필터 -->
            <div class="cl_filter_row">
                <div class="cl_filter_item cl_date_item">
                    <label>검색일자</label>
                    <input type="date" id="sDate" />
                    <span class="cl_date_sep">~</span>
                    <input type="date" id="eDate" />
                </div>
                <div class="cl_quick_btns">
                    <button type="button" onclick="fn_dayChk('t')">오늘</button>
                    <button type="button" onclick="fn_dayChk('p')">어제</button>
                    <button type="button" onclick="fn_dayChk('w')">이번주</button>
                    <button type="button" onclick="fn_dayChk('pw')">지난주</button>
                    <button type="button" onclick="fn_dayChk('m')">이번달</button>
                    <button type="button" onclick="fn_dayChk('pm')">지난달</button>
                </div>
                <button type="button" id="searchBtn" class="cl_search_btn">조회</button>
            </div>
        </div>

        <!-- 통계 요약 바 -->
        <div class="cl_stats_bar">
            <span>전체: <strong id="statTotal">0</strong></span>
            <span class="cl_stats_sep">|</span>
            <span>IN: <strong id="statIn">0</strong></span>
            <span class="cl_stats_detail">[초진: <strong id="statType1">0</strong> / 재진: <strong
                    id="statType2">0</strong>]</span>
            <span class="cl_stats_detail">[상담: <strong id="statType11">0</strong> / 상담후예약: <strong
                    id="statType12">0</strong> / 회차예약: <strong id="statType13">0</strong>]</span>
            <span class="cl_stats_sep">|</span>
            <span>OUT: <strong id="statOut">0</strong></span>
        </div>

        <!-- ag-Grid 테이블 -->
        <div id="callLogGrid" class="cl_grid_box ag-theme-balham"></div>

        <!-- 메모 팝업 -->
        <div class="cl_memo_overlay" id="memoOverlay" style="display:none;">
            <div class="cl_memo_popup">
                <div class="cl_memo_header">
                    <h3>통화 메모</h3>
                    <span class="cl_memo_record" id="memoRecordNo"></span>
                    <button type="button" class="cl_memo_close" onclick="fn_closeMemo()">×</button>
                </div>
                <div class="cl_memo_body">
                    <input type="hidden" id="memoRecordNoVal" />
                    <textarea id="memoContent" placeholder="메모를 입력하세요" rows="6"></textarea>
                </div>
                <div class="cl_memo_footer">
                    <button type="button" class="cl_memo_save_btn" onclick="fn_saveMemo()">저장</button>
                    <button type="button" class="cl_memo_cancel_btn" onclick="fn_closeMemo()">취소</button>
                </div>
            </div>
        </div>
    </div>

    <form id="callLogForm" onsubmit="return false;"></form>
</th:block>
<th:block layout:fragment="layout_popup">
</th:block>
<th:block layout:fragment="layout_script">
    <script src="/js/web/ag-grid-community-29.3.5.min.js"></script>
    <script src="/js/web/callLog/callLogSelectList.js"></script>
</th:block>

</html>