@extends('admin.layouts.master')

@section('page-title') عرض رسائل التواصل @endsection
@section('header-title') رسائل التواصل @endsection
@push('main-contact_messages-active') m-menu__item--active @endpush

@section('content')
<div class="row">
	<div class="col-md-12">
		<!--begin::Portlet-->
		<div class="m-portlet m-portlet--tab">
			<div class="m-portlet__head">
				<div class="m-portlet__head-caption">
					<div class="m-portlet__head-title">
						<span class="m-portlet__head-icon">
							<i class="flaticon-speech-bubble"></i>
						</span>
						<h3 class="m-portlet__head-text">
							<span> ادارة رسائل التواصل </span>
						</h3>
					</div>
				</div>
				<div class="m-portlet__head-tools">
					<ul class="nav nav-pills nav-pills--brand m-nav-pills--align-right m-nav-pills--btn-pill m-nav-pills--btn-sm" role="tablist">
						<li class="nav-item m-tabs__item">
							<a href="{{ route('admin.supports.done') }}" class="btn btn-primary m-btn m-btn--icon">
								<span>
									<i class="fa fa-check-square"></i>
									<span>التذاكر المنتهية (المغلقة)</span>
									<span class="m-menu__link-badge">
										<span class="m-badge m-badge--danger">{{ \App\Models\Support::where('status', 'done')->count() }}</span>
									</span>
								</span>
							</a>
						</li>
						<li class="nav-item m-tabs__item">
							<a href="{{ route('admin.supports.cancelled') }}" class="btn btn-danger m-btn m-btn--icon">
								<span>
									<i class="fa fa-ban"></i>
									<span>التذاكر الملغاة من الادارة</span>
									<span class="m-menu__link-badge">
										<span class="m-badge m-badge--warning">{{ \App\Models\Support::where('status', 'cancelled')->count() }}</span>
									</span>
								</span>
							</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="m-portlet__body">
				@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 ($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
				<table class="table table-striped- table-bordered table-checkable m-table m-table--head-bg-success">
					<thead>
						<tr>
							<th class="text-center"> <b>#</b> </th>
							<th class="text-center"> <b>الاسم</b> </th>
							<th class="text-center"> <b>رقم الجوال</b> </th>
							<th class="text-center"> <b>تاريخ الارسال</b> </th>
							<th class="text-center"> <b>العنوان</b> </th>
							<th class="text-center"> <b>النص</b> </th>
							<th class="text-center"><b><i class="flaticon-cogwheel-2"></i></b></th>
						</tr>
					</thead>
					<tbody>
						@foreach($supports as $support)
						<tr class="odd gradeX">
							<td class="text-center">
								{{ $support->id }}
							</td>

							<td class="text-center">
								{{ ($support['name']) }}
							</td>

							<td class="text-center">
								{{ $support['phone'] }}
							</td>

							<td class="text-center">
								{{ $support['created_at'] }}
							</td>

							<td class="text-center">
								{{ $support['title'] }}
							</td>

							<td class="text-center">
								{{ substr($support['message'], 0, 50) . '...' }}
							</td>

							<td class="text-center">
								<a href="javascript:;" title="قراءة الرسالة" class="m-portlet__nav-link btn m-btn m-btn--hover-primary m-btn--icon m-btn--icon-only m-btn--pill view-details-btn" data-target="#view-details" data-id="{{ $support->id }}" data-toggle="modal">
									<i class="la la-eye"></i>
								</a>
								<a href="javascript:;" title="اضافة ملاحظة" class="m-portlet__nav-link btn m-btn m-btn--hover-success m-btn--icon m-btn--icon-only m-btn--pill add-note-btn" data-target="#add-note" data-id="{{ $support->id }}" data-name="{{ $support->name }}" data-toggle="modal">
									<i class="la la-sticky-note"></i>
								</a>
								<a href="{{ route('admin.supports.finish', ['support' => $support->id]) }}" title="اغلاق التذكرة (منتهية)" class="m-portlet__nav-link btn m-btn m-btn--hover-warning m-btn--icon m-btn--icon-only m-btn--pill" onclick="return confirm('تأكيد العملية؟')">
									<i class="la la-check-square"></i>
								</a>
								<a href="{{ route('admin.supports.cancel', ['support' => $support->id]) }}" title="الغاء التذكرة" class="m-portlet__nav-link btn m-btn m-btn--hover-danger m-btn--icon m-btn--icon-only m-btn--pill" onclick="return confirm('تأكيد العملية؟')">
									<i class="la la-ban"></i>
								</a>
							</td>
						</tr>
						@endforeach
					</tbody>
				</table>
				{{ $supports->links() }}
				<div class="modal fade" id="view-details" tabindex="-1" role="dialog" aria-labelledby="Advanced" aria-hidden="true">
					<div class="modal-dialog modal-lg" role="document">
						<div class="modal-content">
							<div class="modal-header">
								<h5 class="modal-title">عرض تفاصيل الرسالة</h5>
								<button type="button" class="close" data-dismiss="modal" aria-label="Close">
									<span aria-hidden="true">&times;</span>
								</button>
							</div>
							<div class="modal-body">
								<div class="m-portlet__body m-portlet__body--no-padding">
									<div class="form-group m-form__group row">
										<div class="col-lg-6 m-form__group-sub">
											<label for="name" class="form-control-label">الاسم</label>
											<input type="text" id="name" class="form-control m-input" disabled>
										</div>
										<div class="col-lg-6 m-form__group-sub">
											<label for="phone" class="form-control-label">رقم الجوال</label>
											<input type="text" id="phone" class="form-control m-input" disabled>
										</div>
									</div>
									<div class="form-group m-form__group row">
										<div class="col-lg-6 m-form__group-sub">
											<label for="title" class="form-control-label">العنوان</label>
											<input type="text" id="title" class="form-control m-input" disabled>
										</div>
										<div class="col-lg-6 m-form__group-sub">
											<label for="created_at" class="form-control-label">تاريخ ارسال الرسالة</label>
											<input type="text" id="created_at" class="form-control m-input" disabled>
										</div>
									</div>
									<div class="form-group m-form__group row">
										<div class="col-lg-12 m-form__group-sub">
											<label for="message" class="form-control-label">النص</label>
											<textarea id="message" class="form-control m-input" disabled></textarea>
										</div>
									</div>

									<h5 class="modal-title">تعليقات الادارة</h5>
									<table class="table table-striped- table-bordered table-hover table-checkable m-table m-table--head-bg-primary">
										<thead>
											<tr>
												<th class="text-center"> <b> # </b> </th>
												<th class="text-center"> <b> الملاحظة </b> </th>
												<th class="text-center"> <b> اُضيفت بواسطة </b> </th>
												<th class="text-center"> <b> تاريخ ووقت الملاحظة </b> </th>
											</tr>
										</thead>
										<tbody id="notes-body">
										</tbody>
									</table>
								</div>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-secondary" data-dismiss="modal">
									<span>اغلاق</span>
								</button>
							</div>
						</div>
					</div>
				</div>
				<div class="modal fade" id="add-note" tabindex="-1" role="dialog" aria-labelledby="Advanced" aria-hidden="true">
					<div class="modal-dialog modal-lg" role="document">
						<form action="javascript:;" class="form-horizontal" id="accept-form" method="POST">
						 @csrf
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title">اضافة تعليق على رسالة "<span id="added_support_name"></span>"</h5>
									<button type="button" class="close" data-dismiss="modal" aria-label="Close">
										<span aria-hidden="true">&times;</span>
									</button>
								</div>
								<div class="modal-body">
									<div class="m-portlet__body m-portlet__body--no-padding">
										<div class="form-group m-form__group row">
											<div class="col-lg-12 m-form__group-sub">
												<label for="note" class="form-control-label">الملاحظة </label>
												<div class="input-group m-input-group">
													<div class="input-group-prepend">
														<span class="input-group-text">
															<i class="la la-sticky-note m--font-primary"></i>
														</span>
													</div>
													<input type="text" id="note" class="form-control m-input" autocomplete="off">
												</div>
												<span class="m-validation_error note-error" id="note-error"></span>
												<input type="hidden" id="support-id">
											</div>
										</div>
									</div>
								</div>
								<div class="modal-footer">
									<button type="submit" id="submit-add-note" class="btn btn-success">
										<span>اضافة الرد</span>
									</button>
									<button type="button" class="btn btn-secondary" data-dismiss="modal">
										<span>اغلاق</span>
									</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
@stop

@push('page_level_style')
	<style type="text/css">
		.seen-msg {
			background-color: #006a8a54;
			color: black;
		}
		.seen-icon {
			color: white!important;
		}
	</style>
@endpush

@push('page_level_script')
	<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
	<script type="text/javascript">
		$(".add-note-btn").click (function () {
			$("#support-id").val($(this).data("id"));
			$("#added_support_name").html($(this).data("name"));
			
			// Clear Error Fields
			$("#note-error").html();
			$("#note-error").css('display', 'none');
		});

		$('#submit-add-note').click (function ()
		{
			var dataString = "note=" + $("#note").val();

			$.ajax({
				type: "POST",
				url: admin_url + "/supports/add_note/" + $("#support-id").val(),
				data: dataString,
				success: function(data){
					if (!data.status) {
						$("#note-error").html(data.message);
						$("#note-error").css('display', 'block');
					} else {
						$("#note-error").html();
						$("#note-error").css('display', 'none');
						location.reload();
					}
				},
				error: function(data) {
					console.log(data);
				}
			});
		});
	</script>
	<script type="text/javascript">
		$(".view-details-btn").click (function () {
			$("#name").val();
			$("#phone").val();
			$("#title").val();
			$("#created_at").val();
			$("#message").html();
			$("#notes-body").empty();

			$.ajax({
				type: "GET",
				url: admin_url + "/supports/" + $(this).data('id'),
				success: function(data){
					// console.log(data.data);
					$("#name").val(data.data.name);
					$("#phone").val(data.data.phone);
					$("#title").val(data.data.title);
					$("#created_at").val(data.data.created_at);
					$("#message").html(data.data.message);

					// $("#image").attr("src", "/img/company_thumbnail/" + data.data.image);

					$.each(data.data.support_notes, function(key, note){
						// console.log('key', key);
						// console.log('note', note);
						$("#notes-body").append('<tr class="odd gradeX">'
													+'<td class="text-center">' + (key+1) + '</td>'
													+'<td class="text-center">' + note.pivot.note + '</td>'
													+'<td class="text-center">' + note.name + '</td>'
													+'<td class="text-center">' + note.pivot.created_at + '</td>'
												+'</tr>');
					});
				}
			});
		});
	</script>
@endpush