@extends('metronic::layouts.app')

@section('htmlheader_title')
	Order Service
@endsection

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

				<div class="order-page" id="order-page">
					<div class="row">
						<div class="col-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-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">
												<!-- Reseller Choose Client -->
												@if (Auth::user() AND Auth::user()->isReseller())
													<div class="panel panel-default">
														<div class="panel-heading">
															<h4 class="panel-title">
																Account
															</h4>
														</div>

														<div class="panel-collapse">
															<div class="panel-body">
																<div class="col-12 margin-bottom-20">

																	<div class="col-6">
																		<ul class="nav nav-tabs">
																			<li class="active">
																				<a href="#account_exist" data-toggle="tab">Existing Account</a>
																			</li>
																			<li>
																				<a href="#client_new" data-toggle="tab">New Client</a>
																			</li>
																		</ul>

																		<div class="tab-content">
																			<div class="tab-pane row fade in active" id="account_exist">
																				<div class="control-group form-group col-sm-12 {{ $errors->has('account_id') ? 'has-error' : '' }}">
																					<label for="account_id">Client Account</label>
																					<select class="form-control" id="account_id" name="account_id">
																						<option value="">&nbsp;</option>
																						@foreach ($user->all_accounts()->sortBy('name') as $o)
																							<option value="{{ $o->id }}" @if($o->id == old('account_id')) selected @endif>{{ $o->name }}</option>
																						@endforeach
																					</select>
																					<span class="help-block">{{ $errors->first('account_id') }}</span>
																				</div>
																			</div>

																			<div class="tab-pane row fade" id="client_new">
																				<div class="control-group form-group col-sm-12 {{ $errors->has('order_email_manual') ? 'has-error' : '' }}">
																					<label for="order_email_manual">New Client Email</label>
																					<input type="email" class="form-control" id="order_email_manual" name="order_email_manual" placeholder="New Client Email" value="{{ old('order_email_manual') }}">
																					<span class="help-block">{{ $errors->first('order_email_manual') }}</span>
																				</div>
																			</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>

												<!-- Non-Authed User -->
												@elseif (Auth::user())
													<div class="panel panel-default">
														<div class="panel-heading">
															<h4 class="panel-title">
																Account
															</h4>
														</div>

														<div class="panel-collapse">
															<div class="panel-body">
																<div class="col-12 margin-bottom-20">

																	<div class="col-6">
																		<ul class="nav nav-tabs">
																			<li class="active">
																				<a href="#account_exist" data-toggle="tab">Existing Account</a>
																			</li>
																			<li>
																				<a href="#account_new" data-toggle="tab">New Account</a>
																			</li>
																		</ul>

																		<div class="tab-content">
																			<div class="tab-pane row fade in active" id="account_exist">
																				<div class="control-group form-group col-sm-12 {{ $errors->has('account_id') ? 'has-error' : '' }}">
																					<label for="account_id">Existing Account</label>
																					<select class="form-control" id="account_id" name="account_id">
																						<option value="">&nbsp;</option>
																						@foreach ($user->accounts->sortBy('name') as $o)
																							<option value="{{ $o->id }}" @if($o->id == old('account_id')) selected @endif>{{ $o->name }}</option>
																						@endforeach
																					</select>
																					<span class="help-block">{{ $errors->first('account_id') }}</span>
																				</div>
																			</div>

																			<div class="tab-pane row fade" id="account_new">
																				<div class="control-group form-group col-sm-12 {{ $errors->has('account_name') ? 'has-error' : '' }}">
																					<label for="account_name">Account Name</label>
																					<input type="text" class="form-control" id="account_name" name="account_name" placeholder="New Account Name" value="{{ old('order_email_manual') }}" disabled>
																					<span class="help-block">{{ $errors->first('account_name') }}</span>
																				</div>
																			</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>

												<!-- Non-Authed User -->
												@else
													@php
													//dd($errors);
													@endphp
													<div class="panel panel-default">
														<div class="panel-heading">
															<h4 class="panel-title">
																Account
															</h4>
														</div>

														<div class="panel-collapse">
															<div class="panel-body">
																<div class="col-12">
																	<div class="row col-6">
																		<div class="control-group form-group col-sm-12 {{ $errors->has('order_email_manual') ? 'has-error' : '' }}">
																			<label for="order_email_manual">Email Address</label>
																			<input type="email" class="form-control" id="order_email_manual" name="order_email_manual" placeholder="Email Address" value="{{ old('order_email_manual') }}">
																			<span class="help-block">{{ $errors->first('order_email_manual') }}</span>
																		</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-12">
																<div class="control-group form-group col-sm-12 {{ $errors->has('product_options') ? 'has-error' : '' }}">
																	<span class="help-block">{{ $errors->first('product_options') }}</span>
																</div>

																<div class="control-group form-group col-sm-6 {{ $errors->has('product_id') ? 'has-error' : '' }}">
																	<label for="product_id">Product</label>
																	<select class="form-control" id="product_id" name="product_id">
																		<option value="">&nbsp;</option>
																		@php
																			$po = $selected = NULL;
																		@endphp
																		@foreach (\App\Models\Product::active()->get()->sortBy('name') as $o)
																			@php
																				if ($o->id == old('product_id'))
																				{
																					$selected = 'selected';
																					$po = $o;
																				} else {
																					$selected = NULL;
																				}
																			@endphp
																			<option value="{{ $o->id }}" {{ $selected }}>{{ $o->name }}</option>
																		@endforeach
																	</select>
																	<span class="help-block">{{ $errors->first('product_id') }}</span>
																</div>
																<div class="col-sm-6" id="product_info">
																	@if (old('product_id'))
																		@include('widgets.product_description',['o'=>$po])
																	@endif
																</div>
															</div>

															<div class="col-12" id="product_order">
																@if (old('product_id'))
																	@include('widgets.product_order',['o'=>$po])
																@endif
															</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>

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

													<div class="panel-collapse margin-bottom-20">
														<div class="panel-body">
															<div class="col-12">
																<div class="control-group form-group col-sm-12 {{ $errors->has('options.notes') ? 'has-error' : '' }}">
																	<label for="options.notes">Notes</label>
																	<textarea name="options[notes]" class="form-control" rows="4" placeholder="Enter any special instructions...">{{ old('options.notes') }}</textarea>
																	<span class="help-block">{{ $errors->first('options.notes') }}</span>
																</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 pull-right"><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>
		</div>
	</div>
@endsection

@section('page-scripts')
	@js('plugin/jqBootstrapValidation/jqBootstrapValidation.js','jq-validation','jquery')
	@js('//code.jquery.com/ui/1.12.1/jquery-ui.js','jquery-ui-js','jqery')

	<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",
					dataType: "html",
					cache: true,
					url: '{{ url('product_info') }}'+'/'+$(this).val(),
					timeout: 5000,
					error: function(x) {
						alert("Failed to submit");
					},
					success: function(data) {
						$("div[id=product_info]").empty().append(data);
					}
				});

				$.ajax({
					type: "GET",
					// data: "old=",
					dataType: "html",
					cache: true,
					url: '{{ url('product_order') }}'+'/'+$(this).val(),
					timeout: 5000,
					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