feat: add legacy PDF generation support and invoice discount fields
This commit is contained in:
I-Fun
@@ -98,16 +98,28 @@
|
||||
<button type="button" @click="removeItem(index)"
|
||||
class="text-red-400 hover:text-red-600 text-lg shrink-0 pt-4">✕</button>
|
||||
</div>
|
||||
{{-- Taxable checkbox --}}
|
||||
<div class="mt-2 flex items-center gap-2">
|
||||
<input type="hidden" :name="`items[${index}][is_taxable]`" value="0">
|
||||
<input type="checkbox" :name="`items[${index}][is_taxable]`" :id="`taxable_${index}`"
|
||||
x-model="item.is_taxable" @change="recalc()" value="1"
|
||||
class="w-3.5 h-3.5 accent-pink-400">
|
||||
<label :for="`taxable_${index}`"
|
||||
class="text-xs text-gray-500 cursor-pointer select-none">
|
||||
Taxable
|
||||
</label>
|
||||
{{-- Taxable and Discount checkboxes --}}
|
||||
<div class="mt-2 flex items-center gap-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<input type="hidden" :name="`items[${index}][is_taxable]`" value="0">
|
||||
<input type="checkbox" :name="`items[${index}][is_taxable]`" :id="`taxable_${index}`"
|
||||
x-model="item.is_taxable" @change="recalc()" value="1"
|
||||
class="w-3.5 h-3.5 accent-pink-400">
|
||||
<label :for="`taxable_${index}`"
|
||||
class="text-xs text-gray-500 cursor-pointer select-none">
|
||||
Taxable
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex items-center gap-2" x-show="addDiscount">
|
||||
<input type="hidden" :name="`items[${index}][is_discountable]`" value="0">
|
||||
<input type="checkbox" :name="`items[${index}][is_discountable]`" :id="`discountable_${index}`"
|
||||
x-model="item.is_discountable" @change="recalc()" value="1"
|
||||
class="w-3.5 h-3.5 accent-pink-400">
|
||||
<label :for="`discountable_${index}`"
|
||||
class="text-xs text-gray-500 cursor-pointer select-none">
|
||||
Discount
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -116,10 +128,26 @@
|
||||
|
||||
{{-- Totals --}}
|
||||
<div class="bg-pink-50 rounded-2xl p-4 mb-5">
|
||||
<div class="mb-3 border-b border-pink-100 pb-3 flex flex-col sm:flex-row sm:items-center gap-y-2 gap-x-4 min-h-[32px]">
|
||||
<label class="flex items-center gap-2 cursor-pointer shrink-0 w-max">
|
||||
<input type="checkbox" x-model="addDiscount" @change="toggleDiscount()" class="w-4 h-4 accent-pink-400">
|
||||
<span class="text-sm font-bold text-gray-700">Add Discount</span>
|
||||
</label>
|
||||
<div x-show="addDiscount" class="flex items-center gap-3 flex-1 overflow-hidden" style="display: none;">
|
||||
<input type="range" name="discount_rate" min="5" max="90" step="5" x-model.number="discountRate" @input="recalc()" class="w-32 sm:w-48 accent-pink-500 h-2 bg-pink-100 rounded-lg appearance-none cursor-pointer shrink-0 hover:accent-pink-600 transition-all">
|
||||
<span class="font-bold text-pink-600 text-sm shrink-0 w-8 text-right"><span x-text="discountRate"></span>%</span>
|
||||
<span class="text-xs text-pink-500 font-medium tracking-wide truncate border-l border-pink-200 pl-3" x-text="getDiscountLabel()"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between text-sm py-1">
|
||||
<span class="text-gray-500">Subtotal (all items)</span>
|
||||
<span class="font-semibold">Rp <span x-text="formatNum(subtotal)"></span></span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm py-1 text-pink-500" x-show="addDiscount && discountAmount > 0">
|
||||
<span>Discount (<span x-text="discountRate"></span>%)</span>
|
||||
<span class="font-semibold">- Rp <span x-text="formatNum(discountAmount)"></span></span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm py-1 text-amber-600">
|
||||
<span>Tax (<span x-text="taxRate"></span>% — paid by client)</span>
|
||||
<span class="font-semibold">Rp <span x-text="formatNum(taxAmount)"></span></span>
|
||||
@@ -211,19 +239,68 @@
|
||||
function invoiceForm() {
|
||||
return {
|
||||
showCustomFields: {{ old('use_custom_fields', false) ? 'true' : 'false' }},
|
||||
items: [{ description: @json($invoiceSettings->default_service_description ?? ''), quantity: 1, unit_price: 0, is_taxable: true }],
|
||||
addDiscount: false,
|
||||
discountRate: 5,
|
||||
items: [{ description: @json($invoiceSettings->default_service_description ?? ''), quantity: 1, unit_price: 0, is_taxable: true, is_discountable: false }],
|
||||
taxRate: {{ $invoiceSettings->default_tax_rate ?? 11 }},
|
||||
get subtotal() {
|
||||
return this.items.reduce((s, i) => s + (i.quantity * i.unit_price), 0);
|
||||
},
|
||||
get discountAmount() {
|
||||
if (!this.addDiscount) return 0;
|
||||
const discountable = this.items
|
||||
.filter(i => i.is_discountable)
|
||||
.reduce((s, i) => s + (i.quantity * i.unit_price), 0);
|
||||
return Math.round(discountable * (this.discountRate / 100));
|
||||
},
|
||||
get totalSubtotal() {
|
||||
return this.subtotal - this.discountAmount;
|
||||
},
|
||||
get taxAmount() {
|
||||
const taxable = this.items
|
||||
.filter(i => i.is_taxable)
|
||||
.reduce((s, i) => s + (i.quantity * i.unit_price), 0);
|
||||
.reduce((s, i) => {
|
||||
let itemTotal = i.quantity * i.unit_price;
|
||||
if (this.addDiscount && i.is_discountable) {
|
||||
itemTotal -= itemTotal * (this.discountRate / 100);
|
||||
}
|
||||
return s + itemTotal;
|
||||
}, 0);
|
||||
return Math.round(taxable * this.taxRate / 100);
|
||||
},
|
||||
get total() { return this.subtotal; }, // grand total = pre-tax (tax borne by client)
|
||||
addItem() { this.items.push({ description: '', quantity: 1, unit_price: 0, is_taxable: true }); },
|
||||
get total() { return this.totalSubtotal; }, // grand total = pre-tax
|
||||
getDiscountLabel() {
|
||||
const labels = {
|
||||
5: 'Small thank-you discount 🙏',
|
||||
10: 'Appreciation bonus ✨',
|
||||
15: 'Loyalty perk unlocked 🤝',
|
||||
20: 'Client appreciation deal 💼',
|
||||
25: 'Special partner discount ⭐',
|
||||
30: 'Valued client offer 🎯',
|
||||
35: 'Priority client savings 📌',
|
||||
40: 'Strong appreciation rate 💎',
|
||||
45: 'Preferred client pricing 🏅',
|
||||
50: 'Half-off partner special 🎉',
|
||||
55: 'Premium loyalty reward 🧩',
|
||||
60: 'Major appreciation offer 🚀',
|
||||
65: 'VIP-level savings 🏆',
|
||||
70: 'Elite client advantage 👑',
|
||||
75: 'Strategic partner bonus 🤝✨',
|
||||
80: 'Executive-tier discount 💼🔥',
|
||||
85: 'Signature client reward 🖋️',
|
||||
90: 'Ultimate partnership rate 🌟'
|
||||
};
|
||||
return labels[this.discountRate] || '';
|
||||
},
|
||||
toggleDiscount() {
|
||||
if (this.addDiscount) {
|
||||
this.items.forEach(i => i.is_discountable = true);
|
||||
} else {
|
||||
// We can leave them checked or uncheck them, usually uncheck
|
||||
this.items.forEach(i => i.is_discountable = false);
|
||||
}
|
||||
},
|
||||
addItem() { this.items.push({ description: '', quantity: 1, unit_price: 0, is_taxable: true, is_discountable: this.addDiscount }); },
|
||||
removeItem(i) { if (this.items.length > 1) this.items.splice(i, 1); },
|
||||
recalc() { },
|
||||
formatNum(n) { return Number(n).toLocaleString('id-ID'); },
|
||||
|
||||
@@ -95,17 +95,30 @@
|
||||
<button type="button" @click="removeItem(index)"
|
||||
class="text-red-400 hover:text-red-600 text-lg shrink-0 pt-4">✕</button>
|
||||
</div>
|
||||
{{-- Taxable checkbox --}}
|
||||
<div class="mt-2 flex items-center gap-2">
|
||||
<input type="hidden" :name="`items[${index}][is_taxable]`" value="0">
|
||||
<input type="checkbox" :name="`items[${index}][is_taxable]`"
|
||||
:id="`taxable_${index}`"
|
||||
x-model="item.is_taxable" @change="recalc()"
|
||||
value="1"
|
||||
class="w-3.5 h-3.5 accent-pink-400">
|
||||
<label :for="`taxable_${index}`" class="text-xs text-gray-500 cursor-pointer select-none">
|
||||
Taxable
|
||||
</label>
|
||||
{{-- Taxable and Discount checkboxes --}}
|
||||
<div class="mt-2 flex items-center gap-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<input type="hidden" :name="`items[${index}][is_taxable]`" value="0">
|
||||
<input type="checkbox" :name="`items[${index}][is_taxable]`"
|
||||
:id="`taxable_${index}`"
|
||||
x-model="item.is_taxable" @change="recalc()"
|
||||
value="1"
|
||||
class="w-3.5 h-3.5 accent-pink-400">
|
||||
<label :for="`taxable_${index}`" class="text-xs text-gray-500 cursor-pointer select-none">
|
||||
Taxable
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex items-center gap-2" x-show="addDiscount">
|
||||
<input type="hidden" :name="`items[${index}][is_discountable]`" value="0">
|
||||
<input type="checkbox" :name="`items[${index}][is_discountable]`"
|
||||
:id="`discountable_${index}`"
|
||||
x-model="item.is_discountable" @change="recalc()"
|
||||
value="1"
|
||||
class="w-3.5 h-3.5 accent-pink-400">
|
||||
<label :for="`discountable_${index}`" class="text-xs text-gray-500 cursor-pointer select-none">
|
||||
Discount
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -114,10 +127,26 @@
|
||||
|
||||
{{-- Totals --}}
|
||||
<div class="bg-pink-50 rounded-2xl p-4 mb-5">
|
||||
<div class="mb-3 border-b border-pink-100 pb-3 flex flex-col sm:flex-row sm:items-center gap-y-2 gap-x-4 min-h-[32px]">
|
||||
<label class="flex items-center gap-2 cursor-pointer shrink-0 w-max">
|
||||
<input type="checkbox" x-model="addDiscount" @change="toggleDiscount()" class="w-4 h-4 accent-pink-400">
|
||||
<span class="text-sm font-bold text-gray-700">Add Discount</span>
|
||||
</label>
|
||||
<div x-show="addDiscount" class="flex items-center gap-3 flex-1 overflow-hidden" style="display: none;">
|
||||
<input type="range" name="discount_rate" min="5" max="90" step="5" x-model.number="discountRate" @input="recalc()" class="w-32 sm:w-48 accent-pink-500 h-2 bg-pink-100 rounded-lg appearance-none cursor-pointer shrink-0 hover:accent-pink-600 transition-all">
|
||||
<span class="font-bold text-pink-600 text-sm shrink-0 w-8 text-right"><span x-text="discountRate"></span>%</span>
|
||||
<span class="text-xs text-pink-500 font-medium tracking-wide truncate border-l border-pink-200 pl-3" x-text="getDiscountLabel()"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between text-sm py-1">
|
||||
<span class="text-gray-500">Subtotal (all items)</span>
|
||||
<span class="font-semibold">Rp <span x-text="formatNum(subtotal)"></span></span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm py-1 text-pink-500" x-show="addDiscount && discountAmount > 0">
|
||||
<span>Discount (<span x-text="discountRate"></span>%)</span>
|
||||
<span class="font-semibold">- Rp <span x-text="formatNum(discountAmount)"></span></span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm py-1 text-amber-600">
|
||||
<span>Tax (<span x-text="taxRate"></span>% — paid by client)</span>
|
||||
<span class="font-semibold">Rp <span x-text="formatNum(taxAmount)"></span></span>
|
||||
@@ -223,24 +252,72 @@
|
||||
function invoiceEditForm() {
|
||||
@php
|
||||
$itemsJson = $invoice->items->map(function($i) {
|
||||
return ['description' => $i->description, 'quantity' => $i->quantity, 'unit_price' => (float)$i->unit_price, 'is_taxable' => (bool)$i->is_taxable];
|
||||
return ['description' => $i->description, 'quantity' => $i->quantity, 'unit_price' => (float)$i->unit_price, 'is_taxable' => (bool)$i->is_taxable, 'is_discountable' => (bool)$i->is_discountable];
|
||||
});
|
||||
@endphp
|
||||
return {
|
||||
showCustomFields: {{ old('use_custom_fields', ($invoice->bank_name || $invoice->signature_image || $invoice->signer_name || $invoice->signer_title) ? true : false) ? 'true' : 'false' }},
|
||||
addDiscount: {{ $invoice->discount_rate > 0 ? 'true' : 'false' }},
|
||||
discountRate: {{ $invoice->discount_rate ?: 5 }},
|
||||
items: @json($itemsJson),
|
||||
taxRate: {{ $invoice->tax_rate }},
|
||||
get subtotal() {
|
||||
return this.items.reduce((s, i) => s + (i.quantity * i.unit_price), 0);
|
||||
},
|
||||
get discountAmount() {
|
||||
if (!this.addDiscount) return 0;
|
||||
const discountable = this.items
|
||||
.filter(i => i.is_discountable)
|
||||
.reduce((s, i) => s + (i.quantity * i.unit_price), 0);
|
||||
return Math.round(discountable * (this.discountRate / 100));
|
||||
},
|
||||
get totalSubtotal() {
|
||||
return this.subtotal - this.discountAmount;
|
||||
},
|
||||
get taxAmount() {
|
||||
const taxable = this.items
|
||||
.filter(i => i.is_taxable)
|
||||
.reduce((s, i) => s + (i.quantity * i.unit_price), 0);
|
||||
.reduce((s, i) => {
|
||||
let itemTotal = i.quantity * i.unit_price;
|
||||
if (this.addDiscount && i.is_discountable) {
|
||||
itemTotal -= itemTotal * (this.discountRate / 100);
|
||||
}
|
||||
return s + itemTotal;
|
||||
}, 0);
|
||||
return Math.round(taxable * this.taxRate / 100);
|
||||
},
|
||||
get total() { return this.subtotal; },
|
||||
addItem() { this.items.push({ description: '', quantity: 1, unit_price: 0, is_taxable: true }); },
|
||||
get total() { return this.totalSubtotal; }, // grand total = pre-tax
|
||||
getDiscountLabel() {
|
||||
const labels = {
|
||||
5: 'Small thank-you discount 🙏',
|
||||
10: 'Appreciation bonus ✨',
|
||||
15: 'Loyalty perk unlocked 🤝',
|
||||
20: 'Client appreciation deal 💼',
|
||||
25: 'Special partner discount ⭐',
|
||||
30: 'Valued client offer 🎯',
|
||||
35: 'Priority client savings 📌',
|
||||
40: 'Strong appreciation rate 💎',
|
||||
45: 'Preferred client pricing 🏅',
|
||||
50: 'Half-off partner special 🎉',
|
||||
55: 'Premium loyalty reward 🧩',
|
||||
60: 'Major appreciation offer 🚀',
|
||||
65: 'VIP-level savings 🏆',
|
||||
70: 'Elite client advantage 👑',
|
||||
75: 'Strategic partner bonus 🤝✨',
|
||||
80: 'Executive-tier discount 💼🔥',
|
||||
85: 'Signature client reward 🖋️',
|
||||
90: 'Ultimate partnership rate 🌟'
|
||||
};
|
||||
return labels[this.discountRate] || '';
|
||||
},
|
||||
toggleDiscount() {
|
||||
if (this.addDiscount) {
|
||||
this.items.forEach(i => i.is_discountable = true);
|
||||
} else {
|
||||
this.items.forEach(i => i.is_discountable = false);
|
||||
}
|
||||
},
|
||||
addItem() { this.items.push({ description: '', quantity: 1, unit_price: 0, is_taxable: true, is_discountable: this.addDiscount }); },
|
||||
removeItem(i) { if (this.items.length > 1) this.items.splice(i, 1); },
|
||||
recalc() {},
|
||||
formatNum(n) { return Number(n).toLocaleString('id-ID'); },
|
||||
|
||||
@@ -89,6 +89,8 @@
|
||||
class="text-xs text-pink-500 hover:underline">View</a>
|
||||
<a href="{{ route('invoices.pdf', $invoice) }}"
|
||||
class="text-xs text-pink-500 hover:underline" target="_blank">PDF</a>
|
||||
<a href="{{ route('invoices.pdf-legacy', $invoice) }}"
|
||||
class="text-xs text-pink-500 hover:underline" target="_blank">PDF (Legacy)</a>
|
||||
<a href="{{ route('invoices.edit', $invoice) }}"
|
||||
class="text-xs text-gray-500 hover:underline">Edit</a>
|
||||
{{-- Share button disabled --}}
|
||||
|
||||
373
resources/views/invoices/pdf-legacy.blade.php
Normal file
373
resources/views/invoices/pdf-legacy.blade.php
Normal file
@@ -0,0 +1,373 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Helvetica', Arial, sans-serif;
|
||||
color: #000;
|
||||
font-size: 11px;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.header-wrap {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.title-block {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.title-line {
|
||||
flex-grow: 1;
|
||||
height: 1px;
|
||||
background: #000;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 32px;
|
||||
letter-spacing: 12px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.info-table {
|
||||
width: 100%;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.info-table td {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 9px;
|
||||
color: #666;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.val-bold {
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.val {
|
||||
font-size: 11px;
|
||||
color: #444;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.details-table {
|
||||
border-collapse: collapse;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.details-table td {
|
||||
padding: 3px 0;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.details-table .lbl {
|
||||
color: #666;
|
||||
text-align: right;
|
||||
padding-right: 15px;
|
||||
font-weight: bold;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.details-table .val-dt {
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.items {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.items th,
|
||||
.items td {
|
||||
padding: 8px 0;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.items th {
|
||||
text-align: left;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
border-top: 1px solid #000;
|
||||
border-bottom: 1px solid #000;
|
||||
font-size: 9px;
|
||||
letter-spacing: 1px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.items td {
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.items tr:last-child td {
|
||||
border-bottom: 1px solid #000;
|
||||
}
|
||||
|
||||
.items .td-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.items .td-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.totals-wrapper {
|
||||
width: 100%;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.totals-wrapper::after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.totals {
|
||||
float: right;
|
||||
border-collapse: collapse;
|
||||
min-width: 250px;
|
||||
}
|
||||
|
||||
.totals td {
|
||||
padding: 3px 0;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.totals .lbl {
|
||||
text-align: right;
|
||||
padding-right: 35px;
|
||||
letter-spacing: 1px;
|
||||
font-size: 9px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.totals .val {
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.bank-info {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.bank-info .label {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.bank-info p {
|
||||
font-size: 11px;
|
||||
line-height: 1.6;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.footer {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.signature {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.sig-date {
|
||||
font-size: 11px;
|
||||
color: #444;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.sig-img {
|
||||
max-height: 60px;
|
||||
max-width: 180px;
|
||||
object-fit: contain;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.sig-name {
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.sig-title {
|
||||
font-size: 9px;
|
||||
color: #666;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<table style="width:100%; margin-bottom: 30px;" cellpadding="0" cellspacing="0">
|
||||
<tr>
|
||||
<td style="width:50%; vertical-align:middle; padding-right:20px;">
|
||||
<div style="height:1px; background:#000; width:100%;"></div>
|
||||
</td>
|
||||
<td style="vertical-align:middle; text-align:right;">
|
||||
<div class="title">I N V O I C E</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table class="info-table" cellpadding="0" cellspacing="0">
|
||||
<tr>
|
||||
<td style="width:50%; padding-right:20px;">
|
||||
<div class="label">BILLING TO:</div>
|
||||
@if($invoice->client)
|
||||
<div class="val-bold">{{ $invoice->client->company }}</div>
|
||||
<!-- @if($invoice->client->company)
|
||||
<div class="val">{{ $invoice->client->company }}</div>@endif -->
|
||||
@if($invoice->client->full_address)
|
||||
<div class="val">{!! nl2br(e($invoice->client->full_address)) !!}</div>@endif
|
||||
@else
|
||||
<div class="val">—</div>
|
||||
@endif
|
||||
</td>
|
||||
<td style="width:50%; text-align:right;">
|
||||
<table class="details-table" align="right" cellpadding="0" cellspacing="0">
|
||||
<tr>
|
||||
<td class="lbl">Invoice No:</td>
|
||||
<td class="val-dt">{{ $invoice->invoice_number }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="lbl">Date:</td>
|
||||
<td class="val-dt">{{ $invoice->issue_date->format('d.m.Y') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="lbl">Due Date:</td>
|
||||
<td class="val-dt">{{ $invoice->due_date->format('d.m.Y') }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div style="margin-bottom: 30px;">
|
||||
<div class="label">FROM:</div>
|
||||
<div class="val-bold">
|
||||
{{ $invoiceSettings->header_name ?: 'Cathy' }}
|
||||
@if($invoiceSettings->header_title)
|
||||
<span style="font-weight: normal; color: #444;"> ( {{ $invoiceSettings->header_title }} )</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="items" cellpadding="0" cellspacing="0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width:45%;">DESCRIPTION</th>
|
||||
<th class="td-right" style="width:25%;">PRICE</th>
|
||||
<th class="td-center" style="width:10%;">QTY</th>
|
||||
<th class="td-right" style="width:20%;">TOTAL</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach($invoice->items as $item)
|
||||
<tr>
|
||||
<td>
|
||||
{{ $item->description }}
|
||||
@if(!$item->is_taxable)
|
||||
<span
|
||||
style="margin-left:6px; font-size:8px; border:1px solid #999; color:#666; padding:1px 4px; border-radius:3px; text-transform:uppercase; letter-spacing:0.5px;">Non-Taxable</span>
|
||||
@endif
|
||||
@if($invoice->discount_rate > 0 && !$item->is_discountable)
|
||||
<span
|
||||
style="margin-left:6px; font-size:8px; border:1px solid #999; color:#666; padding:1px 4px; border-radius:3px; text-transform:uppercase; letter-spacing:0.5px;">No
|
||||
Discount</span>
|
||||
@endif
|
||||
</td>
|
||||
<td class="td-right">Rp {{ number_format($item->unit_price, 0, ',', '.') }}</td>
|
||||
<td class="td-center">{{ $item->quantity }}</td>
|
||||
<td class="td-right">Rp {{ number_format($item->total, 0, ',', '.') }}</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="totals-wrapper">
|
||||
<table class="totals" cellpadding="0" cellspacing="0">
|
||||
<tr>
|
||||
<td class="lbl" style="font-weight: normal;">SUBTOTAL</td>
|
||||
<td class="val" style="font-weight: normal;">Rp
|
||||
{{ number_format($invoice->subtotal + $invoice->discount_amount, 0, ',', '.') }}
|
||||
</td>
|
||||
</tr>
|
||||
@if($invoice->discount_amount > 0)
|
||||
<tr>
|
||||
<td class="lbl" style="font-weight: normal; color:#666;">DISCOUNT ({{ $invoice->discount_rate }}%)</td>
|
||||
<td class="val" style="font-weight: normal; color:#666;">- Rp
|
||||
{{ number_format($invoice->discount_amount, 0, ',', '.') }}
|
||||
</td>
|
||||
</tr>
|
||||
@endif
|
||||
@if($invoice->tax_rate > 0)
|
||||
<tr>
|
||||
<td class="lbl" style="font-weight: normal; color:#666;">TAX ({{ $invoice->tax_rate }}%)</td>
|
||||
<td class="val" style="font-weight: normal; color:#666;">Rp
|
||||
{{ number_format($invoice->tax_amount, 0, ',', '.') }}
|
||||
</td>
|
||||
</tr>
|
||||
@endif
|
||||
<tr>
|
||||
<td class="lbl" style="padding-top:10px;">GRAND TOTAL</td>
|
||||
<td class="val" style="padding-top:10px;">{{ $invoice->formatted_total }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@if($invoice->bank_name)
|
||||
<div class="bank-info">
|
||||
<div class="label"><b>PAYMENT ABOVE SHOULD BE MADE TO:</b></div>
|
||||
<p>
|
||||
{{ $invoice->bank_name }}<br>
|
||||
A/N {{ $invoice->bank_holder }}<br>
|
||||
{{ $invoice->bank_account }}
|
||||
@if($invoice->branch_name)<br>KCP: {{ $invoice->branch_name }}@endif
|
||||
</p>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="footer">
|
||||
@if($invoice->signature_image && file_exists(storage_path('app/public/' . $invoice->signature_image)))
|
||||
<div class="signature">
|
||||
<div class="sig-date">Jakarta, {{ $invoice->issue_date->format('d F Y') }}</div>
|
||||
<img src="{{ storage_path('app/public/' . $invoice->signature_image) }}" class="sig-img">
|
||||
<div class="sig-name">
|
||||
{{ $invoice->signer_name ?: ($invoiceSettings->signer_name ?: ($invoiceSettings->header_name ?: 'Signature')) }}
|
||||
</div>
|
||||
<div class="sig-title">
|
||||
{{ $invoice->signer_title ?: ($invoiceSettings->signer_title ?: $invoiceSettings->header_title) }}
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -317,6 +317,10 @@
|
||||
<span
|
||||
style="margin-left:6px; font-size:10px; background:#F3F4F6; color:#6B7280; padding:2px 8px; border-radius:10px; font-weight:600;">Non-Taxable</span>
|
||||
@endif
|
||||
@if($invoice->discount_rate > 0 && !$item->is_discountable)
|
||||
<span
|
||||
style="margin-left:6px; font-size:10px; background:#FDF2F8; color:#EC4899; padding:2px 8px; border-radius:10px; font-weight:600;">No Discount</span>
|
||||
@endif
|
||||
</td>
|
||||
<td class="td-right">Rp {{ number_format($item->unit_price, 0, ',', '.') }}</td>
|
||||
<td class="td-center">{{ $item->quantity }}</td>
|
||||
@@ -332,8 +336,14 @@
|
||||
<table cellpadding="0" cellspacing="0">
|
||||
<tr>
|
||||
<td style="color:#6B7280;">Subtotal</td>
|
||||
<td class="amount">Rp {{ number_format($invoice->subtotal, 0, ',', '.') }}</td>
|
||||
<td class="amount">Rp {{ number_format($invoice->subtotal + $invoice->discount_amount, 0, ',', '.') }}</td>
|
||||
</tr>
|
||||
@if($invoice->discount_amount > 0)
|
||||
<tr>
|
||||
<td style="color:#EC4899;">Discount ({{ $invoice->discount_rate }}%)</td>
|
||||
<td class="amount" style="color:#EC4899;">- Rp {{ number_format($invoice->discount_amount, 0, ',', '.') }}</td>
|
||||
</tr>
|
||||
@endif
|
||||
@if($invoice->tax_rate > 0)
|
||||
<tr>
|
||||
<td style="color:#D97706;">Tax ({{ $invoice->tax_rate }}% — paid by client)</td>
|
||||
|
||||
@@ -11,6 +11,9 @@
|
||||
<a href="{{ route('invoices.pdf', $invoice) }}" target="_blank"
|
||||
class="btn-sakura text-sm px-4 py-2.5 rounded-full border border-pink-200 text-pink-500 hover:bg-pink-50">📥
|
||||
Download PDF</a>
|
||||
<a href="{{ route('invoices.pdf-legacy', $invoice) }}" target="_blank"
|
||||
class="btn-sakura text-sm px-4 py-2.5 rounded-full border border-gray-200 text-gray-500 hover:bg-gray-50">📥
|
||||
PDF (Legacy)</a>
|
||||
<form action="{{ route('invoices.destroy', $invoice) }}" method="POST"
|
||||
onsubmit="return confirm('Delete this invoice?')">
|
||||
@csrf @method('DELETE')
|
||||
@@ -104,6 +107,10 @@
|
||||
<span
|
||||
class="ml-1.5 text-xs bg-gray-100 text-gray-500 px-2 py-0.5 rounded-full font-medium">Non-Taxable</span>
|
||||
@endif
|
||||
@if($invoice->discount_rate > 0 && !$item->is_discountable)
|
||||
<span
|
||||
class="ml-1.5 text-xs bg-pink-50 text-pink-500 px-2 py-0.5 rounded-full font-medium">No Discount</span>
|
||||
@endif
|
||||
</td>
|
||||
<td class="py-3 px-4 text-sm text-right text-gray-600">Rp
|
||||
{{ number_format($item->unit_price, 0, ',', '.') }}</td>
|
||||
@@ -120,8 +127,14 @@
|
||||
<div class="w-72 space-y-2 text-sm">
|
||||
<div class="flex justify-between text-gray-500">
|
||||
<span>Subtotal</span><span class="font-medium">Rp
|
||||
{{ number_format($invoice->subtotal, 0, ',', '.') }}</span>
|
||||
{{ number_format($invoice->subtotal + $invoice->discount_amount, 0, ',', '.') }}</span>
|
||||
</div>
|
||||
@if($invoice->discount_amount > 0)
|
||||
<div class="flex justify-between text-pink-500">
|
||||
<span>Discount ({{ $invoice->discount_rate }}%)</span>
|
||||
<span class="font-medium">- Rp {{ number_format($invoice->discount_amount, 0, ',', '.') }}</span>
|
||||
</div>
|
||||
@endif
|
||||
@if($invoice->tax_rate > 0)
|
||||
<div class="flex justify-between text-amber-600">
|
||||
<span>Tax ({{ $invoice->tax_rate }}% — paid by client)</span>
|
||||
|
||||
@@ -405,18 +405,45 @@
|
||||
@if(!empty($publicShowcase))
|
||||
<div class="platform-section" style="margin-top:40px;">
|
||||
<div class="platform-title" style="justify-content:center;">Content Showcase</div>
|
||||
@php $isCarousel = count($publicShowcase) >= 3; @endphp
|
||||
@php
|
||||
$isCarousel = count($publicShowcase) >= 3;
|
||||
$renderShowcase = $isCarousel ? array_merge($publicShowcase, $publicShowcase) : $publicShowcase;
|
||||
@endphp
|
||||
@if($isCarousel)
|
||||
<div class="carousel-wrapper" x-data="{
|
||||
scrollPrev() { $refs.slider.scrollBy({left: -234, behavior: 'smooth'}); },
|
||||
scrollNext() { $refs.slider.scrollBy({left: 234, behavior: 'smooth'}); }
|
||||
scrollTimeout: null,
|
||||
scrollPrev() {
|
||||
const slider = this.$refs.slider;
|
||||
const el = slider.lastElementChild;
|
||||
const dist = el.offsetWidth + 14;
|
||||
slider.insertBefore(el, slider.firstElementChild);
|
||||
slider.scrollLeft += dist;
|
||||
void slider.offsetWidth;
|
||||
slider.scrollBy({left: -dist, behavior: 'smooth'});
|
||||
},
|
||||
scrollNext() {
|
||||
const slider = this.$refs.slider;
|
||||
const el = slider.firstElementChild;
|
||||
const dist = el.offsetWidth + 14;
|
||||
slider.scrollBy({left: dist, behavior: 'smooth'});
|
||||
|
||||
if (this.scrollTimeout) clearTimeout(this.scrollTimeout);
|
||||
this.scrollTimeout = setTimeout(() => {
|
||||
while (slider.scrollLeft >= slider.firstElementChild.offsetWidth + 10) {
|
||||
const first = slider.firstElementChild;
|
||||
const moveDist = first.offsetWidth + 14;
|
||||
slider.appendChild(first);
|
||||
slider.scrollLeft -= moveDist;
|
||||
}
|
||||
}, 400);
|
||||
}
|
||||
}">
|
||||
<button type="button" class="carousel-btn prev" @click="scrollPrev()">❮</button>
|
||||
<div class="carousel-track" x-ref="slider">
|
||||
<div class="carousel-track" x-ref="slider" style="overflow-anchor: none;">
|
||||
@else
|
||||
<div class="cards">
|
||||
@endif
|
||||
@foreach($publicShowcase as $item)
|
||||
@foreach($renderShowcase as $item)
|
||||
@php
|
||||
$isUrl = ($item['file_id'] === 'url');
|
||||
$file = !$isUrl ? \App\Models\MediaFile::find($item['file_id']) : null;
|
||||
|
||||
Reference in New Issue
Block a user