@extends('layouts.app')

@section('head', 'Pesanan Berhasil')

@section('content')
    <div class="min-vh-100 bg-light py-5">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-10">
                    
                    <!-- Success Header -->
                    <div class="text-center mb-5">
                        <div class="d-inline-flex align-items-center justify-content-center bg-success bg-opacity-25 rounded-circle mb-4" style="width: 64px; height: 64px;">
                            <svg class="text-success" width="32" height="32" 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>
                        <h1 class="display-5 fw-bold text-dark mb-3">Pesanan Berhasil!</h1>
                        <p class="fs-5 text-muted">Terima kasih telah berbelanja dengan kami</p>
                        <p class="small text-muted mt-2">Pembayaran Anda sedang diverifikasi dan pesanan akan segera diproses</p>
                    </div>

                    <div class="row g-4">
                        <!-- Left Column: Order Details & Items -->
                        <div class="col-lg-8">
                            
                            <!-- Order Summary Card -->
                            <div class="card shadow-sm border-0 mb-4">
                                <div class="card-header bg-primary text-white p-4">
                                    <h5 class="card-title fw-semibold mb-2">Detail Pesanan</h5>
                                    <p class="mb-0 opacity-75">{{ $order->order_number }}</p>
                                </div>
                                
                                <div class="card-body p-4">
                                    <div class="row g-4">
                                        <div class="col-md-6">
                                            <div class="border-bottom border-light py-2 d-flex justify-content-between">
                                                <span class="text-muted fw-medium">Nomor Pesanan</span>
                                                <span class="fw-semibold text-dark">{{ $order->order_number }}</span>
                                            </div>
                                            
                                            <div class="border-bottom border-light py-2 d-flex justify-content-between">
                                                <span class="text-muted fw-medium">Tanggal Pesanan</span>
                                                <span class="text-dark">{{ $order->created_at->format('d M Y, H:i') }}</span>
                                            </div>
                                            
                                            <div class="py-2 d-flex justify-content-between">
                                                <span class="text-muted fw-medium">Status</span>
                                                <span class="badge {{ $order->status_badge_class }} d-flex align-items-center">
                                                    <span class="bg-white rounded-circle me-2" style="width: 8px; height: 8px;"></span>
                                                    {{ $order->status_text }}
                                                </span>
                                            </div>
                                        </div>
                                        
                                        <div class="col-md-6">
                                            <div class="border-bottom border-light py-2 d-flex justify-content-between">
                                                <span class="text-muted fw-medium">Metode Pembayaran</span>
                                                <span class="text-dark">
                                                    @switch($order->payment_method)
                                                        @case('bank_transfer')
                                                            <div class="d-flex align-items-center">
                                                                <svg class="text-primary me-2" width="16" height="16" fill="currentColor" viewBox="0 0 20 20">
                                                                    <path d="M4 4a2 2 0 00-2 2v1h16V6a2 2 0 00-2-2H4zM18 9H2v5a2 2 0 002 2h12a2 2 0 002-2V9zM4 13a1 1 0 011-1h1a1 1 0 110 2H5a1 1 0 01-1-1zm5-1a1 1 0 100 2h1a1 1 0 100-2H9z"/>
                                                                </svg>
                                                                <span>Transfer Bank</span>
                                                            </div>
                                                        @break
                                                        @case('e_wallet')
                                                            <div class="d-flex align-items-center">
                                                                <svg class="text-success me-2" width="16" height="16" fill="currentColor" viewBox="0 0 20 20">
                                                                    <path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"/>
                                                                </svg>
                                                                <span>E-Wallet</span>
                                                            </div>
                                                        @break
                                                        @case('cod')
                                                            <div class="d-flex align-items-center">
                                                                <svg class="text-warning me-2" width="16" height="16" fill="currentColor" viewBox="0 0 20 20">
                                                                    <path fill-rule="evenodd" d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4zm2 6a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm6 4a2 2 0 100-4 2 2 0 000 4z"/>
                                                                </svg>
                                                                <span>Bayar di Tempat</span>
                                                            </div>
                                                        @break
                                                        @default
                                                            {{ $order->payment_method }}
                                                    @endswitch
                                                </span>
                                            </div>
                                            
                                            <div class="border-bottom border-light py-2 d-flex justify-content-between">
                                                <span class="text-muted fw-medium">Total Items</span>
                                                <span class="text-dark">{{ $order->orderItems->count() }} item(s)</span>
                                            </div>
                                            
                                            <div class="py-2 d-flex justify-content-between">
                                                <span class="text-muted fw-medium">Total Pembayaran</span>
                                                <span class="fs-4 fw-bold text-success">{{ $order->formatted_total }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Shipping Address Card -->
                            <div class="card shadow-sm border-0">
                                <div class="card-body p-4">
                                    <div class="d-flex align-items-center mb-3">
                                        <svg class="text-muted me-3" width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                                        </svg>
                                        <h5 class="fw-semibold text-dark mb-0">Alamat Pengiriman</h5>
                                    </div>
                                    
                                    <div class="bg-light rounded p-3">
                                        <p class="fw-semibold text-dark mb-1">{{ $order->shipping_address['name'] }}</p>
                                        <p class="text-muted mb-1">{{ $order->shipping_address['phone'] }}</p>
                                        <p class="text-dark mb-1">{{ $order->shipping_address['address'] }}</p>
                                        <p class="text-dark mb-0">{{ $order->shipping_address['city'] }} {{ $order->shipping_address['postal_code'] }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Right Column: Payment Status -->
                        <div class="col-lg-4">
                            @if ($order->payment_method == 'bank_transfer')
                                <div class="card shadow-sm border-primary border-2">
                                    <div class="card-header bg-primary text-white p-4">
                                        <div class="d-flex align-items-center">
                                            <svg class="me-3" width="20" height="20" fill="currentColor" viewBox="0 0 20 20">
                                                <path d="M4 4a2 2 0 00-2 2v1h16V6a2 2 0 00-2-2H4zM18 9H2v5a2 2 0 002 2h12a2 2 0 002-2V9zM4 13a1 1 0 011-1h1a1 1 0 110 2H5a1 1 0 01-1-1zm5-1a1 1 0 100 2h1a1 1 0 100-2H9z"/>
                                            </svg>
                                            <h5 class="fw-semibold mb-0">Status Pembayaran</h5>
                                        </div>
                                    </div>
                                    
                                    <div class="card-body p-4">
                                        <p class="text-muted fw-medium mb-3">Pembayaran via Transfer Bank:</p>
                                        
                                        <div class="bg-primary bg-opacity-10 border border-primary rounded p-3 mb-3">
                                            <div class="row g-2">
                                                <div class="col-5">
                                                    <small class="text-muted">Bank:</small>
                                                </div>
                                                <div class="col-7">
                                                    <span class="fw-semibold">BCA</span>
                                                </div>
                                                <div class="col-5">
                                                    <small class="text-muted">No. Rekening:</small>
                                                </div>
                                                <div class="col-7">
                                                    <span class="fw-semibold font-monospace">1234567890</span>
                                                </div>
                                                <div class="col-5">
                                                    <small class="text-muted">Atas Nama:</small>
                                                </div>
                                                <div class="col-7">
                                                    <span class="fw-semibold">Toko Online</span>
                                                </div>
                                                <div class="col-12"><hr class="my-2"></div>
                                                <div class="col-5">
                                                    <small class="text-muted">Jumlah:</small>
                                                </div>
                                                <div class="col-7">
                                                    <span class="fw-bold fs-5 text-primary">{{ $order->formatted_total }}</span>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="alert alert-success border-success" role="alert">
                                            <div class="d-flex align-items-center">
                                                <svg class="text-success me-2" width="16" height="16" fill="currentColor" viewBox="0 0 20 20">
                                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/>
                                                </svg>
                                                <small class="fw-medium mb-0">Pembayaran telah diterima!</small>
                                            </div>
                                            <small class="text-success mt-1 d-block">Bukti pembayaran sedang diverifikasi oleh tim kami.</small>
                                        </div>
                                    </div>
                                </div>

                            @elseif($order->payment_method == 'e_wallet')
                                <div class="card shadow-sm border-success border-2">
                                    <div class="card-header bg-success text-white p-4">
                                        <div class="d-flex align-items-center">
                                            <svg class="me-3" width="20" height="20" fill="currentColor" viewBox="0 0 20 20">
                                                <path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"/>
                                            </svg>
                                            <h5 class="fw-semibold mb-0">Status Pembayaran</h5>
                                        </div>
                                    </div>
                                    
                                    <div class="card-body p-4">
                                        <p class="text-muted fw-medium mb-3">Pembayaran via E-Wallet:</p>
                                        
                                        <div class="bg-success bg-opacity-10 border border-success rounded p-3 mb-3">
                                            <div class="row g-2">
                                                <div class="col-5">
                                                    <small class="text-muted">Platform:</small>
                                                </div>
                                                <div class="col-7">
                                                    <span class="fw-semibold">GoPay / OVO / Dana</span>
                                                </div>
                                                <div class="col-5">
                                                    <small class="text-muted">Nomor:</small>
                                                </div>
                                                <div class="col-7">
                                                    <span class="fw-semibold font-monospace">0812-3456-7890</span>
                                                </div>
                                                <div class="col-5">
                                                    <small class="text-muted">Atas Nama:</small>
                                                </div>
                                                <div class="col-7">
                                                    <span class="fw-semibold">Toko Online</span>
                                                </div>
                                                <div class="col-12"><hr class="my-2"></div>
                                                <div class="col-5">
                                                    <small class="text-muted">Jumlah:</small>
                                                </div>
                                                <div class="col-7">
                                                    <span class="fw-bold fs-5 text-success">{{ $order->formatted_total }}</span>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="alert alert-success border-success" role="alert">
                                            <div class="d-flex align-items-center">
                                                <svg class="text-success me-2" width="16" height="16" fill="currentColor" viewBox="0 0 20 20">
                                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/>
                                                </svg>
                                                <small class="fw-medium mb-0">Pembayaran telah diterima!</small>
                                            </div>
                                            <small class="text-success mt-1 d-block">Bukti pembayaran sedang diverifikasi oleh tim kami.</small>
                                        </div>
                                    </div>
                                </div>

                            @elseif($order->payment_method == 'cod')
                                <div class="card shadow-sm border-warning border-2">
                                    <div class="card-header bg-warning text-dark p-4">
                                        <div class="d-flex align-items-center">
                                            <svg class="me-3" width="20" height="20" fill="currentColor" viewBox="0 0 20 20">
                                                <path fill-rule="evenodd" d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4zm2 6a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm6 4a2 2 0 100-4 2 2 0 000 4z"/>
                                            </svg>
                                            <h5 class="fw-semibold mb-0">Bayar di Tempat (COD)</h5>
                                        </div>
                                    </div>
                                    
                                    <div class="card-body p-4">
                                        <div class="alert alert-warning border-warning" role="alert">
                                            <div class="d-flex align-items-center mb-2">
                                                <svg class="text-warning me-2" width="16" height="16" fill="currentColor" viewBox="0 0 20 20">
                                                    <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"/>
                                                </svg>
                                                <span class="fw-medium">Informasi Penting</span>
                                            </div>
                                            <ul class="small list-unstyled mb-0">
                                                <li class="mb-1">• Pesanan akan dikirim ke alamat yang sudah ditentukan</li>
                                                <li class="mb-1">• Pembayaran dilakukan saat barang sampai</li>
                                                <li class="mb-1">• Siapkan uang pas: <strong>{{ $order->formatted_total }}</strong></li>
                                                <li class="mb-0">• Periksa kondisi barang sebelum membayar</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            @endif

                            <!-- Action Buttons -->
                            <div class="mt-4 d-grid gap-3">
                                <a href="{{ route('orders.detail', $order->id) }}"
                                    class="btn btn-primary btn-lg shadow">
                                    <svg class="me-2" width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                                    </svg>
                                    Lihat Detail Pesanan
                                </a>
                                
                                <div class="row g-2">
                                    <div class="col-6">
                                        <a href="{{ route('orders.index') }}" 
                                           class="btn btn-outline-secondary w-100">
                                            ?? Riwayat Pesanan
                                        </a>
                                    </div>
                                    <div class="col-6">
                                        <a href="{{ route('products.index') }}" 
                                           class="btn btn-outline-success w-100">
                                            ??? Lanjut Belanja
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Add fade-in animation using Bootstrap's built-in classes
        const cards = document.querySelectorAll('.card');
        cards.forEach((card, index) => {
            card.style.opacity = '0';
            card.style.transform = 'translateY(20px)';
            card.style.transition = 'all 0.6s ease-in';
            
            setTimeout(() => {
                card.style.opacity = '1';
                card.style.transform = 'translateY(0)';
            }, index * 100);
        });
        
        // Add pulse animation to success icon
        const successIcon = document.querySelector('.bg-success.bg-opacity-25');
        if (successIcon) {
            successIcon.style.animation = 'pulse 2s ease-in-out';
        }
    });
</script>

<style>
    @keyframes pulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.05); }
    }
</style>
@endpush