@model NP.Model.VMCourse
    <div class="container">
        <div class="schBox" style="display:none;">
            <form id="smartSearchForm" method="post">
                <input type="hidden" name="cmno" id="cmno" />
                <input type="hidden" name="stringval" id="stringval" value="@Model.stringval" />
                @if (Model.stringval == "0" || Model.stringval == null || Model.stringval == "")
                {
                    <ul class="schTab">
                        <li id="liTab1" class="current" style="font-size:16pt;"><a href="#">건설기술진흥법교육</a></li>
                        <li id="liTab2" style="font-size:16pt;display:none;"><a href="#">기타교육</a></li>
                    </ul>
                    <ul class="schCont">
                        <li>
                            <select name="stringval2" id="stringval2">
                                @*<option value="0" @(Model.stringval2 == "0" ? "selected" : "")>온라인교육</option>*@
                                @*<option value="1" @(Model.stringval2 == "1" ? "selected" : "")>교육장교육</option>*@
                                <option value="2" @(Model.stringval2 == "2" ? "selected" : "")>온라인교육</option>
                            </select>
                        </li>
                        <li>
                            @*typeman는 데이터가 model.comcodes2임, 수정시 주의할것*@
                            @Html.DropDownListFor(x => x.stringval3, new SelectList(Model.ComCodes2, "ccode", "cname"), "-선택-")
                        </li>
                        <li>
                            @*typeedu는 데이터가 model.comcodes3임, 수정시 주의할것*@
                            @Html.DropDownListFor(x => x.stringval4, new SelectList(Model.ComCodes3, "ccode", "cname"), "-선택-")
                        </li>
                        <li>
                            @*typegrade는 데이터가 model.comcodes4임, 수정시 주의할것*@
                            @Html.DropDownListFor(x => x.stringval5, new SelectList(Model.ComCodes4, "ccode", "cname"), "-선택-")
                        </li>
                        <li>
                            @Html.DropDownListFor(x => x.stringval6, new SelectList(Model.ComCodes5, "ccode", "cname"), "-선택-")
                        </li>
                        <li><a href="#" id="btnSearch">검색</a></li>
                    </ul>
                }
                else if (Model.stringval == "1")
                {
                    <ul class="schTab">
                        <li id="liTab1"><a href="#" style="font-size:16pt;">건설기술진흥법교육</a></li>
                        <li id="liTab2" class="current" style="font-size:16pt;"><a href="#">기타교육</a></li>
                    </ul>
                    <ul class="schCont">
                        <li>
                            <select name="stringval2" id="stringval2">
                                @*<option value="0" @(Model.stringval2 == "0" ? "selected" : "")>온라인교육</option>*@
                                <option value="1" @(Model.stringval2 == "1" ? "selected" : "")>교육장교육</option>
                                <option value="2" @(Model.stringval2 == "2" ? "selected" : "")>온라인교육</option>
                            </select>
                        </li>
                        <li>
                            @Html.DropDownListFor(x => x.stringval3, new SelectList(Model.CMsEtc, "cgno", "cgname"), "-선택-")
                        </li>
                        <li><a href="#" id="btnSearch">검색</a></li>
                    </ul>
                }


            </form>
        </div>

        <p class="subDsc mt15">본인의 기술인 정보를 모르실 경우에는 아래링크를 클릭하여 정보 확인 후 교육신청을 하여 주시기 바랍니다.</p>
        <ul class="smtLnk">
            <li><a href="https://homenet.kocea.or.kr:1443" target="_blank">한국건설기술인협회 이동</a></li>
            <li><a href="https://www.kira.or.kr" target="_blank">건축사협회 이동</a></li>
        </ul>
        <br/>
        @if(Model.stringval2 == "2")
        {
            <p class='subDsc' style='color:red;'>※ 온라인 교육은 입금완료시 교육이 바로 시작되며 동영상 시청이 가능합니다</p>
            @:※ 각 기수별 <span style='color:red;'>교육종료일을 꼭 확인하시고</span> 교육신청 부탁드립니다.
        }
        <input type="hidden" id="hidCmno" />
        <ul class="smtList" style="margin-bottom:150px">
            @foreach (var item in Model.CMs)
            {
                <li>
                    <div class="smtlCont">
                        <h5><em style="font-size:15px" class="@(item.cshape == 0 ? "org" : item.cshape == 1 ? "grn" : "blu")">@(item.cshape == 0 ? "온라인" : item.cshape == 1 ? "교육장교육" : "온라인교육")</em> <span style="font-size:22px">@item.cname</span></h5>
                        <ul class="smtlBtn">
                            <li style="font-size:18px;"><a href="#" class="smtlBtn02" onclick="javascript: getSubCm(@item.cshape, @item.cmno)">조회하기</a></li>
                        </ul>
                    </div>
                    @if (item.cshape == 1)
                    {
                        <ul class="smtlTab" id="divTab_@item.cmno" style="display:none">
                            <li class="current" onclick="javascript:setStudyplace(this,@item.cmno);"><a href="javascript:getSubCm(1, @item.cmno);">전체</a></li>
                            @foreach (var t in Model.ComCodes)
                            {
                                <li onclick="javascript:setStudyplace(this,@item.cmno);"><a href="javascript:getSubCm(1, @item.cmno, @t.ccode);">@t.cname 교육장</a></li>
                            }
                        </ul>
                    }
                    <ul class="smtlChk" id="ulSubCm_@item.cmno"></ul>
                </li>
            }
            @if (Model.CMs.Count == 0)
            {
                <li style="border:0px;">
                    <div style="margin: 0 auto;display: table;text-align: center;">
                        <p style="font-size: 25px;line-height: 50px;">현재 개설된 과정이 없습니다.</p><p class="subDsc">자세한 사항은 1544-7660으로 문의 하세요.</p>
                    </div>
                </li>
            }
        </ul>

        <ul class="clsBtn society">
            <li style="display:none;"><a  href="/" >뒤로가기</a></li>
            <li><a href="/" >뒤로가기</a></li>
        </ul>

    </div>

<div class="clsPop" id="divIntro" style="display:none;">
    <div>
        <div>
            <div class="clsPopWrap">
                <div class="clsPopTitle">
                    <h5>강좌소개</h5>
                    <a href="#" onclick="javascript: closeIntro();"></a>
                </div>
                <div class="clsPopCont">
                    <ul class="smtList pop">
                        <li>
                            <div class="smtlCont">
                                <h5><span id="spnCmTitle"></span></h5>
                                <div class="gry">
                                    <p>교육분류 : <span id="spnCmKind"></span></p>
                                    <p>인정시간 : <span class="sky"><span id="spnCmStudyHour"></span></span>시간</p>
                                    <p>수료기준 : 진도 <span id="spnCmAttend"></span>% 이상, 시험 <span id="spnCmFinal"></span>점 이상, 과제 <span id="spnCmSubject"></span>점 이상</p>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <dl class="fairIntro">
                        <dt>강사정보</dt>
                        <dd><span id="spnCmUsername"></span></dd>
                    </dl>
                    <dl class="fairIntro">
                        <dt>강좌소개</dt>
                        <div id="spnCmIntroHtml"></div>
                    </dl>
                </div><!-- clsPopCont -->
            </div><!-- clsPopWrap -->
        </div>
    </div>
</div>


