@layout("/common/_container.html"){
<style>
    .green-button {
        background-color: green;
    }
</style>
<div class="ibox float-e-margins">
    <div class="ibox-content">
        <input type="hidden" id="id" value="${item.id}">
        <div class="form-horizontal">
            <div class="row">
                @if(objectType == 1){
                <div class="form-group">
                    <label class="col-sm-3 control-label">*所在省：</label>
                    <div class="col-sm-4">
                        <select class="form-control" id="provinceCode" name="provinceCode" disabled>
                            @for(obj in province){
                            <option value="${obj.code}" ${obj.code == item.provinceCode ? 'selected=selected' : ''}>${obj.name}</option>
                            @}
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">*所在市：</label>
                    <div class="col-sm-4">
                        <select class="form-control" id="cityCode" name="cityCode" disabled>
                            @for(obj in city){
                            <option value="${obj.code}" ${obj.code == item.cityCode ? 'selected=selected' : ''}>${obj.name}</option>
                            @}
                        </select>
                    </div>
                </div>
                @}
                <div class="form-group">
                    <label class="col-sm-3 control-label">*所属门店：</label>
                    <div class="col-sm-4">
                        <select class="form-control" id="storeId" name="storeId" disabled>
                            @for(obj in store){
                            <option value="${obj.id}" ${obj.id == item.storeId ? 'selected=selected' : ''}>${obj.name}</option>
                            @}
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">*预约类型：</label>
                    <div class="col-sm-4">
                        <input type="radio" name="type" value="1"  checked="" onclick="updateType(1)"   disabled> 全场
                        <input type="radio" name="type" value="2" onclick="updateType(2)"  disabled> 半场
                    </div>
                </div>



                <div class="form-group">
                    <label class="col-sm-3 control-label">*上课场地：</label>
                    <input type="hidden" id="selSiteId" value="${item.siteId}">

                    <div class="col-sm-4">
                        <select class="form-control" id="siteId" name="siteId"  onchange="CoursePackageInfo.addTime1()" disabled >
                            <option >请选择场地</option>

                            @for(obj in site){
                            <option value="${obj.id}"  data-custom-data="1" ${obj.id == item.siteId ? 'selected=selected' : ''} >${obj.name}</option>
                            @}
                        </select>
                    </div>
                </div>


                <div class="form-group"  id="half1"  hidden="hidden">
                    <label class="col-sm-3 control-label">*选择半场：</label>
                    <div class="col-sm-4">
                        <select class="form-control"  name="half" id="half" disabled>

                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <input type="hidden" id="selDate" value="${date}">
                    <label class="col-sm-3 control-label">预约时间：</label>
                    <div class="col-sm-4">
                        <input class="form-control" id="time" name="time" type="text"  value="${date}" disabled>

                    </div>
                </div>











                <div class="form-group">
                    <label class="col-sm-3 control-label">*预约时间段：</label>
                    <div class="col-sm-5" id="ttt1" disabled="">
                        <div class="layui-btn-group" id="ttt2">


                        </div>

                        <div class="layui-btn-group" id="ttt3">

                            @for(obj in timeRanges){
                            <button  disabled name="has" type="button" ${obj.state == 0 ? "class = 'layui-btn layui-btn-primary' disabled style='background-color: red'" : obj.state == 1 ? "class = 'layui-btn layui-btn-primary green-button'" : "class = 'layui-btn layui-btn-primary'"} onclick="toggleColor(this)">${obj.time}</button>
                            <!--                            <button type="button" ${obj.state == 0 ? "class = 'layui-btn layui-btn-primary' disabled style='background-color: red'" : "class = 'layui-btn layui-btn-primary' "} onclick="toggleColor(this)">${obj.time}</button>-->
                            <!--                            <button type="button" ${obj.state == 0 ? "class = 'layui-btn layui-btn-primary green-button'" : "class = 'layui-btn layui-btn-primary'"} onclick="toggleColor(this)">${obj.time}</button>-->
                            @}
                        </div>

                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">现金价格：</label>
                    <div class="col-sm-4">
                        <input class="form-control" id="cash" name="cash" type="text" value="${money[0]!}" disabled >

                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">玩派币价格：</label>
                    <div class="col-sm-4">
                        <input class="form-control" id="play" name="play" type="text" value="${money[1]!}" disabled >

                    </div>
                </div>


                <div class="form-group">
                    <label class="col-sm-3 control-label">预约人：</label>
                    <div class="col-sm-4">
                        <input class="form-control" id="booker" name="booker" type="text" value="${item.booker}" disabled >

                    </div>
                </div>




                <div class="form-group" id="hi1">
                    <label class="col-sm-3 control-label">联系电话：</label>
                    <div class="col-sm-4">
                        <input class="form-control" id="phone" name="phone" type="text" value="${item.phone}" disabled >

                    </div>
                </div>

                <div class="form-group" id="hi2">
                    <label class="col-sm-3 control-label">操作人：</label>
                    <div class="col-sm-4">
                        <input class="form-control" id="cancelUserId" name="cancelUserId" type="text" value="${cancelUser!}" disabled >

                    </div>
                </div>

                <div class="form-group" id="hi3" disabled>
                    <label class="col-sm-3 control-label head-scu-label">*上传凭证：</label>
                    <div class="col-sm-2">
                        <div id="introduceDrawingPreId">
                            <div><img width="100px" height="100px" src="${item.voucher}"></div>
                        </div>
                    </div>
                    <div class="col-sm-2">

                    </div>

                </div>


                <div class="form-group">
                    <label class="col-sm-3 control-label">备注：</label>
                    <div class="col-sm-4">
                        <textarea class="form-control" id="remark" name="remark" disabled>${item.remark}</textarea >
                    </div>
                </div>

            </div>
            <div class="row btn-group-m-t">
                <div class="col-sm-10">
<!--                    <#button btnCss="info" name="提交" id="ensure" icon="fa-check" clickFun="CoursePackageInfo.addSubmit1()"/>-->
                    <#button btnCss="danger" name="关闭" id="cancel" icon="fa-eraser" clickFun="CoursePackageInfo.close()"/>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="${ctxPath}/modular/system/ball/yuyue_info1.js"></script>
<script type="text/javascript">
    function updateType(o) {
        if(o==1){

            var elements = document.getElementsByClassName("layui-btn layui-btn-primary green-button");
            var count = elements.length;

            console.log("Number of elements: " + count);

            $("#half1").hide()
            var radios = document.getElementsByName("type");
            var selectedValue;

            for (var i = 0; i < radios.length; i++) {
                if (radios[i].checked) {
                    selectedValue = radios[i].value;
                    break;
                }
            }

            var ajax3 = new $ax(Feng.ctxPath + "/ball/getMoney/"+$('#siteId').val()+'/'+selectedValue, function(data){
                console.log("===========3333====="+data)
                if(data!=null){

                    $("#cash").val(data[0] * count);
                    $("#play").val(data[1] * count);

                }
            })
            ajax3.start()
        }else {
            var elements = document.getElementsByClassName("layui-btn layui-btn-primary green-button");
            var count = elements.length;

            console.log("Number of elements: " + count);

            $("#half1").show()
            var radios = document.getElementsByName("type");
            var selectedValue;

            for (var i = 0; i < radios.length; i++) {
                if (radios[i].checked) {
                    selectedValue = radios[i].value;
                    break;
                }
            }

            var ajax3 = new $ax(Feng.ctxPath + "/ball/getMoney/"+$('#siteId').val()+'/'+selectedValue, function(data){
                console.log("===========3333====="+data)
                if(data!=null){

                    $("#cash").val(data[0] * count);
                    $("#play").val(data[1] * count);

                }
            })
            ajax3.start()

        }

    }



    function toggleColor(button) {
        button.classList.toggle("green-button");

        var elements = document.getElementsByClassName("layui-btn layui-btn-primary green-button");
        var count = elements.length;

        console.log("Number of elements: " + count);


        var radios = document.getElementsByName("type");
        var selectedValue;

        for (var i = 0; i < radios.length; i++) {
            if (radios[i].checked) {
                selectedValue = radios[i].value;
                break;
            }
        }

        var ajax3 = new $ax(Feng.ctxPath + "/ball/getMoney/"+$('#siteId').val()+'/'+selectedValue, function(data){
            console.log("===========3333====="+data)
            if(data!=null){

                $("#cash").val(data[0] * count);
                $("#play").val(data[1] * count);

            }
        })
        ajax3.start()


    }

    laydate.render({
        elem: '#time'
        ,lang:"CN",
        min:0,
        max:10,
        format:'yyyy-MM-dd',
        done:function (a) {
            console.log("==============="+$('#time').val())
            console.log("==============="+$('#selDate').val())
            console.log("==============="+$('#siteId').val())
            console.log("==============="+$('#selSiteId').val())

            if ($('#siteId').val() != $('#selSiteId').val()||$('#time').val()!=$('#selDate').val()){
                $("#ttt3").hide()
                $("#ttt2").show()

            }else {
                $("#ttt3").show()
                $("#ttt2").hide()

            }

            console.log("==========="+a)
            var ajax = new $ax(Feng.ctxPath + "/ball/yuyuetimes/"+ $('#siteId').val(), function(data){
                console.log("================"+data)
                if(data!=null){
                    var content='';
                    $.each(data, function(k, v) {
                        var buttonClass = "layui-btn layui-btn-primary";
                        var style = "";
                        if (v.state === 0) {
                            style = "background-color: red;";
                        }
                        var disabledAttribute = v.state === 0 ? "disabled" : "";
                        content += '<button type="button" class="' + buttonClass + '" ' + disabledAttribute + ' style="' + style + '" onclick="toggleColor(this)">' + v.time + '</button>';
                    });
                    $("#ttt2").empty().append(content);
                }
            })
            ajax.start()

            var ajax1 = new $ax(Feng.ctxPath + "/ball/halfName/"+ $('#siteId').val(), function(data){
                console.log("================"+data)
                if(data!=null){
                    let htmlStr = '';
                    for (let i = 0; i < data.length; i++) {
                        htmlStr += '<option value="' + data[i] + '">' + data[i] + '</option>'
                    }
                    $("#half").empty().append(htmlStr);
                }
            })
            ajax1.start()





        }


    });

    laydate.render({
        elem: '#holitime'
        ,range: true //或 range: '~' 来自定义分割字符
    });

    var avatarUp = new $WebUpload("coverDrawing");
    avatarUp.setUploadBarId("progressBar");
    avatarUp.init();

    var avatarUp1 = new $WebUpload("detailDrawing");
    avatarUp1.setUploadBarId("progressBar");
    avatarUp1.init();

    var avatarUp1 = new $WebUpload("introduceDrawing");
    avatarUp1.setUploadBarId("progressBar");
    avatarUp1.init();
    function addTime(){
        var i =  $('#dayTime > div').length

        let htmlStr ='           <div style="display:flex">\n' +
            '                                <input class="form-control" id="classStartTime'+i+'" name="classStartTime" placeholder="请选择" style="width: 200px;">\n' +
            '                                <i class="fa fa-trash-o" style="font-size:24px" onclick="removePrice1(this)"></i>\n' +
            '                            </div>'
        $('#dayTime').append(htmlStr);
        console.log("========="+i)
        laydate.render({
            elem: '#classStartTime'+i,
            type: 'time',
            range: true
        });
    }
</script>
@}