@extends('layouts.app')

@section('title', __('app.invoices'))

@section('content')
@php
    $isRtl = app()->getLocale() === 'ar';
    $currency = \App\Models\Setting::currencyLabel(app()->getLocale());
@endphp

<div class="space-y-6">
    <!-- Header -->
    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
        <div>
            <h1 class="text-3xl font-black gradient-text">{{ $isRtl ? 'الفواتير' : 'Invoices' }}</h1>
            <p class="text-slate-500 mt-1">{{ $isRtl ? 'إدارة الفواتير والمستحقات' : 'Manage invoices and receivables' }}</p>
        </div>
        <div class="flex gap-3">
            <a href="{{ route('invoices.create') }}" class="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-emerald-500 to-emerald-600 text-white rounded-xl font-semibold shadow-lg hover:shadow-emerald-500/40 transition-all">
                <i data-lucide="plus" class="w-5 h-5"></i>
                {{ $isRtl ? 'فاتورة جديدة' : 'New Invoice' }}
            </a>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-4">
        <div class="stat-card glass-card rounded-2xl p-4 border border-slate-200/60">
            <div class="text-3xl font-black text-slate-800">{{ $stats['total'] }}</div>
            <p class="text-sm text-slate-500">{{ $isRtl ? 'إجمالي الفواتير' : 'Total' }}</p>
        </div>
        <div class="stat-card glass-card rounded-2xl p-4 border border-slate-200/60">
            <div class="text-3xl font-black text-emerald-600">{{ $stats['paid'] }}</div>
            <p class="text-sm text-slate-500">{{ $isRtl ? 'مدفوعة' : 'Paid' }}</p>
        </div>
        <div class="stat-card glass-card rounded-2xl p-4 border border-slate-200/60">
            <div class="text-3xl font-black text-amber-600">{{ $stats['unpaid'] }}</div>
            <p class="text-sm text-slate-500">{{ $isRtl ? 'غير مدفوعة' : 'Unpaid' }}</p>
        </div>
        <div class="stat-card glass-card rounded-2xl p-4 border border-slate-200/60">
            <div class="text-3xl font-black text-rose-600">{{ $stats['overdue'] }}</div>
            <p class="text-sm text-slate-500">{{ $isRtl ? 'متأخرة' : 'Overdue' }}</p>
        </div>
        <div class="stat-card glass-card rounded-2xl p-4 border border-slate-200/60 col-span-2 md:col-span-1">
            <div class="text-2xl font-black text-blue-600">{{ number_format((float) $stats['total_amount'], 2) }}</div>
            <p class="text-sm text-slate-500">{{ $isRtl ? 'الإجمالي' : 'Amount' }}</p>
            <p class="text-xs text-slate-400 mt-1">{{ $currency }}</p>
        </div>
        <div class="stat-card glass-card rounded-2xl p-4 border border-slate-200/60">
            <div class="text-2xl font-black text-emerald-600">{{ number_format((float) $stats['total_paid'], 2) }}</div>
            <p class="text-sm text-slate-500">{{ $isRtl ? 'المحصل' : 'Collected' }}</p>
            <p class="text-xs text-slate-400 mt-1">{{ $currency }}</p>
        </div>
        <div class="stat-card glass-card rounded-2xl p-4 border border-slate-200/60">
            <div class="text-2xl font-black text-rose-600">{{ number_format((float) $stats['total_due'], 2) }}</div>
            <p class="text-sm text-slate-500">{{ $isRtl ? 'المستحق' : 'Due' }}</p>
            <p class="text-xs text-slate-400 mt-1">{{ $currency }}</p>
        </div>
    </div>

    <!-- Filters -->
    <div class="glass-card rounded-2xl border border-slate-200/60 p-4">
        <form action="{{ route('invoices.index') }}" method="GET" class="flex flex-wrap items-center gap-4">
            <div class="flex-1 min-w-[200px]">
                <div class="relative">
                    <i data-lucide="search" class="absolute {{ $isRtl ? 'right-4' : 'left-4' }} top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400"></i>
                    <input type="text" name="search" value="{{ request('search') }}" 
                           placeholder="{{ $isRtl ? 'بحث...' : 'Search...' }}"
                           class="w-full bg-slate-100/80 border-0 rounded-xl {{ $isRtl ? 'pr-12 pl-4' : 'pl-12 pr-4' }} py-3 focus:ring-2 focus:ring-emerald-500/30">
                </div>
            </div>
            <select name="type" class="bg-slate-100/80 border-0 rounded-xl px-4 py-3 focus:ring-2 focus:ring-emerald-500/30">
                <option value="">{{ $isRtl ? 'كل الأنواع' : 'All Types' }}</option>
                <option value="sale" {{ request('type') === 'sale' ? 'selected' : '' }}>{{ $isRtl ? 'مبيعات' : 'Sales' }}</option>
                <option value="subscription" {{ request('type') === 'subscription' ? 'selected' : '' }}>{{ $isRtl ? 'اشتراكات' : 'Subscriptions' }}</option>
                <option value="service" {{ request('type') === 'service' ? 'selected' : '' }}>{{ $isRtl ? 'خدمات' : 'Services' }}</option>
            </select>
            <select name="payment_status" class="bg-slate-100/80 border-0 rounded-xl px-4 py-3 focus:ring-2 focus:ring-emerald-500/30">
                <option value="">{{ $isRtl ? 'كل الحالات' : 'All Status' }}</option>
                <option value="paid" {{ request('payment_status') === 'paid' ? 'selected' : '' }}>{{ $isRtl ? 'مدفوعة' : 'Paid' }}</option>
                <option value="partial" {{ request('payment_status') === 'partial' ? 'selected' : '' }}>{{ $isRtl ? 'مدفوعة جزئياً' : 'Partial' }}</option>
                <option value="unpaid" {{ request('payment_status') === 'unpaid' ? 'selected' : '' }}>{{ $isRtl ? 'غير مدفوعة' : 'Unpaid' }}</option>
            </select>
            <button type="submit" class="px-6 py-3 bg-emerald-500 text-white rounded-xl font-semibold hover:bg-emerald-600 transition-colors">
                <i data-lucide="filter" class="w-5 h-5"></i>
            </button>
        </form>
    </div>

    <!-- Invoices Table -->
    <div class="glass-card rounded-2xl border border-slate-200/60 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-slate-50/80 border-b border-slate-200">
                    <tr>
                        <th class="px-6 py-4 text-{{ $isRtl ? 'right' : 'left' }} text-sm font-bold text-slate-700">{{ $isRtl ? 'رقم الفاتورة' : 'Invoice #' }}</th>
                        <th class="px-6 py-4 text-{{ $isRtl ? 'right' : 'left' }} text-sm font-bold text-slate-700">{{ $isRtl ? 'العميل' : 'Customer' }}</th>
                        <th class="px-6 py-4 text-{{ $isRtl ? 'right' : 'left' }} text-sm font-bold text-slate-700">{{ $isRtl ? 'النوع' : 'Type' }}</th>
                        <th class="px-6 py-4 text-{{ $isRtl ? 'right' : 'left' }} text-sm font-bold text-slate-700">{{ $isRtl ? 'التاريخ' : 'Date' }}</th>
                        <th class="px-6 py-4 text-{{ $isRtl ? 'right' : 'left' }} text-sm font-bold text-slate-700">{{ $isRtl ? 'الإجمالي' : 'Total' }}</th>
                        <th class="px-6 py-4 text-{{ $isRtl ? 'right' : 'left' }} text-sm font-bold text-slate-700">{{ $isRtl ? 'المدفوع' : 'Paid' }}</th>
                        <th class="px-6 py-4 text-{{ $isRtl ? 'right' : 'left' }} text-sm font-bold text-slate-700">{{ $isRtl ? 'الحالة' : 'Status' }}</th>
                        <th class="px-6 py-4 text-center text-sm font-bold text-slate-700">{{ $isRtl ? 'الإجراءات' : 'Actions' }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($invoices as $invoice)
                        <tr class="hover:bg-slate-50/50 transition-colors">
                            <td class="px-6 py-4">
                                <a href="{{ route('invoices.show', $invoice) }}" class="font-mono font-bold text-emerald-600 hover:text-emerald-700">
                                    {{ $invoice->invoice_number }}
                                </a>
                            </td>
                            <td class="px-6 py-4">
                                @if($invoice->member)
                                    <div class="flex items-center gap-3">
                                        <div class="w-10 h-10 bg-emerald-100 rounded-lg flex items-center justify-center">
                                            <span class="font-bold text-emerald-600">{{ mb_substr($invoice->member->first_name, 0, 1) }}</span>
                                        </div>
                                        <div>
                                            <p class="font-semibold text-slate-800">{{ $invoice->member->full_name }}</p>
                                            <p class="text-xs text-slate-500">{{ $invoice->member->phone }}</p>
                                        </div>
                                    </div>
                                @elseif($invoice->customer_name)
                                    <p class="font-semibold text-slate-800">{{ $invoice->customer_name }}</p>
                                @else
                                    <span class="text-slate-400">{{ $isRtl ? 'عميل نقدي' : 'Walk-in' }}</span>
                                @endif
                            </td>
                            <td class="px-6 py-4">
                                @php
                                    $typeColors = [
                                        'sale' => 'bg-blue-100 text-blue-700',
                                        'subscription' => 'bg-violet-100 text-violet-700',
                                        'service' => 'bg-cyan-100 text-cyan-700',
                                    ];
                                    $typeLabels = [
                                        'sale' => $isRtl ? 'مبيعات' : 'Sale',
                                        'subscription' => $isRtl ? 'اشتراك' : 'Subscription',
                                        'service' => $isRtl ? 'خدمة' : 'Service',
                                    ];
                                @endphp
                                <span class="px-3 py-1 rounded-lg text-xs font-semibold {{ $typeColors[$invoice->type] ?? 'bg-slate-100 text-slate-700' }}">
                                    {{ $typeLabels[$invoice->type] ?? $invoice->type }}
                                </span>
                            </td>
                            <td class="px-6 py-4 text-slate-600">{{ $invoice->invoice_date->format('Y/m/d') }}</td>
                            <td class="px-6 py-4 font-bold text-slate-800">{{ number_format($invoice->total) }}</td>
                            <td class="px-6 py-4 text-emerald-600 font-semibold">{{ number_format($invoice->paid_amount) }}</td>
                            <td class="px-6 py-4">
                                @php
                                    $statusColors = [
                                        'paid' => 'bg-emerald-100 text-emerald-700',
                                        'partial' => 'bg-amber-100 text-amber-700',
                                        'unpaid' => 'bg-slate-100 text-slate-700',
                                        'overdue' => 'bg-rose-100 text-rose-700',
                                    ];
                                    $statusLabels = [
                                        'paid' => $isRtl ? 'مدفوعة' : 'Paid',
                                        'partial' => $isRtl ? 'جزئي' : 'Partial',
                                        'unpaid' => $isRtl ? 'غير مدفوعة' : 'Unpaid',
                                        'overdue' => $isRtl ? 'متأخرة' : 'Overdue',
                                    ];
                                    $status = $invoice->payment_status;
                                    if ($invoice->due_date && $invoice->due_date->isPast() && $invoice->remaining_amount > 0) {
                                        $status = 'overdue';
                                    }
                                @endphp
                                <span class="px-3 py-1 rounded-lg text-xs font-semibold {{ $statusColors[$status] ?? 'bg-slate-100 text-slate-700' }}">
                                    {{ $statusLabels[$status] ?? $status }}
                                </span>
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex items-center justify-center gap-2">
                                    <a href="{{ route('invoices.show', $invoice) }}" 
                                       class="p-2 hover:bg-slate-100 rounded-lg text-slate-600 hover:text-slate-800 transition-colors"
                                       title="{{ $isRtl ? 'عرض' : 'View' }}">
                                        <i data-lucide="eye" class="w-4 h-4"></i>
                                    </a>
                                    <a href="{{ route('invoices.print', $invoice) }}" target="_blank"
                                       class="p-2 hover:bg-slate-100 rounded-lg text-slate-600 hover:text-slate-800 transition-colors"
                                       title="{{ $isRtl ? 'طباعة' : 'Print' }}">
                                        <i data-lucide="printer" class="w-4 h-4"></i>
                                    </a>
                                    @if($invoice->remaining_amount > 0)
                                        <button onclick="showPaymentModal({{ $invoice->id }}, {{ $invoice->remaining_amount }})"
                                           class="p-2 hover:bg-emerald-100 rounded-lg text-emerald-600 hover:text-emerald-700 transition-colors"
                                           title="{{ $isRtl ? 'إضافة دفعة' : 'Add Payment' }}">
                                            <i data-lucide="credit-card" class="w-4 h-4"></i>
                                        </button>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="px-6 py-12 text-center">
                                <i data-lucide="file-text" class="w-12 h-12 mx-auto mb-3 text-slate-300"></i>
                                <p class="text-slate-500">{{ $isRtl ? 'لا توجد فواتير' : 'No invoices found' }}</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        @if($invoices->hasPages())
            <div class="px-6 py-4 border-t border-slate-200">
                {{ $invoices->links() }}
            </div>
        @endif
    </div>
</div>

<!-- Payment Modal -->
<dialog id="paymentModal" class="rounded-2xl p-0 backdrop:bg-black/50 max-w-md w-full">
    <div class="p-6">
        <h3 class="font-bold text-lg mb-4">{{ $isRtl ? 'إضافة دفعة' : 'Add Payment' }}</h3>
        <form id="paymentForm" method="POST">
            @csrf
            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-2">{{ $isRtl ? 'المبلغ' : 'Amount' }}</label>
                    <input type="number" name="amount" id="paymentAmount" step="0.01" required
                           class="w-full border border-slate-200 rounded-xl p-3 focus:ring-2 focus:ring-emerald-500/30">
                    <p class="text-xs text-slate-500 mt-1">{{ $isRtl ? 'المبلغ المتبقي:' : 'Remaining:' }} <span id="remainingAmount"></span></p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-2">{{ $isRtl ? 'طريقة الدفع' : 'Payment Method' }}</label>
                    <select name="payment_method" required
                            class="w-full border border-slate-200 rounded-xl p-3 focus:ring-2 focus:ring-emerald-500/30">
                        <option value="cash">{{ $isRtl ? 'نقدي' : 'Cash' }}</option>
                        <option value="card">{{ $isRtl ? 'بطاقة' : 'Card' }}</option>
                        <option value="bank_transfer">{{ $isRtl ? 'تحويل بنكي' : 'Bank Transfer' }}</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-2">{{ $isRtl ? 'رقم المرجع' : 'Reference' }}</label>
                    <input type="text" name="reference" 
                           class="w-full border border-slate-200 rounded-xl p-3 focus:ring-2 focus:ring-emerald-500/30">
                </div>
            </div>
            <div class="flex gap-3 mt-6">
                <button type="button" onclick="document.getElementById('paymentModal').close()" 
                        class="flex-1 px-4 py-3 border border-slate-200 rounded-xl text-slate-700 hover:bg-slate-50 font-semibold">
                    {{ $isRtl ? 'إلغاء' : 'Cancel' }}
                </button>
                <button type="submit" 
                        class="flex-1 px-4 py-3 bg-emerald-500 text-white rounded-xl hover:bg-emerald-600 font-semibold">
                    {{ $isRtl ? 'حفظ' : 'Save' }}
                </button>
            </div>
        </form>
    </div>
</dialog>

@push('scripts')
<script>
    lucide.createIcons();
    
    function showPaymentModal(invoiceId, remainingAmount) {
        const modal = document.getElementById('paymentModal');
        const form = document.getElementById('paymentForm');
        const amountInput = document.getElementById('paymentAmount');
        const remainingSpan = document.getElementById('remainingAmount');
        
        form.action = `/invoices/${invoiceId}/payment`;
        amountInput.max = remainingAmount;
        amountInput.value = remainingAmount;
        remainingSpan.textContent = remainingAmount.toLocaleString();
        
        modal.showModal();
    }
</script>
@endpush
@endsection