@extends('layouts.owner')

@section('breadcrumb')
    <a href="{{ route('owner.payments.index') }}" class="hover:text-text-primary transition-colors">Verifikasi</a>
    <span class="mx-2 text-text-muted">/</span>
    <span class="text-text-primary">Tinjau Bukti</span>
@endsection

@section('content')
    <div class="mb-8">
        <h1 class="text-2xl font-bold text-text-primary">Tinjau Pembayaran</h1>
        <p class="text-text-secondary">Pastikan nominal dan bukti transfer sesuai dengan tagihan.</p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <!-- Left: Proof Image -->
        <div>
            <div class="bg-white rounded-3xl border border-border shadow-sm overflow-hidden p-2">
                @if($payment->proof_image)
                    <img src="{{ asset('storage/' . $payment->proof_image) }}" class="w-full rounded-2xl shadow-inner border border-border" alt="Bukti Transfer">
                    <div class="p-4 flex justify-center">
                        <a href="{{ asset('storage/' . $payment->proof_image) }}" target="_blank" class="text-xs font-bold text-primary-600 hover:text-primary-700 flex items-center gap-2">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg>
                            Buka Gambar Penuh
                        </a>
                    </div>
                @else
                    <div class="aspect-[3/4] bg-surface flex flex-col items-center justify-center text-text-muted">
                        <svg class="w-16 h-16 opacity-20 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                        <p class="text-sm font-medium">Gambar tidak tersedia</p>
                    </div>
                @endif
            </div>
        </div>

        <!-- Right: Verification Form -->
        <div class="space-y-6">
            <!-- Comparison Card -->
            <div class="bg-white rounded-3xl border border-border shadow-sm p-8">
                <h3 class="text-lg font-bold text-text-primary mb-6">Detail Verifikasi</h3>
                
                <div class="space-y-6">
                    <div class="flex justify-between items-start pb-6 border-b border-border/50">
                        <div>
                            <p class="text-[10px] font-bold text-text-muted uppercase tracking-widest mb-1">Tagihan (#{{ $payment->invoice->invoice_number }})</p>
                            <p class="text-xl font-black text-text-primary">Rp {{ number_format($payment->invoice->total_amount, 0, ',', '.') }}</p>
                            <p class="text-xs text-text-muted mt-1">{{ $payment->invoice->resident->user->name }} - Unit {{ $payment->invoice->lease->room->room_number }}</p>
                        </div>
                        <div class="text-right">
                            <p class="text-[10px] font-bold text-text-muted uppercase tracking-widest mb-1">Transfer Diterima</p>
                            <p class="text-xl font-black text-emerald-600">Rp {{ number_format($payment->amount, 0, ',', '.') }}</p>
                            <p class="text-xs text-text-muted mt-1">{{ $payment->transfer_date->translatedFormat('d M Y') }}</p>
                        </div>
                    </div>

                    @if($payment->notes)
                        <div class="p-4 bg-surface rounded-2xl border border-border">
                            <p class="text-[10px] font-bold text-text-muted uppercase tracking-widest mb-1">Catatan Pengirim</p>
                            <p class="text-sm text-text-primary italic">"{{ $payment->notes }}"</p>
                        </div>
                    @endif

                    <!-- Approval Actions -->
                    <div class="pt-4 space-y-4" x-data="{ rejecting: false }">
                        <div x-show="!rejecting" class="grid grid-cols-2 gap-4">
                            <button type="button" @click="rejecting = true" class="px-6 py-4 bg-white border border-red-200 text-red-600 font-bold rounded-2xl hover:bg-red-50 transition-all active:scale-[0.98]">
                                Tolak
                            </button>
                            <form action="{{ route('owner.payments.approve', $payment) }}" method="POST">
                                @csrf
                                <button type="submit" class="w-full px-6 py-4 bg-emerald-500 text-white font-bold rounded-2xl shadow-lg shadow-emerald-500/20 hover:bg-emerald-600 transition-all active:scale-[0.98]">
                                    Konfirmasi Lunas
                                </button>
                            </form>
                        </div>

                        <!-- Rejection Form -->
                        <div x-show="rejecting" x-cloak class="space-y-4" x-transition>
                            <form action="{{ route('owner.payments.reject', $payment) }}" method="POST">
                                @csrf
                                <label class="block text-sm font-bold text-text-primary mb-2">Alasan Penolakan</label>
                                <textarea name="rejection_reason" rows="3" placeholder="Contoh: Bukti transfer tidak terbaca / Nominal tidak sesuai" class="w-full border border-border rounded-2xl px-4 py-3 text-sm focus:ring-4 focus:ring-red-500/10 focus:border-red-500 outline-none transition-all" required></textarea>
                                <div class="grid grid-cols-2 gap-4 mt-4">
                                    <button type="button" @click="rejecting = false" class="px-6 py-3 bg-white border border-border text-text-secondary font-bold rounded-2xl hover:bg-surface transition-all">Batal</button>
                                    <button type="submit" class="px-6 py-3 bg-red-600 text-white font-bold rounded-2xl hover:bg-red-700 shadow-lg shadow-red-600/20 transition-all">Kirim Penolakan</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Helpful Tips -->
            <div class="bg-blue-50 border border-blue-100 rounded-3xl p-6">
                <div class="flex gap-3">
                    <svg class="w-5 h-5 text-blue-500 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
                    <div>
                        <h4 class="text-sm font-bold text-blue-900 mb-1">Tips Verifikasi</h4>
                        <ul class="text-xs text-blue-700 space-y-1 list-disc pl-4">
                            <li>Cek nominal transfer di m-Banking lo sebelum approve.</li>
                            <li>Pastikan nama pengirim di bukti transfer sinkron.</li>
                            <li>Kalau ragu, sebaiknya Tolak dan beri alasan yang jelas.</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection