@extends('layouts.school')
@section('title', 'Create Invoice')
@section('header', 'Create Invoice')
@section('content')
    <form method="POST" action="{{ route('school.finance.store-invoice', request()->route('schoolId')) }}">
        @csrf
        <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-6 mb-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div><label class="block text-sm font-medium text-gray-700">Student *</label><select name="student_id" required class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"><option value="">Select student...</option>@foreach($students as $s)<option value="{{ $s->id }}" {{ old('student_id') == $s->id ? 'selected' : '' }}>{{ $s->full_name }} ({{ $s->admission_no }})</option>@endforeach</select></div>
                <div><label class="block text-sm font-medium text-gray-700">Fee Structure *</label><select name="fee_structure_id" required class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"><option value="">Select fee...</option>@foreach($structures as $fs)<option value="{{ $fs->id }}" data-amount="{{ $fs->amount }}">{{ $fs->category->name }} — {{ $fs->classroom->name }} (&#8358;{{ number_format($fs->amount, 0) }})</option>@endforeach</select></div>
                <div><label class="block text-sm font-medium text-gray-700">Amount (&#8358;) *</label><input type="number" name="amount" id="invoice-amount" value="{{ old('amount') }}" min="0" step="100" required class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"></div>
                <div><label class="block text-sm font-medium text-gray-700">Discount (&#8358;)</label><input type="number" name="discount" value="{{ old('discount', 0) }}" min="0" step="100" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"></div>
                <div><label class="block text-sm font-medium text-gray-700">Due Date *</label><input type="date" name="due_date" value="{{ old('due_date') }}" required class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"></div>
                <div><label class="block text-sm font-medium text-gray-700">Notes</label><input type="text" name="notes" value="{{ old('notes') }}" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"></div>
            </div>
        </div>
        <div class="flex gap-3">
            <button type="submit" class="rounded-lg bg-primary-600 px-6 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-primary-700">Create Invoice</button>
            <a href="{{ route('school.finance.invoices', request()->route('schoolId')) }}" class="rounded-lg border border-gray-300 bg-white px-6 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50">Cancel</a>
        </div>
    </form>
    <script>
        document.querySelector('select[name="fee_structure_id"]').addEventListener('change', function() {
            var option = this.options[this.selectedIndex];
            var amount = option.getAttribute('data-amount');
            if (amount) document.getElementById('invoice-amount').value = amount;
        });
    </script>
@endsection