@extends('layouts.app')

@section('title', 'دفتر الأستاذ')
@section('page_title', 'تقرير كشف حساب (دفتر الأستاذ العام)')

@section('content')
<div class="space-y-6">
    <!-- Filter Card -->
    <div class="bg-white dark:bg-slate-800 rounded-3xl p-6 border border-slate-100 dark:border-slate-700/60 shadow-sm">
        <form action="{{ route('accounting.ledger') }}" method="GET" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 items-end">
            <div>
                <label class="block text-xs font-bold text-slate-500 dark:text-slate-400 mb-2">الحساب المالي</label>
                <select name="account_id" required class="w-full px-4 py-2.5 bg-slate-50 dark:bg-slate-700/50 border border-slate-200 dark:border-slate-600 rounded-xl text-xs outline-none focus:ring-1 focus:ring-primary-500 text-slate-800 dark:text-white">
                    <option value="">-- اختر الحساب للاستعراض --</option>
                    @foreach($accounts as $account)
                        <option value="{{ $account->id }}" {{ $accountId == $account->id ? 'selected' : '' }}>{{ $account->code }} - {{ $account->name }}</option>
                    @endforeach
                </select>
            </div>

            <div>
                <label class="block text-xs font-bold text-slate-500 dark:text-slate-400 mb-2">من تاريخ</label>
                <input type="date" name="from_date" value="{{ $fromDate }}"
                       class="w-full px-4 py-2.5 bg-slate-50 dark:bg-slate-700/50 border border-slate-200 dark:border-slate-600 rounded-xl text-xs outline-none focus:ring-1 focus:ring-primary-500 text-slate-800 dark:text-white">
            </div>

            <div>
                <label class="block text-xs font-bold text-slate-500 dark:text-slate-400 mb-2">إلى تاريخ</label>
                <input type="date" name="to_date" value="{{ $toDate }}"
                       class="w-full px-4 py-2.5 bg-slate-50 dark:bg-slate-700/50 border border-slate-200 dark:border-slate-600 rounded-xl text-xs outline-none focus:ring-1 focus:ring-primary-500 text-slate-800 dark:text-white">
            </div>

            <div>
                <button type="submit" class="w-full py-3 bg-primary-600 hover:bg-primary-500 text-white rounded-xl text-xs font-bold shadow-md shadow-primary-500/10 hover:shadow-primary-500/20 transition-all">
                    <i class="fa-solid fa-magnifying-glass mr-1.5"></i> استخراج التقرير
                </button>
            </div>
        </form>
    </div>

    <!-- Ledger Details Card -->
    @if($selectedAccount)
        <div class="bg-white dark:bg-slate-800 rounded-3xl p-6 border border-slate-100 dark:border-slate-700/60 shadow-sm space-y-6">
            <!-- Statement Header Info -->
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between border-b border-slate-100 dark:border-slate-700/40 pb-4 gap-4">
                <div>
                    <h3 class="font-extrabold text-sm text-slate-800 dark:text-white">كشف حساب: {{ $selectedAccount->name }}</h3>
                    <p class="text-xs text-slate-400 mt-1">كود الحساب: {{ $selectedAccount->code }} | الفترة من {{ $fromDate }} إلى {{ $toDate }}</p>
                </div>
                <div class="text-left">
                    <span class="text-xs text-slate-400">الرصيد الافتتاحي المسبق:</span>
                    <h4 class="text-base font-extrabold text-slate-800 dark:text-white mt-1">{{ number_format($openingBalance, 2) }} ر.س</h4>
                </div>
            </div>

            <!-- Ledger Table -->
            <div class="overflow-x-auto rounded-2xl border border-slate-100 dark:border-slate-700/40">
                <table class="w-full text-right text-xs">
                    <thead class="bg-slate-50 dark:bg-slate-700/50 text-slate-500 dark:text-slate-400 font-bold border-b border-slate-100 dark:border-slate-700/40">
                        <tr>
                            <th class="p-4">تاريخ المعاملة</th>
                            <th class="p-4">رقم القيد</th>
                            <th class="p-4">بيان المعاملة</th>
                            <th class="p-4 text-left">مدين (+)</th>
                            <th class="p-4 text-left">دائن (-)</th>
                            <th class="p-4 text-left">الرصيد التراكمي</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-slate-700/40 font-medium text-slate-700 dark:text-slate-200">
                        <!-- Initial balance line -->
                        <tr class="bg-slate-50/20 dark:bg-slate-800/40 font-semibold text-slate-500">
                            <td class="p-4" colspan="3">رصيد أول المدة الافتتاحي للتقرير</td>
                            <td class="p-4 text-left">-</td>
                            <td class="p-4 text-left">-</td>
                            <td class="p-4 text-left font-mono font-bold">{{ number_format($openingBalance, 2) }} ر.س</td>
                        </tr>

                        @php
                            $runningBalance = $openingBalance;
                        @endphp

                        @forelse($lines as $line)
                            @php
                                $debit = (double)$line->debit;
                                $credit = (double)$line->credit;
                                
                                if (in_array($selectedAccount->type, ['asset', 'expense'])) {
                                    $runningBalance += ($debit - $credit);
                                } else {
                                    $runningBalance += ($credit - $debit);
                                }
                            @endphp
                            <tr class="hover:bg-slate-50/30 dark:hover:bg-slate-700/10">
                                <td class="p-4 text-slate-400">{{ $line->journalEntry->entry_date->format('Y-m-d') }}</td>
                                <td class="p-4 font-mono font-bold text-primary-500">{{ $line->journalEntry->entry_number }}</td>
                                <td class="p-4 text-slate-600 dark:text-slate-300">{{ $line->description ?? $line->journalEntry->description }}</td>
                                <td class="p-4 text-left font-mono text-emerald-600 dark:text-emerald-400">{{ $debit > 0 ? number_format($debit, 2) : '-' }}</td>
                                <td class="p-4 text-left font-mono text-red-500">{{ $credit > 0 ? number_format($credit, 2) : '-' }}</td>
                                <td class="p-4 text-left font-mono font-bold">{{ number_format($runningBalance, 2) }} ر.س</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="p-8 text-center text-slate-400">لا توجد حركات مسجلة خلال هذه الفترة.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <!-- Closing Sum Cards -->
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-6 pt-4 border-t border-slate-100 dark:border-slate-700/40">
                <div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-2xl border border-slate-100 dark:border-slate-600/30">
                    <span class="text-[10px] font-bold text-slate-400 block">إجمالي حركة المدين</span>
                    <span class="text-sm font-extrabold text-slate-800 dark:text-white mt-1 block font-mono text-emerald-600">{{ number_format($lines->sum('debit'), 2) }} ر.س</span>
                </div>
                <div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-2xl border border-slate-100 dark:border-slate-600/30">
                    <span class="text-[10px] font-bold text-slate-400 block">إجمالي حركة الدائن</span>
                    <span class="text-sm font-extrabold text-slate-800 dark:text-white mt-1 block font-mono text-red-500">{{ number_format($lines->sum('credit'), 2) }} ر.س</span>
                </div>
                <div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-2xl border border-slate-100 dark:border-slate-600/30">
                    <span class="text-[10px] font-bold text-slate-400 block">الرصيد الختامي للدليل</span>
                    <span class="text-sm font-extrabold text-slate-800 dark:text-white mt-1 block font-mono">{{ number_format($runningBalance, 2) }} ر.س</span>
                </div>
            </div>
        </div>
    @endif
</div>
@endsection