@php

    use Modules\BookKeeping\Models\DocumentLine;

    // Excel-derived greens
    $green1 = '#297983';
    $green2 = '#298C9C';
    $green3 = '#4AC4D6';

    $stampColour = $document->status->getColor();

    // Parent lines with children (included) and profit for VAT/discount on pro/misc
    $parentLines ??= (
        $document->relationLoaded('lines')
        ? $document->lines
        : $document->lines()
            ->whereNull(DocumentLine::PARENT_LINE_ID)
            ->with([
                'children' => fn($query) => $query->where(DocumentLine::INCLUDED, 1),
                'profit',
            ])
            ->get()
    );

    $currency = "{$document->currency_symbol} ";

    $serviceTotals = [];
    $proMiscTotals = [
        'quantity' => 0,
        'subtotal' => 0,
        'vat' => 0,
        'total' => 0,
        'discount' => 0,
    ];

    // Try find the service that represents professional/misc fees (via DB list first, config fallback)
    $proMiscServiceId = $services->first(function ($service) {
        $name = strtolower($service->service_name ?? '');

        return str_contains($name, 'professional') || str_contains($name, 'misc');
    })?->service_id;

    $proMiscConfigId = collect(config('items_services', []))
        ->filter(function ($service) {
            $name = strtolower($service['name'] ?? '');

            return str_contains($name, 'professional') || str_contains($name, 'misc');
        })
        ->keys()
        ->first();

    $proMiscServiceId ??= $proMiscConfigId;

    // Build totals: parent rows use child/parent prices only; VAT/discount handled on pro/misc fee
    foreach ($parentLines as $line) {
        $serviceId = $line->service_id;
        $profit = $line->profit;

        $childrenTotal = $line->children->sum(DocumentLine::PRICE);
        $parentPrice = $line->price ?? 0;
        $lineSubtotal = $parentPrice + $childrenTotal;

        if ($serviceId !== null) {
            $serviceTotals[$serviceId] ??= [
                'service_id' => $serviceId,
                'quantity' => 0,
                'subtotal' => 0,
                'vat' => 0,
                'total' => 0,
            ];

            $serviceTotals[$serviceId]['quantity'] += 1;
            $serviceTotals[$serviceId]['subtotal'] += $lineSubtotal;
            $serviceTotals[$serviceId]['total'] += $lineSubtotal; // no VAT on parent items
        }

        // Professional + miscellaneous fees live on the parent profit record
        $proFee = $profit?->pro_fee ?? 0;
        $miscFee = $profit?->misc_fee ?? 0;
        $discount = $profit?->discount ?? 0;
        $taxTotal = $profit?->tax_total ?? 0;
        $proMiscSubtotal = $proFee + $miscFee - $discount;

        if ($proMiscSubtotal !== 0.0 || $taxTotal !== 0.0) {
            //Keep pro/misc quantity as 1
            //This prevents the document from displaying a quantity greater than 1 for pro/misc fees
            $proMiscTotals['quantity'] = 1;
            $proMiscTotals['subtotal'] += $proMiscSubtotal;
            $proMiscTotals['discount'] += $discount;
            $proMiscTotals['vat'] += $taxTotal;
            $proMiscTotals['total'] += $proMiscSubtotal + $taxTotal;
        }
    }

    $services = $services instanceof \Illuminate\Support\Collection ? $services : collect($services);

    $serviceItems = [];

    foreach ($services as $service) {
        $totals = $serviceTotals[$service->service_id] ?? [
            'service_id' => $service->service_id,
            'quantity' => 0,
            'subtotal' => 0,
            'vat' => 0,
            'total' => 0,
        ];

        if ($proMiscServiceId && $service->service_id === $proMiscServiceId) {
            $totals['quantity'] += $proMiscTotals['quantity'];
            $totals['subtotal'] += $proMiscTotals['subtotal'];
            $totals['vat'] += $proMiscTotals['vat'];
            $totals['total'] += $proMiscTotals['total'];

            // Clear so we don't append a duplicate fallback row later
            $proMiscTotals = [
                'quantity' => 0,
                'subtotal' => 0,
                'vat' => 0,
                'total' => 0,
                'discount' => 0,
            ];
        }

        $serviceItems[] = [
            'name' => $service->service_name,
            'quantity' => $totals['quantity'],
            'subtotal' => $totals['subtotal'],
            'vat' => $totals['vat'],
            'total' => $totals['total'],
        ];
    }

    $serviceItems[] = [
        'name' => 'Professional & Miscellaneous Fees',
        'quantity' => $proMiscTotals['quantity'],
        'subtotal' => $proMiscTotals['subtotal'],
        'vat' => $proMiscTotals['vat'],
        'total' => $proMiscTotals['total'],
    ];
