@extends('admin.layout')

@section('content')
<div class="max-w-7xl mx-auto">
    <!-- Header -->
    <div class="flex justify-between items-center mb-6">
        <div class="flex items-center">
            @if($subject->image_url)
            <img class="h-16 w-16 rounded-full object-cover mr-4" src="{{ $subject->image_url }}" alt="{{ $subject->name }}">
            @else
            <div class="h-16 w-16 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold text-2xl mr-4"
                 style="{{ $subject->color ? 'background-color: ' . $subject->color : '' }}">
                {{ substr($subject->name, 0, 1) }}
            </div>
            @endif
            <div>
                <h1 class="text-3xl font-bold text-gray-800">{{ $subject->name }}</h1>
                <p class="text-gray-600">
                    <code class="bg-gray-100 px-2 py-1 rounded">{{ $subject->code }}</code>
                    • 
                    <span class="text-sm text-gray-500">Created {{ $subject->created_at->format('M j, Y') }}</span>
                </p>
            </div>
        </div>
        <div class="flex space-x-3">
            <a href="{{ route('admin.subjects.index') }}" class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg flex items-center">
                <i class="fas fa-arrow-left mr-2"></i> Back
            </a>
            <a href="{{ route('admin.subjects.edit', $subject) }}" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg flex items-center">
                <i class="fas fa-edit mr-2"></i> Edit
            </a>
            <form action="{{ route('admin.subjects.toggle-status', $subject) }}" method="POST">
                @csrf
                @method('PATCH')
                <button type="submit" 
                        class="bg-{{ $subject->is_active ? 'orange' : 'blue' }}-600 hover:bg-{{ $subject->is_active ? 'orange' : 'blue' }}-700 text-white px-4 py-2 rounded-lg flex items-center">
                    <i class="fas {{ $subject->is_active ? 'fa-eye-slash' : 'fa-eye' }} mr-2"></i>
                    {{ $subject->is_active ? 'Deactivate' : 'Activate' }}
                </button>
            </form>
            <form action="{{ route('admin.subjects.destroy', $subject) }}" method="POST">
                @csrf
                @method('DELETE')
                <button type="submit" 
                        onclick="return confirm('Are you sure you want to delete this subject?')"
                        class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg flex items-center">
                    <i class="fas fa-trash mr-2"></i> Delete
                </button>
            </form>
        </div>
    </div>

    <!-- Subject Stats -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-blue-100 text-blue-600">
                    <i class="fas fa-file-alt text-xl"></i>
                </div>
                <div class="ml-4">
                    <h3 class="text-lg font-semibold text-gray-600">Total Tests</h3>
                    <p class="text-3xl font-bold text-gray-800">{{ $stats['total_tests'] }}</p>
                </div>
            </div>
        </div>
        
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-green-100 text-green-600">
                    <i class="fas fa-users text-xl"></i>
                </div>
                <div class="ml-4">
                    <h3 class="text-lg font-semibold text-gray-600">Total Registrations</h3>
                    <p class="text-3xl font-bold text-gray-800">{{ $stats['total_registrations'] }}</p>
                </div>
            </div>
        </div>
        
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-purple-100 text-purple-600">
                    <i class="fas fa-check-circle text-xl"></i>
                </div>
                <div class="ml-4">
                    <h3 class="text-lg font-semibold text-gray-600">Active Registrations</h3>
                    <p class="text-3xl font-bold text-gray-800">{{ $stats['active_registrations'] }}</p>
                </div>
            </div>
        </div>
        
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
                    <i class="fas fa-chart-line text-xl"></i>
                </div>
                <div class="ml-4">
                    <h3 class="text-lg font-semibold text-gray-600">Avg Test Score</h3>
                    <p class="text-3xl font-bold text-gray-800">{{ number_format($stats['average_test_score'] ?? 0, 1) }}</p>
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Subject Information -->
        <div class="lg:col-span-2 space-y-6">
            <!-- Basic Information -->
            <div class="bg-white rounded-lg shadow">
                <div class="p-4 border-b">
                    <h2 class="text-lg font-semibold text-gray-800">Subject Information</h2>
                </div>
                <div class="p-4">
                    <div class="space-y-4">
                        <div>
                            <label class="text-sm font-medium text-gray-600">Name</label>
                            <p class="text-gray-900">{{ $subject->name }}</p>
                        </div>
                        <div>
                            <label class="text-sm font-medium text-gray-600">Code</label>
                            <p class="text-gray-900"><code class="bg-gray-100 px-2 py-1 rounded">{{ $subject->code }}</code></p>
                        </div>
                        <div>
                            <label class="text-sm font-medium text-gray-600">Description</label>
                            <p class="text-gray-900">{{ $subject->description }}</p>
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="text-sm font-medium text-gray-600">Status</label>
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                                    {{ $subject->is_active ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                                    {{ $subject->is_active ? 'Active' : 'Inactive' }}
                                </span>
                            </div>
                            <div>
                                <label class="text-sm font-medium text-gray-600">Created</label>
                                <p class="text-gray-900">{{ $subject->created_at->format('M j, Y') }}</p>
                            </div>
                        </div>
                        @if($subject->image_url)
                        <div>
                            <label class="text-sm font-medium text-gray-600">Image</label>
                            <div class="mt-2">
                                <img src="{{ $subject->image_url }}" alt="{{ $subject->name }}" class="h-32 w-32 object-cover rounded-lg">
                            </div>
                        </div>
                        @endif
                        @if($subject->color)
                        <div>
                            <label class="text-sm font-medium text-gray-600">Color</label>
                            <div class="flex items-center mt-2">
                                <div class="w-8 h-8 rounded-full border border-gray-300 mr-2" style="background-color: {{ $subject->color }}"></div>
                                <span class="text-gray-900">{{ $subject->color }}</span>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Tests -->
            @if($subject->tests->count() > 0)
            <div class="bg-white rounded-lg shadow">
                <div class="p-4 border-b">
                    <h2 class="text-lg font-semibold text-gray-800">Tests ({{ $subject->tests->count() }})</h2>
                </div>
                <div class="p-4">
                    <div class="space-y-3">
                        @foreach($subject->tests->take(5) as $test)
                        <div class="flex justify-between items-center py-2 border-b last:border-b-0">
                            <div>
                                <p class="font-medium text-gray-800">{{ $test->title }}</p>
                                <p class="text-sm text-gray-600">
                                    Level: {{ $test->competitionLevel->name ?? 'N/A' }} • 
                                    Questions: {{ $test->questions_count ?? $test->questions->count() }} • 
                                    Time: {{ $test->time_limit }}min
                                </p>
                            </div>
                            <span class="px-2 py-1 text-xs rounded-full 
                                {{ $test->is_active ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                                {{ $test->is_active ? 'Active' : 'Inactive' }}
                            </span>
                        </div>
                        @endforeach
                        @if($subject->tests->count() > 5)
                        <div class="text-center pt-2">
                            <a href="#" class="text-blue-600 hover:text-blue-800 text-sm">
                                View all {{ $subject->tests->count() }} tests
                            </a>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
            @endif
        </div>

        <!-- Sidebar -->
        <div class="space-y-6">
            <!-- Recent Registrations -->
            <div class="bg-white rounded-lg shadow">
                <div class="p-4 border-b">
                    <h2 class="text-lg font-semibold text-gray-800">Recent Registrations</h2>
                </div>
                <div class="p-4">
                    @if($subject->subjectRegistrations->count() > 0)
                    <div class="space-y-3">
                        @foreach($subject->subjectRegistrations->take(5) as $registration)
                        <div class="py-2 border-b last:border-b-0">
                            <p class="font-medium text-gray-800 text-sm">{{ $registration->user->full_name }}</p>
                            <div class="flex justify-between items-center mt-1">
                                <span class="px-2 py-1 text-xs rounded-full 
                                    {{ $registration->payment_status === 'completed' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800' }}">
                                    {{ ucfirst($registration->payment_status) }}
                                </span>
                                <span class="text-xs text-gray-500">{{ $registration->registered_at->format('M j') }}</span>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    @else
                    <p class="text-gray-500 text-center py-4">No registrations yet</p>
                    @endif
                </div>
            </div>

            <!-- Qualification Thresholds -->
            @if($subject->qualificationThresholds->count() > 0)
            <div class="bg-white rounded-lg shadow">
                <div class="p-4 border-b">
                    <h2 class="text-lg font-semibold text-gray-800">Qualification Thresholds</h2>
                </div>
                <div class="p-4">
                    <div class="space-y-3">
                        @foreach($subject->qualificationThresholds as $threshold)
                        <div class="py-2 border-b last:border-b-0">
                            <p class="font-medium text-gray-800 text-sm">Level {{ $threshold->competitionLevel->level ?? 'N/A' }}</p>
                            <p class="text-xs text-gray-600">
                                Type: {{ $threshold->threshold_type }} • 
                                Value: {{ $threshold->threshold_value }}
                            </p>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection