@extends('layouts.dashboard')

@section('title', $student->user->name ?? 'Student Details')

@section('page-content')
<div x-data="{ activeTab: 'overview' }">
    <div class="mb-6">
        <div class="flex items-center space-x-2 text-sm text-gray-600 mb-2">
            <a href="{{ route('students.index') }}" class="hover:text-gray-900">Students</a>
            <span>/</span>
            <span class="text-gray-900">{{ $student->student_id }}</span>
        </div>
        <div class="flex items-center justify-between">
            <h1 class="text-2xl font-bold text-gray-900">Student Profile</h1>
            @can('update-students')
            <a href="{{ route('students.edit', $student) }}" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
                Edit Student
            </a>
            @endcan
        </div>
    </div>

    <!-- Student Header Card -->
    <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
        <div class="flex items-start space-x-6">
            <div class="w-24 h-24 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white text-3xl font-bold flex-shrink-0">
                {{ strtoupper(substr($student->user->name ?? 'ST', 0, 2)) }}
            </div>
            <div class="flex-1">
                <div class="flex items-start justify-between">
                    <div>
                        <h2 class="text-2xl font-bold text-gray-900">{{ $student->user->name ?? 'N/A' }}</h2>
                        <p class="text-gray-600 mt-1">{{ $student->program->name ?? 'N/A' }}</p>
                    </div>
                    @if($student->status === 'active')
                        <span class="px-3 py-1 text-sm font-semibold rounded-full bg-green-100 text-green-800">Active</span>
                    @elseif($student->status === 'graduated')
                        <span class="px-3 py-1 text-sm font-semibold rounded-full bg-blue-100 text-blue-800">Graduated</span>
                    @else
                        <span class="px-3 py-1 text-sm font-semibold rounded-full bg-gray-100 text-gray-800">{{ ucfirst($student->status) }}</span>
                    @endif
                </div>
                <div class="mt-4 grid grid-cols-2 md:grid-cols-4 gap-4">
                    <div>
                        <p class="text-sm text-gray-600">Student ID</p>
                        <p class="font-semibold text-gray-900">{{ $student->student_id }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-600">Current Level</p>
                        <p class="font-semibold text-gray-900">Level {{ $student->current_level }}</p>
                    </div>
                    @if($student->cgpa)
                    <div>
                        <p class="text-sm text-gray-600">CGPA</p>
                        <p class="font-semibold text-gray-900">{{ number_format($student->cgpa, 2) }}</p>
                    </div>
                    @endif
                    <div>
                        <p class="text-sm text-gray-600">Admission Date</p>
                        <p class="font-semibold text-gray-900">{{ $student->admission_date?->format('M Y') }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Tabs -->
    <div class="border-b border-gray-200 mb-6">
        <nav class="-mb-px flex space-x-8">
            <button @click="activeTab = 'overview'" 
                    :class="activeTab === 'overview' ? 'border-blue-600 text-blue-600' : 'border-transparent text-gray-600 hover:text-gray-900'"
                    class="py-4 px-1 border-b-2 font-medium text-sm">
                Overview
            </button>
            <button @click="activeTab = 'documents'" 
                    :class="activeTab === 'documents' ? 'border-blue-600 text-blue-600' : 'border-transparent text-gray-600 hover:text-gray-900'"
                    class="py-4 px-1 border-b-2 font-medium text-sm">
                Documents
            </button>
            <button @click="activeTab = 'academic'" 
                    :class="activeTab === 'academic' ? 'border-blue-600 text-blue-600' : 'border-transparent text-gray-600 hover:text-gray-900'"
                    class="py-4 px-1 border-b-2 font-medium text-sm">
                Academic Records
            </button>
        </nav>
    </div>

    <!-- Overview Tab -->
    <div x-show="activeTab === 'overview'" class="space-y-6">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <!-- Academic Information -->
            <div class="bg-white rounded-lg shadow-sm p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Academic Information</h3>
                <dl class="space-y-3">
                    <div class="flex justify-between">
                        <dt class="text-gray-600">Program</dt>
                        <dd class="font-medium text-gray-900">{{ $student->program->name ?? 'N/A' }}</dd>
                    </div>
                    <div class="flex justify-between">
                        <dt class="text-gray-600">Department</dt>
                        <dd class="font-medium text-gray-900">{{ $student->program->department->name ?? 'N/A' }}</dd>
                    </div>
                    <div class="flex justify-between">
                        <dt class="text-gray-600">Academic Year</dt>
                        <dd class="font-medium text-gray-900">{{ $student->academicYear->name ?? 'N/A' }}</dd>
                    </div>
                    <div class="flex justify-between">
                        <dt class="text-gray-600">Current Semester</dt>
                        <dd class="font-medium text-gray-900">{{ $student->currentSemester->name ?? 'N/A' }}</dd>
                    </div>
                    <div class="flex justify-between">
                        <dt class="text-gray-600">Admission Date</dt>
                        <dd class="font-medium text-gray-900">{{ $student->admission_date?->format('M d, Y') }}</dd>
                    </div>
                </dl>
            </div>

            <!-- Contact Information -->
            <div class="bg-white rounded-lg shadow-sm p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Contact Information</h3>
                <dl class="space-y-3">
                    <div class="flex justify-between">
                        <dt class="text-gray-600">Email</dt>
                        <dd class="font-medium text-gray-900">{{ $student->user->email ?? 'N/A' }}</dd>
                    </div>
                    @if($student->user?->phone)
                    <div class="flex justify-between">
                        <dt class="text-gray-600">Phone</dt>
                        <dd class="font-medium text-gray-900">{{ $student->user->phone }}</dd>
                    </div>
                    @endif
                    @if($student->registration_number)
                    <div class="flex justify-between">
                        <dt class="text-gray-600">Registration Number</dt>
                        <dd class="font-medium text-gray-900">{{ $student->registration_number }}</dd>
                    </div>
                    @endif
                </dl>
            </div>

            <!-- Academic Progress -->
            @if($student->cgpa || $student->credits_earned)
            <div class="bg-white rounded-lg shadow-sm p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Academic Progress</h3>
                @if($student->cgpa)
                <div class="mb-4">
                    <div class="flex justify-between mb-1">
                        <span class="text-gray-600">CGPA</span>
                        <span class="font-semibold text-gray-900">{{ number_format($student->cgpa, 2) }} / 4.00</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2">
                        <div class="bg-blue-600 rounded-full h-2" style="width: {{ ($student->cgpa / 4) * 100 }}%"></div>
                    </div>
                </div>
                @endif
                @if($student->credits_earned && $student->credits_required)
                <div>
                    <div class="flex justify-between mb-1">
                        <span class="text-gray-600">Credits</span>
                        <span class="font-semibold text-gray-900">{{ $student->credits_earned }} / {{ $student->credits_required }}</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2">
                        <div class="bg-green-600 rounded-full h-2" style="width: {{ ($student->credits_earned / $student->credits_required) * 100 }}%"></div>
                    </div>
                </div>
                @endif
            </div>
            @endif
        </div>
    </div>

    <!-- Documents Tab -->
    <div x-show="activeTab === 'documents'" class="space-y-6">
        <div class="bg-white rounded-lg shadow-sm p-6">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-lg font-semibold text-gray-900">Student Documents</h3>
                <button @click="$dispatch('open-upload-modal')" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm">
                    Upload Document
                </button>
            </div>

            @forelse($student->documents as $document)
            <div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg mb-3 hover:bg-gray-50">
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
                        <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                        </svg>
                    </div>
                    <div>
                        <p class="font-medium text-gray-900">{{ $document->title }}</p>
                        <p class="text-sm text-gray-500">{{ $document->type }} • Uploaded {{ $document->created_at->diffForHumans() }}</p>
                    </div>
                </div>
                <div class="flex items-center space-x-3">
                    @if($document->status === 'verified')
                        <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">Verified</span>
                    @elseif($document->status === 'rejected')
                        <span class="px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">Rejected</span>
                    @else
                        <span class="px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">Pending</span>
                    @endif
                    <a href="{{ route('students.documents.download', [$student, $document]) }}" class="text-blue-600 hover:text-blue-900">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
                        </svg>
                    </a>
                </div>
            </div>
            @empty
            <div class="text-center py-12">
                <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                </svg>
                <p class="mt-2 text-gray-500">No documents uploaded yet</p>
            </div>
            @endforelse
        </div>
    </div>

    <!-- Academic Records Tab -->
    <div x-show="activeTab === 'academic'" class="space-y-6">
        <div class="bg-white rounded-lg shadow-sm p-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">Academic Records</h3>
            <p class="text-gray-500 text-center py-12">Academic records will be displayed here</p>
        </div>
    </div>
</div>
@endsection