@extends('layouts.layout')

@section('content')

<!-- SHOP CONTENT -->
		<section id="content" style="padding-bottom: 0px; margin-bottom: 0px;">
			<div class="content-blog">
				<div class="container">
					<div class="row">
						<div class="page_header text-center">
							<h2>Shop</h2>
							<p>Get the best kit for smooth shave</p>
						</div>

						<div class="col-md-10 col-md-offset-1">

							<div class="row">
								<div class="col-md-5">
									<div class="gal-wrap">
										<div id="gal-slider" class="flexslider">
											<ul class="slides">
                                                <li><img src="{{$tattoo->imagePath}}" class="img-responsive" alt="" /></li>
                                                @foreach ($tattoo->images as $image)
                                                    <li><img src="{{url($image)}}" class="img-responsive" alt="" /></li>
                                                @endforeach
											</ul>
										</div>
										<ul class="gal-nav">
                                            <li>
                                                <div>
                                                    <img src="{{$tattoo->imagePath}}" class="img-responsive" alt="" />
                                                </div>
                                            </li>

                                            @foreach ($tattoo->images as $image)
                                                <li>
                                                    <div>
                                                        <img src="{{url($image)}}" class="img-responsive" alt="" />
                                                    </div>
                                                </li>
                                            @endforeach

										</ul>
										<div class="clearfix"></div>

									</div>
								</div>
								<div class="col-md-7 product-single">
									<h2 class="product-single-title no-margin">{{$tattoo->name}}</h2>
									<div class="space10"></div>
									<div class="p-price">{{$tattoo->price . ' ' . $tattoo->currency}}</div>
									<p>{!! $tattoo->description !!}</p>

								</div>
							</div>
							<div class="clearfix "></div>

							<section id="content" style="margin-bottom: 0px;">
								<div class="content-blog">
									<div class="container">
										<div class="row">
											<div class="page_header text-center">
												<h3>Order Now</h3>
											</div>
											<div class="col-md-12 margin30">
												<div class="form-contact">
													<form id="contactForm" action="{{route('make.order',$tattoo)}}" method="post">@csrf
														<div class="row">
															<div class="col-md-6">
																<div class="row control-group">
																	<div class="form-group col-xs-12 controls">
																		<input class="form-control" name="name" value="{{old('name')}}" id="senderName" type="text" placeholder="Name" required="required" />
																		<x-errors.validation-error name="name"/>
																	</div>
																</div>
															</div>
															<div class="col-md-6">
																<div class="row control-group">
																	<div class="form-group col-xs-12 controls">
																		<input class="form-control" type="email" name="email" value="{{old('email')}}" id="senderEmail" placeholder="Email Address" required="required"/>
                                                                        <x-errors.validation-error name="email"/>
																	</div>
																</div>
															</div>

															<div class="col-md-12">
																<div class="row control-group">
																	<div class="form-group col-xs-12 controls">
																		<textarea rows="7" class="form-control" name="message" id="message" placeholder="Message">{{old('message')}}</textarea>
                                                                        <x-errors.validation-error name="message"/>
																	</div>
																</div>
															</div>
														</div>
														<div class="row">
															<div class="form-group col-xs-12">
																<button type="submit" class="button btn-lg">Send Message</button>
															</div>
														</div>
													</form>
													<div id="sendingMessage" class="statusMessage">
														<p><i class="fa fa-spin fa-spinner"></i> Sending your message. Please wait...</p>
													</div>
													<div id="successMessage" class="successmessage">
														<p><i class="fa fa-check"></i> Thanks for sending your message! We'll get back to you shortly.</p>
													</div>
													<div id="failureMessage" class="errormessage">
														<p><i class="fa fa-close"></i> There was a problem sending your message. Please try again.</p>
													</div>
													<div id="incompleteMessage" class="statusMessage">
														<p><i class="fa fa-warning"></i> Please complete all the fields in the form before sending.</p>
													</div>
												</div>
												<!--contact form-->
											</div>

										</div>
									</div>
								</div>
							</section>

						</div>
					</div>
				</div>
			</div>
		</section>
@stop