@extends('layouts.web')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 py-8 px-4">
    <div class="max-w-4xl mx-auto">
        <!-- Header -->
        <div class="mb-6">
            <div class="bg-gradient-to-r from-blue-600 to-blue-700 rounded-t-xl shadow-lg px-6 py-4">
                <div class="flex items-center justify-between">
                    <h2 class="text-2xl font-bold text-white flex items-center">
                        <i class="fas fa-receipt mr-3"></i>
                        Detail Pembayaran
                    </h2>
                    <a href="{{ url()->previous() ?: route('payments.manage') }}" class="bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-lg transition-all flex items-center">
                        <i class="fas fa-arrow-left mr-2"></i>
                        Kembali
                    </a>
                </div>
            </div>
        </div>

        <!-- Alert Messages -->
        @if(session('success'))
            <div class="mb-6 bg-green-50 border-l-4 border-green-500 rounded-lg p-4 shadow-sm">
                <div class="flex items-center">
                    <i class="fas fa-check-circle text-green-500 mr-3 text-xl"></i>
                    <div class="flex-1">
                        <p class="text-green-800 font-medium">{{ session('success') }}</p>
                    </div>
                    <button type="button" class="text-green-500 hover:text-green-700" onclick="this.parentElement.parentElement.remove()">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
        @endif

        @if(session('error'))
            <div class="mb-6 bg-red-50 border-l-4 border-red-500 rounded-lg p-4 shadow-sm">
                <div class="flex items-center">
                    <i class="fas fa-exclamation-circle text-red-500 mr-3 text-xl"></i>
                    <div class="flex-1">
                        <p class="text-red-800 font-medium">{{ session('error') }}</p>
                    </div>
                    <button type="button" class="text-red-500 hover:text-red-700" onclick="this.parentElement.parentElement.remove()">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
        @endif

        <!-- Payment Details Card -->
        <div class="bg-white rounded-b-xl shadow-xl overflow-hidden mb-6">
            <div class="p-6">
                <!-- Payment Status Badge -->
                <div class="flex justify-between items-start mb-6">
                    <div>
                        <h3 class="text-xl font-bold text-gray-900 mb-2">Informasi Pembayaran</h3>
                        <p class="text-gray-600">ID Transaksi: <span class="font-semibold">#{{ $payment->id }}</span></p>
                    </div>
                    <div>
                        @if($payment->status === 'approved')
                            <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-semibold bg-green-100 text-green-800">
                                <i class="fas fa-check-circle mr-2"></i>Disetujui
                            </span>
                        @elseif($payment->status === 'rejected')
                            <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-semibold bg-red-100 text-red-800">
                                <i class="fas fa-times-circle mr-2"></i>Ditolak
                            </span>
                        @else
                            <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-semibold bg-yellow-100 text-yellow-800">
                                <i class="fas fa-clock mr-2"></i>Pending
                            </span>
                        @endif
                    </div>
                </div>

                <!-- Payment Information Grid -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    <!-- Informasi User -->
                    <div class="bg-gray-50 rounded-lg p-4">
                        <h4 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                            <i class="fas fa-user mr-2 text-blue-600"></i>
                            Informasi Pemberi Pembayaran
                        </h4>
                        <div class="space-y-2">
                            <div>
                                <p class="text-xs text-gray-500">Nama</p>
                                <p class="text-sm font-semibold text-gray-900">{{ $payment->user->name ?? 'N/A' }}</p>
                            </div>
                            <div>
                                <p class="text-xs text-gray-500">Email</p>
                                <p class="text-sm font-semibold text-gray-900">{{ $payment->user->email ?? 'N/A' }}</p>
                            </div>
                        </div>
                    </div>

                    <!-- Informasi Kegiatan -->
                    <div class="bg-gray-50 rounded-lg p-4">
                        <h4 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                            <i class="fas fa-calendar-alt mr-2 text-blue-600"></i>
                            Informasi Kegiatan
                        </h4>
                        <div class="space-y-2">
                            <div>
                                <p class="text-xs text-gray-500">Nama Kegiatan</p>
                                <p class="text-sm font-semibold text-gray-900">{{ $payment->activity->name ?? 'N/A' }}</p>
                            </div>
                            <div>
                                <p class="text-xs text-gray-500">ID Kegiatan</p>
                                <p class="text-sm font-semibold text-gray-900">#{{ $payment->activity_id }}</p>
                            </div>
                        </div>
                    </div>

                    <!-- Informasi Pembayaran -->
                    <div class="bg-gray-50 rounded-lg p-4">
                        <h4 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                            <i class="fas fa-money-bill-wave mr-2 text-blue-600"></i>
                            Detail Pembayaran
                        </h4>
                        <div class="space-y-2">
                            <div>
                                <p class="text-xs text-gray-500">Jumlah</p>
                                <p class="text-lg font-bold text-blue-600">Rp {{ number_format($payment->amount, 0, ',', '.') }}</p>
                            </div>
                            <div>
                                <p class="text-xs text-gray-500">Tipe Pembayaran</p>
                                @if($payment->midtrans_transaction_id)
                                    <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold bg-blue-100 text-blue-800">
                                        <i class="fas fa-credit-card mr-1"></i>Midtrans
                                    </span>
                                @elseif($payment->paymentMethod)
                                    <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-800">
                                        <i class="fas fa-money-bill-wave mr-1"></i>{{ $payment->paymentMethod->name }}
                                    </span>
                                @else
                                    <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold bg-teal-100 text-teal-800">Gratis</span>
                                @endif
                            </div>
                            @if($payment->midtrans_transaction_id)
                                <div>
                                    <p class="text-xs text-gray-500">Transaction ID</p>
                                    <p class="text-xs font-mono text-gray-700">{{ $payment->midtrans_transaction_id }}</p>
                                </div>
                                @php
                                    $mid = $payment->midtrans_response ? json_decode($payment->midtrans_response, true) : null;
                                @endphp
                                @if($mid)
                                    <div class="mt-3 bg-white border border-gray-200 rounded p-3">
                                        <p class="text-xs text-gray-500 mb-2">Ringkasan Status Midtrans</p>
                                        <div class="flex flex-wrap gap-2">
                                            @if(isset($mid['transaction_status']))
                                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold bg-indigo-100 text-indigo-800">
                                                    status: {{ $mid['transaction_status'] }}
                                                </span>
                                            @endif
                                            @if(isset($mid['fraud_status']))
                                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold bg-purple-100 text-purple-800">
                                                    fraud: {{ $mid['fraud_status'] }}
                                                </span>
                                            @endif
                                            @if(isset($mid['payment_type']))
                                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold bg-blue-100 text-blue-800">
                                                    type: {{ $mid['payment_type'] }}
                                                </span>
                                            @endif
                                            @if(isset($mid['status_code']))
                                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold bg-gray-100 text-gray-700">
                                                    code: {{ $mid['status_code'] }}
                                                </span>
                                            @endif
                                        </div>
                                        @if(isset($mid['status_message']))
                                            <p class="mt-2 text-[11px] text-gray-600">{{ $mid['status_message'] }}</p>
                                        @endif
                                        <div class="mt-2">
                                            <a href="{{ url('/midtrans/payment/finish?order_id=' . $payment->midtrans_transaction_id . '&debug=1') }}" target="_blank" class="inline-flex items-center text-[11px] text-blue-600 hover:text-blue-700 underline">
                                                <i class="fas fa-bug mr-1"></i> Lihat halaman debug
                                            </a>
                                        </div>
                                    </div>
                                @endif
                            @endif
                        </div>
                    </div>

                    <!-- Informasi Waktu -->
                    <div class="bg-gray-50 rounded-lg p-4">
                        <h4 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                            <i class="fas fa-clock mr-2 text-blue-600"></i>
                            Waktu Transaksi
                        </h4>
                        <div class="space-y-2">
                            <div>
                                <p class="text-xs text-gray-500">Tanggal Pembayaran</p>
                                <p class="text-sm font-semibold text-gray-900">{{ $payment->created_at->format('d/m/Y H:i') }}</p>
                            </div>
                            @if($payment->verified_at)
                                <div>
                                    <p class="text-xs text-gray-500">Diverifikasi Pada</p>
                                    <p class="text-sm font-semibold text-gray-900">{{ $payment->verified_at->format('d/m/Y H:i') }}</p>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                @php
                    $canVerify = auth()->user() && auth()->user()->canVerifyPayment($payment->activity);
                @endphp
                <!-- Verification Information (tampilkan hanya jika tombol verifikasi tersedia) -->
                @if($canVerify)
                    @if($payment->verifier)
                        <div class="bg-blue-50 border-l-4 border-blue-500 rounded-lg p-4 mb-6">
                            <div class="flex items-start">
                                <i class="fas fa-user-check text-blue-500 mr-3 mt-1"></i>
                                <div class="flex-1">
                                    <h4 class="text-sm font-semibold text-blue-900 mb-1">Diverifikasi Oleh</h4>
                                    <p class="text-sm text-blue-800">{{ $payment->verifier->name }}</p>
                                    @if($payment->verified_at)
                                        <p class="text-xs text-blue-600 mt-1">{{ $payment->verified_at->format('d/m/Y H:i') }}</p>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endif

                    <!-- Notes -->
                    @if($payment->notes)
                        <div class="bg-yellow-50 border-l-4 border-yellow-500 rounded-lg p-4 mb-6">
                            <div class="flex items-start">
                                <i class="fas fa-sticky-note text-yellow-500 mr-3 mt-1"></i>
                                <div class="flex-1">
                                    <h4 class="text-sm font-semibold text-yellow-900 mb-1">Catatan</h4>
                                    <p class="text-sm text-yellow-800">{{ $payment->notes }}</p>
                                </div>
                            </div>
                        </div>
                    @endif
                @endif
            </div>
        </div>

        <!-- Bukti Pembayaran Card -->
        @if($payment->proof_of_payment && $payment->proof_of_payment !== 'imported')
            <div class="bg-white rounded-xl shadow-xl overflow-hidden mb-6">
                <div class="p-6">
                    <h3 class="text-xl font-bold text-gray-900 mb-4 flex items-center">
                        <i class="fas fa-image mr-3 text-blue-600"></i>
                        Bukti Pembayaran
                    </h3>
                    <div class="bg-gray-50 rounded-lg p-4">
                        <img src="{{ \Illuminate\Support\Str::startsWith($payment->proof_of_payment, 'assets/') ? asset($payment->proof_of_payment) : asset('storage/' . ltrim($payment->proof_of_payment, '/')) }}" 
                             alt="Bukti Pembayaran" 
                             class="w-full rounded-lg shadow-md cursor-pointer hover:opacity-90 transition-opacity"
                             onclick="window.open('{{ \Illuminate\Support\Str::startsWith($payment->proof_of_payment, 'assets/') ? asset($payment->proof_of_payment) : asset('storage/' . ltrim($payment->proof_of_payment, '/')) }}', '_blank')">
                        <div class="mt-4 flex justify-center">
                            <a href="{{ \Illuminate\Support\Str::startsWith($payment->proof_of_payment, 'assets/') ? asset($payment->proof_of_payment) : asset('storage/' . ltrim($payment->proof_of_payment, '/')) }}" 
                               target="_blank"
                               class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-all duration-200 shadow-md hover:shadow-lg">
                                <i class="fas fa-external-link-alt mr-2"></i>
                                Buka dalam Tab Baru
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        <!-- Action Buttons -->
        @php
            $canVerify = auth()->user() && auth()->user()->canVerifyPayment($payment->activity);
        @endphp
        @if($payment->status === 'pending' && $canVerify)
            <div class="bg-white rounded-xl shadow-xl overflow-hidden">
                <div class="p-6">
                    <h3 class="text-lg font-semibold text-gray-900 mb-4">Tindakan</h3>
                    <div class="flex gap-3">
                        <button type="button" 
                                onclick="verifyPayment({{ $payment->id }}, 'approved')" 
                                class="flex-1 px-6 py-3 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-all duration-200 shadow-md hover:shadow-lg font-medium flex items-center justify-center">
                            <i class="fas fa-check mr-2"></i>
                            Setujui Pembayaran
                        </button>
                        <button type="button" 
                                onclick="verifyPayment({{ $payment->id }}, 'rejected')" 
                                class="flex-1 px-6 py-3 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-all duration-200 shadow-md hover:shadow-lg font-medium flex items-center justify-center">
                            <i class="fas fa-times mr-2"></i>
                            Tolak Pembayaran
                        </button>
                    </div>
                </div>
            </div>
        @endif
    </div>
