@extends('layouts.client')
@php $page_title = 'Mon espace'; @endphp
@section('meta-title','Consultation N° '.$consultation->id )
@section('meta-keywords','')
@section('meta-description','')
@section('content')
<div class="row">
	@if($consultation->resolved_at)
	<div class="col-md-11">
		<div class="row row-eq-heigh">
			
			<div class="col-md-3 col-sm-push-9">
				<div class="panel-question-width"></div>
				<div class="panel p-3 panel-question">
					<label class="mb-30">Objet de la question</label>
					
					<p class="">
						{{ $consultation->objet }}
					</p>
					<hr>
					<label class="mb-30">Question</label>
					<p class="font-size-14">
						{!! $consultation->question !!}
					</p>
				</div>
			</div>
			<div class="col-md-6">
				
				<div class="panel hidden">
					{!! lang('Votre question est en cours de taitement.') !!}
				</div>
				<div class="panel p-3">
					<div class="row">
						@if($consultation->designer)
						<div class="col-auto">
							<img style="width: 50px; object-fit: cover; height: 50px; border-radius: 50%; " src="{{ asset($consultation->designer->photo ?? $consultation->designer->picture) }}" alt="">
						</div>
						<div class="col-auto">
							<p class="mt-2">{!! lang('Question traitée par') !!} {{ $consultation->designer->prenom }} {{ $consultation->resolved_at ? lang('le') : '' }}  <span class="text-capitalize">{{ $consultation->resolved_at ? \Carbon\Carbon::parse( $consultation->resolved_at )->formatLocalized('%d %B %Y') : '' }}</span>.</p>
						</div>
						@else
						<div class="col-auto">
							<img style="width: 50px; object-fit: cover; height: 50px; border-radius: 50%; " src="{{ asset('images/default-user.png')}}" alt="">
						</div>
						<div class="col-auto">
							<p class="mt-2">{!! lang('Question traitée par Admin') !!}</p>
						</div>
						@endif
					</div>
				</div>
				<div class="panel p-3">
					<div class="messages">
						@foreach($consultation->messages as $message)
						@if( $message->sender_id == auth()->id() || $message->visible_to_client == 1 )
						<div class="message {{ $message->sender_id == auth()->id() ? 'mine':'' }}">
							
							<small class="date">{{ $message->created_at }}</small>
							<div class="user">
								<img src="{{ asset($message->user->photo ?? $message->user->picture) }}">
							</div>
							<div>{!! $message->message !!}</div>
						</div>
						@endif
						@endforeach
					</div>
					<form action="{{ route('consulter-un-designer.produit.message', $consultation->id) }}" method="post">
						{{csrf_field()}}
						<div class="form-group">
							<textarea name="message" placeholder="Cette réponse ne vous satisfait pas ? Vous avez une précision à apporter à votre designer ? Vous voulez le remercier ? … Répondez directement à ce message ici" class="form-control w-95 pull-right"></textarea>
						</div>
						<div class="clearfix"></div>
						<div class="text-right pt-3">
							<button class="btn btn-xs btn2 btn-formulaire">{!! lang('Envoyer') !!}</button>
						</div>
					</form>
					
				</div>
				<div class=" p-3">
					<div class="row" data-consultation="{{ $consultation->id }}">
						@foreach( $produits as $produit )
						@if( $produit->visible_to_client )
						<div class="col-lg-4 col-md-6">
							@include('front.components.produit', ['produit'=>$produit->produit,'hideIcons'=>true])
						</div>
						@endif
						@endforeach
					</div>
				</div>
			</div>
			
			<div class="col-md-3 col-sm-pull-9">
				<div class="panel-commander-width"></div>
				<div class="panel p-3 panel-commander">
					
					@include('front.components.commander_vos_produits')
				</div>
			</div>
		</div>
	</div>
	@else
	<div class="col-md-11">
		<div class="row">
			<div class="col-md-3"></div>
			<div class="col-md-6">
				
				<div class="panel">
					<p class="m-0">Votre question est en cours de traitement.</p>
				</div>
			</div>
		</div>
	</div>
	@endif
</div>
@include('front.components.modal-vider-panier')
@endsection