@extends('layouts.admin')

@section('title', $survey->title)
@section('header', $survey->title)
@section('subheader', 'Survey Details')

@section('header-actions')
    <div class="flex items-center space-x-3">
        @if($survey->status === 'active')
            <a href="{{ route('company.surveys.distribution', $survey) }}" class="btn-primary">
                <i class="fas fa-paper-plane mr-2"></i>Invite Users
            </a>
        @endif
        <a href="{{ route('company.surveys.index') }}" class="btn-ghost">
            <i class="fas fa-arrow-left mr-2"></i>Back
        </a>
    </div>
@endsection

@section('content')
<div class="grid grid-cols-1 xl:grid-cols-4 gap-6">
    <!-- Main Content -->
    <div class="xl:col-span-3 space-y-6">
        
        <!-- Stats Cards -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div class="card p-4">
                <div class="flex items-center">
                    <div class="w-12 h-12 rounded-lg bg-blue-100 flex items-center justify-center mr-4">
                        <i class="fas fa-users text-blue-600"></i>
                    </div>
                    <div>
                        <p class="text-2xl font-bold text-gray-900">{{ $invitationStats['total'] }}</p>
                        <p class="text-sm text-gray-500">Total Invited</p>
                    </div>
                </div>
            </div>
            <div class="card p-4">
                <div class="flex items-center">
                    <div class="w-12 h-12 rounded-lg bg-green-100 flex items-center justify-center mr-4">
                        <i class="fas fa-check-circle text-green-600"></i>
                    </div>
                    <div>
                        <p class="text-2xl font-bold text-gray-900">{{ $invitationStats['completed'] }}</p>
                        <p class="text-sm text-gray-500">Completed</p>
                    </div>
                </div>
            </div>
            <div class="card p-4">
                <div class="flex items-center">
                    <div class="w-12 h-12 rounded-lg bg-yellow-100 flex items-center justify-center mr-4">
                        <i class="fas fa-clock text-yellow-600"></i>
                    </div>
                    <div>
                        <p class="text-2xl font-bold text-gray-900">{{ $invitationStats['pending'] }}</p>
                        <p class="text-sm text-gray-500">Pending</p>
                    </div>
                </div>
            </div>
            <div class="card p-4">
                <div class="flex items-center">
                    <div class="w-12 h-12 rounded-lg bg-purple-100 flex items-center justify-center mr-4">
                        <i class="fas fa-percentage text-purple-600"></i>
                    </div>
                    <div>
                        <p class="text-2xl font-bold text-gray-900">
                            {{ $invitationStats['total'] > 0 ? round(($invitationStats['completed'] / $invitationStats['total']) * 100) : 0 }}%
                        </p>
                        <p class="text-sm text-gray-500">Response Rate</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Survey Information -->
        <div class="card">
            <div class="card-header">
                <h3 class="font-semibold text-secondary-900">
                    <i class="fas fa-info-circle mr-2 text-gray-400"></i>Survey Information
                </h3>
            </div>
            <div class="card-body">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="text-sm text-gray-500">Description</label>
                        <p class="text-gray-700 mt-1">{{ $survey->description ?? 'No description provided' }}</p>
                    </div>
                    <div>
                        <label class="text-sm text-gray-500">Estimated Time</label>
                        <p class="text-gray-700 mt-1">{{ $survey->estimated_minutes ?? 10 }} minutes</p>
                    </div>
                    <div>
                        <label class="text-sm text-gray-500">Created On</label>
                        <p class="text-gray-700 mt-1">{{ $survey->created_at->format('F j, Y') }}</p>
                    </div>
                    <div>
                        <label class="text-sm text-gray-500">Status</label>
                        <p class="mt-1">
                            @if($survey->status === 'active')
                                <span class="badge badge-success">Active</span>
                            @elseif($survey->status === 'draft')
                                <span class="badge badge-warning">Draft</span>
                            @else
                                <span class="badge badge-secondary">Closed</span>
                            @endif
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Response Limit Progress -->
        @if($survey->max_responses)
        <div class="card">
            <div class="card-header">
                <h3 class="font-semibold text-secondary-900">
                    <i class="fas fa-users-cog mr-2 text-gray-400"></i>Response Limit
                </h3>
            </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())
                    <p class="text-sm text-red-600">
                        <i class="fas fa-exclamation-circle mr-1"></i>Response limit reached - Survey closed
                    </p>
                @else
                    <p class="text-sm text-green-600">
                        <i class="fas fa-check-circle mr-1"></i>{{ $survey->getRemainingResponses() }} responses remaining
                    </p>
                @endif
            </div>
        </div>
        @endif
    </div>

    <!-- Sidebar -->
    <div class="space-y-6">
        <!-- Status Card -->
        <div class="card">
            <div class="card-body text-center">
                @if($survey->status === 'active')
                    <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3">
                        <i class="fas fa-broadcast-tower text-green-600 text-2xl"></i>
                    </div>
                    <span class="text-lg font-semibold text-green-700">Active</span>
                    <p class="text-sm text-gray-500 mt-1">Collecting responses</p>
                @elseif($survey->status === 'draft')
                    <div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-3">
                        <i class="fas fa-pencil-alt text-yellow-600 text-2xl"></i>
                    </div>
                    <span class="text-lg font-semibold text-yellow-700">Draft</span>
                    <p class="text-sm text-gray-500 mt-1">Not yet published</p>
                @else
                    <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-3">
                        <i class="fas fa-archive text-gray-600 text-2xl"></i>
                    </div>
                    <span class="text-lg font-semibold text-gray-700">Closed</span>
                    <p class="text-sm text-gray-500 mt-1">No longer accepting</p>
                @endif
            </div>
        </div>

        <!-- Quick Actions -->
        <div class="card">
            <div class="card-header">
                <h3 class="font-semibold text-secondary-900">Quick Actions</h3>
            </div>
            <div class="card-body space-y-2">
                @if($survey->status === 'active')
                    <a href="{{ route('company.surveys.distribution', $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-blue-500 w-8"></i>
                        <span class="text-sm font-medium text-gray-700">Invite Users</span>
                    </a>
                @endif
                <a href="{{ route('company.analytics.engagement', ['survey' => $survey->id]) }}" class="flex items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
                    <i class="fas fa-chart-bar text-green-500 w-8"></i>
                    <span class="text-sm font-medium text-gray-700">View Analytics</span>
                </a>
                <a href="{{ route('company.reports.executive', ['survey' => $survey->id]) }}" class="flex items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
                    <i class="fas fa-file-alt text-purple-500 w-8"></i>
                    <span class="text-sm font-medium text-gray-700">View Reports</span>
                </a>
            </div>
        </div>

        <!-- Survey Link -->
        @if($survey->links && $survey->links->where('is_active', true)->count() > 0)
        <div class="card">
            <div class="card-header">
                <h3 class="font-semibold text-secondary-900">Survey Link</h3>
            </div>
            <div class="card-body">
                @php $link = $survey->links->where('is_active', true)->first(); @endphp
                <div class="flex items-center space-x-2">
                    <input type="text" value="{{ route('survey.welcome.link', $link->token) }}" 
                           class="form-input text-xs flex-1" readonly id="survey-link">
                    <button type="button" onclick="copyLink()" class="btn-secondary btn-sm">
                        <i class="fas fa-copy"></i>
                    </button>
                </div>
                <p class="text-xs text-gray-500 mt-2">Share this link to collect responses</p>
            </div>
        </div>
        @endif
    </div>
</div>

<script>
function copyLink() {
    const input = document.getElementById('survey-link');
    input.select();
    document.execCommand('copy');
    alert('Link copied to clipboard!');
}
</script>
@endsection