@extends('layout.basic_front')

@section("content")

    <div class="col-xs-12 look_container" style="z-index: 22;    float: left; padding-bottom: 0px;" id ="lookers">    
        <div class="col-md-10 col-md-offset-1 lookerwidth">
            

            <div class="row">
                

                <div class="col-sm-4 page_title" style="padding-right:40px;clear:both;">
                    <h2>{{$this_month}}</h2>
		@if(isset($_GET['cate']))
		    <h2 style="margin-top:-10px;">{{$cate_name}}</h2>
		@else
		    <h2 style="margin-top:-10px;">{{$cate_name}}</h2>
		@endif
                </div>
{{--
                <div class="col-sm-4" style="    margin-top: 20px;">
                    <center>
                        <div style="margin:0px 0px 33px -10px;    width: 100%px;min-width:160px;">
                                <div class="btn-group btn-group-justified" role="group" aria-label="...">
                                @foreach($looker_category as $cate)
                                  <div class="btn-group" role="group">
                                 @if($cate_index == $cate->id)
                                         <button onclick ="javascript:location.href='{{Route::currentRouteName().'?cate='.$cate->id}}'" type="button" class="btn btn-looknow actived">{{$cate->title}}</button>
                                  @else
                                         <button onclick ="javascript:location.href='{{Route::currentRouteName().'?cate='.$cate->id}}'" type="button" class="btn btn-looknow">{{$cate->title}}</button>
                                 @endif
                                  </div>
                                @endforeach

                                <!--
                                <a href="#"><img style="margin-right: 7px;" src="images/icons/shine.png"><span class="newpop">最新</sapn></a>
                                <a style="margin-left:28px;" href="#"><img style="margin-right: 7px;" src="images/icons/icon_like_on.png"><span class="newpop">人氣</span></a>
                                -->
                        </div>
                </center>
                </div>
--}}
            </div>

                <div class="col-sm-12 hidden-xs hidden-sm" style="height:100px;    clear: both;">

                </div>

@if($cate_index != NULL)
                <div class="hidden-lg top1" style="height:270px;width:200px;    float: left;">
			<a href="{{URL::to('front/lookerinfo/'.$first_looker->id)}}">
                            {{ HTML::image($first_looker->photo,"",['class'=>"img-circle top_looker_1",'style'=>"width:200px;height:200px"]) }}
                            <div class="top_looker_rank_1">1</div>
                            <div class="top_looker_rank_crown"></div>
                            <div class="top_looker_rank_shine"></div>
			</a>
                </div>

                <div class="col-xs-12 text-right hidden-lg text-center top1" style="margin-bottom:40px;clear:both;max-width: 300px;">
                    
                    <h2 style="font-size:24px;margin-right:25px;float:left;">{{$first_looker->name}}</h2>

                    @if($isfollow)
                        <a onclick="return(chk_login());" href="{{URL::to('front/actions/LOOKER/'.$first_looker->id.'/FOLLOW/'.$first_looker->id)}}" class="btn btn-default social_btn actived" style="margin-top:18px;float:left;">   <!--追蹤-->
                            LOOK ME
                    @else
                        <a onclick="return(chk_login());" href="{{URL::to('front/actions/LOOKER/'.$first_looker->id.'/FOLLOW/'.$first_looker->id)}}" class="btn btn-default social_btn unactive" style="margin-top:18px;float:left;">   <!--追蹤-->
                    + LOOK ME
                    @endif
                        </a>
                </div>

                <div class="col-sm-2 col-sm-offset-2 hidden-xs hidden-sm hidden-md" style="height:105px;">
			    <a href="{{URL::to('front/lookerinfo/'.$first_looker->id)}}">
                             {{ HTML::image($first_looker->photo,"",['class'=>"img-circle top_looker_1",'style'=>"width:200px;height:200px"]) }}
                            <div class="top_looker_rank_1">1</div>
                            <div class="top_looker_rank_crown"></div>
                            <div class="top_looker_rank_shine"></div>
			    </a>
                </div>

                <div class="col-sm-4 col-sm-offset-4 text-right hidden-xs hidden-sm hidden-md" style="margin-top:40px;float:right;">
                    @if($isfollow)
                        <a onclick="return(chk_login());" href="{{URL::to('front/actions/LOOKER/'.$first_looker->id.'/FOLLOW/'.$first_looker->id)}}" class="btn btn-default social_btn actived" style="margin-top:18px;float:right;">   <!--追蹤-->
                            LOOK ME
                    @else
                        <a onclick="return(chk_login());" href="{{URL::to('front/actions/LOOKER/'.$first_looker->id.'/FOLLOW/'.$first_looker->id)}}" class="btn btn-default social_btn unactive" style="margin-top:18px;float:right;">   <!--追蹤-->
                    + LOOK ME
                    @endif
                        </a>

                    <h2 style="float:right;font-size:24px;margin-right:25px;">{{$first_looker->name}}</h2>
                </div>

                

                

        </div>
    </div>



                
                        


                <div class="col-md-12 looker_info_ban">

                    <div class="col-md-12 text-center">
                        <div id="follower" class="col-xs-1 col-xs-offset-5 left_wave hidden-xs hidden-sm hidden-md">
                            <p>Followers</p>
                            <h2>{{$first_looker->follow_num}}</h2>
                        </div>
                        <div class="col-xs-1 left_wave hidden-xs hidden-sm hidden-md">
                            <p>Video</p>
                            <h2>{{$video_num}}</h2>
                        </div>
                        <div class="col-xs-1 left_wave hidden-xs hidden-sm hidden-md">
                            <p>Like</p>
                            <h2>{{$first_looker->like_num}}</h2>
                        </div>
		@if($first_looker->Facebook_url != "")
                        <div class="col-xs-1 left_wave looker_icon_fb" style="height:84px;">
                            <a href="{{$first_looker->Facebook_url}}"><img class="looker_icon" src="{{asset('images/icons/icon_fb_02.png')}}"></a>
                        </div>
		@endif
		@if($first_looker->Instagram_url != "")
                        <div class="col-xs-1 looker_icon_ig" style="height:84px;">
                            <a href="{{$first_looker->Instagram_url}}"><img class="looker_icon" src="{{asset('images/icons/icon_instagram.png')}}"></a>
                        </div>
		@endif
                        
                        

                    </div>
                </div>

    <div class="col-xs-12 look_container" style="z-index: 2;    float: left;">
        <div class="col-md-10 col-md-offset-1">
            <div class="col-md-12" style="    margin-top: 100px;">
                <div id="brands" class="col-md-10 col-md-offset-1">
                    <div id="brands2">
                    
                     @foreach($lookers as $looker)
                        <div class="brand_list text-center" style="height: 120px;overflow: hidden;"><!--有排名的要加上此STYLE-->
                            <a href="{{URL::to('front/lookerinfo/'.$looker->id)}}">
                                {{ HTML::image($looker->photo,"",['class'=>"img-circle",'style'=>'width:100%;height:85px']) }}
                                <p>{{$looker->name}}</p>
                            </a>
                            @if($rank < 3)
                            <div class="top_looker_rank">{{$rank + 1}}</div>
                            @endif
                        </div>
                                        @endforeach
 
                       </div> 
                </div>
            </div>


