@extends('admin.layouts.app')
@section('title', 'Fee Groups')
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('admin.accounting.index') }}">Accounting</a></li>
    <li class="breadcrumb-item active">Fee Groups</li>
@endsection
@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Fee Groups</h1>
        <p class="page-subtitle">Bundle fee heads into groups for class assignment</p>
    </div>
    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addGroupModal">
        <i class="bi bi-plus-lg me-1"></i> New Group
    </button>
</div>

<div class="row g-3">
    @forelse($groups as $group)
    <div class="col-md-6 col-xl-4">
        <div class="card h-100">
            <div class="card-header d-flex justify-content-between align-items-start">
                <div>
                    <div style="font-weight:600">{{ $group->name }}</div>
                    <div style="font-size:0.77rem; color:#64748b">{{ $group->academic_year }}</div>
                </div>
                <span class="badge badge-soft-{{ $group->status === 'active' ? 'success' : 'secondary' }}">
                    {{ ucfirst($group->status) }}
                </span>
            </div>
            <div class="card-body p-0">
                <table class="table table-sm mb-0" style="font-size:0.82rem">
                    <tbody>
                        @foreach($group->items as $item)
                        <tr>
                            <td class="ps-3">{{ $item->feeHead?->name ?? '—' }}</td>
                            <td class="text-end pe-3 fw-500">₹{{ number_format($item->amount) }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                    <tfoot>
                        <tr style="background:#f8fafc; font-weight:600">
                            <td class="ps-3">Total</td>
                            <td class="text-end pe-3" style="color:#1a3c5e">₹{{ number_format($group->total_amount) }}</td>
                        </tr>
                    </tfoot>
                </table>
            </div>
            <div class="card-body pt-2 pb-3 border-top">
                <div style="font-size:0.77rem; color:#64748b">
                    @if($group->due_date)
                        <i class="bi bi-calendar3 me-1"></i>Due: {{ $group->due_date->format('d M Y') }}
                    @endif
                </div>
                <div class="mt-2 d-flex gap-2">
                    <a href="{{ route('admin.accounting.assign') }}?group={{ $group->id }}" class="btn btn-sm btn-outline-primary">
                        <i class="bi bi-diagram-3"></i> Assign to Class
                    </a>
                </div>
            </div>
        </div>
    </div>
    @empty
    <div class="col-12">
        <div class="card text-center py-5 text-muted">
            <i class="bi bi-collection" style="font-size:3rem; opacity:0.3"></i>
            <p class="mt-2">No fee groups yet</p>
        </div>
    </div>
    @endforelse
</div>

{{ $groups->links() }}

<!-- ADD GROUP MODAL -->
<div class="modal fade" id="addGroupModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="border-radius:16px; border:none">
            <div class="modal-header" style="border-bottom:1px solid #f1f5f9">
                <h5 class="modal-title fw-600">Create Fee Group</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ route('admin.accounting.fee-groups.store') }}">
                @csrf
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Group Name <span class="text-danger">*</span></label>
                            <input type="text" name="name" class="form-control" placeholder="e.g. UG Semester Fee 2025-26" required>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Academic Year</label>
                            <input type="text" name="academic_year" class="form-control" value="{{ date('Y').'-'.(date('Y')+1) }}" required>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Due Date</label>
                            <input type="date" name="due_date" class="form-control">
                        </div>
                        <div class="col-12">
                            <label class="form-label">Description</label>
                            <input type="text" name="description" class="form-control" placeholder="Optional notes">
                        </div>
                    </div>

                    <div class="section-divider mt-3">Fee Heads</div>

                    <div id="feeHeadRows">
                        <div class="row g-2 mb-2 fee-head-row">
                            <div class="col-md-8">
                                <select name="fee_heads[]" class="form-select" required>
                                    <option value="">— Select Fee Head —</option>
                                    @foreach($heads as $head)
                                        <option value="{{ $head->id }}" data-amount="{{ $head->amount }}">
                                            {{ $head->name }} (₹{{ number_format($head->amount) }})
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-3">
                                <input type="number" name="amounts[]" class="form-control" placeholder="Amount" min="0" step="0.01" required>
                            </div>
                            <div class="col-md-1">
                                <button type="button" class="btn btn-outline-danger w-100" onclick="removeRow(this)">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <button type="button" class="btn btn-sm btn-outline-primary mt-2" onclick="addRow()">
                        <i class="bi bi-plus-lg me-1"></i> Add Fee Head
                    </button>

                    <div class="mt-3 p-3 rounded" style="background:#f8fafc; font-size:0.85rem">
                        <strong>Total:</strong> ₹<span id="totalAmount">0</span>
                    </div>
                </div>
                <div class="modal-footer" style="border-top:1px solid #f1f5f9">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Create Fee Group</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
const headsData = @json($heads->pluck('amount','id'));

function addRow() {
    const container = document.getElementById('feeHeadRows');
    const row = container.querySelector('.fee-head-row').cloneNode(true);
    row.querySelectorAll('select,input[type=number]').forEach(el => el.value = '');
    container.appendChild(row);
    updateTotal();
}
function removeRow(btn) {
    const rows = document.querySelectorAll('.fee-head-row');
    if (rows.length > 1) { btn.closest('.fee-head-row').remove(); updateTotal(); }
}

// Auto-fill amount when fee head selected
document.addEventListener('change', function(e) {
    if (e.target.matches('select[name="fee_heads[]"]')) {
        const amt = headsData[e.target.value] || 0;
        e.target.closest('.fee-head-row').querySelector('input[type=number]').value = amt;
        updateTotal();
    }
    if (e.target.matches('input[name="amounts[]"]')) updateTotal();
});

function updateTotal() {
    const total = [...document.querySelectorAll('input[name="amounts[]"]')]
        .reduce((s,i) => s + (parseFloat(i.value) || 0), 0);
    document.getElementById('totalAmount').textContent = total.toLocaleString('en-IN');
}
</script>
@endpush