@extends('website.layouts.master')

@section('site_title')حسابي - @endsection
@section('content')
		<section class="page-title">
			<div class="container">
				<div class="row">
					<div class="col-2 col-md-1">
						<div class="title-icon">
							<i class="fas fa-tools"></i>
						</div>
					</div>
					<div class="col-10 col-md-11">
						<div class="page-text">
							<h5 class="mt-0">حسابى</h5>
						</div>
					</div>
				</div>
			</div>
		</section>
		@include('website.includes.user_menu')

		<!-- Start personal account -->
		<div class="container-fluid">
			<div class="row">
				<div class="col-12 col-lg-8 col-xl-8">
					<section class="personal-account">
						<div class="container-fluid">
							<div class="companies-title">
								<h4>الملف الشخصي</h4>
								<button class="edit-personal-acc"> تعديل</button>
							</div>
							<!-- user data -->
							<form action="{{ route('website.profile.update') }}" method="POST" enctype="multipart/form-data">
								@csrf @method('PUT')
								<div class="edit-account">
									<div class="row">
										<div class="col-md-4 col-lg-4">
											<div class="user-pp">
												<div style="background-image:url('{{ URL::asset($data['user']['image']) }}')"></div>
											</div>
											<!-- Button trigger modal -->
											<button type="button" class="btn btn-primary change-app" data-toggle="modal" data-target="#exampleModal">
												تغيير الصورة
											</button>

											<!-- Modal -->
											<div class="modal fade change-pp-modal" id="exampleModal" tabindex="-1" role="dialog"
												aria-labelledby="exampleModalLabel" aria-hidden="true">
												<div class="modal-dialog" role="document">
													<div class="modal-content">
														<div class="modal-header">
															<button type="button" class="close" data-dismiss="modal" aria-label="Close">
															</button>
															<span aria-hidden="true">&times;</span>
														</div>
														<div class="modal-body">
															<div>
																<label for="pp">
																	<input type="file" name="image" id="pp">
																	<i class="fas fa-camera"></i>
																</label>
																<span>تغيير الصورة</span>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
										<div class="col-md-6 col-lg-6 offset-1">
											<div class="user-form">
												<div class="row">
													<div class="col-md-12">
														<label for="name" class="d-block">الاسم </label>
														<p>
															{{ $data['user']['name'] }}
														</p>
														<input type="text" name="name" value="{{ old('name')?: $data['user']['name'] }}" autocomplete="off" placeholder="ادخل اسمك">
													</div>
													<div class="col-md-12">
														<label for="email" class="d-block">البريد الالكتروني </label>
														<p>
															{{ $data['user']['email'] }}
														</p>
														<input type="email" name="email" value="{{ old('email')?: $data['user']['email'] }}" autocomplete="off" placeholder="مثال: example@suqiakum.com">
													</div>
													<div class="col-md-12 password-field">
														<label for="password" class="d-block">كلمة المرور </label>
														<input type="password" name="password" placeholder="******">
													</div>
													<div class="col-md-12 password-field">
														<label for="password_confirmation" class="d-block">تأكيد كلمة المرور </label>
														<input type="password" name="password_confirmation" placeholder="******">
													</div>
												</div>
												<button type="submit" class="confirm-personal-data">حفظ التعديلات</button>
											</div>
										</div>
									</div>
								</div>
							</form>
						</div>
					</section>
				</div>

				<div class="col-12 col-lg-4 col-xl-4">
					<section class="personal-account">
						<div class="container-fluid">
							<div class="companies-title contact-title">
								<h4>طرق التواصل</h4>
								<a href="javascript:;" class="create-modal" data-toggle="modal" data-target="#add_contact">اضف جديد</a>
							</div>
							<section class="points-usage title-margin">
									<div class="container-fluid points-container">
										<div class="row" style="margin: 10px 0px;">
											<div class="col-12">
												<h5>بامكانك اضافة وتعديل بيانات التواصل الخاصة بك من هنا</h5>
											</div>
										</div>
										@if ($data['user']->user_contact_methods()->count('user_contacts.id'))
										@foreach ($data['user']->user_contact_methods()->orderBy('created_at', 'desc')->get() as $item)
										<div class="point-block">
											<p class="point-item" style="width: 20%;">
												<i class="{{ $item['icon_fa'] }}"></i>
											</p>

											<p class="point-date" style="width: 60%;">
												<a href="{{ $item['base_url'] }}{{ $item->pivot['value'] }}" target="__blank">
													{{ __('api.' . strtolower($item['name'])) }}
													<i class="fa fa-external-link-alt"></i>
												</a>
											</p>

											<p class="point-date" style="width: 20%;">
												<a href="javascript:;" class="delete-contact" data-id="{{ $item->pivot['id'] }}">
													<i class="fa fa-trash"></i>
												</a>
											</p>
										</div>
										@endforeach
										@else
										<div class="point-block text-center">
											<p class="text-center" style="width: 100%">
												لم تقم باضافة اي وسيلة تواصل بعد, <a href="javascript:;" data-toggle="modal" data-target="#add_contact" style="color: #007bff;"> اضف الآن </a>
											</p>
										</div>
										@endif
									</div>
							</section>
						</div>
					</section>
				</div>
			</div>
		</div>

		<div class="modal fade" id="add_contact" aria-labelledby="exampleModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" id="exampleModalLabel">اضافة طريقة تواصل جديدة</h5>
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
						</button>
					</div>
					<form action="javascript:;" id="add_contact_form">
						@csrf
						<div class="modal-body">
							<div class="row">
								<div class="col-12">
									<div class="form-group">
										<label for="contact_method_id" class="d-block">اختر وسيلة الاتصال</label>
										<select class="form-control contact_method_id" id="contact_method_id" name="contact_method_id">
											@foreach ($data['contact_methods'] as $item)
											<option value="{{ $item['id'] }}">{{ __('api.' . strtolower($item['name'])) }}</option>
											@endforeach
										</select>
										<span class="invalid-feedback" role="alert">
											<strong id="contact_method_id_error">
											</strong>
										</span>
									</div>
								</div>
								<div class="col-12">
									<div class="form-group">
										<label for="value" class="d-block">ادخل البيانات</label>
										<input type="text" name="value" id="value" autocomplete="off" class="form-control">
										<span class="invalid-feedback" role="alert">
											<strong id="value_error">
											</strong>
										</span>
									</div>
								</div>
								<div class="col-12">
									<p>
										ملاحظات عند الاضافة
									</p>
									<ul>
										<li>
											عند اضافة رقم واتساب الخاص بك, يجب اضافة الرقم بالصيغة التالية (966552448484). 
										</li>
										<li>
											في شبكات التواصل الاجتماعي لا داعي لكتابة الرابط كاملاً, فقط تكتفي بكتابة اسمك  (كما هو موّضح بالصورة)
										</li>
									</ul>
									<img src="{{ URL::asset('/assets/social_guide.png') }}">
								</div>
							</div>
						</div>
						<div class="modal-footer">
							<button type="submit" class="btn btn-primary">اضافة</button>
							<button type="button" class="btn btn-secondary" data-dismiss="modal">الغاء</button>
						</div>
					</form>
				</div>
			</div>
		</div>
