@include('layout/backend/_header')
@include('layout/backend/_navbar')
<div id="wrapper">
	@include('layout/backend/_sidebar')
    <div id="content-wrapper">
		<div class="container-fluid">
			<ol class="breadcrumb">
				<li class="breadcrumb-item">
					<a href="{{route('newdashboard')}}">Dashboard</a>
				</li>
				<li class="breadcrumb-item active"> {{'All Media'}}
					@if ( ($currentUserRole == 'admin') || ($currentUserRole == 'pi') )
						<a style="margin-left: 765px;" href="{{ route('add-media') }}" class="clearFilter text-right btn btn-primary btn-sm" title="Add Media"><i class="fa fa-plus"></i> Add Media</a>
					@endif
				</li>
			</ol>
				<div class="row">
					<div class="col-12 nextRw">
						<div class="">
							<form action="{{route('all-media')}}" method="GET">
								<h3 class="mb-0">
									<div class="pull-right">
										<input type="submit" class="srch-btn btn btn-md btn-primary" id="myBtn" value="Search" onClick="return checkIfValue()" />
										@if ( isset($_GET['s_t']) )
											<a href="javascript://" class="clearFilter btn btn-md btn-default" title="Clear Filters" style="border: 1px solid #ddd;" onClick="clearFilters()"><i style="font-size:16px;" class="fa fa-times"></i></a>
										@endif
									</div>
									<div class=" col-sm-3 pull-right">
										<input type="text" class="form-control" name="s_t" id="myInput" onkeyup="valueCheck();" placeholder="Search" value="{{ (isset($_GET['s_t']) && $_GET['s_t']) ? $_GET['s_t'] : '' }}" />
									</div>
								</h3>
							</form>
						</div>
					</div>
					@if(Session::has('success'))
						<div class="col-12">
							<div class="alert alert-success">
								<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>    
								<span class="glyphicon glyphicon-ok"></span><em> {!! session('success') !!}</em>
							</div>
						</div>
					@endif
					<div class="col-12 nextRw">
						<div class="table-responsive">
							<table  class="table align-items-center table-flush" id="volunteers">
								<thead  class="thead-light">
									<tr>
										<th scope="col">S.no.</th>
										<th scope="col">Title</th>
										<th scope="col">Description</th>
										<th scope="col" width="120px">Actions</th>
									</tr>
								</thead>
								<tbody id="volunteerBdy">	
									{{ csrf_field() }}
									@php $ctr = 0 @endphp
									@if( isset($media) && count($media) > 0 )
										@foreach($media as $k => $v)
											<tr>
												<td>{{ ++$ctr }}</td>
												<td>{{ ( ( strlen($v['title']) > 50 ) ? ucfirst( substr($v['title'], 0, 48) ).'...' : ucfirst($v['title']) ) }}</td>
												<td>{{ ( ( strlen($v['description']) > 50 ) ? ucfirst( substr($v['description'], 0, 48) ).'...' : ucfirst($v['description']) ) }}</td>
												<td>
													@if ( ($currentUserRole == 'admin') || ( $currentUserRole == 'pi') )
														<a href="all-media/edit/{{$v['id']}}" title="Edit Media" class="actions"><i class="fa fa-pencil-square-o"></i></a>
														&nbsp;|&nbsp; <a href="javascript:void(0)" onclick="deleteMedia({{$v['id']}})" class="deleteMedia" id="{{$v['id']}}"><i class="fa fa-trash-o" aria-hidden="true"></i></a>
													@endif	
													@if ( ($currentUserRole == 'admin'))
														@if( $v['status']==0 )
															&nbsp;|&nbsp; <a href="javascript:void(0)" onclick="approveMedia({{$v['id']}})" title="Activate this Media" class="approveMedia" id="{{$v['id']}}"><i class="fa fa-check"></i></a>
														@else
															&nbsp;|&nbsp; <a href="javascript:void(0)" onclick="backToUnpublishMedia({{$v['id']}})" title="De-activate this media" class="unPublishMedia" id="{{$v['id']}}"><i class="fa fa-times"></i></a>
														@endif
													@endif
													
												</td>
											</tr>
										@endforeach
									@endif
								</tbody>
							</table>
						</div>
					</div>
					@if( count($media)==0 )
						<div class="alert alert-info text-center col-12 nextRw">No records found</div>
					@endif
				</div>	 
					
		</div>
		@if(count($media) > 0)
			{{ $media->links() }}
		@endif
		<div class="modal" id="viewMediaDetails" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
		  <div class="modal-dialog modal-dialog-centered" role="document" style="max-width:750px;">
			<div class="modal-content">
			  <div class="modal-header">
				<h5 class="modal-title" id="exampleModalLabel">Media details of <span style="font-weight: 600;" id="nam_vol"></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="volunteerScrollable" style="overflow-y: scroll;overflow-x: hidden;height: 400px;">								
								<table class="display table table-bordered" id="" aria-describedby="dynamic-table_info">
									<tbody role="alert" aria-live="polite" aria-relevant="all">
										<tr class="gradeA">
											<td class="" id="embedData">
											</td>
										</tr> 
									</tbody>
								 </table>
								<!-- <p style="font-size: 15px; font-weight: normal;margin-bottom: 30px;" ng-bind-html="bNotes | nl2br"></p> -->
							</div>
			  </div>
			</div>
		  </div>
		</div>
    </div>
