@extends('layouts.app')

@section('content')
<section class="padding_btm" >
    <!-- 顶部 Start -->
    <div class="cn_top">
        <div class="cn_head">
            <span style="background-image: url({{ $user->info->headimgurl ?? ''  }});"></span>
        </div>
        <div class="cn_center">
            <div class="cn_center_block">
                <div class="cn_center_name"><span class="text-nowrap">{{ $user->info->nickname??'未登录' }}</span></div>
                <div class="cn_center_location" data-href="{{ route('index.getlocation') }}"><span class="text-nowrap"><i class="icon-map-marker"></i>@if(!empty(session('area','')))  {{ session('area')->name }}  @else 哈尔滨 @endif</span></div>
            </div>
            <div class="cn_center_block2">
                <div class="cn_center_message" style="padding-right: .75rem">
                    <img src="/assets/home/img/cn_05.jpg">
                    <span>{{ $data['lessonlogs'] }}</span>
                </div>
                <div class="cn_center_message">
                    <img src="/assets/home/img/cn_06.jpg">
                    <span>{{ $data['couponlogs'] }}</span>
                </div>
            </div>
        </div>
        <div class="cn_hotspot" data-href="{{ route('lottery.index') }}">
            <div class="cn_hotspot_img"><img src="/assets/home/img/cn_02.jpg"></div>
            <div class="cn_hotspot_text">抽奖</div>
        </div>
        <div class="cn_hotspot" data-href="{{ route('activities.index',14) }}">
            <div class="cn_hotspot_img"><img src="/assets/home/img/cn_03.jpg"></div>
            <div class="cn_hotspot_text">生活</div>
        </div>
        <div class="cn_hotspot" data-href="{{ route('activities.index',13) }}">
            <div class="cn_hotspot_img"><img src="/assets/home/img/cn_04.jpg"></div>
            <div class="cn_hotspot_text">娱乐</div>
        </div>
    </div>
    <!-- 顶部 End -->
    <!-- banner Start -->
    <div class="cn_banner">
        <div class="swiper-container banner_home">
            <div class="swiper-wrapper banner-img">
                @foreach ($adverts as $advert)
                <a class="swiper-slide" href="javascript:void(0)" @if($advert->url) data-href="{{ $advert->url??'' }}" @endif>
                    <div class="carousel-block img-bg">
                        <span style="background-image:url({{ $advert->storage->path??'' }})"></span>
                    </div>
                </a>
                @endforeach
            </div>
            <!-- <div class="banner-page"></div> -->
        </div>
        <div class="cn_shadow"><img src="/assets/home/img/cn_08.jpg"></div>
    </div>
    <!-- banner End -->
    <!-- 分类 Start -->
    <div class="cn_classify">
        <div class="cn_classify_top">
            <div class="cn_classify_title">宝宝课</div>
            <div class="cn_classify_select">
                <select  onchange="jump(this.value)" >
                    <option value="normal">选择课程</option>
                    @foreach($c_lists as $category)
                    <option value="{{ $category->id }}">{{ $category->title }}</option>
                    @endforeach
                </select>
                <i class="icon-exchange"></i>
            </div>
        </div>
        <div class="cn_classify_con">
            <div class="swiper-container2">
                <div class="swiper-wrapper">
                    @foreach($c_lists as $category)
                    <div class="swiper-slide cn_classify_block" data-href="{{ route('lessons.category',['category_id'=>$category->id]) }}">
                        <div class="cn_classify_img"><img src="{{ $category->storage->path??'' }}"></div>
                        <div class="cn_shadow"><img src="/assets/home/img/cn_s.jpg"></div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
    <!-- 分类 End -->
    <!-- 推荐 -->
    <div class="cn_recommend">
        <div class="cn_recommend_search">
            <form action="{{ route('index.search') }}" method="get" accept-charset="utf-8">
                <input type="text" name="title" value="" placeholder="请输入喜欢的课程名称" class="input home_search_input">
                <button type="submit" class="btn home_search_btn"><i class="icon-search"></i></button>
            </form>
        </div>
        <div class="cn_recommend_nav" data-display="" data-selector="span" data-show-single="true" data-active-class="active" data-animate="false">

            <span class="active" data-target="#tab1">推荐</span>
            <span data-target="#tab2" class="">都在报</span>
        </div>
        <div class="cn_recommend_con">
            <div class="display" id="tab1" data-display-name="" style="z-index: 10;">
                @if($recommend)
                <ul class="cn_recommend_list">
                    <li >
                        <div class="cn_recommend_list_img img-bg" data-href="{{ route('lessons.show',$recommend) }}">
                            <span style="background-image:url({{ $recommend->storage->path??''  }})"></span>
                        </div>
                        <div class="cn_recommend_btm">
                            <div class="cn_recommend_left" data-href="{{ route('lessons.show',$recommend) }}">
                                <div class="cn_recommend_left_block" style="padding-top: .5rem;">
                                    <div class="cn_recommend_name text-nowrap">{{ $recommend->title }}</div>
                                    <div class="cn_recommend_price text-nowrap">价值：￥{{ $recommend->price }}</div>
                                </div>
                                <div class="cn_recommend_left_block">
                                    <div class="cn_recommend_company text-nowrap ">{{ $recommend->organ->name }}</div>
                                    <div class="cn_recommend_distance text-nowrap">{{ $recommend->organ->distance }}km</div>
                                </div>
                            </div>

                            @if($recommend->button_value!==0)
                            <div class="cn_recommend_btn" style="background-color: #ccc;color: #fff">{{ $recommend->button_text }}</div>
                            @else
                            <div class="cn_recommend_btn ajax-get refresh" data-href="{{ route('cart.store',$recommend) }}">立即报名</div>
                            @endif
                        </div>
                    </li>
                </ul>
                @else
                <!-- 无数据 -->
                <div class="cn_null">
                    <img src="/assets/home/img/k_null.jpg" alt="" class="cn_null_img">
                    <div class="cn_null_text">没有推荐课程~</div>
                </div>
                <!-- 无数据 End -->
                @endif


            </div>
            <div class="hidden" id="tab2" data-display-name="" style="z-index: 8;">

                @if(!$watchings->isEmpty())
                <ul class="cn_recommend_list">
                    @foreach($watchings as $lesson)
                    <li >
                        <div class="cn_recommend_list_img img-bg" data-href="{{ route('lessons.show',$lesson) }}">
                            <span style="background-image:url({{ $lesson->storage->path??''  }})"></span>
                        </div>
                        <div class="cn_recommend_btm">
                            <div class="cn_recommend_left" data-href="{{ route('lessons.show',$lesson) }}">
                                <div class="cn_recommend_left_block" style="padding-top: .5rem;">
                                    <div class="cn_recommend_name text-nowrap">{{ $lesson->title }}</div>
                                    <div class="cn_recommend_price text-nowrap">价值：￥{{ $lesson->price }}</div>
                                </div>
                                <div class="cn_recommend_left_block">
                                    <div class="cn_recommend_company text-nowrap ">{{ $lesson->organ->name }}</div>
                                    <div class="cn_recommend_distance text-nowrap">{{ $lesson->organ->distance }}km</div>
                                </div>
                            </div>

                            @if($lesson->button_value!==0)
                            <div class="cn_recommend_btn" style="background-color: #ccc;color: #fff">{{ $lesson->button_text }}</div>
                            @else
                            <div class="cn_recommend_btn ajax-get refresh" data-href="{{ route('cart.store',$lesson) }}">立即报名</div>
                            @endif

                        </div>
                    </li>
                    @endforeach
                </ul>
                @else
                <!-- 无数据 -->
                <div class="cn_null">
                    <img src="/assets/home/img/k_null.jpg" alt="" class="cn_null_img">
                    <div class="cn_null_text">没有都在看的课程~</div>
                </div>
                <!-- 无数据 End -->
                @endif
            </div>
        </div>
    </div>
    <!-- 推荐 End -->
    <!-- banner -->
    <div class="cn_banner_center" onclick="document.getElementById('receive_coupon').style.display='block';"><img src="/assets/home/img/cn_20.jpg"></div>
    <div id="receive_coupon">
        <div class="receive_con">
            <div class="receive_title">恭喜获得100元礼金券</div>
            <!-- <div class="receive_title">您已经领取过礼金券</div> -->
            <div class="receive_describe">为宝宝报课可抵值</div>
            <div class="receive_num">100</div>
            <div class="receive_num_name">礼金券</div>
            <div class="receive_btn" data-href="{{ route('lessons.all') }}">为宝宝报名</div><!--说明：跳转首页-->
            <i class="icon-remove-sign receive_close" onclick="document.getElementById('receive_coupon').style.display='none';"></i>
        </div>
    </div>
    <!-- banner End -->
    <!-- 合作机构 -->
    <div class="cn_organ">
        <div class="cn_organ_title">合作机构</div>
        <ul class="cn_organ_list" id="organs">
            @foreach($organs as $organ)
            <li data-href="{{ route('sellers.show',$organ) }}">
                <div class="cn_organ_list_img img-bg"><span style="background-image:url({{ $organ->storage->path??''  }})"></span></div>
                <div class="cn_organ_list_name text-nowrap">{{ $organ->name??'' }}</div>
                <div class="cn_organ_list_btm">
                    <div class="cn_organ_list_classify  text-nowrap">{{ $organ->category->title??'' }}</div>
                    <div class="cn_organ_list_distance  text-nowrap">{{ $organ->distance }} km</div>
                </div>
            </li>
            @endforeach
        </ul>
    </div>
    <!-- 合作机构 End -->
</section>


@endsection

@section('css')
<link rel="stylesheet" href="/assets/home/css/swiper.min.css">
@endsection

@section('js')
<script src="/assets/home/js/swiper.min.js" type="text/javascript" ></script>
@endsection

@section('script')
<script type="text/javascript">
    /*轮播*/
    var banner = new Swiper('.banner_home', {
        pagination: '.banner-page',
        paginationClickable: true,
        loop:true,
        autoplay:4000
    });
    /*分类*/
    var swiper = new Swiper('.swiper-container2', {
        slidesPerView: 3,
        spaceBetween: 16,
        centeredSlides: false,
        pagination: {
            clickable: true,
        },
    });


    function jump(category_id) {
        if (category_id!='') {
            window.location.href="{{ route('lessons.category') }}?category_id="+category_id;
        }
    }
</script>
@endsection