@extends('layouts.admin')

@section('title', 'Distribution & Invitations')
@section('header', 'Distribution & Invitations')
@section('subheader', $survey->title)

@section('header-actions')
    <a href="{{ route('admin.surveys.show', $survey) }}" class="btn-ghost">
        <i class="fas fa-arrow-left mr-2"></i>Back to Survey
    </a>
@endsection

@php
    $defaultBody = "Dear Colleague,

You are invited to participate in the " . $survey->title . ".

Your feedback is valuable and will help us improve our workplace.

Click the link below to start the survey:
{survey_link}

This survey is anonymous and will take approximately " . ($survey->estimated_minutes ?? 10) . " minutes to complete.

Thank you for your participation.

Best regards,
" . ($survey->company->name ?? 'HR Team');
@endphp

@section('content')
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Left Column -->
    <div class="lg:col-span-2 space-y-6">
        
        <!-- Distribution Links Section -->
        <div class="card">
            <div class="card-header flex items-center justify-between">
                <h3 class="font-semibold text-secondary-900">
                    <i class="fas fa-link mr-2 text-blue-500"></i>Distribution Links
                </h3>
                <button onclick="openModal('createLinkModal')" class="btn-primary btn-sm">
                    <i class="fas fa-plus mr-1"></i> New Link
                </button>
            </div>
            <div class="card-body">
                @if($links->count() > 0)
                    <div class="space-y-4">
                        @foreach($links as $link)
                            <div class="border rounded-lg p-4 {{ $link->is_active ? 'bg-white' : 'bg-gray-50' }}">
                                <div class="flex items-center justify-between mb-2">
                                    <h4 class="font-medium">{{ $link->name }}</h4>
                                    <div class="flex items-center space-x-2">
                                        <span class="px-2 py-1 text-xs rounded-full {{ $link->is_active ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-700' }}">
                                            {{ $link->is_active ? 'Active' : 'Inactive' }}
                                        </span>
                                        <form action="{{ route('admin.surveys.links.toggle', $link) }}" method="POST" class="inline">
                                            @csrf
                                            @method('PATCH')
                                            <button type="submit" class="text-gray-400 hover:text-gray-600" title="{{ $link->is_active ? 'Deactivate' : 'Activate' }}">
                                                <i class="fas {{ $link->is_active ? 'fa-pause' : 'fa-play' }}"></i>
                                            </button>
                                        </form>
                                    </div>
                                </div>
                                
                                <div class="flex items-center space-x-2 mb-3">
                                    <input type="text" readonly value="{{ route('survey.welcome.link', $link->token) }}" 
                                           class="flex-1 text-sm bg-gray-100 border-0 rounded px-3 py-2" id="link-{{ $link->id }}">
                                    <button onclick="copyLink('link-{{ $link->id }}')" class="btn-ghost btn-sm">
                                        <i class="fas fa-copy"></i>
                                    </button>
                                </div>
                                
                                <div class="flex items-center text-sm text-gray-500 space-x-4">
                                    <span><i class="fas fa-clock mr-1"></i> Created {{ $link->created_at->diffForHumans() }}</span>
                                    @if($link->max_responses)
                                        <span><i class="fas fa-users mr-1"></i> Max: {{ $link->max_responses }}</span>
                                    @endif
                                    @if($link->expires_at)
                                        <span><i class="fas fa-calendar mr-1"></i> Expires: {{ $link->expires_at->format('M d, Y') }}</span>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="text-center py-8 text-gray-500">
                        <i class="fas fa-link text-4xl mb-4"></i>
                        <p>No distribution links yet.</p>
                        <p class="text-sm">Create a link to share the survey.</p>
                    </div>
                @endif
            </div>
        </div>

        <!-- Manual Email Entry -->
        <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('admin.surveys.invitations.send', $survey) }}" method="POST">
                    @csrf
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Email Addresses</label>
                        <textarea name="emails" rows="5" class="form-textarea w-full" 
                                  placeholder="Enter email addresses (one per line or comma-separated)&#10;example1@company.com&#10;example2@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>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('admin.surveys.invitations.import', $survey) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">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 should have an 'email' column header</p>
                    </div>
                    <button type="submit" class="btn-primary">
                        <i class="fas fa-upload mr-2"></i>Import & Send
                    </button>
                </form>
            </div>
        </div>

        <!-- Email Template -->
        <div class="card">
            <div class="card-header">
                <h3 class="font-semibold text-secondary-900">
                    <i class="fas fa-file-alt mr-2 text-orange-500"></i>Email Template
                </h3>
            </div>
            <div class="card-body">
                <form action="{{ route('admin.surveys.invitations.template', $survey) }}" method="POST">
                    @csrf
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Email Subject</label>
                        <input type="text" name="email_subject" class="form-input w-full" 
                               value="{{ $survey->email_subject ?? 'You are invited to participate in our survey' }}">
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Email Body</label>
                        <textarea name="email_body" rows="8" class="form-textarea w-full">{{ $survey->email_body ?? $defaultBody }}</textarea>
                        <p class="text-xs text-gray-500 mt-1">
                            Available placeholders: <code>{survey_link}</code>, <code>{recipient_email}</code>, <code>{company_name}</code>
                        </p>
                    </div>
                    <button type="submit" class="btn-secondary">
                        <i class="fas fa-save mr-2"></i>Save Template
                    </button>
                </form>
            </div>
        </div>
    </div>

    <!-- Right Column - Stats -->
    <div class="space-y-6">
        <!-- Invitation Stats -->
        <div class="card">
            <div class="card-header">
                <h3 class="font-semibold text-secondary-900">Invitation Stats</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</div>
                    </div>
                    <div class="text-center p-3 bg-green-50 rounded-lg">
                        <div class="text-2xl font-bold text-green-600">{{ $stats['sent'] }}</div>
                        <div class="text-xs text-gray-500">Sent</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">{{ $stats['completed'] }}</div>
                        <div class="text-xs text-gray-500">Completed</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">Response 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">Send reminder emails to {{ $stats['pending'] }} people who haven't completed the survey.</p>
                <form action="{{ route('admin.surveys.invitations.remind', $survey) }}" method="POST">
                    @csrf
                    <button type="submit" class="btn-secondary w-full" onclick="return confirm('Send reminders to {{ $stats['pending'] }} recipients?')">
                        <i class="fas fa-bell mr-2"></i>Send Reminders
                    </button>
                </form>
            </div>
        </div>
        @endif

        <!-- Survey Info -->
        <div class="card">
            <div class="card-header">
                <h3 class="font-semibold text-secondary-900">Survey Info</h3>
            </div>
            <div class="card-body space-y-3">
                <div>
                    <span class="text-sm text-gray-500">Company</span>
                    <p class="font-medium">{{ $survey->company->name ?? 'N/A' }}</p>
                </div>
                <div>
                    <span class="text-sm text-gray-500">Status</span>
                    <p>
                        <span class="px-2 py-1 text-xs rounded-full 
                            {{ $survey->status === 'active' ? 'bg-green-100 text-green-700' : '' }}
                            {{ $survey->status === 'draft' ? 'bg-gray-100 text-gray-700' : '' }}
                            {{ $survey->status === 'closed' ? 'bg-red-100 text-red-700' : '' }}">
                            {{ ucfirst($survey->status) }}
                        </span>
                    </p>
                </div>
                <div>
                    <span class="text-sm text-gray-500">Responses</span>
                    <p class="font-medium">{{ $responseCount }}</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Invitation List -->
