<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="token" value="{{ csrf_token() }}">
    <title>橙橙网络</title>
    <script>
        function reSizeRem() {
            var ClientWidth = document.documentElement.clientWidth > 750 ? 750 : document.documentElement.clientWidth,
                UiWidth = 750,
                FontSize = ClientWidth / UiWidth * 100;
            document.documentElement.style.fontSize = FontSize + 'px';
        }

        reSizeRem();
        window.onresize = function () {
            reSizeRem();
        }
    </script>
    <link rel="stylesheet" href="{{ asset('/ald/sign/css/style.css?v=2021052801') }}">
    <style>
    ::-webkit-scrollbar {
        display: none; 
    }
    ::-moz-scrollbar {
        display: none; 
    }
    ::-ms-scrollbar {
        display: none; 
    }
    ::-o-scrollbar {
        display: none; 
    }
    ::scrollbar {
        display: none; 
    }
    .ald-container .sign-container .gift-award dl .status{
        cursor: pointer;
        height: .45rem;
        bottom: 0;
    }
    .task-date dt{
        cursor: pointer;
    }
    </style>
    <script src="{{ asset('js/jquery.2.1.3.min.js') }}"></script>
    <script src="{{ asset('js/toast.js') }}"></script>
    <script src="{{ asset('js/main.min.js?v=20210528') }}"></script>
    <script src="{{ asset('js/sign.min.js?v=2021050802') }}"></script>
</head>
<body>
@if(!$isWx)
    <div class="is-weixin hide">
        <img src="{{ asset('ald/sign/images/wx.png') }}" class="m-img" alt="">
    </div>
