@extends('layouts.app')

@section('htmlheader_title')
	{{ trans('message.home') }}
@endsection

@section('main-content')
	<div class="col-md-12">
		<h1>Order Service</h1>

		<div class="order-page" id="order-page">
			<div class="row">
				<div class="col-md-3">
					<ul class="tabbable faq-tabbable">
						<li class="active">
							<a href="#order_1" data-toggle="tab" aria-expanded="true">Order Service</a>
						</li>
					</ul>
				</div>

				<div class="col-md-9">
					<div class="tab-content" style="padding:0; background: #fff;">
						<div class="tab-pane active" id="order_1">
							<div class="panel-group" id="accordion1">
								<form role="form" method="POST" enctype="multipart/form-data">
									{{ csrf_field() }}

									<div id="accordion">
										<!-- User -->
										<div class="panel panel-default">
											<div class="panel-heading">
												<h4 class="panel-title">Register or Sign In</h4>
											</div>

											<div class="panel-collapse">
												<div class="panel-body">
													<div class="col-md-12">
														@if (Auth::user())
															{{ Auth::user()->name }}
														@else
															<a href="{{ url('login') }}">Login</a>
														@endif
													</div>

													<div class="row">
														<div class="col-sm-2"><button class="btn btn-block btn-primary next">Next</button></div>
													</div>
												</div>

											</div>
										</div>

										<!-- Reseller Choose Client -->
										@if ($user->isReseller())
											<div class="panel panel-default">
												<div class="panel-heading">
													<h4 class="panel-title">
															Client
													</h4>
												</div>

												<div class="panel-collapse">
													<div class="panel-body">
														<div class="col-md-12">
															<div class="col-md-6">

																<ul class="nav nav-tabs">
																	<li class="active">
																		<a href="#tab_1" data-toggle="tab">New Client</a>
																	</li>
																	<li>
																		<a href="#tab_2" data-toggle="tab">Existing Client</a>
																	</li>
																</ul>

																<div class="tab-content">
																	<div class="tab-pane row fade in active" id="tab_1">
																		<div class="control-group form-group col-sm-12 {{ $errors->has('order_email') ? 'has-error' : '' }}">
																			<label for="order_email">New Client Email</label>
																			<input type="email" class="form-control" id="order_email" name="order_email" placeholder="New Client Email" value="{{ old('order_email') }}">
																			<span class="help-block">{{ $errors->first('order_email') }}</span>
																		</div>
																	</div>

																	<div class="tab-pane row fade" id="tab_2">
																		<div class="control-group form-group col-sm-12 {{ $errors->has('order_email') ? 'has-error' : '' }}">
																			<label for="order_email">Client Account</label>
																			<select class="form-control" id="order_email" name="order_email" value="{{ old('order_email') }}">
																				<option value="">&nbsp;</option>
																				@foreach ($user->all_clients()->sortBy('sur_first_name') as $o)
																					<option value="{{ $o->email }}">{{ $o->sur_first_name }}</option>
																				@endforeach
																			</select>
																			<span class="help-block">{{ $errors->first('order_email') }}</span>
																		</div>

																		<!-- Account -->
																		@if (FALSE AND Auth::user()->isBusiness())
																			<div class="panel panel-default">
																				<div class="panel-heading">
																					<h4 class="panel-title">
																						<a href="#accordion1_2" data-parent="#accordion1" class="accordion-toggle">
																							Account
																						</a>
																					</h4>
																				</div>

																				<div class="panel-collapse collapse" id="accordion1_2">
																					<div class="panel-body">
																					</div>
																				</div>
																			</div>
																		@endif
																	</div>

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

														<div class="row">
															<div class="col-sm-2"><button class="btn btn-block btn-primary">Previous</button></div>
															<div class="col-sm-2"><button class="btn btn-block btn-primary next">Next</button></div>
														</div>
													</div>
												</div>
											</div>
										@endif

										<!-- Product -->
										<div class="panel panel-default">
											<div class="panel-heading">
												<h4 class="panel-title">Product</h4>
											</div>

											<div class="panel-collapse margin-bottom-20">
												<div class="panel-body">
													<div class="col-md-12">
														<div class="control-group form-group col-sm-6 {{ $errors->has('product_id') ? 'has-error' : '' }}">
															<label for="order_email">Product</label>
															<select class="form-control" id="product_id" name="product_id" value="{{ old('product_id') }}">
																<option value="">&nbsp;</option>
																@foreach (\App\Models\Product::active()->get()->sortBy('name') as $o)
																	<option value="{{ $o->id }}">{{ $o->name }}</option>
																@endforeach
															</select>
															<span class="help-block">{{ $errors->first('product_id') }}</span>
														</div>
														<div class="col-sm-6" id="product_info"></div>
													</div>

													<div class="col-md-12" id="product_order"></div>

													<div class="row">
														<div class="col-sm-2"><button class="btn btn-block btn-primary">Previous</button></div>
													</div>

													<div class="row">
														<div class="col-sm-2"><input type="submit" class="btn btn-block btn-primary" value="Submit Order"></div>
													</div>
												</div>
											</div>

										</div>
									</div>
								</form>
							</div>
						</div>

						<div class="tab-pane" id="tab-2">
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
@endsection

@section('page-scripts')
	@js('/js/jqBootstrapValidation.js','jq-validation','jquery')
	<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

	<script>
		$(function () { $("input,select,textarea").not("[type=submit]").jqBootstrapValidation(); } );

		$(document).ready(function () {
			$('#accordion').accordion({
				header: "> div > div",
				collapsible: false,
				heightStyle: 'content',
				disabled: true
			});

			$('#accordion button').click(function (e) {
				e.preventDefault();
				e.stopPropagation();
				var delta = ($(this).is('.next') ? 2 : -2);
				$('#accordion').accordion('option', 'active', ($('#accordion').accordion('option', 'active') + delta));
			});

			$("select[name=product_id]").change(function() {
				// If we select a blank, then dont continue
				if (this.value == 0)
					return false;

				// Send the request and update sub category dropdown
				$.ajax({
					type: "GET",
					//data: "key="+$(this).val(),
					dataType: "html",
					cache: true,
					url: '{{ url('product_info') }}'+'/'+$(this).val(),
					timeout: 3000,
					error: function(x) {
						alert("Failed to submit");
					},
					success: function(data) {
						$("div[id=product_info]").empty().append(data);
					}
				});

				$.ajax({
					type: "GET",
					//data: "key="+$(this).val(),
					dataType: "html",
					cache: true,
					url: '{{ url('product_order') }}'+'/'+$(this).val(),
					timeout: 3000,
					error: function(x) {
						alert("Failed to submit");
					},
					success: function(data) {
						$("div[id=product_order]").empty().append(data);
					}
				});
			});
		});
	</script>

	<style>
		span.help-block > ul {
			color: #9d0000;
			padding-left: 5px;
			list-style-type: none;
		}
	</style>
@append