218 lines
11 KiB
PHP
218 lines
11 KiB
PHP
<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> |