@extends('layouts.app')
@section('title', 'Generate Invoices')
@section('page-title', 'Generate Invoices')

@section('content')
<div class="max-w-4xl mx-auto space-y-6">

    <div class="flex items-center justify-between">
        <p class="text-sm text-gray-500">Generate fee invoices for students.</p>
        <a href="{{ route('fees.index') }}" class="text-sm text-gray-500 hover:text-gray-700"><i class="fas fa-arrow-left mr-1"></i> Back to Fees</a>
    </div>

    @if(session('success'))
    <div class="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-xl text-sm">
        <i class="fas fa-check-circle mr-1"></i> {{ session('success') }}
    </div>
    @endif

    <div class="bg-white rounded-xl shadow-sm ring-1 ring-gray-200/60 overflow-hidden" x-data="{ selectedClass: '{{ $selectedClass ?? '' }}' }">
        <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50">
            <h2 class="font-semibold text-gray-800"><i class="fas fa-file-invoice mr-2 text-primary-600"></i>Select Fee Structure & Students</h2>
        </div>

        {{-- Step 1: Select class to load students --}}
        <div class="p-6 border-b border-gray-100">
            <form method="GET" class="flex items-end gap-4">
                <div class="flex-1">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Select Class</label>
                    <select name="class_id" onchange="this.form.submit()"
                            class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm">
                        <option value="">Choose a class...</option>
                        @foreach($classes as $class)
                            <option value="{{ $class->id }}" {{ $selectedClass == $class->id ? 'selected' : '' }}>{{ $class->full_name }}</option>
                        @endforeach
                    </select>
                </div>
            </form>
        </div>

        {{-- Step 2: Generate form --}}
        @if($selectedClass && $students->count())
        <form method="POST" action="{{ route('fees.invoices.generate') }}" class="p-6 space-y-5">
            @csrf
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Fee Structure <span class="text-red-400">*</span></label>
                    <select name="fee_structure_id" required class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm">
                        <option value="">Select...</option>
                        @foreach($structures as $s)
                            <option value="{{ $s->id }}">{{ $s->name }} — ₹{{ number_format($s->amount, 2) }} ({{ ucfirst(str_replace('_', ' ', $s->frequency)) }})</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Discount (per student)</label>
                    <input type="number" name="discount" step="0.01" min="0" value="0" placeholder="0.00"
                           class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm">
                </div>
            </div>

            <div>
                <div class="flex items-center justify-between mb-2">
                    <label class="block text-sm font-medium text-gray-700">Students ({{ $students->count() }} in class)</label>
                    <div class="flex gap-2">
                        <button type="button" onclick="document.querySelectorAll('.student-cb').forEach(c=>c.checked=true)" class="text-xs text-primary-600 hover:text-primary-800 font-medium">Select All</button>
                        <span class="text-gray-300">|</span>
                        <button type="button" onclick="document.querySelectorAll('.student-cb').forEach(c=>c.checked=false)" class="text-xs text-primary-600 hover:text-primary-800 font-medium">Deselect All</button>
                    </div>
                </div>
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2 max-h-64 overflow-y-auto border border-gray-200 rounded-lg p-3">
                    @foreach($students as $student)
                    <label class="flex items-center gap-2 p-2 rounded-lg hover:bg-gray-50 cursor-pointer text-sm">
                        <input type="checkbox" name="student_ids[]" value="{{ $student->id }}" checked
                               class="student-cb w-4 h-4 rounded border-gray-300 text-primary-600">
                        <span class="text-gray-700">{{ $student->name }}</span>
                        <span class="text-xs text-gray-400 ml-auto">{{ $student->studentProfile?->admission_number }}</span>
                    </label>
                    @endforeach
                </div>
            </div>

            <div class="flex justify-end">
                <button type="submit" class="px-6 py-2.5 bg-primary-700 text-white font-semibold rounded-lg hover:bg-primary-800 transition shadow-sm">
                    <i class="fas fa-file-invoice mr-1.5"></i> Generate Invoices
                </button>
            </div>
        </form>
        @elseif($selectedClass && $students->isEmpty())
        <div class="p-6 text-center text-gray-500">
            <i class="fas fa-user-graduate text-3xl mb-2 block text-gray-300"></i>
            No active students in this class.
        </div>
        @else
        <div class="p-6 text-center text-gray-500">
            <p class="text-sm">Select a class above to load students.</p>
        </div>
        @endif
    </div>
</div>
@endsection