<?php
    $noWa = $transaksi->siswa->no_wa ?? '';
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">
    <title>Bukti Pembayaran - <?php echo e($transaksi->kode_transaksi); ?></title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700&display=fallback">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body {
            font-family: 'Source Sans Pro', Arial, sans-serif;
            background: #f4f6f9;
            color: #2c3e50;
        }

        /* Screen layout */
        .screen-wrapper {
            max-width: 680px;
            margin: 30px auto;
            padding: 0 15px;
        }
        .action-buttons {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all .2s;
        }
        .btn-print  { background: #1a73e8; color: #fff; }
        .btn-print:hover  { background: #1557b0; }
        .btn-new    { background: #28a745; color: #fff; }
        .btn-new:hover    { background: #1e7e34; }
        .btn-back   { background: #6c757d; color: #fff; }
        .btn-back:hover   { background: #545b62; }

        /* Receipt card */
        .receipt {
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 4px 24px rgba(0,0,0,.12);
            overflow: hidden;
        }
        .receipt-header {
            background: linear-gradient(135deg, #1a73e8, #0d47a1);
            color: #fff;
            padding: 28px 30px 20px;
            text-align: center;
        }
        .receipt-header h1 {
            font-size: 22px;
            font-weight: 700;
            letter-spacing: .5px;
        }
        .receipt-header .app-name {
            font-size: 13px;
            opacity: .85;
            margin-bottom: 12px;
        }
        .kode-badge {
            display: inline-block;
            background: rgba(255,255,255,.18);
            border: 1px solid rgba(255,255,255,.4);
            border-radius: 20px;
            padding: 4px 18px;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 1px;
        }
        .receipt-body { padding: 24px 30px; }
        .section-title {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 1.2px;
            text-transform: uppercase;
            color: #1a73e8;
            margin-bottom: 10px;
            border-bottom: 1px solid #e8edf3;
            padding-bottom: 5px;
        }
        .info-grid {
            display: grid;
            grid-template-columns: 140px 1fr;
            gap: 6px 10px;
            margin-bottom: 20px;
            font-size: 14px;
        }
        .info-grid .label { color: #666; }
        .info-grid .value { font-weight: 600; }

        .detail-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 20px; }
        .detail-table th {
            background: #f0f4fa;
            color: #555;
            font-weight: 700;
            font-size: 12px;
            padding: 8px 10px;
            text-align: left;
            border-bottom: 2px solid #e0e7ef;
        }
        .detail-table td {
            padding: 9px 10px;
            border-bottom: 1px solid #f0f0f0;
        }
        .detail-table tr:last-child td { border-bottom: none; }
        .badge-spp { background: #17a2b8; color: #fff; padding: 2px 8px; border-radius: 10px; font-size:11px; }
        .badge-dpp { background: #fd7e14; color: #fff; padding: 2px 8px; border-radius: 10px; font-size:11px; }

        .total-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: linear-gradient(135deg,#1a73e8,#0d47a1);
            color: #fff;
            border-radius: 10px;
            padding: 14px 16px;
            margin-bottom: 20px;
        }
        .total-row .label { font-size: 14px; font-weight: 600; }
        .total-row .amount { font-size: 22px; font-weight: 800; }

        .metode-badge {
            display: inline-block;
            padding: 4px 14px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 600;
        }
        .metode-tunai    { background:#d4edda; color:#155724; }
        .metode-transfer { background:#cce5ff; color:#004085; }
        .metode-qris     { background:#e2d9f3; color:#4b2c8d; }

        .status-lunas {
            text-align:center;
            margin-bottom: 16px;
            font-size: 15px;
            font-weight: 700;
            color: #28a745;
        }
        .status-lunas i { font-size: 24px; display:block; margin-bottom:4px; }

        .receipt-footer {
            text-align: center;
            padding: 14px 30px;
            background: #f8f9fc;
            border-top: 1px solid #e8edf3;
            font-size: 12px;
            color: #888;
        }
        .signature-area {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 20px;
            font-size: 13px;
        }
        .sign-box { text-align: center; }
        .sign-box .sign-line {
            margin: 50px auto 6px;
            border-top: 1px solid #333;
            width: 80%;
        }

        /* WA Toast */
        .wa-toast {
            position: fixed; top: 20px; right: 20px; z-index: 9999;
            padding: 12px 20px; border-radius: 8px; font-size: 14px; font-weight: 600;
            color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.15);
            opacity: 0; transform: translateY(-10px);
            transition: opacity .3s, transform .3s;
        }
        .wa-toast.show { opacity: 1; transform: translateY(0); }
        .wa-toast.success { background: #28a745; }
        .wa-toast.error { background: #dc3545; }

        /* Print */
        @media print {
            body { background: #fff; }
            .screen-wrapper { margin: 0; padding: 0; max-width: 100%; }
            .action-buttons { display: none !important; }
            .receipt { box-shadow: none; border-radius: 0; }
            .receipt-header { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
            .total-row { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
        }
    </style>
</head>
<body>

<div id="waToast" class="wa-toast"></div>

<div class="screen-wrapper">

    
    <div class="action-buttons">
        <button class="btn btn-print" onclick="window.print()">
            <i class="fas fa-print"></i> Cetak Bukti
        </button>
        <?php if(!empty($noWa)): ?>
        <button type="button" id="btnKirimWaBukti" class="btn" style="background:#25D366; color:#fff;"
            data-transaksi-id="<?php echo e($transaksi->id); ?>">
            <i class="fab fa-whatsapp"></i> Kirim WA
        </button>
        <?php else: ?>
        <button class="btn" style="background:#25D366; color:#fff; opacity:0.6; cursor:not-allowed;" title="Nomor WA Siswa tidak tersedia">
            <i class="fab fa-whatsapp"></i> Kirim WA
        </button>
        <?php endif; ?>
        <a href="<?php echo e(route('transaksi.create')); ?>" class="btn btn-new">
            <i class="fas fa-plus"></i> Transaksi Baru
        </a>
        <a href="<?php echo e(url()->previous()); ?>" class="btn btn-back" title="Kembali"><i class="fas fa-arrow-left"></i> Kembali</a>
    </div>


    
    <div class="receipt">

        
        <div class="receipt-header">
            <div class="app-name"><?php echo e(config('app.name', 'SPP App')); ?> — Bukti Pembayaran</div>

            <h1>BUKTI PEMBAYARAN</h1>
            <div class="kode-badge mt-2"><?php echo e($transaksi->kode_transaksi); ?></div>
        </div>

        <div class="receipt-body">

            
            <div class="status-lunas">
                <i class="fas fa-check-circle"></i>
                Pembayaran Berhasil Disimpan
            </div>

            
            <div class="section-title">Informasi Transaksi</div>
            <div class="info-grid">
                <span class="label">No. Transaksi</span>
                <span class="value"><?php echo e($transaksi->kode_transaksi); ?></span>

                <span class="label">Tanggal</span>
                <span class="value"><?php echo e(\Carbon\Carbon::parse($transaksi->tanggal_bayar)->translatedFormat('d F Y')); ?> <?php echo e($transaksi->created_at->format('H:i')); ?></span>

                <span class="label">Metode</span>
                <span class="value">
                    <span class="metode-badge metode-<?php echo e($transaksi->metode_pembayaran); ?>">
                        <?php if($transaksi->metode_pembayaran == 'tunai'): ?> 💵 Tunai
                        <?php elseif($transaksi->metode_pembayaran == 'transfer'): ?> 🏦 Transfer Bank
                        <?php else: ?> 📱 QRIS
                        <?php endif; ?>
                    </span>
                </span>

                <span class="label">Petugas</span>
                <span class="value"><?php echo e($transaksi->user->name ?? '-'); ?></span>

                <?php if($transaksi->keterangan): ?>
                <span class="label">Keterangan</span>
                <span class="value"><?php echo e($transaksi->keterangan); ?></span>
                <?php endif; ?>
            </div>

            
            <div class="section-title">Data Siswa</div>
            <div class="info-grid">
                <span class="label">NIS</span>
                <span class="value"><?php echo e($transaksi->siswa->nis); ?></span>

                <span class="label">Nama</span>
                <span class="value"><?php echo e($transaksi->siswa->nama_lengkap); ?></span>

                <span class="label">Kelas</span>
                <span class="value"><?php echo e($transaksi->nama_kelas_snapshot ?? '-'); ?></span>

                <span class="label">Tahun Ajaran</span>
                <span class="value"><?php echo e($transaksi->tahun_ajaran_snapshot ?? '-'); ?></span>
            </div>

            
            <div class="section-title">Detail Pembayaran</div>
            <table class="detail-table">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Keterangan</th>
                        <th>Jenis</th>
                        <th style="text-align:right;">Jumlah</th>
                    </tr>
                </thead>
                <tbody>
                    <?php $__currentLoopData = $transaksi->detailPembayaran; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $i => $detail): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <?php
                        $tagihan = $detail->tagihan;
                        $jenis   = $tagihan->tarifPembayaran->jenis ?? '-';
                        if ($jenis === 'SPP') {
                            $keterangan = 'SPP ' . ($tagihan->nama_bulan ?? '') . ' ' . ($tagihan->tahun ?? '');
                        } else {
                            $keterangan = 'DPP';
                        }
                    ?>
                    <tr>
                        <td><?php echo e($i + 1); ?></td>
                        <td><?php echo e($keterangan); ?></td>
                        <td>
                            <span class="badge-<?php echo e(strtolower($jenis)); ?>"><?php echo e($jenis); ?></span>
                        </td>
                        <td style="text-align:right;font-weight:600;">Rp <?php echo e(number_format($detail->jumlah_bayar, 0, ',', '.')); ?></td>
                    </tr>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </tbody>
            </table>

            
            <div class="total-row">
                <span class="label">TOTAL PEMBAYARAN</span>
                <span class="amount">Rp <?php echo e(number_format($transaksi->total_bayar, 0, ',', '.')); ?></span>
            </div>

            
            <div class="signature-area">
                <div class="sign-box">
                    <div>Orang Tua / Wali</div>
                    <div class="sign-line"></div>
                    <div>( ................................ )</div>
                </div>
                <div class="sign-box">
                    <div>Petugas</div>
                    <div class="sign-line"></div>
                    <div>( <?php echo e($transaksi->user->name ?? '-'); ?> )</div>
                </div>
            </div>

        </div>

        <div class="receipt-footer">
            Dicetak pada: <?php echo e(now()->translatedFormat('d F Y, H:i')); ?> &nbsp;|&nbsp;
            <?php echo e(config('app.name', 'SPP App')); ?> &mdash; Dokumen resmi, harap disimpan.
        </div>

    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
function showWaToast(type, message) {
    Swal.fire({
        icon: type,
        title: type === 'success' ? 'Berhasil' : 'Gagal',
        html: message,
        timer: 4000,
        showConfirmButton: false
    });
}

(function() {
    var btn = document.getElementById('btnKirimWaBukti');
    if (!btn) return;

    btn.addEventListener('click', function() {
        var transaksiId = btn.getAttribute('data-transaksi-id');
        var originalHtml = btn.innerHTML;
        btn.disabled = true;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Mengirim...';

        var xhr = new XMLHttpRequest();
        xhr.open('POST', '<?php echo e(route("ajax.transaksi.kirim-wa-bukti")); ?>');
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.setRequestHeader('X-CSRF-TOKEN', document.querySelector('meta[name="csrf-token"]').content);
        xhr.onload = function() {
            var res = JSON.parse(xhr.responseText);
            if (xhr.status >= 200 && xhr.status < 300 && res.success) {
                showWaToast('success', '<i class="fab fa-whatsapp"></i> Bukti pembayaran berhasil dikirim via WhatsApp!');
                btn.innerHTML = '<i class="fas fa-check"></i> Terkirim';
                setTimeout(function() {
                    btn.disabled = false;
                    btn.innerHTML = originalHtml;
                }, 3000);
            } else {
                showWaToast('error', '<i class="fas fa-times-circle"></i> Gagal: ' + (res.message || 'Terjadi kesalahan'));
                btn.disabled = false;
                btn.innerHTML = originalHtml;
            }
        };
        xhr.onerror = function() {
            showWaToast('error', '<i class="fas fa-times-circle"></i> Koneksi gagal');
            btn.disabled = false;
            btn.innerHTML = originalHtml;
        };
        xhr.send(JSON.stringify({ transaksi_id: transaksiId }));
    });
})();
</script>

</body>
</html>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bukti Pembayaran - <?php echo e($transaksi->kode_transaksi); ?></title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700&display=fallback">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body {
            font-family: 'Source Sans Pro', Arial, sans-serif;
            background: #f4f6f9;
            color: #2c3e50;
        }

        /* Screen layout */
        .screen-wrapper {
            max-width: 680px;
            margin: 30px auto;
            padding: 0 15px;
        }
        .action-buttons {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all .2s;
        }
        .btn-print  { background: #1a73e8; color: #fff; }
        .btn-print:hover  { background: #1557b0; }
        .btn-new    { background: #28a745; color: #fff; }
        .btn-new:hover    { background: #1e7e34; }
        .btn-back   { background: #6c757d; color: #fff; }
        .btn-back:hover   { background: #545b62; }

        /* Receipt card */
        .receipt {
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 4px 24px rgba(0,0,0,.12);
            overflow: hidden;
        }
        .receipt-header {
            background: linear-gradient(135deg, #1a73e8, #0d47a1);
            color: #fff;
            padding: 28px 30px 20px;
            text-align: center;
        }
        .receipt-header h1 {
            font-size: 22px;
            font-weight: 700;
            letter-spacing: .5px;
        }
        .receipt-header .app-name {
            font-size: 13px;
            opacity: .85;
            margin-bottom: 12px;
        }
        .kode-badge {
            display: inline-block;
            background: rgba(255,255,255,.18);
            border: 1px solid rgba(255,255,255,.4);
            border-radius: 20px;
            padding: 4px 18px;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 1px;
        }
        .receipt-body { padding: 24px 30px; }
        .section-title {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 1.2px;
            text-transform: uppercase;
            color: #1a73e8;
            margin-bottom: 10px;
            border-bottom: 1px solid #e8edf3;
            padding-bottom: 5px;
        }
        .info-grid {
            display: grid;
            grid-template-columns: 140px 1fr;
            gap: 6px 10px;
            margin-bottom: 20px;
            font-size: 14px;
        }
        .info-grid .label { color: #666; }
        .info-grid .value { font-weight: 600; }

        .detail-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 20px; }
        .detail-table th {
            background: #f0f4fa;
            color: #555;
            font-weight: 700;
            font-size: 12px;
            padding: 8px 10px;
            text-align: left;
            border-bottom: 2px solid #e0e7ef;
        }
        .detail-table td {
            padding: 9px 10px;
            border-bottom: 1px solid #f0f0f0;
        }
        .detail-table tr:last-child td { border-bottom: none; }
        .badge-spp { background: #17a2b8; color: #fff; padding: 2px 8px; border-radius: 10px; font-size:11px; }
        .badge-dpp { background: #fd7e14; color: #fff; padding: 2px 8px; border-radius: 10px; font-size:11px; }

        .total-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: linear-gradient(135deg,#1a73e8,#0d47a1);
            color: #fff;
            border-radius: 10px;
            padding: 14px 16px;
            margin-bottom: 20px;
        }
        .total-row .label { font-size: 14px; font-weight: 600; }
        .total-row .amount { font-size: 22px; font-weight: 800; }

        .metode-badge {
            display: inline-block;
            padding: 4px 14px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 600;
        }
        .metode-tunai    { background:#d4edda; color:#155724; }
        .metode-transfer { background:#cce5ff; color:#004085; }
        .metode-qris     { background:#e2d9f3; color:#4b2c8d; }

        .status-lunas {
            text-align:center;
            margin-bottom: 16px;
            font-size: 15px;
            font-weight: 700;
            color: #28a745;
        }
        .status-lunas i { font-size: 24px; display:block; margin-bottom:4px; }

        .receipt-footer {
            text-align: center;
            padding: 14px 30px;
            background: #f8f9fc;
            border-top: 1px solid #e8edf3;
            font-size: 12px;
            color: #888;
        }
        .signature-area {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 20px;
            font-size: 13px;
        }
        .sign-box { text-align: center; }
        .sign-box .sign-line {
            margin: 50px auto 6px;
            border-top: 1px solid #333;
            width: 80%;
        }

        /* Print */
        @media print {
            body { background: #fff; }
            .screen-wrapper { margin: 0; padding: 0; max-width: 100%; }
            .action-buttons { display: none !important; }
            .receipt { box-shadow: none; border-radius: 0; }
            .receipt-header { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
            .total-row { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
        }
    </style>
</head>

</html>
<?php /**PATH C:\Herd\spp_app\resources\views/transaksi/bukti.blade.php ENDPATH**/ ?>