@endif

        </div>
        
    </div>


        


        <script>
        
            $(document).ready(function(){
                $("a.actived").click(toggleActive);
                $("a.unactive").click(toggleActive);
                console.log("asdf");
            });
            function toggleActive(e)
            {
                role = $(this);
                isActived = role.hasClass("actived");
                if (isActived) {
                    role.addClass("unactive");
                    role.removeClass("actived");
                    $('.social_btn').children('#like').text('Like');
                }else {
                    role.addClass("actived");
                    role.removeClass("unactive");
                    $('.social_btn').children('#like').text('Liked');
                }
            }

            //調整LOOKER區塊置中
            $(function(){
                $(window).resize(function(){    
                    brands_width = $('#brands').width();
                    b = brands_width%105;
                    $('#brands2').css('marginLeft',b/2);
                });
                $(document).ready(function(){           
                    brands_width = $('#brands').width();
                    b = brands_width%105;
                    $('#brands2').css('marginLeft',b/2);
                });
            });
            //調整TOP 1 LOOKER區塊置中
            $(function(){
                $(window).resize(function(){    
                    body_width = $('.lookerwidth').width();
                    c = body_width - 200;
                    $('.top1').css('marginLeft',c/2);
                });
                $(document).ready(function(){           
                    body_width = $('.lookerwidth').width();
                    c = body_width - 200;
                    $('.top1').css('marginLeft',c/2);
                });
            });


            $(function(){
                $(window).resize(function(){    
                    windows_size = window.innerWidth;
                    if (windows_size < 1200){
                        $(".looker_icon_fb").addClass("col-xs-6");
                        $(".looker_icon_ig").addClass("col-xs-6");
                        $(".looker_icon_fb").removeClass("col-xs-1");
                        $(".looker_icon_ig").removeClass("col-xs-1");       
                    }
                    else{
                        $(".looker_icon_fb").addClass("col-xs-1");
                        $(".looker_icon_ig").addClass("col-xs-1");
                        $(".looker_icon_fb").removeClass("col-xs-6");
                        $(".looker_icon_ig").removeClass("col-xs-6");     
                    }
                });
                $(document).ready(function(){           
                    windows_size = window.innerWidth;
                    if (windows_size < 1200){
                        $(".looker_icon_fb").addClass("col-xs-6");
                        $(".looker_icon_ig").addClass("col-xs-6");
                        $(".looker_icon_fb").removeClass("col-xs-1");
                        $(".looker_icon_ig").removeClass("col-xs-1");       
                    }
                    else{
                        $(".looker_icon_fb").addClass("col-xs-1");
                        $(".looker_icon_ig").addClass("col-xs-1");
                        $(".looker_icon_fb").removeClass("col-xs-6");
                        $(".looker_icon_ig").removeClass("col-xs-6");     
                    }
                });
            });


        </script>

{{--	@if($load_start != 'all')
        <div class="container inline-content">
            <a href="{{URL::to('front/lookers/'.$load_start)}}" class="btn btn-default">MORE</a>
        </div>
	@endif
--}}
@stop