@extends('layouts.aura-main')

@section('main-content')
<div class="max-w-5xl mx-auto pb-20 print:m-0 print:p-0">
    
    <div class="flex justify-between items-center mb-10 pb-6 border-b border-slate-200 print:hidden">
        <a href="{{ route('reports.statements.create') }}" class="text-[10px] font-black text-slate-400 uppercase tracking-widest hover:text-slate-600">
            &larr; Back to Selector
        </a>
        <div class="flex gap-3">
            <a href="{{ route('reports.statements.edit', $year) }}" class="px-4 py-2 border border-slate-300 text-[10px] font-black uppercase tracking-widest hover:bg-slate-50 transition">
                Edit Draft
            </a>
            <button onclick="window.print()" class="bg-indigo-600 text-white px-6 py-2 rounded-sm text-[10px] font-black uppercase tracking-widest shadow-md hover:bg-indigo-700 transition">
                Print / Save as PDF
            </button>
        </div>
    </div>

    <div class="bg-white p-16 shadow-sm border border-slate-200 print:shadow-none print:border-none print:p-0">
        
        <div class="mb-20">
            <h2 class="text-[14px] font-black text-slate-900 uppercase tracking-widest border-b-4 border-slate-900 pb-2 mb-10">01. Company Information</h2>
            
            <div class="space-y-8">
                <div class="grid grid-cols-4 gap-10">
                    <div class="text-[10px] font-black text-slate-400 uppercase">Board of Directors</div>
                    <div class="col-span-3 text-sm text-slate-800 prose prose-sm">{!! $data['report']['directors'] ?? '' !!}</div>
                </div>
                <div class="grid grid-cols-4 gap-10">
                    <div class="text-[10px] font-black text-slate-400 uppercase">Registered Office</div>
                    <div class="col-span-3 text-sm text-slate-800 font-bold">{!! $data['report']['office'] ?? '' !!}</div>
                </div>
                <div class="grid grid-cols-4 gap-10">
                    <div class="text-[10px] font-black text-slate-400 uppercase">Principal Bankers</div>
                    <div class="col-span-3 text-sm text-slate-800">{!! $data['report']['bankers'] ?? '' !!}</div>
                </div>
            </div>
        </div>

        <div class="mb-20 page-break-before">
            <h2 class="text-[14px] font-black text-slate-900 uppercase tracking-widest border-b-4 border-slate-900 pb-2 mb-10">02. Report of the Directors</h2>
            <div class="prose prose-slate max-w-none text-slate-700 leading-relaxed">
                {!! $data['report']['directors_report'] ?? '<p class="italic text-slate-400">No narrative report provided.</p>' !!}
            </div>

            <div class="mt-16 flex justify-between pt-10 border-t border-slate-100">
                <div class="text-center">
                    <div class="w-48 border-b border-slate-900 mb-2"></div>
                    <p class="text-[10px] font-black uppercase tracking-widest">Director</p>
                </div>
                <div class="text-center">
                    <div class="w-48 border-b border-slate-900 mb-2"></div>
                    <p class="text-[10px] font-black uppercase tracking-widest">Date</p>
                </div>
            </div>
        </div>

        <div class="mb-20 page-break-before">
            <h2 class="text-[14px] font-black text-slate-900 uppercase tracking-widest border-b-4 border-slate-900 pb-2 mb-10">03. Income Statement</h2>
            <table class="w-full text-sm">
                <tbody class="divide-y divide-slate-100">
                    <tr class="font-bold"><td class="py-4">Revenue</td><td class="py-4 text-right">{{ number_format($data['income_statement']['revenue'] ?? 0, 2) }}</td></tr>
                    <tr><td class="py-4">Cost of sales</td><td class="py-4 text-right">({{ number_format($data['income_statement']['cos'] ?? 0, 2) }})</td></tr>
                    <tr class="bg-slate-50 font-black border-y-2 border-slate-900"><td class="py-4 px-4">GROSS PROFIT</td><td class="py-4 px-4 text-right">{{ number_format($data['calculated']['gross_profit'] ?? 0, 2) }}</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<style>
@media print {
    .print\:hidden { display: none !important; }
    .page-break-before { page-break-before: always; }
    body { background: white !important; }
}
/* Style Quill-generated content */
.prose h3 { font-size: 1.1rem; font-weight: 800; text-transform: uppercase; margin-top: 2rem; color: #0f172a; }
.prose p { margin-bottom: 1rem; }
</style>
@endsection