@extends('user.user_panal.layouts.main')
@section('content')

<!--**********************************
            Content body start
        ***********************************-->
<style>
	.city_select ul {
		height: 50vh !important;
		overflow: auto !important;
	}
	.author-profile .author-media img {
    width: 130px;
    height: 130px;
    border-radius: 100%;
}
</style>
<div class="content-body">
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<!-- row -->
	<div class="container-fluid">
		<!-- row -->
		<form class="profile-form" action="{{ route('userPanal_editProfile_update') }}" method="POST" enctype="multipart/form-data">
			@csrf
			<div class="row">
				<div class="col-xl-3 col-lg-4">
					<div class="clearfix">
						<div class="card card-bx profile-card author-profile m-b30">
							<div class="card-body">
								<div class="p-5">
									<div class="author-profile">
										<div class="author-media">
																					<img src="{{ $image }}" alt="">
											<div class="upload-link" title="" data-toggle="tooltip" data-placement="right" data-original-title="update">
												<input type="file" class="update-flie" name="image">
												<i class="fa fa-camera"></i>
											</div>
										</div>
										<div class="author-info">
											<h6 class="title">{!! $user->name ?? '' !!}</h6>
											<span>{!! $user->specialty ?? '' !!}</span>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-xl-9 col-lg-8">
					<div class="card profile-card card-bx m-b30">
						<div class="card-header">
							<h6 class="title">Account setup</h6>
						</div>

						<div class="card-body">
							<div class="row">
								<input type="hidden" value="{!! $user->id ?? '' !!}" name="id">
								<div class="col-sm-6 m-b30">
									<label class="form-label">Name</label>
									<input type="text" class="form-control" value="{!! $user->name ?? '' !!}" name="name" placeholder="Enter Your Name">
								</div>
								<div class="col-sm-6 m-b30">
									<label class="form-label">Username</label>
									<input type="text" class="form-control" value="{!! $user->user_name ?? '' !!}" readonly>
								</div>
								<div class="col-sm-6 m-b30">
									<label class="form-label">Specialty</label>
									<input type="text" class="form-control" value="{!! $user->specialty ?? '' !!}" name="specialty" placeholder="Enter Your Specialty">
								</div>
								<div class="col-sm-6 m-b30">
									<label class="form-label">Skills</label>
									<input type="text" class="form-control" value="{!! $user->skills ?? '' !!}" name="skills" placeholder="Enter Skills">
								</div>
								<div class="col-sm-6 m-b30">
									<label class="form-label">Gender</label>
									<select class="default-select form-control" id="validationCustom05" name="gender" >
										<option data-display="" value="{!! $user->gender ?? '' !!}">{!! $user->gender ?? '' !!}</option>
										<option value="male">Male</option>
										<option value="female">Female</option>
										<option value="other">Other</option>
									</select>
								</div>
								<div class="col-sm-6 m-b30">
									<label class="form-label">Birth</label>
									<input type="text" class="form-control" placeholder="dd. mm .yyyy" name="birth" value="{!! $user->birth ?? '' !!}" placeholder="Enter Your Facebook Link">
								</div>
								<div class="col-sm-6 m-b30">
									<label class="form-label">Phone</label>
									<input type="text" class="form-control" value="{!! $user->phone ?? '' !!}" name="phone" placeholder="Enter Phon Number">
								</div>
								
								<div class="col-sm-6 m-b30">
									<label class="form-label">Email address</label>
									<input type="text" class="form-control" value="{!! $user->email ?? '' !!}" readonly>
								</div>
								<div class="col-sm-6 m-b30">
									<label class="form-label">Country</label>
									<select class="default-select form-control city_select" id="country" name="country" >
										<option value="{!! $user->countries->name ?? '' !!}">{!! $user->countries->name ?? '' !!}</option>
										@foreach($countries as $country)
										<option value="{{ $country->id }}">{!! $country->name ?? '' !!}</option>
										@endforeach
									</select>
								</div>
								<div class="col-sm-6 m-b30">
									<label class="form-label">City</label>
									<select class="form-control city_opt" id="city" name="city">
									<option value="{!! $user->cities->id ?? '' !!}">{!!$user->cities->name ?? '' !!}</option>
									</select>
								</div>
								<div class="col-sm-6 m-b30">
									<label class="form-label">Address</label>
									<input type="text" class="form-control" value="{!! $user->address ?? '' !!}" name="address" placeholder="Enter Address">
								</div>
								<div class="col-sm-6 m-b30">
									<label class="form-label">Facebook Link</label>
									<input type="text" class="form-control" value="{!! $user->facebook ?? '' !!}" name="facebook" placeholder="Enter facebook Link">
								</div>
								<div class="col-sm-6 m-b30">
									<label class="form-label">Twitter Link</label>
									<input type="text" class="form-control" value="{!! $user->twitter ?? '' !!}" name="twitter" placeholder="Enter Twitter Link">
								</div>
								<div class="col-sm-6 m-b30">
									<label class="form-label">Instagram Link</label>
									<input type="text" class="form-control" value="{!! $user->instagram ?? '' !!}" name="instagram" placeholder="Enter Instagram Link">
								</div>
								<div class="col-sm-6 m-b30">
									<label class="form-label">Whatsapp Link</label>
									<input type="text" class="form-control" value="{!! $user->whatsapp ?? '' !!}" name="whatsapp" placeholder="Enter Whatsapp Link">
								</div>
							</div>
						</div>
						<div class="card-footer">
							<button type="submit" class="btn btn-primary">UPDATE</button>
							<!-- <a href="{{ route('index') }}" class="btn-link">Forgot your password?</a> -->
						</div>

					</div>
				</div>
		</form>
	</div>
</div>
</div>
<!--**********************************
            Content body end
        ***********************************-->

<div class="col-xl-12 d-none">
	<div class="card">
		<div class="card-body">
			<div id="tradingview_e8053" class="tranding-chart"></div>
		</div>
	</div>
</div>

<script>
	$(document).ready(function() {
		$('#country').change(function() {
			let cid = $(this).val();
			$.ajax({
				url: 'getCity',
				type: 'post',
				data: 'cid=' + cid + '&_token={{csrf_token()}}',
				success: function(result) {
					$('.city_opt').empty()

					console.log(result);
					$('.city_opt').append(result)
				}

			})
		});
	});
</script>
@endsection