@extends('layouts.app')
@section('title', 'Outbox')
@section('content')
<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">Outbox</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">Sent 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-outbox-show-all') }}">All</option>
		                            @foreach ($users as $user)
		                                @if( Route::currentRouteName() == 'outbox-filter' )
		                                    <option value="{{ route('outbox-filter', ['id'=>$user->sender]) }}" @if( $messages->first()->sender == $user->sender ) selected @endif>{{ $user->getSender->getName() }}</option>
		                                @else
		                                    <option value="{{ route('outbox-filter', ['id'=>$user->sender]) }}">{{ $user->getSender->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
					<div class="row">
						<div class="col-12">
							@foreach ($messages as $key => $message)
							<div id="inbox_item_{{$key}}" data-id="{{$key}}" class="container p-md-4 p-3 inbox_item">
								<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">
											@else
											    <i @if( $message->anonymous == 1 ) id="anonymous_{{$key}}" @endif class="fas fa-user-circle fa-4x text-secondary"></i>
											@endif
										</div>
									</div><!-- Profile Picture -->
									<div class="col-md-10 col-12">
										<div class="row gy-2 mx-0">
											@if( Auth::user()->isGinzOrHRHead() || Auth::user()->isConstructiveFeedbackGroupLead() )
											<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" }}</p>
											</div>
											@endif
											<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() }} @if( $message->anonymous == 1 && Auth::user()->id == $message->getSender->id )<span class="badge rounded-pill bg-theme-purple">Anonymous</span>@endif
												</p>
											</div>
											<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
						</div>
					</div>
					@endif
				</div>
			</div>
		</div>
	</div>
</div>
@endsection
@push('js')
<script type="text/javascript">
	$(document).ready(function() {
		$(".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");
	    	// } 
		});
	});
</script>
@endpush