@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-16 flex flex-col items-center justify-center min-h-[60vh]">
    <div class="bg-white rounded-2xl shadow-xl p-8 max-w-lg w-full text-center">
        <div class="mb-6 flex justify-center">
            <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center">
                <i class="fas fa-check-circle text-4xl text-green-500"></i>
            </div>
        </div>
        
        <h1 class="text-2xl font-bold text-gray-800 mb-4">Menunggu Pembayaran</h1>

        @if(isset($items) && count($items) > 0)
            <div class="mb-4">
                @foreach($items as $item)
                    <h2 class="text-xl font-semibold text-gray-700">{{ $item['product_name'] ?? '' }}</h2>
                @endforeach
            </div>
        @endif
        
        @if(isset($payment_method) && $payment_method === 'website')
            <div class="mb-6">
                <p class="text-gray-600 mb-2">Total Pembayaran:</p>
                <div class="text-3xl font-bold text-yellow-600 mb-4">
                    Rp {{ number_format($total ?? 0, 0, ',', '.') }}
                </div>
                
                <p class="text-sm text-gray-500 mb-4">Silahkan Scan Qris untuk melakukan pembayaran sesuai dengan total Pembayaran diatas</p>
                
                <!-- QRIS -->
                @if($qrisImage)
                <div class="mb-6 flex justify-center">
                    <div class="p-2 border rounded-lg">
                        <img src="{{ asset($qrisImage) }}" alt="QRIS Payment" class="max-w-[200px] h-auto">
                        <p class="text-xs text-gray-500 mt-1">Scan QRIS untuk pembayaran</p>
                    </div>
                </div>
                @endif

                <!-- Bank Accounts -->
                <div class="space-y-3 text-left">
                    @forelse($banks as $bank)
                    <div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg border">
                        @if($bank->image)
                            <img src="{{ asset($bank->image) }}" alt="{{ $bank->bank_name }}" class="h-8 w-auto object-contain">
                        @else
                            <div class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center text-xs font-bold text-gray-600">
                                {{ substr($bank->bank_name, 0, 2) }}
                            </div>
                        @endif
                        <div class="flex-1">
                            <p class="font-bold text-gray-800 text-sm">{{ $bank->bank_name }}</p>
                            <p class="text-gray-600 text-xs">{{ $bank->account_number }} a.n {{ $bank->account_name }}</p>
                        </div>
                        <button onclick="navigator.clipboard.writeText('{{ $bank->account_number }}')" class="text-blue-500 hover:text-blue-700 text-xs font-medium">
                            Salin
                        </button>
                    </div>
                    @empty
                    @endforelse
                </div>

                <!-- Upload Proof of Payment -->
                <div class="mt-6">
                    <div class="border-2 border-dashed border-gray-300 bg-gray-50 rounded-xl p-6 relative group hover:border-blue-500 transition-colors cursor-pointer" id="dropzone">
                        <input type="file" id="payment_proof" name="payment_proof" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" accept="image/png, image/jpeg, image/jpg">
                        <div class="text-center" id="upload-content">
                            <div class="mb-3">
                                <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 group-hover:text-blue-500 transition-colors"></i>
                            </div>
                            <h3 class="text-lg font-bold text-gray-800 mb-1">Klik untuk upload bukti bayar</h3>
                            <p class="text-gray-500 text-sm">Format JPG, PNG max 5MB</p>
                            <div class="mt-3 inline-flex items-center gap-2 bg-white px-3 py-1.5 rounded-full border border-gray-200 shadow-sm">
                                <i class="fas fa-shield-alt text-gray-500 text-xs"></i>
                                <span class="text-xs text-gray-600">Dilindungi OCR Anti-Fraud</span>
                            </div>
                        </div>
                        <div class="text-center hidden" id="upload-success">
                             <div class="mb-3">
                                <i class="fas fa-check-circle text-4xl text-green-500"></i>
                            </div>
                            <h3 class="text-lg font-bold text-gray-800 mb-1">Bukti Bayar Terupload!</h3>
                            <p class="text-gray-500 text-xs" id="file-name"></p>
                        </div>
                         <div class="text-center hidden" id="upload-loading">
                            <div class="animate-spin rounded-full h-10 w-10 border-b-2 border-blue-500 mx-auto mb-3"></div>
                            <p class="text-gray-600 text-sm">Mengupload...</p>
                        </div>
                    </div>
                    <p class="text-red-500 text-xs mt-2 hidden" id="upload-error"></p>
                </div>

            </div>

            <p class="text-gray-600 mb-6 text-sm">
                Setelah transfer, silakan konfirmasi pembayaran ke Admin via WhatsApp.
            </p>
        @else
            <p class="text-gray-600 mb-8 leading-relaxed">
                Silahkan Hubungi Admin untuk melakukan konfirmasi pesanan anda
            </p>
        @endif
        
        <a href="{{ $whatsappUrl }}" target="_blank" id="whatsapp-btn" class="block w-full bg-green-500 hover:bg-green-600 text-white font-bold py-4 rounded-xl transition duration-300 transform hover:scale-105 flex items-center justify-center gap-3 shadow-lg hover:shadow-green-200">
            <i class="fab fa-whatsapp text-2xl"></i>
            <span class="text-lg">
                {{ (isset($payment_method) && $payment_method === 'website') ? 'Konfirmasi Pembayaran' : 'Hubungi Admin' }}
            </span>
        </a>
        
        <div class="mt-6 text-sm text-gray-400">
            <a href="{{ route('checkout.finish') }}" class="hover:text-yellow-600 transition underline">Kembali ke Beranda</a>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const fileInput = document.getElementById('payment_proof');
        const uploadContent = document.getElementById('upload-content');
        const uploadSuccess = document.getElementById('upload-success');
        const uploadLoading = document.getElementById('upload-loading');
        const uploadError = document.getElementById('upload-error');
        const fileNameDisplay = document.getElementById('file-name');
        const whatsappBtn = document.getElementById('whatsapp-btn');
        let originalWhatsappUrl = whatsappBtn.getAttribute('href');

        if(fileInput) {
            fileInput.addEventListener('change', function(e) {
                const file = e.target.files[0];
                if (!file) return;

                if (file.size > 5 * 1024 * 1024) {
                    uploadError.textContent = 'Ukuran file terlalu besar (Max 5MB)';
                    uploadError.classList.remove('hidden');
                    return;
                }

                const formData = new FormData();
                formData.append('payment_proof', file);
                formData.append('_token', '{{ csrf_token() }}');

                // UI Loading
                uploadContent.classList.add('hidden');
                uploadSuccess.classList.add('hidden');
                uploadLoading.classList.remove('hidden');
                uploadError.classList.add('hidden');

                fetch('{{ route("checkout.upload-proof") }}', {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    uploadLoading.classList.add('hidden');
                    if (data.success) {
                        uploadSuccess.classList.remove('hidden');
                        fileNameDisplay.textContent = file.name;
                        
                        // Update WhatsApp URL
                        const proofUrl = data.url;
                        const messageAddition = `\n\n*Bukti Pembayaran:*\n${proofUrl}`;
                        
                        // Check if URL already has query params
                        if (originalWhatsappUrl.includes('text=')) {
                            // Append to existing text
                             const newUrl = originalWhatsappUrl + encodeURIComponent(messageAddition);
                             whatsappBtn.setAttribute('href', newUrl);
                        } else {
                            // Should not happen based on controller logic but safe fallback
                             const newUrl = originalWhatsappUrl + '&text=' + encodeURIComponent(messageAddition);
                             whatsappBtn.setAttribute('href', newUrl);
                        }
                        
                    } else {
                        uploadContent.classList.remove('hidden');
                        uploadError.textContent = data.message || 'Gagal mengupload file';
                        uploadError.classList.remove('hidden');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    uploadLoading.classList.add('hidden');
                    uploadContent.classList.remove('hidden');
                    uploadError.textContent = 'Terjadi kesalahan saat mengupload';
                    uploadError.classList.remove('hidden');
                });
            });
        }
    });
</script>
@endsection