123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157 |
- @php
- $data = $this->form->getRawState();
- $document = \App\DTO\DocumentPreviewDTO::fromSettings($this->record, $data);
- @endphp
-
- {!! $document->getFontHtml() !!}
-
- <style>
- .doc-template-paper {
- font-family: '{{ $document->font->getLabel() }}', sans-serif;
- }
- </style>
-
- <x-company.document-template.container class="classic-template-container" preview>
- <!-- Header Section -->
- <x-company.document-template.header class="default-template-header">
- <div class="w-2/3 text-left">
- <div class="text-xs">
- <strong class="text-xs block">{{ $document->company->name }}</strong>
- @if($formattedAddress = $document->company->getFormattedAddressHtml())
- {!! $formattedAddress !!}
- @endif
- </div>
- </div>
-
- <div class="w-1/3 flex justify-end">
- @if($document->logo && $document->showLogo)
- <x-company.document-template.logo :src="$document->logo"/>
- @endif
- </div>
- </x-company.document-template.header>
-
- <x-company.document-template.metadata class="classic-template-metadata space-y-2">
- <div class="items-center flex">
- <hr class="grow-[2] py-0.5 border-solid border-y-2" style="border-color: {{ $document->accentColor }};">
- <x-icons.document-header-decoration
- color="{{ $document->accentColor }}"
- text="{{ $document->header }}"
- class="w-48"
- />
- <hr class="grow-[2] py-0.5 border-solid border-y-2" style="border-color: {{ $document->accentColor }};">
- </div>
- @if ($document->subheader)
- <p class="text-xs text-center text-gray-600">{{ $document->subheader }}</p>
- @endif
-
- <div class="flex justify-between items-end">
- <!-- Billing Details -->
- <div class="text-xs">
- <h3 class="text-gray-600 font-medium mb-1">BILL TO</h3>
- <p class="text-xs font-bold">{{ $document->client->name }}</p>
- @if($formattedAddress = $document->client->getFormattedAddressHtml())
- {!! $formattedAddress !!}
- @endif
- </div>
-
- <div class="text-xs">
- <table class="min-w-full">
- <tbody>
- <tr>
- <td class="font-semibold text-right pr-2">{{ $document->label->number }}:</td>
- <td class="text-left pl-2">{{ $document->number }}</td>
- </tr>
- <tr>
- <td class="font-semibold text-right pr-2">{{ $document->label->referenceNumber }}:</td>
- <td class="text-left pl-2">{{ $document->referenceNumber }}</td>
- </tr>
- <tr>
- <td class="font-semibold text-right pr-2">{{ $document->label->date }}:</td>
- <td class="text-left pl-2">{{ $document->date }}</td>
- </tr>
- <tr>
- <td class="font-semibold text-right pr-2">{{ $document->label->dueDate }}:</td>
- <td class="text-left pl-2">{{ $document->dueDate }}</td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- </x-company.document-template.metadata>
-
- <!-- Line Items -->
- <x-company.document-template.line-items class="classic-template-line-items px-6">
- <table class="w-full text-left table-fixed">
- <thead class="text-xs leading-8">
- <tr>
- <th class="text-left">{{ $document->columnLabel->items }}</th>
- <th class="text-center">{{ $document->columnLabel->units }}</th>
- <th class="text-right">{{ $document->columnLabel->price }}</th>
- <th class="text-right">{{ $document->columnLabel->amount }}</th>
- </tr>
- </thead>
- <tbody class="text-xs border-t-2 border-b-2 border-dotted border-gray-300 leading-8">
- @foreach($document->lineItems as $item)
- <tr>
- <td class="text-left font-semibold">{{ $item->name }}</td>
- <td class="text-center">{{ $item->quantity }}</td>
- <td class="text-right">{{ $item->unitPrice }}</td>
- <td class="text-right">{{ $item->subtotal }}</td>
- </tr>
- @endforeach
- </tbody>
- </table>
-
- <!-- Financial Details and Notes -->
- <div class="flex justify-between text-xs space-x-1 pt-2">
- <!-- Notes Section -->
- <div class="w-[60%] py-2">
- <p class="font-semibold">{{ $document->footer }}</p>
- </div>
-
- <!-- Financial Summary -->
- <div class="w-[40%]">
- <table class="w-full table-fixed whitespace-nowrap">
- <tbody class="text-xs">
- <tr>
- <td class="text-right font-semibold py-2">Subtotal:</td>
- <td class="text-right py-2">{{ $document->subtotal }}</td>
- </tr>
- @if($document->discount)
- <tr class="text-success-800">
- <td class="text-right py-2">Discount:</td>
- <td class="text-right py-2">
- ({{ $document->discount }})
- </td>
- </tr>
- @endif
- @if($document->tax)
- <tr>
- <td class="text-right py-2">Tax:</td>
- <td class="text-right py-2">{{ $document->tax }}</td>
- </tr>
- @endif
- <tr>
- <td class="text-right font-semibold border-t py-2">Total:</td>
- <td class="text-right border-t py-2">{{ $document->total }}</td>
- </tr>
- @if($document->amountDue)
- <tr>
- <td class="text-right font-semibold border-t-4 border-double py-2">{{ $document->label->amountDue }}
- ({{ $document->currencyCode }}):
- </td>
- <td class="text-right border-t-4 border-double py-2">{{ $document->amountDue }}</td>
- </tr>
- @endif
- </tbody>
- </table>
- </div>
- </div>
- </x-company.document-template.line-items>
-
- <!-- Footer -->
- <x-company.document-template.footer class="classic-template-footer text-xs">
- <h4 class="font-semibold px-6 mb-2">Terms & Conditions</h4>
- <p class="px-6 break-words line-clamp-4">{{ $document->terms }}</p>
- </x-company.document-template.footer>
- </x-company.document-template.container>
|