@extends('layouts.app')

@section('content')
<div class="max-w-3xl mx-auto">
    <div class="text-center mb-8">
        @if($order->status === 'completed')
        <div class="w-20 h-20 mx-auto mb-4 bg-green-100 rounded-full flex items-center justify-center">
            <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"/>
            </svg>
        </div>
        <h1 class="text-2xl font-bold text-gray-900 mb-2">Pesanan Selesai!</h1>
        <p class="text-gray-600">Terima kasih telah berbelanja</p>
        @elseif($order->status === 'failed' || $order->status === 'cancelled')
        <div class="w-20 h-20 mx-auto mb-4 bg-red-100 rounded-full flex items-center justify-center">
            <svg class="w-10 h-10 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
            </svg>
        </div>
        <h1 class="text-2xl font-bold text-gray-900 mb-2">Pesanan {{ $order->status === 'failed' ? 'Gagal' : 'Dibatalkan' }}</h1>
        <p class="text-gray-600">Silakan hubungi customer service</p>
        @else
        <div class="w-20 h-20 mx-auto mb-4 bg-blue-100 rounded-full flex items-center justify-center">
            <svg class="w-10 h-10 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
        </div>
        <h1 class="text-2xl font-bold text-gray-900 mb-2">Pesanan Diproses</h1>
        <p class="text-gray-600">Mohon menunggu konfirmasi</p>
        @endif
    </div>

    <!-- Order Details -->
    <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100 mb-6">
        <h2 class="font-bold text-gray-900 mb-4">Detail Pesanan</h2>
        
        <div class="space-y-3">
            <div class="flex justify-between py-2 border-b border-gray-100">
                <span class="text-gray-600">Order ID</span>
                <span class="font-mono font-semibold">{{ $order->order_id }}</span>
            </div>
            <div class="flex justify-between py-2 border-b border-gray-100">
                <span class="text-gray-600">Produk</span>
                <span class="font-semibold">{{ $order->product->name }}</span>
            </div>
            <div class="flex justify-between py-2 border-b border-gray-100">
                <span class="text-gray-600">Harga</span>
                <span class="font-semibold">Rp {{ number_format($order->amount, 0, ',', '.') }}</span>
            </div>
            <div class="flex justify-between py-2 border-b border-gray-100">
                <span class="text-gray-600">Status</span>
                <span class="px-3 py-1 rounded-full text-sm font-semibold
                    @if($order->status === 'completed') bg-green-100 text-green-700
                    @elseif($order->status === 'pending') bg-yellow-100 text-yellow-700
                    @elseif($order->status === 'processing') bg-blue-100 text-blue-700
                    @else bg-red-100 text-red-700
                    @endif">
                    {{ ucfirst($order->status) }}
                </span>
            </div>
            <div class="flex justify-between py-2">
                <span class="text-gray-600">Tanggal</span>
                <span class="font-semibold">{{ $order->created_at->format('d M Y, H:i') }}</span>
            </div>
        </div>
    </div>

    <!-- Timeline -->
    <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100 mb-6">
        <h2 class="font-bold text-gray-900 mb-6">Status Timeline</h2>
        
        <div class="space-y-4">
            <div class="flex gap-4">
                <div class="flex flex-col items-center">
                    <div class="w-10 h-10 rounded-full bg-[#0C951E] flex items-center justify-center text-white">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                        </svg>
                    </div>
                    @if($order->status !== 'pending')<div class="w-0.5 h-full bg-gray-200 my-1"></div>@endif
                </div>
                <div class="flex-1 pb-4">
                    <p class="font-semibold text-gray-900">Pesanan Dibuat</p>
                    <p class="text-sm text-gray-500">{{ $order->created_at->format('d M Y, H:i') }}</p>
                </div>
            </div>

            @if($order->status !== 'pending')
            <div class="flex gap-4">
                <div class="flex flex-col items-center">
                    <div class="w-10 h-10 rounded-full {{ in_array($order->status, ['processing', 'completed']) ? 'bg-[#0C951E]' : 'bg-gray-200' }} flex items-center justify-center text-white">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                        </svg>
                    </div>
                    @if($order->status === 'completed')<div class="w-0.5 h-full bg-gray-200 my-1"></div>@endif
                </div>
                <div class="flex-1 pb-4">
                    <p class="font-semibold text-gray-900">Diproses</p>
                    <p class="text-sm text-gray-500">Pesanan sedang diproses</p>
                </div>
            </div>
            @endif

            @if($order->status === 'completed')
            <div class="flex gap-4">
                <div class="flex flex-col items-center">
                    <div class="w-10 h-10 rounded-full bg-[#0C951E] flex items-center justify-center text-white">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                        </svg>
                    </div>
                </div>
                <div class="flex-1">
                    <p class="font-semibold text-gray-900">Selesai</p>
                    <p class="text-sm text-gray-500">Pesanan telah selesai</p>
                </div>
            </div>
            @endif
        </div>
    </div>

    <!-- Actions -->
    <div class="flex gap-3 justify-center">
        <a href="{{ route('home') }}" class="px-6 py-3 border border-gray-300 text-gray-700 rounded-xl font-medium hover:bg-gray-50 transition-colors">
            Kembali ke Home
        </a>
        <a href="{{ route('profile.index') }}" class="px-6 py-3 bg-[#0C951E] hover:bg-[#0a7d18] text-white rounded-xl font-medium transition-colors">
            Lihat Pesanan Saya
        </a>
    </div>
</div>
@endsection