@extends('layouts.portal')

@section('title', 'Preview: ' . $template->name)
@section('page_title', 'Template Preview')
@section('page_subtitle', $template->name . ' — rendered against a real sample record')

@section('sidebar')
    @include('admin.partials.sidebar', ['active' => 'templates'])
@endsection

@push('styles')
<style>
    .will-document {
        font-family: {{ $template->global_styles['page_font_family'] ?? "'Times New Roman', Times, serif" }};
        line-height: {{ $template->global_styles['line_height'] ?? '2' }};
        text-align: justify;
        font-size: {{ $template->global_styles['page_font_size'] ?? '12pt' }};
        background: white;
        padding: 40px;
        border: 1px solid #ccc;
        margin: 20px auto;
        max-width: 210mm;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    .will-header { text-align: center; margin-bottom: 30px; }
    .will-title { font-size: 24pt; font-weight: bold; letter-spacing: 3px; margin-bottom: 10px; }
    .clause-title { font-size: 18pt; font-weight: bold; text-align: center; margin: 20px 0; color: {{ $template->global_styles['heading_color'] ?? '#772B10' }}; }
    .will-content p { text-indent: 50px; margin: 10px 0; text-align: justify; }
    .signature-block { margin-top: 40px; border: 2px solid black; padding: 20px; }
    .witness-table { border-collapse: collapse; width: 100%; margin: 20px 0; font-size: 11pt; }
    .witness-table th, .witness-table td { border: 1px solid #000; padding: 8px; text-align: left; }
    .witness-table th { background-color: #f5f5f5; font-weight: bold; }
</style>
@endpush

@section('content')
    <div class="mb-4 flex items-center justify-between no-print">
        <a href="{{ route('admin.templates.edit', $template) }}" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 text-sm font-medium">
            <i class="fas fa-arrow-left mr-2"></i>Back to Editor
        </a>
        @if(!$sample)
            <span class="text-sm text-red-600">No sample record found for this document type — showing empty placeholders.</span>
        @endif
    </div>

    <div class="will-document">
        <div class="document-content">
            {!! $html !!}
        </div>
    </div>
@endsection