@extends('layouts.app')
@section('title', 'Kwitansi')

@section('content')
<div class="d-flex justify-content-between mb-3 no-print">
    <a href="{{ route('payments.create', ['student_id'=>$payment->student_id]) }}" class="btn btn-outline-primary"><i class="bi bi-arrow-left"></i> Kembali</a>
    <button onclick="window.print()" class="btn btn-primary"><i class="bi bi-printer"></i> Cetak Kwitansi</button>
</div>

<div class="row justify-content-center">
<div class="col-lg-8">
<div class="card">
    <div class="card-body p-4">
        {{-- Kop --}}
        <div class="d-flex align-items-center border-bottom pb-3 mb-3">
            @if($setting->logo)<img src="{{ asset('storage/'.$setting->logo) }}" style="height:64px" class="me-3" alt="logo">@endif
            <div class="flex-fill">
                <h4 class="mb-0 fw-bold text-hijau">{{ $setting->nama_sekolah }}</h4>
                <div class="small text-muted">{{ $setting->alamat }}</div>
                <div class="small text-muted">Telp: {{ $setting->telepon }} · {{ $setting->email }}</div>
            </div>
            <div class="text-end">
                <span class="badge bg-hijau-soft fs-6">KWITANSI</span>
                <div class="small mt-1">No: <b>{{ $payment->no_transaksi }}</b></div>
            </div>
        </div>

        <div class="row mb-3">
            <div class="col-6">
                <table class="table table-sm table-borderless mb-0 small">
                    <tr><td class="text-muted" style="width:110px">Nama Siswa</td><td>: <b>{{ $payment->student->nama }}</b></td></tr>
                    <tr><td class="text-muted">No Induk</td><td>: {{ $payment->student->no_induk }}</td></tr>
                    <tr><td class="text-muted">Kelas</td><td>: {{ $payment->student->kelas }}</td></tr>
                </table>
            </div>
            <div class="col-6 text-end">
                <table class="table table-sm table-borderless mb-0 small">
                    <tr><td class="text-muted">Tanggal</td><td>: {{ $payment->tanggal->translatedFormat('d F Y') }}</td></tr>
                    <tr><td class="text-muted">Tahun Pelajaran</td><td>: {{ $payment->tahun_pelajaran }}</td></tr>
                    <tr><td class="text-muted">Petugas</td><td>: {{ $payment->petugas }}</td></tr>
                </table>
            </div>
        </div>

        <table class="table table-bordered">
            <thead><tr><th style="width:50px">No</th><th>Jenis Pembayaran</th><th class="text-end" style="width:150px">Jumlah</th></tr></thead>
            <tbody>
                @foreach($payment->items as $i => $it)
                    <tr><td>{{ $i+1 }}</td><td>{{ $it->nama_jenis }}</td><td class="text-end">{{ rp($it->jumlah) }}</td></tr>
                @endforeach
            </tbody>
            <tfoot><tr class="table-light"><th colspan="2" class="text-end">TOTAL</th><th class="text-end text-hijau fs-6">{{ rp($payment->total) }}</th></tr></tfoot>
        </table>

        <div class="bg-hijau-soft rounded-soft p-2 mb-3 small">
            <b>Terbilang:</b> <i>{{ ucfirst(terbilang($payment->total)) }} rupiah</i>
        </div>

        <div class="row align-items-end mt-4">
            <div class="col-7">
                <div class="d-flex gap-3 align-items-center">
                    <div id="qrcode"></div>
                    <div class="small text-muted">
                        <b>Verifikasi Keaslian</b><br>
                        Pindai QR untuk memverifikasi kwitansi ini secara online.<br>
                        <span class="text-muted">Catatan: Uang yang sudah dibayarkan tidak dapat diminta kembali.</span>
                    </div>
                </div>
            </div>
            <div class="col-5 text-center small">
                {{ $setting->kota }}, {{ $payment->tanggal->translatedFormat('d F Y') }}<br>
                Bendahara,<br><br><br>
                <b><u>{{ $setting->bendahara }}</u></b><br>
                NIP. {{ $setting->nip_bendahara ?: '..............................' }}
            </div>
        </div>
    </div>
</div>
</div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('vendor/qrcode.min.js') }}"></script>
<script>
    new QRCode(document.getElementById('qrcode'), {
        text: "{{ route('portal.verifikasi', $payment) }}",
        width: 90, height: 90, colorDark:'#2E9587', colorLight:'#ffffff'
    });
</script>
@endpush