<script type="text/javascript">
    var _cmno;
    $(document).ready(function () {

        $('#liTab1').click(function () {
            $.when(
                $("#stringval").val("0"),
                $("#stringval3").val(""),
                $("#stringval4").val(""),
                $("#stringval5").val(""),
                $("#stringval6").val("")
            ).done(function () {
                $("#smartSearchForm").submit();
            });

        });
        $('#liTab2').click(function () {
            $.when(
                $("#stringval").val("1"),
                $("#stringval3").val(""),
                $("#stringval4").val(""),
                $("#stringval5").val(""),
                $("#stringval6").val("")
            ).done(function () {
                $("#smartSearchForm").submit();
            });
        });
        $('#btnSearch').click(function () {
            if ($("#liTab1").hasClass("current")) {
                $("#stringval").val("0");
            }
            else if ($("#liTab2").hasClass("current")) {
                $("#stringval").val("1");
            }
            setTimeout(function () {
                $("#smartSearchForm").submit();
            }, 1000);
        });

        $("#stringval").change(function () {
            $("#smartSearchForm").submit();
        });
        $("#stringval2").change(function () {
            $("#stringval3").val("");
            $("#stringval4").val("");
            $("#stringval5").val("");
            $("#stringval6").val("");
            $("#smartSearchForm").submit();
        });
        $("#stringval3").change(function () {
            $("#stringval4").val("");
            $("#stringval5").val("");
            $("#stringval6").val("");
            $("#smartSearchForm").submit();
        });
        $("#stringval4").change(function () {
            $("#stringval5").val("");
            $("#stringval6").val("");
            $("#smartSearchForm").submit();
        });
        $("#stringval5").change(function () {
            $("#stringval6").val("");
            $("#smartSearchForm").submit();
        });
        $("#stringval6").change(function () {
            $("#smartSearchForm").submit();
        });
    });

    function openIntro(cmno) {
        $("#divIntro").show();
        capp("/focommon/getcmuser", { cmno: cmno }, "renderCmNo");
    }
    function renderCmNo() {
        var typeman = $("#stringval3").find("option:selected").text();
        var typeedu = $("#stringval4").find("option:selected").text();
        var typegrade = $("#stringval5").find("option:selected").text();
        var typejob = $("#stringval6").find("option:selected").text();
        var cmkind;
        cmkind = typeman + " | " + typeedu + " | " + typegrade + " | " + typejob;
        if ($("#stringval").val() == "1") {
            cmkind = $("#stringval3").find("option:selected").text();
        }

        $.each(capResult.obj, function (i, d) {
            $("#spnCmTitle").text(d.text);
            $("#spnCmKind").text(cmkind);
            $("#spnCmStudyHour").text(d.studytime);
            $("#spnCmAttend").text(d.attendcut);
            $("#spnCmFinal").text(d.finalcut);
            $("#spnCmSubject").text(d.subjectcut);
            $("#spnCmUsername").text(d.username);
            if (d.introhtml != null && d.introhtml != "" && d.introhtml != undefined) {
                $("#spnCmIntroHtml").html(d.introhtml);
                //$("#spnCmIntroHtml").text($('<div/>').html(d.introhtml).text());
            }
        });
    }
    function closeIntro() {
        $("#divIntro").hide();
    }

    function setStudyplace(v,cmno) {
        $("#divTab_" + cmno + " > li").removeClass("current");
        $(v).addClass("current");
    }

    function getSubCm(cshape, no, place) {
        var issearchable = false;
        if ($("#stringval").val() == 0 && $("#stringval3").val() != "" && $("#stringval4").val() != "" && $("#stringval5").val() != "" && $("#stringval6").val() != "") {
            issearchable = true;
        } else if($("#stringval").val() == 1 && $("#stringval3").val() != "" ) {
            issearchable = true;
        }
        if (issearchable) {
            _cmno = no;
            if (cshape == 1) {
                $("#divTab_" + no).show();
            }
            else {
                $("#divTab_" + no).hide();
            }
            capp("/focommon/getsubcm", { cmno: no, studyplace: place }, "renderSubCmGrid");
        }
    }
    function renderSubCmGrid() {
        var cmno = _cmno;
        var ulSubCm = $("#ulSubCm_" + cmno);
        ulSubCm.empty();
        //var applyClass = "<li><p class='subDsc' style='color:red;'>※ 입금완료시 교육이 바로 시작되며 동영상 시청이 가능합니다</p >※ 각 기수별 <span style='color:red;'>교육종료일을 꼭 확인하시고</span> 교육신청 부탁드립니다.</li>";
        $.each(capResult.obj, function (i, d) {
            var li = $("<li />");
            var p = $("<p />");
            var a = $("<a />", { "onclick": "javascript:openIntro(" + d.cmno + ");" });
            var a2 = $("<a />", { "onclick": "javascript:applyClass(" + d.cmno +");" });
            var spanIntro = $("<span />", { "class": "smtlChkBtn smtlChk01", "style":"right:130px; font-size:18px;"});
            var span = $("<span />", { "class": "smtlChkBtn smtlChk03" , "style": "font-size:18px" });

            if (d.quota != 0) {
                var cnt = d.quota - d.lectcnt;
                if (cnt <= 0) {
                    span = $("<span />", { "class": "smtlChkBtn smtlChk02" ,"style": "font-size:18px" });
                    span.text("대기접수");
                }
                else {
                    span.text("수강신청");
                }
            }
            else {
                span.text("수강신청");
            }

            if (d.cshape == 0) {
                //p.html("<label style='cursor:default; font-size:18px'>" + d.tseq + "기  | " + d.cname + " | <span style='" + ((d.retimeymd == "2099-12-31") ? 'display:none' : '') + "'><span class='gry'>" + d.ssrename + "</span></span><span class='red'> " + (d.retimeymd == "2099-12-31" ? "신청일로부터 " + d.studydays + "일 (" + d.studytime + " 시간)" : "(" + d.studytime + "시간)") + "</span> | <span class=red>" + bindComma(d.infee) + "원</span></label>");
                p.html("<label style='cursor:default; font-size:18px'>" + d.tseq + "기  | " + d.cname + " | <span style='" + ((d.retimeymd == "2099-12-31") ? 'display:none' : '') + "'><span class='gry'>" + d.ssrename + "</span></span><span class='red'> " + (d.retimeymd == "2099-12-31" ? "(" + d.studytime + " 시간)" : "(" + d.studytime + "시간)") + "</span> | <span class=red>" + bindComma(d.infee) + "원</span></label>");
            }
            else if (d.cshape == 1) {
                //p.html("<label style='cursor:default; font-size:18px'>" + d.tseq + "기  | <span class='blu'>[" + d.studyplacename + "교육장]</span> " + d.cname + " | <span style='" + ((d.retimeymd == "2099-12-31") ? 'display:none' : '') + "'><span class='gry'>" + d.ssrename + "</span></span><span class='red'> " + (d.retimeymd == "2099-12-31" ? "신청일로부터 " + d.studydays + "일 (" + d.studytime + " 시간)" : "("+d.ssretimeToDay +"일)") + "</span> | <span class=red>" +bindComma(d.infee)+"원</span></label>");
                p.html("<label style='cursor:default; font-size:18px'>" + d.tseq + "기  | <span class='blu'>[" + d.studyplacename + "교육장]</span> " + d.cname + " | <span style='" + ((d.retimeymd == "2099-12-31") ? 'display:none' : '') + "'><span class='gry'>" + d.ssrename + "</span></span><span class='red'> " + (d.retimeymd == "2099-12-31" ? "(" + d.studytime + " 시간)" : "("+d.ssretimeToDay +"일)") + "</span> | <span class=red>" +bindComma(d.infee)+"원</span></label>");
            }
            else if (d.cshape == 2) {
                //p.html("<label style='cursor:default; font-size:18px'>" + d.tseq + "기  | " + d.cname + " | <span style='" + ((d.retimeymd == "2099-12-31") ? 'display:none' : '') + "'><span class='gry'>" + d.ssrename + "</span></span><span class='red'> " + (d.retimeymd == "2099-12-31" ? "신청일로부터 " + d.studydays + "일 (" + d.studytime + " 시간)" : "(" + d.studytime + "시간)") + "</span> | <span class=red>" + bindComma(d.infee) + "원 ※ 집체교육 선택 필수</span></label>");
                //p.html("<label style='cursor:default; font-size:18px'>" + d.tseq + "기  | " + d.cname + " | <span style='" + ((d.retimeymd == "2099-12-31") ? 'display:none' : '') + "'><span class='red'>교육종료일(" + d.setimeymd + "까지)</span></span><span> " + (d.retimeymd == "2099-12-31" ? "신청일로부터 " + d.studydays + "일 (" + d.studytime + " 시간)" : "(" + d.studytime + "시간)") + "</span></label>");
                //p.html("<label style='cursor:default; font-size:18px'>" + d.cname + "<span style='" + ((d.retimeymd == "2099-12-31") ? 'display:none' : '') + "'></span><span> " + (d.retimeymd == "2099-12-31" ? "신청일로부터 " + d.studydays + "일 (" + d.studytime + " 시간)" : "(" + d.studytime + "시간)") + "</span></label>");
                p.html("<label style='cursor:default; font-size:18px'>" + d.cname + "<span style='" + ((d.retimeymd == "2099-12-31") ? 'display:none' : '') + "'></span><span> " + (d.retimeymd == "2099-12-31" ? "(" + d.studytime + " 시간)" : "(" + d.studytime + "시간)") + "</span></label>");
            }
            spanIntro.text("강좌소개");
            li.append(p);
            a.append(spanIntro);
            li.append(a);
            a2.append(span);
            li.append(a2);
            ulSubCm.append(li);
        });
        if (ulSubCm.html() != "") {
            //ulSubCm.append(applyClass);
        }
        if (capResult.obj.length <= 0) {
            ulSubCm.append("<p class='subDsc' style='margin-top:30px; margin-bottom:30px'>※ 강좌가 없습니다.</p >");
        }
    }

    function applyClass(cmno) {
        if (@ViewBag.SSUserNo > 0) {
            checkLectIsComplete(cmno);
        }
        else {
            msg("로그인 후 신청 할 수 있습니다.");
            return;
        }
    }

    function checkLectIsComplete(cmno) {
        _cmno = cmno;
        capp("/focommon/GetCheckLectIsComplete", { cmno: cmno }, "check");
    }
    function check() {
        var cnt = capResult.obj;
        if (cnt > 0) {
            msg("이미 수강/수료한 과정입니다.");
            return;
        }
        else {
            $("#cmno").val(_cmno);
            $("#smartSearchForm").attr("action", "/Course/ApplyEdu").submit();
        }
    }
</script>