@extends('layouts.app')
@section('title', 'Input Pembayaran')

@section('content')
{{-- Pencari siswa --}}
<div class="card mb-3">
    <div class="card-body">
        <form method="GET" action="{{ route('payments.create') }}" class="row g-2 align-items-end">
            <div class="col-md-8">
                <label class="form-label">Cari Siswa (ketik No Induk atau Nama)</label>
                <input list="daftarSiswa" name="no_induk" class="form-control form-control-lg"
                       placeholder="Masukkan No Induk siswa..." value="{{ $student->no_induk ?? '' }}" autofocus>
                <datalist id="daftarSiswa">
                    @foreach($daftarSiswa as $s)
                        <option value="{{ $s->no_induk }}">{{ $s->no_induk }} — {{ $s->nama }} ({{ $s->kelas }})</option>
                    @endforeach
                </datalist>
            </div>
            <div class="col-md-4 d-grid">
                <button class="btn btn-primary btn-lg"><i class="bi bi-search"></i> Tampilkan</button>
            </div>
        </form>
    </div>
</div>

@if($student)
@php
    $tarif = (int) $setting->tarif_spp;
    $sisaTunggakan = max(0, $student->sisaTunggakan());
    $lainBySlot = $student->lainnyaBySlot();
@endphp
<form method="POST" action="{{ route('payments.store') }}" id="formBayar">
    @csrf
    <input type="hidden" name="student_id" value="{{ $student->id }}">
    <div class="row g-3">
        <div class="col-lg-8">
            {{-- SPP --}}
            <div class="card mb-3">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span><i class="bi bi-calendar2-week text-hijau"></i> Pembayaran SPP — Tarif {{ rp($tarif) }}/bulan</span>
                    <button type="button" class="btn btn-sm btn-outline-primary" onclick="lunasiSemuaSpp()"><i class="bi bi-check2-all"></i> Lunasi Semua Bulan Belum Bayar</button>
                </div>
                <div class="card-body">
                    <div class="row g-2">
                        @foreach(\App\Support\Spp::months() as $b)
                            @php $bayar = $sppByMonth[$b] ?? 0; $lunas = $bayar >= $tarif && $tarif>0; @endphp
                            <div class="col-md-4 col-6">
                                <div class="border rounded-soft p-2 {{ $lunas ? 'bg-hijau-soft' : '' }}">
                                    <div class="d-flex justify-content-between small">
                                        <b>{{ $b }}</b>
                                        @if($lunas)<span class="badge badge-lunas">Lunas</span>
                                        @elseif($bayar>0)<span class="badge badge-belum">Sebagian</span>@endif
                                    </div>
                                    <input type="number" name="spp[{{ $b }}]" value="0" min="0" step="1000"
                                           class="form-control form-control-sm mt-1 inp-bayar" data-tarif="{{ max(0,$tarif-$bayar) }}" {{ $lunas ? 'disabled' : '' }}>
                                    @if($bayar>0 && !$lunas)<small class="text-muted">sudah {{ rp($bayar) }}</small>@endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

            {{-- Tunggakan & Lainnya --}}
            <div class="row g-3">
                <div class="col-md-5">
                    <div class="card h-100">
                        <div class="card-header"><i class="bi bi-exclamation-triangle text-hijau"></i> Tunggakan</div>
                        <div class="card-body">
                            <p class="mb-1 small">Tunggakan awal: <b>{{ rp($student->tunggakan_awal) }}</b></p>
                            <p class="mb-2 small">Sisa tunggakan: <b class="{{ $sisaTunggakan>0?'text-danger':'text-hijau' }}">{{ rp($sisaTunggakan) }}</b></p>
                            <label class="form-label">Bayar Angsuran</label>
                            <div class="input-group"><span class="input-group-text">Rp</span>
                                <input type="number" name="tunggakan" value="0" min="0" step="1000" class="form-control inp-bayar" data-tarif="{{ $sisaTunggakan }}"></div>
                            <button type="button" class="btn btn-sm btn-outline-primary mt-2" onclick="isiTunggakan(this)" data-nilai="{{ $sisaTunggakan }}">Lunasi Sisa</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-7">
                    <div class="card h-100">
                        <div class="card-header"><i class="bi bi-wallet2 text-hijau"></i> Pembayaran Lainnya</div>
                        <div class="card-body">
                            @foreach($setting->lainnyaList() as $l)
                                @php $sudah = $lainBySlot[$l['slot']] ?? 0; $kurang = max(0,$l['tarif']-$sudah); @endphp
                                <div class="row align-items-center mb-2">
                                    <div class="col-6"><b class="small">{{ $l['nama'] }}</b><br>
                                        <small class="text-muted">Kurang: {{ rp($kurang) }}</small></div>
                                    <div class="col-6"><div class="input-group input-group-sm">
                                        <span class="input-group-text">Rp</span>
                                        <input type="number" name="lainnya[{{ $l['slot'] }}]" value="0" min="0" step="1000" class="form-control inp-bayar" data-tarif="{{ $kurang }}">
                                        <button type="button" class="btn btn-outline-primary" onclick="isiField(this,{{ $kurang }})" title="Isi kekurangan"><i class="bi bi-arrow-up-short"></i></button>
                                    </div></div>
                                </div>
                            @endforeach
                            <small class="text-muted"><i class="bi bi-info-circle"></i> Nilai bisa diisi minus untuk koreksi kelebihan input.</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Panel kanan: info + submit + riwayat --}}
        <div class="col-lg-4">
            <div class="card mb-3">
                <div class="card-header d-flex justify-content-between">
                    <span><i class="bi bi-person-badge text-hijau"></i> Data Siswa</span>
                    <a href="{{ route('students.edit', $student) }}" class="small"><i class="bi bi-pencil"></i> Edit</a>
                </div>
                <div class="card-body">
                    <h5 class="mb-0">{{ $student->nama }}</h5>
                    <div class="text-muted small mb-2">{{ $student->no_induk }} · Kelas {{ $student->kelas }} · {{ $student->status }}</div>
                    <label class="form-label mt-2">Tanggal Bayar</label>
                    <input type="date" name="tanggal" form="formBayar" value="{{ now()->toDateString() }}" class="form-control" required>
                    <hr>
                    <div class="d-flex justify-content-between align-items-center">
                        <span class="fw-semibold">Total Bayar</span>
                        <span class="fs-4 fw-bold text-hijau" id="totalBayar">Rp 0</span>
                    </div>
                    <button class="btn btn-primary w-100 mt-3 py-2" form="formBayar"><i class="bi bi-save"></i> Simpan &amp; Cetak Kwitansi</button>
                    <a href="{{ route('payments.kartu', $student) }}" class="btn btn-outline-primary w-100 mt-2"><i class="bi bi-card-heading"></i> Lihat Kartu Pembayaran</a>
                </div>
            </div>

            <div class="card">
                <div class="card-header"><i class="bi bi-clock-history text-hijau"></i> Riwayat Pembayaran</div>
                <div class="list-group list-group-flush" style="max-height:340px;overflow:auto">
                    @forelse($riwayat as $r)
                        <a href="{{ route('payments.kwitansi', $r) }}" class="list-group-item list-group-item-action">
                            <div class="d-flex justify-content-between"><b class="small">{{ $r->no_transaksi }}</b><span class="text-hijau fw-bold">{{ rp($r->total) }}</span></div>
                            <small class="text-muted">{{ $r->tanggal->translatedFormat('d M Y') }} · {{ $r->items->count() }} item</small>
                        </a>
                    @empty
                        <div class="p-3 text-muted small text-center">Belum ada pembayaran.</div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</form>
@endif
@endsection

@push('scripts')
<script>
    function fmt(n){ return 'Rp ' + (n||0).toLocaleString('id'); }
    function hitungTotal(){
        let t=0;
        document.querySelectorAll('.inp-bayar').forEach(i=>{ if(!i.disabled) t += parseInt(i.value||0); });
        const el=document.getElementById('totalBayar'); if(el) el.textContent = fmt(t);
    }
    function isiField(btn,nilai){ btn.closest('.input-group').querySelector('input').value = nilai; hitungTotal(); }
    function isiTunggakan(btn){ btn.closest('.card-body').querySelector('input[name=tunggakan]').value = btn.dataset.nilai; hitungTotal(); }
    function lunasiSemuaSpp(){
        document.querySelectorAll('input[name^="spp["]').forEach(i=>{ if(!i.disabled) i.value = i.dataset.tarif; });
        hitungTotal();
    }
    document.addEventListener('input', e=>{ if(e.target.classList.contains('inp-bayar')) hitungTotal(); });
    hitungTotal();
</script>
@endpush