@extends('admin.layouts.app')
@section('title', 'Assign Fees')
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('admin.accounting.index') }}">Accounting</a></li>
    <li class="breadcrumb-item active">Assign Fees to Classes</li>
@endsection
@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Assign Fee Groups to Classes</h1>
        <p class="page-subtitle">Map fee structures to classes for a given academic year</p>
    </div>
</div>

<div class="row g-3">
    <div class="col-lg-5">
        <div class="card">
            <div class="card-header">Assign Fee Group</div>
            <div class="card-body">
                <form method="POST" action="{{ route('admin.accounting.assign.save') }}">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label">Fee Group <span class="text-danger">*</span></label>
                        <select name="fee_group_id" class="form-select" required id="feeGroupSel" onchange="showGroupInfo(this)">
                            <option value="">— Select Fee Group —</option>
                            @foreach($groups as $g)
                                <option value="{{ $g->id }}" data-amount="{{ $g->items->sum('amount') }}"
                                        {{ request('group') == $g->id ? 'selected' : '' }}>
                                    {{ $g->name }} ({{ $g->academic_year }})
                                </option>
                            @endforeach
                        </select>
                        <div id="groupInfo" class="mt-2 p-2 rounded" style="background:#f8fafc;font-size:0.82rem;display:none">
                            Total amount: <strong>₹<span id="groupTotal">0</span></strong>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Academic Year <span class="text-danger">*</span></label>
                        <input type="text" name="academic_year" class="form-control" value="{{ date('Y').'-'.(date('Y')+1) }}" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Select Classes <span class="text-danger">*</span></label>
                        <div style="border:1px solid #e2e8f0;border-radius:8px;max-height:280px;overflow-y:auto;padding:8px">
                            @foreach($classes as $class)
                            <div class="form-check py-1 px-3">
                                <input class="form-check-input" type="checkbox" name="class_ids[]" value="{{ $class->id }}" id="cls{{ $class->id }}">
                                <label class="form-check-label" for="cls{{ $class->id }}" style="font-size:0.87rem">
                                    {{ $class->name }}
                                    <span class="badge badge-soft-{{ $class->level==='UG'?'info':'primary' }} ms-1" style="font-size:0.68rem">{{ $class->level }}</span>
                                </label>
                            </div>
                            @endforeach
                        </div>
                        <div class="mt-1 d-flex gap-2">
                            <button type="button" class="btn btn-xs btn-link p-0" style="font-size:0.78rem" onclick="selectAll(true)">Select All UG</button>
                            <button type="button" class="btn btn-xs btn-link p-0" style="font-size:0.78rem" onclick="selectAll(false)">Clear</button>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="bi bi-diagram-3 me-2"></i>Assign to Selected Classes
                    </button>
                </form>
            </div>
        </div>
    </div>

    <div class="col-lg-7">
        <div class="card">
            <div class="card-header">Current Assignments</div>
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead><tr><th>Class</th><th>Fee Group</th><th>Year</th><th>Total</th></tr></thead>
                    <tbody>
                        @forelse($assignments as $a)
                        <tr>
                            <td style="font-size:0.87rem;font-weight:500">{{ $a->class?->name }}</td>
                            <td style="font-size:0.84rem">{{ $a->feeGroup?->name }}</td>
                            <td style="font-size:0.82rem;color:#64748b">{{ $a->academic_year }}</td>
                            <td style="font-weight:600">₹{{ number_format($a->feeGroup?->items->sum('amount') ?? 0) }}</td>
                        </tr>
                        @empty
                        <tr><td colspan="4" class="text-center py-3 text-muted">No assignments yet</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="card-body py-2">{{ $assignments->links() }}</div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function showGroupInfo(sel) {
    const info = document.getElementById('groupInfo');
    const total = document.getElementById('groupTotal');
    if (sel.value) {
        const amt = sel.selectedOptions[0].dataset.amount;
        total.textContent = parseFloat(amt).toLocaleString('en-IN');
        info.style.display = 'block';
    } else {
        info.style.display = 'none';
    }
}
function selectAll(ugOnly) {
    document.querySelectorAll('input[name="class_ids[]"]').forEach(cb => {
        cb.checked = ugOnly ? cb.closest('.form-check').querySelector('label').textContent.includes('UG') : false;
    });
}
// Auto-show if group pre-selected
const sel = document.getElementById('feeGroupSel');
if (sel.value) showGroupInfo(sel);
</script>
@endpush