@extends('layouts.app')

@section('title', 'Order Success')

@section('content')
<div class="max-w-2xl mx-auto px-4">
    <div class="bg-white rounded-lg shadow-lg p-8">
        <!-- Error Message (jika ada dari Stripe) -->
        @if(request()->has('error'))
        <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
            <div class="flex">
                <svg class="w-5 h-5 text-yellow-600 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
                </svg>
                <div>
                    <p class="font-bold text-yellow-800">Pembayaran Otomatis Gagal</p>
                    <p class="text-sm text-yellow-700">{{ request('error') }}</p>
                    <p class="text-sm text-yellow-700 mt-2">Silakan gunakan metode Transfer Bank Manual.</p>
                </div>
            </div>
        </div>
        @endif

        <!-- Success Icon (hanya jika tidak ada error) -->
        @if(!request()->has('error'))
        <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
            <svg class="w-10 h-10 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
        </div>
        @endif

        <h1 class="text-2xl font-bold mb-2 text-center">
            @if(request()->has('error'))
                Pesanan Dibuat, Tapi...
            @else
                Pesanan Berhasil Dibuat!
            @endif
        </h1>
        <p class="text-gray-600 mb-6 text-center">Order #{{ $order->order_number }}</p>

        @if($method == 'manual' || request()->has('error'))
        <!-- Manual Payment Instructions -->
        <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-6 mb-6 text-left">
            <h2 class="font-bold text-lg mb-4">📋 Instruksi Pembayaran Manual</h2>
            
            <div class="mb-4">
                <p class="font-medium mb-2">1. Transfer ke rekening berikut:</p>
                <div class="bg-white p-4 rounded border space-y-3">
                    @forelse($bankAccounts as $bank)
                    <div class="border-b last:border-0 pb-2 last:pb-0 flex items-center">
                        @if($bank->logo)
                        <img src="/uploads/banks/{{ $bank->logo }}" class="w-10 h-10 mr-3 object-contain">
                        @endif
                        <div>
                            <p class="font-bold">{{ $bank->bank_name }}</p>
                            <p class="text-lg font-mono">{{ $bank->account_number }}</p>
                            <p class="text-sm text-gray-600">a.n. {{ $bank->account_holder }}</p>
                            @if($bank->branch)
                            <p class="text-xs text-gray-500">Cabang: {{ $bank->branch }}</p>
                            @endif
                        </div>
                    </div>
                    @empty
                    <p class="text-gray-500">Informasi rekening akan segera muncul</p>
                    @endforelse
                </div>
            </div>

            <div class="mb-4">
                <p class="font-medium mb-2">2. Jumlah yang harus dibayar:</p>
                <p class="text-2xl font-bold text-blue-600">Rp {{ number_format($order->total) }}</p>
            </div>

            <div class="mb-4">
                <p class="font-medium mb-2">3. Konfirmasi pembayaran:</p>
                <p class="text-sm">Upload bukti transfer di halaman <a href="/user/orders/{{ $order->id }}" class="text-blue-600 font-bold underline">detail order</a> setelah login.</p>
            </div>

            <div class="bg-blue-50 p-3 rounded mt-4">
                <p class="text-sm">
                    <span class="font-bold">⚠️ Penting:</span> Pesanan akan diproses setelah pembayaran diverifikasi (1-24 jam).
                </p>
            </div>
        </div>
        @elseif($method == 'stripe')
        <!-- Stripe Success -->
        <div class="bg-green-50 border border-green-200 rounded-lg p-6 mb-6">
            <div class="flex items-center mb-4">
                <svg class="w-6 h-6 text-green-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <h3 class="font-bold text-green-800">Pembayaran Stripe Diproses</h3>
            </div>
            <p class="text-sm">Status pembayaran akan segera diperbarui. Cek secara berkala di halaman order.</p>
        </div>
        @else
        <!-- Auto Payment -->
        <div class="bg-green-50 border border-green-200 rounded-lg p-6 mb-6">
            <p class="mb-2">Anda akan diarahkan ke halaman pembayaran.</p>
            <p class="text-sm">Jika tidak diarahkan otomatis, klik tombol di bawah:</p>
        </div>
        @endif

        <!-- Action Buttons -->
        <div class="space-y-3">
            @if(session('user_id'))
            <a href="/user/orders/{{ $order->id }}" class="block w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 text-center">
                Lihat Detail Order
            </a>
            @else
            <div class="bg-gray-50 p-4 rounded">
                <p class="text-sm mb-3 text-center">Login untuk melacak pesanan dan upload bukti pembayaran</p>
                <a href="/auth/login" class="block w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 text-center">
                    Login Sekarang
                </a>
            </div>
            @endif
            
            <a href="/" class="block w-full bg-gray-500 text-white py-2 rounded-lg hover:bg-gray-600 text-center">
                Kembali ke Beranda
            </a>
        </div>
    </div>
</div>

@if(isset($emailStatus) && $emailStatus)
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
    <h3 class="font-bold text-blue-800 mb-2 flex items-center gap-2">
        <i class="fas fa-envelope"></i> Email Status
    </h3>
    <div class="text-sm space-y-1">
        @if($emailStatus['customer_email_sent'] ?? false)
        <p class="text-green-600">✅ Order confirmation email sent to: <strong>{{ $emailStatus['customer_email'] ?? 'N/A' }}</strong></p>
        @else
        <p class="text-red-600">❌ Failed to send confirmation email to: <strong>{{ $emailStatus['customer_email'] ?? 'N/A' }}</strong></p>
        @endif
        
        @if($emailStatus['admin_email_sent'] ?? false)
        <p class="text-green-600">✅ Admin notification email sent to: <strong>{{ $emailStatus['admin_email'] ?? 'N/A' }}</strong></p>
        @else
        <p class="text-red-600">❌ Failed to send admin notification to: <strong>{{ $emailStatus['admin_email'] ?? 'N/A' }}</strong></p>
        @endif
        
        @if(!empty($emailStatus['errors']))
        <div class="text-red-600 mt-2">
            <strong>Errors:</strong>
            <ul class="list-disc pl-5 mt-1">
                @foreach($emailStatus['errors'] as $error)
                <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
        @endif
        
        <p class="text-gray-500 text-xs mt-2">Email sent at: {{ $emailStatus['sent_at'] ?? 'N/A' }}</p>
    </div>
</div>
@endif
@endsection