<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta name="viewport"
          content="width=device-width, initial-scale=1,maximum-scale=1,maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>预约学车</title>
    <link rel="stylesheet" href="/static/css/common.css">
    <link rel="stylesheet" href="/static/css/style.css">
    <link rel="stylesheet" href="/static/css/swiper.min.css">
    <style>
        .btn_yuyue {
            margin-bottom: 1rem;
        }

        .yu_tan .yu_tan_box .tan_text {
            width: 6.533333rem;
        }
    </style>
</head>
<body style="background-color: #f6f6f6;">
<div class="box">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="day_list day_bg">
                    <b>周一</b>
                    <i>06-25</i>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="day_list">
                    <b>周二</b>
                    <i>06-26</i>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="day_list">
                    <b>周二</b>
                    <i>06-26</i>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="day_list">
                    <b>周二</b>
                    <i>06-26</i>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="day_list">
                    <b>周二</b>
                    <i>06-26</i>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="day_list">
                    <b>周二</b>
                    <i>06-26</i>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="day_list">
                    <b>周二</b>
                    <i>06-26</i>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="day_list">
                    <b>周二</b>
                    <i>06-26</i>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="day_list">
                    <b>周二</b>
                    <i>06-26</i>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="day_list">
                    <b>周二</b>
                    <i>06-26</i>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="day_list">
                    <b>周二</b>
                    <i>06-26</i>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="day_list">
                    <b>周二</b>
                    <i>06-26</i>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="day_list">
                    <b>周二</b>
                    <i>06-26</i>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="day_list">
                    <b>周二</b>
                    <i>06-26</i>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="day_list">
                    <b>周二</b>
                    <i>06-26</i>
                </div>
            </div>
        </div>
    </div>
    <div class="yu_container">
        <div class="time_list">
            <b>06:00-07:00</b>
            <i></i>
        </div>
        <div class="time_list">
            <b>07:00-08:00</b>
            <i></i>
        </div>
        <div class="time_list">
            <b>08:00-09:00</b>
            <i></i>
        </div>
        <div class="time_list">
            <b>09:00-10:00</b>
            <i></i>
        </div>
        <div class="time_list">
            <b>10:00-11:00</b>
            <i></i>
        </div>
        <div class="time_list time_bor">
            <b>11:00-12:00</b>
            <i></i>
        </div>
        <div class="time_list time_bor">
            <b>12:00-13:00</b>
            <i></i>
        </div>
        <div class="time_list time_bor time_bg_icon">
            <b>13:00-14:00</b>
            <i></i>
        </div>
        <div class="time_list time_bor">
            <b>14:00-15:00</b>
            <i></i>
        </div>
        <div class="time_list time_bor">
            <b>15:00-16:00</b>
            <i></i>
        </div>
        <div class="time_list time_bor">
            <b>16:00-17:00</b>
            <i></i>
        </div>
        <div class="time_list time_bor">
            <b>17:00-18:00</b>
            <i></i>
        </div>
        <div style="clear: both"></div>
        <div class="btn_yuyue" style="display: block;margin-top:3.73rem" id="btn_yuyue">
            <img src="/static/image/btn_yuyue.png"/>
        </div>
    </div>

</div>

<!--弹跳框-->
<div class="full_bg"></div>
<div class="yu_tan" data-qr="1">
    <div class="yu_tan_box">
        <img src="/static/image/tan_car1.png" class="tan_car"/>
        <h1 class="tan_text">您确定要预约{$data.user_nickname}的课程吗</h1>
        <h2 class="btn_qr">确认</h2>
    </div>
    <div class="syudy_cancel"></div>
