@extends('layouts.app')
@section('title', $survey->title)
@section('content')
<div class="max-w-3xl mx-auto px-4 py-8">
    <a href="{{ route('surveys.index') }}" class="text-purple-600 hover:underline text-sm mb-6 inline-block"><i class="fas fa-arrow-left mr-1"></i>Back to Surveys</a>
    <div class="bg-white rounded-2xl shadow-lg p-8">
        <div class="flex justify-between items-start mb-6">
            <div>
                <span class="text-xs font-semibold px-3 py-1 rounded-full {{ $survey->requires_plan ? 'bg-yellow-100 text-yellow-800' : 'bg-green-100 text-green-800' }} mb-3 inline-block">
                    {{ $survey->requires_plan ? '⭐ Premium Survey' : '✓ Free Survey' }}
                </span>
                <h1 class="text-2xl font-bold text-gray-800">{{ $survey->title }}</h1>
            </div>
            <div class="text-right">
                <div class="text-3xl font-extrabold text-green-600">${{ number_format($survey->reward, 2) }}</div>
                <div class="text-sm text-gray-500">reward</div>
            </div>
        </div>
        <p class="text-gray-600 leading-relaxed mb-6">{{ $survey->description }}</p>
        @if($survey->estimated_minutes)
        <div class="flex items-center text-sm text-gray-500 mb-6">
            <i class="fas fa-clock mr-2"></i> Estimated time: ~{{ $survey->estimated_minutes }} minutes
        </div>
        @endif
        @if($survey->survey_url)
        <div class="bg-blue-50 rounded-lg p-4 mb-6">
            <p class="text-sm text-blue-700 font-medium"><i class="fas fa-external-link-alt mr-2"></i>This survey links to an external page.</p>
            <a href="{{ $survey->survey_url }}" target="_blank" class="text-blue-600 text-sm hover:underline">{{ $survey->survey_url }}</a>
        </div>
        @endif
        @if($alreadyCompleted)
        <div class="text-center py-6">
            <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <i class="fas fa-check text-green-600 text-2xl"></i>
            </div>
            <p class="font-bold text-gray-800">You've already completed this survey!</p>
            <p class="text-gray-500 text-sm mt-1">You earned ${{ number_format($survey->reward, 2) }}</p>
        </div>
        @else
        <div class="border-t pt-6">
            <p class="text-sm text-gray-500 mb-4">By clicking "Mark as Complete", you confirm you have completed this survey.</p>
            <form action="{{ route('surveys.complete', $survey->id) }}" method="POST">
                @csrf
                <button type="submit" class="w-full gradient-bg text-white py-4 rounded-xl font-bold text-lg hover:opacity-90 transition">
                    <i class="fas fa-check mr-2"></i>Mark as Complete & Earn ${{ number_format($survey->reward, 2) }}
                </button>
            </form>
        </div>
        @endif
    </div>
</div>
@endsection