@extends('app')

@section('content')

	<div class="container">

		{!! Html::lines_menu([], $line->id) !!}
		<hr>


		<div id="retail">
			<div class="row">
				<div class="col-md-4 col-lg-3">
					<div class="collection-title">
						<div class="collection-title-items">
							@foreach(explode(' ', trim($collection->name)) as $item)
								@if(strlen($item) < 3 and $carry = (@$carry ? $carry.' ' : '').$item)
								@elseif(!@$carry and $carry = '')
								@else
									<span class="collection-title-item">
										{{ ($carry ? ($carry.' ' ) : '').$item.($carry = '') }}
									</span>
									<br>
								@endif
								
							@endforeach	
							@if(isset($carry) and strlen($carry))
								<span class="collection-title-item">
									{{ $carry }}
								</span>
							@endif
						</div>
					</div>	
				</div>
				@foreach($sets as $set)
					<div class="col-sm-6 col-md-4 col-lg-3 set-container">
						<div class="collection thumbnail text-center">
					      @if($photo = $set->photos->pop())
					      	@if($second = $set->photos->pop())
					      		<div class="hide-img-on-hover">
					      			{!!Html::image($second->photo->url('medium')) !!}	
					      			{!!Html::image($photo->photo->url('medium')) !!}
					      		</div>
					      		
					      	@else
					      		{!!Html::image($photo->photo->url('medium')) !!}
					      	@endif
					      @endif
					      <div class="caption">
					        <h4>{!! str_replace('-', '<br>', $set->name) !!}</h4>
					        <p class="hide">$ {{number_format($set->combinations->sum('price'), 2)}}</p>
							@if($set->combinations->filter(function($item){ return $item->stock->count() > 0; })->count() > 0)
								<a href="#" class="btn-add-to-cart" data-set-id="{{$set->id}}">
									<span class="fa fa-fw fa-2x fa-shopping-cart"></span>
								</a>
							@else
								<p class="text-danger">
									AGOTADO
								</p>
							@endif
					      </div>
					    </div>
					</div>
				@endforeach
			</div>

		</div>
		

		<div id="add-to-cart">

			<div class="text-right">
				<button class="cancel-btn">
					<span class="sr-only">Cancelar</span>
					<span class="fa-stack fa-lg">
		                <span class="fa fa-stack-2x fa-circle-thin"></span>
		                <span class="fa fa-stack-1x fa-times"></span>
		            </span>
				</button>
					
			</div>
			<div id="template" class="hide">

				<div class="row row-flex">

					<div class="col-xs-2 col-md-3">
						<a href="#" class="cart-previous-item">
							<span class="fa fa-fw fa-3x fa-chevron-left"></span>
						</a>
					</div>
					<div class="col-xs-8 col-md-6">
						<div class="text-center">
							<img class="product-img img-rounded">
							<h4 class="product-name">Producto</h4>
							<p class="product-description hidden-xs">Descripción</p>
							<p style="font-size: 115%;">
								<span class="fa fa-fw fa-usd"></span> <span class="product-price"></span>
							</p>
							<hr>
							<div class="form-horizontal item-form">
								<div class="form-group">
									<label class="control-label col-sm-3">
										Cantidad
									</label>
									<div class="col-sm-9 text-left product-quantity">
										<div class="input-group">
											<input type="number" class="form-control" readonly="readonly" value="1" max="5" name="quantity">
										  	<div class="input-group-btn">
										    	<button type="button" class="btn btn-default btn-cart-quantity-minus">
										    		<span class="fa fa-fw fa-minus"></span>
										    	</button>
										    	<button type="button" class="btn btn-default btn-cart-quantity-plus">
										    		<span class="fa fa-fw fa-plus"></span>
										    	</button>
										  	</div>
										</div>
									</div>
								</div>

								<div class="form-group">
									<label class="control-label col-sm-3">
										Talla
									</label>
									<div class="col-sm-9">
										<select class="form-control product-sizes" name="size"></select>
									</div>
								</div>

								<div class="form-group colors-group">
									<label class="control-label col-sm-3">
										Color
									</label>
									<div class="col-sm-9 colors-container">
										<select class="form-control product-colors" name="color"></select>
									</div>
								</div>

								<div class="form-group">
									<div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4 text-left">
										<button type="button" class="btn btn-default btn-lg btn-block btn-cart-continue btn-cart-buy">
											Comprar
										</button>
									</div>
								</div>

								
							</div>

							
							<div class="not-available form-group">

								<div class="col-sm-6 col-sm-offset-3 text-left">
									<div class="alert alert-no-stock">
										Producto agotado
									</div>
								</div>
								<div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4 text-left">
									<button type="button" class="btn btn-default btn-lg btn-block btn-cart-continue">
										Continuar
									</button>	
								</div>
								
							</div>
						</div>
					</div>

					<div class="col-xs-2 col-md-3">
						<a href="#" class="cart-next-item">
							<span class="fa fa-fw fa-3x fa-chevron-right"></span>
						</a>
					</div>
				</div>

			</div>

			<div id="confirm-template" class="hide order-items">

				<div class="order-combinations">
					<div class="combination-template">
						<div class="form-horizontal">

							<div class="text-right">
								<a class="edit">
									<span class="fa-stack fa-lg">
	                                    <span class="fa fa-stack-2x fa-circle-thin"></span>
	                                    <span class="fa fa-stack-1x fa-pencil"></span>
	                                </span>
								</a>
							</div>

							<div class="form-group hidden-xs">
								<div class="col-sm-4 text-right">
									<h3 class="combination-name"></h3>
								</div>
								<div class="col-sm-8">
									<h3>
										<small>{{ $line->name }}</small>
									</h3>
								</div>
							</div>
							<h3 class="visible-xs-inline">
								<span class="combination-name"></span> <small>{{$line->name}}</small>
							</h3>
							<div class="form-group">
								<label class="control-label col-sm-4">
	                                Cantidad
	                            </label>
	                            <div class="col-sm-3">
	                                <p class="form-control-static" data-quantity="NaN">
	                                    0
	                                </p>
	                            </div>
							</div>

							<div class="form-group">
								<label class="control-label col-sm-4">
	                                Talla
	                            </label>
	                            <div class="col-sm-3">
	                                <p class="form-control-static" data-size="NaN">
	                                    N/A
	                                </p>
	                            </div>
							</div>

							<div class="form-group">
								<label class="control-label col-sm-4">
	                                Color
	                            </label>
	                            <div class="col-sm-3">
	                                <p class="form-control-static" data-color="NaN">
	                                    N/A
	                                </p>
	                            </div>
	                            <div class="col-sm-4">
	                            	<p class="form-control-static text-right" data-price>
	                            		$ 0.00
	                            	</p>
	                            </div>
							</div>
							
						</div>
					</div>
				</div>

				<div>
					<hr style="border-style: dashed;"> 
					<div class="form-horizontal">
                        <div class="form-group">
                            <label class="control-label col-sm-4 col-sm-offset-4">
                                Subtotal
                            </label>
                            <div class="col-sm-3">
                                <p class="form-control-static text-right cart-subtotal">
                                    
                                </p>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <div class="col-sm-5 col-sm-offset-6 text-right">
                                <button class="btn btn-primary btn-confirm">
									Pagar
								</button>
                            </div>
                        </div>
                        
                    </div>
				</div>
			</div>

			<div class="container-fluid" id="model-combinations-container">

			</div>
		</div>
	</div>

	
@endsection

@section('footer')
	<div class="row">
		<div class="col-xs-6 text-right">
			{!! $sets->appends(['search' => Input::get('search')])->render() !!}
		</div>
		<div class="col-xs-6">
			{!! Form::open([
				'method' => 'GET',
				'id' => 'search-form'
			]) !!}
				<label>BUSCAR</label>
				<div class="input-group">
					{!! Form::text('search', Input::get('search'), ['class' => 'form-control']) !!}
					<span class="input-group-btn">
						<button type="submit" class="btn btn-default">
							<span class="fa fa-fw fa-search"></span>
						</button>
					</span>
				</div>
			{!! Form::close() !!}
		</div>
	</div>
@endsection

@section('style')
	{!! Html::style('css/store.css') !!}
@endsection

@section('script')
	{!! Html::script('js/laroute.js') !!}
	{!! Html::script('js/numeral/numeral.js') !!}
	{!! Html::script('js/collection.show.js')!!}
	{!! Html::script('js/store.js')!!}
@stop