
<?php \Laravel\Section::start('content'); ?>

<div class="wrapper pageType pageProduit">

	<div class="chemin">
		<a href="<?php echo  URL::to('/'); ; ?>" title="<?php echo  __('site.accueil') ; ?>"><?php echo  __('site.accueil') ; ?></a> <i class="icon-angle-right"></i> <a href="<?php echo  URL::to_action('home@categorie', array($produit->category->id, GeneralFunctions::cleanstring($produit->category->descLocale()->name))) ; ?>" title="<?php echo  ucwords(strtolower($produit->category->descLocale()->name)) ; ?>"><?php echo  ucwords(strtolower($produit->category->descLocale()->name)) ; ?></a> <i class="icon-angle-right"></i> <a href="<?php echo  URL::to_action('produits@index', array($produit->id, GeneralFunctions::cleanstring($produit->nom))) ; ?>" title="<?php echo $produit->nom; ?>"><?php echo $produit->nom; ?></a>
	</div>
	<h1><?php echo $produit->nom; ?></h1>
	<div class="clear"></div>
	
	<?php // Gros cadre photo produit ?>
	<div class="cadreProduitContainer">
		<div class="cadreProduit"></div>
		<div class="cadreProduitInterieur">
			<?php // Détails du produit sur le cadre ?>
			<div class="details">
				<h2 class="name hidden_mobile"><?php echo $produit->nom; ?></h2>
				<p class="resume hidden_mobile"><?php echo $produit->contentLocale()->resume; ?></p>
				<?php // Miniatures Thumbnails ?>
				<div class="left thumbs imgMiniatures hidden_tablette">
					<?php $i=0 ?>
					<?php foreach($produit->photos_others as $f): ?>
						<?php $i++; ?>
						<a href="#" class="left" data-pos="<?php echo $i; ?>"><img src="<?php echo  URL::to_action('photoproduitsmall',array('98','98',$f->name)); ; ?>" alt="" /></a>
					<?php endforeach; ?>
				</div>
			</div>
			<?php // Bouton Like Facebook ?>
			<div class="likeFb"><iframe src="//www.facebook.com/plugins/like.php?href=<?php echo urlencode(URL::full()); ?>&amp;width=450&amp;height=21&amp;colorscheme=light&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;send=false" scrolling="no" frameborder="0" style="width:110px; height:20px; border:none; overflow:hidden;" allowTransparency="true"></iframe></div>
			<?php // Image principake du produit ?>
			<div class="imgMain">
				<?php if($produit->photos && count($produit->photos)>=1): ?>
					<?php $k=0; ?>
					<?php foreach($produit->photos_others as $f): ?>
						<?php $k++; ?>
						<img data-pos="<?php echo $k; ?>" style="display:none;" src="<?php echo  URL::to_action('photoproduitbig',array('1000','490',$f->name)); ; ?>" alt="" />
					<?php endforeach; ?>
				<?php else: ?>
					<img src="http://placehold.it/1000x490&text=Parking%20Clothes">
				<?php endif; ?>
			</div>
		</div>
	</div>
	<div class="clear"></div>
	
	<?php // Miniatures (mobile) ?>
	<div class="row-fluid specialThumbnails imgMiniatures show_portrait">
		<?php $j=0; ?>
		<?php foreach($produit->photos_others as $f): ?>
			<?php $j++; ?>
			<a href="#" class="left span3" data-pos="<?php echo $j; ?>"><img src="<?php echo  URL::to_action('photoproduitsmall',array('98','98',$f->name)); ; ?>" alt="" /></a>
		<?php endforeach; ?>
		<div class="left barreSepa" style="height:1px;border:none;"></div>
	</div>
	<?php // Description courte (mobile) ?>
	<div class="specialResume show_mobile">
		<?php echo $produit->contentLocale()->resume; ?>
		<div class="left barreSepa" style="height:1px;border:none;"></div>
	</div>
	
	<?php // Bloc des choix ?>
	<div class="acheter">
		<div class="left choiceTT">
			<?php // Choix de la taille ?>
			<div class="box tailles left">
				<h3><?php echo  __('site.produit1') ; ?></h3>
				<?php foreach($produit->tailles as $t): ?>
				<a href="#" class="filterChoice left circle" data-filter="<?php echo $t->taille->id; ?>"><?php echo $t->taille->name; ?></a>
				<?php endforeach; ?>
			</div>
			<?php // Choix du type Homme/Femme ?>
			<div class="box types left">
				<h3><?php echo  __('site.produit2') ; ?></h3>
				<a href="#" class="filterChoice tooltipType left typeH sprite active" data-filter="homme" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="<?php echo __('site.filtre2'); ?>"></a>
				<a href="#" class="filterChoice tooltipType left typeF sprite" data-filter="femme" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="<?php echo __('site.filtre3'); ?>"></a>
			</div>
			<?php // Choix de la couleur ?>
			<div class="box couleurs left">
				<h3><?php echo  __('site.produit3') ; ?></h3>
				<div class="btn-group">
					<button class="btn couleurNative"data-toggle="dropdown">
						<span class="badge" id="<?php echo  $couleur_first->couleur->id ; ?>" data-color="<?php echo  $couleur_first->couleur->couleur ; ?>" style="background-color:#<?php echo  $couleur_first->couleur->couleur ; ?>;">&nbsp;</span>
					</button>
					<button class="btn btn_caret dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
					<ul class="dropdown-menu liste_couleurs">
						<?php foreach($produit->couleurs as $c): ?>
						<li><a href="#"><span class="badge" id="<?php echo  $c->couleur->id ; ?>" data-color="<?php echo  $c->couleur->couleur ; ?>" style="background-color:#<?php echo  $c->couleur->couleur ; ?>;">&nbsp;</span></a></li>
						<?php endforeach; ?>
					</ul>
				</div>
			</div>
			<?php // Choix de la quantité ?>
			<div class="box quantite left">
				<h3><?php echo  __('site.produit4') ; ?></h3>
				<div class="left"><input type="text" class="nbProduit" value="1" onchange="calcul_prix()" onkeyup="calcul_prix()" /></div>
				<div class="left">
					<a href="#" class="left btnPlus"><i class="icon-plus"></i></a><br/>
					<a href="#" class="left btnMinus"><i class="icon-minus"></i></a>
				</div>
			</div>
		</div>
		<div class="left barreSepa show_mobile" style="height:1px;border:none;"></div>
		<div class="right choiceTP">
			<i class="icon-shopping-cart iconeFly"></i>
			<a href="#" class="right productPrice sprite" title="<?php echo  __('site.produit6') ; ?>"><span><?php echo  str_replace('.',',',$produit->prix_ttc) ; ?>&euro;</span></a>
		</div>
	</div>
	<div class="clear"></div>
	
	<?php // Description longue ?>
	<div class="productDesc">
		<h4><?php echo  __('site.produit5') ; ?></h4>
		<?php if($produit->contentLocale()->html!=''): ?>
			<p><?php echo $produit->contentLocale()->html; ?></p>
		<?php else: ?>
			<p>Aucune description pour ce produit.</p>
		<?php endif; ?>
	</div>
	<div class="clear"></div>
	
	<?php // Autres produits de la même catégorie ?>
	<div class="left barreSepa"></div>
	<h5 class="left"><?php echo  __('site.produit7') ; ?></h5>
	<div class="row-fluid">
		<?php foreach($others_product as $p): ?>
		<div class="produit_min span3">
			<a href="<?php echo  URL::to_action('produits@index', array($p->id, GeneralFunctions::cleanstring($p->nom))) ; ?>" title="Produit" class="photo">
				<?php if($p->miniature): ?>
					<img src="<?php echo  URL::to_action('photoproduit',array('235','200',$p->miniature)); ; ?>" alt="" />
				<?php else: ?>
					<img src="http://placehold.it/235x200&text=Parking+Clothes">
				<?php endif; ?>
			</a>
			<div class="left titleP">
				<a href="<?php echo  URL::to_action('produits@index', array($p->id, GeneralFunctions::cleanstring($p->nom))) ; ?>" class="name"><strong><?php echo $p->nom; ?></strong></a>
				<a href="<?php echo  URL::to_action('home@categorie', array($p->category->id, GeneralFunctions::cleanstring($p->category->descLocale()->name))) ; ?>" class="type"><?php echo $p->category->descLocale()->name; ?></a>
			</div>
			<div class="right price">
				<div class="cursor"></div>
				<strong><?php echo  str_replace('.',',',$p->prix_ttc) ; ?>&euro;</strong>
			</div>
		</div>
		<?php endforeach; ?>
	</div>
	<div class="clear"></div>
	
	<?php // Modal qui s'affiche lors de l'ajout au panier, confirmPanier ?>
	<div id="confirmPanier" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
		<form class="form-horizontal" action="#" method="post" style="margin:0;">
		  <div class="modal-header">
		    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="icon-remove icon-white"></i></button>
		    <h3 id="myModalSpeTitre"><i class="icon-info-sign"></i> Parking Clothes - <?php echo  __('site.produit8') ; ?></h3>
		  </div>
		  <div class="modal-body" >
			  <div id="myModalSpeMsg" class="control-group">
				  <?php echo  __('site.produit9') ; ?><br/><br/>
				  <a href="#" data-dismiss="modal" aria-hidden="true" class="left boutonL btn"><i class="icon-shopping-cart"></i> <?php echo  __('site.produit10') ; ?></a>
				  <a href="<?php echo  URL::to_route('panier') ; ?>" class="right btn boutonR btn-success"><?php echo  __('site.produit11') ; ?> <i class="icon-chevron-right"></i></a>
			  </div>
		  </div>
		  <div id="myModalFooter" class="modal-footer">
			  <div class="left"><a href="#" class="btn" data-dismiss="modal" aria-hidden="true"><?php echo  __('site.produit12') ; ?></a></div>
			  <div id="myModalFooterSpe" class="right"></div>
		  </div>
	  </form>
	</div>
	
	<script type="text/javascript">
	// Function qui récupère tous les attributs (taille, couleur, type, quantité)
	function recuperation(){
		// Récupère les attributs
		var taille = '',
			couleur = '',
			type = 'homme',
			quantite = 1;
		// Taille
		$('.tailles a').each(function(){
			if($(this).hasClass('active')){
				taille = $(this).attr('data-filter');
			}
		});
		// Type
		$('.types a').each(function(){
			if($(this).hasClass('active')){
				type = $(this).attr('data-filter');
			}
		});
		// Couleur
		couleur = $('.couleurNative span').attr('id');
		// Quantité
		quantite = $('.nbProduit').val();
		
		// Ajax
		$.ajax({
			type: "POST",
			url: "<?php echo URL::to_route('addtocart'); ?>",
			data: { 
				product_id: "<?php echo $produit->id; ?>", 
				taille: taille,
				type: type,
				couleur: couleur,
				quantite: quantite
			}
		})
		.done(function( nb_articles ) {
			// Mise à jour nombre d'articles dans le header, span ID "nb_articles"
			$("#nb_articles").html(nb_articles);
			
			// Déclencher modal de confirm panier
			$('#confirmPanier').modal('show');
		});
	}
	
	// Ajout au panier
	$('.productPrice').on('click',function(e){
		e.preventDefault();
		// Animation Fly Off Page
		var current_pos = $(this).offset();
		
		if($(this).css('margin-left')=='-128px'){
			// Si mobile (plus petite resolution
			var decalage_left = '50%';
			var marge_left = '-64px';
		}
		else{
			var decalage_left = parseInt(current_pos.left)+'px';
			var marge_left = 0;
		}
		
		$(this).clone().appendTo('body').css({
			'position': 'absolute',
			'left': decalage_left,
			'marginLeft': marge_left,
			'top': current_pos.top+'px'
		}).flyOffPage({
			tween: {
		        opacity: 0
		    },
			duration: 1000,
			direction: 'top',
			retainSpace: {
		        height: 0,
		        width: 0
		    }
		});
		verif_qantite($('.nbProduit').val());
		recuperation();
	});
	
	// Script pour la gestion modification : tailles, couleurs, types...
	// Tailles
	$('.tailles a').first().addClass('active');
	$('.tailles a').each(function(){
		$(this).on('click',function(e){
			e.preventDefault();
			$('.tailles a').removeClass('active');
			$(this).addClass('active');
		});
	});
	// Type
	$('.types a').each(function(){
		$(this).on('click',function(e){
			e.preventDefault();
			$('.types a').removeClass('active');
			$(this).addClass('active');
		});
	});
	// Couleur
	$('.liste_couleurs li a').first().addClass('currentColor');
	$('.liste_couleurs li').each(function(){
		$(this).children().on('click',function(e){
			e.preventDefault();
			$('.liste_couleurs li a').removeClass('currentColor');
			$(this).addClass('currentColor');
			var newId = $(this).children().attr('id'),
				newColor = $(this).children().attr('data-color');
			$('.couleurNative').empty().html('<span class="badge" id="'+newId+'" data-color="'+newColor+'" style="background-color:#'+newColor+';">&nbsp;</span>');
		});
	});
	// Quantité
	function calcul_prix(){
		prixProduit = '<?php echo $produit->prix_ttc; ?>';
		quantite = $('.nbProduit').val();
		if(isNaN(quantite) == false){
			total = parseFloat(Number(prixProduit) * Number(quantite)).toFixed(2);
			total = total.replace('.',',');
			$('.productPrice span').empty().html(total+'&euro;');
		} else {
			alert('Veuillez indiquer un nombre.');
			return false;
		}
	}
	function verif_qantite(nb){
		if(nb=='' || nb==0)
		{
			$('.nbProduit').val(1);
			calcul_prix();
		} else {
			calcul_prix();
		}
	}
	$(document).ready(function(){
		$(this).on('click',function(){
			verif_qantite($('.nbProduit').val());
		});
	});
	// Au click + ou -
	$('.quantite a').each(function(){
		$(this).on('click',function(e){
			e.preventDefault();
			if($(this).hasClass('btnPlus'))
			{
				var qtyNow = $('.nbProduit').val();
				var qtyNew = parseInt(qtyNow)+1;
				$('.nbProduit').val(qtyNew);
				calcul_prix();
			} else {
				var qtyNow = $('.nbProduit').val();
				if(qtyNow>=1)
				{
					var qtyNew = parseInt(qtyNow)-1;
					$('.nbProduit').val(qtyNew);
					calcul_prix();
				}
				else {return false;}
			}
		});
	});
			
	// Script pour la gestion du slide + thumbnails
	$('.thumbs a').first().addClass('active');
	$('.specialThumbnails a').first().addClass('active');
	$('.imgMain img').first().show();
	var currentThumb = 1;
	var duration = 500;
	// Action lors du click sur une miniature
	$('.imgMiniatures a').each(function(){
		$(this).on('click',function(e){
			e.preventDefault();
			// On vérifie qu'une animation n'est pas déjà en cours
			if(!$('.imgMain img').is(":animated"))
			{
				// On identifie la miniature active
				$('.imgMiniatures a').each(function(){
					if($(this).hasClass('active')){
						currentThumb = $(this).attr('data-pos');
					}
				});
				position = $(this).attr('data-pos');
				// On vérifie qu'on ne clique pas sur une miniature déjà active
				if(currentThumb != position)
				{
					// On supprime la classe 'active' pour la réattribuer à la bonne miniature
					$('.imgMiniatures a').removeClass('active');
					$('.imgMiniatures a').each(function(){
						if($(this).attr('data-pos') == position){
							$(this).addClass('active');
						}
					});
					// Changement d'image
					$('.imgMain img').each(function(){
						$(this).css('position','absolute').hide("slide", {direction: "down" }, duration, function(){
							$(this).css('position','relative');
							if($(this).attr('data-pos') == position){
								$(this).appendTo('.imgMain').show("slide", {direction: "up" }, duration);
							}
						});
					});
				}
			}
		});
	});
	</script>
	
</div>
<div class="clear"></div>
		
<?php \Laravel\Section::stop(); ?>



<?php echo view('template')->with(get_defined_vars())->render(); ?>