@extends('admin.layouts.profile')

@section('page-title') ملاحظات المستخدم @endsection
@push('main-users-active') m-menu__item--active @endpush

@section('profile-picture'){{ URL::asset('/' . $data['user']->image) }}@endsection

@section('user-name')
{{ $data['user']['name'] }}
@endsection

@section('user-email')
{{ $data['user']['phone'] }}
@endsection

@section('profile-item')
<li class="m-nav__separator m-nav__separator--fit"></li>
<li class="m-nav__section">
	<span class="m-nav__section-text">الملف الشخصي</span>
</li>
<li class="m-nav__item">
	<a href="{{ route('admin.users.show', ['user' => $data['user']['id']]) }}" class="m-nav__link">
		<i class="m-nav__link-icon flaticon-analytics"></i>
		<span class="m-nav__link-title">
			<span class="m-nav__link-wrap">
				<span class="m-nav__link-text "> عرض بيانات المستخدم</span>
			</span>
		</span>
	</a>
</li>
<li class="m-nav__item m-nav__item--active">
	<a href="javascript:;" class="m-nav__link">
		<i class="m-nav__link-icon flaticon-chat-1"></i>
		<span class="m-nav__link-title">
			<span class="m-nav__link-wrap">
				<span class="m-nav__link-text "> ملاحظات واقتراحات المستخدم</span>
				@if ($support_message_count = $data['user']->support_messages()->whereIn('status', ['new', 'processing'])->count())
				<span class="m-nav__link-badge">
					<span class="m-badge m-badge--danger">{{ $support_message_count }}</span>
				</span>
				@endif
			</span>
		</span>
	</a>
</li>
@endsection

@section('profile-title')
	عرض الملف الشخصي
@endsection

@section('profile-content')
<div class="m-portlet__head">
	<div class="m-portlet__head-tools">
		<ul class="nav nav-tabs m-tabs m-tabs-line m-tabs-line--left m-tabs-line--primary" role="tablist">
			<li class="nav-item m-tabs__item">
				<a class="nav-link m-tabs__link active" data-toggle="tab" href="#tab_support_messages" role="tab">
					<i class="fa fa-sticky-note"></i>
					الملاحظات
				</a>
			</li>
		</ul>
	</div>
</div>
<div class="tab-content">
	<div class="tab-pane active" id="tab_support_messages">
		<br>
		@if (session('Done'))
		<div class="alert alert-success alert-dismissible fade show" role="alert">
			<button type="button" class="close" data-dismiss="alert" aria-label="Close">
			</button>
			<strong>{{ session('Done') }}</strong>
		</div>
		@endif

		@if (session('ERROR'))
		<div class="alert alert-danger alert-dismissible fade show" role="alert">
			<button type="button" class="close" data-dismiss="alert" aria-label="Close">
			</button>
			<strong>{{ session('ERROR') }}</strong>
		</div>
		@endif

		@if ($errors->any())
		<div class="alert alert-danger alert-dismissible fade show" role="alert">
			<button type="button" class="close" data-dismiss="alert" aria-label="Close">
			</button>
			<strong>الرجاء تعديل الأخطاء</strong>
		</div>
		@endif
		<div class="m-portlet--full-height ">
			<div class="col-10 offset-1">
				<div class="m-widget3" id="table-container">
					@include('admin.users.support_messages_table')
				</div>
			</div>
		</div>
	</div>
</div>
@endsection

@push('page_level_style')
	<style type="text/css">
		.m-portlet--full-height {
			padding-bottom: 40px;
		}
		.admin_response {
			margin-right: 10%;
		}
		.main_message {
			border: 5px solid #ebedf2;
			padding: 10px;
			border-radius: 5px;
		}
	</style>
@endpush

@push('page_level_script')
	<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
	<script type="text/javascript">
		$('.add_note').on('submit', function(e){
			e.preventDefault();
			var formData = new FormData(this);

			$.ajax({
				url: admin_url + "/users/support_messages/add_note",
				type: "post",
				cache: false,
				contentType: false,
				processData: false,
				data: formData,
				success: function(data){
					if (!!data.status) {
						swal('', data.message, "success").then (function (result) {
							var url = $(this).attr('href');
							getData(url);
						});
					} else {
						swal('', data.message, "error");
					}
				},
				error: function(data) {
					console.log(data);
				}
			});
		});

		function getData(url) {
			$('#load').show();
			$.ajax({
				url : url,
				data:{}
			}).done(function (data) {
				$("#table-container").empty().html(data);
				$('#load').hide();
			});
		}
	</script>
@endpush