@if($invitations->count() > 0)
<div class="card mt-6">
    <div class="card-header flex items-center justify-between">
        <h3 class="font-semibold text-secondary-900">Invitation List</h3>
        <span class="text-sm text-gray-500">{{ $invitations->total() }} invitations</span>
    </div>
    <div class="overflow-x-auto">
        <table class="table">
            <thead>
                <tr>
                    <th>Email</th>
                    <th>Status</th>
                    <th>Sent At</th>
                    <th>Completed At</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($invitations as $invitation)
                <tr>
                    <td>{{ $invitation->email }}</td>
                    <td>
                        @if($invitation->completed_at)
                            <span class="badge badge-success">Completed</span>
                        @elseif($invitation->sent_at)
                            <span class="badge badge-warning">Sent</span>
                        @else
                            <span class="badge badge-secondary">Pending</span>
                        @endif
                    </td>
                    <td>{{ $invitation->sent_at ? $invitation->sent_at->format('M d, Y H:i') : '-' }}</td>
                    <td>{{ $invitation->completed_at ? $invitation->completed_at->format('M d, Y H:i') : '-' }}</td>
                    <td>
                        @if(!$invitation->completed_at && $invitation->sent_at)
                            <form action="{{ route('admin.surveys.invitations.resend', [$survey, $invitation]) }}" method="POST" class="inline">
                                @csrf
                                <button type="submit" class="text-blue-500 hover:text-blue-700" title="Resend">
                                    <i class="fas fa-redo"></i>
                                </button>
                            </form>
                        @endif
                        <form action="{{ route('admin.surveys.invitations.delete', [$survey, $invitation]) }}" method="POST" class="inline ml-2">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="text-red-500 hover:text-red-700" title="Delete" onclick="return confirm('Delete this invitation?')">
                                <i class="fas fa-trash"></i>
                            </button>
                        </form>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    @if($invitations->hasPages())
        <div class="card-body border-t">
            {{ $invitations->links() }}
        </div>
    @endif
</div>
@endif

<!-- Create Link Modal -->
<div id="createLinkModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden items-center justify-center">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-md mx-4">
        <div class="p-6 border-b">
            <h3 class="text-lg font-semibold">Create Distribution Link</h3>
        </div>
        <form action="{{ route('admin.surveys.links.create', $survey) }}" method="POST">
            @csrf
            <div class="p-6 space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Link Name</label>
                    <input type="text" name="name" required class="form-input w-full" placeholder="e.g., HR Department, Marketing Team">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Max Responses (optional)</label>
                    <input type="number" name="max_responses" min="1" class="form-input w-full" placeholder="Leave empty for unlimited">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Expiry Date (optional)</label>
                    <input type="date" name="expires_at" class="form-input w-full" min="{{ date('Y-m-d', strtotime('+1 day')) }}">
                </div>
            </div>
            <div class="p-6 border-t bg-gray-50 flex justify-end space-x-3 rounded-b-xl">
                <button type="button" onclick="closeModal('createLinkModal')" class="btn-ghost">Cancel</button>
                <button type="submit" class="btn-primary">Create Link</button>
            </div>
        </form>
    </div>
</div>

<script>
function openModal(id) {
    document.getElementById(id).classList.remove('hidden');
    document.getElementById(id).classList.add('flex');
}

function closeModal(id) {
    document.getElementById(id).classList.add('hidden');
    document.getElementById(id).classList.remove('flex');
}

function copyLink(inputId) {
    const input = document.getElementById(inputId);
    input.select();
    document.execCommand('copy');
    
    const btn = input.nextElementSibling;
    const originalHtml = btn.innerHTML;
    btn.innerHTML = '<i class="fas fa-check text-green-500"></i>';
    setTimeout(() => {
        btn.innerHTML = originalHtml;
    }, 2000);
}

document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        document.querySelectorAll('[id$="Modal"]').forEach(modal => {
            modal.classList.add('hidden');
            modal.classList.remove('flex');
        });
    }
});
</script>
@endsection