@extends('layouts.portal')

@section('title', 'Formal Document - ' . ($will ? 'Will #' . $will->id : 'Trust #' . $trust->id))
@section('page_title', 'Formal Document Preview')
@section('page_subtitle', ($will ? 'Last Will and Testament' : 'Trust Document') . ' - Admin Review')

@section('sidebar')
    @include('admin.partials.sidebar', ['active' => ($will ? 'wills' : 'trusts')])
@endsection

@push('styles')
<style>
    @media print {
        body * {
            visibility: hidden;
        }
        
        .formal-document, .formal-document * {
            visibility: visible;
        }
        
        .formal-document {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            box-shadow: none !important;
            margin: 0 !important;
            padding: 0 !important;
        }
        
        @page {
            margin: 1in;
            size: A4;
        }
        
        .no-print {
            display: none !important;
        }
    }
    
    .formal-document {
        font-family: 'Times New Roman', Times, serif;
        line-height: 2;
        text-align: justify;
        font-size: 12pt;
        background: white;
        padding: 40px;
        border: 1px solid #ccc;
        margin: 20px auto;
        max-width: 210mm;
        min-height: 297mm;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    .document-header {
        text-align: center;
        margin-bottom: 30px;
    }
    
    .document-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;
    }

    .watermark {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-45deg);
        font-size: 150px;
        opacity: 0.08;
        color: #000;
        pointer-events: none;
        z-index: 1;
        font-weight: bold;
    }

    .document-content {
        position: relative;
        z-index: 2;
    }

    .signature-line {
        border-bottom: 1px solid #000;
        display: inline-block;
        width: 200px;
        margin-bottom: 5px;
    }
    
    .document-content p {
        text-indent: 50px;
        margin: 10px 0;
        text-align: justify;
    }
    
    .signature-block {
        margin-top: 40px;
        border: 2px solid black;
        padding: 20px;
    }
    
    .info-table {
        border-collapse: collapse;
        width: 100%;
        margin: 20px 0;
        font-size: 11pt;
    }
    
    .info-table th,
    .info-table td {
        border: 1px solid #000;
        padding: 8px;
        text-align: left;
    }
    
    .info-table th {
        background-color: #f5f5f5;
        font-weight: bold;
    }
</style>
@endpush

@section('content')
<div class="p-4">
    <!-- Header Card -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 mb-6 no-print">
        <div class="p-6">
            <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
                <!-- Left: Document Info -->
                <div class="flex items-start gap-4">
                    <div class="w-12 h-12 bg-gradient-to-br from-[#772B10] to-[#8B3D15] rounded-xl flex items-center justify-center text-white shadow-lg">
                        <i class="fas fa-file-alt text-xl"></i>
                    </div>
                    <div>
                        <div class="flex items-center gap-3 mb-1">
                            <h1 class="text-xl font-bold text-gray-800">
                                {{ ($will ? 'Will' : 'Trust') }} Formal Document #{{ ($will ? $will->id : $trust->id) }}
                            </h1>
                            <span class="px-3 py-1 rounded-full text-xs font-semibold 
                                {{ ($will ? $will->status : $trust->status) === 'completed' ? 'bg-green-100 text-green-800' : 
                                   (($will ? $will->status : $trust->status) === 'pending_approval' ? 'bg-yellow-100 text-yellow-800' : 
                                   (($will ? $will->status : $trust->status) === 'drafting' ? 'bg-blue-100 text-blue-800' : 'bg-gray-100 text-gray-800')) }}">
                                <i class="fas fa-circle text-[8px] mr-1"></i>{{ ucfirst(str_replace('_', ' ', ($will ? $will->status : $trust->status))) }}
                            </span>
                        </div>
                        <div class="flex items-center gap-4 text-sm text-gray-500">
                            <span class="flex items-center gap-1">
                                <i class="fas fa-user text-gray-400"></i>
                                {{ ($will ? $will->client->first_name . ' ' . $will->client->last_name : $trust->client->first_name . ' ' . $trust->client->last_name) ?? 'Unknown' }}
                            </span>
                            <span class="flex items-center gap-1">
                                <i class="fas fa-calendar text-gray-400"></i>
                                {{ ($will ? $will->created_at->format('M d, Y') : $trust->created_at->format('M d, Y')) }}
                            </span>
                        </div>
                    </div>
                </div>

                <!-- Right: Action Buttons -->
                <div class="flex flex-wrap items-center gap-2">
                    @if($will)
                        <a href="{{ route('admin.wills') }}" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition flex items-center text-sm font-medium">
                            <i class="fas fa-arrow-left mr-2"></i> Back to Wills
                        </a>
                    @else
                        <a href="{{ route('admin.trusts') }}" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition flex items-center text-sm font-medium">
                            <i class="fas fa-arrow-left mr-2"></i> Back to Trusts
                        </a>
                    @endif
                    <button onclick="window.print()" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition flex items-center text-sm font-medium">
                        <i class="fas fa-print mr-2"></i> Print
                    </button>
                    <button onclick="downloadPDF()" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition flex items-center text-sm font-medium">
                        <i class="fas fa-file-pdf mr-2"></i> Download PDF
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Formal Document -->
    <div class="formal-document" id="formalDocument">
        <div class="watermark">SAMPLE</div>
        <div class="document-content">
            {!! $renderedDocument !!}
        </div>
    </div>
</div>

<script>
function downloadPDF() {
    const element = document.getElementById('formalDocument');
    const opt = {
        margin: 10,
        filename: 'formal-document.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { orientation: 'portrait', unit: 'mm', format: 'a4' }
    };
    html2pdf().set(opt).save();
}
</script>
@endsection