@extends('layouts.admin')

@section('title', 'Invite Users')
@section('header', 'Invite Users')
@section('subheader', $survey->title)

@section('header-actions')
    <a href="{{ route('company.surveys.show', $survey) }}" class="btn-ghost">
        <i class="fas fa-arrow-left mr-2"></i>Back to Survey
    </a>
@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">
        
        <!-- Survey Link Card -->
        <div class="card">
            <div class="card-header">
                <h3 class="font-semibold text-secondary-900">
                    <i class="fas fa-link mr-2 text-blue-500"></i>Survey Link
                </h3>
            </div>
            <div class="card-body">
                @if($links->count() > 0)
                    @foreach($links as $link)
                        <div class="mb-4 last:mb-0">
                            <label class="block text-sm font-medium text-gray-700 mb-2">{{ $link->name }}</label>
                            <div class="flex items-center space-x-2">
                                <input type="text" readonly value="{{ route('survey.welcome.link', $link->token) }}" 
                                       class="form-input flex-1 bg-gray-50" id="link-{{ $link->id }}">
                                <button onclick="copyLink('link-{{ $link->id }}')" class="btn-primary">
                                    <i class="fas fa-copy mr-2"></i>Copy
                                </button>
                            </div>
                            <p class="text-xs text-gray-500 mt-2">
                                <i class="fas fa-info-circle mr-1"></i>
                                Share this link with employees via email, chat, or any communication channel.
                            </p>
                        </div>
                    @endforeach
                @else
                    <p class="text-gray-500 text-center py-4">No distribution links available. Please contact your administrator.</p>
                @endif
            </div>
        </div>

        <!-- Email Invitations -->
        <div class="card">
            <div class="card-header">
                <h3 class="font-semibold text-secondary-900">
                    <i class="fas fa-envelope mr-2 text-purple-500"></i>Email Invitations
                </h3>
            </div>
            <div class="card-body">
                <form action="{{ route('company.surveys.send-invitations', $survey) }}" method="POST">
                    @csrf
                    <div class="mb-4">
                        <label class="form-label">Employee Email Addresses</label>
                        <textarea name="emails" rows="6" class="form-textarea w-full" 
                                  placeholder="Enter email addresses (one per line or comma-separated)&#10;&#10;employee1@company.com&#10;employee2@company.com&#10;employee3@company.com"></textarea>
                        <p class="text-xs text-gray-500 mt-1">Enter one email per line, or separate with commas</p>
                    </div>
                    <button type="submit" class="btn-primary">
                        <i class="fas fa-paper-plane mr-2"></i>Add & Send Invitations
                    </button>
                </form>
            </div>
        </div>

        <!-- CSV Import -->
        <div class="card">
            <div class="card-header">
                <h3 class="font-semibold text-secondary-900">
                    <i class="fas fa-file-csv mr-2 text-green-500"></i>Import from CSV
                </h3>
            </div>
            <div class="card-body">
                <form action="{{ route('company.surveys.import-invitations', $survey) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="mb-4">
                        <label class="form-label">Upload CSV File</label>
                        <input type="file" name="csv_file" accept=".csv,.txt" class="form-input w-full">
                        <p class="text-xs text-gray-500 mt-1">CSV file should have a column header named "email"</p>
                    </div>
                    <button type="submit" class="btn-primary">
                        <i class="fas fa-upload mr-2"></i>Import & Send
                    </button>
                </form>
            </div>
        </div>

        <!-- Invitation List -->
        @if($invitations->count() > 0)
        <div class="card">
            <div class="card-header flex items-center justify-between">
                <h3 class="font-semibold text-secondary-900">
                    <i class="fas fa-users mr-2 text-gray-400"></i>Invited Users
                </h3>
                <span class="text-sm text-gray-500">{{ $invitations->total() }} total</span>
            </div>
            <div class="overflow-x-auto">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Email</th>
                            <th class="text-center">Status</th>
                            <th>Invited On</th>
                            <th>Completed</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($invitations as $invitation)
                        <tr>
                            <td>{{ $invitation->email }}</td>
                            <td class="text-center">
                                @if($invitation->completed_at)
                                    <span class="badge badge-success">Completed</span>
                                @elseif($invitation->sent_at)
                                    <span class="badge badge-warning">Pending</span>
                                @else
                                    <span class="badge badge-secondary">Queued</span>
                                @endif
                            </td>
                            <td>{{ $invitation->sent_at ? $invitation->sent_at->format('M d, Y') : '-' }}</td>
                            <td>{{ $invitation->completed_at ? $invitation->completed_at->format('M d, Y H:i') : '-' }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            @if($invitations->hasPages())
                <div class="card-footer">
                    {{ $invitations->links() }}
                </div>
            @endif
        </div>
        @endif
    </div>

    <!-- Sidebar -->
    <div class="space-y-6">
        <!-- Stats Card -->
        <div class="card">
            <div class="card-header">
                <h3 class="font-semibold text-secondary-900">Invitation Statistics</h3>
            </div>
            <div class="card-body">
                <div class="grid grid-cols-2 gap-4">
                    <div class="text-center p-3 bg-blue-50 rounded-lg">
                        <div class="text-2xl font-bold text-blue-600">{{ $stats['total'] }}</div>
                        <div class="text-xs text-gray-500">Total Invited</div>
                    </div>
                    <div class="text-center p-3 bg-green-50 rounded-lg">
                        <div class="text-2xl font-bold text-green-600">{{ $stats['completed'] }}</div>
                        <div class="text-xs text-gray-500">Completed</div>
                    </div>
                    <div class="text-center p-3 bg-yellow-50 rounded-lg">
                        <div class="text-2xl font-bold text-yellow-600">{{ $stats['pending'] }}</div>
                        <div class="text-xs text-gray-500">Pending</div>
                    </div>
                    <div class="text-center p-3 bg-purple-50 rounded-lg">
                        <div class="text-2xl font-bold text-purple-600">{{ $responseCount }}</div>
                        <div class="text-xs text-gray-500">Responses</div>
                    </div>
                </div>
                
                @if($stats['total'] > 0)
                    <div class="mt-4 pt-4 border-t">
                        <div class="flex justify-between text-sm mb-1">
                            <span class="text-gray-600">Completion Rate</span>
                            <span class="font-medium">{{ round(($stats['completed'] / $stats['total']) * 100) }}%</span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-2">
                            <div class="bg-green-500 h-2 rounded-full" style="width: {{ ($stats['completed'] / $stats['total']) * 100 }}%"></div>
                        </div>
                    </div>
                @endif
            </div>
        </div>

        <!-- Send Reminders -->
        @if($stats['pending'] > 0)
        <div class="card">
            <div class="card-header">
                <h3 class="font-semibold text-secondary-900">Send Reminders</h3>
            </div>
            <div class="card-body">
                <p class="text-sm text-gray-600 mb-4">
                    <strong>{{ $stats['pending'] }}</strong> people haven't completed the survey yet.
                </p>
                <form action="{{ route('company.surveys.send-reminders', $survey) }}" method="POST">
                    @csrf
                    <button type="submit" class="btn-secondary w-full" onclick="return confirm('Send reminders to {{ $stats['pending'] }} people?')">
                        <i class="fas fa-bell mr-2"></i>Send Reminders
                    </button>
                </form>
            </div>
        </div>
        @endif

        <!-- Response Limit -->
        @if($survey->max_responses)
        <div class="card">
            <div class="card-header">
                <h3 class="font-semibold text-secondary-900">Response Limit</h3>
            </div>
            <div class="card-body">
                <div class="flex justify-between text-sm mb-2">
                    <span class="text-gray-600">Progress</span>
                    <span class="font-medium">{{ $responseCount }} / {{ $survey->max_responses }}</span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-3">
                    <div class="h-3 rounded-full {{ $survey->hasReachedLimit() ? 'bg-red-500' : 'bg-blue-500' }}"
                         style="width: {{ min(100, ($responseCount / $survey->max_responses) * 100) }}%"></div>
                </div>
                @if($survey->hasReachedLimit())
                    <p class="text-xs text-red-500 mt-2">
                        <i class="fas fa-exclamation-circle mr-1"></i>Response limit reached
                    </p>
                @else
                    <p class="text-xs text-gray-500 mt-2">
                        {{ $survey->getRemainingResponses() }} responses remaining
                    </p>
                @endif
            </div>
        </div>
        @endif
    </div>
</div>

<script>
function copyLink(inputId) {
    const input = document.getElementById(inputId);
    input.select();
    document.execCommand('copy');
    
    const btn = input.nextElementSibling;
    const originalText = btn.innerHTML;
    btn.innerHTML = '<i class="fas fa-check mr-2"></i>Copied!';
    
    setTimeout(() => {
        btn.innerHTML = originalText;
    }, 2000);
}
</script>
@endsection