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

<section class="content-header">
    <tg:menuInfoTag />
</section>

<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box box-success">
                <div class="box-header">
                    <h3 class="box-title"><i class='material-icons' style='font-size:16px;'>play_arrow</i>&nbsp;&nbsp;검색조건</h3>
                </div>
                <div class="box-body">
                    <div class="row">
                        <div class="col-md-6 col-xs-12" style="margin-bottom:10px;">
                            <div class="input-group">
                                <span class="input-group-addon">효능 구분</span>
                                <select id="efficacyGbnLike" name="efficacyGbnLike" class="form-control selectpicker">
                                    <option value="">전체</option>
                                    <c:forEach items="${efficacyGbnSelectList}" var="efficacyGbn">
                                        <option value="${efficacyGbn.code}">${efficacyGbn.name}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6 col-xs-12" style="margin-bottom:10px;">
                            <div class="input-group">
                                <span class="input-group-addon">효능명</span>
                                <input type="text" id="efficacyNameLike" class="form-control" placeholder="효능명 입력" maxlength="50">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box-footer">
                    <div class="btn-group pull-right">
                        <button type="button" class="btn btn-outline-primary" id="searchBtn">검색</button>
                        <button type="button" class="btn btn-outline-primary" id="resetBtn">리셋</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xs-12">
            <div class="box box-primary">
                <div class="box-body">
                    <table id="datatable" class="table table-bordered table-striped" style="width:100%; table-layout:fixed;"></table>
                </div>
                <div class="box-footer">
                    <div class="btn-group pull-right">
                        <button type="button" class="btn btn-outline-primary" onclick="showInsertModal()">등록</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade insert-modal" data-keyboard="false" data-backdrop="static" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 id="func-modal-title"></h2>
                </div>
                <div class="modal-body">
                    <form id="insertForm" name="insertForm" class="form-horizontal" enctype="multipart/form-data" method="post">
                        <input type="hidden" name="efficacySeq" />
                        <div class="form-group">
                            <label class="control-label col-md-3 col-sm-3 col-xs-12">효능 구분<span>*</span></label>
                            <div class="col-md-8 col-sm-8 col-xs-12">
                                <select name="efficacyGbn" class="form-control col-md-7 col-sm-7 col-xs-12 selectpicker">
                                    <option value="">전체</option>
                                    <c:forEach items="${efficacyGbnSelectList}" var="efficacyGbn">
                                        <option value="${efficacyGbn.code}">${efficacyGbn.name}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3 col-sm-3 col-xs-12">효능명<span>*</span></label>
                            <div class="col-md-8 col-sm-8 col-xs-12">
                                <input type="text" name="efficacyName" class="form-control col-md-7 col-sm-7 col-xs-12" placeholder="효능명 입력" maxlength="50">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-primary" onclick="func()">저장</button>
                    <button type="button" class="btn btn-outline-primary" data-dismiss="modal">닫기</button>
                </div>
            </div>
        </div>
    </div>
