@extends('layouts.app')
@section('title', 'Report Cards')
@section('page-title', 'Report Cards')

@section('content')
<div class="space-y-6">

    {{-- Header --}}
    <div class="flex items-center justify-between">
        <div>
            <h2 class="text-xl font-bold text-stone-800">Report Card Management</h2>
            <p class="text-sm text-stone-500 mt-0.5">Generate, view, and download student report cards</p>
        </div>
    </div>

    {{-- Generate Section --}}
    <div class="bg-white rounded-2xl ring-1 ring-stone-200/60 shadow-sm overflow-hidden">
        <div class="px-6 py-4 border-b border-stone-100 bg-amber-50/50">
            <h3 class="font-bold text-stone-800">
                <i class="fas fa-magic text-amber-500 mr-2"></i>Generate Report Cards
            </h3>
        </div>
        <form method="POST" action="{{ route('admin.report-cards.generate') }}" id="generateForm" class="p-6">
            @csrf
            <div class="grid md:grid-cols-3 gap-4 mb-4">
                <div>
                    <label class="block text-sm font-medium text-stone-700 mb-1">Class</label>
                    <select id="genClass" name="gen_class_id" class="w-full border border-stone-300 rounded-xl px-3 py-2.5 text-sm"
                            onchange="loadStudentsForGenerate(this.value)">
                        <option value="">Select Class...</option>
                        @foreach($classes as $class)
                        <option value="{{ $class->id }}">{{ $class->full_name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-stone-700 mb-1">Term / Exam</label>
                    <select name="term" required class="w-full border border-stone-300 rounded-xl px-3 py-2.5 text-sm">
                        <option value="">Select Term...</option>
                        <option value="Half Yearly">Half Yearly (UT1 + Midterm)</option>
                        <option value="Annual">Annual (All Exams)</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-stone-700 mb-1">Actions</label>
                    <div class="flex gap-2">
                        <button type="button" onclick="selectAllStudents()" class="px-3 py-2.5 bg-stone-100 text-stone-600 rounded-xl text-sm hover:bg-stone-200 transition">
                            Select All
                        </button>
                        <button type="submit" class="flex-1 px-4 py-2.5 bg-amber-500 text-white rounded-xl text-sm font-semibold hover:bg-amber-600 transition shadow-sm">
                            <i class="fas fa-file-pdf mr-1.5"></i> Generate
                        </button>
                    </div>
                </div>
            </div>

            {{-- Optional Remarks --}}
            <div class="grid md:grid-cols-2 gap-4 mb-4">
                <div>
                    <label class="block text-sm font-medium text-stone-700 mb-1">Teacher Remarks <span class="text-stone-400">(optional)</span></label>
                    <textarea name="teacher_remarks" rows="2" class="w-full border border-stone-300 rounded-xl px-3 py-2 text-sm resize-none" placeholder="Good performance..."></textarea>
                </div>
                <div>
                    <label class="block text-sm font-medium text-stone-700 mb-1">Principal Remarks <span class="text-stone-400">(optional)</span></label>
                    <textarea name="principal_remarks" rows="2" class="w-full border border-stone-300 rounded-xl px-3 py-2 text-sm resize-none" placeholder="Keep up the good work..."></textarea>
                </div>
            </div>

            {{-- Student Selection --}}
            <div id="studentList" class="hidden">
                <label class="block text-sm font-medium text-stone-700 mb-2">Select Students</label>
                <div id="studentGrid" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2 max-h-60 overflow-y-auto p-1">
                    {{-- Populated via JS --}}
                </div>
            </div>
        </form>
    </div>

    {{-- Existing Report Cards --}}
    <div class="bg-white rounded-2xl ring-1 ring-stone-200/60 shadow-sm overflow-hidden">
        <div class="px-6 py-4 border-b border-stone-100 flex items-center justify-between">
            <h3 class="font-bold text-stone-800">
                <i class="fas fa-file-alt text-amber-500 mr-2"></i>Generated Report Cards
                <span class="text-sm text-stone-400 font-normal ml-2">({{ $reportCards->total() }})</span>
            </h3>
            @if($reportCards->isNotEmpty())
            <form method="POST" action="{{ route('admin.report-cards.bulk-download') }}" id="bulkDownloadForm">
                @csrf
                <button type="submit" class="px-3 py-1.5 bg-stone-100 text-stone-600 rounded-lg text-xs font-semibold hover:bg-stone-200 transition" onclick="prepareBulkDownload()">
                    <i class="fas fa-download mr-1"></i> Download Selected
                </button>
            </form>
            @endif
        </div>

        {{-- Filters --}}
        <div class="px-6 py-3 bg-stone-50 border-b border-stone-100">
            <form method="GET" class="flex flex-wrap items-center gap-3">
                <select name="class_id" class="border border-stone-300 rounded-lg px-3 py-1.5 text-sm">
                    <option value="">All Classes</option>
                    @foreach($classes as $class)
                    <option value="{{ $class->id }}" {{ request('class_id') == $class->id ? 'selected' : '' }}>{{ $class->full_name }}</option>
                    @endforeach
                </select>
                <select name="term" class="border border-stone-300 rounded-lg px-3 py-1.5 text-sm">
                    <option value="">All Terms</option>
                    @foreach(['Half Yearly','Annual','Term 1','Term 2'] as $t)
                    <option value="{{ $t }}" {{ request('term') == $t ? 'selected' : '' }}>{{ $t }}</option>
                    @endforeach
                </select>
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Search student..." class="border border-stone-300 rounded-lg px-3 py-1.5 text-sm">
                <button type="submit" class="px-3 py-1.5 bg-amber-500 text-white rounded-lg text-sm font-medium hover:bg-amber-600 transition">Filter</button>
                @if(request()->anyFilled(['class_id','term','search']))
                <a href="{{ route('admin.report-cards.index') }}" class="text-xs text-stone-500 hover:text-stone-700">Clear</a>
                @endif
            </form>
        </div>

        {{-- Table --}}
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="text-[11px] text-stone-400 uppercase tracking-wider bg-stone-50/50">
                        <th class="px-6 py-3 text-left font-semibold">
                            <input type="checkbox" id="selectAllBulk" onchange="toggleAllBulk(this)" class="rounded border-stone-300">
                        </th>
                        <th class="px-4 py-3 text-left font-semibold">Student</th>
                        <th class="px-4 py-3 text-left font-semibold">Class</th>
                        <th class="px-4 py-3 text-left font-semibold">Term</th>
                        <th class="px-4 py-3 text-left font-semibold">Marks</th>
                        <th class="px-4 py-3 text-left font-semibold">Percentage</th>
                        <th class="px-4 py-3 text-left font-semibold">Grade</th>
                        <th class="px-4 py-3 text-left font-semibold">Rank</th>
                        <th class="px-4 py-3 text-left font-semibold">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-stone-50">
                    @forelse($reportCards as $rc)
                    <tr class="hover:bg-stone-50/50">
                        <td class="px-6 py-3">
                            <input type="checkbox" name="bulk_ids[]" value="{{ $rc->id }}" class="bulk-check rounded border-stone-300">
                        </td>
                        <td class="px-4 py-3">
                            <div class="flex items-center gap-2">
                                <div class="w-8 h-8 bg-amber-100 rounded-full flex items-center justify-center">
                                    <span class="text-[10px] font-bold text-amber-600">{{ strtoupper(substr($rc->student->name ?? '?', 0, 1)) }}</span>
                                </div>
                                <span class="font-medium text-stone-700">{{ $rc->student->name ?? '—' }}</span>
                            </div>
                        </td>
                        <td class="px-4 py-3 text-stone-500">{{ $rc->class_?->full_name ?? '—' }}</td>
                        <td class="px-4 py-3">
                            <span class="px-2 py-0.5 bg-stone-100 text-stone-600 rounded text-xs font-medium">{{ $rc->term }}</span>
                        </td>
                        <td class="px-4 py-3 font-medium text-stone-700">{{ $rc->total_marks }}</td>
                        <td class="px-4 py-3">
                            <span class="font-bold {{ $rc->percentage >= 80 ? 'text-green-600' : ($rc->percentage >= 60 ? 'text-amber-600' : ($rc->percentage >= 40 ? 'text-orange-600' : 'text-red-600')) }}">
                                {{ $rc->percentage }}%
                            </span>
                        </td>
                        <td class="px-4 py-3">
                            @php $gColor = App\Services\GradeService::color($rc->overall_grade); @endphp
                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-{{ $gColor }}-100 text-{{ $gColor }}-700">
                                {{ $rc->overall_grade }}
                            </span>
                        </td>
                        <td class="px-4 py-3">
                            <span class="inline-flex items-center justify-center w-7 h-7 bg-amber-50 rounded-lg text-xs font-bold text-amber-700">
                                {{ $rc->rank ?? '—' }}
                            </span>
                        </td>
                        <td class="px-4 py-3">
                            <div class="flex items-center gap-1">
                                <a href="{{ route('admin.report-cards.download', $rc) }}" class="p-1.5 text-amber-600 hover:bg-amber-50 rounded-lg transition" title="Download PDF">
                                    <i class="fas fa-download text-xs"></i>
                                </a>
                                <form method="POST" action="{{ route('admin.report-cards.destroy', $rc) }}" onsubmit="return confirm('Delete this report card?')">
                                    @csrf @method('DELETE')
                                    <button class="p-1.5 text-red-400 hover:bg-red-50 rounded-lg transition" title="Delete">
                                        <i class="fas fa-trash text-xs"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="9" class="px-6 py-12 text-center">
                            <i class="fas fa-file-alt text-3xl text-stone-200 mb-3 block"></i>
                            <p class="text-stone-400">No report cards generated yet</p>
                            <p class="text-xs text-stone-300 mt-1">Select a class and term above to generate</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($reportCards->hasPages())
        <div class="px-6 py-3 border-t border-stone-100">{{ $reportCards->links() }}</div>
        @endif
    </div>
</div>

<script>
// Load students when class is selected
function loadStudentsForGenerate(classId) {
    const grid = document.getElementById('studentGrid');
    const list = document.getElementById('studentList');

    if (!classId) {
        list.classList.add('hidden');
        grid.innerHTML = '';
        return;
    }

    // Fetch students via simple page reload with class filter
    // We'll use the existing students data passed from controller
    // For now, redirect with class_id to reload with students
    window.location.href = "{{ route('admin.report-cards.index') }}?class_id=" + classId + "&_gen=1";
}

// If page loaded with gen flag, show student list
@if(request('_gen') && $students->isNotEmpty())
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('genClass').value = "{{ request('class_id') }}";
    const grid = document.getElementById('studentGrid');
    const list = document.getElementById('studentList');
    list.classList.remove('hidden');

    const students = @json($students->map(fn($s) => ['id' => $s->id, 'name' => $s->name]));
    grid.innerHTML = students.map(s =>
        `<label class="flex items-center gap-2 p-2 bg-stone-50 rounded-lg hover:bg-amber-50 cursor-pointer transition">
            <input type="checkbox" name="student_ids[]" value="${s.id}" class="gen-student rounded border-stone-300 text-amber-500">
            <span class="text-sm text-stone-700 truncate">${s.name}</span>
        </label>`
    ).join('');
});
@endif

function selectAllStudents() {
    document.querySelectorAll('.gen-student').forEach(cb => cb.checked = true);
}

function toggleAllBulk(master) {
    document.querySelectorAll('.bulk-check').forEach(cb => cb.checked = master.checked);
}

function prepareBulkDownload() {
    const form = document.getElementById('bulkDownloadForm');
    // Remove old hidden inputs
    form.querySelectorAll('input[name="report_card_ids[]"]').forEach(el => el.remove());
    // Add checked ones
    document.querySelectorAll('.bulk-check:checked').forEach(cb => {
        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = 'report_card_ids[]';
        input.value = cb.value;
        form.appendChild(input);
    });
}
</script>
@endsection