</div>
	<script>
		function valueCheck(){
			$('#myInput').css('border','1px solid #cad1d7');
			$('.errorMsg').hide();
		}

		function clearFilters(){
			var url = window.location.href;
				url = url.split('?')[0];
			window.location.href = url;
		}
		
		function checkIfValue(){
			var searchText = $('#myInput').val();
			if ( !searchText ){
				$('#myInput').css('border','1px solid red');
				$('.errorMsg').show();
				return false;
			} else {
				return true;
			}
		}
		
		function approveMedia(id){
			var conf = confirm('Are you sure you want to activate this media?');
			if (!conf) return false; else {
				var dataObj = { "_token": $("input[name=_token]").val(), "id" : id }
				$.ajax({
					type:'GET',
					data: dataObj,
					url:"all-media/approve-media/"+id,
					success:function(data){
						if ( data == 'success' ){
							window.location.reload();
						}
					}
				});
			}
		}
		
		function backToUnpublishMedia(id){
			var conf = confirm('Are you sure you want to de-activate this media?');
			if (!conf) return false; else {
				var dataObj = { "_token": $("input[name=_token]").val(), "id" : id }
				$.ajax({
					type:'GET',
					data: dataObj,
					url:"all-media/unpublish-media/"+id,
					success:function(data){
						if ( data == 'success' ){
							window.location.reload();
						}
					}
				});
			}
		}
		
		function deleteMedia(id){
			var conf = confirm('Are you sure you want to delete this media?');
			if (!conf) return false; else {
				var dataObj = { "_token": $("input[name=_token]").val(), "id" : id }
				$.ajax({
					type:'GET',
					data: dataObj,
					url:"all-media/delete/"+id,
					success:function(data){
						if ( data == 'success' ){
							window.location.reload();
						}
					}
				});
			}
		}
		
		function openMediaPopup(formDetails){ //console.log(JSON.stringify(formDetails));
			$('#viewMediaDetails').modal('show');
			$('#nam_vol').html(formDetails.title);
			var htm = '';
			$.each( formDetails, function( key, value ) {
				var lastItm = ( ( key=='media_attachment' ) ? 'yes' : 'no' );
				if( key!='id' && key!='updated_at' && key!='status' && key!='created_at' && key != 'upload_report_type'){
					if ( key == 'attachment' ) {
						if ( value ){
							htm+= "<div class='row "+ ( ( lastItm == 'yes' ) ? '' : 'applyBtmBorder' ) +"' style='padding: 7px;'><div class='col-sm-3' style='max-width:20%'>"+ucfirst(key).split('_')[0]+ " "+( key.split('_')[1] ? ucfirst(key).split('_')[1] : '' )+" "+ ( key.split('_')[2] ? ucfirst(key).split('_')[2] : '' )+"</div>:<div class='col-sm-8' style='max-width:77%;flex: 0 0 77.66667%;'><a href='MEDIA_UPLOADS"+value+"' style='text-decoration:underline;' target='_blank'>"+value+" </a></div></div>";
						} else {
							htm+= "<div class='row "+ ( ( lastItm == 'yes' ) ? '' : 'applyBtmBorder' ) +"' style='padding: 7px;'><div class='col-sm-3' style='max-width:20%'>"+ucfirst(key).split('_')[0]+ " "+( key.split('_')[1] ? ucfirst(key).split('_')[1] : '' )+" "+ ( key.split('_')[2] ? ucfirst(key).split('_')[2] : '' )+"</div>:<div class='col-sm-8' style='max-width:77%;flex: 0 0 77.66667%;'>NA</div></div>";
						}
					} else if ( key == 'upload_report_value' ) {
						if ( value ){
							var ext = value.split('.').pop();
							var exts = ["png", "jpg", "gif","jpeg","tif","pdf"];
							//console.log('pp  = ' + ext);
							if ( $.inArray(ext, exts)!='-1' ){
								htm+= "<div class='row "+ ( ( lastItm == 'yes' ) ? '' : 'applyBtmBorder' ) +"' style='padding: 7px;'><div class='col-sm-3' style='max-width:20%'>Upload Report</div>:<div class='col-sm-8' style='max-width:77%;flex: 0 0 77.66667%;'><a href='MEDIA_REPORT_UPLOADS"+value+"' style='text-decoration:underline;' target='_blank'>"+value+" </a></div></div>";
							} else {
								htm+= "<div class='row "+ ( ( lastItm == 'yes' ) ? '' : 'applyBtmBorder' ) +"' style='padding: 7px;'><div class='col-sm-3' style='max-width:20%'>Upload Report</div>:<div class='col-sm-8' style='max-width:77%;flex: 0 0 77.66667%;'><a href='http://"+value+"' style='text-decoration:underline;' target='_blank'>"+value+" </a></div></div>";
							} 
						} else {
							htm+= "<div class='row "+ ( ( lastItm == 'yes' ) ? '' : 'applyBtmBorder' ) +"' style='padding: 7px;'><div class='col-sm-3' style='max-width:20%'>Upload Report</div>:<div class='col-sm-8' style='max-width:77%;flex: 0 0 77.66667%;'>NA</div></div>";
						}
					} else if ( key == 'media_attachment' ) {
						if ( value.length > 0 ){
							htm+= "<div class='row "+ ( ( lastItm == 'yes' ) ? '' : 'applyBtmBorder' ) +"' style='padding: 7px;'><div class='col-sm-3' style='max-width:20%'>"+ucfirst(key).split('_')[0]+ " "+( key.split('_')[1] ? ucfirst(key).split('_')[1] : '' )+" "+ ( key.split('_')[2] ? ucfirst(key).split('_')[2] : '' )+"</div>:<div class='col-sm-8' style='max-width:77%;flex: 0 0 77.66667%;'>";
							$.each( value, function( k, v ) {
								var vn = v.attachment;
								var ext = vn.split('.').pop();
								var exts = ["png", "jpg", "jpeg"];
								htm+= "<p style='margin-bottom: 5px;'><a href='MEDIA_UPLOADS"+vn+"' style='text-decoration:underline;' target='_blank'>"+vn+" </a></p>";
								console.log('here ' + k + ' and ' + JSON.stringify(v));
							});
							htm+= "</div></div>";
						} else {
							htm+= "<div class='row "+ ( ( lastItm == 'yes' ) ? '' : 'applyBtmBorder' ) +"' style='padding: 7px;'><div class='col-sm-3' style='max-width:20%'>"+ucfirst(key).split('_')[0]+ " "+( key.split('_')[1] ? ucfirst(key).split('_')[1] : '' )+" "+ ( key.split('_')[2] ? ucfirst(key).split('_')[2] : '' )+"</div>:<div class='col-sm-8' style='max-width:77%;flex: 0 0 77.66667%;'>NA</div></div>";
						}
					} else {
						if ( value ){
							htm+= "<div class='row "+ ( ( lastItm == 'yes' ) ? '' : 'applyBtmBorder' ) +"' style='padding:7px;'><div class='col-sm-3' style='max-width:20%'>"+ucfirst(key).split('_')[0]+ " "+( key.split('_')[1] ? ucfirst(key).split('_')[1] : '' )+" "+ ( key.split('_')[2] ? ucfirst(key).split('_')[2] : '' )+"</div>:<div class='col-sm-8' style='max-width:77%;flex: 0 0 77.66667%;'>"+value+"</div></div>";
						} else {
							htm+= "<div class='row "+ ( ( lastItm == 'yes' ) ? 'applyBtmBorder' : '' ) +"' style='padding:7px;'><div class='col-sm-3' style='max-width:20%'>"+ucfirst(key).split('_')[0]+ " "+( key.split('_')[1] ? ucfirst(key).split('_')[1] : '' )+" "+ ( key.split('_')[2] ? ucfirst(key).split('_')[2] : '' )+"</div>:<div class='col-sm-8 style='max-width:77%;flex: 0 0 77.66667%;'>NA</div></div>";
						}
					}
				}
			});
			$('#embedData').html(htm);
		}
		
		function ucfirst(string) {
			return string.charAt(0).toUpperCase() + string.slice(1);
		}
	
	</script>
@include('layout/backend/_footer')