@endsection

@push('page_level_style')
	<style type="text/css">
		input[name="email"], #value {
			direction: ltr;
		}
		.contact-title {
			margin: 0!important;
		}
		.point-block > p {
			margin: 0!important;
		}
		.points-usage h5 {
			font-size: 14px;
		}
	</style>
	<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endpush

@push('page_level_script')
	<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
	<script type="text/javascript">
		$('.contact_method_id').select2({
			language: 'ar',
			width: '100%',
			dir: "rtl"
		});

		function reset_errors() {
			$('#contact_method_id_error').html('');
			$('#value_error').html('');
		}

		$(document).on('click', '.create-modal', function(event) {
			event.preventDefault();
			$('#contact_method_id').val('');
			$('#value').val('');
			reset_errors();
		});

		$(document).on('submit', '#add_contact_form', function(event) {
			event.preventDefault();
			reset_errors();

			var formData = new FormData(this);

			$.ajax({
				url: "{{ route('website.users.add_contact') }}",
				type: "post",
				cache: false,
				contentType: false,
				processData: false,
				data: formData,
				success: function (data) {
					if (data.status) {
						swal('', data.message, 'success').then (function (result) {
							window.location.replace('/profile')
						});
					} else {
						swal('', data.message, 'error').then (function (result) {
							$.each(data.errors, function(key, value) {
								$('#' + key + '_error').html(value[0]);
							});
						});
					}
				}
			});
		});

		$(document).on('click', '.delete-contact', function(event) {
			event.preventDefault();
			var id = $(this).data('id');

			swal({
				title: "تأكيد العملية؟",
				text: "لا يمكن استرجاع البيانات المحذوفة لاحقاً!",
				icon: "warning",
				buttons: true,
				dangerMode: true,
			}).then (function (result) {
				if (result) {
					window.location.replace('/users/delete_contact?id=' + id);
				}
			});
		});

		// $(document).on('submit', '#add_contact_form', function (e) {
		// 	e.preventDefault();

		// 	var formData = new FormData(this);
			
		// 	$.ajax({
		// 		url: "{{ route('website.users.add_contact') }}",
		// 		type: "post",
		// 		cache:false,
		// 		contentType: false,
		// 		processData: false,
		// 		data: formData,
		// 		success: function (data) {
		// 			console.log(data)
		// 			// var url = $(this).attr('href');
		// 			getData("/profile");
		// 			// if (data["status"]) {
		// 			// 	swal({
		// 			// 		title: "",
		// 			// 		text: data["message"],
		// 			// 		type: "success",
		// 			// 		showCancelButton: false,
		// 			// 		confirmButtonColor: "#DD6B55",
		// 			// 		confirmButtonText: "{{ __('app.ok') }}",
		// 			// 		cancelButtonText: "{{ __('app.cancel') }}",
		// 			// 		closeOnConfirm: true,
		// 			// 		closeOnCancel: true
		// 			// 	});
		// 			// 	var url = $(this).attr('href');
		// 			// 	getData(url);
		// 			// 	reset_form();
		// 			// 	$("#add_page").modal("hide");
		// 			// }
		// 		}
		// 	});
		// })
	</script>
@endpush