@extends('adminlte::page')

@section('title', 'Detail Transaksi | Smart Pesantren')

@section('css')
    <style>
        .card-receipt {
            border: none;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
            overflow: hidden;
            background: #fff;
            max-width: 800px;
            margin: 0 auto; /* Tengah layar */
        }
        .receipt-header {
            background: linear-gradient(135deg, #5B247A 0%, #3e1654 100%);
            color: white;
            padding: 30px;
            position: relative;
        }
        .receipt-header::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0;
            right: 0;
            height: 20px;
            background: #fff;
            border-radius: 20px 20px 0 0;
        }
        .amount-display {
            font-size: 2.5rem;
            font-weight: 800;
            color: #5B247A;
            text-align: center;
            margin: 20px 0;
        }
        .info-row {
            display: flex;
            justify-content: space-between;
            padding: 12px 0;
            border-bottom: 1px dashed #eee;
        }
        .info-label { color: #888; font-weight: 500; }
        .info-value { color: #333; font-weight: 700; text-align: right; }
        .status-badge {
            background-color: #dcfce7;
            color: #166534;
            padding: 5px 15px;
            border-radius: 50px;
            font-weight: 700;
            font-size: 0.85rem;
            display: inline-block;
        }
        .btn-print {
            border-radius: 50px;
            padding: 10px 25px;
            font-weight: 600;
            transition: all 0.3s;
        }
    </style>
@stop

@section('content_header')
    <div class="d-flex justify-content-between align-items-center mb-3" style="max-width: 800px; margin: 0 auto;">
        <h1 class="text-dark font-weight-bold" style="font-size: 1.5rem;">Detail Transaksi</h1>
        <a href="{{ route('pesantren.keuangan.transaksi.index') }}" class="btn btn-light rounded-pill shadow-sm">
            <i class="fas fa-arrow-left mr-2"></i> Kembali
        </a>
    </div>
@stop

@section('content')
<div class="container-fluid pb-5">
    
    <div class="card card-receipt">
        {{-- HEADER KUITANSI --}}
        <div class="receipt-header text-center">
            <div class="mb-2">
                <i class="fas fa-check-circle fa-3x text-white-50"></i>
            </div>
            <h4 class="font-weight-bold">Pembayaran Berhasil</h4>
            <p class="mb-0 opacity-75">Terima kasih, pembayaran telah kami terima.</p>
        </div>

        <div class="card-body p-4 p-md-5">
            
            {{-- JUMLAH UANG --}}
            <div class="text-center">
                <small class="text-muted text-uppercase font-weight-bold ls-1">Total Dibayarkan</small>
                <div class="amount-display">
                    Rp {{ number_format($transaksi->jumlah_bayar, 0, ',', '.') }}
                </div>
                <div class="mb-4">
                    <span class="status-badge">
                        <i class="fas fa-check mr-1"></i> LUNAS / BERHASIL
                    </span>
                </div>
            </div>

            <hr class="my-4">

            {{-- DETAIL INFORMASI --}}
            <div class="row">
                <div class="col-md-6 mb-3">
                    <h6 class="font-weight-bold text-royal mb-3"><i class="fas fa-user-graduate mr-2"></i> Informasi Santri</h6>
                    <div class="info-row">
                        <span class="info-label">Nama Santri</span>
                        <span class="info-value">{{ $transaksi->santri->nama_lengkap ?? '-' }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">NIS / NISN</span>
                        <span class="info-value">{{ $transaksi->santri->nis ?? $transaksi->santri->nisn ?? '-' }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Kelas</span>
                        <span class="info-value">{{ $transaksi->santri->kelas->nama_kelas ?? '-' }}</span>
                    </div>
                </div>

                <div class="col-md-6 mb-3">
                    <h6 class="font-weight-bold text-royal mb-3"><i class="fas fa-file-invoice-dollar mr-2"></i> Rincian Pembayaran</h6>
                    <div class="info-row">
                        <span class="info-label">Kode Transaksi</span>
                        <span class="info-value font-weight-bold text-primary">{{ $transaksi->kode_transaksi }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Tanggal Bayar</span>
                        <span class="info-value">{{ \Carbon\Carbon::parse($transaksi->tanggal_bayar)->translatedFormat('d F Y, H:i') }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Pembayaran</span>
                        <span class="info-value">{{ $transaksi->jenisPembayaran->nama_pembayaran ?? 'Lainnya' }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Petugas</span>
                        <span class="info-value">{{ $transaksi->user->name ?? 'Sistem' }}</span>
                    </div>
                </div>
            </div>

            @if($transaksi->keterangan)
                <div class="alert alert-light border mt-3">
                    <small class="text-muted font-weight-bold">Catatan / Keterangan:</small><br>
                    <span class="text-dark">{{ $transaksi->keterangan }}</span>
                </div>
            @endif

        </div>

        {{-- FOOTER TOMBOL --}}
        <div class="card-footer bg-light p-4 text-center">
            <div class="d-flex justify-content-center gap-2">
                {{-- Tombol Cetak (Sesuaikan route cetak Anda) --}}
                <a href="{{ route('pesantren.keuangan.transaksi.cetak', $transaksi->id) }}" target="_blank" class="btn btn-royal btn-print shadow-md mx-2 text-white" style="background-color: #5B247A;">
                    <i class="fas fa-print mr-2"></i> Cetak Kuitansi
                </a>
                
                {{-- Tombol Kirim WA (Opsional) --}}
                @if($transaksi->santri && $transaksi->santri->no_hp_ortu)
                    @php
                        $pesan = "Assalamualaikum, pembayaran atas nama *".$transaksi->santri->nama_lengkap."* sebesar *Rp ".number_format($transaksi->jumlah_bayar,0,',','.')."* untuk *".($transaksi->jenisPembayaran->nama_pembayaran ?? 'Pembayaran')."* telah berhasil diterima. Terima kasih.";
                        $linkWA = "https://wa.me/".preg_replace('/^0/','62',$transaksi->santri->no_hp_ortu)."?text=".urlencode($pesan);
                    @endphp
                    <a href="{{ $linkWA }}" target="_blank" class="btn btn-success btn-print shadow-md mx-2">
                        <i class="fab fa-whatsapp mr-2"></i> Kirim ke Wali
                    </a>
                @endif
            </div>
        </div>
    </div>
</div>
@stop