@else
    <div class="ald-container">
    <div class="login-info">
        欢迎您，
        @if($isLogin == 0) <a href="{{ $loginUrl }}">【登录】</a> @endif
        @if($isLogin == 1)
            {{ $userName }} <span class="role-info"></span>
            @if($isBandOrange == 0) <a href="{{ $bindOrangeUrl }}">【绑定】</a> @endif
            @if($isBandOrange == 1)
                @if($isBindRole == 0) <a href="javascript:" class="show-roles">【绑定角色】</a> @endif
                @if($isBindRole == 1) {{ $serverName }} {{ $roleName }} @endif
            @endif
            <a href="{{ $loginOutUrl }}">【注销】</a>
        @endif
    </div>
    <div class="sign-container">
        <div class="sign-content">
            <div class="task-container">
                <div class="scroll-container">
                    <div class="progress-date">
                        <span data-type="{{$signDay}}" style="width: {{ sprintf('%.2f',($signDay/12)* 100) }}%;"></span>
                    </div>
                    <div class="task-date">
                        @for($i = 1;$i < 13;$i++)
                            @if($i == 3)
                                @if(in_array(3,$giftArr))
                                    <dl class="done gift">
                                        <dt data-type="{{ $i }}"><span>{{ $continueSign[3]['itemName'] }}</span></dt>
                                        <dd class="line"></dd>
                                        <dd>{{ $i }}</dd>
                                    </dl>
                                @else
                                    @if($signDay > 2)
                                        <dl class="current">
                                            <dt data-type="{{ $i }}"></dt>
                                            <dd class="line"></dd>
                                            <dd>{{ $i }}</dd>
                                        </dl>
                                    @else
                                        <dl class="gift">
                                            <dt data-type="{{ $i }}"><span>{{ $continueSign[3]['itemName'] }}</span></dt>
                                            <dd class="line"></dd>
                                            <dd>{{ $i }}</dd>
                                        </dl>
                                    @endif
                                @endif
                            @elseif($i == 7)
                                @if(in_array(7,$giftArr))
                                    <dl class="done gift">
                                        <dt data-type="{{ $i }}"><span>{{ $continueSign[7]['itemName'] }}</span></dt>
                                        <dd class="line"></dd>
                                        <dd>{{ $i }}</dd>
                                    </dl>
                                @else
                                    @if($signDay > 6)
                                        <dl class="current">
                                            <dt data-type="{{ $i }}"></dt>
                                            <dd class="line"></dd>
                                            <dd>{{ $i }}</dd>
                                        </dl>
                                    @else
                                        <dl class="gift">
                                            <dt data-type="{{ $i }}"><span>{{ $continueSign[7]['itemName'] }}</span></dt>
                                            <dd class="line"></dd>
                                            <dd>{{ $i }}</dd>
                                        </dl>
                                    @endif
                                @endif
                            @elseif($i == 12)
                                @if(in_array(12,$giftArr))
                                    <dl class="done gift">
                                        <dt data-type="{{ $i }}"><span>{{ $continueSign[12]['itemName'] }}</span></dt>
                                        <dd class="line"></dd>
                                        <dd>{{ $i }}</dd>
                                    </dl>
                                @else
                                    @if($signDay > 11)
                                        <dl class="current">
                                            <dt data-type="{{ $i }}"></dt>
                                            <dd class="line"></dd>
                                            <dd>{{ $i }}</dd>
                                        </dl>
                                    @else
                                        <dl class="gift">
                                            <dt data-type="{{ $i }}"><span>{{ $continueSign[12]['itemName'] }}</span></dt>
                                            <dd class="line"></dd>
                                            <dd>{{ $i }}</dd>
                                        </dl>
                                    @endif
                                @endif
                            @else
                                <dl @if($signDay >= $i) class="done" @endif>
                                    <dt data-type="{{ $i }}"></dt>
                                    <dd class="line"></dd>
                                    <dd>{{ $i }}</dd>
                                </dl>
                            @endif
                        @endfor
                    </div>
                </div>
                <div class="scroll-container scroll-container-gift">
                    <div class="progress-gift">
                    </div>
                    <div class="gift-award">
                        @foreach($signGift as $key=>$sign)
                        <dl @if($key <= $num)
                                @if(in_array($allSignDate[$key],$signData))
                                    class="done dl{{ $key }}"
                                @else
                                    @if($key == $num) class="current dl{{ $key }}" @endif
                                @endif
                            @endif >
                            <dt class="icon"></dt>
                            <dd class="num">{{ $key }}</dd>
                            <dd class="gift-img gift-img{{ $key }}"><span></span></dd>
                            <dd class="gift-name gift-name{{ $key }}" style="padding: .1rem 0 0;">{{ $sign['itemName'] }}</dd>
                            <dd class="status" data-type="{{ $key }}">签到</dd>
                        </dl>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="rules-container">
        <h2 class="title">签到活动规则</h2>
        <div class="rules">
            <p><span>1</span>活动时间：{{ $startTime }}~{{ $endTime }}</p>
            <p><span>2</span>登录/注册橙橙平台账号并绑定Orange识别码 即可参与【签到有礼】活动</p>
            <p><span>3</span>每人每天可签到一次，每次签到可获得相应 《阿拉德之怒》福利一份</p>
            <p><span>4</span>玩家累计签到3天、7天、12天可获得额外的奖励</p>
            <p><span>5</span>玩家签到需绑定《阿拉德之怒》游戏角色，每 个橙橙平台账号只可绑定一个角色，且不可更 换，请谨慎选择</p>
            <p><span>6</span>成功领取礼包后，可前往玩家绑定的角色邮箱 中进行查收</p>
            <p><span>7</span>该活动仅限《阿拉德之怒》月光酒馆、元素回廊、天空之海、光之宫殿服务器的玩家参与</p>
        </div>
    </div>
    <div class="dialog dialog-received-gift hide">
        <div class="form-container">
            <h3>领取礼包</h3>
            <a href="javascript:" class="close"></a>
            <ul class="form">
                <li class="icon-server">
                    <div class="selct-container">
                        <div class="select">
                            <span>请选择服务器</span>
                            <ul class="select-option server-select">
                            </ul>
                        </div>
                    </div>
                </li>
                <li class="icon-role">
                    <div class="selct-container">
                        <div class="select">
                            <span class="role">请选择角色</span>
                            <ul class="select-option role-select">
                            </ul>
                        </div>
                    </div>
                </li>
            </ul>
            <button class="btn btn-bind-role btn-small">绑定角色</button>
            <span class="red-color">（确认绑定角色后将无法换绑）</span>
        </div>
    </div>
    <!--确认框-->
    <div class="dialog dialog-confirm hide">
        <div class="form-container">
            <h3>温馨提示</h3>
            <p class="toast-msg">密码修改成功，请重新登录！</p>
            <a href="javascript:" class="btn btn-small">确定</a>
        </div>
    </div>
</div>
@endif
<script>
    var num = {{$num}}
    var giftWidth = $('.gift-award dl').width();
    $(".scroll-container-gift").animate({scrollLeft:giftWidth*(num-1)});
</script>
</body>
</html>
