|
@@ -1,23 +1,23 @@
|
1
|
1
|
<x-company.document-template.container class="classic-template-container">
|
2
|
2
|
<!-- Header Section -->
|
3
|
|
- <x-company.document-template.header class="default-template-header">
|
4
|
|
- <div class="w-2/3 text-left ml-6">
|
5
|
|
- <div class="text-sm tracking-tight">
|
6
|
|
- <h2 class="text-lg font-semibold">{{ $document->company->name }}</h2>
|
|
3
|
+ <x-company.document-template.header class="classic-template-header">
|
|
4
|
+ <div class="w-2/3 text-left">
|
|
5
|
+ <div class="text-sm">
|
|
6
|
+ <strong class="text-sm block">{{ $document->company->name }}</strong>
|
7
|
7
|
@if($formattedAddress = $document->company->getFormattedAddressHtml())
|
8
|
8
|
{!! $formattedAddress !!}
|
9
|
9
|
@endif
|
10
|
10
|
</div>
|
11
|
11
|
</div>
|
12
|
12
|
|
13
|
|
- <div class="w-1/3 flex justify-end mr-6">
|
|
13
|
+ <div class="w-1/3 flex justify-end">
|
14
|
14
|
@if($document->logo && $document->showLogo)
|
15
|
15
|
<x-company.document-template.logo :src="$document->logo"/>
|
16
|
16
|
@endif
|
17
|
17
|
</div>
|
18
|
18
|
</x-company.document-template.header>
|
19
|
19
|
|
20
|
|
- <x-company.document-template.metadata class="classic-template-metadata space-y-8">
|
|
20
|
+ <x-company.document-template.metadata class="classic-template-metadata space-y-4">
|
21
|
21
|
<div class="items-center flex">
|
22
|
22
|
<hr class="grow-[2] py-0.5 border-solid border-y-2" style="border-color: {{ $document->accentColor }};">
|
23
|
23
|
<x-icons.document-header-decoration
|
|
@@ -27,29 +27,33 @@
|
27
|
27
|
/>
|
28
|
28
|
<hr class="grow-[2] py-0.5 border-solid border-y-2" style="border-color: {{ $document->accentColor }};">
|
29
|
29
|
</div>
|
30
|
|
- <div class="mt-2 text-base text-center text-gray-600 dark:text-gray-400">{{ $document->subheader }}</div>
|
|
30
|
+ @if ($document->subheader)
|
|
31
|
+ <p class="text-sm text-center text-gray-600 dark:text-gray-400">{{ $document->subheader }}</p>
|
|
32
|
+ @endif
|
31
|
33
|
|
32
|
34
|
<div class="flex justify-between items-end">
|
33
|
35
|
<!-- Billing Details -->
|
34
|
|
- <div class="text-sm tracking-tight">
|
35
|
|
- <h3 class="text-gray-600 dark:text-gray-400 font-medium tracking-tight mb-1">BILL TO</h3>
|
36
|
|
- <p class="text-base font-bold">{{ $document->client->name }}</p>
|
|
36
|
+ <div class="text-sm">
|
|
37
|
+ <h3 class="text-gray-600 dark:text-gray-400 font-medium mb-1">BILL TO</h3>
|
|
38
|
+ <p class="text-sm font-bold">{{ $document->client->name }}</p>
|
37
|
39
|
@if($formattedAddress = $document->client->getFormattedAddressHtml())
|
38
|
40
|
{!! $formattedAddress !!}
|
39
|
41
|
@endif
|
40
|
42
|
</div>
|
41
|
43
|
|
42
|
|
- <div class="text-sm tracking-tight">
|
|
44
|
+ <div class="text-sm">
|
43
|
45
|
<table class="min-w-full">
|
44
|
46
|
<tbody>
|
45
|
47
|
<tr>
|
46
|
48
|
<td class="font-semibold text-right pr-2">{{ $document->label->number }}:</td>
|
47
|
49
|
<td class="text-left pl-2">{{ $document->number }}</td>
|
48
|
50
|
</tr>
|
49
|
|
- <tr>
|
50
|
|
- <td class="font-semibold text-right pr-2">{{ $document->label->referenceNumber }}:</td>
|
51
|
|
- <td class="text-left pl-2">{{ $document->referenceNumber }}</td>
|
52
|
|
- </tr>
|
|
51
|
+ @if($document->referenceNumber)
|
|
52
|
+ <tr>
|
|
53
|
+ <td class="font-semibold text-right pr-2">{{ $document->label->referenceNumber }}:</td>
|
|
54
|
+ <td class="text-left pl-2">{{ $document->referenceNumber }}</td>
|
|
55
|
+ </tr>
|
|
56
|
+ @endif
|
53
|
57
|
<tr>
|
54
|
58
|
<td class="font-semibold text-right pr-2">{{ $document->label->date }}:</td>
|
55
|
59
|
<td class="text-left pl-2">{{ $document->date }}</td>
|
|
@@ -65,20 +69,20 @@
|
65
|
69
|
</x-company.document-template.metadata>
|
66
|
70
|
|
67
|
71
|
<!-- Line Items -->
|
68
|
|
- <x-company.document-template.line-items class="classic-template-line-items">
|
|
72
|
+ <x-company.document-template.line-items class="classic-template-line-items px-6">
|
69
|
73
|
<table class="w-full text-left table-fixed">
|
70
|
74
|
<thead class="text-sm leading-relaxed">
|
71
|
75
|
<tr>
|
72
|
|
- <th class="text-left pl-6 w-[50%] py-4">{{ $document->columnLabel->items }}</th>
|
|
76
|
+ <th class="text-left w-[50%] py-4">{{ $document->columnLabel->items }}</th>
|
73
|
77
|
<th class="text-center w-[10%] py-4">{{ $document->columnLabel->units }}</th>
|
74
|
78
|
<th class="text-right w-[20%] py-4">{{ $document->columnLabel->price }}</th>
|
75
|
|
- <th class="text-right pr-6 w-[20%] py-4">{{ $document->columnLabel->amount }}</th>
|
|
79
|
+ <th class="text-right w-[20%] py-4">{{ $document->columnLabel->amount }}</th>
|
76
|
80
|
</tr>
|
77
|
81
|
</thead>
|
78
|
|
- <tbody class="text-sm tracking-tight border-y-2 border-dotted border-gray-300">
|
|
82
|
+ <tbody class="text-sm border-y-2 border-dotted border-gray-300">
|
79
|
83
|
@foreach($document->lineItems as $item)
|
80
|
84
|
<tr>
|
81
|
|
- <td class="text-left pl-6 font-semibold py-3">
|
|
85
|
+ <td class="text-left font-semibold py-3">
|
82
|
86
|
{{ $item->name }}
|
83
|
87
|
@if($item->description)
|
84
|
88
|
<div class="text-gray-600 font-normal line-clamp-2 mt-1">{{ $item->description }}</div>
|
|
@@ -86,32 +90,31 @@
|
86
|
90
|
</td>
|
87
|
91
|
<td class="text-center py-3">{{ $item->quantity }}</td>
|
88
|
92
|
<td class="text-right py-3">{{ $item->unitPrice }}</td>
|
89
|
|
- <td class="text-right pr-6 py-3">{{ $item->subtotal }}</td>
|
|
93
|
+ <td class="text-right py-3">{{ $item->subtotal }}</td>
|
90
|
94
|
</tr>
|
91
|
95
|
@endforeach
|
92
|
96
|
</tbody>
|
93
|
97
|
</table>
|
94
|
98
|
|
95
|
99
|
<!-- Financial Details and Notes -->
|
96
|
|
- <div class="flex justify-between text-sm tracking-tight space-x-1">
|
|
100
|
+ <div class="flex justify-between text-sm space-x-1 pt-4">
|
97
|
101
|
<!-- Notes Section -->
|
98
|
|
- <div class="w-[60%] border border-dashed border-gray-300 p-2 mt-4">
|
99
|
|
- <h4 class="font-semibold mb-2">Notes</h4>
|
100
|
|
- <p>{{ $document->footer }}</p>
|
|
102
|
+ <div class="w-[60%] py-2">
|
|
103
|
+ <p class="font-semibold">{{ $document->footer }}</p>
|
101
|
104
|
</div>
|
102
|
105
|
|
103
|
106
|
<!-- Financial Summary -->
|
104
|
|
- <div class="w-[40%] mt-2">
|
105
|
|
- <table class="w-full table-fixed">
|
106
|
|
- <tbody class="text-sm tracking-tight">
|
|
107
|
+ <div class="w-[40%]">
|
|
108
|
+ <table class="w-full table-fixed whitespace-nowrap">
|
|
109
|
+ <tbody class="text-sm">
|
107
|
110
|
<tr>
|
108
|
111
|
<td class="text-right font-semibold py-2">Subtotal:</td>
|
109
|
|
- <td class="text-right pr-6 py-2">{{ $document->subtotal }}</td>
|
|
112
|
+ <td class="text-right py-2">{{ $document->subtotal }}</td>
|
110
|
113
|
</tr>
|
111
|
114
|
@if($document->discount)
|
112
|
115
|
<tr class="text-success-800 dark:text-success-600">
|
113
|
116
|
<td class="text-right py-2">Discount:</td>
|
114
|
|
- <td class="text-right pr-6 py-2">
|
|
117
|
+ <td class="text-right py-2">
|
115
|
118
|
({{ $document->discount }})
|
116
|
119
|
</td>
|
117
|
120
|
</tr>
|
|
@@ -119,19 +122,19 @@
|
119
|
122
|
@if($document->tax)
|
120
|
123
|
<tr>
|
121
|
124
|
<td class="text-right py-2">Tax:</td>
|
122
|
|
- <td class="text-right pr-6 py-2">{{ $document->tax }}</td>
|
|
125
|
+ <td class="text-right py-2">{{ $document->tax }}</td>
|
123
|
126
|
</tr>
|
124
|
127
|
@endif
|
125
|
128
|
<tr>
|
126
|
129
|
<td class="text-right font-semibold border-t py-2">Total:</td>
|
127
|
|
- <td class="text-right border-t pr-6 py-2">{{ $document->total }}</td>
|
|
130
|
+ <td class="text-right border-t py-2">{{ $document->total }}</td>
|
128
|
131
|
</tr>
|
129
|
132
|
@if($document->amountDue)
|
130
|
133
|
<tr>
|
131
|
134
|
<td class="text-right font-semibold border-t-4 border-double py-2">{{ $document->label->amountDue }}
|
132
|
135
|
({{ $document->currencyCode }}):
|
133
|
136
|
</td>
|
134
|
|
- <td class="text-right border-t-4 border-double pr-6 py-2">{{ $document->amountDue }}</td>
|
|
137
|
+ <td class="text-right border-t-4 border-double py-2">{{ $document->amountDue }}</td>
|
135
|
138
|
</tr>
|
136
|
139
|
@endif
|
137
|
140
|
</tbody>
|
|
@@ -141,8 +144,8 @@
|
141
|
144
|
</x-company.document-template.line-items>
|
142
|
145
|
|
143
|
146
|
<!-- Footer -->
|
144
|
|
- <x-company.document-template.footer class="classic-template-footer tracking-tight min-h-48">
|
145
|
|
- <h4 class="font-semibold px-6 mb-2 text-sm">Terms & Conditions</h4>
|
146
|
|
- <p class="px-6 break-words line-clamp-4 text-sm">{{ $document->terms }}</p>
|
|
147
|
+ <x-company.document-template.footer class="classic-template-footer min-h-48 p-6 text-sm">
|
|
148
|
+ <h4 class="font-semibold mb-2">Terms & Conditions</h4>
|
|
149
|
+ <p class="break-words line-clamp-4">{{ $document->terms }}</p>
|
147
|
150
|
</x-company.document-template.footer>
|
148
|
151
|
</x-company.document-template.container>
|