<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/view/include/tags.jspf" %>

<script src="/clfd/js/common/clfdCommonService.js?ver=1.1"></script>
<script src="/clfd/js/prod/prodLikeService.js?ver=1.0"></script>
<script src="/clfd/js/prod/prodListService.js?ver=1.0"></script>
<script src="/clfd/js/prod/list.js?ver=1.5"></script>
<script src="/clfd/js/front/clfd_product.js?ver=1.2" defer></script>

<div class="main_wrapper">
    <div class="pathbar">
        <div class="pathbar__text">
        </div>
    </div>
    <div class="product__main">
        <div class="product__box">
            <div class="m__filterbtn_black"></div>
            <ul class="sidebar__menu">
                <li style="margin: 20px 0 5px 0; padding: 8px 0; font-size: 20px; text-align: center;"><b>카테고리</b></li>
                <li style="margin: 0; padding: 8px 0; border-bottom: 1px solid #e3e3e3; font-size: 10px; text-align: center;">항목 선택시 관련 화장품이 표출됩니다.</li>
                <li style="margin-top: 20px; margin-bottom: 5px; font-size: 15px; text-align: center;"><b>[ 피부타입 ]</b></li>
                <div id="skTyCusList" style="display: none;">
                    <li>
                        <input type="radio" id="skTy_cus" name="skTyCus" value="Y" <c:if test="${mSkTyCus eq 'Y'}">checked</c:if>>
                        <label for="skTy_cus">나의 피부타입(<c:out value="${dgnsRct.skTy.skTyCd}"/>)</label>
                    </li>
                    <li>
                        <input type="radio" id="skTy_other" name="skTyCus" value="N" <c:if test="${mSkTyCus eq 'N'}">checked</c:if>>
                        <label for="skTy_other">모든 피부타입 </label>
                    </li>
                </div>
                <div id="skTyAllList">
                    <li>
                        <input type="radio" id="skTy_all" value="" <c:if test="${(mSkTy eq null) or (mSkTy eq '')}">checked</c:if>>
                        <label for="skTy_all">전체</label>
                    </li>
                    <c:forEach var="skTy" items="${skTyList}">
                        <li>
                            <input type="radio" id="skTy_${skTy.cdDtlId}" name="skTy" value="${skTy.cdDtlId}" <c:if test="${mSkTy eq skTy.cdDtlId}">checked</c:if>>
                            <label for="skTy_${skTy.cdDtlId}">${skTy.cdDtlNm}</label>
                        </li>
                    </c:forEach>
                </div>
                <li style="margin-top: 20px; margin-bottom: 5px; font-size: 15px; text-align: center;"><b>[ 제품제형 ]</b></li>
                <li>
                    <input type="checkbox" id="prodTy_all" value="" <c:if test="${mProdTyList[0] eq null}">checked</c:if>>
                    <label for="prodTy_all">전체</label>
                </li>
                <c:forEach var="prodTyCdDtl" items="${prodTyCdDtlList}">
                    <li>
                        <input type="checkbox" id="prodTy_${prodTyCdDtl.cdDtlId}" name="prodTy" value="${prodTyCdDtl.cdDtlId}">
                        <label for="prodTy_${prodTyCdDtl.cdDtlId}">${prodTyCdDtl.cdDtlNm}</label>
                    </li>
                </c:forEach>
            </ul>
            <div class="product__container">
                <div class="searchbar">
                    <%--<img src="/clfd/img/clfd_logo30.png" alt="error" style="margin: 4px 3px;">--%>
                    <div class="search__div">
                        <input id="searchByTextInput" class="searchbar__box" type="text" placeholder="찾고 싶은 상품을 검색해보세요!">
                        <button id="searchByTextButton" onclick="" class="search__btn"><i class="fas fa-search"></i></button>
                    </div>
                </div>
                <%--<div class="bilboardbar">
                    <img src="/clfd/img/clfd_pbg.png" alt="error">
                </div>--%>
                <div class="m__filterbtn">
                    <i class="fas fa-filter"></i>
                    <a href="#">카테고리</a>
                </div>

                <div id="productDiv">
                    <ul class="filterbar__menu">
                        <li class="filter__new"><a>최신순</a></li>
                        <li class="filter__may"><a>인기순</a></li>
                        <li class="filter__chp"><a>낮은가격순</a></li>
                        <li class="filter__exp"><a>높은가격순</a></li>
                    </ul>
                    <div class="m__filterbar">
                        <select id="m__filterbar__filter">
                            <option value="new">최신순</option>
                            <option value="may">인기순</option>
                            <option value="chp">낮은가격순</option>
                            <option value="exp">높은가격순</option>
                        </select>
                    </div>

                    <div id="prodCardRoot" class="cardbarIn__container">
                    </div>
                    <div class="more_btn_wrapper">
                        <div id="moreBtn" class="more_btn">
                            <i class="fas fa-plus"></i>
                            <p><strong>더 보기</strong></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <input id="userLoginId" value="${user.userLoginId}" style="display: none"/>
    <input id="userSkTy" value="${dgnsRct.skTy.skTyCd}" style="display: none"/>
    <input id="searchText" value="${searchText}" style="display: none"/>
    <input id="searchProdTy" value="${searchProdTy}" style="display: none"/>
    <c:forEach var="mProdTy" items="${mProdTyList}">
        <input name="mProdTy" value="${mProdTy}" style="display: none"/>
    </c:forEach>
    <input id="mSkTyCus" value="${mSkTyCus}" style="display: none"/>
    <input id="mSkTy" value="${mSkTy}" style="display: none"/>
    <input id="sortToken" value="${sortToken}" style="display: none"/>
    <input id="mSideBar" value="${mSideBar}" style="display: none"/>
</div>
