@extends('main')

@section('title', 'Survey')

@section('content')

<div class="row welcome-banner">

	<div class="col-xs-8 col-xs-offset-2">

		<h2>THE MANUFACTURING BAROMETER</h2>
		<p>
		The Manufacturing Barometer is a quarterly survey that charts the experiences of English SME manufacturers. It is the largest survey of its kind and has informed both government industrial strategy and the national debate on manufacturing. It regularly features in both national and regional media.
		</p>

	</div>

</div>

<div class="padded-top-and-bottom">

	<div class="row">
		<div class="col-xs-8 col-xs-offset-2">

			<div class="row">

				<div class="col-md-8">

					Information about the servey will be here, maybe include information about previous surveys, some of the surprising data that was found, and a brief history of why the survey was introduced. Information about the servey will be here, maybe include information about previous surveys, some of the surprising data that was found, and a brief history of why the survey was introduced. Information about the servey will be here, maybe include information about previous surveys, some of the surprising data that was found, and a brief history of why the survey was introduced. Information about the servey will be here, maybe include information about previous surveys, some of the surprising data that was found, and a brief history of why the survey was introduced.

				</div>

				<div class="col-md-4 text-center">

					TAKE OUR SURVEY
					<br>
					<a class="btn btn-default"><i class="fa fa-file-pdf-o" aria-hidden="true"></i>  Download PDF</a>

				</div>

			</div>

		</div>
	</div>

</div>

<div class="row growth-banner">

	<div class="col-xs-8 col-xs-offset-2">

		<h3>KEEN TO SEE PREVIOUS RESULTS?</h3>
		<p>
		Take a look below at our infographics highlighting trends, opinions and surprising results.
		</p>
		<a href="#infographics" class="btn btn-primary">Go To Results</a>

	</div>

</div>

