@extends('layouts.dashboard')

@section('title', trans('dashboard.inv_detail_title', ['number' => $invoice->invoice_number]))
@section('header_title', trans('dashboard.invoice_details'))

@php
    $typeValue = $invoice->type instanceof \App\Enums\InvoiceType ? $invoice->type->value : (string) $invoice->type;
    $isNote = in_array($typeValue, ['credit_note', 'debit_note'], true);
    $canIssueNotes = in_array($statusValue, ['cleared', 'reported'], true) && ! $isNote;
    $sellerAddress = array_filter([
        $seller['street'],
        $seller['building'] ? trans('dashboard.building_number').' '.$seller['building'] : null,
        $seller['district'],
        $seller['city'],
    ]);
    $buyerAddress = array_filter([$buyer['street'], $buyer['city']]);
    $statusBadge = match ($statusValue) {
        'cleared' => ['label' => trans('dashboard.cleared_by_zatca'), 'class' => 'text-emerald-700 dark:text-emerald-400', 'dot' => 'bg-emerald-600 dark:bg-emerald-400'],
        'reported' => ['label' => trans('dashboard.reported_to_zatca'), 'class' => 'text-sky-700 dark:text-sky-400', 'dot' => 'bg-sky-600 dark:bg-sky-400'],
        'rejected' => ['label' => trans('dashboard.rejected'), 'class' => 'text-rose-700 dark:text-rose-400', 'dot' => 'bg-rose-600 dark:bg-rose-400'],
        'pending' => ['label' => trans('dashboard.pending'), 'class' => 'text-blue-700 dark:text-blue-400', 'dot' => 'bg-blue-600 dark:bg-blue-400 animate-pulse'],
        'draft' => ['label' => trans('dashboard.draft'), 'class' => 'text-slate-600 dark:text-slate-400', 'dot' => 'bg-slate-500'],
        'failed' => ['label' => trans('dashboard.failed'), 'class' => 'text-amber-700 dark:text-amber-400', 'dot' => 'bg-amber-600 dark:bg-amber-400'],
        'cancelled' => ['label' => trans('dashboard.cancelled'), 'class' => 'text-slate-600 dark:text-slate-400', 'dot' => 'bg-slate-500'],
        default => ['label' => $invoice->status instanceof \App\Enums\InvoiceStatus ? $invoice->status->label() : trans('dashboard.no_data_available'), 'class' => 'text-amber-700 dark:text-amber-400', 'dot' => 'bg-amber-600 dark:bg-amber-400'],
    };
    $toneClass = fn (string $tone) => match ($tone) {
        'success' => 'bg-emerald-500',
        'danger' => 'bg-red-500',
        default => 'bg-slate-600',
    };
    $vatSummaryLabel = $vatRates->count() === 1
        ? trans('dashboard.vat_with_rate', ['rate' => rtrim(rtrim(number_format((float) $vatRates->first(), 2, '.', ''), '0'), '.')])
        : trans('dashboard.vat_amount');
@endphp

