<div class="container m-top">
    <!-- Banner -->
    <?php
    $index_img = $race->getimg($id);

    if ($index_img) {
        echo "<img src=$index_img width=100% />";
    }

    ?>
    <div id="race_top">
        <?php if ($id || $race_id) { ?>
            <div class="panel-body">
                <div class="btn-group btn-group-justified">
                    <a href="index.php?c=race&action=race_msg&id=<?php echo $id ?>" class="btn btn-info">
                        <i class="fa fa-book"></i><br />详细信息</a>
                    <a href="#" onclick="reg()" class="btn btn-info">
                        <i class="fa fa-pencil"></i><br />
                        报名</a>
                    <a href="index.php?c=article&action=list&menu=1&race_id=<?php echo $id ?>" class="btn btn-info">
                        <i class="fa fa-table"></i><br />
                        公告</a>
                    <a href="index.php?c=article&action=list&menu=2&race_id=<?php echo $id ?>" class="btn btn-info">
                        <i class="fa fa-newspaper-o"></i><br />
                        新闻</a>
                    <?php if ($result[0]['photo_link']) { ?>
                        <a href="<?php echo $result[0]['photo_link'] ?>" target="_blank" class="btn btn-info">
                            <i class="fa fa-photo"></i><br />
                            图片</a>
                    <?php } ?>
                    <a href="index.php?c=race&action=race_cert_search&race_id=<?php echo $id ?>" class="btn btn-info">
                        <i class="fa fa-trophy"></i><br />
                        证书</a>
                </div>
            </div>
        <?php
        }
        ?>

    </div>
    <div class="row">
        <div class="col-md-5">
            <?php
            $img = $race->get_images($id);
            foreach ($img as $row) {
                echo "<img src=" . $row['images_url'] . " width=100% />";
            }
            ?>
        </div>
        <div class="col-md-7">
            <div class="msg_div">
                <h1>
                    <center><?php echo $result[0]['race_title'] ?></center>
                </h1>
                <br />
                <div class="power-hosting div">
                    <span class="new_title_1">报名结束时间:<?php echo $result[0]['sign_end_time'] ?></span></b>
                    <?php
                    if ($race_group_result) {
                        foreach ($race_group_result as $row) {
                            ?>
                            <table class="table" style="background: white;">
                                <tr>
                                    <td>
                                        <?php echo  $row['title'] ?>/<?php echo $row['mount'] ?>人/

                                        <?php echo  $row['price'] ?>元

                                        / <?php echo  $row['distance']; ?>公里

                                        <?php
                                                if (time() > strtotime($result[0]['sign_start_time']) and time() < strtotime($result[0]['sign_end_time'])) { ?>
                                            <?php if ($row['reg_mount'] <= $row['mount']) {
                                                            ?>
                                                <a href="index.php?c=race&action=reg&race_id=<?php echo $id ?>&group_id=<?php echo  $row['id'] ?>&is_team=<?php echo $row['is_team']?>" style="background-color: #DA243C; width: 100px; color: white; float: right; padding: 15px; border-radius: 4px;"><i class="fa fa-pencil"></i>报名</a>
                                        <?php
                                                    } else {
                                                        echo "名额已满";
                                                    }
                                                } else {
                                                    echo "不能报名";
                                                }
                                                ?>
                                    </td>
                                </tr>
                            </table>
                    <?php
                        }
                    }
                    ?>
                </div>
                <Div class="div">
                    <?php
                    if (time() < strtotime($result[0]['start_time'])) {
                        ?>
                        <div class="time">
                            <span><i class="fa fa-clock-o"></i> 倒计时：</span>
                            <span id="t_d<?php echo $result[0]['id'] ?>">00天</span>
                            <span id="t_h<?php echo $result[0]['id'] ?>">00时</span>
                            <span id="t_m<?php echo $result[0]['id'] ?>">00分</span>
                            <span id="t_s<?php echo $result[0]['id'] ?>">00秒</span>
                        </div>
                        <script>
                            function GetRTime() {
                                //var EndTime= new Date('2017/09/20 00:00:00');
                                var EndTime = new Date('<?php echo date("Y/m/d H:i:s", strtotime($result[0]['start_time'])); ?>');
                                var NowTime = new Date();
                                var t = EndTime.getTime() - NowTime.getTime();
                                var d = 0;
                                var h = 0;
                                var m = 0;
                                var s = 0;
                                if (t >= 0) {
                                    d = Math.floor(t / 1000 / 60 / 60 / 24);
                                    h = Math.floor(t / 1000 / 60 / 60 % 24);
                                    m = Math.floor(t / 1000 / 60 % 60);
                                    s = Math.floor(t / 1000 % 60);
                                }

                                document.getElementById("t_d<?php echo $result[0]['id'] ?>").innerHTML = d + "天";
                                document.getElementById("t_h<?php echo $result[0]['id'] ?>").innerHTML = h + "时";
                                document.getElementById("t_m<?php echo $result[0]['id'] ?>").innerHTML = m + "分";
                                document.getElementById("t_s<?php echo $result[0]['id'] ?>").innerHTML = s + "秒";
                            }
                            setInterval(GetRTime, 0);
                        </script>
                    <?php
                    }
                    ?>
                </Div>
                <div class="div">
                    <?php echo $result[0]['contant'] ?>
                </div>

                <div id="content" class="div">
                    <table class="table">
                        <tr>
                            <td><i class="fa fa-map-marker"></i> 举办地址</td>
                            <td><?php echo $result[0]['place'] ?></td>
                        </tr>

                        <tr>
                            <td><i class="fa fa-clock-o"></i> 开始时间</td>
                            <td><?php echo $result[0]['start_time'] ?></td>
                        </tr>
                        <tr>
                            <td><i class="fa fa-clock-o"></i> 结束时间</td>
                            <td><?php echo $result[0]['end_times'] ?></td>
                        </tr>
                        <tr>
                            <td><i class="fa fa-clock-o"></i> 报名开始时间</td>
                            <td><?php echo $result[0]['sign_start_time'] ?></td>
                        </tr>
                        <tr>
                            <td><i class="fa fa-clock-o"></i> 报名结束时间</td>
                            <td><?php echo $result[0]['sign_end_time'] ?></td>
                        </tr>


                    </table>
                </div>
            </div>
        </div>
    </div>
    <a href="JavaScript:void(0)" onclick="c('1')" id="b_1" class="ye" style="color: white">赛事新闻</a>
    <a href="JavaScript:void(0)" onclick="c('2')" id="b_2" class="ye" style="color: white">赛事公告</a>
    <a href="JavaScript:void(0)" onclick="c('3')" id="b_3" class="ye" style="color: white">赛事指南</a>
    <br /><br />
    <section class="power-hosting div">
        <div class="container" id="n_1">
            <ul class="row">
                <?php
                $sql = "select * from article where race_id = $id and menu = 1";
                $result_n1 = $race->get_data($sql);
                if ($result_n1) {
                    foreach ($result_n1 as $row) {
                        ?>
                        <li class="col-md-2">
                            <center>
                                <a href="index.php?c=article&action=list&menu=1&race_id=<?php echo $id ?>"> <img src="<?php echo $row['img_url'] ?>" style="width:100%">
                                    <?php echo $row['title'] ?>
                                </a>
                            </center>
                        </li>
                <?php }
                } else {
                    echo "暂时没有内容。";
                } ?>
            </ul>
        </div>


        <div class="container" id="n_2" style="display: none">
            <ul class="row">
                <?php
                $sql = "select * from article where race_id = $id and menu = 2";
                $result_n2 = $race->get_data($sql);
                if ($result_n2) {
                    foreach ($result_n2 as $row) {
                        ?>
                        <li class="col-md-2">
                            <center>
                                <a href="index.php?c=article&action=list&menu=2&race_id=<?php echo $id ?>"> <img src="<?php echo $row['img_url'] ?>" style="width:100%">
                                    <?php echo $row['title'] ?>
                                </a>
                            </center>
                        </li>
                <?php }
                } else {
                    echo "暂时没有内容。";
                } ?>
            </ul>
        </div>


        <div class="container" id="n_3" style="display: none">
            <ul class="row">
                <?php
                $sql = "select * from article where race_id = $id and menu = 3";
                $result_n3 = $race->get_data($sql);
                if ($result_n3) {
                    foreach ($result_n3 as $row) {
                        ?>
                        <li class="col-md-2">
                            <center>
                                <a href="index.php?c=article&action=list&menu=1&race_id=<?php echo $id ?>"> <img src="<?php echo $row['img_url'] ?>" style="width:100%">
                                    <?php echo $row['title'] ?>
                                </a>
                            </center>
                        </li>
                <?php }
                } else {
                    echo "暂时没有内容。";
                }
                ?>
            </ul>
        </div>
    </section>
    <center>
        <h4 class="new_title"></h4>
    </center>
    <?php echo $result[0]['zzs'] ?>
    <br /><br /><br /><br />
