@extends('layouts.quiz')
@php 
$page_title = 'Question Design'; 
$no_full_title=1;
@endphp
@section('meta-title','Consulter un décorateur | Pipcke – Décoration d’intérieur')
@section('meta-keywords','')
@section('meta-description','Sélectionnez le thème de votre question et parlez nous de votre besoin afin de consulter un décorateur qui pourra vous aider sur votre projet.')
@section('content')

@section('meta')

<meta property="og:url"           content="{{ request()->url() }}" />
<meta property="og:type"          content="website" />
<meta property="og:title"         content="Consulter un décorateur | Pipcke – Décoration d’intérieur" />
<meta property="og:description"   content="Sélectionnez le thème de votre question et parlez nous de votre besoin afin de consulter un décorateur qui pourra vous aider sur votre projet." />
<meta name="description"      	  content="Sélectionnez le thème de votre question et parlez nous de votre besoin afin de consulter un décorateur qui pourra vous aider sur votre projet." />
<meta property="fb:app_id" 		  content="730800570418065">

@endsection

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


<div class="navbar">
	<div class="row w-100">
		<div class="col-auto">
			<a class="brand" href="{{ route('home') }}" rel="home">
				<img class="logo-default" src="{{ asset('img/picto.png') }}" alt="Pipcke">
			</a>
		</div>
		<div class="col-auto">
			<div class="title">{!! lang('Thème') !!}</div>
		</div>
		<div class="col"></div>
		<div class="col-auto">
			<a href="{{ route('home') }}" class="quitter">{!! lang('Quitter') !!}</a>
		</div>
	</div>
	<div class="progressbar">
		<div class="liquid-progressbar liquid-progressbar-sm" data-progressbar="true" data-progressbar-options='{"value":20 }'>
			<div class="liquid-progressbar-inner">
				<span class="liquid-progressbar-bar"> 
				</span>
			</div>
		</div>
	</div>
