@extends('account.layout')

@section('account-content')
@php
    $badgeColors = [
        'success' => 'bg-green-100 text-green-800',
        'danger' => 'bg-red-100 text-red-800',
        'warning' => 'bg-yellow-100 text-yellow-800',
        'info' => 'bg-blue-100 text-blue-800',
        'secondary' => 'bg-gray-100 text-gray-800',
    ];
@endphp
<div>
    <div class="flex items-center justify-between mb-4">
        <h1 class="text-2xl font-bold">My Orders</h1>
    </div>

    @if($orders->count() > 0)
        @foreach($orders as $order)
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 mb-4">
            <div class="px-6 py-4 border-b border-gray-100 flex flex-wrap items-center gap-4">
                <div>
                    <span class="text-xs text-gray-500 block">Order #</span>
                    <strong>{{ $order->order_number }}</strong>
                </div>
                <div>
                    <span class="text-xs text-gray-500 block">Date</span>
                    <strong>{{ $order->created_at->format('M d, Y') }}</strong>
                </div>
                <div>
                    <span class="text-xs text-gray-500 block">Total</span>
                    <strong>${{ number_format($order->total, 2) }}</strong>
                </div>
                <div>
                    <span class="inline-block text-xs font-medium px-2 py-1 rounded-full {{ $badgeColors[$order->status_color] ?? 'bg-gray-100 text-gray-800' }}">
                        {{ $order->status }}
                    </span>
                </div>
            </div>
            
            <div class="p-6">
                @foreach($order->items as $item)
                <div class="flex items-center gap-3 mb-3 last:mb-0">
                    @if($item->product->images && $item->product->images->count() > 0)
                        <img src="{{ asset('storage/' . $item->product->images->first()->path) }}" 
                            alt="{{ $item->product->name }}" 
                            class="rounded-lg w-14 h-14 object-cover shrink-0">
                    @else
                        <img src="{{ asset('images/no-image.png') }}" 
                            alt="No Image Available" 
                            class="rounded-lg w-14 h-14 object-cover shrink-0">
                    @endif
                    <div class="min-w-0">
                        <p class="text-sm font-medium mb-0.5 truncate">{{ $item->product->name }}</p>
                        <p class="text-xs text-gray-500">
                            Qty: {{ $item->quantity }} &times; ${{ number_format($item->price, 2) }}
                        </p>
                    </div>
                </div>
                @endforeach
            </div>

            <div class="px-6 py-4 border-t border-gray-100 flex flex-wrap items-center justify-between gap-4">
                <div>
                    @if($order->tracking_number)
                    <span class="text-xs text-gray-500 flex items-center gap-1.5">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10l2-1 2 1 2-1 2 1 2-1 2 1V6"/></svg>
                        Tracking #: {{ $order->tracking_number }}
                    </span>
                    @endif
                </div>
                <div class="flex items-center gap-2">
                    <a href="{{ route('account.orders.show', $order) }}" 
                        class="inline-flex items-center gap-1 px-3 py-1.5 text-sm rounded-lg font-medium transition-colors border border-green-600 text-green-600 hover:bg-green-600 hover:text-white">
                        View Details
                    </a>
                    @if($order->can_cancel)
                    <button type="button" 
                        class="inline-flex items-center gap-1 px-3 py-1.5 text-sm rounded-lg font-medium transition-colors border border-red-500 text-red-500 hover:bg-red-500 hover:text-white"
                        data-modal-target="cancelOrder{{ $order->id }}">
                        <svg class="w-3.5 h-3.5" 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>
                        Cancel
                    </button>
                    @endif
                </div>
            </div>
        </div>

        @if($order->can_cancel)
        <div class="fixed inset-0 z-50 hidden" id="cancelOrder{{ $order->id }}" tabindex="-1">
            <div class="fixed inset-0 bg-black/50 z-40"></div>
            <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
                <div class="bg-white rounded-xl shadow-xl w-full max-w-lg max-h-full overflow-y-auto">
                    <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
                        <h5 class="text-lg font-semibold">Cancel Order #{{ $order->order_number }}</h5>
                        <button type="button" class="text-gray-400 hover:text-gray-600 transition-colors p-1" data-modal-close>
                            <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="M6 18L18 6M6 6l12 12"/></svg>
                        </button>
                    </div>
                    <form action="{{ route('account.orders.cancel', $order) }}" method="POST">
                        @csrf
                        @method('PUT')
                        <div class="px-6 py-4">
                            <p class="mb-3 text-sm text-gray-600">Are you sure you want to cancel this order?</p>
                            <div class="mb-3">
                                <label for="cancel_reason" class="block text-sm font-medium text-gray-700 mb-1">Reason for Cancellation</label>
                                <select class="w-full px-3 py-2 border border-gray-300 rounded-lg bg-white focus:ring-2 focus:ring-green-500 focus:border-green-500 outline-none" name="cancel_reason" required>
                                    <option value="">Select a reason</option>
                                    <option value="Changed mind">Changed my mind</option>
                                    <option value="Wrong item">Ordered wrong item</option>
                                    <option value="Shipping delay">Shipping delay</option>
                                    <option value="Other">Other</option>
                                </select>
                            </div>
                        </div>
                        <div class="px-6 py-4 border-t border-gray-200 flex justify-end gap-2">
                            <button type="button" class="inline-flex items-center px-4 py-2 rounded-lg font-medium transition-colors bg-gray-100 hover:bg-gray-200 text-gray-700" data-modal-close>Close</button>
                            <button type="submit" class="inline-flex items-center px-4 py-2 rounded-lg font-medium transition-colors bg-red-500 hover:bg-red-600 text-white">Cancel Order</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        @endif
        @endforeach

        <div class="flex items-center justify-between mt-4">
            <div class="text-sm text-gray-500">
                Showing {{ $orders->firstItem() ?? 0 }} to {{ $orders->lastItem() ?? 0 }} of {{ $orders->total() }} orders
            </div>
            <div>
                {{ $orders->links('pagination::tailwind') }}
            </div>
        </div>
    @else
        <div class="text-center py-12">
            <svg class="w-16 h-16 text-gray-300 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/></svg>
            <h3 class="text-lg font-semibold text-gray-700">No Orders Found</h3>
            <p class="text-gray-500 mb-4">You haven't placed any orders yet.</p>
            <a href="{{ route('products.index') }}" class="inline-flex items-center px-4 py-2 rounded-lg font-medium transition-colors bg-green-600 hover:bg-green-700 text-white">
                Start Shopping
            </a>
        </div>
    @endif
</div>
@endsection
