@extends('layouts.quiz')
@php $page_title = 'Complétez votre Brief'; @endphp
@section('meta-title',$page_title)
@section('meta-keywords','')
@section('meta-description','')
@section('body-class','brief')
@section('content')

<div class="navbar">
	<div class="row w-100">
		<div class="col-auto">
			<a class="brand" href="{{ route('client.dashboard') }}" rel="home">
				<img class="logo-default" src="{{ asset('img/picto-primary.svg') }}" alt="Pipcke">
			</a>
		</div>
		<div class="col-auto">
			<div class="pt-3" style="text-transform: capitalize;">{{ $projet->nom ?? $projet->espace }}</div>
		</div>
		<div class="col"></div>
		<div class="col-auto pt-2">
        	@if($projet->Lancer_esquisse==0)
				<a href="{{ route('experience_achat.completez_brief', $projet->id ?? $projet_id) }}" id="btnSaveBrief" class="btn btn-xs btn4">{!! lang('Enregistrer et quitter') !!}</a>
				<div id="btnValiderBrief" class="btn btn-xs btn2 mr-3">{!! lang('Valider') !!}</div>
			@else
				<a id="btnValiderBrief" href="{{ route('client.espace_collaboration.index', $projet->id ?? $projet_id) }}" class="btn btn-xs btn2 mr-3">{!! lang('Valider') !!}</a>
			@endif
		</div>
	</div>
	<div class="progressbar">
		<div class="liquid-progressbar liquid-progressbar-sm" data-progressbar="true" data-progressbar-options='{"value":{{$level??0}} }'>
			<div class="liquid-progressbar-inner">
				<span class="liquid-progressbar-bar"></span>

			</div>
		</div>
	</div>
</div>
<form name="consulter-un-designer-form" id="brief" data-projet="{{ $projet->id }}" method="put" action="{{route( 'client.brief.update', $projet->id )}}" enctype="multipart/form-data">
	{{ csrf_field() }}
	<section>
		<div class="container-fluid">
			<div class="row">
				<div class=" col1 pt-4" style="width: 295px">
					<div class="menu-sticky" style="width: 275px"></div>
					<div class="menu menu-brief">
						<ul>
							<li data-target="projet" class="active"> <img src="{{ asset('assets/brief/objectif.png') }}"> {!! lang('PROJET') !!} </li>
							@if ($projet->type == "pro")
								<li data-target="activite" > 		 <img src="{{ asset('assets/brief/personnalite.png') }}"> {!! lang('ACTIVITÉ') !!}</li>
							@else
								<li data-target="personnalite" > 		 <img src="{{ asset('assets/brief/personnalite.png') }}"> {!! lang('PERSONNALITÉ') !!}</li>
							@endif
							<li data-target="gouts-et-couleurs" >      <img src="{{ asset('assets/brief/gout-couleur.png') }}"> {!! lang('GOÛTS ET COULEURS') !!}</li>
							<li data-target="inspirations" > 		 <img src="{{ asset('assets/brief/inspiration.png') }}"> {!! lang('INSPIRATIONS') !!}</li>
							<li data-target="budget" > 				 <img src="{{ asset('assets/brief/budget.png') }}"> {!! lang('BUDGET') !!}</li>
							<li data-target="etat-des-lieux" > 		 <img src="{{ asset('assets/brief/lieux.png') }}"> {!! lang('ETAT DES LIEUX') !!}</li>
						</ul>
					</div>
				</div>
				<div class="col col2 pt-4">
					<div class="box">
						
						<div class="panel panel-projet ">
							@include('partials.brief.1_projet')
						</div>
						@if ($projet->type == "pro")
							<div class="panel panel-activite hidden">
								@include('partials.brief.2_personnalite')
							</div>
						@else
							<div class="panel panel-personnalite hidden">
								@include('partials.brief.2_personnalite')
							</div>
						@endif
						
						<div  class="panel panel-gouts-et-couleurs hidden">
							@include('partials.brief.3_gout-et-couleur')
						</div>
						<div class="panel panel-inspirations hidden">
							@include('partials.brief.4_inspirations')
						</div>
						<div class="panel panel-budget hidden">
							@include('partials.brief.5_budget')
						</div>
						<div class="panel panel-etat-des-lieux hidden">
							@include('partials.brief.6_etat-des-lieux')
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
</form>
@endsection
@section('style')
<style>
	.jq-stars {
	display: inline-block;
	}
	.jq-rating-label {
	font-size: 22px;
	display: inline-block;
	position: relative;
	vertical-align: top;
	font-family: helvetica, arial, verdana;
	}
	.jq-star {
	width: 100px;
	height: 100px;
	display: inline-block;
	cursor: pointer;
	}
	.jq-star-svg {
	padding-left: 3px;
	width: 100%;
	height: 100% ;
	}
	.jq-star:hover .fs-star-svg path {
	}
	.jq-star-svg path {
	/* stroke: #000; */
	stroke-linejoin: round;
	}
	/* un-used */
	.jq-shadow {
	-webkit-filter: drop-shadow( -2px -2px 2px #888 );
	filter: drop-shadow( -2px -2px 2px #888 );
	}
</style>
@endsection
@section('script')
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/css/ion.rangeSlider.min.css"/>



	<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/js/ion.rangeSlider.min.js"></script>
	<script src="{{ asset('js/jquery.star-rating-svg.min.js') }}"></script>
	<script>
		jQuery(document).ready(function($) {
			$(".rating").starRating({
				starSize: 25,
				disableAfterRate:0,
				callback: function(currentRating, $el){
					$($el).next().val(currentRating);
				}
			});
			$(".js-range-slider").ionRangeSlider({
				max_postfix: " +",
				step: 10
			});

		});
	</script>
	 
@endsection