@if(isset($hasActiveSubscription) && !$hasActiveSubscription)
	<!-- Placeholder content when subscription is inactive -->
	<div class="text-center py-5">
		<div class="mb-4">
			<i class="ri-lock-line" style="font-size: 4rem; color: #df2935; opacity: 0.5;"></i>
		</div>
		<h4 class="mb-3">Renew Your Subscription</h4>
		<p class="text-muted mb-4">Your scholarship subscription has expired. Renew now to continue browsing scholarships and unlock your academic opportunities.</p>
		<button type="button" class="btn btn-danger btn-lg" onclick="openRenewSubscriptionModal()" style="background-color: #df2935; border-color: #df2935;">
			<i class="ri-refresh-line me-2"></i> Renew Subscription
		</button>
	</div>
@elseif($scholarships->count() > 0)
	<div class="row">
		@foreach($scholarships as $scholarship)
			<div class="col-md-6 col-lg-4 mb-4">
				<div class="card h-100 scholarship-card" onclick="window.location.href='{{ route('student.scholarships.show', $scholarship->id) }}'" style="cursor: pointer;">
					<div class="card-body">
						<!-- Status Badges -->
						<div class="mb-3">
							@if(isset($appliedIds) && in_array($scholarship->id, $appliedIds))
								<span class="badge bg-success me-2">
									<i class="ri-checkbox-circle-line me-1"></i> Applied
								</span>
							@elseif(isset($wishToApplyIds) && in_array($scholarship->id, $wishToApplyIds))
								<span class="badge bg-primary me-2">
									<i class="ri-heart-line me-1"></i> Wish to Apply
								</span>
							@endif
						</div>
						
						<!-- Match Score Badge - Only show if user has completed profile -->
						@if(isset($profile) && $profile && $profile->completed && isset($scholarship->match_score) && $scholarship->match_score !== null)
							<div class="match-badge mb-3">
								<span class="badge match-score-badge match-score-{{ $scholarship->match_score >= 80 ? 'high' : ($scholarship->match_score >= 60 ? 'medium' : 'low') }}">
									{{ $scholarship->match_score }}% Match
								</span>
							</div>
						@endif
						
						<!-- Title -->
						<div class="mb-3">
							<h6 class="card-title mb-0">
								<a href="{{ route('student.scholarships.show', $scholarship->id) }}" class="text-decoration-none scholarship-title" onclick="event.stopPropagation()">
									{{ Str::limit($scholarship->title, 70) }}
								</a>
							</h6>
						</div>
						
						<!-- University and Location -->
						@if($scholarship->university || $scholarship->country)
							<div class="scholarship-meta mb-3">
								@if($scholarship->university)
									<div class="meta-item">
										<i class="ri-building-line"></i>
										<span>{{ Str::limit($scholarship->university, 45) }}</span>
									</div>
								@endif
								@if($scholarship->country)
									<div class="meta-item">
										<i class="ri-map-pin-line"></i>
										<span>{{ $scholarship->country }}</span>
									</div>
								@endif
							</div>
						@endif
						
						<!-- Badges -->
						@if($scholarship->degree_level || $scholarship->funding_type)
							<div class="scholarship-badges mb-3">
								@if($scholarship->degree_level)
									<span class="badge badge-degree">{{ ucfirst($scholarship->degree_level) }}</span>
								@endif
								@if($scholarship->funding_type)
									<span class="badge badge-funding">{{ str_replace('_', ' ', ucfirst($scholarship->funding_type)) }}</span>
								@endif
							</div>
						@endif
						
						<!-- Description -->
						<div class="scholarship-description mb-3">
							<p class="text-muted mb-0">
								{{ Str::limit(strip_tags($scholarship->description ?? ''), 130) }}
							</p>
						</div>
						
						<!-- Deadline with Days Left -->
						@if($scholarship->deadline)
							@php
								$deadline = \Carbon\Carbon::parse($scholarship->deadline);
								$daysLeft = now()->diffInDays($deadline, false);
								$isPast = $daysLeft < 0;
							@endphp
							<div class="scholarship-deadline mb-3">
								<small class="text-{{ $isPast ? 'danger' : ($daysLeft <= 7 ? 'warning' : 'muted') }}">
									<i class="ri-calendar-line me-1"></i>
									<span class="deadline-text">
										Deadline: {{ $deadline->format('M d, Y') }}
										@if($daysLeft >= 0)
											<span class="badge bg-{{ $daysLeft <= 7 ? 'warning' : 'secondary' }} ms-2">
												{{ $daysLeft == 0 ? 'Today!' : ($daysLeft . ' days left') }}
											</span>
										@else
											<span class="badge bg-danger ms-2">
												{{ abs($daysLeft) }} days overdue
											</span>
										@endif
									</span>
								</small>
							</div>
						@endif
						
						<!-- Action Button -->
						<div class="mt-auto" onclick="event.stopPropagation()">
							<a href="{{ route('student.scholarships.show', $scholarship->id) }}" class="btn btn-primary btn-sm w-100 scholarship-view-btn" onclick="event.stopPropagation()">
								View Details
								<i class="ri-arrow-right-line ms-1"></i>
							</a>
						</div>
					</div>
				</div>
			</div>
		@endforeach
	</div>
	
	<!-- Pagination -->
	@if($scholarships->hasPages())
		<div class="d-flex justify-content-center mt-4">
			{{ $scholarships->links('pagination::bootstrap-4') }}
		</div>
	@endif
