@extends('layouts.app')

@section('title', 'قيود اليومية')
@section('page_title', 'قيود اليومية العامة')

@section('content')
<div class="bg-white dark:bg-slate-800 rounded-3xl border border-slate-100 dark:border-slate-700/60 shadow-sm overflow-hidden space-y-6 p-6">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h3 class="font-extrabold text-slate-800 dark:text-white text-base">دفتر قيود اليومية</h3>
            <p class="text-xs text-slate-400 mt-1">عرض وإثبات جميع القيود الدفترية والقيود العكسية المعدلة للعمليات</p>
        </div>
        <a href="{{ route('accounting.journal.create') }}" class="inline-flex items-center gap-2 px-4 py-2.5 bg-primary-600 hover:bg-primary-500 text-white rounded-2xl font-bold text-xs shadow-md shadow-primary-500/10 transition-all">
            <i class="fa-solid fa-plus"></i> إنشاء قيد يدوي
        </a>
    </div>

    <!-- Table of Journals -->
    <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">منشئ القيد</th>
                    <th class="p-4 text-center">الحالة</th>
                    <th class="p-4 text-center">عكس القيد</th>
                    <th class="p-4 text-center">حذف</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100 dark:divide-slate-700/40 text-slate-700 dark:text-slate-200">
                @forelse($entries as $entry)
                    <tr x-data="{ modalOpen: false }" class="hover:bg-slate-50/50 dark:hover:bg-slate-700/20">
                        <td class="p-4 font-mono font-bold text-primary-500">{{ $entry->entry_number }}</td>
                        <td class="p-4 font-semibold">{{ $entry->entry_date->format('Y-m-d') }}</td>
                        <td class="p-4 max-w-[240px] truncate" title="{{ $entry->description }}">{{ $entry->description }}</td>
                        <td class="p-4 font-medium text-slate-500 dark:text-slate-400">{{ $entry->creator->name ?? 'تلقائي بالنظام' }}</td>
                        <td class="p-4 text-center">
                            @if($entry->is_reversed)
                                <span class="bg-red-500/10 text-red-500 text-[10px] px-2 py-0.5 rounded-full font-bold border border-red-500/20">معكوس وملغى</span>
                            @else
                                <span class="bg-emerald-500/10 text-emerald-500 text-[10px] px-2 py-0.5 rounded-full font-bold border border-emerald-500/20">مرحل</span>
                            @endif
                        </td>
                        <td class="p-4 text-center">
                            @if(!$entry->is_reversed)
                                <button @click="modalOpen = true" class="text-red-600 hover:text-red-500 text-xs font-bold hover:underline cursor-pointer">
                                    <i class="fa-solid fa-rotate-left mr-1"></i> عكس القيد
                                </button>
 
                                <!-- Reversal Modal -->
                                <div x-show="modalOpen" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-sm" x-cloak>
                                    <div class="bg-white dark:bg-slate-800 rounded-3xl max-w-md w-full border border-slate-200 dark:border-slate-700 p-6 shadow-2xl space-y-6 text-right">
                                        <h4 class="font-extrabold text-sm text-slate-800 dark:text-white">تأكيد عكس القيد: {{ $entry->entry_number }}</h4>
                                        <p class="text-xs text-slate-400 leading-relaxed">وفقاً لمعايير المحاسبة، لا يمكن حذف القيود المالية. سيقوم النظام بإنشاء قيد عكسي متوازن بالكامل لإلغاء تأثير المعاملة مالياً.</p>
                                        
                                        <form action="{{ route('accounting.journal.reverse', $entry->id) }}" method="POST" class="space-y-4">
                                            @csrf
                                            <div>
                                                <label class="block text-xs font-bold text-slate-500 dark:text-slate-400 mb-2">سبب الإلغاء والعكس</label>
                                                <input type="text" name="reason" 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 focus:ring-1 focus:ring-primary-500 outline-none text-slate-800 dark:text-white" placeholder="مثال: خطأ في إدخال القيم أو تراجع العميل عن الشراء">
                                            </div>
                                            
                                            <div class="flex items-center gap-3 justify-end pt-4">
                                                <button type="button" @click="modalOpen = false" class="px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl text-xs font-bold transition-all">إلغاء</button>
                                                <button type="submit" class="px-4 py-2 bg-red-600 hover:bg-red-500 text-white rounded-xl text-xs font-bold transition-all">تأكيد العكس</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            @else
                                <span class="text-slate-400 text-[10px]"><i class="fa-solid fa-lock"></i> مغلق</span>
                            @endif
                        </td>
                        <td class="p-4 text-center">
                            <form action="{{ route('accounting.journal.delete', $entry->id) }}" method="POST" onsubmit="return confirm('تنبيه: حذف القيد سيقوم بخصم القيم من أرصدة الحسابات لإعادتها كما كانت. هل أنت متأكد من الحذف النهائي؟');" class="inline m-0">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="text-slate-400 hover:text-red-500 p-1 hover:bg-red-50 dark:hover:bg-red-950/10 rounded transition-colors cursor-pointer" title="حذف القيد">
                                    <i class="fa-solid fa-trash-can text-xs"></i>
                                </button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="p-8 text-center text-slate-400">لا توجد قيود مسجلة حالياً.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    <div class="pt-4">
        {{ $entries->links() }}
    </div>
</div>
@endsection