@extends('admin.layouts.app')
@section('title', 'Record Payment')
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('admin.accounting.payments') }}">Payments</a></li>
    <li class="breadcrumb-item active">Record Payment</li>
@endsection
@section('content')
<div class="page-header">
    <h1 class="page-title">Record Fee Payment</h1>
</div>

<div class="row g-3">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header">Payment Details</div>
            <div class="card-body">
                <form method="POST" action="{{ route('admin.accounting.payments.store') }}">
                    @csrf
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Student <span class="text-danger">*</span></label>
                            <select name="student_id" class="form-select" required id="studentSel" onchange="loadStudentInfo(this)">
                                <option value="">— Select Student —</option>
                                @foreach($students as $s)
                                    <option value="{{ $s->id }}" 
                                            data-class="{{ $s->class?->name }}"
                                            data-code="{{ $s->student_code }}"
                                            data-sem="{{ $s->current_semester }}">
                                        {{ $s->student_name }} ({{ $s->student_code }})
                                    </option>
                                @endforeach
                            </select>
                            <div id="studentInfo" class="mt-2 p-2 rounded" style="background:#f0f4f8;font-size:0.8rem;display:none">
                                <span id="s-class"></span> | Sem <span id="s-sem"></span>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Fee Group</label>
                            <select name="fee_group_id" class="form-select" onchange="updateAmount(this)">
                                <option value="">— Select Fee Group —</option>
                                @foreach($feeGroups as $g)
                                    <option value="{{ $g->id }}" data-amount="{{ $g->items->sum('amount') }}">
                                        {{ $g->name }} — ₹{{ number_format($g->items->sum('amount')) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Or Individual Fee Head</label>
                            <select name="fee_head_id" class="form-select" onchange="updateAmountFromHead(this)">
                                <option value="">— Select Fee Head —</option>
                                @foreach($feeHeads as $h)
                                    <option value="{{ $h->id }}" data-amount="{{ $h->amount }}">
                                        {{ $h->name }} — ₹{{ number_format($h->amount) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-3">
                            <label class="form-label">Amount (₹) <span class="text-danger">*</span></label>
                            <input type="number" name="amount" id="amountField" class="form-control" step="0.01" min="0" required>
                        </div>

                        <div class="col-md-3">
                            <label class="form-label">Discount (₹)</label>
                            <input type="number" name="discount" class="form-control" step="0.01" min="0" value="0">
                        </div>

                        <div class="col-md-3">
                            <label class="form-label">Fine / Late Fee (₹)</label>
                            <input type="number" name="fine" class="form-control" step="0.01" min="0" value="0">
                        </div>

                        <div class="col-md-3">
                            <label class="form-label">Payment Date <span class="text-danger">*</span></label>
                            <input type="date" name="payment_date" class="form-control" value="{{ today()->toDateString() }}" required>
                        </div>

                        <div class="col-md-3">
                            <label class="form-label">Payment Method <span class="text-danger">*</span></label>
                            <select name="payment_method" class="form-select" required>
                                <option value="cash">Cash</option>
                                <option value="online">Online</option>
                                <option value="upi">UPI</option>
                                <option value="cheque">Cheque</option>
                                <option value="dd">Demand Draft</option>
                            </select>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Transaction / Ref ID</label>
                            <input type="text" name="transaction_id" class="form-control" placeholder="UTR / Cheque no.">
                        </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) }}">
                        </div>

                        <div class="col-12">
                            <label class="form-label">Remarks</label>
                            <input type="text" name="remarks" class="form-control" placeholder="Optional notes">
                        </div>

                        <div class="col-12">
                            <div class="d-flex gap-2 justify-content-end">
                                <a href="{{ route('admin.accounting.payments') }}" class="btn btn-light">Cancel</a>
                                <button type="submit" class="btn btn-primary px-4">
                                    <i class="bi bi-save me-2"></i>Record Payment
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="card">
            <div class="card-header">Payment Summary</div>
            <div class="card-body">
                <div class="mb-3">
                    <div style="font-size:0.78rem;color:#94a3b8;text-transform:uppercase;letter-spacing:0.06em">Base Amount</div>
                    <div style="font-size:1.4rem;font-weight:700;color:#1e293b">₹<span id="previewAmount">0</span></div>
                </div>
                <div class="alert alert-info py-2 px-3" style="font-size:0.82rem">
                    <i class="bi bi-info-circle me-1"></i>
                    A receipt will be generated automatically after saving.
                </div>
                <div class="alert alert-warning py-2 px-3" style="font-size:0.82rem">
                    <i class="bi bi-exclamation-triangle me-1"></i>
                    For online payments by students, they can pay directly from their portal.
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function loadStudentInfo(sel) {
    const info = document.getElementById('studentInfo');
    if (sel.value) {
        document.getElementById('s-class').textContent = sel.selectedOptions[0].dataset.class;
        document.getElementById('s-sem').textContent = sel.selectedOptions[0].dataset.sem;
        info.style.display = 'block';
    } else { info.style.display = 'none'; }
}
function updateAmount(sel) {
    if (sel.value) {
        const amt = sel.selectedOptions[0].dataset.amount;
        document.getElementById('amountField').value = amt;
        document.getElementById('previewAmount').textContent = parseFloat(amt).toLocaleString('en-IN');
    }
}
function updateAmountFromHead(sel) {
    if (sel.value) {
        const amt = sel.selectedOptions[0].dataset.amount;
        document.getElementById('amountField').value = amt;
        document.getElementById('previewAmount').textContent = parseFloat(amt).toLocaleString('en-IN');
    }
}
document.getElementById('amountField')?.addEventListener('input', function() {
    document.getElementById('previewAmount').textContent = (parseFloat(this.value)||0).toLocaleString('en-IN');
});
</script>
@endpush