ismailmasseran
d06c4701a4
Co-authored-by: ISMAIL MASSERAN <topaz@Mac.dlinkrouter.local> Reviewed-on: #4
387 lines
12 KiB
PHP
387 lines
12 KiB
PHP
{{--
|
|
Reusable base layout for official PDF letters.
|
|
|
|
Extend this layout and fill the sections below:
|
|
|
|
@extends('pdf.layouts.letter')
|
|
|
|
@section('letter-reference') Ruj: APP-2026-00001 @endsection
|
|
@section('letter-date') {{ now()->format('d F Y') }} @endsection
|
|
@section('letter-recipient') ... @endsection
|
|
@section('letter-subject') Perkara: ... @endsection
|
|
@section('letter-salutation') Assalamualaikum dan Salam Sejahtera, @endsection
|
|
@section('letter-body') ... @endsection
|
|
@section('letter-closing') Yang benar, @endsection
|
|
@section('letter-signature') ... @endsection
|
|
|
|
Optional overrides via view data:
|
|
- logoPath, organizationAddress, organizationContact
|
|
- showReference, showDate, showSubject (bool, default true)
|
|
--}}
|
|
@php
|
|
$showReference = $showReference ?? true;
|
|
$showDate = $showDate ?? true;
|
|
$showSubject = $showSubject ?? true;
|
|
$letterDate = trim($__env->yieldContent('letter-date'));
|
|
$css = ($letterLayout ?? \App\Support\LetterLayout::resolve())['css'];
|
|
@endphp
|
|
<!DOCTYPE html>
|
|
<html lang="ms">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>@yield('letter-title', trim($__env->yieldContent('letter-subject', 'Surat Rasmi')))</title>
|
|
<style>
|
|
:root {
|
|
--letter-margin-top: {{ $css['margin_top'] }};
|
|
--letter-margin-right: {{ $css['margin_right'] }};
|
|
--letter-margin-bottom: {{ $css['margin_bottom'] }};
|
|
--letter-margin-left: {{ $css['margin_left'] }};
|
|
--letter-content-padding-x: {{ $css['content_padding_x'] }};
|
|
--letter-sheet-min-height: {{ $css['sheet_min_height'] }};
|
|
--letter-font-family: {{ $css['font_family'] }};
|
|
--letter-font-size: {{ $css['font_size'] }};
|
|
--letter-line-height: {{ $css['line_height'] }};
|
|
--letter-body-color: {{ $css['body_color'] }};
|
|
--letter-signatory-title-size: {{ $css['signatory_title_size'] }};
|
|
--letter-signatory-title-color: {{ $css['signatory_title_color'] }};
|
|
--letter-footer-font-size: {{ $css['footer_font_size'] }};
|
|
--letter-footer-line-height: {{ $css['footer_line_height'] }};
|
|
--letterhead-registration-size: {{ $css['letterhead_registration_size'] }};
|
|
--letterhead-margin-bottom: {{ $css['letterhead_margin_bottom'] }};
|
|
--letter-meta-margin-bottom: {{ $css['meta_margin_bottom'] }};
|
|
--letter-recipient-margin-bottom: {{ $css['recipient_margin_bottom'] }};
|
|
--letter-subject-margin-bottom: {{ $css['subject_margin_bottom'] }};
|
|
--letter-body-margin-bottom: {{ $css['body_margin_bottom'] }};
|
|
--letter-body-paragraph-margin-bottom: {{ $css['body_paragraph_margin_bottom'] }};
|
|
--letter-signature-block-margin-bottom: {{ $css['signature_block_margin_bottom'] }};
|
|
--letter-signature-company-margin-bottom: {{ $css['signature_company_margin_bottom'] }};
|
|
--letter-signature-space-height: {{ $css['signature_space_height'] }};
|
|
--letter-logo-height: {{ $css['logo_height'] }};
|
|
--letter-color-blue: {{ $css['color_blue'] }};
|
|
--letter-color-orange: {{ $css['color_orange'] }};
|
|
--letter-color-white: {{ $css['color_white'] }};
|
|
--letter-color-black: {{ $css['color_black'] }};
|
|
}
|
|
|
|
@page {
|
|
size: A4;
|
|
margin: var(--letter-margin-top) var(--letter-margin-right) var(--letter-margin-bottom) var(--letter-margin-left);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
-webkit-print-color-adjust: exact;
|
|
print-color-adjust: exact;
|
|
}
|
|
|
|
body.letter-page {
|
|
font-family: var(--letter-font-family);
|
|
font-size: var(--letter-font-size);
|
|
line-height: var(--letter-line-height);
|
|
color: var(--letter-body-color);
|
|
margin: 0;
|
|
padding: var(--letter-margin-top) var(--letter-margin-right) var(--letter-margin-bottom) var(--letter-margin-left);
|
|
}
|
|
|
|
.letter-sheet {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: var(--letter-sheet-min-height);
|
|
}
|
|
|
|
.letter-content {
|
|
flex: 1 1 auto;
|
|
padding-left: var(--letter-content-padding-x);
|
|
padding-right: var(--letter-content-padding-x);
|
|
}
|
|
|
|
.letter-bottom {
|
|
flex-shrink: 0;
|
|
margin-top: auto;
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
.letterhead {
|
|
width: 100%;
|
|
margin-bottom: var(--letterhead-margin-bottom);
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.letterhead-line {
|
|
vertical-align: middle;
|
|
padding-right: 16px;
|
|
}
|
|
|
|
.letterhead-rule {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
-webkit-print-color-adjust: exact;
|
|
print-color-adjust: exact;
|
|
}
|
|
|
|
.letterhead-rule-blue {
|
|
background-color: var(--letter-color-blue);
|
|
font-size: 0;
|
|
line-height: 0;
|
|
}
|
|
|
|
.letterhead-rule-orange {
|
|
background-color: var(--letter-color-orange);
|
|
font-size: 0;
|
|
line-height: 0;
|
|
}
|
|
|
|
.letterhead-logo {
|
|
vertical-align: middle;
|
|
white-space: nowrap;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
.letterhead-logo-img {
|
|
height: var(--letter-logo-height);
|
|
width: auto;
|
|
display: block;
|
|
}
|
|
|
|
.letterhead-brand {
|
|
vertical-align: middle;
|
|
white-space: nowrap;
|
|
padding-left: 4px;
|
|
}
|
|
|
|
.letterhead-brand-inner {
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.letterhead-name {
|
|
vertical-align: middle;
|
|
text-align: left;
|
|
padding-left: 2px;
|
|
}
|
|
|
|
.letterhead-name-line {
|
|
font-size: var(--letter-font-size);
|
|
font-weight: bold;
|
|
line-height: 1.25;
|
|
color: var(--letter-color-black);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.3px;
|
|
}
|
|
|
|
.letterhead-registration {
|
|
font-size: var(--letterhead-registration-size);
|
|
font-weight: bold;
|
|
line-height: 1.3;
|
|
color: var(--letter-color-black);
|
|
margin-top: 2px;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.meta-table {
|
|
width: 100%;
|
|
margin-bottom: var(--letter-meta-margin-bottom);
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.meta-table td {
|
|
vertical-align: top;
|
|
padding: 0;
|
|
}
|
|
|
|
.meta-label {
|
|
width: 70px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.meta-value {
|
|
padding-left: 4px;
|
|
}
|
|
|
|
.meta-date {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.recipient-block {
|
|
margin-bottom: var(--letter-recipient-margin-bottom);
|
|
}
|
|
|
|
.subject-block {
|
|
font-weight: bold;
|
|
margin-bottom: var(--letter-subject-margin-bottom);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.letter-body {
|
|
margin-bottom: var(--letter-body-margin-bottom);
|
|
text-align: justify;
|
|
}
|
|
|
|
.letter-body p {
|
|
margin: 0 0 var(--letter-body-paragraph-margin-bottom);
|
|
}
|
|
|
|
.signature-block {
|
|
padding-left: var(--letter-content-padding-x);
|
|
padding-right: var(--letter-content-padding-x);
|
|
margin-bottom: var(--letter-signature-block-margin-bottom);
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
.signature-company {
|
|
font-weight: bold;
|
|
margin-bottom: var(--letter-signature-company-margin-bottom);
|
|
}
|
|
|
|
.signature-space {
|
|
height: var(--letter-signature-space-height);
|
|
}
|
|
|
|
.signature-space-img {
|
|
height: var(--letter-signature-space-height);
|
|
width: auto;
|
|
display: block;
|
|
}
|
|
|
|
.signatory-name {
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.signatory-title {
|
|
font-size: var(--letter-signatory-title-size);
|
|
line-height: 1.5;
|
|
color: var(--letter-signatory-title-color);
|
|
}
|
|
|
|
.letter-footer-wrapper {
|
|
-webkit-print-color-adjust: exact;
|
|
print-color-adjust: exact;
|
|
}
|
|
|
|
.letter-footer {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
table-layout: fixed;
|
|
}
|
|
|
|
.letter-footer-contact-box {
|
|
background-color: var(--letter-color-orange);
|
|
padding: 8px 12px;
|
|
font-size: var(--letter-footer-font-size);
|
|
line-height: var(--letter-footer-line-height);
|
|
color: var(--letter-color-white);
|
|
vertical-align: middle;
|
|
-webkit-print-color-adjust: exact;
|
|
print-color-adjust: exact;
|
|
}
|
|
|
|
.letter-footer-address-inner {
|
|
background-color: var(--letter-color-blue);
|
|
color: var(--letter-color-white);
|
|
padding: 8px 12px;
|
|
font-size: var(--letter-footer-font-size);
|
|
line-height: var(--letter-footer-line-height);
|
|
text-align: left;
|
|
vertical-align: middle;
|
|
-webkit-print-color-adjust: exact;
|
|
print-color-adjust: exact;
|
|
}
|
|
|
|
.letter-footer-lines {
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.letter-footer-icon {
|
|
width: 18px;
|
|
padding: 2px 8px 2px 0;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.letter-footer-line-text {
|
|
padding: 2px 0;
|
|
color: var(--letter-color-white);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
@media print {
|
|
body.letter-page {
|
|
padding: 0;
|
|
}
|
|
|
|
.letter-sheet {
|
|
min-height: auto;
|
|
}
|
|
|
|
.letterhead {
|
|
page-break-inside: avoid;
|
|
}
|
|
}
|
|
</style>
|
|
@stack('letter-styles')
|
|
</head>
|
|
<body class="letter-page">
|
|
<div class="letter-sheet">
|
|
@include('pdf.partials.letterhead')
|
|
|
|
<div class="letter-content">
|
|
<div class="meta-table">
|
|
@if ($showReference && trim($__env->yieldContent('letter-reference')) !== '')
|
|
<table cellpadding="0" cellspacing="0">
|
|
<tr>
|
|
<td class="meta-label">Ruj.</td>
|
|
<td class="meta-value">: @yield('letter-reference')</td>
|
|
</tr>
|
|
</table>
|
|
@endif
|
|
@if ($showDate && $letterDate !== '')
|
|
<div class="meta-date">{{ $letterDate }}</div>
|
|
@endif
|
|
</div>
|
|
|
|
@hasSection('letter-recipient')
|
|
<div class="recipient-block">
|
|
<div>@yield('letter-recipient')</div>
|
|
</div>
|
|
@endif
|
|
|
|
@if ($showSubject && trim($__env->yieldContent('letter-subject')) !== '')
|
|
<div class="subject-block">
|
|
@yield('letter-subject')
|
|
</div>
|
|
@endif
|
|
|
|
@hasSection('letter-salutation')
|
|
<div class="letter-salutation">@yield('letter-salutation')</div>
|
|
@endif
|
|
|
|
<div class="letter-body">
|
|
@yield('letter-body')
|
|
</div>
|
|
|
|
@hasSection('letter-closing')
|
|
<div class="letter-closing">@yield('letter-closing')</div>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="letter-bottom">
|
|
@hasSection('letter-signature')
|
|
<div class="signature-block">@yield('letter-signature')</div>
|
|
@endif
|
|
|
|
<div class="letter-footer-wrapper">
|
|
@hasSection('letter-footer')
|
|
@yield('letter-footer')
|
|
@else
|
|
@include('pdf.partials.letterfooter')
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@stack('letter-scripts')
|
|
</body>
|
|
</html>
|