@extends('admin.layouts.app')

@section('title', 'Invoice')
@section('page-title', 'Invoice: ' . $order->order_number)

@section('content')
<div class="bg-white rounded-lg shadow p-8 max-w-4xl">
    <!-- Invoice Header -->
    <div class="border-b border-gray-200 pb-6 mb-6">
        <div class="flex justify-between">
            <div>
                <h1 class="text-3xl font-bold">INVOICE</h1>
                <p class="text-gray-600 mt-2">{{ \App\Models\Setting::get('store_name', config('app.name')) }}</p>
            </div>
            <div class="text-right">
                <p class="text-lg font-semibold">Order #{{ $order->order_number }}</p>
                <p class="text-gray-600">{{ $order->created_at->format('F d, Y') }}</p>
            </div>
        </div>
    </div>

    <!-- Billing & Shipping -->
    <div class="grid grid-cols-2 gap-6 mb-6">
        <div>
            <h3 class="font-semibold mb-2">Bill To:</h3>
            <p>{{ $order->shipping_name }}</p>
            <p>{{ $order->shipping_email }}</p>
            <p>{{ $order->shipping_phone ?? '' }}</p>
        </div>
        <div>
            <h3 class="font-semibold mb-2">Ship To:</h3>
            <p>{{ $order->shipping_address }}</p>
            <p>{{ $order->shipping_city }}, {{ $order->shipping_state }} {{ $order->shipping_postal_code }}</p>
            <p>{{ $order->shipping_country }}</p>
        </div>
    </div>

    <!-- Order Items -->
    <div class="mb-6">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Item</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Quantity</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Price</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Total</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                @foreach($order->items as $item)
                <tr>
                    <td class="px-4 py-3">
                        <div class="font-medium">{{ $item->product_name }}</div>
                        @if($item->variant_name)
                            <div class="text-sm text-gray-500">{{ $item->variant_name }}</div>
                        @endif
                    </td>
                    <td class="px-4 py-3">{{ $item->quantity }}</td>
                    <td class="px-4 py-3">{{ $currency_symbol }}{{ number_format($item->price, 2) }}</td>
                    <td class="px-4 py-3">{{ $currency_symbol }}{{ number_format($item->subtotal, 2) }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <!-- Totals -->
    <div class="border-t border-gray-200 pt-4">
        <div class="flex justify-end">
            <div class="w-64">
                <div class="flex justify-between py-2">
                    <span>Subtotal:</span>
                    <span>{{ $currency_symbol }}{{ number_format($order->subtotal, 2) }}</span>
                </div>
                <div class="flex justify-between py-2">
                    <span>Tax:</span>
                    <span>{{ $currency_symbol }}{{ number_format($order->tax, 2) }}</span>
                </div>
                <div class="flex justify-between py-2">
                    <span>Shipping:</span>
                    <span>{{ $currency_symbol }}{{ number_format($order->shipping, 2) }}</span>
                </div>
                @if($order->discount > 0)
                <div class="flex justify-between py-2 text-green-600">
                    <span>Discount:</span>
                    <span>-{{ $currency_symbol }}{{ number_format($order->discount, 2) }}</span>
                </div>
                @endif
                <div class="flex justify-between py-2 border-t border-gray-200 font-bold text-lg">
                    <span>Total:</span>
                    <span>{{ $currency_symbol }}{{ number_format($order->total, 2) }}</span>
                </div>
            </div>
        </div>
    </div>

    <div class="mt-8 text-center text-gray-500 text-sm">
        <p>Thank you for your business!</p>
    </div>

    <div class="mt-6 flex justify-end">
        <button onclick="window.print()" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
            <i class="fas fa-print mr-2"></i>Print Invoice
        </button>
    </div>
</div>
@endsection