{{--
    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);
        }

        .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>
