@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-6">
    <h2 class="text-2xl font-bold mb-6">Order History</h2>

    <div class="overflow-x-auto bg-white shadow-md rounded-lg">
        <table class="min-w-full divide-y divide-gray-200 text-sm">
            <thead class="bg-gray-100 text-gray-700">
                <tr>
                    <th class="px-4 py-3 text-left">Order</th>
                    <th class="px-4 py-3 text-left">Customer</th>
                    <th class="px-4 py-3 text-left">Email</th>
                    <th class="px-4 py-3 text-left">Total</th>
                    <th class="px-4 py-3 text-left">Status</th>
                    <th class="px-4 py-3 text-left">Date</th>
                    <th class="px-4 py-3 text-left">Action</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-200">
                @forelse($orders as $order)
                    <tr class="hover:bg-gray-50 transition">
                        <td class="px-4 py-3 font-medium text-blue-600">{{ $order->order_name }}</td>
                        <td class="px-4 py-3">
                            {{ $order->customer['first_name'] ?? '' }} {{ $order->customer['last_name'] ?? '' }}
                        </td>
                        <td class="px-4 py-3">{{ $order->email }}</td>
                        <td class="px-4 py-3">${{ number_format($order->total_price, 2) }} {{ $order->currency }}</td>
                        <td class="px-4 py-3 capitalize">{{ $order->status ?? '—' }}</td>
                        <td class="px-4 py-3 text-gray-500">
                            {{ $order->shopify_created_at ? $order->shopify_created_at->format('Y-m-d H:i') : '—' }}
                        </td>
                        <td class="px-4 py-3">
                            <button onclick="toggleDetails('details-{{ $order->id }}')" class="text-blue-600 hover:underline">View</button>
                        </td>
                    </tr>

                    <!-- Detail Row -->
                    <tr id="details-{{ $order->id }}" class="hidden bg-gray-50">
                        <td colspan="7" class="p-4 text-sm text-gray-700">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <h4 class="font-semibold mb-1">Shipping Address</h4>
                                    <p>{{ $order->shipping_address['address1'] ?? '-' }}</p>
                                    <p>{{ $order->shipping_address['city'] ?? '' }}, {{ $order->shipping_address['province'] ?? '' }} {{ $order->shipping_address['zip'] ?? '' }}</p>
                                    <p>{{ $order->shipping_address['country'] ?? '' }}</p>
                                </div>

                                <div>
                                    <h4 class="font-semibold mb-1">Billing Address</h4>
                                    <p>{{ $order->billing_address['address1'] ?? '-' }}</p>
                                    <p>{{ $order->billing_address['city'] ?? '' }}, {{ $order->billing_address['province'] ?? '' }} {{ $order->billing_address['zip'] ?? '' }}</p>
                                    <p>{{ $order->billing_address['country'] ?? '' }}</p>
                                </div>

                                <div class="md:col-span-2">
                                    <h4 class="font-semibold mb-2">Line Items</h4>
                                    <ul class="list-disc pl-5 space-y-1">
                                        @foreach ($order->line_items ?? [] as $item)
                                            <li>
                                                {{ $item['name'] ?? '' }} - Qty: {{ $item['quantity'] ?? 0 }} - ${{ number_format($item['price'] ?? 0, 2) }}
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>

                                <div>
                                    <h4 class="font-semibold mb-1">Note</h4>
                                    <p>{{ $order->note ?? '-' }}</p>
                                </div>

                                <div>
                                    <h4 class="font-semibold mb-1">Prices</h4>
                                    <p>Subtotal: ${{ number_format($order->subtotal_price, 2) }}</p>
                                    <p>Tax: ${{ number_format($order->total_tax, 2) }}</p>
                                    <p>Total: ${{ number_format($order->total_price, 2) }}</p>
                                </div>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="text-center px-4 py-6 text-gray-500">No orders found.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

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

<script>
    function toggleDetails(id) {
        const row = document.getElementById(id);
        row.classList.toggle('hidden');
    }
</script>
@endsection