<div class="padded-top-and-bottom">

	<div class="row">
		<div class="col-xs-8 col-xs-offset-2">

			<div id="infographics">
			    <!-- Slider -->
			    <div class="row">
			        <div class="col-sm-6" id="slider-thumbs">
			            <!-- Bottom switcher of slider -->
			            <ul class="hide-bullets">
			                <li class="col-sm-3">
			                    <a class="thumbnail" id="carousel-selector-0">
			                        <img src="http://placehold.it/150x150&text=zero">
			                    </a>
			                </li>

			                <li class="col-sm-3">
			                    <a class="thumbnail" id="carousel-selector-1"><img src="http://placehold.it/150x150&text=1"></a>
			                </li>

			                <li class="col-sm-3">
			                    <a class="thumbnail" id="carousel-selector-2"><img src="http://placehold.it/150x150&text=2"></a>
			                </li>

			                <li class="col-sm-3">
			                    <a class="thumbnail" id="carousel-selector-3"><img src="http://placehold.it/150x150&text=3"></a>
			                </li>

			                <li class="col-sm-3">
			                    <a class="thumbnail" id="carousel-selector-4"><img src="http://placehold.it/150x150&text=4"></a>
			                </li>

			                <li class="col-sm-3">
			                    <a class="thumbnail" id="carousel-selector-5"><img src="http://placehold.it/150x150&text=5"></a>
			                </li>
			                <li class="col-sm-3">
			                    <a class="thumbnail" id="carousel-selector-6"><img src="http://placehold.it/150x150&text=6"></a>
			                </li>

			                <li class="col-sm-3">
			                    <a class="thumbnail" id="carousel-selector-7"><img src="http://placehold.it/150x150&text=7"></a>
			                </li>

			                <li class="col-sm-3">
			                    <a class="thumbnail" id="carousel-selector-8"><img src="http://placehold.it/150x150&text=8"></a>
			                </li>

			                <li class="col-sm-3">
			                    <a class="thumbnail" id="carousel-selector-9"><img src="http://placehold.it/150x150&text=9"></a>
			                </li>
			                <li class="col-sm-3">
			                    <a class="thumbnail" id="carousel-selector-10"><img src="http://placehold.it/150x150&text=10"></a>
			                </li>

			                <li class="col-sm-3">
			                    <a class="thumbnail" id="carousel-selector-11"><img src="http://placehold.it/150x150&text=11"></a>
			                </li>

			                <li class="col-sm-3">
			                    <a class="thumbnail" id="carousel-selector-12"><img src="http://placehold.it/150x150&text=12"></a>
			                </li>

			                <li class="col-sm-3">
			                    <a class="thumbnail" id="carousel-selector-13"><img src="http://placehold.it/150x150&text=13"></a>
			                </li>
			                <li class="col-sm-3">
			                    <a class="thumbnail" id="carousel-selector-14"><img src="http://placehold.it/150x150&text=14"></a>
			                </li>

			                <li class="col-sm-3">
			                    <a class="thumbnail" id="carousel-selector-15"><img src="http://placehold.it/150x150&text=15"></a>
			                </li>
			            </ul>
			        </div>
			        <div class="col-sm-6">
			            <div class="col-xs-12" id="slider">
			                <!-- Top part of the slider -->
			                <div class="row">
			                    <div class="col-sm-12" id="carousel-bounding-box">
			                        <div class="carousel slide" id="myCarousel">
			                            <!-- Carousel items -->
			                            <div class="carousel-inner">
			                                <div class="active item" data-slide-number="0">
			                                    <img src="http://placehold.it/470x480&text=zero"></div>

			                                <div class="item" data-slide-number="1">
			                                    <img src="http://placehold.it/470x480&text=1"></div>

			                                <div class="item" data-slide-number="2">
			                                    <img src="http://placehold.it/470x480&text=2"></div>

			                                <div class="item" data-slide-number="3">
			                                    <img src="http://placehold.it/470x480&text=3"></div>

			                                <div class="item" data-slide-number="4">
			                                    <img src="http://placehold.it/470x480&text=4"></div>

			                                <div class="item" data-slide-number="5">
			                                    <img src="http://placehold.it/470x480&text=5"></div>

			                                <div class="item" data-slide-number="6">
			                                    <img src="http://placehold.it/470x480&text=6"></div>

			                                <div class="item" data-slide-number="7">
			                                    <img src="http://placehold.it/470x480&text=7"></div>

			                                <div class="item" data-slide-number="8">
			                                    <img src="http://placehold.it/470x480&text=8"></div>

			                                <div class="item" data-slide-number="9">
			                                    <img src="http://placehold.it/470x480&text=9"></div>

			                                <div class="item" data-slide-number="10">
			                                    <img src="http://placehold.it/470x480&text=10"></div>

			                                <div class="item" data-slide-number="11">
			                                    <img src="http://placehold.it/470x480&text=11"></div>

			                                <div class="item" data-slide-number="12">
			                                    <img src="http://placehold.it/470x480&text=12"></div>

			                                <div class="item" data-slide-number="13">
			                                    <img src="http://placehold.it/470x480&text=13"></div>

			                                <div class="item" data-slide-number="14">
			                                    <img src="http://placehold.it/470x480&text=14"></div>

			                                <div class="item" data-slide-number="15">
			                                    <img src="http://placehold.it/470x480&text=15"></div>
			                            </div>
			                            <!-- Carousel nav -->
			                            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
			                                <span class="glyphicon glyphicon-chevron-left"></span>
			                            </a>
			                            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
			                                <span class="glyphicon glyphicon-chevron-right"></span>
			                            </a>
			                        </div>
			                    </div>
			                </div>
			            </div>
			        </div>
			        <!--/Slider-->
			    </div>

			</div>

		</div>
	</div>

</div>

@endsection

@section('scripts')

	<script>

	  	jQuery(document).ready(function($) {

	        $('#myCarousel').carousel({
	                interval: 5000
	        });

	        //Handles the carousel thumbnails
	        $('[id^=carousel-selector-]').click(function () {
		        var id_selector = $(this).attr("id");
		        try {
		            var id = /-(\d+)$/.exec(id_selector)[1];
		            console.log(id_selector, id);
		            jQuery('#myCarousel').carousel(parseInt(id));
		        } catch (e) {
		            console.log('Regex failed!', e);
		        }
		    });
	        // When the carousel slides, auto update the text
	        $('#myCarousel').on('slid.bs.carousel', function (e) {
	                 var id = $('.item.active').data('slide-number');
	                $('#carousel-text').html($('#slide-content-'+id).html());
	        });
		});

	</script>

@endsection