@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('sales.invoice.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-file-invoice mr-1"></i> إنشاء فاتورة جديدة
        </a>
    </div>

    <!-- Table of Invoices -->
    <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-left">قيمة الفاتورة</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($invoices as $invoice)
                    <tr class="hover:bg-slate-50/50 dark:hover:bg-slate-700/20">
                        <td class="p-4 font-mono font-bold text-primary-500">{{ $invoice->invoice_number }}</td>
                        <td class="p-4 font-semibold text-slate-800 dark:text-white">{{ $invoice->customer->name }}</td>
                        <td class="p-4 text-slate-400">{{ $invoice->invoice_date->format('Y-m-d') }}</td>
                        <td class="p-4">
                            @if($invoice->payment_method === 'cash')
                                <span class="bg-blue-500/10 text-blue-500 text-[10px] px-2 py-0.5 rounded-full font-bold border border-blue-500/20">نقدي</span>
                            @elseif($invoice->payment_method === 'bank')
                                <span class="bg-indigo-500/10 text-indigo-500 text-[10px] px-2 py-0.5 rounded-full font-bold border border-indigo-500/20">تحويل بنكي</span>
                            @else
                                <span class="bg-amber-500/10 text-amber-500 text-[10px] px-2 py-0.5 rounded-full font-bold border border-amber-500/20">آجل</span>
                            @endif
                        </td>
                        <td class="p-4 text-left font-mono font-bold">{{ number_format($invoice->total, 2) }} ر.س</td>
                        <td class="p-4 text-center">
                            @if($invoice->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">
                            <a href="{{ route('sales.invoice.show', $invoice->id) }}" class="text-primary-500 hover:text-primary-600 font-bold hover:underline">
                                <i class="fa-solid fa-eye mr-1"></i> تفاصيل الفاتورة
                            </a>
                        </td>
                        <td class="p-4 text-center">
                            <form action="{{ route('sales.invoice.delete', $invoice->id) }}" method="POST" onsubmit="return confirm('تنبيه: حذف الفاتورة سيعيد الأصناف للمخزن ويلغي القيد المحاسبي بالكامل. هل تريد الحذف النهائي؟');" class="inline m-0">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="p-1.5 text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-950/10 rounded-lg transition-colors cursor-pointer" title="حذف الفاتورة">
                                    <i class="fa-solid fa-trash-can text-sm"></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">
        {{ $invoices->links() }}
    </div>
</div>
@endsection