<div>
    <div class="max-w-4xl mx-auto">
        <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6 sm:p-8">
            <div class="mb-8">
                <h1 class="text-2xl font-black text-slate-800">كشف الحساب المجمع</h1>
                <p class="text-sm text-slate-500 mt-2">عرض تقارير وكشوف حسابات لعدة صفحات معاً مدمجة أو منفصلة.</p>
            </div>

            <!-- Entity Selection (Header) -->
            <div class="mb-8 p-4 bg-indigo-50/50 rounded-xl border border-indigo-100">
                <div x-data="{
                    open: false, search: '', selected: <?php if ((object) ('header_entity_id') instanceof \Livewire\WireDirective) : ?>window.Livewire.find('<?php echo e($__livewire->getId()); ?>').entangle('<?php echo e('header_entity_id'->value()); ?>')<?php echo e('header_entity_id'->hasModifier('live') ? '.live' : ''); ?><?php else : ?>window.Livewire.find('<?php echo e($__livewire->getId()); ?>').entangle('<?php echo e('header_entity_id'); ?>')<?php endif; ?>.live,
                    options: <?php echo e(Js::from($entities->map(fn($e) => ['id' => $e->id, 'name' => $e->name]))); ?>,
                    get filteredOptions() { return this.search === '' ? this.options : this.options.filter(o => o.name.includes(this.search)); },
                    get selectedName() { let opt = this.options.find(o => o.id == this.selected); return opt ? opt.name : 'الافتراضي (حسب النظام)'; }
                }" @click.away="open = false" class="relative z-50 max-w-md">
                    <label class="block text-sm font-bold text-indigo-900 mb-2">الكيان المراد إظهاره في الترويسة بدل اسم النظام</label>
                    <button @click="open = !open" type="button" class="w-full text-right bg-white border border-indigo-200 rounded-xl px-4 py-2.5 text-sm focus:ring-indigo-500 focus:border-indigo-500 flex items-center justify-between">
                        <span x-text="selectedName" class="text-indigo-800 font-bold"></span>
                        <svg class="w-4 h-4 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                    </button>
                    <div x-show="open" x-cloak class="absolute w-full mt-1 bg-white border border-slate-200 rounded-xl shadow-xl overflow-hidden" style="display: none;">
                        <div class="p-2 border-b border-slate-100 bg-slate-50"><input type="text" x-model="search" placeholder="بحث..." class="w-full border-slate-200 rounded-lg text-sm py-1.5 px-3 focus:ring-indigo-500 focus:border-indigo-500"></div>
                        <ul class="max-h-48 overflow-y-auto py-1">
                            <li @click="selected = ''; open = false; search = ''" class="px-4 py-2 text-sm cursor-pointer hover:bg-slate-50" :class="selected == '' ? 'bg-indigo-50 text-indigo-700 font-bold' : 'text-slate-700'">الافتراضي (حسب النظام)</li>
                            <template x-for="option in filteredOptions" :key="option.id">
                                <li @click="selected = option.id; open = false; search = ''" class="px-4 py-2 text-sm cursor-pointer hover:bg-slate-50" :class="selected == option.id ? 'bg-indigo-50 text-indigo-700 font-bold' : 'text-slate-700'"><span x-text="option.name"></span></li>
                            </template>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                <!-- Party Selection -->
                <div x-data="{
                    open: false, search: '', selected: <?php if ((object) ('party_id') instanceof \Livewire\WireDirective) : ?>window.Livewire.find('<?php echo e($__livewire->getId()); ?>').entangle('<?php echo e('party_id'->value()); ?>')<?php echo e('party_id'->hasModifier('live') ? '.live' : ''); ?><?php else : ?>window.Livewire.find('<?php echo e($__livewire->getId()); ?>').entangle('<?php echo e('party_id'); ?>')<?php endif; ?>.live,
                    options: <?php echo e(Js::from($parties->map(fn($p) => ['id' => $p->id, 'name' => $p->name]))); ?>,
                    get filteredOptions() { return this.search === '' ? this.options : this.options.filter(o => o.name.includes(this.search)); },
                    get selectedName() { let opt = this.options.find(o => o.id == this.selected); return opt ? opt.name : 'اختر الطرف...'; }
                }" @click.away="open = false" class="relative z-40">
                    <label class="block text-sm font-bold text-slate-700 mb-2">الطرف (اختياري)</label>
                    <button @click="open = !open" type="button" class="w-full text-right bg-slate-50 border border-slate-200 rounded-xl px-4 py-2.5 text-sm focus:ring-indigo-500 focus:border-indigo-500 flex items-center justify-between">
                        <span x-text="selectedName" class="text-slate-700 font-bold"></span>
                        <svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                    </button>
                    <div x-show="open" x-cloak class="absolute w-full mt-1 bg-white border border-slate-200 rounded-xl shadow-xl overflow-hidden" style="display: none;">
                        <div class="p-2 border-b border-slate-100 bg-slate-50"><input type="text" x-model="search" placeholder="بحث..." class="w-full border-slate-200 rounded-lg text-sm py-1.5 px-3 focus:ring-indigo-500 focus:border-indigo-500"></div>
                        <ul class="max-h-48 overflow-y-auto py-1">
                            <li @click="selected = ''; open = false; search = ''" class="px-4 py-2 text-sm cursor-pointer hover:bg-slate-50" :class="selected == '' ? 'bg-indigo-50 text-indigo-700 font-bold' : 'text-slate-700'">الكل</li>
                            <template x-for="option in filteredOptions" :key="option.id">
                                <li @click="selected = option.id; open = false; search = ''" class="px-4 py-2 text-sm cursor-pointer hover:bg-slate-50" :class="selected == option.id ? 'bg-indigo-50 text-indigo-700 font-bold' : 'text-slate-700'"><span x-text="option.name"></span></li>
                            </template>
                        </ul>
                    </div>
                </div>

                <!-- Account Selection -->
                <div x-data="{
                    open: false, search: '', selected: <?php if ((object) ('account_id') instanceof \Livewire\WireDirective) : ?>window.Livewire.find('<?php echo e($__livewire->getId()); ?>').entangle('<?php echo e('account_id'->value()); ?>')<?php echo e('account_id'->hasModifier('live') ? '.live' : ''); ?><?php else : ?>window.Livewire.find('<?php echo e($__livewire->getId()); ?>').entangle('<?php echo e('account_id'); ?>')<?php endif; ?>.live,
                    options: <?php echo e(Js::from($accounts->map(fn($a) => ['id' => $a->id, 'name' => $a->name]))); ?>,
                    get filteredOptions() { return this.search === '' ? this.options : this.options.filter(o => o.name.includes(this.search)); },
                    get selectedName() { let opt = this.options.find(o => o.id == this.selected); return opt ? opt.name : 'اختر الحساب...'; }
                }" @click.away="open = false" class="relative z-30">
                    <label class="block text-sm font-bold text-slate-700 mb-2">الحساب (اختياري)</label>
                    <button @click="open = !open" type="button" class="w-full text-right bg-slate-50 border border-slate-200 rounded-xl px-4 py-2.5 text-sm focus:ring-indigo-500 focus:border-indigo-500 flex items-center justify-between">
                        <span x-text="selectedName" class="text-slate-700 font-bold"></span>
                        <svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                    </button>
                    <div x-show="open" x-cloak class="absolute w-full mt-1 bg-white border border-slate-200 rounded-xl shadow-xl overflow-hidden" style="display: none;">
                        <div class="p-2 border-b border-slate-100 bg-slate-50"><input type="text" x-model="search" placeholder="بحث..." class="w-full border-slate-200 rounded-lg text-sm py-1.5 px-3 focus:ring-indigo-500 focus:border-indigo-500"></div>
                        <ul class="max-h-48 overflow-y-auto py-1">
                            <li @click="selected = ''; open = false; search = ''" class="px-4 py-2 text-sm cursor-pointer hover:bg-slate-50" :class="selected == '' ? 'bg-indigo-50 text-indigo-700 font-bold' : 'text-slate-700'">الكل</li>
                            <template x-for="option in filteredOptions" :key="option.id">
                                <li @click="selected = option.id; open = false; search = ''" class="px-4 py-2 text-sm cursor-pointer hover:bg-slate-50" :class="selected == option.id ? 'bg-indigo-50 text-indigo-700 font-bold' : 'text-slate-700'"><span x-text="option.name"></span></li>
                            </template>
                        </ul>
                    </div>
                </div>

                <!-- Ledger Selection -->
                <div x-data="{
                    open: false, search: '', selected: <?php if ((object) ('ledger_id') instanceof \Livewire\WireDirective) : ?>window.Livewire.find('<?php echo e($__livewire->getId()); ?>').entangle('<?php echo e('ledger_id'->value()); ?>')<?php echo e('ledger_id'->hasModifier('live') ? '.live' : ''); ?><?php else : ?>window.Livewire.find('<?php echo e($__livewire->getId()); ?>').entangle('<?php echo e('ledger_id'); ?>')<?php endif; ?>.live,
                    options: <?php echo e(Js::from($ledgers->map(fn($l) => ['id' => $l->id, 'name' => $l->name]))); ?>,
                    get filteredOptions() { return this.search === '' ? this.options : this.options.filter(o => o.name.includes(this.search)); },
                    get selectedName() { let opt = this.options.find(o => o.id == this.selected); return opt ? opt.name : 'اختر الدفتر...'; }
                }" @click.away="open = false" class="relative z-20">
                    <label class="block text-sm font-bold text-slate-700 mb-2">الدفتر (اختياري)</label>
                    <button @click="open = !open" type="button" class="w-full text-right bg-slate-50 border border-slate-200 rounded-xl px-4 py-2.5 text-sm focus:ring-indigo-500 focus:border-indigo-500 flex items-center justify-between">
                        <span x-text="selectedName" class="text-slate-700 font-bold"></span>
                        <svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                    </button>
                    <div x-show="open" x-cloak class="absolute w-full mt-1 bg-white border border-slate-200 rounded-xl shadow-xl overflow-hidden" style="display: none;">
                        <div class="p-2 border-b border-slate-100 bg-slate-50"><input type="text" x-model="search" placeholder="بحث..." class="w-full border-slate-200 rounded-lg text-sm py-1.5 px-3 focus:ring-indigo-500 focus:border-indigo-500"></div>
                        <ul class="max-h-48 overflow-y-auto py-1">
                            <li @click="selected = ''; open = false; search = ''" class="px-4 py-2 text-sm cursor-pointer hover:bg-slate-50" :class="selected == '' ? 'bg-indigo-50 text-indigo-700 font-bold' : 'text-slate-700'">الكل</li>
                            <template x-for="option in filteredOptions" :key="option.id">
                                <li @click="selected = option.id; open = false; search = ''" class="px-4 py-2 text-sm cursor-pointer hover:bg-slate-50" :class="selected == option.id ? 'bg-indigo-50 text-indigo-700 font-bold' : 'text-slate-700'"><span x-text="option.name"></span></li>
                            </template>
                        </ul>
                    </div>
                </div>

                <!-- Page Multi-Selection -->
                <div x-data="{
                    open: false, search: '', selected: <?php if ((object) ('page_ids') instanceof \Livewire\WireDirective) : ?>window.Livewire.find('<?php echo e($__livewire->getId()); ?>').entangle('<?php echo e('page_ids'->value()); ?>')<?php echo e('page_ids'->hasModifier('live') ? '.live' : ''); ?><?php else : ?>window.Livewire.find('<?php echo e($__livewire->getId()); ?>').entangle('<?php echo e('page_ids'); ?>')<?php endif; ?>.live,
                    options: <?php echo e(Js::from($pages->map(fn($p) => ['id' => $p->id, 'name' => ($p->name ?: $p->code)]))); ?>,
                    get filteredOptions() { return this.search === '' ? this.options : this.options.filter(o => o.name.includes(this.search)); },
                    toggleSelect(id) {
                        if (this.selected.includes(id)) {
                            this.selected = this.selected.filter(i => i !== id);
                        } else {
                            this.selected.push(id);
                        }
                    }
                }" @click.away="open = false" class="relative z-10">
                    <label class="block text-sm font-bold text-slate-700 mb-2">الصفحات (يترك فارغاً للكل)</label>
                    <button @click="open = !open" type="button" class="w-full text-right bg-indigo-50 border-2 border-indigo-200 rounded-xl px-4 py-2.5 text-sm focus:ring-indigo-500 focus:border-indigo-500 flex items-center justify-between transition-colors">
                        <span class="text-indigo-800 font-black" x-text="selected.length > 0 ? selected.length + ' صفحة محددة' : 'الكل (حسب الفلتر)'"></span>
                        <svg class="w-4 h-4 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                    </button>
                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__errorArgs = ['page_ids'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> <span class="text-xs text-rose-500 font-bold mt-1 block"><?php echo e($message); ?></span> <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                    
                    <div x-show="open" x-cloak class="absolute w-full mt-1 bg-white border border-slate-200 rounded-xl shadow-xl overflow-hidden" style="display: none;">
                        <div class="p-2 border-b border-slate-100 bg-slate-50"><input type="text" x-model="search" placeholder="بحث..." class="w-full border-slate-200 rounded-lg text-sm py-1.5 px-3 focus:ring-indigo-500 focus:border-indigo-500"></div>
                        <ul class="max-h-48 overflow-y-auto py-1">
                            <li @click="selected = []" class="px-4 py-2 text-sm cursor-pointer hover:bg-slate-50 flex items-center gap-2" :class="selected.length === 0 ? 'bg-indigo-50 text-indigo-700 font-bold' : 'text-slate-700'">
                                <div class="w-4 h-4 rounded border flex items-center justify-center" :class="selected.length === 0 ? 'border-indigo-600 bg-indigo-600' : 'border-slate-300'"><svg x-show="selected.length === 0" class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg></div>
                                الكل
                            </li>
                            <template x-for="option in filteredOptions" :key="option.id">
                                <li @click="toggleSelect(option.id)" class="px-4 py-2 text-sm cursor-pointer hover:bg-slate-50 flex items-center gap-2 text-slate-700">
                                    <div class="w-4 h-4 rounded border flex items-center justify-center" :class="selected.includes(option.id) ? 'border-indigo-600 bg-indigo-600' : 'border-slate-300'"><svg x-show="selected.includes(option.id)" class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg></div>
                                    <span x-text="option.name"></span>
                                </li>
                            </template>
                            <li x-show="filteredOptions.length === 0" class="px-4 py-3 text-sm text-slate-500 text-center">لا يوجد صفحات مطابقة</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Date Range -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8 bg-slate-50 p-4 rounded-xl border border-slate-100">
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">من تاريخ</label>
                    <input type="date" wire:model="date_from" class="w-full border-slate-200 rounded-xl text-sm focus:ring-indigo-500 focus:border-indigo-500 font-bold text-slate-700">
                </div>
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">إلى تاريخ</label>
                    <input type="date" wire:model="date_to" class="w-full border-slate-200 rounded-xl text-sm focus:ring-indigo-500 focus:border-indigo-500 font-bold text-slate-700">
                </div>
            </div>

            <!-- Display Mode -->
            <div class="mb-8">
                <label class="block text-sm font-bold text-slate-700 mb-3">طريقة العرض</label>
                <div class="flex gap-4">
                    <label class="flex-1 cursor-pointer">
                        <input type="radio" wire:model.live="display_mode" value="separated" class="peer sr-only">
                        <div class="p-4 rounded-xl border-2 border-slate-200 peer-checked:border-indigo-600 peer-checked:bg-indigo-50 transition-all flex items-center gap-3">
                            <div class="w-5 h-5 rounded-full border-2 border-slate-300 peer-checked:border-indigo-600 flex items-center justify-center">
                                <div class="w-2.5 h-2.5 rounded-full bg-indigo-600 scale-0 peer-checked:scale-100 transition-transform"></div>
                            </div>
                            <div>
                                <h4 class="font-bold text-slate-800 text-sm">جداول منفصلة</h4>
                                <p class="text-xs text-slate-500 mt-1">عرض كل صفحة في جدول مستقل.</p>
                            </div>
                        </div>
                    </label>
                    <label class="flex-1 cursor-pointer">
                        <input type="radio" wire:model.live="display_mode" value="combined" class="peer sr-only">
                        <div class="p-4 rounded-xl border-2 border-slate-200 peer-checked:border-indigo-600 peer-checked:bg-indigo-50 transition-all flex items-center gap-3">
                            <div class="w-5 h-5 rounded-full border-2 border-slate-300 peer-checked:border-indigo-600 flex items-center justify-center">
                                <div class="w-2.5 h-2.5 rounded-full bg-indigo-600 scale-0 peer-checked:scale-100 transition-transform"></div>
                            </div>
                            <div>
                                <h4 class="font-bold text-slate-800 text-sm">جدول مدمج</h4>
                                <p class="text-xs text-slate-500 mt-1">تجميع كل حركات الصفحات في جدول واحد مرتب تاريخياً.</p>
                            </div>
                        </div>
                    </label>
                </div>
            </div>

            <!-- Options -->
            <div class="mb-8 border border-slate-100 rounded-xl overflow-hidden">
                <div class="bg-slate-50 px-4 py-3 border-b border-slate-100">
                    <h3 class="font-bold text-slate-700 text-sm">خيارات التقرير</h3>
                </div>
                <div class="p-4 grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <label class="flex items-center gap-3 cursor-pointer p-2 hover:bg-slate-50 rounded-lg transition-colors">
                        <input type="checkbox" wire:model="with_opening_balance" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500 w-5 h-5">
                        <span class="text-sm font-bold text-slate-700">تضمين الرصيد الافتتاحي</span>
                    </label>
                    
                    <label class="flex items-center gap-3 cursor-pointer p-2 hover:bg-slate-50 rounded-lg transition-colors">
                        <input type="checkbox" wire:model="with_notes" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500 w-5 h-5">
                        <span class="text-sm font-bold text-slate-700">عرض الملاحظات</span>
                    </label>
                    
                    <label class="flex items-center gap-3 cursor-pointer p-2 hover:bg-slate-50 rounded-lg transition-colors">
                        <input type="checkbox" wire:model="hide_credit_party" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500 w-5 h-5">
                        <span class="text-sm font-bold text-slate-700">إخفاء الطرف الدائن</span>
                    </label>
                    
                    <label class="flex items-center gap-3 cursor-pointer p-2 hover:bg-slate-50 rounded-lg transition-colors">
                        <input type="checkbox" wire:model="hide_transaction_number" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500 w-5 h-5">
                        <span class="text-sm font-bold text-slate-700">إخفاء رقم الحركة</span>
                    </label>
                    
                    <label class="flex items-center gap-3 cursor-pointer p-2 hover:bg-slate-50 rounded-lg transition-colors">
                        <input type="checkbox" wire:model="hide_reference" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500 w-5 h-5">
                        <span class="text-sm font-bold text-slate-700">إخفاء المرجع</span>
                    </label>

                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($display_mode === 'combined'): ?>
                    <label class="flex items-center gap-3 cursor-pointer p-2 hover:bg-slate-50 rounded-lg transition-colors">
                        <input type="checkbox" wire:model="hide_page_name" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500 w-5 h-5">
                        <span class="text-sm font-bold text-slate-700">إخفاء اسم الصفحة (الدفتر)</span>
                    </label>
                    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                </div>
            </div>

            <!-- Actions -->
            <div class="flex justify-end pt-6 border-t border-slate-100">
                <button wire:click="generateReport" wire:loading.attr="disabled" class="bg-indigo-600 hover:bg-indigo-700 text-white px-8 py-3 rounded-xl shadow-lg shadow-indigo-200 font-bold text-sm flex items-center gap-3 transition-all disabled:opacity-50">
                    <span wire:loading.remove wire:target="generateReport">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
                    </span>
                    <span wire:loading wire:target="generateReport">
                        <svg class="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path></svg>
                    </span>
                    توليد التقرير المجمع
                </button>
            </div>
        </div>
    </div>

    <script>
        window.addEventListener('open-report', (event) => {
            if (event.detail && event.detail.url) {
                window.open(event.detail.url, '_blank');
            } else if (event.detail && event.detail[0] && event.detail[0].url) {
                window.open(event.detail[0].url, '_blank');
            }
        });
    </script>
</div>
<?php /**PATH D:\laragon\www\Ledger\resources\views/livewire/reports/aggregated-statement-report.blade.php ENDPATH**/ ?>