<div class="max-w-7xl mx-auto">
    <!-- Header -->
    <div class="mb-8 flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
            <h1 class="text-2xl font-black text-slate-900 tracking-tight mb-1">إدارة الدفاتر</h1>
            <p class="text-sm text-slate-500 font-medium">مستويات تنظيمية متقدمة تفصل تعاملات الأطراف بناءً على الأبعاد الإدارية.</p>
        </div>
        @can('create records')
        <button wire:click="openModal" class="bg-indigo-600 hover:bg-indigo-700 text-white px-5 py-2.5 rounded-lg font-bold shadow-sm flex items-center gap-2 transition-colors shrink-0">
            <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="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
            دفتر جديد
        </button>
        @endcan
    </div>

    @if (session()->has('message'))
        <div class="mb-6 p-4 bg-emerald-50 text-emerald-800 rounded-2xl flex items-center gap-3 border border-emerald-200 shadow-sm">
            <div class="bg-emerald-100 rounded-full p-1 shrink-0">
                <svg class="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            </div>
            <span class="font-bold text-sm">{{ session('message') }}</span>
        </div>
    @endif

    <!-- Card -->
    <div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-visible">
        
        <!-- Search and Filters -->
        <div class="p-4 border-b border-slate-100 bg-slate-50/50 relative z-20 rounded-t-2xl">
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
                
                <!-- 1. Search -->
                <div class="relative w-full">
                    <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                        <svg class="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
                    </div>
                    <input wire:model.live.debounce.300ms="search" type="text" placeholder="البحث عام..." class="block w-full bg-white border-slate-200 rounded-xl pr-10 pl-4 py-2 text-sm focus:ring-indigo-500 focus:border-indigo-500 shadow-sm h-[42px]">
                </div>

                <!-- 2. Status Filter -->
                <div class="w-full">
                    <select wire:model.live="statusFilter" class="block w-full bg-white border-slate-200 rounded-xl px-4 py-2 text-sm focus:ring-indigo-500 focus:border-indigo-500 shadow-sm font-bold text-slate-700 h-[42px]">
                        <option value="all">حالة الدفتر: الكل</option>
                        <option value="active">النشطة فقط</option>
                        <option value="inactive">الموقوفة فقط</option>
                    </select>
                </div>

                <!-- 3. Party Filter -->
                <div class="w-full relative" x-data="{
                    open: false, search: '', selected: @entangle('filter_party_id').live,
                    options: {{ Js::from($allParties->map(fn($x) => ['id' => $x->id, 'name' => $x->name])) }},
                    get filtered() { 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">
                    <button @click="open = !open" type="button" class="w-full h-[42px] text-right bg-white border border-slate-200 rounded-xl px-4 py-2 text-sm shadow-sm flex items-center justify-between">
                        <span x-text="selectedName" class="font-bold text-slate-700 truncate"></span>
                        <svg class="w-4 h-4 text-slate-400 shrink-0" 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 z-50 w-full mt-1 bg-white border border-slate-200 rounded-xl shadow-xl overflow-hidden">
                        <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 transition-colors" :class="selected == '' ? 'bg-indigo-50 text-indigo-700 font-bold' : 'text-slate-700'">جميع الأطراف</li>
                            <template x-for="opt in filtered" :key="opt.id"><li @click="selected = opt.id; open = false; search = ''" class="px-4 py-2 text-sm cursor-pointer hover:bg-slate-50 transition-colors" :class="selected == opt.id ? 'bg-indigo-50 text-indigo-700 font-bold' : 'text-slate-700'"><span x-text="opt.name"></span></li></template>
                        </ul>
                    </div>
                </div>

                <!-- 4. Account Filter -->
                <div class="w-full relative" x-data="{
                    open: false, search: '', selected: @entangle('filter_account_id').live,
                    options: {{ Js::from($allAccounts->map(fn($x) => ['id' => $x->id, 'name' => $x->name])) }},
                    get filtered() { 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">
                    <button @click="open = !open" type="button" class="w-full h-[42px] text-right bg-white border border-slate-200 rounded-xl px-4 py-2 text-sm shadow-sm flex items-center justify-between">
                        <span x-text="selectedName" class="font-bold text-slate-700 truncate"></span>
                        <svg class="w-4 h-4 text-slate-400 shrink-0" 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 z-50 w-full mt-1 bg-white border border-slate-200 rounded-xl shadow-xl overflow-hidden">
                        <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 transition-colors" :class="selected == '' ? 'bg-indigo-50 text-indigo-700 font-bold' : 'text-slate-700'">جميع الحسابات</li>
                            <template x-for="opt in filtered" :key="opt.id"><li @click="selected = opt.id; open = false; search = ''" class="px-4 py-2 text-sm cursor-pointer hover:bg-slate-50 transition-colors" :class="selected == opt.id ? 'bg-indigo-50 text-indigo-700 font-bold' : 'text-slate-700'"><span x-text="opt.name"></span></li></template>
                        </ul>
                    </div>
                </div>

                <!-- 5. Entity Filter -->
                <div class="w-full relative" x-data="{
                    open: false, search: '', selected: @entangle('filter_entity_id').live,
                    options: {{ Js::from($allEntities->map(fn($x) => ['id' => $x->id, 'name' => $x->name])) }},
                    get filtered() { 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">
                    <button @click="open = !open" type="button" class="w-full h-[42px] text-right bg-white border border-slate-200 rounded-xl px-4 py-2 text-sm shadow-sm flex items-center justify-between">
                        <span x-text="selectedName" class="font-bold text-slate-700 truncate"></span>
                        <svg class="w-4 h-4 text-slate-400 shrink-0" 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 z-50 w-full mt-1 bg-white border border-slate-200 rounded-xl shadow-xl overflow-hidden">
                        <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 transition-colors" :class="selected == '' ? 'bg-indigo-50 text-indigo-700 font-bold' : 'text-slate-700'">جميع الكيانات</li>
                            <template x-for="opt in filtered" :key="opt.id"><li @click="selected = opt.id; open = false; search = ''" class="px-4 py-2 text-sm cursor-pointer hover:bg-slate-50 transition-colors" :class="selected == opt.id ? 'bg-indigo-50 text-indigo-700 font-bold' : 'text-slate-700'"><span x-text="opt.name"></span></li></template>
                        </ul>
                    </div>
                </div>

                <!-- 6. Branch Filter -->
                <div class="w-full relative" x-data="{
                    open: false, search: '', selected: @entangle('filter_branch_id').live,
                    options: {{ Js::from($allBranches->map(fn($x) => ['id' => $x->id, 'name' => $x->name])) }},
                    get filtered() { 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">
                    <button @click="open = !open" type="button" class="w-full h-[42px] text-right bg-white border border-slate-200 rounded-xl px-4 py-2 text-sm shadow-sm flex items-center justify-between">
                        <span x-text="selectedName" class="font-bold text-slate-700 truncate"></span>
                        <svg class="w-4 h-4 text-slate-400 shrink-0" 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 z-50 w-full mt-1 bg-white border border-slate-200 rounded-xl shadow-xl overflow-hidden">
                        <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 transition-colors" :class="selected == '' ? 'bg-indigo-50 text-indigo-700 font-bold' : 'text-slate-700'">جميع الفروع</li>
                            <template x-for="opt in filtered" :key="opt.id"><li @click="selected = opt.id; open = false; search = ''" class="px-4 py-2 text-sm cursor-pointer hover:bg-slate-50 transition-colors" :class="selected == opt.id ? 'bg-indigo-50 text-indigo-700 font-bold' : 'text-slate-700'"><span x-text="opt.name"></span></li></template>
                        </ul>
                    </div>
                </div>

                <!-- 7. Center Filter -->
                <div class="w-full relative" x-data="{
                    open: false, search: '', selected: @entangle('filter_center_id').live,
                    options: {{ Js::from($allCenters->map(fn($x) => ['id' => $x->id, 'name' => $x->name])) }},
                    get filtered() { 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">
                    <button @click="open = !open" type="button" class="w-full h-[42px] text-right bg-white border border-slate-200 rounded-xl px-4 py-2 text-sm shadow-sm flex items-center justify-between">
                        <span x-text="selectedName" class="font-bold text-slate-700 truncate"></span>
                        <svg class="w-4 h-4 text-slate-400 shrink-0" 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 z-50 w-full mt-1 bg-white border border-slate-200 rounded-xl shadow-xl overflow-hidden">
                        <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 transition-colors" :class="selected == '' ? 'bg-indigo-50 text-indigo-700 font-bold' : 'text-slate-700'">جميع المراكز</li>
                            <template x-for="opt in filtered" :key="opt.id"><li @click="selected = opt.id; open = false; search = ''" class="px-4 py-2 text-sm cursor-pointer hover:bg-slate-50 transition-colors" :class="selected == opt.id ? 'bg-indigo-50 text-indigo-700 font-bold' : 'text-slate-700'"><span x-text="opt.name"></span></li></template>
                        </ul>
                    </div>
                </div>

                <!-- 8. Project Filter -->
                <div class="w-full relative" x-data="{
                    open: false, search: '', selected: @entangle('filter_project_id').live,
                    options: {{ Js::from($allProjects->map(fn($x) => ['id' => $x->id, 'name' => $x->name])) }},
                    get filtered() { 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">
                    <button @click="open = !open" type="button" class="w-full h-[42px] text-right bg-white border border-slate-200 rounded-xl px-4 py-2 text-sm shadow-sm flex items-center justify-between">
                        <span x-text="selectedName" class="font-bold text-slate-700 truncate"></span>
                        <svg class="w-4 h-4 text-slate-400 shrink-0" 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 z-50 w-full mt-1 bg-white border border-slate-200 rounded-xl shadow-xl overflow-hidden">
                        <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 transition-colors" :class="selected == '' ? 'bg-indigo-50 text-indigo-700 font-bold' : 'text-slate-700'">جميع المشاريع</li>
                            <template x-for="opt in filtered" :key="opt.id"><li @click="selected = opt.id; open = false; search = ''" class="px-4 py-2 text-sm cursor-pointer hover:bg-slate-50 transition-colors" :class="selected == opt.id ? 'bg-indigo-50 text-indigo-700 font-bold' : 'text-slate-700'"><span x-text="opt.name"></span></li></template>
                        </ul>
                    </div>
                </div>

            </div>
        </div>

        <!-- Table -->
        <div class="overflow-x-auto">
            <table class="w-full text-right whitespace-nowrap">
                <thead class="bg-slate-50 text-xs text-slate-500 text-right">
                    <tr>
                        <th class="px-6 py-4 font-bold border-b border-slate-100">#</th>
                        <th class="px-6 py-4 font-bold border-b border-slate-100">الدفتر</th>
                        <th class="px-6 py-4 font-bold border-b border-slate-100">اسم الدفتر</th>
                        <th class="px-6 py-4 font-bold border-b border-slate-100">الطرف</th>
                        <th class="px-6 py-4 font-bold border-b border-slate-100">الحساب</th>
                        <th class="px-6 py-4 font-bold border-b border-slate-100">الارتباط التنظيمي</th>
                        <th class="px-6 py-4 font-bold border-b border-slate-100">الحالة</th>
                        <th class="px-6 py-4 border-b border-slate-100"></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($ledgers as $ledger)
                        <tr class="hover:bg-slate-50/50 transition-colors border-b border-slate-100 last:border-0">
                            <td class="px-6 py-4 text-center">
                                <span class="text-xs font-bold text-slate-400">{{ ($ledgers->currentPage() - 1) * $ledgers->perPage() + $loop->iteration }}</span>
                            </td>
                            <td class="px-6 py-4">
                                <div class="text-sm font-bold text-slate-800" dir="ltr" style="text-align: right;">{{ $ledger->ledger_number }}</div>
                                <div class="text-xs text-slate-500 mt-1" dir="ltr" style="text-align: right;">{{ $ledger->code }}</div>
                            </td>
                            <td class="px-6 py-4">
                                <div class="font-bold text-slate-800 text-sm">{{ $ledger->name }}</div>
                                @if($ledger->description)
                                    <div class="text-[10px] text-slate-400 font-normal mt-1 truncate max-w-xs" title="{{ $ledger->description }}">{{ $ledger->description }}</div>
                                @endif
                            </td>
                            <td class="px-6 py-4">
                                <div class="font-bold text-slate-700 text-sm">{{ $ledger->account->party->name ?? '-' }}</div>
                                @if($ledger->account && $ledger->account->party && $ledger->account->party->code)
                                    <div class="text-xs text-slate-400 mt-1">{{ $ledger->account->party->code }}</div>
                                @endif
                            </td>
                            <td class="px-6 py-4">
                                <div class="font-bold text-indigo-700 text-sm">{{ $ledger->account->name ?? '-' }}</div>
                                @if($ledger->account && $ledger->account->account_number)
                                    <div class="text-xs text-indigo-400 mt-1" dir="ltr" style="text-align: right;">{{ $ledger->account->account_number }}</div>
                                @endif
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex flex-col gap-1.5">
                                    <!-- الصف الأول: الكيان - الفرع -->
                                    @if($ledger->entity || $ledger->branch)
                                        <div class="flex items-center gap-1.5 text-xs font-bold text-slate-600 bg-slate-50 border border-slate-200 px-2 py-0.5 rounded w-fit">
                                            @if($ledger->entity)
                                                <div class="flex items-center gap-1">
                                                    <span class="w-1.5 h-1.5 rounded-full bg-indigo-500"></span>
                                                    {{ $ledger->entity->name }}
                                                </div>
                                            @endif
                                            
                                            @if($ledger->entity && $ledger->branch)
                                                <span class="text-slate-300">-</span>
                                            @endif
                                            
                                            @if($ledger->branch)
                                                <div class="flex items-center gap-1">
                                                    <span class="w-1.5 h-1.5 rounded-full bg-blue-500"></span>
                                                    {{ $ledger->branch->name }}
                                                </div>
                                            @endif
                                        </div>
                                    @endif
                                    
                                    <!-- الصف الثاني: المركز - المشروع -->
                                    @if($ledger->center || $ledger->project)
                                        <div class="flex items-center gap-1.5 text-xs font-bold text-slate-600 bg-slate-50 border border-slate-200 px-2 py-0.5 rounded w-fit">
                                            @if($ledger->center)
                                                <div class="flex items-center gap-1">
                                                    <span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span>
                                                    {{ $ledger->center->name }}
                                                </div>
                                            @endif
                                            
                                            @if($ledger->center && $ledger->project)
                                                <span class="text-slate-300">-</span>
                                            @endif
                                            
                                            @if($ledger->project)
                                                <div class="flex items-center gap-1">
                                                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
                                                    {{ $ledger->project->name }}
                                                </div>
                                            @endif
                                        </div>
                                    @endif

                                    @if(!$ledger->entity && !$ledger->branch && !$ledger->center && !$ledger->project)
                                        <span class="text-xs text-slate-400">لا يوجد</span>
                                    @endif
                                </div>
                            </td>
                            <td class="px-6 py-4">
                                @if($ledger->is_active)
                                    <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-bold bg-emerald-50 text-emerald-700 border border-emerald-100">
                                        <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span> نشط
                                    </span>
                                @else
                                    <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-bold bg-red-50 text-red-700 border border-red-100">
                                        <span class="w-1.5 h-1.5 rounded-full bg-red-500"></span> موقوف
                                    </span>
                                @endif
                            </td>
                            <td class="px-6 py-4 text-left">
                                <div class="flex items-center justify-end gap-2">
                                    @can('update records')
                                    <button wire:click="toggleStatus({{ $ledger->id }})" class="p-2 {{ $ledger->is_active ? 'text-rose-400 hover:text-rose-600 hover:bg-rose-50' : 'text-emerald-400 hover:text-emerald-600 hover:bg-emerald-50' }} rounded-lg transition" title="{{ $ledger->is_active ? 'إيقاف الدفتر' : 'تنشيط الدفتر' }}">
                                        @if($ledger->is_active)
                                        <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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                                        @else
                                        <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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                                        @endif
                                    </button>

                                    <button wire:click="edit({{ $ledger->id }})" class="p-2 text-slate-400 hover:text-indigo-600 hover:bg-indigo-50 rounded-lg transition" title="تعديل">
                                        <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
                                    </button>
                                    @endcan
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-6 py-12 text-center text-slate-500">
                                <div class="flex flex-col items-center justify-center">
                                    <svg class="w-12 h-12 text-slate-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
                                    <span class="text-sm font-medium">لا توجد دفاتر مسجلة.</span>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        @if($ledgers->hasPages())
        <div class="p-4 border-t border-slate-100 bg-slate-50/50">
            {{ $ledgers->links() }}
        </div>
        @endif
    </div>

    <!-- Modal -->
    <div x-data="{ open: @entangle('isModalOpen') }" 
         x-show="open" 
         x-cloak
         class="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-0" 
         aria-labelledby="modal-title" 
         role="dialog" 
         aria-modal="true">
        
        <!-- Backdrop -->
        <div x-show="open" 
             x-transition.opacity 
             class="fixed inset-0 bg-slate-900/60 transition-opacity" 
             @click="open = false" 
             aria-hidden="true"></div>

        <!-- Modal Panel -->
        <div x-show="open" 
             x-transition.opacity.translate.scale 
             class="relative bg-white rounded-2xl text-right overflow-visible shadow-2xl transform transition-all w-full max-w-lg border border-slate-100 flex flex-col max-h-[90vh]">
                
                <!-- Modal Header -->
                <div class="px-6 py-4 border-b border-slate-100 bg-slate-50 flex items-center justify-between rounded-t-2xl">
                    <h3 class="text-lg font-bold text-slate-800" id="modal-title">
                        {{ $ledger_id ? 'تعديل بيانات الدفتر' : 'إنشاء دفتر جديد' }}
                    </h3>
                    <button @click="open = false" type="button" class="text-slate-400 hover:text-slate-600 transition p-1 rounded-lg hover:bg-slate-200/50">
                        <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="M6 18L18 6M6 6l12 12"></path></svg>
                    </button>
                </div>

                <!-- Form -->
                <form wire:submit.prevent="save" class="flex flex-col text-right" x-data="{ tab: 'basic' }">
                    <div class="p-6 overflow-y-visible max-h-[70vh]">
                        
                        <!-- Tabs Navigation -->
                        <div class="flex border-b border-slate-200 mb-6">
                            <button type="button" @click="tab = 'basic'" :class="{'border-indigo-600 text-indigo-700': tab === 'basic', 'border-transparent text-slate-500 hover:text-slate-700': tab !== 'basic'}" class="px-5 py-2.5 border-b-2 font-bold text-sm transition-colors">
                                الارتباط الأساسي
                            </button>
                            <button type="button" @click="tab = 'details'" :class="{'border-indigo-600 text-indigo-700': tab === 'details', 'border-transparent text-slate-500 hover:text-slate-700': tab !== 'details'}" class="px-5 py-2.5 border-b-2 font-bold text-sm transition-colors flex items-center gap-2">
                                تفاصيل الدفتر
                                @if($errors->has('ledger_number') || $errors->has('code') || $errors->has('name'))
                                    <span class="w-2 h-2 rounded-full bg-red-500"></span>
                                @endif
                            </button>
                            <button type="button" @click="tab = 'org'" :class="{'border-indigo-600 text-indigo-700': tab === 'org', 'border-transparent text-slate-500 hover:text-slate-700': tab !== 'org'}" class="px-5 py-2.5 border-b-2 font-bold text-sm transition-colors">
                                الهيكلة التنظيمية
                            </button>
                        </div>

                        <!-- Tab 1: الحساب والطرف -->
                        <div x-show="tab === 'basic'" x-transition.opacity>
                            <h4 class="text-xs font-bold text-indigo-800 mb-2 flex items-center gap-1.5">
                                <span class="w-5 h-5 rounded bg-indigo-100 flex items-center justify-center text-indigo-600 text-[10px]">1</span>
                                الارتباط الأساسي (إجباري)
                            </h4>
                            <div class="space-y-3 bg-slate-50 p-3 rounded-xl border border-slate-100">
                                <!-- Party Select -->
                                <div>
                                    <x-searchable-select 
                                        wire:key="party-select"
                                        wireModel="party_id" 
                                        :options="$parties" 
                                        label="الطرف المرتبط" 
                                        placeholder="اختر الطرف أولاً..." 
                                        :required="true" />
                                </div>
                                
                                <!-- Account Select -->
                                <div>
                                    <x-searchable-select 
                                        wire:key="account-select-{{ $party_id }}"
                                        wireModel="account_id" 
                                        :options="$accounts" 
                                        label="الحساب" 
                                        placeholder="{{ $party_id ? 'اختر الحساب...' : 'يرجى اختيار الطرف أولاً' }}" 
                                        :required="true" />
                                    @error('account_id') <span class="text-[10px] text-red-500 mt-1 block font-bold">{{ $message }}</span> @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Tab 2: بيانات الدفتر -->
                        <div x-show="tab === 'details'" x-transition.opacity style="display: none;">
                            <h4 class="text-xs font-bold text-indigo-800 mb-2 flex items-center gap-1.5">
                                <span class="w-5 h-5 rounded bg-indigo-100 flex items-center justify-center text-indigo-600 text-[10px]">2</span>
                                تفاصيل الدفتر
                            </h4>
                            <div class="space-y-3">
                                <div>
                                    <label class="block text-xs font-bold text-slate-700 mb-1.5">رقم الدفتر التسلسلي <span class="text-red-500">*</span></label>
                                    <input type="text" wire:model="ledger_number" class="w-full border-slate-200 rounded-lg shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm h-10 text-left bg-white" dir="ltr" required>
                                    @error('ledger_number') <span class="text-[10px] text-red-500 mt-1 block font-bold">{{ $message }}</span> @enderror
                                </div>
                                
                                <div>
                                    <label class="block text-xs font-bold text-slate-700 mb-1.5">رمز الدفتر (للبحث السريع) <span class="text-red-500">*</span></label>
                                    <input type="text" wire:model.live.debounce.300ms="code" placeholder="مثال: TRADE-01" class="w-full border-slate-200 rounded-lg shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm h-10 text-left" dir="ltr" required>
                                    @error('code') <span class="text-[10px] text-red-500 mt-1 block font-bold">{{ $message }}</span> @enderror
                                </div>
                                
                                <div class="col-span-2">
                                    <label class="block text-xs font-bold text-slate-700 mb-1.5">اسم الدفتر <span class="text-red-500">*</span></label>
                                    <input type="text" wire:model.live.debounce.300ms="name" placeholder="مثال: دفتر التعاملات التجارية للفرع الشمالي" class="w-full border-slate-200 rounded-lg shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm h-10" required>
                                    @error('name') <span class="text-[10px] text-red-500 mt-1 block font-bold">{{ $message }}</span> @enderror
                                </div>
                                
                                <div class="col-span-2">
                                    <label class="block text-xs font-bold text-slate-700 mb-1.5">وصف أو ملاحظات</label>
                                    <textarea wire:model="description" rows="2" class="w-full border-slate-200 rounded-lg shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm"></textarea>
                                </div>
                                
                                <div class="col-span-2 mt-2 pt-4 border-t border-slate-100">
                                    <label class="block text-xs font-bold text-slate-700 mb-1.5">حالة الدفتر <span class="text-red-500">*</span></label>
                                    <select wire:model="is_active" class="w-full border-slate-200 rounded-lg shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm h-10 bg-white" required>
                                        <option value="1">دفتر نشط (يسمح بإضافة الصفحات)</option>
                                        <option value="0">موقوف</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <!-- Tab 3: الارتباط التنظيمي (اختياري) -->
                        <div x-show="tab === 'org'" x-transition.opacity style="display: none;">
                            <h4 class="text-xs font-bold text-indigo-800 mb-2 flex items-center gap-1.5">
                                <span class="w-5 h-5 rounded bg-indigo-100 flex items-center justify-center text-indigo-600 text-[10px]">3</span>
                                الهيكلة التنظيمية (اختياري)
                            </h4>
                            <div class="space-y-4">
                                <x-searchable-select wire:key="entity-select" wireModel="entity_id" :options="$entities" label="الكيان" placeholder="تحديد كيان معين..." />
                                <x-searchable-select wire:key="branch-select-{{ $entity_id }}" wireModel="branch_id" :options="$branches" label="الفرع" placeholder="تحديد فرع..." />
                                <x-searchable-select wire:key="center-select-{{ $branch_id }}" wireModel="center_id" :options="$centers" label="المركز المالي" placeholder="تحديد مركز..." />
                                <x-searchable-select wire:key="project-select-{{ $entity_id }}" wireModel="project_id" :options="$projects" label="المشروع" placeholder="تحديد مشروع..." />
                            </div>
                        </div>

                    </div>
                    
                    <!-- Form Footer -->
                    <div class="px-6 py-4 bg-slate-50 border-t border-slate-100 flex items-center justify-end gap-3 shrink-0 text-right rounded-b-2xl">
                        <button type="button" @click="open = false" class="px-5 py-2.5 bg-white border border-slate-300 hover:bg-slate-50 hover:border-slate-400 text-slate-700 text-sm font-bold rounded-lg shadow-sm transition-all">
                            إلغاء
                        </button>
                        <button type="submit" class="px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-bold rounded-lg shadow-sm transition-all flex items-center gap-2">
                            <span wire:loading.remove wire:target="save">حفظ الدفتر</span>
                            <span wire:loading wire:target="save">جاري الحفظ...</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
