@extends('layouts.app')

@section('title', 'Đơn hàng của tôi - XING NEW')

@section('content')
<div class="bg-slate-50 py-12 min-h-[80vh]">
    <div class="container mx-auto px-4">
        <div class="max-w-6xl mx-auto">
            <h1 class="text-3xl font-bold text-slate-900 mb-8">Lịch sử đơn hàng</h1>

            <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
                <!-- Sidebar -->
                <div class="lg:col-span-1 space-y-4">
                    <div class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100 sticky top-24">
                        <div class="flex items-center gap-4 mb-6">
                            <div class="w-12 h-12 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center font-bold text-xl uppercase">
                                {{ substr(Auth::user()->name, 0, 1) }}
                            </div>
                            <div>
                                <h2 class="font-bold text-slate-900">{{ Auth::user()->name }}</h2>
                                <p class="text-xs text-slate-500">{{ Auth::user()->email }}</p>
                            </div>
                        </div>
                        
                        <nav class="space-y-1">
                            <a href="{{ route('profile') }}" class="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-50 rounded-xl font-medium transition-all">
                                <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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
                                Hồ sơ cá nhân
                            </a>
                            <a href="{{ route('orders.index') }}" class="flex items-center gap-3 px-4 py-3 bg-blue-50 text-blue-600 rounded-xl font-bold transition-all">
                                <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="M16 11V7a4 4 0 11-8 0m-4 5h16l1 12H3l1-12z"></path></svg>
                                Đơn hàng của tôi
                            </a>
                            <a href="{{ route('password.edit') }}" class="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-50 rounded-xl font-medium transition-all">
                                <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="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
                                Đổi mật khẩu
                            </a>
                            <form action="{{ route('logout') }}" method="POST">
                                @csrf
                                <button type="submit" class="w-full flex items-center gap-3 px-4 py-3 text-red-600 hover:bg-red-50 rounded-xl font-medium transition-all">
                                    <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="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
                                    Đăng xuất
                                </button>
                            </form>
                        </nav>
                    </div>
                </div>

                <!-- Main Content -->
                <div class="lg:col-span-3">
                    @forelse($orders as $order)
                        <div class="bg-white rounded-3xl p-6 shadow-sm border border-slate-100 mb-6 group hover:border-blue-200 transition-all">
                            <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-6 pb-6 border-b border-slate-50">
                                <div>
                                    <div class="flex items-center gap-3 mb-1">
                                        <span class="text-sm font-bold text-slate-900">{{ $order->order_number }}</span>
                                        <span class="px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider
                                            @if($order->status == 'new') bg-blue-100 text-blue-600
                                            @elseif($order->status == 'processing') bg-yellow-100 text-yellow-600
                                            @elseif($order->status == 'shipped') bg-purple-100 text-purple-600
                                            @elseif($order->status == 'completed') bg-green-100 text-green-600
                                            @else bg-red-100 text-red-600 @endif">
                                            @if($order->status == 'new') Chờ xác nhận
                                            @elseif($order->status == 'processing') Đang xử lý
                                            @elseif($order->status == 'shipped') Đang giao hàng
                                            @elseif($order->status == 'completed') Đã giao hàng
                                            @else Đã hủy @endif
                                        </span>
                                    </div>
                                    <div class="text-xs text-slate-400">Ngày đặt: {{ $order->created_at->format('d/m/Y H:i') }}</div>
                                </div>
                                <div class="text-right">
                                    <div class="text-xs text-slate-400 mb-1">Tổng tiền</div>
                                    <div class="text-xl font-bold text-blue-600">{{ number_format($order->total_amount, 0, ',', '.') }}đ</div>
                                </div>
                            </div>

                            <div class="space-y-4">
                                @foreach($order->items as $item)
                                    <div class="flex gap-4">
                                        <div class="w-16 h-16 bg-slate-50 rounded-xl overflow-hidden flex-shrink-0 border border-slate-100">
                                            @if($item->product && $item->product->image)
                                                <img src="{{ Storage::url($item->product->image) }}" class="w-full h-full object-cover">
                                            @else
                                                <div class="w-full h-full flex items-center justify-center text-slate-300">
                                                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                                                </div>
                                            @endif
                                        </div>
                                        <div class="flex-grow">
                                            <h4 class="font-bold text-slate-800 text-sm line-clamp-1">{{ $item->product?->name ?? 'Sản phẩm không còn tồn tại' }}</h4>
                                            @if($item->options)
                                                <div class="flex flex-wrap gap-2 mt-1">
                                                    @foreach($item->options as $opt => $val)
                                                        <span class="text-[10px] bg-slate-100 text-slate-500 px-2 py-0.5 rounded font-bold uppercase">{{ $opt }}: {{ $val }}</span>
                                                    @endforeach
                                                </div>
                                            @endif
                                            <div class="flex justify-between mt-1">
                                                <div class="text-xs text-slate-500">Số lượng: {{ $item->quantity }}</div>
                                                <div class="text-sm font-medium text-slate-900">{{ number_format($item->price, 0, ',', '.') }}đ</div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            @if($order->status == 'new' && !$order->cancel_requested)
                                <div class="mt-6 pt-6 border-t border-slate-50 flex justify-end">
                                    <form action="{{ route('orders.cancel', $order->id) }}" method="POST" onsubmit="return confirm('Bạn có chắc chắn muốn yêu cầu hủy đơn hàng này?')">
                                        @csrf
                                        <input type="hidden" name="cancel_reason" value="Người dùng yêu cầu hủy">
                                        <button type="submit" class="text-sm font-bold text-red-600 hover:text-red-700 underline decoration-red-200 underline-offset-4 transition-all">
                                            Yêu cầu hủy đơn
                                        </button>
                                    </form>
                                </div>
                            @elseif($order->cancel_requested && $order->status != 'cancelled')
                                <div class="mt-6 pt-6 border-t border-slate-50 flex justify-end">
                                    <span class="inline-flex items-center gap-2 text-sm font-bold text-orange-600 bg-orange-50 px-4 py-2 rounded-xl border border-orange-100 italic">
                                        <svg class="w-4 h-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>
                                        Đang chờ hệ thống xác nhận hủy đơn...
                                    </span>
                                </div>
                            @endif
                        </div>
                    @empty
                        <div class="bg-white rounded-3xl p-12 text-center border border-slate-100">
                            <div class="w-20 h-20 bg-slate-50 text-slate-300 rounded-full flex items-center justify-center mx-auto mb-6">
                                <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 11-8 0m-4 5h16l1 12H3l1-12z"></path></svg>
                            </div>
                            <h3 class="text-xl font-bold text-slate-900 mb-2">Chưa có đơn hàng nào</h3>
                            <p class="text-slate-500 mb-8 max-w-sm mx-auto">Bạn chưa thực hiện đơn hàng nào trên hệ thống của chúng tôi.</p>
                            <a href="{{ route('products.index') }}" class="inline-block bg-blue-600 text-white font-bold px-8 py-3 rounded-xl shadow-lg shadow-blue-500/30 hover:-translate-y-1 transition-all">Mua sắm ngay</a>
                        </div>
                    @endforelse

                    <div class="mt-8">
                        {{ $orders->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection