<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>بيان الصفحات - {{ $settings['site_name'] ?? 'Ledger' }}</title>
    
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    @if(isset($settings['font_print']) && $settings['font_print'])
        <link href="https://fonts.googleapis.com/css2?family={{ str_replace(' ', '+', $settings['font_print']) }}:wght@400;500;700;900&display=swap" rel="stylesheet">
    @else
        <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap" rel="stylesheet">
    @endif
    
    <!-- Tailwind -->
    @vite(['resources/css/app.css'])
    
    <style>
        body {
            font-family: '{{ $settings['font_print'] ?? 'Tajawal' }}', sans-serif;
            background-color: #f8fafc;
            color: #0f172a;
        }
        
        .print-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
            background: white;
            min-height: 100vh;
            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
        }

        table {
            border-collapse: collapse;
            width: 100%;
        }
        
        @media print {
            body { background: white; }
            .print-container { box-shadow: none; padding: 0; margin: 0; max-width: 100%; min-height: auto; }
            .no-print { display: none !important; }
            @page { margin: 1cm; size: landscape; }
            
            tr { page-break-inside: avoid; }
            thead { display: table-header-group; }
            tfoot { display: table-footer-group; }
            
            * {
                -webkit-print-color-adjust: exact !important;
                color-adjust: exact !important;
                print-color-adjust: exact !important;
            }
        }
    </style>
</head>
<body>

    <!-- Print Toolbar -->
    <div class="no-print bg-slate-800 text-white p-4 sticky top-0 z-50 flex justify-between items-center shadow-lg">
        <div class="font-bold">خيارات التقرير</div>
        <div class="flex gap-2">
            <button onclick="window.print()" class="bg-indigo-600 hover:bg-indigo-500 text-white px-4 py-2 rounded shadow font-bold text-sm flex items-center gap-2">
                <span>🖨️ طباعة / PDF</span>
            </button>
            <button onclick="window.close()" class="bg-slate-600 hover:bg-slate-500 text-white px-4 py-2 rounded shadow font-bold text-sm flex items-center gap-2">
                <span>إغلاق</span>
            </button>
        </div>
    </div>

    <div class="print-container">
        
        <!-- HEADER -->
        <div class="border-b-2 border-indigo-900 pb-6 mb-6 flex justify-between items-start">
            <div class="space-y-1">
                <h1 class="text-xl font-black text-indigo-900 mb-2">{{ $settings['site_name'] ?? 'اسم الشركة' }}</h1>
            </div>
            
            <div class="text-left space-y-1">
                <h2 class="text-lg font-black text-slate-800 mb-2">بيان الصفحات</h2>
                @if($ledgerName) <div class="text-xs font-bold text-slate-700">الدفتر: <span class="text-indigo-700">{{ $ledgerName }}</span></div> @endif
                @if($partyName) <div class="text-xs font-bold text-slate-700">الطرف: <span class="text-indigo-700">{{ $partyName }}</span></div> @endif
                <div class="text-xs font-bold text-slate-700 mt-1">تاريخ الطباعة: <span dir="ltr">{{ now()->format('Y-m-d H:i') }}</span></div>
            </div>
        </div>

        <!-- TABLE -->
        <table class="w-full text-right text-[11px] mb-8 border-collapse">
            <thead class="bg-indigo-50 text-indigo-900" style="border-bottom: 2px solid #c7d2fe;">
                <tr>
                    <th class="px-2 py-3 font-bold text-center w-10 border border-slate-200">#</th>
                    @if(isset($columns['ledger'])) <th class="px-2 py-3 font-bold border border-slate-200">الدفتر</th> @endif
                    @if(isset($columns['page_number'])) <th class="px-2 py-3 font-bold border border-slate-200">رقم الصفحة</th> @endif
                    @if(isset($columns['code'])) <th class="px-2 py-3 font-bold border border-slate-200">الرمز</th> @endif
                    @if(isset($columns['name'])) <th class="px-2 py-3 font-bold border border-slate-200">الاسم</th> @endif
                    @if(isset($columns['debit_account'])) <th class="px-2 py-3 font-bold border border-slate-200">الحساب المدين</th> @endif
                    @if(isset($columns['credit_account'])) <th class="px-2 py-3 font-bold border border-slate-200">الحساب الدائن</th> @endif
                    @if(isset($columns['description'])) <th class="px-2 py-3 font-bold border border-slate-200">الوصف</th> @endif
                    @if(isset($columns['is_active'])) <th class="px-2 py-3 font-bold border border-slate-200 text-center">الحالة</th> @endif
                    @if(isset($columns['created_at'])) <th class="px-2 py-3 font-bold border border-slate-200">تاريخ الإضافة</th> @endif
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-200">
                @forelse($pages as $index => $page)
                <tr class="font-bold text-slate-900 {{ $index % 2 == 0 ? 'bg-white' : 'bg-slate-50' }}">
                    <td class="px-2 py-2 text-center border border-slate-200 text-slate-500">{{ $index + 1 }}</td>
                    @if(isset($columns['ledger'])) <td class="px-2 py-2 border border-slate-200">{{ $page->ledger->name ?? '-' }}</td> @endif
                    @if(isset($columns['page_number'])) <td class="px-2 py-2 border border-slate-200 text-indigo-700" dir="ltr">{{ $page->page_number }}</td> @endif
                    @if(isset($columns['code'])) <td class="px-2 py-2 border border-slate-200 text-slate-700" dir="ltr">{{ $page->code }}</td> @endif
                    @if(isset($columns['name'])) <td class="px-2 py-2 border border-slate-200">{{ $page->name }}</td> @endif
                    @if(isset($columns['debit_account'])) <td class="px-2 py-2 border border-slate-200">{{ $page->debitAccount->name ?? '-' }}</td> @endif
                    @if(isset($columns['credit_account'])) <td class="px-2 py-2 border border-slate-200">{{ $page->creditAccount->name ?? '-' }}</td> @endif
                    @if(isset($columns['description'])) <td class="px-2 py-2 border border-slate-200 text-slate-600">{{ $page->description ?: '-' }}</td> @endif
                    @if(isset($columns['is_active'])) 
                        <td class="px-2 py-2 border border-slate-200 text-center">
                            @if($page->is_active)
                                <span class="text-emerald-700 font-bold">نشط</span>
                            @else
                                <span class="text-red-700 font-bold">غير نشط</span>
                            @endif
                        </td> 
                    @endif
                    @if(isset($columns['created_at'])) <td class="px-2 py-2 border border-slate-200 text-slate-600" dir="ltr">{{ $page->created_at->format('Y-m-d') }}</td> @endif
                </tr>
                @empty
                <tr>
                    <td colspan="20" class="px-4 py-8 text-center text-slate-500 font-bold border border-slate-200">لا يوجد صفحات مسجلة بعد.</td>
                </tr>
                @endforelse
            </tbody>
        </table>

    </div>

</body>
</html>