</section>
<script>
    var datatable;
    $(document).ready(function() {
        datatable = $("#datatable").DataTable({
            "searching": false
            ,"paging": true
            ,"bPaginate": true
            ,"responsive": true
            ,"language": lang_kor
            ,"ajax" : {
                "url" : "<c:url value='/system/efficacy/list.json' />"
                ,"method" : "POST"
                ,"dataType" : "json"
                ,"data": function(d) {
                    d.efficacyGbn = $('#efficacyGbnLike').val(),
                    d.efficacyName = $('#efficacyNameLike').val()
                }
            },"processing": true
            ,"serverSide": true
            ,"ordering" : false
            ,"columns": [
                { "name" : "EFFICACY_SEQ", "title" : "시퀀스", "data" : "efficacySeq", "className" : "dt-head-center"},
                { "name" : "EFFICACY_GBN_NAME", "title" : "효능 구분", "data" : "efficacyGbnName", "className" : "dt-head-center"},
                { "name" : "EFFICACY_NAME", "title" : "효능명", "data" : "efficacyName", "className" : "dt-head-center"},
                /*{ "render" :
                    function (data, type, row) {
                        let html = "";
                        html += "<button type='button' class='btn btn-sm btn-outline-primary' onclick='showUpdateModal(\""+row["efficacySeq"]+"\")'>수정</button>";
                        return html;
                    }
                    , "className" : "dt-head-center", "title" : "기능"
                }*/
            ]
            ,"scrollX": "100%"
            ,"scrollY": "100%"
            ,"scrollXInner": "400px"
            ,"columnDefs": [
                {"targets": [0], width:"50px"}
                ,{"targets": [1], width:"100px"}
                ,{"targets": [2], width:"250px"}
                /*,{"targets": [3], width:"50px"}*/
            ]
        });
    });

    $("#searchBtn").click(function() {
        datatable.ajax.reload();
    });

    $("#resetBtn").click(function() {
        $("#efficacyGbnLike").val("");
        $("#efficacyGbnLike").selectpicker("refresh");
        $("#efficacyNameLike").val("");
        datatable.ajax.reload();
    });

    function showInsertModal() {
        let form = document.insertForm;
        form.efficacySeq.value = "";
        form.efficacyGbn.value = "";
        $('[name=efficacyGbn]').selectpicker("refresh");
        form.efficacyName.value = "";

        $('#func-modal-title').html("등록");
        $('.insert-modal').modal("show");
    }

    function showUpdateModal(efficacySeq) {
        $.ajax({
            url: "<c:url value='/system/efficacy/detail.json' />",
            type: "POST",
            dataType: "json",
            data: {
                "efficacySeq" : efficacySeq
            },
            success: function(res) {
                if(res.result == "success"){
                    let form = document.insertForm;
                    const data = res.data;
                    form.efficacySeq.value = data.efficacySeq;
                    form.efficacyGbn.value = data.efficacyGbn;
                    $('[name=efficacyGbn]').selectpicker("refresh");
                    form.efficacyName.value = data.efficacyName;

                    $('#func-modal-title').html("등록");
                    $('.insert-modal').modal("show");
                } else {
                    alert(res.message);
                }
            }
        })
    }

    function func() {
        let form = document.insertForm;
        if(form.efficacyGbn.value == ""){
            alert("효능 구분을 선택해주세요.")
            form.efficacyGbn.focus();
        } else if(form.efficacyName.value == ""){
            alert("효능명을 입력해주세요.");
            form.efficacyName.focus();
        } else if(form.efficacySeq.value == "") {
            if(confirm("해당 효능을 등록하시겠습니까?")){
                const insertForm = document.getElementById("insertForm");
                const data = new FormData(insertForm);
                $.ajax({
                    url: "<c:url value='/system/efficacy/insert.json' />",
                    type: "POST",
                    enctype: "multipart/form-data",
                    data: data,
                    processData: false,
                    contentType: false,
                    success: function(res) {
                        if(res.result == "success"){
                            alert("등록되었습니다.");
                            $('.insert-modal').modal("hide");
                            datatable.ajax.reload();
                        } else {
                            alert(res.message);
                        }
                    }
                })
            }
        } else {
            if(confirm("해당 효능을 수정하시겠습니까?")){
                const insertForm = document.getElementById("insertForm");
                const data = new FormData(insertForm);
                $.ajax({
                    url: "<c:url value='/system/efficacy/update.json' />",
                    type: "POST",
                    enctype: "multipart/form-data",
                    data: data,
                    processData: false,
                    contentType: false,
                    success: function(res) {
                        if(res.result == "success"){
                            alert("수정되었습니다.");
                            $('.insert-modal').modal("hide");
                            datatable.ajax.reload();
                        } else {
                            alert(res.message);
                        }
                    }
                })
            }
        }
    }

</script>