@else
	<div class="text-center py-5">
		<i class="ri-search-line display-1" style="color: #df2935; opacity: 0.3;"></i>
		<h5 class="mt-3" style="color: #212529;">No Scholarships Found</h5>
		<p class="text-muted">Try adjusting your filters or check back later for new opportunities.</p>
	</div>
@endif

<style>
	/* Scholarship Card Styles */
	.scholarship-card {
		border: 1px solid #e9ecef;
		border-radius: 8px;
		transition: all 0.3s ease;
		background: #fff;
		display: flex;
		flex-direction: column;
		height: 100%;
	}
	
	.scholarship-card:hover {
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
		border-color: #dee2e6;
		transform: translateY(-2px);
	}
	
	/* Mobile Responsiveness for Cards */
	@media (max-width: 768px) {
		.scholarship-card .card-body {
			padding: 1rem;
		}
		
		.scholarship-title {
			font-size: 0.95rem;
		}
		
		.meta-item {
			font-size: 0.8rem;
		}
		
		.scholarship-description p {
			font-size: 0.8rem;
		}
		
		.scholarship-badges {
			gap: 0.35rem;
		}
		
		.badge-degree, .badge-funding {
			font-size: 0.7rem;
			padding: 0.25rem 0.5rem;
		}
	}
	
	.scholarship-card .card-body {
		display: flex;
		flex-direction: column;
		flex: 1;
		padding: 1.5rem;
	}
	
	/* Match Score Badge */
	.match-badge {
		margin-bottom: 1rem;
	}
	
	.match-score-badge {
		font-size: 0.75rem;
		font-weight: 600;
		padding: 0.35rem 0.75rem;
		border-radius: 20px;
		letter-spacing: 0.3px;
	}
	
	.match-score-high {
		background-color: #d1e7dd;
		color: #0f5132;
	}
	
	.match-score-medium {
		background-color: #fff3cd;
		color: #856404;
	}
	
	.match-score-low {
		background-color: #f8d7da;
		color: #842029;
	}
	
	/* Title */
	.scholarship-title {
		color: #212529;
		font-weight: 600;
		font-size: 1rem;
		line-height: 1.4;
		transition: color 0.2s ease;
	}
	
	.scholarship-title:hover {
		color: #0d6efd;
	}
	
	
	/* Meta Information */
	.scholarship-meta {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}
	
	.meta-item {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		font-size: 0.875rem;
		color: #6c757d;
	}
	
	.meta-item i {
		font-size: 1rem;
		color: #adb5bd;
	}
	
	/* Badges */
	.scholarship-badges {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
	}
	
	.badge-degree {
		background-color: #f8f9fa;
		color: #495057;
		font-size: 0.75rem;
		font-weight: 500;
		padding: 0.35rem 0.65rem;
		border-radius: 4px;
		border: 1px solid #e9ecef;
	}
	
	.badge-funding {
		background-color: #df2935;
		color: #fff;
		font-size: 0.75rem;
		font-weight: 500;
		padding: 0.35rem 0.65rem;
		border-radius: 4px;
	}
	
	/* Description */
	.scholarship-description {
		flex-grow: 1;
		min-height: 3.5rem;
	}
	
	.scholarship-description p {
		font-size: 0.875rem;
		line-height: 1.6;
		color: #6c757d;
		margin: 0;
	}
	
	/* Deadline */
	.scholarship-deadline {
		padding-top: 0.75rem;
		border-top: 1px solid #f1f3f5;
	}
	
	.deadline-text {
		color: #495057;
		font-weight: 500;
	}
	
	/* View Button */
	.scholarship-view-btn {
		background-color: #df2935;
		border-color: #df2935;
		color: #fff;
		border-radius: 6px;
		font-weight: 500;
		padding: 0.5rem 1rem;
		transition: all 0.2s ease;
	}
	
	.scholarship-view-btn:hover {
		background-color: #c82333;
		border-color: #bd2130;
		color: #fff;
		transform: translateX(2px);
	}
</style>