</div>
<div id="reg_msg">
    <div id="reg_group">
        <h4>请您选择一个报名组别 <a href="#" onclick="close_reg()" style="float: right"> <i class="fa fa-close"></i></a></h4>
        <?php
        if ($race_group_result) {
            foreach ($race_group_result as $row) {
                ?>
                <table class="table" style="background: white;">
                    <tr>
                        <td>
                            <?php echo  $row['title'] ?>/

                            <?php echo  $row['price'] ?>元

                            / <?php echo  $row['distance']; ?>公里

                            <?php
                                    if (time() > strtotime($result[0]['sign_start_time']) and time() < strtotime($result[0]['sign_end_time'])) { ?>
                                <?php if ($row['reg_mount'] <= $row['mount']) {
                                                ?>
                                    <a href="index.php?c=race&action=reg&race_id=<?php echo $id ?>&group_id=<?php echo  $row['id'] ?>&is_team=<?php echo $row['is_team'] ?>" style="background-color: #DA243C; width: 100px; color: white; float: right; padding: 15px; border-radius: 4px;text-algin:center"><i class="fa fa-pencil"></i>报名</a>
                            <?php
                                        } else {
                                            echo "名额已满";
                                        }
                                    } else {
                                        echo "不能报名";
                                    }
                                    ?>
                        </td>
                    </tr>
                </table>
        <?php
            }
        }
        ?>

    </div>
    <center>
        <div id="low_price"><?php echo low_price($result[0]['low_price']); ?> </div>
        <div id="reg_msg_btn">
            <a href="#" onclick="reg()">报名</a>
        </div>
    </center>