@endphp

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>{{ $document->document_type->value . ' ' . $document->number }}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- @vite(['resources/css/app.css']) {{-- Tailwind via Vite --}} -->
    <style>
        /* Force visible inside wkhtmltopdf regardless of media type */
        .screen-only {
            display: block !important;
        }

        .print-only {
            display: none !important;
        }

        /* keep your existing styles below */
        /* ... your @media print and other CSS ... */
    </style>

    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

    <style>
        /* Screen vs Print toggles */
        .screen-only {
            display: block;
        }

        .print-only {
            display: none;
        }

        @media print {
            @page {
                size: A4;
                margin: 14mm;
            }

            body {
                background: #fff !important;
            }

            .screen-only {
                display: none !important;
            }

            .print-only {
                display: block !important;
            }

            .page {
                page-break-after: always;
                box-shadow: none !important;
                border: 0 !important;
                background: #fff !important;
            }

            .page:last-child {
                page-break-after: auto;
            }

            .shards {
                opacity: .12 !important;
            }

            .stamp {
                opacity: .16 !important;
            }

            .print-hidden {
                display: none !important;
            }
        }
    </style>
</head>

<body class="bg-gray-50 text-gray-900 antialiased">

    {{-- =========================
    SCREEN VIEW (single page)
    ========================= --}}
    <div class="screen-only relative mx-auto my-6 max-w-5xl">
        {{-- Decorative GREEN SHARDS background --}}
        <svg class="shards pointer-events-none absolute inset-0 -z-10 h-full w-full" viewBox="0 0 1200 1600"
            aria-hidden="true">
            <defs>
                <linearGradient id="g1-main" x1="0" y1="0" x2="1" y2="1">
                    <stop offset="0" stop-color="{{ $green3 }}" stop-opacity="0.22" />
                    <stop offset="1" stop-color="{{ $green1 }}" stop-opacity="0.12" />
                </linearGradient>
                <linearGradient id="g2-main" x1="1" y1="0" x2="0" y2="1">
                    <stop offset="0" stop-color="{{ $green2 }}" stop-opacity="0.18" />
                    <stop offset="1" stop-color="{{ $green3 }}" stop-opacity="0.10" />
                </linearGradient>
            </defs>
            <path d="M1200,0 L800,0 L1200,360 Z" fill="url(#g1-main)" />
            <path d="M1200,0 L960,0 L1200,220 Z" fill="url(#g2-main)" />
            <path d="M0,1600 L0,1280 L360,1600 Z" fill="url(#g2-main)" />
            <path d="M0,1600 L0,1440 L220,1600 Z" fill="url(#g1-main)" />
        </svg>

        <div class="relative rounded-2xl border border-gray-200 bg-white p-8 shadow-sm">

            {{-- Header --}}
            <header class="flex flex-col gap-6 sm:flex-row sm:items-start sm:justify-between">
                <div class="text-left">
                    <div class="flex items-center gap-4">
                        <img src="{{ $logoDataUri }}" alt="Company Logo"
                            class="h-16 w-16 rounded-xl border border-gray-200 bg-white object-contain" />
                        <div>
                            <div class="text-xl font-bold" style="color: {{ $green1 }}">
                                {{ $document->issuer_display_name }}
                            </div>
                            <div class="text-sm text-gray-600">Licensing & Compliance Services</div>
                        </div>
                    </div>

                    <div class="mt-3 grid grid-cols-[110px_1fr] items-center gap-x-3 text-sm">
                        <div class="text-gray-500">Cell</div>
                        <div>{{ $document->user_primary_cell }}</div>
                        <div class="text-gray-500">Email</div>
                        <div class="font-mono">{{ $document->user_primary_email }}</div>
                    </div>
                </div>

                {{-- Stamp centered between left tagline and right document details (screen only) --}}
                @if($stampColour)
                    <div class="sm:flex items-start justify-center">
                        <div class="stamp pointer-events-none select-none absolute -translate-x-1/2 -translate-y-1/3 rotate-[-12deg] border-8 border-current px-6 py-3 font-extrabold uppercase tracking-[0.25em] text-center"
                            style="color: {{ $stampColour }}; font-size: clamp(16px, 2.6vw, 28px); letter-spacing: 0.18em; opacity: .20;">
                            {{ $document->status }}
                        </div>
                    </div>
                @endif

                <div class="text-right">
                    <h1 class="m-0 text-2xl font-semibold" style="color: {{ $green1 }}">
                        {{ $document->document_type->value }}
                    </h1>
                    <span class="mt-1 inline-block rounded-full border px-2.5 py-0.5 text-[11px] font-bold"
                        style="border-color: {{ $green2 }}; color: {{ $green2 }}">
                        {{ $document->status }}
                    </span>
                    <div class="mt-3 grid grid-cols-[110px_1fr] items-center gap-x-3 text-sm">
                        <div class="text-gray-500">{{ $document->number_ui_string }}</div>
                        <div class="font-mono">{{ $document->number }}</div>
                        <div class="text-gray-500">{{ $document->date_ui_string }}</div>
                        <div class="font-mono">{{ $document?->date ?? 'To Be Set' }}</div>
                    </div>
                </div>
            </header>

            {{-- Bill To / Business --}}
            <section class="mt-6 grid gap-6 sm:grid-cols-2">
                <div class="rounded-2xl border border-gray-200 p-4">
                    <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wider text-gray-500">Bill To</h3>
                    <div class="grid grid-cols-[110px_1fr] gap-1 text-sm">
                        <div class="text-gray-500">Client</div>
                        <div>{{ $document->bill_to_trading_as }}</div>
                        <div class="text-gray-500">Reg No</div>
                        <div class="font-mono">{{ $document->bill_to_reg_number ?? '-' }}</div>
                        <div class="text-gray-500">Trading As</div>
                        <div>{{ $document->bill_to_trading_as }}</div>
                        <div class="text-gray-500">VAT No</div>
                        <div class="font-mono">{{ $document->bill_to_vat_number ?? 'To Be Advised' }}</div>
                        <div class="text-gray-500">Street</div>
                        <div>{{ $document->bill_to_street }}</div>
                        <div class="text-gray-500">Town/City</div>
                        <div>{{ $document->bill_to_town }}</div>
                        <div class="text-gray-500">Code</div>
                        <div class="font-mono">{{ $document->bill_to_postal_code }}</div>
                    </div>
                </div>

                <!-- Primary Client of Business Information -->
                <div class="rounded-2xl border border-gray-200 p-4">
                    <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wider text-gray-500">Contact</h3>
                    <div class="grid grid-cols-[110px_1fr] gap-1 text-sm">
                        <div class="text-gray-500">Executive</div>
                        <div>{{ $document->bill_to_contact_full_name }}</div>
                        <div class="text-gray-500">Cell</div>
                        <div class="font-mono">{{ $document->bill_to_contact_primary_cell }}</div>
                        <div class="text-gray-500">Email</div>
                        <div class="font-mono">{{ $document->bill_to_contact_primary_email }}</div>
                    </div>
                </div>
            </section>

            {{-- Services--}}
            <section class="mt-4 overflow-hidden rounded-2xl border border-gray-200">
                <table class="w-full table-fixed border-collapse text-[11px] leading-snug">
                    <colgroup>
                        <col /> {{-- Description (flex) --}}
                        <col style="width:78px" /> {{-- Quantity --}}
                        <col style="width:96px" /> {{-- Sub --}}
                        <col style="width:90px" /> {{-- VAT 15% --}}
                        <col style="width:110px" /> {{-- Total --}}
                    </colgroup>

                    <thead class="text-left uppercase tracking-wider"
                        style="background: linear-gradient(90deg, {{ $green3 }}22, {{ $green1 }}15); color:#334155">
                        <tr>
                            <th class="px-3 py-1.5">Description</th>
                            <th class="px-2.5 py-1.5 text-right">Quantity</th>
                            <th class="px-2.5 py-1.5 text-right">Sub</th>
                            <th class="px-2.5 py-1.5 text-right">VAT {{ config('globalSettings.tax_rate') }}%</th>
                            <th class="px-2.5 py-1.5 text-right">Total</th>
                        </tr>
                    </thead>

                    <tbody>
                        @forelse($serviceItems as $line)
                            @php
                                $qty = (float) ($line['quantity'] ?? 1);
                                $sub = $line['subtotal'];
                                $vat = $line['vat'];
                                $total = $line['total'];
                              @endphp
                            <tr>
                                <td class="px-3 py-1 align-top">
                                    <div class="font-medium text-gray-900">{{ $line['name'] ?? '' }}</div>
                                    @if(!empty($line['note']))
                                        <div class="mt-0.5 text-[10px] text-gray-500">{{ $line['note'] }}</div>
                                    @endif
                                </td>
                                <td class="px-2.5 py-1 text-right align-top font-mono">{{ number_format($qty, 2) }}
                                </td>
                                <td class="px-2.5 py-1 text-right align-top font-mono">
                                    {{ $currency . number_format($sub, 2, '.', ' ') }}
                                </td>
                                <td class="px-2.5 py-1 text-right align-top font-mono">
                                    {{ $currency . number_format($vat, 2, '.', ' ') }}
                                </td>
                                <td class="px-2.5 py-1 text-right align-top font-mono">
                                    {{ $currency . number_format($total, 2, '.', ' ') }}
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="px-3 py-4 text-center text-gray-500">No items added.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </section>

            {{-- Banking + Totals (SCREEN) --}}
            @php $discount = $document->discount_total; @endphp
            <section class="mt-4 grid gap-5 sm:grid-cols-2">
                {{-- Banking --}}
                <div class="space-y-4">
                    <div class="rounded-2xl border border-dashed p-4" style="border-color: {{ $green2 }}33">
                        <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wider"
                            style="color: {{ $green2 }}">
                            Banking & Payment Information
                        </h3>
                        <div class="grid grid-cols-[140px_1fr] gap-y-1 text-sm">
                            <div class="text-gray-500">Account Name</div>
                            <div>{{ $document->issuer_bank_account_holder}}</div>
                            <div class="text-gray-500">Bank</div>
                            <div>{{ $document->issuer_bank_name }}</div>
                            <div class="text-gray-500">Account No</div>
                            <div class="font-mono">{{ $document->issuer_bank_account_number ?? '' }}</div>
                            <div class="text-gray-500">Branch Code</div>
                            <div class="font-mono">{{ $document->issuer_bank_branch_code }}</div>
                            <div class="text-gray-500">Type</div>
                            <div>{{ $document->issuer_bank_account_type }}</div>
                            <div class="text-gray-500">Terms</div>
                            <div>{{ $document->term_content }}</div>
                        </div>
                    </div>
                </div>

                {{-- Totals --}}
                <div class="rounded-2xl border border-gray-200 p-4">
                    <div class="flex items-center justify-between py-1 text-sm">
                        <span>Sub-Total</span><span
                            class="font-mono">{{ $currency . number_format($document->subtotal, 2, '.', ' ') }}</span>
                    </div>

                    <div class="flex items-center justify-between py-1 text-sm">
                        <span>Discount</span><span
                            class="font-mono">{{ $currency . number_format($document->discount_total, 2, '.', ' ') }}</span>
                    </div>

                    <div class="flex items-center justify-between py-1 text-sm">
                        <span>VAT {{ config('globalSettings.tax_rate') * 100 }} %</span><span
                            class="font-mono">{{ $currency . number_format($document->tax_total, 2, '.', ' ') }}</span>
                    </div>

                    @if ($document->document_type === \Modules\BookKeeping\Enums\DocumentType::INVOICE)
                        <div class="flex items-center justify-between py-1 text-sm">
                            <span>Paid</span>
                            <span class="font-mono">
                                {{ $currency . number_format($document->paid, 2, '.', ' ') }}
                            </span>
                        </div>
                    @endif

                    <div class="mt-2 border-t border-dashed pt-2 text-base font-semibold"
                        style="border-color: {{ $green1 }}40; color: {{ $green1 }}">
                        @if ($document->document_type === \Modules\BookKeeping\Enums\DocumentType::INVOICE)
                            <div class="flex items-center justify-between">
                                <span>Total Due</span>
                                <span
                                    class="font-mono">{{ $currency . number_format($document->balance - $document->paid, 2, '.', ' ') }}</span>
                            </div>
                        @elseif ($document->document_type === \Modules\BookKeeping\Enums\DocumentType::QUOTE)
                            <div class="flex items-center justify-between">
                                <span>Total Due</span>
                                <span
                                    class="font-mono">{{ $currency . number_format($document->total, 2, '.', ' ') }}</span>
                            </div>
                        @endif

                        @if(!empty($document->date_due))
                            <div class="mt-1 text-right text-xs text-gray-500">
                                {{$document->date_ui_string . ' ' . $document->date_due }}
                            </div>
                        @endif
                    </div>
                </div>
            </section>

            {{-- Screen footer / print button --}}
            <footer class="mt-6 flex flex-col justify-between gap-2 text-[11px] text-gray-500 sm:flex-row">
                <div>© {{ date('Y') }} {{ $document->issuer_display_name }} — All rights reserved.</div>
                <div class="font-mono">
                    {{ $document->issuer_registered_number ? "• REG: {$document->issuer_registered_number}" : '' }}
                    {{ $document->issuer_vat_number ? "• VAT: {$document->issuer_vat_number}" : '' }}
                </div>
            </footer>
        </div>
    </div>
</body>

</html>