</div>
<form name="consulter-un-designer-form" method="post" action="{{route( 'consulter-un-designer.post' )}}">
	{{ csrf_field() }}
	<section id="step1" data-title="Thème">
		<div>
			<div class="container text-center">
				<h1 class="mb-50 poppins" style="font-size: 25px !important;padding-top: 30px;">{!! lang('Commencez par sélectionner le thème de votre question') !!}</h1>
				<div class="themes">
					
					<div class="col-md-4">
						<label class="theme">
							<input type="radio" name="theme" value="Agencement">
							<div class="icon">
								<img src="{{ asset('assets/consulter-designer/pictos/pipcke-consult-designer-layout.svg') }}" alt="">
							</div>
							{!! lang('Agencement') !!}
						</label>
					</div>
					
					<div class="col-md-4">
						<label class="theme">
							<input type="radio" name="theme" value="Décoration">
							<div class="icon">
								<img src="{{ asset('assets/consulter-designer/pictos/pipcke-consult-designer-decoration.svg') }}" alt="">
							</div>
							{!! lang('Décoration') !!}
						</label>
					</div>
					
					<div class="col-md-4">
						<label class="theme">
							<input type="radio" name="theme" value="Éclairage">
							<div class="icon">
								<img src="{{ asset('assets/consulter-designer/pictos/pipcke-consult-designer-lighting.svg') }}" alt="">
							</div>
							{!! lang('Éclairage') !!}
						</label>
					</div>
					
					<div class="col-md-4">
						<label class="theme">
							<input type="radio" name="theme" value="Mur et/ou sols">
							<div class="icon">
								<img src="{{ asset('assets/consulter-designer/pictos/pipcke-consult-designer-wall-floor.svg') }}" alt="">
							</div>
							{!! lang('Mur et/ou sols') !!}
						</label>
					</div>
					
					<div class="col-md-4">
						<label class="theme">
							<input type="radio" name="theme" value="Mobilier">
							<div class="icon">
								<img src="{{ asset('assets/consulter-designer/pictos/pipcke-consult-designer-furniture.svg') }}" alt="">
							</div>
							{!! lang('Mobilier') !!}
						</label>
					</div>
					
					<div class="col-md-4">
						<label class="theme">
							<input type="radio" name="theme" value="Autre">
							<div class="icon">
								<img src="{{ asset('assets/consulter-designer/pictos/pipcke-consult-designer-other-item.svg') }}" alt="">
							</div>
							{!! lang('Autre') !!}
						</label>
					</div>
				</div>
			</div>
		</div>
	</section>
	<section id="step2" data-title="Question" class="hidden">
		<div>
			<fieldset class="container text-center">
				<h2 class="mb-50 poppins" style="font-size: 25px !important;">{!! lang('En quoi est-ce que nos architectes d’intérieur peuvent vous aider ?') !!}</h2>
				<div class="informations text-left">
					
					<div class="form-group">
						<label for="" class="font-weight-normal font-size-18">{!! lang('Objet') !!} *</label>
						<input type="text" name="objet" required="" class="form-control" placeholder="Exemple : Choix de canapé pour mon séjour">
					</div>
					<div class="form-group">
						<label for="" class="font-weight-normal font-size-18">{!! lang('Question') !!} *</label>
						<textarea class="form-control" name="question" required="" rows="15" placeholder="Posez votre question ici. Pensez à fournir le maximum d'informations (dimensions, contraintes...)"></textarea>
					</div>
					<div class="text-left mb-20">
						<small class="">* {!! lang('Champ obligatoire') !!}</small>
					</div>
				</div>
			</fieldset>
			<a href="#" 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="#" 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="Photos et inspirations" class="hidden">
		<div>
			<div class="container">
				<h2 class="mb-50 text-center poppins" style="font-size: 25px !important;">{!! lang('Téléchargez vos photos et liens <small class="text-muted">(facultatif)</small>') !!}</h2>
				<h3 class="font-size-18 Poppins">
					{!! lang('Prenez des photos (de votre espace, objets …) pour aider nos architectes d’intérieur à mieux comprendre votre besoin.') !!}
					<br><small class="text-muted">{!! lang('(Formats de fichiers acceptés JPEG et PNG. Taille maximale à respecter 8Mo)') !!}</small>
				</h3>
				<div class="text-left">
					
					<div action="/file-upload" id="dropzone" class="dropzone mb-30" >
						<div class="dz-message" data-dz-message>
							<i class="fa fa-camera font-size-40"></i> <br><br>
							<span>{!! lang("Cliquez sur l'icône pour télécharger vos photos ou glissez-les directement") !!}</span>
						</div>
						<div class="fallback">
							<input name="file" type="file" multiple />
						</div>
					</div>
					
					<h3 class="font-size-18 Poppins">
						{!! lang('Partagez avec nous, si besoin, des liens internet (Pinterest, sites marchands…) en rapport avec votre consultation.') !!}
					</h3>
					<div class="form-group liens">
						<div class="row lien">
							<div class="col-md-12">
								<input type="url" name="lien[]" class="form-control" placeholder="Copiez-collez vos liens ici">
								<div class="delete"><i class="fa fa-trash"></i></div>
							</div> 
						</div>
						<script type="text/template" id="lien-template">
							<div class="row lien">
									<div class="col-md-12">
										<input type="url" name="lien[]" class="form-control" placeholder="Copiez-collez vos liens ici">
										<div class=" delete"><i class="fa fa-trash"></i></div>
									</div>
								</div>
						</script>
					</div>
				</div>
				
			</div>
			<a href="#" 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="#" 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="Styles"  class="hidden">
		<div>
			<div class="container text-center">
				<h2 class="mb-50 poppins" style="font-size: 25px !important;"> {!! lang('Quel style vous correspond le mieux ? <small>(Plusieurs choix possibles)</small>') !!}</h2>
				
				
				 

				<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-50 mt-20">
					<a href="#" class="suivant-link text-underline">{!! lang('Aucun de ces styles ne m’attire >') !!}</a>
				</div>
			</div>
			<a href="#" 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="#" 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 text-center">
				<h4 class="mb-50 poppins">{!! lang('Quel est votre budget pour ce projet ?') !!}</h4>
				
				<div class="budgets">
					<label class="budget">
						<input type="radio" name="budget_consultation" value="Moins de 100 €">
						<span>{!! lang('Moins de 100 €') !!}</span>
					</label>
					<label class="budget">
						<input type="radio" name="budget_consultation" value="Entre 100 € et 400 €">
						<span>{!! lang('Entre 100 € et 400 €') !!}</span>
					</label>
					<label class="budget">
						<input type="radio" name="budget_consultation" value="Entre 400 € et 1 000 €">
						<span>{!! lang('Entre 400 € et 1 000 €') !!}</span>
					</label>
					<label class="budget">
						<input type="radio" name="budget_consultation" value="Plus de 1 000 €">
						<span>{!! lang('Plus de 1 000 €') !!}</span>
					</label>
				</div>
				<div class="text-cemter pt-5 mt-5">
					<button class="btn btn-sm btn2 rounded font-weight-semibold">{!! lang('Envoyer ma question') !!}</button>
				</div>
			</div>
			<a href="#" 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>
@endsection
@section('script')
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script>
<script src="{{ asset('js/dropzone.js') }}"></script>
@endsection