@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">Response: {{ $response->question->template->name ?? 'N/A' }}</h1>
            <p class="text-gray-600 mt-1">{{ $response->lead->company_name }} - {{ $response->created_at->format('M d, Y H:i') }}</p>
        </div>
        <a href="{{ route('responses.index') }}" class="inline-flex items-center px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition">
            <i class="fas fa-arrow-left mr-2"></i> Back
        </a>
    </div>

    <!-- Lead Info Card -->
    <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
        <h2 class="text-xl font-semibold text-gray-900 mb-4">Lead Information</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <p class="text-gray-600 text-sm">Company Name</p>
                <p class="text-lg font-semibold text-gray-900">{{ $response->lead->company_name }}</p>
            </div>
            <div>
                <p class="text-gray-600 text-sm">Contact Person</p>
                <p class="text-lg font-semibold text-gray-900">{{ $response->lead->contact_person_name }}</p>
            </div>
            <div>
                <p class="text-gray-600 text-sm">Email</p>
                <p class="text-lg font-semibold text-gray-900">{{ $response->lead->email }}</p>
            </div>
            <div>
                <p class="text-gray-600 text-sm">Mobile</p>
                <p class="text-lg font-semibold text-gray-900">{{ $response->lead->mobile_number }}</p>
            </div>
        </div>
    </div>

    <!-- Response Answers -->
    <div class="space-y-4">
        <h2 class="text-xl font-semibold text-gray-900">Answers</h2>
        
        @forelse($response->question->template->questions ?? [] as $index => $question)
        <div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-blue-500">
            <h3 class="text-lg font-semibold text-gray-900 mb-3">
                {{ $index + 1 }}. {{ $question->question_text }}
            </h3>
            
            <div class="bg-blue-50 rounded p-4 border border-blue-200">
                @php
                    $responses = json_decode($response->responses_data, true) ?? [];
                    $answer = $responses[$question->id] ?? 'Not answered';
                @endphp
                <p class="text-gray-900 font-medium">
                    {{ is_array($answer) ? implode(', ', $answer) : $answer }}
                </p>
            </div>
        </div>
        @empty
        <div class="bg-white rounded-lg shadow-sm p-8 text-center">
            <p class="text-gray-500">No questions in this template</p>
        </div>
        @endforelse
    </div>

    <!-- Response Metadata -->
    <div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="bg-blue-50 rounded-lg p-4 border border-blue-200">
            <p class="text-gray-600 text-sm">Submitted On</p>
            <p class="text-lg font-semibold text-blue-600 mt-2">{{ $response->created_at->format('M d, Y H:i:s') }}</p>
        </div>
        <div class="bg-green-50 rounded-lg p-4 border border-green-200">
            <p class="text-gray-600 text-sm">Total Questions</p>
            <p class="text-lg font-semibold text-green-600 mt-2">{{ $response->question->template->questions->count() ?? 0 }}</p>
        </div>
        <div class="bg-purple-50 rounded-lg p-4 border border-purple-200">
            <p class="text-gray-600 text-sm">Template Name</p>
            <p class="text-lg font-semibold text-purple-600 mt-2">{{ $response->question->template->name ?? 'N/A' }}</p>
        </div>
    </div>
</div>
@endsection