@push('styles')
<style>
    @media print {
        @page { size: A4; margin: 12mm; }
        body { background: #fff !important; }
        body * { visibility: hidden; }
        .invoice-print-root, .invoice-print-root * { visibility: visible; }
        .invoice-print-root {
            position: absolute;
            inset: 0;
            width: 210mm;
            max-width: 100%;
            background: #fff !important;
            color: #0f172a !important;
            box-shadow: none !important;
            border: none !important;
        }
        .no-print { display: none !important; }
    }
</style>
@endpush

@section('content')
<div class="max-w-7xl mx-auto space-y-4 text-xs">

    <div class="no-print flex flex-wrap items-center justify-between gap-3">
        <div class="flex items-center gap-2 flex-wrap">
            <a href="{{ route('dashboard.invoices.index') }}" class="text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white transition text-[11px]">
                {{ trans('dashboard.back_to_invoices') }}
            </a>
            <span class="text-slate-400 dark:text-slate-600">/</span>
            <a href="{{ route('dashboard.invoices.index') }}" class="text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white transition font-medium">
                {{ trans('dashboard.invoices_list') }}
            </a>
            <span class="text-slate-400 dark:text-slate-600">/</span>
            <span class="text-slate-900 dark:text-white font-bold font-mono text-[13px]" dir="ltr">{{ $invoice->invoice_number }}</span>
            <span class="inline-flex items-center gap-1.5 {{ $statusBadge['class'] }} font-bold text-xs">
                <span class="w-2 h-2 rounded-full {{ $statusBadge['dot'] }}"></span>
                {{ $statusBadge['label'] }}
            </span>
        </div>
        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] font-bold {{ $isProduction ? 'bg-emerald-50 dark:bg-emerald-500/10 text-emerald-800 dark:text-emerald-400 border border-emerald-300/80 dark:border-emerald-500/20' : 'bg-amber-50 dark:bg-amber-500/10 text-amber-900 dark:text-amber-400 border border-amber-300/80 dark:border-amber-500/20' }}">
            <span class="w-1.5 h-1.5 rounded-full {{ $isProduction ? 'bg-emerald-600 dark:bg-emerald-400' : 'bg-amber-600 dark:bg-amber-400' }}"></span>
            {{ $environmentLabel }}
        </span>
    </div>

    <div class="no-print flex flex-wrap items-center gap-2 p-3 rounded-2xl bg-white dark:bg-navy-900 border border-slate-200 dark:border-slate-800 shadow-sm">
        @if($canIssueNotes)
            <button type="button"
                    onclick="document.getElementById('cancel-modal').classList.remove('hidden')"
                    class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-rose-50 dark:bg-red-500/10 hover:bg-rose-100 dark:hover:bg-red-500/20 text-rose-700 dark:text-red-400 font-semibold transition border border-rose-200 dark:border-red-500/20 text-[11px]">
                {{ trans('dashboard.cancel_invoice') }}
            </button>
            <a href="{{ route('dashboard.invoices.create', ['type' => 'debit_note', 'original_invoice_uuid' => $invoice->uuid]) }}"
               class="inline-flex items-center px-3 py-1.5 rounded-xl bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-300 font-semibold transition border border-slate-200 dark:border-slate-700 text-[11px]">
                {{ trans('dashboard.debit_note') }}
            </a>
            <a href="{{ route('dashboard.invoices.create', ['type' => 'credit_note', 'original_invoice_uuid' => $invoice->uuid]) }}"
               class="inline-flex items-center px-3 py-1.5 rounded-xl bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-300 font-semibold transition border border-slate-200 dark:border-slate-700 text-[11px]">
                {{ trans('dashboard.credit_note') }}
            </a>
        @endif

        @if($statusValue === 'draft')
            <form method="POST" action="{{ route('dashboard.invoices.issue', $invoice->uuid) }}" class="inline">
                @csrf
                <button class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-emerald-600 hover:bg-emerald-700 text-white font-bold transition text-[11px] shadow-sm">
                    {{ trans('dashboard.issue_now') }}
                </button>
            </form>
        @endif

        <a href="{{ route('dashboard.invoices.create') }}"
           class="inline-flex items-center px-3 py-1.5 rounded-xl bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-300 font-semibold transition border border-slate-200 dark:border-slate-700 text-[11px]">
            {{ trans('dashboard.new_invoice') }}
        </a>

        <button type="button" onclick="window.print()"
                class="inline-flex items-center px-3 py-1.5 rounded-xl bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-300 font-semibold transition border border-slate-200 dark:border-slate-700 text-[11px]">
            {{ trans('dashboard.print') }}
        </button>

        @if(filled($invoice->signed_xml))
            <a href="{{ route('dashboard.invoices.xml', $invoice->uuid) }}"
               class="inline-flex items-center px-3 py-1.5 rounded-xl bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-300 font-semibold transition border border-slate-200 dark:border-slate-700 text-[11px]">
                {{ trans('dashboard.download_xml') }}
            </a>
        @endif

        <a href="{{ route('dashboard.invoices.pdf', $invoice->uuid) }}"
           class="inline-flex items-center px-3 py-1.5 rounded-xl bg-emerald-600 hover:bg-emerald-700 text-white font-bold transition text-[11px] shadow-sm">
            {{ trans('dashboard.download_pdf') }}
        </a>
    </div>

    @if($canIssueNotes)
        <div id="cancel-modal" class="no-print hidden fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
            <div class="bg-white dark:bg-navy-900 rounded-2xl shadow-2xl max-w-sm w-full p-6 text-center space-y-4">
                <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mx-auto text-red-500 text-2xl font-black">!</div>
                <h3 class="text-base font-black text-gray-900 dark:text-white">
                    {{ trans('dashboard.cancel_invoice_title', ['number' => $invoice->invoice_number]) }}
                </h3>
                <p class="text-sm text-gray-500 leading-relaxed">{{ trans('dashboard.cancel_invoice_desc') }}</p>
                <div class="flex gap-3 justify-center pt-2">
                    <button type="button"
                            onclick="document.getElementById('cancel-modal').classList.add('hidden')"
                            class="px-5 py-2 rounded-xl border border-gray-300 text-gray-700 dark:text-slate-200 dark:border-slate-700 font-semibold text-sm hover:bg-gray-50 dark:hover:bg-slate-800 transition">
                        {{ trans('dashboard.back') }}
                    </button>
                    <form method="POST" action="{{ route('dashboard.invoices.cancel', $invoice->uuid) }}">
                        @csrf
                        <button type="submit" class="px-5 py-2 rounded-xl bg-red-500 hover:bg-red-600 text-white font-bold text-sm transition">
                            {{ trans('dashboard.cancel_invoice_confirm') }}
                        </button>
                    </form>
                </div>
            </div>
        </div>
    @endif

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 items-start">
        <div class="lg:col-span-2 space-y-4">
            <div class="invoice-print-root rounded-2xl overflow-hidden bg-white border border-slate-200 shadow-sm text-slate-900">
                <div class="flex items-start justify-between gap-4 p-5 border-b border-slate-100">
                    <div class="shrink-0">
                        @if($qrPng)
                            <img src="{{ $qrPng }}" alt="{{ trans('dashboard.qr_code') }}" class="w-24 h-24 rounded-lg border border-slate-200"/>
                        @else
                            <div class="w-24 h-24 rounded-lg border border-dashed border-slate-300 flex items-center justify-center text-slate-400 text-[9px] text-center px-2">
                                {{ trans('dashboard.no_qr_code') }}
                            </div>
                        @endif
                    </div>
                    <div class="flex-1 min-w-0 text-end space-y-1">
                        <h2 class="text-lg font-black text-slate-900">{{ $typeLabel }}</h2>
                        <div class="text-slate-500 text-[11px] space-y-0.5">
                            <div>
                                <span>{{ trans('dashboard.invoice_number') }}:</span>
                                <span class="font-bold text-slate-700 font-mono ms-1" dir="ltr">{{ $invoice->invoice_number }}</span>
                            </div>
                            <div>
                                <span>{{ trans('dashboard.invoice_uuid') }}:</span>
                                <span class="font-mono ms-1 break-all" dir="ltr">{{ $invoice->uuid }}</span>
                            </div>
                            <div>
                                <span>{{ trans('dashboard.issue_date') }}:</span>
                                <span class="ms-1 font-mono" dir="ltr">{{ $issueDate ?? trans('dashboard.not_available') }}</span>
                                @if($supplyDate)
                                    <span class="ms-3">{{ trans('dashboard.supply_date') }}:</span>
                                    <span class="ms-1 font-mono" dir="ltr">{{ $supplyDate }}</span>
                                @endif
                                @if($dueDate)
                                    <span class="ms-3">{{ trans('dashboard.due_date') }}:</span>
                                    <span class="ms-1 font-mono" dir="ltr">{{ $dueDate }}</span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-0 border-b border-slate-100">
                    <div class="p-4 sm:border-e border-slate-100">
                        <p class="text-[9px] text-slate-400 uppercase tracking-wide mb-1">{{ trans('dashboard.buyer') }}</p>
                        <p class="font-bold text-slate-800 text-sm mb-1">{{ $buyer['name'] }}</p>
                        @if($buyer['vat'])
                            <p class="text-[10px] text-slate-500">{{ trans('dashboard.vat_registration_number') }}: <span class="font-mono" dir="ltr">{{ $buyer['vat'] }}</span></p>
                        @endif
                        @if($buyer['cr'])
                            <p class="text-[10px] text-slate-500">{{ trans('dashboard.commercial_registration_number') }}: <span class="font-mono" dir="ltr">{{ $buyer['cr'] }}</span></p>
                        @endif
                        @if($buyerAddress)
                            <p class="text-[10px] text-slate-500 mt-0.5">{{ implode(' - ', $buyerAddress) }}</p>
                        @endif
                        @if($buyer['postal_code'])
                            <p class="text-[10px] text-slate-500">{{ trans('dashboard.postal_code') }}: <span class="font-mono" dir="ltr">{{ $buyer['postal_code'] }}</span></p>
                        @endif
                    </div>
                    <div class="p-4">
                        <p class="text-[9px] text-slate-400 uppercase tracking-wide mb-1">{{ trans('dashboard.seller') }}</p>
                        <p class="font-bold text-slate-800 text-sm mb-1">{{ $seller['name'] }}</p>
                        @if($seller['vat'])
                            <p class="text-[10px] text-slate-500">{{ trans('dashboard.vat_registration_number') }}: <span class="font-mono" dir="ltr">{{ $seller['vat'] }}</span></p>
                        @endif
                        @if($seller['cr'])
                            <p class="text-[10px] text-slate-500">{{ trans('dashboard.commercial_registration_number') }}: <span class="font-mono" dir="ltr">{{ $seller['cr'] }}</span></p>
                        @endif
                        @if($sellerAddress)
                            <p class="text-[10px] text-slate-500 mt-0.5">{{ implode(' - ', $sellerAddress) }}</p>
                        @endif
                        @if($seller['postal_code'])
                            <p class="text-[10px] text-slate-500">{{ trans('dashboard.postal_code') }}: <span class="font-mono" dir="ltr">{{ $seller['postal_code'] }}</span></p>
                        @endif
                    </div>
                </div>

                <div class="overflow-x-auto">
                    <table class="w-full text-[11px]">
                        <thead class="bg-slate-50 text-slate-500">
                            <tr>
                                <th class="px-3 py-2.5 text-start font-semibold">{{ trans('dashboard.description') }}</th>
                                <th class="px-3 py-2.5 text-center font-semibold">{{ trans('dashboard.quantity') }}</th>
                                <th class="px-3 py-2.5 text-center font-semibold">{{ trans('dashboard.unit_price') }}</th>
                                <th class="px-3 py-2.5 text-center font-semibold">{{ trans('dashboard.discount') }}</th>
                                <th class="px-3 py-2.5 text-end font-semibold">{{ trans('dashboard.taxable_amount') }}</th>
                                <th class="px-3 py-2.5 text-center font-semibold">{{ trans('dashboard.vat_rate') }}</th>
                                <th class="px-3 py-2.5 text-end font-semibold">{{ trans('dashboard.vat_amount') }}</th>
                                <th class="px-3 py-2.5 text-end font-semibold">{{ trans('dashboard.total_including_vat') }}</th>
                            </tr>
                        </thead>
                        <tbody class="text-slate-700 divide-y divide-slate-100">
                            @forelse($lineRows as $line)
                                <tr>
                                    <td class="px-3 py-2.5 text-start">{{ $line['name'] }}</td>
                                    <td class="px-3 py-2.5 text-center font-mono" dir="ltr">{{ $line['quantity'] }}</td>
                                    <td class="px-3 py-2.5 text-center font-mono" dir="ltr">{{ number_format($line['unit_price'], 2) }}</td>
                                    <td class="px-3 py-2.5 text-center font-mono" dir="ltr">{{ number_format($line['discount'], 2) }}</td>
                                    <td class="px-3 py-2.5 text-end font-mono" dir="ltr">{{ number_format($line['taxable'], 2) }}</td>
                                    <td class="px-3 py-2.5 text-center font-mono" dir="ltr">{{ number_format($line['vat_rate'], 0) }}%</td>
                                    <td class="px-3 py-2.5 text-end font-mono" dir="ltr">{{ number_format($line['vat_amount'], 2) }}</td>
                                    <td class="px-3 py-2.5 text-end font-medium font-mono" dir="ltr">{{ number_format($line['total'], 2) }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8" class="px-3 py-6 text-center text-slate-400">{{ trans('dashboard.no_line_items') }}</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <div class="border-t border-slate-100 px-4 py-4">
                    <div class="flex justify-end">
                        <div class="w-72 space-y-1.5 text-[11px]">
                            <div class="flex justify-between text-slate-500 dark:text-slate-400">
                                <span>{{ trans('dashboard.total_before_vat') }}</span>
                                <span class="font-semibold text-slate-700 dark:text-slate-300 font-mono inline-flex items-center gap-1" dir="ltr">
                                    <x-currency-symbol :currency="$invoice->currency" class="w-[0.9em] h-[0.9em] text-slate-400" />
                                    <span>{{ number_format($invoice->subtotal, 2) }}</span>
                                </span>
                            </div>
                            <div class="flex justify-between text-slate-500 dark:text-slate-400">
                                <span>{{ $vatSummaryLabel }}</span>
                                <span class="font-semibold text-slate-700 dark:text-slate-300 font-mono inline-flex items-center gap-1" dir="ltr">
                                    <x-currency-symbol :currency="$invoice->currency" class="w-[0.9em] h-[0.9em] text-slate-400" />
                                    <span>{{ number_format($invoice->vat_amount, 2) }}</span>
                                </span>
                            </div>
                            <div class="flex justify-between pt-1.5 border-t border-slate-200 dark:border-slate-800 text-slate-900 dark:text-white font-black text-sm">
                                <span>{{ trans('dashboard.total_including_vat') }}</span>
                                <span class="font-mono inline-flex items-center gap-1.5" dir="ltr">
                                    <x-currency-symbol :currency="$invoice->currency" class="w-[1.1em] h-[1.1em]" />
                                    <span>{{ number_format($invoice->total, 2) }}</span>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="no-print space-y-4">
            <div class="p-4 rounded-2xl bg-navy-900 border border-slate-800">
                <h3 class="text-[11px] font-bold text-white mb-4">{{ trans('dashboard.invoice_timeline') }}</h3>
                @if($timelineEvents === [])
                    <p class="text-slate-500 text-[11px]">{{ trans('dashboard.no_data_available') }}</p>
                @else
                    <ol class="relative border-s border-slate-700 space-y-4 ms-2">
                        @foreach($timelineEvents as $event)
                            <li class="ms-4">
                                <span class="absolute -start-1.5 flex h-3 w-3 items-center justify-center rounded-full {{ $toneClass($event['tone']) }} ring-4 ring-navy-900"></span>
                                <p class="font-semibold text-[11px] {{ $event['tone'] === 'danger' ? 'text-red-400' : ($event['tone'] === 'success' ? 'text-emerald-400' : 'text-slate-300') }}">
                                    {{ $event['label'] }}
                                </p>
                                @if($event['at'])
                                    <p class="text-slate-500 text-[10px] font-mono" dir="ltr">{{ $event['at'] }}</p>
                                @endif
                            </li>
                        @endforeach
                    </ol>
                @endif
            </div>

            <div class="p-4 rounded-2xl bg-navy-900 border border-slate-800 space-y-3" x-data="{ copied: '' }">
                <h3 class="text-[11px] font-bold text-white">{{ trans('dashboard.zatca_information') }}</h3>

                @foreach([
                    ['label' => trans('dashboard.invoice_uuid'), 'value' => $invoice->uuid],
                    ['label' => trans('dashboard.invoice_hash'), 'value' => $invoice->invoice_hash],
                    ['label' => trans('dashboard.previous_invoice_hash'), 'value' => $invoice->previous_invoice_hash],
                ] as $copyRow)
                    <div class="flex flex-col gap-0.5">
                        <span class="text-slate-500 text-[9px] uppercase tracking-wide">{{ $copyRow['label'] }}</span>
                        @if(filled($copyRow['value']))
                            <div class="flex items-center gap-2 p-2 rounded-lg bg-navy-950 border border-slate-800">
                                <span class="font-mono text-[10px] text-slate-300 truncate" dir="ltr" title="{{ $copyRow['value'] }}">{{ $copyRow['value'] }}</span>
                                <button type="button"
                                        class="shrink-0 text-slate-400 hover:text-white text-[10px]"
                                        x-on:click="navigator.clipboard.writeText({{ \Illuminate\Support\Js::from($copyRow['value']) }}).then(() => { copied = {{ \Illuminate\Support\Js::from($copyRow['label']) }}; setTimeout(() => copied = '', 1500) })">
                                    <span x-show="copied !== {{ \Illuminate\Support\Js::from($copyRow['label']) }}">{{ trans('dashboard.copy') }}</span>
                                    <span x-cloak x-show="copied === {{ \Illuminate\Support\Js::from($copyRow['label']) }}">{{ trans('dashboard.copied_successfully') }}</span>
                                </button>
                            </div>
                        @else
                            <span class="text-slate-500 text-[11px]">{{ trans('dashboard.not_available') }}</span>
                        @endif
                    </div>
                @endforeach

                <div class="flex flex-col gap-0.5">
                    <span class="text-slate-500 text-[9px] uppercase tracking-wide">{{ trans('dashboard.invoice_counter_value') }}</span>
                    <span class="font-mono text-[11px] text-slate-300" dir="ltr">{{ is_null($invoice->invoice_counter) ? trans('dashboard.not_available') : $invoice->invoice_counter }}</span>
                </div>
                <div class="flex flex-col gap-0.5">
                    <span class="text-slate-500 text-[9px] uppercase tracking-wide">{{ trans('dashboard.submission_type') }}</span>
                    <span class="text-slate-300 text-[11px]">{{ $submissionType }}</span>
                </div>
                <div class="flex flex-col gap-0.5">
                    <span class="text-slate-500 text-[9px] uppercase tracking-wide">{{ trans('dashboard.zatca_status') }}</span>
                    <span class="font-semibold text-[11px] {{ $statusBadge['class'] }}">{{ $statusBadge['label'] }}</span>
                </div>

                @if($invoice->originalInvoice)
                    <div class="flex flex-col gap-0.5 pt-1 border-t border-slate-800">
                        <span class="text-slate-500 text-[9px] uppercase tracking-wide">{{ trans('dashboard.original_invoice') }}</span>
                        <a href="{{ route('dashboard.invoices.show', $invoice->originalInvoice->uuid) }}"
                           class="text-brand-400 hover:text-brand-300 transition font-mono text-[10px]" dir="ltr">
                            {{ $invoice->originalInvoice->invoice_number }}
                        </a>
                    </div>
                @endif

                @if($validationErrors !== [])
                    <div class="p-2.5 rounded-lg bg-red-500/10 border border-red-500/20 text-red-300 text-[11px] space-y-1">
                        <span class="font-bold block">{{ trans('dashboard.validation_errors') }}</span>
                        <ul class="list-disc list-inside space-y-0.5">
                            @foreach($validationErrors as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                @if($validationWarnings !== [])
                    <div class="p-2.5 rounded-lg bg-amber-500/10 border border-amber-500/20 text-amber-300 text-[11px] space-y-1">
                        <span class="font-bold block">{{ trans('dashboard.validation_warnings') }}</span>
                        <ul class="list-disc list-inside space-y-0.5">
                            @foreach($validationWarnings as $warning)
                                <li>{{ $warning }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
            </div>

            <div class="p-4 rounded-2xl bg-navy-900 border border-slate-800">
                <h3 class="text-[11px] font-bold text-white mb-3">{{ trans('dashboard.related_documents') }}</h3>
                @if($relatedDocuments->isEmpty() && ! $invoice->originalInvoice)
                    <p class="text-slate-500 text-[11px]">{{ trans('dashboard.no_related_documents') }}</p>
                @else
                    <ul class="space-y-2">
                        @if($invoice->originalInvoice)
                            <li class="flex items-center justify-between gap-2 py-1.5 border-b border-slate-800">
                                <div>
                                    <a href="{{ route('dashboard.invoices.show', $invoice->originalInvoice->uuid) }}"
                                       class="text-brand-400 hover:text-brand-300 transition font-mono text-[10px] block font-bold" dir="ltr">
                                        {{ $invoice->originalInvoice->invoice_number }}
                                    </a>
                                    <span class="text-slate-500 text-[10px]">{{ trans('dashboard.original_invoice') }}</span>
                                </div>
                            </li>
                        @endif
                        @foreach($relatedDocuments as $document)
                            @php
                                $documentStatus = $document->status instanceof \App\Enums\InvoiceStatus ? $document->status : \App\Enums\InvoiceStatus::tryFrom((string) $document->status);
                                $documentType = $document->type instanceof \App\Enums\InvoiceType ? $document->type : \App\Enums\InvoiceType::tryFrom((string) $document->type);
                            @endphp
                            <li class="flex items-center justify-between gap-2 py-1.5 border-b border-slate-800 last:border-0">
                                <div>
                                    <a href="{{ route('dashboard.invoices.show', $document->uuid) }}"
                                       class="text-brand-400 hover:text-brand-300 transition font-mono text-[10px] block font-bold" dir="ltr">
                                        {{ $document->invoice_number }}
                                    </a>
                                    <span class="text-slate-500 text-[10px]">{{ $documentType?->label() ?? trans('dashboard.related_documents') }}</span>
                                </div>
                                <span class="px-2 py-0.5 rounded-full bg-slate-700 text-slate-300 font-bold text-[9px]">
                                    {{ $documentStatus?->label() ?? trans('dashboard.no_data_available') }}
                                </span>
                            </li>
                        @endforeach
                    </ul>
                @endif
            </div>
        </div>
    <div class="hidden" aria-hidden="true">
        <iframe src="{{ route('dashboard.invoices.preview', $invoice->uuid) }}" title="{{ trans('dashboard.invoice_details') }}"></iframe>
    </div>
</div>
@endsection