@extends('admin.layouts.app')
@section('title', 'Students')

@section('content')
<div class="flex items-center justify-between mb-6">
    <h1 class="text-2xl font-bold text-gray-800">Students</h1>
    <a href="{{ route('admin.students.create') }}"
       class="bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-indigo-700">
        + Add Student
    </a>
</div>

{{-- Filters --}}
<form method="GET" class="bg-white rounded-xl shadow p-4 mb-6 flex flex-wrap gap-3">
    <input type="text" name="search" value="{{ request('search') }}"
           placeholder="Search name, email, ID, barcode…"
           class="border rounded-lg px-3 py-2 text-sm w-64 focus:outline-none focus:ring-2 focus:ring-indigo-400">

    <select name="tier" class="border rounded-lg px-3 py-2 text-sm focus:outline-none">
        <option value="">All Tiers</option>
        @foreach(['basic','standard','premium'] as $t)
            <option value="{{ $t }}" {{ request('tier') === $t ? 'selected' : '' }}>{{ ucfirst($t) }}</option>
        @endforeach
    </select>

    <select name="status" class="border rounded-lg px-3 py-2 text-sm focus:outline-none">
        <option value="">All Statuses</option>
        @foreach(['active','expired','pending','cancelled'] as $s)
            <option value="{{ $s }}" {{ request('status') === $s ? 'selected' : '' }}>{{ ucfirst($s) }}</option>
        @endforeach
    </select>

    <select name="section" class="border rounded-lg px-3 py-2 text-sm focus:outline-none">
        <option value="">All Sections</option>
        @foreach($sections as $sec)
            <option value="{{ $sec }}" {{ request('section') === $sec ? 'selected' : '' }}>{{ $sec }}</option>
        @endforeach
    </select>

    <button type="submit" class="bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm">Filter</button>
    <a href="{{ route('admin.students.index') }}" class="text-sm text-gray-400 self-center hover:underline">Clear</a>
</form>

{{-- Table with bulk actions --}}
<div class="bg-white rounded-xl shadow overflow-hidden">
    <form method="POST" action="{{ route('admin.students.bulk') }}">
        @csrf
        <div class="overflow-x-auto">
            <table class="min-w-full text-sm">
                <thead class="bg-gray-50 text-gray-500 uppercase text-xs">
                    <tr>
                        <th class="px-4 py-3">
                            <input type="checkbox" id="select-all" class="rounded">
                        </th>
                        <th class="px-4 py-3 text-left">Student</th>
                        <th class="px-4 py-3 text-left">Barcode</th>
                        <th class="px-4 py-3 text-left">Tier</th>
                        <th class="px-4 py-3 text-left">Status</th>
                        <th class="px-4 py-3 text-left">Expires</th>
                        <th class="px-4 py-3 text-left">Section</th>
                        <th class="px-4 py-3 text-left">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @forelse($students as $student)
                    <tr class="hover:bg-gray-50">
                        <td class="px-4 py-3">
                            <input type="checkbox" name="student_ids[]" value="{{ $student->id }}" class="rounded">
                        </td>
                        <td class="px-4 py-3">
                            <div class="font-medium text-gray-800">{{ $student->name }}</div>
                            <div class="text-xs text-gray-400">{{ $student->email }}</div>
                            @if($student->student_id)
                                <div class="text-xs text-gray-400">ID: {{ $student->student_id }}</div>
                            @endif
                        </td>
                        <td class="px-4 py-3 font-mono text-xs text-gray-500">{{ $student->barcode }}</td>
                        <td class="px-4 py-3">
                            <span class="px-2 py-1 text-xs rounded-full font-semibold"
                                  style="background:{{ $student->tier_badge_color }}22; color:{{ $student->tier_badge_color }}">
                                {{ ucfirst($student->tier) }}
                            </span>
                        </td>
                        <td class="px-4 py-3">
                            <span class="px-2 py-1 text-xs rounded-full font-semibold
                                {{ $student->payment_status === 'active'    ? 'bg-green-100 text-green-700'  :
                                   ($student->payment_status === 'expired'  ? 'bg-red-100 text-red-700'      :
                                   ($student->payment_status === 'pending'  ? 'bg-yellow-100 text-yellow-700':
                                                                               'bg-gray-100 text-gray-500')) }}">
                                {{ ucfirst($student->payment_status) }}
                            </span>
                        </td>
                        <td class="px-4 py-3 text-xs text-gray-500">
                            {{ $student->expires_at ? $student->expires_at->format('M d, Y') : '—' }}
                            @if($student->isSubscriptionActive())
                                <br><span class="text-green-500">({{ $student->daysUntilExpiry() }}d left)</span>
                            @endif
                        </td>
                        <td class="px-4 py-3 text-xs text-gray-500">
                            {{ $student->section ?? '—' }}
                        </td>
                        <td class="px-4 py-3">
                            <a href="{{ route('admin.students.show', $student) }}"
                               class="text-indigo-600 hover:underline font-medium text-xs">Manage</a>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="8" class="px-4 py-10 text-center text-gray-400">
                            No students found. <a href="{{ route('admin.students.create') }}" class="text-indigo-500 underline">Add one →</a>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- Bulk Actions Bar --}}
        <div class="px-4 py-3 bg-gray-50 border-t flex flex-wrap items-center gap-3">
            <span class="text-xs text-gray-500 font-medium">Bulk action on selected:</span>

            <select name="action" class="border rounded-lg px-2 py-1.5 text-xs focus:outline-none">
                <option value="activate">Activate Subscription</option>
                <option value="deactivate">Deactivate Subscription</option>
                <option value="move">Move to Section</option>
                <option value="delete">Delete Students</option>
            </select>

            <select name="tier" class="border rounded-lg px-2 py-1.5 text-xs focus:outline-none">
                <option value="basic">Basic</option>
                <option value="standard">Standard</option>
                <option value="premium">Premium</option>
            </select>

            <select name="section" class="border rounded-lg px-2 py-1.5 text-xs focus:outline-none">
                <option value="">— Section —</option>
                @foreach($sections as $sec)
                    <option value="{{ $sec }}">{{ $sec }}</option>
                @endforeach
            </select>

            <button type="submit"
                    onclick="return confirm('Apply bulk action to selected students?')"
                    class="bg-indigo-600 text-white px-3 py-1.5 rounded-lg text-xs hover:bg-indigo-700">
                Apply to Selected
            </button>
        </div>
    </form>

    <div class="px-4 py-3 border-t">
        {{ $students->links() }}
    </div>
</div>

@push('scripts')
<script>
document.getElementById('select-all').addEventListener('change', function () {
    document.querySelectorAll('input[name="student_ids[]"]')
        .forEach(cb => cb.checked = this.checked);
});
</script>
@endpush
@endsection