@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->name }}</h1>
            <p class="text-gray-600 mt-1">{{ $questionnaire->description ?? 'No description' }}</p>
        </div>
        <div class="flex gap-2">
            <a href="{{ route('questionnaires.edit', $questionnaire) }}" 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-edit mr-2"></i> Edit
            </a>
            <a href="{{ route('questionnaires.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>
    </div>

    <!-- Questions List -->
    <div class="space-y-4">
        @forelse($questionnaire->questions as $index => $question)
        <div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-blue-500">
            <!-- Question Header -->
            <div class="flex justify-between items-start mb-4">
                <div class="flex-1">
                    <h3 class="text-lg font-semibold text-gray-900">
                        {{ $index + 1 }}. {{ $question->question_text }}
                    </h3>
                    <p class="text-sm text-gray-600 mt-1">
                        <span class="inline-block px-3 py-1 rounded-full bg-blue-100 text-blue-800 text-xs font-semibold">
                            {{ ucfirst($question->question_type) }}
                        </span>
                        @if($question->is_mandatory)
                        <span class="inline-block px-3 py-1 rounded-full bg-red-100 text-red-800 text-xs font-semibold ml-2">
                            Required
                        </span>
                        @else
                        <span class="inline-block px-3 py-1 rounded-full bg-gray-100 text-gray-800 text-xs font-semibold ml-2">
                            Optional
                        </span>
                        @endif
                    </p>
                </div>
            </div>

            <!-- Question Details -->
            @if($question->options)
            <div class="mt-4">
                <p class="text-sm font-semibold text-gray-700 mb-2">Options:</p>
                <div class="pl-4 space-y-1">
                    @foreach(explode(',', $question->options) as $option)
                    <p class="text-sm text-gray-600">• {{ trim($option) }}</p>
                    @endforeach
                </div>
            </div>
            @endif
        </div>
        @empty
        <div class="bg-white rounded-lg shadow-sm p-8 text-center">
            <i class="fas fa-inbox text-4xl text-gray-300 mb-3 block"></i>
            <p class="text-gray-500 text-lg">No questions added to this template</p>
        </div>
        @endforelse
    </div>

    <!-- Summary -->
    <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">Total Questions</p>
            <p class="text-3xl font-bold text-blue-600 mt-2">{{ $questionnaire->questions->count() }}</p>
        </div>
        <div class="bg-green-50 rounded-lg p-4 border border-green-200">
            <p class="text-gray-600 text-sm">Required Questions</p>
            <p class="text-3xl font-bold text-green-600 mt-2">{{ $questionnaire->questions->where('is_mandatory', true)->count() }}</p>
        </div>
        <div class="bg-purple-50 rounded-lg p-4 border border-purple-200">
            <p class="text-gray-600 text-sm">Created Date</p>
            <p class="text-lg font-semibold text-purple-600 mt-2">{{ $questionnaire->created_at->format('M d, Y') }}</p>
        </div>
    </div>

    <!-- Delete Button -->
    <div class="mt-8">
        <form method="POST" action="{{ route('questionnaires.destroy', $questionnaire) }}" onsubmit="return confirm('Are you sure? This action cannot be undone.')">
            @csrf
            @method('DELETE')
            <button type="submit" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition">
                <i class="fas fa-trash mr-2"></i> Delete Template
            </button>
        </form>
    </div>
</div>
@endsection