@extends('layouts.app')
@section('title', 'Available Surveys')
@section('content')
<div class="max-w-7xl mx-auto px-4 py-8">
    <div class="flex justify-between items-center mb-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-800">Available Surveys</h1>
            <p class="text-gray-500 text-sm">Complete surveys to earn money</p>
        </div>
        <div class="bg-white rounded-lg shadow px-4 py-2 text-sm">
            <span class="text-gray-500">Daily Limit: </span>
            <span class="font-bold text-purple-600">
                @php
                    $user2 = $user;
                    $limit = $user2->activePlan ? $user2->activePlan->plan->daily_survey_limit : 3;
                    $done = \App\Models\SurveyCompletion::where('user_id', $user2->id)->whereDate('created_at', today())->count();
                @endphp
                {{ $done }}/{{ $limit }} today
            </span>
        </div>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        @forelse($surveys as $survey)
        <div class="bg-white rounded-xl shadow card-hover overflow-hidden">
            <div class="p-6">
                <div class="flex justify-between items-start mb-3">
                    <span class="text-xs font-semibold px-2 py-1 rounded-full {{ $survey->requires_plan ? 'bg-yellow-100 text-yellow-800' : 'bg-green-100 text-green-800' }}">
                        {{ $survey->requires_plan ? '⭐ Premium' : '✓ Free' }}
                    </span>
                    <span class="text-2xl font-bold text-green-600">${{ number_format($survey->reward, 2) }}</span>
                </div>
                <h3 class="font-bold text-gray-800 mb-2">{{ $survey->title }}</h3>
                <p class="text-gray-500 text-sm mb-4 line-clamp-2">{{ $survey->description }}</p>
                @if($survey->estimated_minutes)
                <p class="text-xs text-gray-400 mb-4"><i class="fas fa-clock mr-1"></i>~{{ $survey->estimated_minutes }} min</p>
                @endif
                @if($survey->already_completed)
                <span class="w-full block text-center bg-gray-100 text-gray-500 py-2 rounded-lg text-sm"><i class="fas fa-check mr-1"></i>Completed</span>
                @elseif(!$survey->can_access)
                <a href="{{ route('plans.index') }}" class="w-full block text-center bg-yellow-100 text-yellow-800 py-2 rounded-lg text-sm font-semibold hover:bg-yellow-200 transition">
                    <i class="fas fa-lock mr-1"></i>Upgrade to Access
                </a>
                @else
                <a href="{{ route('surveys.show', $survey->id) }}" class="w-full block text-center gradient-bg text-white py-2 rounded-lg text-sm font-semibold hover:opacity-90 transition">
                    Start Survey
                </a>
                @endif
            </div>
        </div>
        @empty
        <div class="col-span-3 text-center py-16 text-gray-400">
            <i class="fas fa-inbox text-5xl mb-4"></i>
            <p>No surveys available right now.</p>
        </div>
        @endforelse
    </div>
</div>
@endsection