@extends('layouts.app')

@section('title', 'AHAFOMAN SRC WEEK 2026 AWARDS')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12" style="background-color:#42a5f5">
    <!-- Hero Section -->
    <div class="text-center mb-16" style="border:">
        <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4" style="color:white">
            AHAFOMAN  <span class="">SRC WEEK 2026 AWARDS</span>
        </h1>
        <p class="text-xl text-gray-600 max-w-2xl mx-auto" style="font-weight:bold">
            Support your favorite nominees by casting your vote. Each vote cost GHS 1
            <br>
            <a href="https://wa.me/233545957501" class="whatsapp-btn" target="_blank">
  Click to report issues 
        </a>
        </p>
        <hr>
         <h2 class="blink" style="background-color: white;color:red; font-weight:bold;">Contestants with low votes will be evicted soon!.</h2>
    </div>
    <hr>
    
  

    @forelse($categories as $category)
    <div class="mb-16" >
        <div class="flex items-center justify-between mb-8">
            <div>
                <h2 class="text-2xl font-bold text-gray-900">{{ $category->name }}</h2>
                @if($category->description)
                    <p class="text-gray-600 mt-1">{{ $category->description }}</p>
                @endif
            </div>
            <span class="bg-primary/10 text-primary px-4 py-2 rounded-full text-sm font-medium">
                {{ $category->nominees->count() }} Nominees
            </span>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            @forelse($category->nominees as $nominee)
            <a href="{{ route('nominee', $nominee) }}" class="group bg-white rounded-xl shadow-sm hover:shadow-lg transition-all duration-300 overflow-hidden">
                <div class="aspect-w-4 aspect-h-3 bg-gray-200">
                    @if($nominee->photo)
                        <img src="{{ asset($nominee->photo) }}" alt="{{ $nominee->name }}" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
                    @else
                        <div class="w-full h-48 bg-gradient-to-br from-primary/20 to-secondary/20 flex items-center justify-center">
                            <svg class="w-16 h-16 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                            </svg>
                        </div>
                    @endif
                </div>
                <div class="p-6">
                    <h3 class="text-lg font-semibold text-gray-900 group-hover:text-primary transition-colors">
                        {{ $nominee->name }} 
                    </h3>
                   
                    <div class="mt-4 flex items-center justify-between">
                        <span class="text-2xl font-bold text-primary">
                            
                            @php $individual_votes = \App\Models\Vote::where('nominee_id', $nominee->id)->where('status', 'success')->get();
                            $total_individual_votes =$individual_votes->sum('amount');
                 @endphp
                 
                            {{ $total_individual_votes ?? 0 }}
                        
                        
                       


                        </span>
                        <span class="text-sm text-gray-500">votes</span>
                        
                    </div>
                    <hr>
                    <!--<h1 class="text-primary">Vote Now</h1>-->
                    
                </div>
            </a>
            @empty
            <div class="col-span-full text-center py-12 bg-gray-50 rounded-xl">
                <p class="text-gray-500">No nominees in this category yet.</p>
            </div>
            @endforelse
        </div>
    </div>
    @empty
    <div class="text-center py-20 bg-gray-50 rounded-xl">
        <svg class="w-16 h-16 text-gray-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"></path>
        </svg>
        <h3 class="text-xl font-medium text-gray-900 mb-2">No Active Categories</h3>
        <p class="text-gray-500">Check back soon for upcoming awards!</p>
    </div>
    @endforelse
</div>
@endsection

<style>
  .whatsapp-btn {
    background-color: #25D366;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    
  }
  
  .blink {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
     
  }
}

</style>