<div>
<div class="max-w-4xl mx-auto bg-white dark:bg-zinc-800 p-8 border border-zinc-200 dark:border-zinc-700 border border-zinc-200 dark:border-zinc-700 rounded-lg">
    <!-- Header -->
    <div class="text-center mb-8">
        <h1 class="text-3xl font-bold text-zinc-900 dark:text-zinc-100">INVOICE</h1>
        <p class="text-zinc-600 dark:text-zinc-400 mt-2">Auto Repair Shop</p>
    </div>

    <!-- Invoice Details -->
    <div class="grid grid-cols-2 gap-8 mb-8">
        <div>
            <h2 class="text-lg font-semibold mb-4 text-zinc-900 dark:text-zinc-100">From:</h2>
            <div class="text-zinc-700 dark:text-zinc-300">
                <p class="font-medium">Auto Repair Shop</p>
                <p>123 Main Street</p>
                <p>City, State 12345</p>
                <p>Phone: (555) 123-4567</p>
                <p>Email: info@autorepairshop.com</p>
            </div>
        </div>
        <div>
            <h2 class="text-lg font-semibold mb-4 text-zinc-900 dark:text-zinc-100">Bill To:</h2>
            <div class="text-zinc-700 dark:text-zinc-300">
                <p class="font-medium">{{ $serviceOrder->customer->full_name }}</p>
                <p>{{ $serviceOrder->customer->address ?? '123 Customer St' }}</p>
                <p>{{ $serviceOrder->customer->city ?? 'City' }}, {{ $serviceOrder->customer->state ?? 'State' }} {{ $serviceOrder->customer->zip_code ?? '12345' }}</p>
                <p>Phone: {{ $serviceOrder->customer->phone }}</p>
                <p>Email: {{ $serviceOrder->customer->email }}</p>
            </div>
        </div>
    </div>

    <!-- Invoice Info -->
    <div class="grid grid-cols-3 gap-4 mb-8 bg-zinc-50 dark:bg-zinc-700 p-4 rounded border border-zinc-200 dark:border-zinc-600">
        <div>
            <p class="text-sm text-zinc-600 dark:text-zinc-400">Invoice Number</p>
            <p class="font-semibold text-zinc-900 dark:text-zinc-100">{{ $serviceOrder->order_number }}</p>
        </div>
        <div>
            <p class="text-sm text-zinc-600 dark:text-zinc-400">Invoice Date</p>
            <p class="font-semibold text-zinc-900 dark:text-zinc-100">{{ $serviceOrder->completed_at ? $serviceOrder->completed_at->format('M j, Y') : now()->format('M j, Y') }}</p>
        </div>
        <div>
            <p class="text-sm text-zinc-600 dark:text-zinc-400">Due Date</p>
            <p class="font-semibold text-zinc-900 dark:text-zinc-100">{{ now()->addDays(30)->format('M j, Y') }}</p>
        </div>
    </div>

    <!-- Vehicle Information -->
    <div class="mb-8 bg-blue-50 dark:bg-blue-900/20 p-4 rounded border border-blue-200 dark:border-blue-800">
        <h3 class="text-lg font-semibold mb-2 text-zinc-900 dark:text-zinc-100">Vehicle Information</h3>
        <div class="grid grid-cols-2 gap-4 text-zinc-700 dark:text-zinc-300">
            <div>
                <p><span class="font-medium">Vehicle:</span> {{ $serviceOrder->vehicle->display_name }}</p>
                <p><span class="font-medium">License Plate:</span> {{ $serviceOrder->vehicle->license_plate }}</p>
            </div>
            <div>
                <p><span class="font-medium">VIN:</span> {{ $serviceOrder->vehicle->vin }}</p>
                <p><span class="font-medium">Mileage:</span> {{ number_format($serviceOrder->vehicle->mileage) }} miles</p>
            </div>
        </div>
        <div class="mt-2 text-zinc-700 dark:text-zinc-300">
            <p><span class="font-medium">Customer Complaint:</span> {{ $serviceOrder->customer_complaint }}</p>
        </div>
    </div>

    <!-- Service Items -->
    @if($serviceOrder->serviceItems->count() > 0)
    <div class="mb-8">
        <h3 class="text-lg font-semibold mb-4 text-zinc-900 dark:text-zinc-100">Services Performed</h3>
        <table class="w-full border-collapse border border-zinc-300 dark:border-zinc-600">
            <thead>
                <tr class="bg-zinc-100 dark:bg-zinc-700">
                    <th class="border border-zinc-300 dark:border-zinc-600 px-4 py-2 text-left text-zinc-900 dark:text-zinc-100">Service</th>
                    <th class="border border-zinc-300 dark:border-zinc-600 px-4 py-2 text-left text-zinc-900 dark:text-zinc-100">Description</th>
                    <th class="border border-zinc-300 dark:border-zinc-600 px-4 py-2 text-right text-zinc-900 dark:text-zinc-100">Rate</th>
                    <th class="border border-zinc-300 dark:border-zinc-600 px-4 py-2 text-right text-zinc-900 dark:text-zinc-100">Hours</th>
                    <th class="border border-zinc-300 dark:border-zinc-600 px-4 py-2 text-right text-zinc-900 dark:text-zinc-100">Amount</th>
                </tr>
            </thead>
            <tbody>
                @foreach($serviceOrder->serviceItems as $item)
                <tr class="text-zinc-700 dark:text-zinc-300">
                    <td class="border border-zinc-300 dark:border-zinc-600 px-4 py-2">{{ $item->service_name }}</td>
                    <td class="border border-zinc-300 dark:border-zinc-600 px-4 py-2">{{ $item->description ?: 'N/A' }}</td>
                    <td class="border border-zinc-300 dark:border-zinc-600 px-4 py-2 text-right">${{ number_format($item->labor_rate, 2) }}</td>
                    <td class="border border-zinc-300 dark:border-zinc-600 px-4 py-2 text-right">{{ $item->estimated_hours }}</td>
                    <td class="border border-zinc-300 dark:border-zinc-600 px-4 py-2 text-right">${{ number_format($item->labor_cost, 2) }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    @endif

    <!-- Parts -->
    @if($serviceOrder->parts->count() > 0)
    <div class="mb-8">
        <h3 class="text-lg font-semibold mb-4 text-zinc-900 dark:text-zinc-100">Parts Used</h3>
        <table class="w-full border-collapse border border-zinc-300 dark:border-zinc-600">
            <thead>
                <tr class="bg-zinc-100 dark:bg-zinc-700">
                    <th class="border border-zinc-300 dark:border-zinc-600 px-4 py-2 text-left text-zinc-900 dark:text-zinc-100">Part</th>
                    <th class="border border-zinc-300 dark:border-zinc-600 px-4 py-2 text-left text-zinc-900 dark:text-zinc-100">Part Number</th>
                    <th class="border border-zinc-300 dark:border-zinc-600 px-4 py-2 text-right text-zinc-900 dark:text-zinc-100">Quantity</th>
                    <th class="border border-zinc-300 dark:border-zinc-600 px-4 py-2 text-right text-zinc-900 dark:text-zinc-100">Unit Price</th>
                    <th class="border border-zinc-300 dark:border-zinc-600 px-4 py-2 text-right text-zinc-900 dark:text-zinc-100">Amount</th>
                </tr>
            </thead>
            <tbody>
                @foreach($serviceOrder->parts as $part)
                <tr class="text-zinc-700 dark:text-zinc-300">
                    <td class="border border-zinc-300 dark:border-zinc-600 px-4 py-2">{{ $part->name }}</td>
                    <td class="border border-zinc-300 dark:border-zinc-600 px-4 py-2">{{ $part->part_number }}</td>
                    <td class="border border-zinc-300 dark:border-zinc-600 px-4 py-2 text-right">{{ $part->pivot->quantity_used }}</td>
                    <td class="border border-zinc-300 dark:border-zinc-600 px-4 py-2 text-right">${{ number_format($part->pivot->unit_price, 2) }}</td>
                    <td class="border border-zinc-300 dark:border-zinc-600 px-4 py-2 text-right">${{ number_format($part->pivot->total_price, 2) }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    @endif

    <!-- Totals -->
    <div class="flex justify-end mb-8">
        <div class="w-80">
            <table class="w-full text-zinc-900 dark:text-zinc-100">
                <tr>
                    <td class="py-2 text-right">Labor Subtotal:</td>
                    <td class="py-2 text-right font-semibold">${{ number_format($serviceOrder->labor_cost, 2) }}</td>
                </tr>
                <tr>
                    <td class="py-2 text-right">Parts Subtotal:</td>
                    <td class="py-2 text-right font-semibold">${{ number_format($serviceOrder->parts_cost, 2) }}</td>
                </tr>
                @if($serviceOrder->discount_amount > 0)
                <tr>
                    <td class="py-2 text-right">Discount:</td>
                    <td class="py-2 text-right font-semibold text-green-600 dark:text-green-400">-${{ number_format($serviceOrder->discount_amount, 2) }}</td>
                </tr>
                @endif
                <tr class="border-t border-zinc-300 dark:border-zinc-600">
                    <td class="py-2 text-right">Subtotal:</td>
                    <td class="py-2 text-right font-semibold">${{ number_format($serviceOrder->labor_cost + $serviceOrder->parts_cost - $serviceOrder->discount_amount, 2) }}</td>
                </tr>
                <tr>
                    <td class="py-2 text-right">Tax (8%):</td>
                    <td class="py-2 text-right font-semibold">${{ number_format($serviceOrder->tax_amount, 2) }}</td>
                </tr>
                <tr class="border-t-2 border-zinc-900 dark:border-zinc-100">
                    <td class="py-2 text-right text-lg font-bold">Total:</td>
                    <td class="py-2 text-right text-lg font-bold">${{ number_format($serviceOrder->total_amount, 2) }}</td>
                </tr>
            </table>
        </div>
    </div>

    <!-- Payment Information -->
    <div class="mb-8 bg-yellow-50 dark:bg-yellow-900/20 p-4 rounded border border-yellow-200 dark:border-yellow-800">
        <h3 class="text-lg font-semibold mb-2 text-zinc-900 dark:text-zinc-100">Payment Information</h3>
        <div class="text-zinc-700 dark:text-zinc-300">
            <p class="text-sm">Payment is due within 30 days of invoice date.</p>
            <p class="text-sm">Please include invoice number {{ $serviceOrder->order_number }} with your payment.</p>
            <p class="text-sm mt-2">
                <span class="font-medium">Payment Methods:</span> Cash, Check, Credit Card
            </p>
        </div>
    </div>

    <!-- Notes -->
    @if($serviceOrder->customer_notes)
    <div class="mb-8">
        <h3 class="text-lg font-semibold mb-2 text-zinc-900 dark:text-zinc-100">Notes</h3>
        <p class="text-zinc-700 dark:text-zinc-300">{{ $serviceOrder->customer_notes }}</p>
    </div>
    @endif

    <!-- Footer -->
    <div class="text-center text-sm text-zinc-600 dark:text-zinc-400 border-t border-zinc-300 dark:border-zinc-600 pt-4">
        <p>Thank you for your business!</p>
        <p class="mt-2">This invoice was generated on {{ now()->format('M j, Y g:i A') }}</p>
    </div>

    <!-- Print Button -->
    <div class="text-center mt-8 no-print">
        <flux:button onclick="window.print()" variant="primary">
            Print Invoice
        </flux:button>
        <flux:button href="/service-orders/{{ $serviceOrder->id }}" variant="outline" class="ml-4">
            Back to Service Order
        </flux:button>
    </div>
    </div>

    <style>
    @media print {
        .no-print {
            display: none !important;
        }
        body {
            background: white !important;
        }
        .dark\:bg-zinc-800 {
            background: white !important;
        }
        .dark\:text-zinc-100 {
            color: black !important;
        }
        .dark\:text-zinc-300 {
            color: #4a5568 !important;
        }
        .dark\:border-zinc-600 {
            border-color: #e2e8f0 !important;
        }
    }
    </style>
</div>