You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

default.blade.php 6.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. <x-company.document-template.container class="default-template-container" :preview="$preview">
  2. <x-company.document-template.header class="default-template-header border-b">
  3. <div class="w-1/3">
  4. @if($document->logo && $document->showLogo)
  5. <x-company.document-template.logo :src="$document->logo"/>
  6. @endif
  7. </div>
  8. <div class="w-2/3 text-right">
  9. <div class="space-y-4">
  10. <div>
  11. <h1 class="text-3xl font-light uppercase">{{ $document->header }}</h1>
  12. @if ($document->subheader)
  13. <p class="text-sm text-gray-600">{{ $document->subheader }}</p>
  14. @endif
  15. </div>
  16. <div class="text-sm">
  17. <strong class="text-sm block">{{ $document->company->name }}</strong>
  18. @if($formattedAddress = $document->company->getFormattedAddressHtml())
  19. {!! $formattedAddress !!}
  20. @endif
  21. </div>
  22. </div>
  23. </div>
  24. </x-company.document-template.header>
  25. <x-company.document-template.metadata class="default-template-metadata space-y-4">
  26. <div class="flex justify-between items-end">
  27. <!-- Billing Details -->
  28. <div class="text-sm">
  29. <h3 class="text-gray-600 font-medium mb-1">BILL TO</h3>
  30. <p class="text-sm font-bold">{{ $document->client?->name ?? 'Client Not Found' }}</p>
  31. @if($document->client && ($formattedAddress = $document->client->getFormattedAddressHtml()))
  32. {!! $formattedAddress !!}
  33. @endif
  34. </div>
  35. <div class="text-sm">
  36. <table class="min-w-full">
  37. <tbody>
  38. <tr>
  39. <td class="font-semibold text-right pr-2">{{ $document->label->number }}:</td>
  40. <td class="text-left pl-2">{{ $document->number }}</td>
  41. </tr>
  42. @if($document->referenceNumber)
  43. <tr>
  44. <td class="font-semibold text-right pr-2">{{ $document->label->referenceNumber }}:</td>
  45. <td class="text-left pl-2">{{ $document->referenceNumber }}</td>
  46. </tr>
  47. @endif
  48. <tr>
  49. <td class="font-semibold text-right pr-2">{{ $document->label->date }}:</td>
  50. <td class="text-left pl-2">{{ $document->date }}</td>
  51. </tr>
  52. <tr>
  53. <td class="font-semibold text-right pr-2">{{ $document->label->dueDate }}:</td>
  54. <td class="text-left pl-2">{{ $document->dueDate }}</td>
  55. </tr>
  56. </tbody>
  57. </table>
  58. </div>
  59. </div>
  60. </x-company.document-template.metadata>
  61. <!-- Line Items Table -->
  62. <x-company.document-template.line-items class="default-template-line-items">
  63. <table class="w-full text-left table-fixed">
  64. <thead class="text-sm leading-relaxed" style="background: {{ $document->accentColor }}">
  65. <tr class="text-white">
  66. <th class="text-left pl-6 w-[50%] py-2">{{ $document->columnLabel->items }}</th>
  67. <th class="text-center w-[10%] py-2">{{ $document->columnLabel->units }}</th>
  68. <th class="text-right w-[20%] py-2">{{ $document->columnLabel->price }}</th>
  69. <th class="text-right pr-6 w-[20%] py-2">{{ $document->columnLabel->amount }}</th>
  70. </tr>
  71. </thead>
  72. <tbody class="text-sm border-b-2 border-gray-300">
  73. @foreach($document->lineItems as $item)
  74. <tr>
  75. <td class="text-left pl-6 font-semibold py-3">
  76. {{ $item->name }}
  77. @if($item->description)
  78. <div class="text-gray-600 font-normal line-clamp-2 mt-1">{{ $item->description }}</div>
  79. @endif
  80. </td>
  81. <td class="text-center py-3">{{ $item->quantity }}</td>
  82. <td class="text-right py-3">{{ $item->unitPrice }}</td>
  83. <td class="text-right pr-6 py-3">{{ $item->subtotal }}</td>
  84. </tr>
  85. @endforeach
  86. </tbody>
  87. <tfoot class="text-sm summary-section">
  88. @if($document->subtotal)
  89. <tr>
  90. <td class="pl-6 py-2" colspan="2"></td>
  91. <td class="text-right font-semibold py-2">Subtotal:</td>
  92. <td class="text-right pr-6 py-2">{{ $document->subtotal }}</td>
  93. </tr>
  94. @endif
  95. @if($document->discount)
  96. <tr class="text-success-800">
  97. <td class="pl-6 py-2" colspan="2"></td>
  98. <td class="text-right py-2">Discount:</td>
  99. <td class="text-right pr-6 py-2">
  100. ({{ $document->discount }})
  101. </td>
  102. </tr>
  103. @endif
  104. @if($document->tax)
  105. <tr>
  106. <td class="pl-6 py-2" colspan="2"></td>
  107. <td class="text-right py-2">Tax:</td>
  108. <td class="text-right pr-6 py-2">{{ $document->tax }}</td>
  109. </tr>
  110. @endif
  111. <tr>
  112. <td class="pl-6 py-2" colspan="2"></td>
  113. <td class="text-right font-semibold border-t py-2">{{ $document->amountDue ? 'Total' : 'Grand Total' }}:</td>
  114. <td class="text-right border-t pr-6 py-2">{{ $document->total }}</td>
  115. </tr>
  116. @if($document->amountDue)
  117. <tr>
  118. <td class="pl-6 py-2" colspan="2"></td>
  119. <td class="text-right font-semibold border-t-4 border-double py-2">{{ $document->label->amountDue }}
  120. ({{ $document->currencyCode }}):
  121. </td>
  122. <td class="text-right border-t-4 border-double pr-6 py-2">{{ $document->amountDue }}</td>
  123. </tr>
  124. @endif
  125. </tfoot>
  126. </table>
  127. </x-company.document-template.line-items>
  128. <!-- Footer Notes -->
  129. <x-company.document-template.footer class="default-template-footer flex flex-col text-sm p-6">
  130. <div>
  131. <h4 class="font-semibold mb-2">Terms & Conditions</h4>
  132. <p class="break-words line-clamp-4">{{ $document->terms }}</p>
  133. </div>
  134. @if($document->footer)
  135. <div class="mt-auto text-center py-4">
  136. <p class="font-semibold">{{ $document->footer }}</p>
  137. </div>
  138. @endif
  139. </x-company.document-template.footer>
  140. </x-company.document-template.container>