@extends('layouts.app')

@section('content')
<div class="container-fluid px-4 py-6">
    <!-- Header -->
    <div class="flex justify-between items-center mb-6">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">Questionnaire Responses</h1>
            <p class="text-gray-600 mt-1">View and manage all questionnaire responses</p>
        </div>
        <a href="{{ route('responses.export') }}" class="inline-flex items-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition">
            <i class="fas fa-download mr-2"></i> Export CSV
        </a>
    </div>

    <!-- Search and Filters -->
    <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
        <form method="GET" action="{{ route('responses.index') }}" class="grid grid-cols-1 md:grid-cols-3 gap-3">
            <input type="text" name="search" placeholder="Search by lead company..." value="{{ request('search') }}" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
            <select name="template_id" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                <option value="">All Templates</option>
                @foreach(\App\Models\QuestionnaireTemplate::all() as $template)
                <option value="{{ $template->id }}" {{ request('template_id') == $template->id ? 'selected' : '' }}>
                    {{ $template->name }}
                </option>
                @endforeach
            </select>
            <button type="submit" class="px-4 py-2 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 transition">
                <i class="fas fa-search mr-2"></i> Search
            </button>
        </form>
    </div>

    <!-- Table -->
    <div class="bg-white rounded-lg shadow-sm overflow-hidden">
        <table class="w-full">
            <thead>
                <tr class="border-b border-gray-200 bg-gray-50">
                    <th class="px-6 py-4 text-left text-sm font-semibold text-gray-900">Company</th>
                    <th class="px-6 py-4 text-left text-sm font-semibold text-gray-900">Contact Person</th>
                    <th class="px-6 py-4 text-left text-sm font-semibold text-gray-900">Template</th>
                    <th class="px-6 py-4 text-left text-sm font-semibold text-gray-900">Response Date</th>
                    <th class="px-6 py-4 text-left text-sm font-semibold text-gray-900">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($responses as $response)
                <tr class="border-b border-gray-200 hover:bg-gray-50 transition">
                    <td class="px-6 py-4">
                        <a href="{{ route('leads.show', $response->lead->id) }}" class="text-blue-600 hover:text-blue-700 font-medium">
                            {{ $response->lead->company_name }}
                        </a>
                    </td>
                    <td class="px-6 py-4 text-gray-600">{{ $response->lead->contact_person_name }}</td>
                    <td class="px-6 py-4">
                        <span class="inline-block px-3 py-1 rounded-full bg-blue-100 text-blue-800 text-sm font-semibold">
                            {{ $response->question->template->name ?? 'N/A' }}
                        </span>
                    </td>
                    <td class="px-6 py-4 text-gray-600 text-sm">
                        {{ $response->created_at->format('M d, Y H:i') }}
                    </td>
                    <td class="px-6 py-4 text-sm">
                        <a href="{{ route('responses.show', $response) }}" class="text-blue-600 hover:text-blue-700 font-medium">
                            <i class="fas fa-eye mr-1"></i> View
                        </a>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="5" class="px-6 py-8 text-center text-gray-500">
                        <i class="fas fa-inbox text-4xl text-gray-300 mb-3 block"></i>
                        <p class="text-lg">No responses found</p>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    <div class="mt-6">
        {{ $responses->links() }}
    </div>
</div>
@endsection