@extends('user.master')
@section('content')
<!--  Home Page -->
<section class="top-section bg-default">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <img src="{{asset('public/images/')}}/{{$settings->header_image}}" class="img-responsive">
                <h4>&nbsp;&nbsp; {{$settings->site_title}}</h4>
            </div>
            <div class="col-md-6 text-right">
                <!-- Social Media Links -->
                @if($settings->facebook!='')<a href="{{$settings->facebook}}"><span class="fa fa-facebook-square fa-3x social"></span></a>@endif
                @if($settings->google!='')<a href="{{$settings->google}}"><span class="fa fa-google-plus-square fa-3x social"></span></a>@endif
                @if($settings->linkedin!='')<a href="{{$settings->linkedin}}"><span class="fa fa-linkedin-square fa-3x social"></span></a>@endif
                <!-- // End Social Media Links -->
            </div>
        </div>
        <div>&nbsp;</div>

        <div class="row">
            <div class="col-md-8" style="height:450px;">
                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                <div data-ride="carousel" class="carousel slide" id="carousel-example-generic">    <!-- Indicators -->
                    <ol class="carousel-indicators">
                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                    </ol>

                    @if(!empty($settings->home_page_slider))
                   <div data-ride="carousel" class="carousel slide" id="carousel-example-generic" style="height: 450px;"> 
                        <!-- Indicators -->
                        <ol class="carousel-indicators">
                            <li data-target="https://s3-us-west-2.amazonaws.com/mac-coaching/headers/jim-mac.jpg" class="img-responsive" " data-slide-to="0" class="active"></li>
                            <li data-target="https://s3-us-west-2.amazonaws.com/mac-coaching/headers/jim-mac.jpg" data-slide-to="1"></li>
                            <li data-target="https://s3-us-west-2.amazonaws.com/mac-coaching/headers/brit-run.jpg" data-slide-to="2"></li>
                        </ol>
                   </div>
                        <!-- Wrapper for slides -->
                        <div class="carousel-inner" role="listbox">
                            <?php
                            $slider_data = array_filter(unserialize($settings->home_page_slider));
                            $c = 0;
                            ?>

                            @foreach($slider_data as $sl)
                            <div class="item {{($c==0)?'active':''}}">
                                <img class="img-responsive" src="{{$sl}}" alt="Mark Allen Coaching">
                                <div class="carousel-caption">
                                    <!--  <h3>  Start viral marketing with quiz and poll </h3> -->
                                </div>
                            </div>
                            <?php ++$c; ?>
                            @endforeach

                        </div>
                        <!-- Controls -->
                        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                    @endif
                    <!-- Controls -->
                    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>

            </div>

            <div class="col-md-4">
                {{$settings->welcome_text}}
                @if(!isset(Auth::user()->id))
                <button class="btn btn-info btn-facebook btn-block btn-lg facebook-connection facebook-btn" id="facebook-btn"><i class="fa fa-sign-in"></i> Get Started Quiz  </button>
                @endif
                <h3><i class="fa fa-users"></i> Recent users </h3>
                @foreach($users as $u)
                <img class="img-thumbnail" width="10%" src="https://graph.facebook.com/{{$u->fbid}}/picture" data-container="body" data-toggle="popover" data-placement="top" data-content="{{$u->name}}">
                @endforeach
                <script>
                    $(function() {
                        // $('[data-toggle="tooltip"]').tooltip();
                        $('[data-toggle="popover"]').popover();
                    })
                </script>

            </div>
        </div>
        <!-- New Section start -->
        @if(!empty($quizzes))
        <!-- Quiz section -->
        <div class="row">
            <div class="col-lg-12 ">
                <h3 class="">
                    <span class="text-left "> Answer the Quizzes ? </span>
                </h3>
                <hr class="hr-navy">
            </div>
            @include('user.quiz-group')
        </div> 
        @endif
        <script>
            $('.quiz-row').mouseover(function() {
                $('.quiz-row').removeClass('fadeOut').removeClass('vr-bg');
                $(this).addClass('fadeOut').addClass('vr-bg');

            });
        </script>
        <hr class="hr-navy">
        <!-- End Quiz Section -->
        <div class="row"> 
            <div class="col-sm-3 col-xs-6  animated fadeIn">
                <h3 class="h-underline"><i class="fa fa-pie-chart"></i> Random Poll  </h3>
                <h4 class="vr-text-color"><a href="{{url()}}/polls">{{$poll_text}}</a> </h4>
                <div id="canvas-holder">
                    <canvas id="chart-area" width="200" height="200"></canvas>
                </div>
                <script>
                    var doughnutData =<?php echo $chart_data; ?>;
                    window.onload = function() {
                        var ctx = document.getElementById("chart-area").getContext("2d");
                        window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive: true});
                    };

                </script>
            </div>
            <div class="col-sm-3 col-xs-6  wow fadeIn">
                <h3 class="h-underline"> <i class="fa fa-bookmark-o"></i> Latest Poll </h3>
                @foreach($poll_list as $pl)
                @if($pl->is_featured==1)
                <h5><i class="fa fa-check-circle vr-text-color"></i> <a class="vr-text-color" href="{{url()}}/poll-share/{{$pl->short_code}}">{{$pl->poll_text}}</a></h5>
                @endif
                @endforeach
            </div>
            <div class="col-sm-3 col-xs-6 wow slideInRight">
                <h3 class="h-underline"><i class="fa fa-diamond"></i> Ads </h3>
                <a href="{{$settings->footer_image_link}}">
                    <img class="img-responsive portfolio-item" src="{{asset('public/images')}}/{{$settings->footer_image}}" alt="Quiz Viral marketing ">
                </a>
            </div>

            <div class="col-sm-3 col-xs-6" style="-webkit-animation-delay: 0.2s">
                <h3 class="h-underline"><i class="fa fa-list-ol"></i> Quiz Top Score </h3>
                <p></p>
                @if(!empty($top_scrorer))
                @foreach($top_scrorer as $top)
                <div class="col-md-12">
                    <div class="row home-top-scorer wow flipInX" style="border-bottom:1px solid orange ">
                        <div class="col-md-3">
                            <div class="clearfix">&nbsp;</div>
                            <img class="img-thumbnail" src="https://graph.facebook.com/{{$top->fbid}}/picture">
                        </div>
                        <div class="col-md-9">
                            <b class="vr-text-color"><a class="vr-text-color" href="http://facebook.com/{{$top->fbid}}">{{$top->name}}</a></b>
                            <br><b> Quiz group </b>: {{$top->group_name}}
                            <br><b> Score </b>: {{$top->avg_grade}}%
                            <br><b> Date  </b>: {{Util::getdate($top->quiz_date,'d M y H:i a')}}
                        </div>
                    </div>
                </div>
                @endforeach
                @endif
            </div>
        </div>

        @if(!empty($blog))
        <div class="row">
            <div class="col-lg-12">
                <h3 class="">
                    <span class="text-left">Latest Posts </span>
                </h3>
                <hr class="hr-navy">
            </div>
            @foreach($blog as $b)
            <div class="col-sm-3 col-xs-6  wow bounceIn">
                <a href="/page/{{$b->slug}}">
                    <img class="img-responsive portfolio-item" src="{{($b->featured_image!='')?$b->featured_image:'http://placehold.it/260x130'}}" alt="Quiz Viral marketing ">
                </a>
                <h4 class="vr-text-color"><a href="/page/{{$b->slug}}">{{$b->page_name}}</a> </h4>

                <p> &nbsp; &nbsp; &nbsp;{{Util::excerptText($b->content,'/page/'.$b->slug)}} </p>
            </div>
            @endforeach
            <div class="clearfix">&nbsp;</div>
            <div class="col-lg-5"></div>
            <div class="col-lg-2">
                <a href="/blog" class="btn btn-sm btn-block btn-warning">More Post</a>
            </div>
            <div class="col-lg-5"></div>
        </div>
        @endif
    </div>
</section>
<!-- // Home Page -->
@stop