</div>
<script type="text/javascript" src="/static/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/static/js/common.js"></script>
<script type="text/javascript" src="/static/js/jquery.sliderPro.min.js"></script>
<script src="/static/js/swiper.min.js"></script>
<script type="text/javascript" src="/static/js/study_car.js"></script>
<script>
    var swiper = new Swiper('.swiper-container', {
        slidesPerView: 7,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
    });
    $('.day_list').click(function () {
        $(this).addClass('day_bg').parent().siblings().children().removeClass('day_bg');
    });
    $(function () {
        function get_ok_list(day) {
            $.ajax({
                url: "/portal/tool/get_relax_time",
                type: "post",
                data: {
                    day: day.replace(/(\d{4})(\d{2})(\d{2})/, "$1-$2-$3"),
                    uid: {$id}
                }, success: function (res) {
                    if (res.code == "1") {
                        var date = new Date();
                        var year = date.getFullYear();
                        var mon = date.getMonth() + 1;
                        var days = date.getDate();
                        var hour = date.getHours() + 3;
                        var list = $('.time_list');
                        if (day == '' + year + check_num(mon) + check_num(days)) {
                            var time_list = [];
                            for (var i = 0; i < list.find('b').length; i++) {
                                time_list.push(list.find('b')[i].innerHTML.split('-'));
                            }
                            var list = JSON.parse(res.data);
                            for (var j = 0; j < time_list.length; j++) {
                                if (parseInt(time_list[j][0]) < hour) {
                                    list[j] = "no";
                                }
                            }
                            var tiem_list = $('.time_list');
                            for (var i = 0; i < list.length; i++) {
                                if (list[i] == "yes") {
                                    tiem_list[i].setAttribute('class', 'time_list time_bor');
                                } else {
                                    tiem_list[i].setAttribute('class', 'time_list');
                                }
                                tiem_list[i].setAttribute("data-index", i);
                            }
                        } else {
                            for (var i = 0; i < list.length; i++) {
                                list[i].setAttribute('data-index', i);
                                list[i].setAttribute('class', 'time_list time_bor');
                            }
                            var list = JSON.parse(res.data);
                            var tiem_list = $('.time_list');
                            for (var i = 0; i < list.length; i++) {
                                if (list[i] == "yes") {
                                    tiem_list[i].setAttribute('class', 'time_list time_bor');
                                } else {
                                    tiem_list[i].setAttribute('class', 'time_list');
                                }
                                tiem_list[i].setAttribute("data-index", i);
                            }
                        }

                    }
                }
            });
        }

        function check_num(num) {
            if (num < 10) {
                return "0" + num;
            } else {
                return num
            }
        }

        function checkToday() {

        }

        (function () {
            var date = new Date();
            var year = date.getFullYear();
            var mon = check_num(date.getMonth() + 1);
            var da = check_num(date.getDate());
            var day = "" + year + mon + da;
            get_ok_list(day);
        })()
        var cells = $('.day_list');
        var clen = cells.length;
        var currentFirstDate;
        var formatDate = function (date) {
            var year = date.getFullYear();
            var month = (date.getMonth() + 1);
            if (month < 10) {
                month = "0" + month;
            }
            var day = date.getDate();
            if (day < 10) {
                day = "0" + day;
            }
            var month_day = month + '-' + day;
            var week = ['周天', '周一', '周二', '周三', '周四', '周五', '周六'][date.getDay()];
            return '<b>' + week + '</b>' + '<i data-day="' + year + '' + month + day + '">' + month_day + '</i>';
        };
        var addDate = function (date, n) {
            date.setDate(date.getDate() + n);
            return date;
        };
        var setDate = function (date) {
            var week = date.getDay() - 1;
            date = addDate(date, week * +0);
            currentFirstDate = new Date(date);
            for (var i = 0; i < clen; i++) {
                cells[i].innerHTML = formatDate(i == 0 ? date : addDate(date, 1));
            }
        };
        setDate(new Date());
        $('.day_list').click(function () {
            var day = $(this).children('i').attr('data-day');
            get_ok_list(day);
        });
        $('.yu_container .time_list').click(function () {
            if ($(this).hasClass('time_bor')) {
                if ($('.time_bg_icon').length < 3) {
                    if ($(this).hasClass('time_bg_icon')) {
                        $(this).removeClass('time_bg_icon');
                    } else {
                        $(this).addClass('time_bg_icon');
                    }
                } else {
                    if ($(this).hasClass('time_bg_icon')) {
                        $(this).removeClass('time_bg_icon');
                    } else {
                        layer.msg("选择的时间段不能超过3小时");
                        return;
                    }
                }
                var list = $('.time_bg_icon');
                var acvList = [];
                var boo = false;
                for (var i = 0; i < list.length; i++) {
                    acvList.push(parseInt(list[i].getAttribute("data-index")));
                }
                var degin = acvList[0];
                for (var j = 0; j < acvList.length; j++) {
                    if (acvList[j] != degin) {
                        boo = true;
                        break;
                    } else {
                        degin++;
                    }
                }
                if (boo) {
                    alert("请选择连续的时间段");
                    $(this).attr("class", "time_list time_bor");
                }
            }
        });
        var day1 = $('.day_bg i').text();
        var week = $('.day_bg b').text();
        var hour1 = $('.time_bg_icon b').text();
        var data_day = $('.day_bg i').attr("data-day");
        var data_index = $('.time_bg_icon').length == 0 ? null : $('.time_bg_icon').attr("data-index");
        $("#btn_yuyue").click(function () {
            var list = $('.time_bg_icon');
            var acvList = [];
            var boo = false;
            for (var i = 0; i < list.length; i++) {
                acvList.push(parseInt(list[i].getAttribute("data-index")));
            }
            var degin = acvList[0];
            for (var j = 0; j < acvList.length; j++) {
                if (acvList[j] != degin) {
                    boo = true;
                    break;
                } else {
                    degin++;
                }
            }
            if (boo) {
                alert("请选择连续的时间段");
            } else {
                var hour1 = $('.time_bg_icon b').text();
                $('.tan_car').css({"width": "4.97rem", "height": "2.88rem"});
                $('#time_duan').text(hour1);
                tankuang();
            }
        });
        $('.btn_qr').click(function () {
            var data_qr = $('.yu_tan').attr("data-qr");
            var list = $('.time_bg_icon');
            var acvList = [];
            var boo = false;
            for (var i = 0; i < list.length; i++) {
                acvList.push(parseInt(list[i].getAttribute("data-index")));
            }
            var degin = acvList[0];
            for (var j = 0; j < acvList.length; j++) {
                if (acvList[j] != degin) {
                    boo = true;
                    break;
                } else {
                    degin++;
                }
            }
            if (data_qr == 1) {
                var data_days = $(".day_bg i").attr("data-day").replace(/(\d{4})(\d{2})(\d{2})/, "$1-$2-$3");
                var weeks = $(".day_bg b").html();
                $.ajax({
                    url: "{:url('yuyue_coach_do')}",
                    type: "post",
                    data: {
                        day: data_days,
                        week: weeks,
                        begin: parseInt(list[0].getElementsByTagName('b')[0].innerHTML.split("-")[0]),
                        end: parseInt(list[list.length - 1].getElementsByTagName('b')[0].innerHTML.split('-')[1]),
                        id: {$id}
                    },
                    success: function (res) {
                        console.log(res);
                    }
                });
                $('.tan_text').html("恭喜您,预约成功");
                tankuang();
                $('.yu_tan').attr("data-qr", "2")
            } else if (data_qr == 2) {
                window.location.href = "/user/profile/percenter";
            }
        });
        $('.syudy_cancel').click(function () {
            var data_qr = $('.yu_tan').attr("data-qr");
            if (data_qr == 1) {
                $("html").css("overflow", "auto");
                $("body").css("overflow", "auto");
                $(".full_bg").hide();
                $(".yu_tan").hide();
            } else if (data_qr == 2) {
                window.location.href = "/user/profile/percenter";
            }
        });
    });
</script>
</body>
</html>