@extends('layouts.admin')

@section('title', $survey->title)
@section('header', $survey->title)
@section('subheader', 'Survey overview and management')

@section('header-actions')
    @if($survey->status === 'draft')
        <form action="{{ route('admin.surveys.activate', $survey) }}" method="POST" class="inline">
            @csrf
            <button type="submit" class="btn-primary" onclick="return confirm('Are you sure you want to activate this survey?')">
                <i class="fas fa-play mr-2"></i>
                Activate Survey
            </button>
        </form>
    @elseif($survey->status === 'active')
        <form action="{{ route('admin.surveys.close', $survey) }}" method="POST" class="inline">
            @csrf
            <button type="submit" class="btn-danger" onclick="return confirm('Are you sure you want to close this survey? No more responses will be accepted.')">
                <i class="fas fa-stop mr-2"></i>
                Close Survey
            </button>
        </form>
    @endif
    <a href="{{ route('admin.surveys.edit', $survey) }}" class="btn-outline">
        <i class="fas fa-edit mr-2"></i>
        Edit
    </a>
@endsection

@section('content')
<div class="space-y-6">
    <!-- Status Banner -->
    @if($survey->status === 'draft')
        <div class="alert-warning">
            <i class="fas fa-exclamation-triangle mr-2"></i>
            This survey is in draft mode. Add questions and activate it to start collecting responses.
        </div>
    @elseif($survey->status === 'closed')
        <div class="alert-info">
            <i class="fas fa-info-circle mr-2"></i>
            This survey is closed. No more responses are being accepted.
        </div>
    @endif
    
    <!-- Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
        <div class="stat-card">
            <div class="flex items-center justify-center w-12 h-12 bg-blue-100 rounded-lg mx-auto mb-3">
                <i class="fas fa-list text-blue-500 text-xl"></i>
            </div>
            <div class="stat-value">{{ $survey->questions->count() }}</div>
            <div class="stat-label">Questions</div>
        </div>
        
        <div class="stat-card">
            <div class="flex items-center justify-center w-12 h-12 bg-purple-100 rounded-lg mx-auto mb-3">
                <i class="fas fa-envelope text-purple-500 text-xl"></i>
            </div>
            <div class="stat-value">{{ $invitationStats['total'] }}</div>
            <div class="stat-label">Invitations</div>
        </div>
        
        <div class="stat-card">
            <div class="flex items-center justify-center w-12 h-12 bg-green-100 rounded-lg mx-auto mb-3">
                <i class="fas fa-check-circle text-green-500 text-xl"></i>
            </div>
            <div class="stat-value">{{ $responseCount }}</div>
            <div class="stat-label">Responses</div>
        </div>
        
        <div class="stat-card">
            <div class="flex items-center justify-center w-12 h-12 bg-orange-100 rounded-lg mx-auto mb-3">
                <i class="fas fa-percentage text-orange-500 text-xl"></i>
            </div>
            <div class="stat-value">
                {{ $invitationStats['total'] > 0 ? round(($invitationStats['completed'] / $invitationStats['total']) * 100) : 0 }}%
            </div>
            <div class="stat-label">Response Rate</div>
        </div>
    </div>

    <!-- Response Limit Progress -->
    @if($survey->max_responses)
    <div class="card">
        <div class="card-header flex items-center justify-between">
            <h3 class="font-semibold text-secondary-900">
                <i class="fas fa-users-cog mr-2 text-blue-500"></i>Response Limit
            </h3>
            @if($survey->auto_closed_at)
                <span class="badge badge-danger">Auto-closed</span>
            @endif
        </div>
        <div class="card-body">
            <div class="flex items-center justify-between mb-2">
                <span class="text-sm text-gray-600">Progress</span>
                <span class="text-sm font-medium">
                    {{ $survey->getCompletedResponsesCount() }} / {{ $survey->max_responses }} responses
                </span>
            </div>
            <div class="w-full bg-gray-200 rounded-full h-3 mb-3">
                <div class="h-3 rounded-full transition-all duration-500
                    {{ $survey->getLimitProgress() >= 100 ? 'bg-red-500' : ($survey->getLimitProgress() >= 80 ? 'bg-yellow-500' : 'bg-green-500') }}"
                    style="width: {{ min(100, $survey->getLimitProgress()) }}%">
                </div>
            </div>
            
            @if($survey->hasReachedLimit())
                <div class="flex items-center text-red-600 text-sm">
                    <i class="fas fa-exclamation-circle mr-2"></i>
                    <span>Limit reached</span>
                </div>
                @if($survey->auto_closed_at)
                    <p class="text-xs text-gray-500 mt-1">
                        Auto-closed on {{ $survey->auto_closed_at->format('M d, Y \a\t H:i') }}
                    </p>
                @endif
            @else
                <div class="flex items-center text-green-600 text-sm">
                    <i class="fas fa-check-circle mr-2"></i>
                    <span>{{ $survey->getRemainingResponses() }} responses remaining</span>
                </div>
            @endif
        </div>
    </div>
    @endif

    
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Survey Details -->
        <div class="lg:col-span-2 space-y-6">
            <div class="card">
                <div class="card-header flex items-center justify-between">
                    <h3 class="font-semibold text-secondary-900">Survey Details</h3>
                    <span class="badge {{ $survey->status === 'active' ? 'badge-success' : ($survey->status === 'closed' ? 'badge-danger' : 'badge-secondary') }}">
                        {{ ucfirst($survey->status) }}
                    </span>
                </div>
                <div class="card-body space-y-4">
                    @if($survey->description)
                        <div>
                            <label class="text-sm font-medium text-gray-500">Description</label>
                            <p class="text-gray-700">{{ $survey->description }}</p>
                        </div>
                    @endif
                    
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="text-sm font-medium text-gray-500">Start Date</label>
                            <p class="text-gray-700">{{ $survey->starts_at ? $survey->starts_at->format('M j, Y g:i A') : 'Immediately when activated' }}</p>
                        </div>
                        <div>
                            <label class="text-sm font-medium text-gray-500">End Date</label>
                            <p class="text-gray-700">{{ $survey->ends_at ? $survey->ends_at->format('M j, Y g:i A') : 'No deadline' }}</p>
                        </div>
                    </div>
                    
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="text-sm font-medium text-gray-500">Estimated Time</label>
                            <p class="text-gray-700">{{ $survey->estimated_minutes }} minutes</p>
                        </div>
                        <div>
                            <label class="text-sm font-medium text-gray-500">Demographics</label>
                            <p class="text-gray-700">{{ $survey->collect_demographics ? 'Collected' : 'Not collected' }}</p>
                        </div>
                    </div>
                    
                    <div>
                        <label class="text-sm font-medium text-gray-500">Created By</label>
                        <p class="text-gray-700">{{ $survey->creator->name ?? 'Unknown' }} on {{ $survey->created_at->format('M j, Y') }}</p>
                    </div>
                </div>
            </div>
            
            <!-- Questions Preview -->
            <div class="card">
                <div class="card-header flex items-center justify-between">
                    <h3 class="font-semibold text-secondary-900">Questions ({{ $survey->questions->count() }})</h3>
                    <a href="{{ route('admin.surveys.questions', $survey) }}" class="btn-ghost btn-sm">
                        <i class="fas fa-edit mr-1"></i>
                        Manage
                    </a>
                </div>
                @if($survey->questions->count() > 0)
                    <div class="divide-y divide-gray-100 max-h-96 overflow-y-auto">
                        @foreach($survey->questions->sortBy('sort_order') as $question)
                            <div class="px-6 py-3">
                                <div class="flex items-start">
                                    <span class="text-lg mr-3">{{ $question->category->icon }}</span>
                                    <div class="flex-1">
                                        <p class="text-sm text-gray-700">{{ $question->question_text }}</p>
                                        <span class="text-xs text-gray-400">{{ $question->category->name }}</span>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="card-body text-center py-8">
                        <p class="text-gray-500 mb-4">No questions added yet</p>
                        <a href="{{ route('admin.surveys.questions', $survey) }}" class="btn-primary btn-sm">
                            <i class="fas fa-plus mr-1"></i>
                            Add Questions
                        </a>
                    </div>
                @endif
            </div>
        </div>
        
        <!-- Quick Actions -->
        <div class="space-y-6">
            <div class="card">
                <div class="card-header">
                    <h3 class="font-semibold text-secondary-900">Quick Actions</h3>
                </div>
                <div class="card-body space-y-3">
                    <a href="{{ route('admin.surveys.questions', $survey) }}" class="flex items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
                        <i class="fas fa-list text-blue-500 w-8"></i>
                        <span class="text-sm font-medium text-gray-700">Manage Questions</span>
                    </a>
                    <a href="{{ route('admin.surveys.invitations.index', $survey) }}" class="flex items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
                        <i class="fas fa-envelope text-purple-500 w-8"></i>
                        <span class="text-sm font-medium text-gray-700">Email Invitations</span>
                    </a>
                    <a href="{{ route('admin.surveys.invitations.index', $survey) }}" class="flex items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
                        <i class="fas fa-envelope text-purple-500 w-8"></i>
                        <span class="text-sm font-medium text-gray-700">Email Invitations</span>
                    </a>
                    <a href="{{ route('admin.surveys.invitations.index', $survey) }}" class="flex items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
                        <i class="fas fa-paper-plane text-purple-500 w-8"></i>
                        <span class="text-sm font-medium text-gray-700">Distribution & Invitations</span>
                    </a>
                    @if($survey->status !== 'draft')
                        <a href="{{ route('admin.surveys.show', $survey) }}" class="flex items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
                            <i class="fas fa-chart-pie text-green-500 w-8"></i>
                            <span class="text-sm font-medium text-gray-700">View Results</span>
                        </a>
                    @endif
                    <form action="{{ route('admin.surveys.duplicate', $survey) }}" method="POST">
                        @csrf
                        <button type="submit" class="w-full flex items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
                            <i class="fas fa-copy text-orange-500 w-8"></i>
                            <span class="text-sm font-medium text-gray-700">Duplicate Survey</span>
                        </button>
                    </form>
                </div>
            </div>
            
            <!-- Shareable Links -->
            <div class="card">
                <div class="card-header flex items-center justify-between">
                    <h3 class="font-semibold text-secondary-900">Shareable Links</h3>
                    <span class="badge badge-secondary">{{ $survey->links->count() }}</span>
                </div>
                <div class="card-body">
                    @if($survey->links->count() > 0)
                        <div class="space-y-3">
                            @foreach($survey->links as $link)
                                <div class="p-3 bg-gray-50 rounded-lg">
                                    <div class="flex items-center justify-between mb-2">
                                        <span class="text-sm font-medium">{{ $link->name }}</span>
                                        @if($link->is_active)
                                            <span class="w-2 h-2 bg-green-500 rounded-full"></span>
                                        @else
                                            <span class="w-2 h-2 bg-gray-400 rounded-full"></span>
                                        @endif
                                    </div>
                                    <div class="flex items-center space-x-2">
                                        <input type="text" value="{{ $link->getSurveyUrl() }}" class="form-input text-xs flex-1" readonly>
                                        <button type="button" class="btn-ghost btn-sm" data-copy="{{ $link->getSurveyUrl() }}" title="Copy">
                                            <i class="fas fa-copy"></i>
                                        </button>
                                    </div>
                                    <p class="text-xs text-gray-500 mt-1">{{ $link->response_count }} responses</p>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <p class="text-sm text-gray-500 text-center py-4">No shareable links created</p>
                    @endif
                    <a href="{{ route('admin.surveys.invitations.index', $survey) }}" class="btn-outline btn-sm w-full mt-3">
                        Manage Links
                    </a>
                </div>
            </div>
            
            <!-- Danger Zone -->
            @if($survey->status !== 'active')
                <div class="card border-red-200">
                    <div class="card-header bg-red-50">
                        <h3 class="font-semibold text-red-700">Danger Zone</h3>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('admin.surveys.destroy', $survey) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this survey? This action cannot be undone.')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn-danger w-full">
                                <i class="fas fa-trash mr-2"></i>
                                Delete Survey
                            </button>
                        </form>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection