@extends('layouts.app')

@section('page-title', 'Detail Pembayaran')
@section('page-subtitle', 'Pembayaran')

@section('content')
    <a href="{{ route('pembayaran.index') }}" class="back-link">
        <i data-lucide="arrow-left"></i>
        <span>Kembali ke riwayat pembayaran</span>
    </a>

    <x-page-header eyebrow="Pembayaran" :title="$pembayaran->nomor_kwitansi">
        <x-slot:actions>
            <a href="{{ route('pembayaran.print', $pembayaran) }}" class="btn" target="_blank">
                <i data-lucide="printer"></i>
                <span>Cetak Kwitansi</span>
            </a>
        </x-slot:actions>
    </x-page-header>

    <div class="panel">
        <div class="panel__head"><h3>Informasi Pembayaran</h3></div>
        <div class="panel__body">
            <div class="detail-list">
                <div>
                    <div class="detail-item__label">No. Pembayaran</div>
                    <div class="detail-item__value mono">{{ $pembayaran->nomor_pembayaran }}</div>
                </div>
                <div>
                    <div class="detail-item__label">No. Kwitansi</div>
                    <div class="detail-item__value mono">{{ $pembayaran->nomor_kwitansi }}</div>
                </div>
                <div>
                    <div class="detail-item__label">Tanggal Bayar</div>
                    <div class="detail-item__value">{{ \App\Helpers\DateHelper::formatTanggal($pembayaran->tanggal_bayar) }}</div>
                </div>
                <div>
                    <div class="detail-item__label">Metode</div>
                    <div class="detail-item__value">{{ $pembayaran->metode_pembayaran }}</div>
                </div>
                <div>
                    <div class="detail-item__label">Status</div>
                    <div class="detail-item__value">
                        @if ($pembayaran->status === 'BERHASIL')
                            <x-badge variant="success">Berhasil</x-badge>
                        @else
                            <x-badge variant="danger">Dibatalkan</x-badge>
                        @endif
                    </div>
                </div>
                <div>
                    <div class="detail-item__label">Dicatat Oleh</div>
                    <div class="detail-item__value">{{ $pembayaran->createdBy->name ?? '-' }}</div>
                </div>
            </div>
        </div>
    </div>

    <div class="panel">
        <div class="panel__head"><h3>Rincian Tagihan</h3></div>
        <div class="panel__body">
            <div class="detail-list">
                <div>
                    <div class="detail-item__label">No. Tagihan</div>
                    <div class="detail-item__value mono">{{ $pembayaran->tagihan->nomor_tagihan ?? '-' }}</div>
                </div>
                <div>
                    <div class="detail-item__label">Pelanggan</div>
                    <div class="detail-item__value">{{ $pembayaran->tagihan->pelanggan->nama ?? '-' }}</div>
                </div>
                <div>
                    <div class="detail-item__label">Periode</div>
                    <div class="detail-item__value">{{ $pembayaran->tagihan->bulan ?? '-' }}/{{ $pembayaran->tagihan->tahun ?? '-' }}</div>
                </div>
                <div>
                    <div class="detail-item__label">Nominal Tagihan</div>
                    <div class="detail-item__value money">{{ \App\Helpers\NumberHelper::formatRupiah($pembayaran->nominal_tagihan) }}</div>
                </div>
                <div>
                    <div class="detail-item__label">Denda</div>
                    <div class="detail-item__value money">{{ \App\Helpers\NumberHelper::formatRupiah($pembayaran->nominal_denda) }}</div>
                </div>
                <div>
                    <div class="detail-item__label">Total Dibayar</div>
                    <div class="detail-item__value money" style="color: var(--color-primary); font-size:16px;">{{ \App\Helpers\NumberHelper::formatRupiah($pembayaran->total_bayar) }}</div>
                </div>
            </div>
        </div>
    </div>
@endsection