</div>
<script language="JavaScript">
    $("#contant").load("index.php?c=ajax&action=race_msg&id=<?php echo $id ?>");

    function reg() {
        document.getElementById("reg_group").style.display = "block";
    }

    function close_reg() {
        document.getElementById("reg_group").style.display = "none";
    }

    function c(id) {
        if (id == '1') {
            $('#n_1').css('display', 'block');
            $('#n_2').css('display', 'none');
            $('#n_3').css('display', 'none');
            $('#b_2').css('border-bottom', 'none');
            $('#b_1').css('border-bottom', '2px solid #981d14');
            $('#b_3').css('border-bottom', 'none');
        }

        if (id == '2') {
            $('#n_1').css('display', 'none');
            $('#n_2').css('display', 'block');
            $('#n_3').css('display', 'none');
            $('#b_1').css('border-bottom', 'none');
            $('#b_2').css('border-bottom', '2px solid #981d14');
            $('#b_3').css('border-bottom', 'none');
        }

        if (id == '3') {
            $('#n_1').css('display', 'none');
            $('#n_2').css('display', 'none');
            $('#n_3').css('display', 'block');
            $('#b_1').css('border-bottom', 'none');
            $('#b_2').css('border-bottom', 'none');
            $('#b_3').css('border-bottom', '2px solid #981d14');
        }
    }
</script>
<style type="text/css">
    #contant img {
        max-width: 100%;
        text-align: center;
    }

    #reg_msg {
        width: 100%;
        position: fixed;
        left: 0px;
        border-top: 1px solid #b3b3b3;
        bottom: 0px;
        background-color: #e8e8e8;
        z-index: 9999;
        padding: 10px
    }

    #reg_msg_btn {
        font-size: 10pt;
        text-align: center;
        background-color: #DA243C;
        color: white;
        padding: 5px;
        width: 200px;
        float: right;
        border-radius: 3px;
    }

    #reg_msg_btn a {
        color: white;
    }

    #reg_group {
        display: none
    }

    .close_btns {
        color: white;
        padding: 3px;
        background-color: #DA243C;
        clear: both;
        text-align: center;
        font-size: 10pt
    }

    .close_btns a {
        color: white
    }

    #low_price {
        float: left;
        width: 30%;
        color: #DA243C;
        font-size: 1.4em
    }

    .msg_div {
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }

    .row li {
        list-style-type: none
    }

    .div {
        padding: 2%;
        clear: both;
        margin-bottom: 10px;
        background: #f7f7f7;
        border: 1px solid #f0f0f0;
        border-radius: 10px;
    }

    #race_top_nav {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        line-height: 50px;
        clear: both;
        height: 50px;
        margin-top: 20px;
        background: #F3F3F3;
        border: 1px solid #f0f0f0;
    }

    #race_top_nav a {
        text-decoration: none;
    }

    #race_top_nav li {
        float: left;
        font-size: 12pt;
        list-style-type: none;
        margin-left: 10px;
        margin-right: 10px;
        padding: 3px;
    }

    #race_top_nav li:hover {
        background: #0093dd;
    }

    .time {
        background-color: #333333;
        color: white;
        font-size: 15pt;
        width: 100%;
        float: right;
        padding: 4%;
        border-radius: 5px;
        margin-bottom: 10px;
    }

    .ye {
        font-size: 1em;
        background: #333333;
        color: white;
        margin-right: 1em;
        padding: 5px;
        border-radius: 2px;
    }
</style>