@extends('vip.layouts')
@section('content')
	
	<style type="text/css">
    /* 弹窗 (background) */
    .modal {
        display: none; /* 默认隐藏 */
        /*生成绝对定位的元素，相对于浏览器窗口进行定位。*/
        position: fixed; 
        z-index: 1; 
        left: 0;
        top: 0;
        /*设置弹窗位置*/
        padding-top: 100px;
        padding-bottom: 200px;
        /*浮在全屏上*/
        width: 100%; 
        height:  100%; 
        /*overflow：auto；如果内容被修剪，则浏览器会显示滚动条，以便查看其余内容。*/
        overflow: auto; 
        background-color: rgb(0,0,0); 
        background-color: rgba(0,0,0,0.4);
        text-align: right;
    }

    /* 弹窗内容 */
    .modal-content {
        /*position: relative;*/
        /*弹窗背景色设置*/
        background-color: #fefefe;
        margin: auto;
        padding: 260px auto;
        width: 600px;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        -webkit-animation-name: animatetop;
        -webkit-animation-duration: 0.4s;
        animation-name: animatetop;
        animation-duration: 0.4s;
        border-radius: 10px;
       }

    /* 添加动画 */
    @-webkit-keyframes animatetop {
        from {top:-200px; opacity:0} 
        to {top:0; opacity:1}
    }

    @keyframes animatetop {
        from {top:-200px; opacity:0}
        to {top:0; opacity:1}
    }

    /* 关闭按钮 */
    .close {
        color: white;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover, .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

    .modal-header {
        display: block;
        line-height: 30px;
        padding: 2px 10px;
        background-color: #AEAEAE;
        color: white;
        text-align: left;
        border-radius: 5px 5px 0 0;
    }

    .modal-body {
        padding: 2px 16px;
        font-size: 18px;
        /*height: 200px;*/
    }

    .modal-footer {
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 520px;
        padding: 0 40px;
        height: 50px;
       border-radius:0 0 5px 5px;
        display: block;
        line-height: 39px;
        background-color: #AEAEAE;
        color: white;
    }
    .ok,.no{
        width: 100px;
        height: 40px;
    }
</style>

	<div class="layui-row">
		<div class="layui-col-xs12">
			<div class="layui-form-item">
				<div class="layui-inline">
    				<!-- <label class="layui-form-label">搜&nbsp;&nbsp;索 </label>
                    <input type="hidden" id="match_id" name="match_id" value="{{$match_id}}">
    				<div class="layui-input-inline">
    					<input type="text" name="sousuo" id="sousuo" lay-verify="" autocomplete="off" class="layui-input" value="">
    				</div>

    				<div class="layui-inline">
                        <button class="layui-btn layui-btn-sm lay-btn-diy" data-type="reload" style="opacity: 1; pointer-events: auto;" onclick="soulist()">提交</button>
    				</div> -->
                    
					<div class="layui-inline" style="margin-left:20px;"><button onclick="addResult({{$match_id}},'',10000)" class="layui-btn layui-btn-sm layui-btn-green set">添加</button></div>
				</div>
			</div>
		</div>
	</div>
	
    <table lay-filter="parse-table-demo">
        <tr class="layui-form-item">
            <td class="layui-form-label" style="width:150px;left:10px;">时 间</td>
            <td class="layui-form-label" style="width:100px;left:10px;">类 型</td>
            <td class="layui-form-label" style="width:100px;left:10px;">操 作</td>
        </tr>
        @foreach ($warnmore as $k=>$val)
        <tr class="layui-form-item">
            <td class="layui-form-label" style="width:150px;left:10px;">{{$warnmore[$k]['timei']}}</td>
            <td class="layui-form-label" style="width:100px;left:10px;">{{$warnmore[$k]['rtype']}}</td>
            <td class="layui-form-label" style="width:100px;left:10px;">
                <button onclick="addResult({{$match_id}},{{$k}},2)" class="layui-btn layui-btn-sm layui-btn-green set">编辑</button>
            </td>
        </tr>
        @endforeach
    </table>

	<!-- 弹窗 -->
	<div id="myModal" class="modal">
            <input type="hidden" id="matchid" name="matchid" value="">
            <input type="hidden" id="wid" name="wid" value="">
            <input type="hidden" id="typenum" name="typenum" value="">
            <div class="modal-content">
                <div class="modal-header">
                    <span class="close">&times;</span>
                    <h2>危险球添加</h2>
                </div>
                <div class="modal-body">
                    <p style="text-align:left;color:#5f7788;">请认真填写危险球结果,将会按照改结果结算</p><br>
                    <div style="text-align:left;">
                        <div style="display: flex;">
                            <li>危险球时间：</li><input type="text" id="timei" name="timei" value="0" autocomplete="off">
                        </div>
                        <div style="display: flex;">
                            <li>危险球类型：</li>
                            <select name="warntype" id="warntype">
                            </select>
                        </div><br>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="ok" onchange="buttonClick()"><h3>确定</h3></button>&nbsp;<button class="no"><h3>取消</h3></button>
                </div>
            </div>
    </div>

    <script>
    	function addResult(match_id,wid,typenum){
            $(":input",$("#myModal")).each(function(i){  $(this).val('');});
            var wid = wid?wid:0;
            document.getElementById("matchid").value=match_id;//赋值个弹窗
            document.getElementById("wid").value=wid;//赋值个弹窗
            document.getElementById("typenum").value=typenum;//赋值个弹窗
          
            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: '/admin/Sportsfoot/warnresult',
                data: {match_id:match_id,wid:wid},
                success: function(data) {
                    document.getElementById("timei").value=data[wid].timei;
                    warntype = "<option value='"+data[wid].rtype+"' selected=''>";
                    if (data[wid].rtype!=0){
                        warntype += data[wid].rtype;
                    }else{
                        warntype += '请选择危险球';
                    }
                    warntype += "</option><option value='角球'>角球</option><option value='12码罚球'>12码罚球</option><option value='自由球'>自由球</option><option value='掷入球'>掷入球</option>";
                    $("#warntype").html(warntype);
                }
            }) 

            //获取弹窗得div
            var modal = document.getElementById('myModal');
            // 获取 <span> 元素，用于关闭弹窗 （X）
            var span = document.getElementsByClassName("close")[0];
            //获取弹窗中得确定按钮
            var ok=document.getElementsByClassName("ok")[0];
            //获取弹窗中得取消按钮
            var no=document.getElementsByClassName("no")[0];
            //窗体弹出
            modal.style.display = "block";
            //点击窗体ok
            ok.onclick=function(){
                //执行弹出窗体得确定后得操作
                alert("执行确定按钮点击得操作");
                //关闭窗口
                modal.style.display = "none";
                buttonClick();
            }
            //点击窗体取消按钮
            no.onclick=function(){
                //直接关闭窗口
                modal.style.display = "none";
            }
            // 点击 <span> (x), 关闭弹窗
            span.onclick = function() {
                //直接关闭窗口
                modal.style.display = "none";
            }
            // 在用户点击其他地方时，关闭弹窗
            window.onclick = function(event) {
                //点击窗口外内容，关闭窗口
                if (event.target == modal) modal.style.display = "none";
            }
        }

        function buttonClick(){
            var matchid = $("#matchid").val();
            var timei = $("#timei").val();
            var warntype = $("#warntype").val();
            var wid = $("#wid").val();
            var typenum = $("#typenum").val();

            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: '/admin/Sportsfoot/addwarnonly',
                data: {matchid:matchid,timei:timei,warntype:warntype,wid:wid,typenum:typenum},
                success: function(data) {
                    if(data.status==1){
                        layer.msg(data.msg);
                        location. reload()//刷新当前页面
                    }else{
                        layer.msg(data.msg);return;
                    }
                }
            })
        }
        //搜索
        // function soulist(){
        //     var sousuo = $("#sousuo").val();
        //     var match_id = $("#match_id").val();
            
        //     $.ajax({
        //         type: 'POST',
        //         dataType: 'json',
        //         url: '/admin/Sportsfoot/addwarn',
        //         data: {match_id:match_id,sousuo:sousuo},
        //         success: function(data) {
        //             location. reload()//刷新当前页面           
        //         }
        //     })
        // }

    </script>

@endsection