@extends('layouts.app')
<!-- <style>
input, input[type="checkbox"] {
	display: inline;
	height: inherit !important;
	width: inherit !important;
}
</style> -->
@section('content')
<div class="">
	{{  Form::open(['url' => 'profile/' . $data['data']->id, 'method' => 'PUT', 'id' => 'update_profile']) }}
    <div class="row justify-content-center">
			@role('contractor')
			<div class="col-md-4">
				<div class="dashboard-box margin-top-25">
					<div class="headline">
						<h3><i class="icon-material-outline-account-circle"></i> My Services</h3>
					</div>
				<div class="content with-padding padding-bottom-0">

					<div class="row">
						<div class="col-auto">
							@foreach($data['services'] as	$service)
								<h4 style="color: #F00;">{{ $service->service }}</h4>
								@foreach($service->active_subservices as $subservice)
								{{ Form::checkbox('services[]', $subservice->id, in_array($subservice->id,$data['user_services']), ['style' => 'display: inline;	height: inherit !important;width: inherit !important; margin-left: 5px']) }}  {{ $subservice->service }}.<br/>
								@endforeach
							@endforeach
						</div>
					</div>

				</div>
			</div>
	</div>
		@endrole

        <div class="col-md-8">
            
					@if (session('status'))
						<div class="alert alert-success" role="alert">
								{{ session('status') }}
						</div>
					@endif

					<div class="col-xl-12">
						<div class="dashboard-box margin-top-25">

							<!-- Headline -->
							<div class="headline">
								<h3><i class="icon-material-outline-account-circle"></i> My Account</h3>
							</div>

							<div class="content with-padding padding-bottom-0">

								<div class="row">

									<div class="col-auto">
										<div class="avatar-wrapper" data-tippy-placement="bottom" title="Change Avatar">
											<img class="profile-pic" src="images/user-avatar-placeholder.png" alt="" />
											<div class="upload-button"></div>
											<input class="file-upload" type="file" accept="image/*"/>
										</div>
									</div>

									<div class="col">
										<div class="row">

											<div class="col-xl-6">
												<div class="submit-field">
													<h5>First Name</h5>
													<input name="first_name" type="text" class="with-border" value="{{ $data['data']->user_information->first_name }}">
												</div>
											</div>

											<div class="col-xl-6">
												<div class="submit-field">
													<h5>Last Name</h5>
													<input name="last_name" type="text" class="with-border" value="{{ $data['data']->user_information->last_name }}">
												</div>
											</div>

											<div class="col-xl-6">
												<!-- Account Type -->
												<div class="submit-field">
													<h5>Account Type</h5>
													<div class="account-type">
														@if($data['data']->registration_type == 3)
														<div>
															<input type="radio" name="account-type-radio" id="freelancer-radio" class="account-type-radio" {{ $data['data']->registration_type == 3? 'checked':'' }}  />
															<label for="freelancer-radio" class="ripple-effect-dark"><i class="icon-material-outline-account-circle"></i> Tradesman</label>
														</div>
														@endif

														@if($data['data']->registration_type == 2)
														<div>
															<input type="radio" name="account-type-radio" id="employer-radio" class="account-type-radio" {{ $data['data']->registration_type == 2? 'checked':'' }} />
															<label for="employer-radio" class="ripple-effect-dark"><i class="icon-material-outline-business-center"></i> Employer</label>
														</div>
														@endif

														@if($data['data']->registration_type == 1)
														<div>
															<input type="radio" name="account-type-radio" id="employer-radio" class="account-type-radio" {{ $data['data']->registration_type == 1? 'checked':'' }} />
															<label for="employer-radio" class="ripple-effect-dark"><i class="icon-material-outline-business-center"></i> Admin</label>
														</div>
														@endif

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

											<div class="col-xl-6">
												<div class="submit-field">
													<h5>Email</h5>
													<input name="email" type="text" class="with-border" value="{{ $data['data']->email }}">
												</div>
											</div>

											@hasanyrole('customer|contractor')
											<div class="col-xl-6">
												<div class="submit-field">
													<h5>Area</h5>
													<select name="area" class="selectpicker with-border" data-size="7" title="Select Area" data-live-search="true">
														@foreach($data['provinces'] as $province)
														<optgroup label="{{ $province->province }}">
															@foreach($province->suburbs as $suburb)
																@foreach($suburb->areas as $area)
																	<option value="{{ $area->id }}" >{{ $area->area }}</option>
																@endforeach
															@endforeach
														</optgroup>
														@endforeach
													</select>
												</div>
											</div>

											<div class="col-xl-6">
												<div class="submit-field">
													<h5>Operating Hours / Availablity</h5>
													<input name="operating_hours" type="text" class="with-border" value="{{ $data['data']->user_information->operating_hours }}">
												</div>
											</div>
										@endrole

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

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

				@hasanyrole('customer|contractor')
				
				<div class="col-xl-12">
					<div class="dashboard-box">

						<!-- Headline -->
						<div class="headline">
							<h3><i class="icon-material-outline-face"></i> My Profile</h3>
						</div>

						<div class="content">
							<ul class="fields-ul">
							<li>
								<div class="row">
									<div class="col-xl-4">
										<div class="submit-field">
											<div class="bidding-widget">
												<!-- Headline -->
												<span class="bidding-detail">Set your <strong>minimal hourly rate</strong></span>

												<!-- Slider -->
												<div class="bidding-value margin-bottom-10">R <span id="biddingVal"></span></div>
												<input name="hourly_rate" class="bidding-slider" type="text" value="{{ $data['data']->user_information->hourly_rate }}" data-slider-handle="custom" data-slider-currency="R" data-slider-min="5" data-slider-max="150" data-slider-value="{{ $data['data']->user_information->hourly_rate?? 0 }}" data-slider-step="1" data-slider-tooltip="hide" />
											</div>
										</div>
									</div>

									<div class="col-xl-4">
										<div class="submit-field">
											<h5>Skills <i class="help-icon" data-tippy-placement="right" title="Add up to 10 skills"></i></h5>

											<!-- Skills List -->
											<div class="keywords-container">
												<div class="keyword-input-container">
													<input type="text" class="keyword-input with-border" placeholder="e.g. Angular, Laravel"/>
													<button class="keyword-input-button ripple-effect"><i class="icon-material-outline-add"></i></button>
												</div>
												<div class="keywords-list">
													<span class="keyword"><span class="keyword-remove"></span><span class="keyword-text">Angular</span></span>
													<span class="keyword"><span class="keyword-remove"></span><span class="keyword-text">Vue JS</span></span>
													<span class="keyword"><span class="keyword-remove"></span><span class="keyword-text">iOS</span></span>
													<span class="keyword"><span class="keyword-remove"></span><span class="keyword-text">Android</span></span>
													<span class="keyword"><span class="keyword-remove"></span><span class="keyword-text">Laravel</span></span>
												</div>
												<div class="clearfix"></div>
											</div>
										</div>
									</div>

									<div class="col-xl-4">
										<div class="submit-field">
											<h5>Attachments</h5>
											
											<!-- Attachments -->
											<div class="attachments-container margin-top-0 margin-bottom-0">
												<div class="attachment-box ripple-effect">
													<span>Cover Letter</span>
													<i>PDF</i>
													<button class="remove-attachment" data-tippy-placement="top" title="Remove"></button>
												</div>
												<div class="attachment-box ripple-effect">
													<span>Contract</span>
													<i>DOCX</i>
													<button class="remove-attachment" data-tippy-placement="top" title="Remove"></button>
												</div>
											</div>
											<div class="clearfix"></div>
											
											<!-- Upload Button -->
											<div class="uploadButton margin-top-0">
												<input class="uploadButton-input" type="file" accept="image/*, application/pdf" id="upload" multiple/>
												<label class="uploadButton-button ripple-effect" for="upload">Upload Files</label>
												<span class="uploadButton-file-name">Maximum file size: 10 MB</span>
											</div>

										</div>
									</div>
								</div>
							</li>
							<li>
								<div class="row">
									<div class="col-xl-6">
										<div class="submit-field">
											<h5>Tagline</h5>
											<input type="text" class="with-border" value="iOS Expert + Node Dev">
										</div>
									</div>

									<div class="col-xl-6">
										<div class="submit-field">
											<h5>Nationality</h5>
											<select class="selectpicker with-border" data-size="7" title="Select Job Type" data-live-search="true">
												<option value="AR">Argentina</option>
												<option value="AM">Armenia</option>
												<option value="AW">Aruba</option>
												<option value="AU">Australia</option>
												<option value="AT">Austria</option>
												<option value="AZ">Azerbaijan</option>
												<option value="BS">Bahamas</option>
												<option value="BH">Bahrain</option>
												<option value="BD">Bangladesh</option>
												<option value="BB">Barbados</option>
												<option value="BY">Belarus</option>
												<option value="BE">Belgium</option>
												<option value="BZ">Belize</option>
												<option value="BJ">Benin</option>
												<option value="BM">Bermuda</option>
												<option value="BT">Bhutan</option>
												<option value="BG">Bulgaria</option>
												<option value="BF">Burkina Faso</option>
												<option value="BI">Burundi</option>
												<option value="KH">Cambodia</option>
												<option value="CM">Cameroon</option>
												<option value="CA">Canada</option>
												<option value="CV">Cape Verde</option>
												<option value="KY">Cayman Islands</option>
												<option value="CO">Colombia</option>
												<option value="KM">Comoros</option>
												<option value="CG">Congo</option>
												<option value="CK">Cook Islands</option>
												<option value="CR">Costa Rica</option>
												<option value="CI">Côte d'Ivoire</option>
												<option value="HR">Croatia</option>
												<option value="CU">Cuba</option>
												<option value="CW">Curaçao</option>
												<option value="CY">Cyprus</option>
												<option value="CZ">Czech Republic</option>
												<option value="DK">Denmark</option>
												<option value="DJ">Djibouti</option>
												<option value="DM">Dominica</option>
												<option value="DO">Dominican Republic</option>
												<option value="EC">Ecuador</option>
												<option value="EG">Egypt</option>
												<option value="GP">Guadeloupe</option>
												<option value="GU">Guam</option>
												<option value="GT">Guatemala</option>
												<option value="GG">Guernsey</option>
												<option value="GN">Guinea</option>
												<option value="GW">Guinea-Bissau</option>
												<option value="GY">Guyana</option>
												<option value="HT">Haiti</option>
												<option value="HN">Honduras</option>
												<option value="HK">Hong Kong</option>
												<option value="HU">Hungary</option>
												<option value="IS">Iceland</option>
												<option value="IN">India</option>
												<option value="ID">Indonesia</option>
												<option value="NO">Norway</option>
												<option value="OM">Oman</option>
												<option value="PK">Pakistan</option>
												<option value="PW">Palau</option>
												<option value="PA">Panama</option>
												<option value="PG">Papua New Guinea</option>
												<option value="PY">Paraguay</option>
												<option value="PE">Peru</option>
												<option value="PH">Philippines</option>
												<option value="PN">Pitcairn</option>
												<option value="PL">Poland</option>
												<option value="PT">Portugal</option>
												<option value="PR">Puerto Rico</option>
												<option value="QA">Qatar</option>
												<option value="RE">Réunion</option>
												<option value="RO">Romania</option>
												<option value="RU">Russian Federation</option>
												<option value="RW">Rwanda</option>
												<option value="ZA" selected>South African</option>
												<option value="SZ">Swaziland</option>
												<option value="SE">Sweden</option>
												<option value="CH">Switzerland</option>
												<option value="TR">Turkey</option>
												<option value="TM">Turkmenistan</option>
												<option value="TV">Tuvalu</option>
												<option value="UG">Uganda</option>
												<option value="UA">Ukraine</option>
												<option value="GB">United Kingdom</option>
												<option value="US">United States</option>
												<option value="UY">Uruguay</option>
												<option value="UZ">Uzbekistan</option>
												<option value="YE">Yemen</option>
												<option value="ZM">Zambia</option>
												<option value="ZW">Zimbabwe</option>
											</select>
										</div>
									</div>

									<div class="col-xl-12">
										<div class="submit-field">
											<h5>Introduce Yourself</h5>
											<textarea name="information" cols="30" rows="5" class="with-border">{{ $data['data']->user_information->information ?? 'Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.'}}</textarea>
										</div>
									</div>

								</div>
							</li>
						</ul>
						</div>
					</div>
				</div>
				@endrole
				<!-- Dashboard Box -->
				<div class="col-xl-12">
					<div id="test1" class="dashboard-box">

						<!-- Headline -->
						<div class="headline">
							<h3><i class="icon-material-outline-lock"></i> Password & Security</h3>
						</div>

						<div class="content with-padding">
							<div class="row">
								<div class="col-xl-4">
									<div class="submit-field">
										<h5>Current Password</h5>
										<input type="password" class="with-border">
									</div>
								</div>

								<div class="col-xl-4">
									<div class="submit-field">
										<h5>New Password</h5>
										<input type="password" class="with-border">
									</div>
								</div>

								<div class="col-xl-4">
									<div class="submit-field">
										<h5>Repeat New Password</h5>
										<input type="password" class="with-border">
									</div>
								</div>

								<!-- <div class="col-xl-12">
									<div class="checkbox">
										<input type="checkbox" id="two-step" checked>
										<label for="two-step"><span class="checkbox-icon"></span> Enable Two-Step Verification via Email</label>
									</div>
								</div> -->
							</div>
						</div>
					</div>
				</div>
				

				<div class="col-xl-12">
	 				{{  Form::submit('Save Changes', ['class'=>'button ripple-effect big margin-top-30']) }}
				</div>

				</div>
		</div>
</div>
@endsection