@extends('layouts.app')
@section('title', 'Inbox')
@section('content')
<input id="messages_data" type="hidden" value="{{ json_encode($messages) }}" />
<div class="container page-content">
	<div class="row justify-content-xl-center page-col">
		<div class="col-12">
			<h1 class="font-weight-bold typography-4 mb-0">Inbox</h1>
		</div>
	</div><!-- Header -->
	<div class="row justify-content-xl-center page-col">
		<div class="col-12 pb-xl-0 pb-4">
			<div class="card">
				<div class="card-header">
					<div class="row align-items-center gy-3">
						<div class="col-lg-7 col-md-5 text-start">Recent Messages</div>
						@if ( !$messages->isEmpty() )
							@if ( Auth::user()->isGinzOrHRHead() || Auth::user()->isConstructiveFeedbackGroupLead() )
							<div class="col-lg-5 col-md-7 text-end">
						        <select class="form-select" onchange="window.location.href=this.options[this.selectedIndex].value;">
	                                <option value="{{ route('admin-inbox-show-all') }}">All</option>
	                                @foreach ($users as $user)
	                                    @if( Route::currentRouteName() == 'inbox-filter' )
	                                        <option value="{{ route('inbox-filter', ['id'=>$user->receiver]) }}" @if( $messages->first()->receiver == $user->receiver ) selected @endif>{{ $user->getReceiver->getName() }}</option>
	                                    @else
	                                        <option value="{{ route('inbox-filter', ['id'=>$user->receiver]) }}">{{ $user->getReceiver->getName() }}</option>
	                                    @endif
	                                @endforeach
	                            </select>
							</div>
							@endif
						@endif
					</div>
				</div>
				<div class="card-body inbox-outbox-wrapper">
					@if ( $messages->isEmpty() )
						<h4 class="typography-2 font-weight-semibold text-grey text-center mb-0">- N/A -</h4>
					@else
						@foreach ($messages as $key => $message)
							@if ( Auth::user()->isGinzOrHRHead() || Auth::user()->isConstructiveFeedbackGroupLead() )
								<div class="container p-md-4 p-3 inbox_item" data-name='{{ $message->getSender->getName() }}' data-image="{{ $message->getSender->details->attachment_url ? Storage::disk('public')->url($message->getSender->details->attachment_url) : asset('images/empty-user-icon.svg') }}" title="Click to show profile">
							@else
								<div id="inbox_item_{{$key}}" data-id="{{$key}}" class="container p-md-4 p-3 inbox_item">
							@endif
								<div class="row mb-0 gy-2">
									<div class="col-md-2 col-12">
										<div class="inbox-profile-image-wrapper position-relative ms-md-auto ms-0">
											@if ( ( $message->getSender->details->attachment_url && $message->anonymous == 0 ) || Auth::user()->id == $message->getSender->id )
												<img src="{{ Storage::disk('public')->url($message->getSender->details->attachment_url) }}" class="rounded-circle img-thumbnail" alt="{{ $message->getSender->getName() }}" width="70px" height="70px">
												@if ($message->has_read == 0)
												<span class="position-absolute top-0 end-0 p-2 bg-danger border border-light rounded-circle">
											    	<span class="visually-hidden">New alerts</span>
											  	</span>
											  	@endif
											@else
												<i @if( $message->anonymous == 1 ) id="anonymous_{{$key}}" @endif class="fas fa-user-circle fa-4x text-secondary position-relative">
												</i>
												@if ($message->has_read == 0)
													<span class="position-absolute top-0 end-0 p-2 bg-danger border border-light rounded-circle">
												    	<span class="visually-hidden">New alerts</span>
												  	</span>
												@endif
											@endif
										</div>
									</div><!-- Profile Picture -->
									<div class="col-md-10 col-12">
										<div class="row gy-2 mx-0">
											<div class="col-12 text-start px-0">
												<p class="mb-0 font-weight-semibold">From: {{ $message->anonymous == 0 || Auth::user()->id == $message->getSender->id ? ( Auth::user()->id == $message->getSender->id ?  'Me' : $message->getSender->getName() ) : "Anonymous" }} @if( $message->anonymous == 1 && Auth::user()->id == $message->getSender->id )<span class="badge rounded-pill bg-theme-purple">Anonymous</span>@endif</p>
											</div>
											@if( Auth::user()->isGinzOrHRHead() || Auth::user()->isConstructiveFeedbackGroupLead() )
												<div class="col-12 text-start px-0">
													<p class="mb-0 font-weight-semibold">To: {{ $message->getReceiver->id == Auth::user()->id ? 'Me' : $message->getReceiver->getName() }}</p>
												</div>
											@endif
											<div class="col-12 text-left px-0">
												<p>{{ $message->message }}</p>
											</div>
											<div class="col-12 text-end px-0">
												<p class="d-md-block d-none fw-light mb-0">{{ date('M d, Y, h:i A', strtotime($message->created_at)) }}</p>
												<p class="d-md-none d-block fw-light mb-0">{{ date('M d, Y', strtotime($message->created_at)) }}</p>
											</div>
										</div>
									</div><!-- Message -->
								</div>
							</div>
						@endforeach
						@if( $messages->lastPage() > 1 )
						<div class="d-flex justify-content-end mt-3">
						    {!! $messages->links() !!}    
						</div>
						@endif
					@endif
				</div>
			</div>
		</div>
	</div>
