@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>
				@if ($errors->count())<h4><span class="note-danger">There were errors with your order, please try again.</span></h4>@endif
				<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 ($user && $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->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 next">Next</button></div>
																</div>
															</div>
														</div>
													</div>

												<!-- Non-Authed User -->
												@elseif ($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
													<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="row">
																<div class="col-sm-6">
																	<div class="control-group form-group {{ $errors->has('product_options') ? 'has-error' : '' }}">
																		<span class="help-block">{{ $errors->first('product_options') }}</span>
																	</div>

																	<div class="control-group form-group {{ $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>

																<div class="col-sm-6" id="product_info">
																	@if (old('product_id'))
																		@include('order.widget.info',['o'=>$po])
																	@endif
																</div>
															</div>

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

												<!-- 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...
For new ADSL/VOIP services please include the physical address for the requested service.
DO NOT request making changes to an active service here, it will not be processed.">{{ 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>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
@endsection

@section('page-scripts')
	<!-- @todo change to blade service provider -->
	@themejs('plugin/jqBootstrapValidation/jqBootstrapValidation.js','jq-validation','jquery')
	@themejs('//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