{% extends 'custom_admin_base.html' %}
{% load staticfiles %}
{% block extrastyle %}
<link rel="stylesheet" href="{% static 'admin/css/manager_option.css' %}">
<link rel="stylesheet" href="{% static 'base/css/jquery-confirm.min.css' %}"/>
{% endblock %}
{% block content %}
    {% include 'simulation/product/custom_admin_product_sub.html' %}
    <div class="optionTopWrap">
        <div class="categorySelector">
            <label> &nbsp;&nbsp; 메인 카테고리</label>
            <ul class="optionlistBox option-category-main">
            {% if main_category_list %}
            {% for main_category in main_category_list %}
                {% if forloop.first %}
                <li class="selected" data-category="{{ main_category.id }}">
                {% else %}
                <li data-category="{{ main_category.id }}">
                {% endif %}
                {{ main_category.name }}</li>
            {% endfor %}
            {% endif %}
            </ul>
            <input type="text" class="categoryName" placeholder="카테고리명" style="width:346px">
            <div class="categoryFunctions">
                <div class="manager_button categoryFunc create add-main">추가</div>
                <!-- <div class="manager_button categoryFunc modify">수정</div> -->
                <div class="manager_button categoryFunc delete mr_0 delete-main">삭제</div>
            </div>
        </div>
        <div class="categorySelector">
            <label> &nbsp;&nbsp;서브 카테고리</label>
            <ul class="optionlistBox option-category-sub" >
                {% if sub_category_list %}
                {% for sub_category in sub_category_list %}
                {% if forloop.first %}
                <li class="selected" data-category="{{ sub_category.id }}">
                {% else %}
                <li data-category="{{ sub_category.id }}">
                {% endif %}
                {{ sub_category.name }} &nbsp;&nbsp;[ 최대할인률 : &nbsp;{{sub_category.maximum_discount_rate}}%&nbsp;]</li>
                {% endfor %}
                {% endif %}
            </ul>
            <input type="text" class="categoryName" placeholder="카테고리명" style="width:180px">
            <input type="text" class="categoryPrice" placeholder="최대할인률" style="width:151px">
            <div class="categoryFunctions">
                <div class="manager_button categoryFunc create add-sub">추가</div>
                <div class="manager_button categoryFunc delete mr_0 delete-sub">삭제</div>
            </div>
        </div>
    </div>
    <div class="optionBotWrap">
        <div class="optionProductList">
            <ul>
                {% if option_list %}
                {% for option in option_list %}
                    <li data-option="{{ option.id }}"> 
                        <div class="optionDelete"><img src="{% static 'base/image/closeIcon.png' %}"></div>
                        <div class="optionOptionTitle">{{ option.name }}</div>
                        {% load humanize %}
                        <div class="optionOptionPrice">{{ option.price|intcomma }} 원</div>
                        <img src="{{ option.thumb.url }}" alt="">
                    </li>
                {% endfor %}
                {% endif %}
            </ul>
        </div>
        <div class="optionProductInfo">
            <form id="uploadForm" enctype="multipart/form-data">
                <div class="optionForm">
                    <label>&nbsp;&nbsp;이름</label><br />
                    <input type="text" name="optionName"> <br/>
                    <label>&nbsp;&nbsp;가격</label><br />
                    <input type="text" name="optionPrice">
                    <button class="optionUpload">옵션 항목 추가</button>
                </div>
                <div class="optionThumbnail">
                    <div class="option-upload-info">
                        <img class="img-default" src="{% static 'admin/images/imageIcon.png' %}">
                        <p>클릭하여 썸네일 이미지를</br> 업로드 하세요.</p>
                    </div>   
                </div>
                <input type="file" class="inp-file-thumb" name="file-image-thumb" accept=".png, .jpg, .jpeg">
                <div class="optionImg">
                    <p>앞</p>
                    <div class="frontImg"><img class="upload-img" src="" alt=""></div>
                    <button class="optionImgUpload">Upload</button>
                    <input type="file" name="file-image-front" accept=".png">
                </div>
                <div class="optionImg">
                    <p>뒤</p>
                    <div class="backImg"><img class="upload-img" src="" alt=""></div>
                    <button class="optionImgUpload">Upload</button>
                    <input type="file" name="file-image-back" accept=".png">
                </div>
            </form>
        </div>
    </div>
{% endblock content %}
{% block extrascript %}
<script src="{% static 'admin/js/manageOption.js' %}"></script>
<script type="text/javascript" src="{% static 'base/js/jquery-confirm.min.js' %}"></script>
<script>




</script>

{% endblock extrascript %}