</div>
@endsection
@push('modal')
@if(Auth::user()->isGinzOrHRHead())
<div class="modal fade" id="anonymousModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">Profile</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center">
                <div class="mb-3 row">
                	<div class="col-12 mb-3">
                		<img src="" class="rounded-circle img-thumbnail" alt="" id="preview_image" width="150px" height="150px">
                	</div>
                    <div class="col-12">
                    	<h4 id="username"></h4>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-black" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endif
@endpush
@push('js')
<script type="text/javascript">
	$(document).ready(function() {
		setTimeout(function(){
		    refreshPage();
		},5000);
		// Call refresh page function after 5000 milliseconds (or 5 seconds) once
		/*
		window.onload = function() {
			if(!window.location.hash) {
				window.location = window.location + '#loaded';
				setTimeout(function(){
				    refreshPage();
				},5000)
			}
		}*/

		$(".inbox_item").click(function () {
		    $(".inbox_item").removeClass("active");
		    $(this).addClass("active");

		 //    var getId = $(this).data("id");
		 //    if($('div[id="inbox_item_'+getId+'"]').hasClass("active")) {
		 //    	$('div[id="inbox_item_'+getId+'"]').removeClass("active");
		 //    	$("#anonymous_"+getId).addClass("text-secondary").removeClass("text-light");
		 //    } else {
		 //    	$('div[id="inbox_item_'+(getId-1)+'"]').removeClass("active");
		 //    	$('div[id="inbox_item_'+getId+'"]').addClass("active");
			// 	$("#anonymous_"+getId).removeClass("text-secondary").addClass("text-light");
			// }
				
		    @if(Auth::user()->isGinzOrHRHead())
		    	var name = $(this).attr('data-name');
		    	var image = $(this).attr('data-image');
		    	$('#preview_image').attr("src", image);
		    	$('#preview_image').attr("alt", name);
		    	$('#username').html(name);
		    	$('#anonymousModal').modal('show');
		    @endif
		});

		$('#anonymousModal').on('hidden.bs.modal', function (e) {
			$('#preview_image').attr("src", '');
			$('#preview_image').attr("alt", '');
			$('#username').html('');
		})
	});

	function refreshPage() { 
		var action_url = "{{ route('feedback-has-read') }}";
		var messages = $('#messages_data').val();
		$.ajax({
		    type: 'POST',
		    dataType: "json",
		    url: action_url,
		    data: { 'messages': messages, '_token': '{{ csrf_token() }}'},
		    success: function(data) {
		        // location.reload();
		    }
		});
    }
</script>
@endpush