@extends('layouts.quiz')
@php 
$page_title = 'Question Design'; 
$no_full_title = true;
@endphp

@section('meta-title','Coaching déco Bricorama en partenariat avec Pipcke')
@section('meta-keywords','')
@section('meta-description','Sélectionnez votre espace, parlez-nous de votre projet et styles et envoyez vos photos pour bénéficier du coaching déco Bricorama en partenariat avec Pipcke.')
@section('body-class','quiz bricorama') 
@section('themeColor','#fff200') 
@section('loaderStyle', "style=display:none;") 

@section('meta')

<meta property="og:url"           content="{{ request()->url() }}" />
<meta property="og:type"          content="website" />
<meta property="og:title"         content="Coaching déco Bricorama en partenariat avec Pipcke" />
<meta property="og:description"   content="Sélectionnez votre espace, parlez-nous de votre projet et styles et envoyez vos photos pour bénéficier du coaching déco Bricorama en partenariat avec Pipcke." />
<meta name="description"   	  content="Sélectionnez votre espace, parlez-nous de votre projet et styles et envoyez vos photos pour bénéficier du coaching déco Bricorama en partenariat avec Pipcke." />
<meta property="fb:app_id" 		  content="730800570418065">

@endsection

@section('content')

	@include('front.components.consulter-un-designer-modal')

	<div class="container">
		
		<div class="row mt-4">
			<div class="col-auto">
				<img src="{{ asset('img/logo_bricorama.png') }}" class="d-none d-md-block mt-2" style="height: 25px" alt="">
			</div>
			<div class="col text-center">
				
				<img class="d-md-none mt-2" src="{{ asset('img/logo_bricorama.png') }}" style="height: 25px" alt="">
			</div>
			<div class="col-auto">
				<a href="{{ route('home') }}">
					<img src="{{ asset('img/logo-black.svg') }}" class="mt-2 d-none d-md-block" style="height: 30px" alt="">
				</a>
			</div>
		</div>

		<div class="steper bricorama" data-step="1">
			<div class="step step1">
				<div class="title">{!! lang('Espace') !!}</div>
				<div class="number">1</div>
			</div>
			<div class="step step2">
				<div class="title">{!! lang('Projet') !!}</div>
				<div class="number">2</div>
			</div>
			<div class="step step3">
				<div class="title">{!! lang('Style') !!}</div>
				<div class="number">3</div>
			</div>
			<div class="step step4">
				<div class="title">{!! lang('Inspiration') !!}</div>
				<div class="number">4</div>
			</div>
			<div class="step step5">
				<div class="title">{!! lang('Budget') !!}</div>
				<div class="number">5</div>
			</div>
		</div>
	</div>

	<form name="consulter-un-designer-form-bricorama" action="{{ route('bricorama.store') }}" method="post">
		{{ csrf_field() }}
		<section id="step1" data-title="Espace" class="">
			<div>
				<div class="container text-center">
					<div class="container text-center pb-70 ">
						
						<h1 class="mb-50 h4 poppins">{!! lang('Sélectionnez votre espace') !!} </h1>
						
						<div class="themes-brico clearfix">
							@php $i=0;  @endphp
							@foreach($data as $key=>$value) 
								<div class="col-md-3">
									<label class="theme-brico">
										<input type="radio" name="espace" value="{{$key}}">
										<div class="check"><i class="fa fa-check"></i></div>
										<img src="{{ asset('assets/quiz/icons/'.$value) }}" alt="">
										{{$key}}
									</label>
								</div>
							@endforeach
							
							<div class="col-md-3">
								<label class="theme-brico autre-brico">
									<div class="check"><i class="fa fa-check"></i></div>
									<div class="icon">
										<img src="{{ asset('assets/quiz/icons/pipcke-new-project-other-room.svg') }}" alt="">
										{!! lang('Autres') !!}
									</div>
									
									<div class="input d-none">
										{!! lang('Merci de bien<br> vouloir préciser') !!}
										<input type="text" name="autre" placeholder="Exemple : garage" class="d-block opacity-1 form-control w-75 m-auto mt-30">
									</div>
								</label>
							</div>
							
						</div>
					</div>
				</div>
				<a href="javascript:;" class="suivant d-none btn btn-naked btn-icon-left btn-icon-xlg btn-icon-circle btn-icon-solid btn-icon-ripple">
					<span class="btn-icon text-secondary font-size-22"><i class="fa fa-chevron-right"></i></span>
				</a>
			</div>
		</section>
		<section id="step2" data-title="Projet" class="hidden">
			<div class="mb-5">
				<fieldset class="container brief">
					<h2 class="mb-50 h4 poppins text-center">{!! lang('Parlez-nous de votre projet') !!}</h2>
					
					{{--  --}}
					<div class="form-group pb-1">
						<h3 class="h2">{!! lang('Détaillez votre besoin, vos envies, vos contraintes et l’objectif principal de votre projet.') !!} </h3>
						<textarea class="form-control mb-5" name="besoins" rows="10"></textarea>
					</div>

					{{--  --}}

					<div class="form-group">
						<h3 class="h2">{!! lang('Prenez des photos de votre espace pour aider nos décorateurs à mieux comprendre votre besoin.') !!}</h3>
						<p>Formats de fichiers acceptés JPEG et PNG. Taille maximale à respecter 8Mo.</p>

						<div class="form-check mt-4"> 
					        <div class="photos_espace photos" data-name="besoins_photos">
					            <div class="add-photo">
					                <i class="fa fa-plus"></i>
					                <label for="">{!! lang('Ajouter une photo') !!}</label>
					            </div>
					        </div>
					    </div>
					</div>

					{{--  --}}

					<div class="form-group">
				        <h3 class="h2">{!! lang('Téléchargez un plan ou un croquis avec les dimensions de votre espace.') !!}</h3>
				        <p class="mt-2">{!! lang('Consulter un exemple ') !!}<i class="fa fa-info-circle tip" data-tip="tip-3"></i> </p>
					    <div id="tip-3" class="tip-content hidden">             
					        <img src="{{ asset('img/pipcke-brief-example-floor-plan-layout.jpg') }}" alt="">
					    </div>
					    <div class="photos_plan photos" data-name="plans" data-accept="pdf">
					        <div class="add-photo">
					            <i class="fa fa-plus"></i>
					            <label for="">{!! lang('Ajouter un fichier') !!}</label>
					        </div> 
					    </div>
				    </div>

					{{--  --}}

					<div class="form-group">
				        <h3 class="h2">{!! lang('Prenez et téléchargez une petite vidéo de votre espace.') !!}</h3>
					    <div class="">
					        <input type="file" accept="video/mp4,video/x-m4v,video/*" name="video" id="videoBricorama"  class="inputfile" />
					        <label for="videoBricorama" class="box-choosed-video">
					            <i class="fa fa-upload"></i>
					            <span>{!! lang('Ajouter une vidéo') !!}</span>
					        </label>
					    </div>
					    <br>
				    </div>

					{{--  --}}

				    <div class="clearfix"></div>
	    
				    <div class="form-group">
				        <h3 class="h2">{!! lang('Souhaitez-vous conserver certains de vos meubles ou objets actuels dans votre nouvel espace ? Si oui, lesquels ?') !!}</h3>
				        
				        <label>
				            <input type="radio" name="conserver_meuble" value="non">
				            <span class="ml-2">{!! lang('Non') !!}</span>
				        </label>
				        <label class="ml-3">
				            <input type="radio" name="conserver_meuble" value="oui">
				            <span class="ml-2">{!! lang('Oui') !!}</span>
				        </label>

				    
				        <div class="d-oui d-none">
				                <div>
					                <h4 class="h3 mb-4">{!! lang('Lesquels (préciser marques et références si possible) ?') !!}</h4>
					                <textarea placeholder="Indiquez vos meubles, objets ..." class="form-control" rows="1" name="conserver_meuble_text">{{ $projet->brief->conserver_meuble_text ?? '' }}</textarea>
				                </div>

				                <div class="form-check mt-4 ">
				                    <h4 class="mb-4 h3">{!! lang('Téléchargez des photos, en gros plan si possible, des meubles et des objets décoratifs que vous souhaitez conserver.') !!}</h4>
				                
				                    <div class="photos_meubles photos " data-name="meubles">
				                        <div class="add-photo">
				                            <i class="fa fa-plus"></i>
				                            <label for="">{!! lang('Ajouter une photo') !!}</label>
				                        </div>
				                    </div>
				                </div>

				                
				                <div class="form-check mt-3">
				                    <h4 class="mb-4 h3">{!! lang('Transmettez, si possible, des liens internet renvoyant vers ces meubles et ces objets décoratifs à conserver.') !!}</h4>
				                
				                    <div class="form-group liens">
				                        <div class="lien">
				                            <input type="text" name="attire_attention[]" class="form-control" placeholder="Copiez-collez vos liens ici">
				                            <div class="delete-link"><i class="fa fa-trash"></i></div>
				                        </div>
				                        <script type="text/template" id="lien-template">
				                            <div class="lien">
				                                <input type="text" name="attire_attention[]" class="form-control" placeholder="Copiez-collez vos liens ici">
				                                <div class="delete-link"><i class="fa fa-trash"></i></div>
				                            </div>
				                        </script>
				                    </div>
				                </div>
				        </div>

				    </div>
					
					{{--  --}}

				</fieldset>
				<a href="javascript:;" class="precedent btn btn-naked btn-icon-left btn-icon-xlg btn-icon-circle btn-icon-solid">
					<i class="btn-icon text-secondary font-size-22 fa fa-chevron-left"></i>
				</a>
				<a href="javascript:;" class="suivant btn btn-naked btn-icon-left btn-icon-xlg btn-icon-circle btn-icon-solid btn-icon-ripple">
					<span class="btn-icon text-secondary font-size-22"><i class="fa fa-chevron-right"></i></span>
				</a>
			</div>
		</section>
		<section id="step3" data-title="Style" class="hidden">
			<div>
				<div class="container text-center">
					<div class="mb-50">
						<h2 class="mb-10 h4 poppins">{!! lang('Quel style vous correspond le mieux ?') !!}</h2>
						<small>Plusieurs choix possibles</small>
					</div>
					<div class="columns">
						<label>
							<input type="checkbox" name="style[]" value="Bohème">
							<img class="lazy-image" data-src="{{ asset('assets/consulter-designer/pipcke-consult-designer-decoration-style-bohemian.jpg') }}">
							<div class="check"><i class="fa fa-check"></i></div>
							<figcaption>{!! lang('Bohème') !!}</figcaption>
						</label>
						<label>
							<input type="checkbox" name="style[]" value="Industriel">
							<img class="lazy-image" data-src="{{ asset('assets/consulter-designer/pipcke-consult-designer-decoration-style-industrial.jpg') }}">
							<div class="check"><i class="fa fa-check"></i></div>
							<figcaption>{!! lang('Industriel') !!}</figcaption>
						</label>
						
						<label>
							<input type="checkbox" name="style[]" value="Contemporain">
							<img class="lazy-image" data-src="{{ asset('assets/consulter-designer/pipcke-consult-designer-decoration-style-contemporary.jpg') }}">
							<div class="check"><i class="fa fa-check"></i></div>
							<figcaption>{!! lang('Contemporain') !!}</figcaption>
						</label>
						<label>
							<input type="checkbox" name="style[]" value="Rustique">
							<img class="lazy-image" data-src="{{ asset('assets/consulter-designer/pipcke-consult-designer-decoration-style-rustic.jpg') }}">
							<div class="check"><i class="fa fa-check"></i></div>
							<figcaption>{!! lang('Rustique') !!}</figcaption>
						</label>
						<label>
							<input type="checkbox" name="style[]" value="Scandinave">
							<img class="lazy-image" data-src="{{ asset('assets/consulter-designer/pipcke-consult-designer-decoration-style-scandinavian.jpg') }}">
							<div class="check"><i class="fa fa-check"></i></div>
							<figcaption>{!! lang('Scandinave') !!}</figcaption>
						</label>
						<label>
							<input type="checkbox" name="style[]" value="Moderne">
							<img class="lazy-image" data-src="{{ asset('assets/consulter-designer/pipcke-consult-designer-decoration-style-modern.PNG') }}">
							<div class="check"><i class="fa fa-check"></i></div>
							<figcaption>{!! lang('Moderne') !!}</figcaption>
						</label>
						<label>
							<input type="checkbox" name="style[]" value="Eclectique">
							<img class="lazy-image" data-src="{{ asset('assets/consulter-designer/pipcke-consult-designer-decoration-style-eclectic.jpg') }}">
							<div class="check"><i class="fa fa-check"></i></div>
							<figcaption>{!! lang('Éclectique') !!}</figcaption>
						</label>
						<label>
							<input type="checkbox" name="style[]" value="Lagom">
							<img class="lazy-image" data-src="{{ asset('assets/quiz/Q4_6/quizz-style-inspiration-space-31-lagom-minimal.jpg') }}">
							<div class="check"><i class="fa fa-check"></i></div>
							<figcaption>{!! lang('Lagom') !!}</figcaption>
						</label>
						<label>
							<input type="checkbox" name="style[]" value="Vintage">
							<img class="lazy-image" data-src="{{ asset('assets/consulter-designer/pipcke-consult-designer-decoration-style-vintage.jpg') }}">
							<div class="check"><i class="fa fa-check"></i></div>
							<figcaption>{!! lang('Vintage') !!}</figcaption>
						</label>
						<label>
							<input type="checkbox" name="style[]" value="Bord de mer">
							<img class="lazy-image" data-src="{{ asset('assets/consulter-designer/pipcke-consult-designer-decoration-style-coastal.jpg') }}">
							<div class="check"><i class="fa fa-check"></i></div>
							<figcaption>{!! lang('Bord de mer') !!}</figcaption>
						</label>
						<label>
							<input type="checkbox" name="style[]" value="Minimaliste">
							<img class="lazy-image" data-src="{{ asset('assets/consulter-designer/pipcke-consult-designer-decoration-style-minimal.jpg') }}">
							<div class="check"><i class="fa fa-check"></i></div>
							<figcaption>{!! lang('Minimaliste') !!}</figcaption>
						</label>
						<label>
							<input type="checkbox" name="style[]" value="Exotique">
							<img class="lazy-image" data-src="{{ asset('assets/consulter-designer/pipcke-consult-designer-decoration-style-exotic.jpg') }}">
							<div class="check"><i class="fa fa-check"></i></div>
							<figcaption>{!! lang('Exotique') !!}</figcaption>
						</label>
						<label>
							<input type="checkbox" name="style[]" value="Classique">
							<img class="lazy-image" data-src="{{ asset('assets/consulter-designer/pipcke-consult-designer-decoration-style-classic.jpg') }}">
							<div class="check"><i class="fa fa-check"></i></div>
							<figcaption>{!! lang('Classique') !!}</figcaption>
						</label>

						<label>
							<input type="checkbox" name="style[]" value="Glamour">
							<img class="lazy-image" data-src="{{ asset('assets/quiz/Q4_6/quizz-style-inspiration-space-9-glam.jpg') }}">
							<div class="check"><i class="fa fa-check"></i></div>
							<figcaption>{!! lang('Glamour') !!}</figcaption>
						</label>
						
	 

					</div>
					<div  class="mb-90 mt-20">
						<a href="javascript:;" class="suivant-link text-underline">{!! lang('Aucun de ces styles ne m’attire >') !!}</a>
					</div>
				</div>
				<a href="javascript:;" class="precedent btn btn-naked btn-icon-left btn-icon-xlg btn-icon-circle btn-icon-solid">
					<i class="btn-icon text-secondary font-size-22 fa fa-chevron-left"></i>
				</a>
				<a href="javascript:;" class="suivant btn btn-naked btn-icon-left btn-icon-xlg btn-icon-circle btn-icon-solid btn-icon-ripple">
					<span class="btn-icon text-secondary font-size-22"><i class="fa fa-chevron-right"></i></span>
				</a>
			</div>
		</section>
		<section id="step4" data-title="Inspiration" class="hidden">
			<div class="container brief pb-90">
			    <h2 class="mb-50 h4 poppins text-center">{!! lang("Imaginez votre nouvel espace") !!}</h2>
				
				{{--  --}}
				<div class="form-check mt-5">
					<h3 class="h2">Avez-vous des demandes spécifiques en termes de matériaux, mobilier et décoration à prendre en considération pour ce projet ?</h3>
					<textarea name="projet_q10" rows="1" class="form-control" placeholder="Parlez-nous de vos préférences ..."></textarea>
				</div>
				{{--  --}}
				<div class="form-check mt-5">
					<h3 class="h2">Téléchargez les visuels et les photos d'inspiration qui ont attiré votre attention.</h3>
			        <div class="photos_espace photos" data-name="inspirations">
			            <div class="add-photo">
			                <i class="fa fa-plus"></i>
			                <label for="">{!! lang('Ajouter une photo') !!}</label>
			            </div>
			        </div>
			    </div>

				{{--  --}}
				<div class="form-check">
			        <h3 class="h2">{!! lang('Copiez-collez les liens qui vous ont séduit sur Pinterest ou toute autre source.') !!}</h3>
			        <p class="font-size-14 text-black">Conseil : <br>
			        <span style="display: inline-block; width: 12px">1.</span> Créez un nouveau tableau sur Pinterest intitulé Pipcke en regroupant les images et les planches sélectionnées<br>
			        <span style="display: inline-block; width: 12px">2.</span> Copiez-collez le lien vers ce tableau dans l’espace prévu en bas</p>

			        <div class="form-group liens">
			            <div class="lien">
			                <input type="text" name="inspiration_attire_attention[]" class="form-control" placeholder="Copiez-collez vos liens ici">
			                <div class="delete-link"><i class="fa fa-trash"></i></div>
			            </div>
			            <script type="text/template" id="lien-template">
			                <div class="lien">
			                    <input type="text" name="inspiration_attire_attention[]" class="form-control" placeholder="Copiez-collez vos liens ici">
			                    <div class="delete-link"><i class="fa fa-trash"></i></div>
			                </div>
			            </script>
			        </div>
			    </div>
	    		{{--  --}}
 
				<a href="javascript:;" class="precedent btn btn-naked btn-icon-left btn-icon-xlg btn-icon-circle btn-icon-solid">
					<i class="btn-icon text-secondary font-size-22 fa fa-chevron-left"></i>
				</a>
				<a href="javascript:;" class="suivant btn btn-naked btn-icon-left btn-icon-xlg btn-icon-circle btn-icon-solid btn-icon-ripple">
					<span class="btn-icon text-secondary font-size-22"><i class="fa fa-chevron-right"></i></span>
				</a>
			</div>
		</section>
		<section id="step5" data-title="Budget" class="hidden">
			<div>
				<div class="container brief ">
					<h2 class="mb-50 h4 poppins text-center">{!! lang('Quel est votre budget pour ce projet ?') !!}</h2>
					{{--  --}}

					<div id="budgets">
						
					</div>
					 
					{{--  --}}
					<div class="text-center pt-5 mt-5 mb-5">
						<button id="btn-lancer-ma-consultation" class="btn btn-sm btn2 rounded font-weight-semibold mb-5">{!! lang('Lancer ma consultation') !!}</button>
					</div>

				</div>
				<a href="javascript:;" class="precedent btn btn-naked btn-icon-left btn-icon-xlg btn-icon-circle btn-icon-solid">
					<i class="btn-icon text-secondary font-size-22 fa fa-chevron-left"></i>
				</a>
			</div>
		</section>
		 
	</form>

	<script type="text/template" id="photo">
        <div class="photo hidden">
            <input type="file" name="photos[]">
            <div class="delete"><i class="fa fa-trash"></i></div>
            <div class="commentaire"><i class="fa fa-plus"></i> <span>{!! lang('Ajouter commentaire') !!}</span></div>
            <textarea placeholder="Ajouter un commentaire" name="commentaire[]"></textarea>
        </div>
    </script>
@endsection

@section('script')
	<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/js/ion.rangeSlider.min.js"></script>
	
	{{-- <script type="text/javascript">window.$crisp=[];window.CRISP_WEBSITE_ID="ed1a1bbc-c80b-4e4c-9028-77e17b3a914e";(function(){d=document;s=d.createElement("script");s.src="https://client.crisp.chat/l.js";s.async=1;d.getElementsByTagName("head")[0].appendChild(s);})();</script> --}}
@endsection

@section('style')
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/css/ion.rangeSlider.min.css"/>
@endsection