<x-app-layout>
    <x-slot name="header">
        <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
            <h2 class="text-xl sm:text-2xl font-bold text-stone-800 flex items-center">
                <i class="fas fa-shopping-bag mr-2 text-amber-600"></i>
                {{ __('Pesanan Saya') }}
            </h2>
            <div class="flex gap-3 w-full sm:w-auto">
                <a href="{{ route('product.index') }}"
                    class="flex-1 sm:flex-none btn-primary inline-flex items-center justify-center px-4 sm:px-5 py-2.5 text-xs sm:text-sm font-medium rounded-xl shadow-md hover:shadow-lg transition-all duration-200">
                    <i class="fas fa-shopping-cart mr-2"></i>
                    Belanja Lagi
                </a>
            </div>
        </div>
    </x-slot>

    @php
    $statusColors = [
    'processing' => 'bg-amber-50 text-amber-700 border-amber-200',
    'shipped' => 'bg-blue-50 text-blue-700 border-blue-200',
    'delivered' => 'bg-purple-50 text-purple-700 border-purple-200',
    'completed' => 'bg-emerald-50 text-emerald-700 border-emerald-200',
    'cancelled' => 'bg-rose-50 text-rose-700 border-rose-200',
    ];
    $statusLabels = [
    'processing' => 'Diproses',
    'shipped' => 'Dikirim',
    'delivered' => 'Dalam Pengantaran',
    'completed' => 'Selesai',
    'cancelled' => 'Dibatalkan',
    ];
    @endphp

    <div class="space-y-4 sm:space-y-6">



        @if($orders->isEmpty())
        <div class="bg-white rounded-xl sm:rounded-2xl shadow-sm border border-stone-200 overflow-hidden">
            <div class="p-8 sm:p-12 md:p-16 text-center">
                <div class="w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 mx-auto bg-gradient-to-br from-amber-100 to-stone-100 rounded-2xl sm:rounded-3xl flex items-center justify-center shadow-sm border border-stone-200 mb-4 sm:mb-6">
                    <i class="fas fa-shopping-bag text-3xl sm:text-4xl md:text-5xl text-amber-600"></i>
                </div>
                <h3 class="text-lg sm:text-xl md:text-2xl font-bold text-stone-800 mb-2">Belum Ada Pesanan</h3>
                <p class="text-sm sm:text-base text-stone-600 mb-6 sm:mb-8">Yuk, mulai belanja sekarang!</p>
            </div>
        </div>
        @else
        <div class="space-y-3 sm:space-y-4">
            @foreach($orders as $order)
            @php
            $statusClass = $statusColors[$order->status] ?? 'bg-stone-50 text-stone-700 border-stone-200';
            $statusLabel = $statusLabels[$order->status] ?? ucfirst($order->status);
            @endphp
            <div class="bg-white rounded-xl sm:rounded-2xl shadow-sm border border-stone-200 overflow-hidden hover:shadow-md transition-all duration-200">
                <div class="p-4 sm:p-5 md:p-6">
                    {{-- Order Header --}}
                    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 pb-3 sm:pb-4 border-b border-stone-100">
                        <div class="flex items-center gap-2 sm:gap-3 w-full sm:w-auto">
                            <div class="h-8 w-8 sm:h-9 sm:w-9 md:h-10 md:w-10 bg-gradient-to-br from-amber-100 to-stone-100 rounded-lg sm:rounded-xl flex items-center justify-center shadow-sm flex-shrink-0 border border-stone-200">
                                <i class="fas fa-receipt text-amber-600 text-xs sm:text-sm"></i>
                            </div>
                            <div class="flex-1 min-w-0">
                                <div class="flex items-center gap-2 flex-wrap">
                                    <p class="text-xs sm:text-sm font-semibold text-stone-800">Order #{{ $order->order_id }}</p>
                                    <span class="px-2 sm:px-2.5 py-0.5 sm:py-1 text-[10px] sm:text-xs font-semibold rounded-full {{ $statusClass }} border inline-flex items-center whitespace-nowrap">
                                        <i class="fas fa-circle mr-1 text-[6px] sm:text-[8px]"></i>
                                        {{ $statusLabel }}
                                    </span>
                                </div>
                                <p class="text-[10px] sm:text-xs text-stone-500 mt-0.5">
                                    <i class="fas fa-calendar-alt mr-1"></i>{{ $order->created_at->format('d M Y, H:i') }}
                                </p>
                            </div>
                        </div>
                    </div>

                    {{-- Order Items --}}
                    <div class="space-y-2 sm:space-y-3 my-3 sm:my-4">
                        @foreach($order->items->take(2) as $item)
                        <div class="flex items-center gap-2 sm:gap-3 p-2 sm:p-3 bg-stone-50 rounded-lg sm:rounded-xl hover:bg-stone-100 transition-colors duration-200">
                            <div class="flex-shrink-0 h-12 w-12 sm:h-14 sm:w-14 bg-white rounded-lg sm:rounded-xl shadow-sm overflow-hidden border border-stone-200">
                                @php
                                $productImage = $item->product->image ?? null;
                                $imageUrl = null;
                                if ($productImage) {
                                if (is_array($productImage) && count($productImage) > 0) {
                                $imageUrl = asset('storage/' . $productImage[0]);
                                } elseif (is_string($productImage)) {
                                $decoded = json_decode($productImage, true);
                                if (is_array($decoded) && count($decoded) > 0) {
                                $imageUrl = asset('storage/' . $decoded[0]);
                                } else {
                                $imageUrl = asset('storage/' . $productImage);
                                }
                                }
                                }
                                @endphp
                                @if($imageUrl)
                                <img src="{{ $imageUrl }}" alt="{{ $item->product->product_name }}" class="w-full h-full object-cover">
                                @else
                                <div class="w-full h-full bg-gradient-to-br from-amber-100 to-stone-100 flex items-center justify-center">
                                    <i class="fas fa-image text-amber-300 text-xs sm:text-sm"></i>
                                </div>
                                @endif
                            </div>
                            <div class="flex-1 min-w-0">
                                <h4 class="text-xs sm:text-sm font-semibold text-stone-800 truncate">{{ $item->product->product_name }}</h4>
                                <div class="flex items-center justify-between mt-0.5">
                                    <p class="text-[10px] sm:text-xs text-stone-500">
                                        {{ $item->quantity }} x Rp {{ number_format($item->subtotal / $item->quantity, 0, ',', '.') }}
                                    </p>
                                    <p class="text-xs sm:text-sm font-medium text-amber-600">
                                        Rp {{ number_format($item->subtotal, 0, ',', '.') }}
                                    </p>
                                </div>
                            </div>
                        </div>
                        @endforeach
                        @if($order->items->count() > 2)
                        <div class="text-center">
                            <span class="text-[10px] sm:text-xs text-stone-500">+{{ $order->items->count() - 2 }} item lainnya</span>
                        </div>
                        @endif
                    </div>

                    {{-- Order Footer --}}
                    <div class="flex flex-col xs:flex-row justify-between items-start xs:items-center gap-3 pt-3 sm:pt-4 border-t border-stone-100">
                        <div>
                            <p class="text-[10px] sm:text-xs text-stone-500 mb-0.5">Total Pembayaran</p>
                            <p class="text-lg sm:text-xl md:text-2xl font-extrabold text-amber-600">
                                Rp {{ number_format($order->total_price, 0, ',', '.') }}
                            </p>
                        </div>
                        <div class="flex gap-2 w-full xs:w-auto">
                            <a href="{{ route('order.show', $order->order_id) }}"
                                class="flex-1 xs:flex-none inline-flex items-center justify-center px-3 sm:px-4 py-2 bg-stone-100 hover:bg-stone-200 border border-stone-300 text-stone-700 text-xs font-medium rounded-lg transition-all duration-200">
                                <i class="fas fa-eye mr-1.5"></i>Detail
                            </a>

                            {{-- Hanya bisa dibatalkan jika masih processing --}}
                            @if($order->status === 'processing')
                            <form action="{{ route('order.cancel', $order->order_id) }}" method="POST" class="flex-1 xs:flex-none">
                                @csrf
                                <button type="submit"
                                    onclick="return confirm('Yakin ingin membatalkan pesanan ini?')"
                                    class="w-full inline-flex items-center justify-center px-3 sm:px-4 py-2 bg-rose-500 hover:bg-rose-600 text-white text-xs font-medium rounded-lg transition-all duration-200">
                                    <i class="fas fa-times mr-1.5"></i>Batal
                                </button>
                            </form>
                            @endif

                            @if($order->status === 'completed')
                            <a href="{{ route('product.show', $order->items->first()->product_id) }}"
                                class="flex-1 xs:flex-none btn-primary inline-flex items-center justify-center px-3 sm:px-4 py-2 text-xs font-medium rounded-lg transition-all duration-200">
                                <i class="fas fa-shopping-cart mr-1.5"></i>Beli Lagi
                            </a>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>

        @if($orders->hasPages())
        <div class="mt-4 sm:mt-6">
            <div class="bg-white rounded-xl sm:rounded-2xl shadow-sm border border-stone-200 p-3 sm:p-4">
                <div class="flex flex-col sm:flex-row justify-between items-center gap-3">
                    <span class="text-[10px] sm:text-xs text-stone-600">
                        Menampilkan {{ $orders->firstItem() }} - {{ $orders->lastItem() }} dari {{ $orders->total() }} pesanan
                    </span>
                    <div class="flex items-center space-x-1 sm:space-x-2 overflow-x-auto w-full sm:w-auto justify-center">
                        {{ $orders->onEachSide(1)->links() }}
                    </div>
                </div>
            </div>
        </div>
        @endif
        @endif

    </div>

    @push('scripts')
    <script>
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
        document.addEventListener('DOMContentLoaded', function() {
            const alerts = document.querySelectorAll('.bg-emerald-50, .bg-rose-50');
            alerts.forEach(alert => {
                setTimeout(() => {
                    alert.style.transition = 'opacity 0.5s ease';
                    alert.style.opacity = '0';
                    setTimeout(() => alert.remove(), 500);
                }, 5000);
            });
        });
    </script>
    @endpush

    <style>
        @media (max-width: 480px) {
            .xs\:flex-row {
                flex-direction: row;
            }

            .xs\:flex-none {
                flex: none;
            }

            .xs\:w-auto {
                width: auto;
            }
        }

        button,
        a,
        [role="button"] {
            touch-action: manipulation;
            min-height: 36px;
        }

        input,
        select,
        textarea {
            font-size: 16px !important;
        }
    </style>
</x-app-layout>