</div>

<!-- Verification Modal -->
<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 hidden" id="verifyModal" style="z-index: 100010; pointer-events: auto;">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white" style="pointer-events: auto;">
        <div class="flex justify-between items-center mb-4">
            <h5 class="text-lg font-semibold text-gray-900">Verifikasi Pembayaran</h5>
            <button type="button" class="text-gray-400 hover:text-gray-600" onclick="closeVerifyModal()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <form id="verifyForm" method="POST">
            @csrf
            @method('PUT')
            <input type="hidden" id="verifyStatus" name="status" value="">
            <div class="mb-4">
                <label for="verifyNotes" class="block text-sm font-medium text-gray-700 mb-2">Catatan (Opsional)</label>
                <textarea id="verifyNotes" 
                          name="notes" 
                          rows="3"
                          class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                          placeholder="Masukkan catatan verifikasi..."></textarea>
            </div>
            <div class="flex justify-end gap-3">
                <button type="button" 
                        onclick="closeVerifyModal()"
                        class="px-4 py-2 bg-gray-500 hover:bg-gray-600 text-white rounded-lg transition-all">
                    Batal
                </button>
                <button type="submit" 
                        class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-all">
                    Simpan
                </button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
function verifyPayment(paymentId, status) {
    const form = document.getElementById('verifyForm');
    const statusInput = document.getElementById('verifyStatus');
    const modal = document.getElementById('verifyModal');
    
    form.action = `/payments/${paymentId}/verify`;
    statusInput.value = status;
    
    // Reset form
    document.getElementById('verifyNotes').value = '';
    
    // Remove any Bootstrap backdrop that may block clicks
    document.querySelectorAll('.modal-backdrop').forEach(function(el){ el.remove(); });
    document.body.classList.remove('modal-open');

    // Ensure verify modal overlay is above everything and interactive
    modal.style.zIndex = '100010';
    modal.style.pointerEvents = 'auto';

    // Show modal
    modal.classList.remove('hidden');
}

function closeVerifyModal() {
    const modal = document.getElementById('verifyModal');
    modal.classList.add('hidden');
}

// Close modal when clicking outside
document.getElementById('verifyModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeVerifyModal();
    }
});

// Handle form submission success
document.getElementById('verifyForm').addEventListener('submit', function(e) {
    // Form will submit normally, and server will redirect back
    // Modal will close after redirect
});
</script>
@endpush

@endsection