@extends('layouts.register')

@section('styles')
<style>
    .receipt-card {
        background: rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(15px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 25px;
        position: relative;
        overflow: hidden;
    }

    .receipt-line {
        border-top: 2px dashed rgba(255, 255, 255, 0.3);
        margin: 25px 0;
        position: relative;
    }
    .receipt-line::before, .receipt-line::after {
        content: '';
        position: absolute;
        width: 24px;
        height: 24px;
        background: #1a2a6c; /* Sesuaikan dengan warna dasar bg lo */
        border-radius: 50%;
        top: -12px;
    }
    .receipt-line::before { left: -35px; }
    .receipt-line::after { right: -35px; }

    .receipt-label { font-size: 0.7rem; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); letter-spacing: 1.5px; }
    .receipt-value { font-size: 0.95rem; color: #fff; font-weight: 600; }
    
    .ksk-frame {
        border: 4px double rgba(255, 255, 255, 0.3);
        padding: 12px;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 15px;
        display: inline-block;
    }

    .text-kuning { color: #ffca2c !important; } /* Kuning cerah biar kebaca */

    .status-pill {
        padding: 6px 16px;
        border-radius: 50px;
        font-size: 0.7rem;
        font-weight: bold;
        background: rgba(255, 193, 7, 0.2);
        color: #ffc107;
        border: 1px solid #ffc107;
    }

    /* Info Tujuan Transfer Styling */
    .bank-box {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 12px;
        padding: 10px;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
</style>
@endsection

@section('content')

<div class="text-center mb-4 text-white">
    <p class="small opacity-75">Pengrukti Layon Pondok Maritim Raya Surabaya</p>
</div>

<div class="receipt-card p-4 shadow-lg">
    {{-- Header Struk --}}
    <div class="text-center mt-2">
        <div class="receipt-label">Nomor Registrasi</div>
        <div class="h3 fw-bold text-kuning mt-1" style="letter-spacing: 2px;">
            {{ $pembayaran->no_registrasi }}
        </div>
    </div>

    <div class="receipt-line"></div>

    {{-- Detail Data --}}
    <div class="row g-4">
        <div class="col-6">
            <div class="receipt-label">Nama Pendaftar</div>
            <div class="receipt-value">{{ $user->profile->nama_lengkap }}</div>
        </div>
        <div class="col-6 text-end">
            <div class="receipt-label">NIK</div>
            <div class="receipt-value">{{ $user->profile->nik }}</div>
        </div>

        <div class="col-6">
            <div class="receipt-label">Metode</div>
            <div class="receipt-value text-uppercase">
                {{ $pembayaran->metode }}
            </div>
        </div>
        <div class="col-6 text-end">
            <div class="receipt-label">Nominal</div>
            <div class="h5 fw-bold text-kuning mb-0">Rp {{ number_format($pembayaran->nominal, 0, ',', '.') }}</div>
        </div>

        {{-- UPDATE: TUJUAN TRANSFER (Hanya Muncul Jika Transfer) --}}
        @if($pembayaran->metode == 'transfer')
        <div class="col-12">
            <div class="bank-box">
                <div class="receipt-label mb-1">Tujuan Transfer</div>
                <div class="d-flex justify-content-between align-items-center">
                    <span class="receipt-value">{{ $user->rw->rekening ?? '-' }}</span>
                    <span class="small text-white-50">A.N {{ $user->rw->nama_rw ?? 'ADMIN RW' }}</span>
                </div>
            </div>
        </div>
        @endif

        <div class="col-6">
            <div class="receipt-label">Tanggal</div>
            <div class="receipt-value"><i class="bi bi-calendar3 me-1"></i> {{ $pembayaran->created_at->format('d M Y') }}</div>
        </div>
        <div class="col-6 text-end">
            <div class="receipt-label">Waktu</div>
            <div class="receipt-value"><i class="bi bi-clock me-1"></i> {{ $pembayaran->created_at->format('H:i') }} WIB</div>
        </div>

        <div class="col-12 text-center mt-3">
            <span class="status-pill text-uppercase">
                <i class="bi bi-hourglass-split me-1"></i> {{ $pembayaran->status }} Validasi
            </span>
        </div>
    </div>

    <div class="receipt-line"></div>

    {{-- Bukti --}}
    @if($pembayaran->bukti_transfer)
    <div class="text-center">
        <div class="receipt-label mb-3">Bukti Pembayaran</div>
        <div class="ksk-frame shadow-sm">
            <img src="{{ asset('storage/' . $pembayaran->bukti_transfer) }}" 
                 class="img-fluid rounded" 
                 style="max-height: 200px; width: 100%; object-fit: contain;">
        </div>
    </div>
    @endif
</div>

{{-- Tombol Aksi --}}
<div class="row g-2 mt-4">
    <div class="col-5">
        <a href="{{ route('login') }}" class="btn btn-outline-light w-100 rounded-pill py-2">
            Login
        </a>
    </div>
    <div class="col-7">
        <a href="{{ route('register.struk.pdf.download', $pembayaran->id) }}" class="btn btn-warning w-100 rounded-pill py-2 fw-bold shadow">
            <i class="bi bi-download me-1"></i> Download PDF
        </a>
    </div>
</div>

<div class="text-center mt-4 text-white-50 small mb-5">
    Struk ini adalah bukti pendaftaran sah internal <br> <strong>SINOMAN</strong>.
</div>
@endsection