@extends('layouts.app')

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

    $typeLabels = [
        'sale' => $isRtl ? 'مبيعات' : 'Sale',
        'subscription' => $isRtl ? 'اشتراك' : 'Subscription',
        'service' => $isRtl ? 'خدمة' : 'Service',
        'purchase' => $isRtl ? 'مشتريات' : 'Purchase',
    ];

    $statusLabels = [
        'draft' => $isRtl ? 'مسودة' : 'Draft',
        'sent' => $isRtl ? 'مرسلة' : 'Sent',
        'paid' => $isRtl ? 'مدفوعة' : 'Paid',
        'partial' => $isRtl ? 'جزئية' : 'Partial',
        'overdue' => $isRtl ? 'متأخرة' : 'Overdue',
        'cancelled' => $isRtl ? 'ملغاة' : 'Cancelled',
    ];

    $paymentStatusLabels = [
        'unpaid' => $isRtl ? 'غير مدفوعة' : 'Unpaid',
        'partial' => $isRtl ? 'مدفوعة جزئياً' : 'Partial',
        'paid' => $isRtl ? 'مدفوعة' : 'Paid',
    ];

    $statusColors = [
        'draft' => 'bg-slate-100 text-slate-700',
        'sent' => 'bg-blue-100 text-blue-700',
        'paid' => 'bg-emerald-100 text-emerald-700',
        'partial' => 'bg-amber-100 text-amber-700',
        'overdue' => 'bg-rose-100 text-rose-700',
        'cancelled' => 'bg-slate-100 text-slate-600',
    ];

    $computedStatus = $invoice->status;
    if ($invoice->due_date && $invoice->due_date->isPast() && (float) $invoice->remaining_amount > 0) {
        $computedStatus = 'overdue';
    }
@endphp

@section('title', ($isRtl ? 'فاتورة' : 'Invoice') . ' - ' . $invoice->invoice_number)

@section('content')
<div class="max-w-6xl mx-auto space-y-8">
    <div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4">
        <div class="flex items-start gap-3">
            <a href="{{ route('invoices.index') }}" class="p-2 hover:bg-slate-100 rounded-xl transition-colors mt-1">
                <i data-lucide="arrow-{{ $isRtl ? 'right' : 'left' }}" class="w-5 h-5 text-slate-600"></i>
            </a>
            <div>
                <div class="flex items-center gap-3 flex-wrap">
                    <h1 class="text-3xl font-black text-slate-800">{{ $invoice->invoice_number }}</h1>
                    <span class="px-3 py-1 rounded-lg text-xs font-bold {{ $statusColors[$computedStatus] ?? 'bg-slate-100 text-slate-700' }}">
                        {{ $statusLabels[$computedStatus] ?? $computedStatus }}
                    </span>
                    <span class="px-3 py-1 rounded-lg text-xs font-bold bg-slate-100 text-slate-700">
                        {{ $typeLabels[$invoice->type] ?? $invoice->type }}
                    </span>
                </div>
                <p class="text-slate-500 mt-1">
                    {{ $isRtl ? 'حالة الدفع:' : 'Payment status:' }}
                    <span class="font-bold text-slate-700">{{ $paymentStatusLabels[$invoice->payment_status] ?? $invoice->payment_status }}</span>
                </p>
            </div>
        </div>

        <div class="flex flex-wrap items-center gap-3">
            <a href="{{ route('invoices.print', $invoice) }}" target="_blank"
               class="inline-flex items-center gap-2 px-5 py-3 bg-white border-2 border-slate-200 hover:bg-slate-50 text-slate-700 rounded-xl font-semibold transition-colors">
                <i data-lucide="printer" class="w-5 h-5"></i>
                {{ $isRtl ? 'طباعة' : 'Print' }}
            </a>
            <a href="{{ route('invoices.pdf', $invoice) }}" target="_blank"
               class="inline-flex items-center gap-2 px-5 py-3 bg-white border-2 border-slate-200 hover:bg-slate-50 text-slate-700 rounded-xl font-semibold transition-colors">
                <i data-lucide="file-down" class="w-5 h-5"></i>
                {{ $isRtl ? 'PDF' : 'PDF' }}
            </a>

            @if($invoice->payment_status !== 'paid')
                <a href="{{ route('invoices.edit', $invoice) }}"
                   class="inline-flex items-center gap-2 px-5 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-xl font-semibold transition-colors">
                    <i data-lucide="pencil" class="w-5 h-5"></i>
                    {{ $isRtl ? 'تعديل' : 'Edit' }}
                </a>
            @endif

            @if((float) $invoice->remaining_amount > 0)
                <button type="button" onclick="openPaymentModal()"
                        class="inline-flex items-center gap-2 px-5 py-3 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl font-semibold transition-colors">
                    <i data-lucide="credit-card" class="w-5 h-5"></i>
                    {{ $isRtl ? 'إضافة دفعة' : 'Add Payment' }}
                </button>
            @endif

            @if((float) $invoice->paid_amount <= 0)
                <form action="{{ route('invoices.destroy', $invoice) }}" method="POST"
                      onsubmit="return confirm('{{ $isRtl ? 'حذف الفاتورة؟' : 'Delete invoice?' }}')">
                    @csrf
                    @method('DELETE')
                    <button type="submit"
                            class="inline-flex items-center gap-2 px-5 py-3 bg-rose-600 hover:bg-rose-700 text-white rounded-xl font-semibold transition-colors">
                        <i data-lucide="trash-2" class="w-5 h-5"></i>
                        {{ $isRtl ? 'حذف' : 'Delete' }}
                    </button>
                </form>
            @endif
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="bg-white rounded-3xl border-2 border-slate-200 p-7 lg:col-span-2 space-y-6">
            <h2 class="text-xl font-black text-slate-800">{{ $isRtl ? 'العميل والتواريخ' : 'Customer & Dates' }}</h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-5 text-sm">
                <div class="p-4 bg-slate-50 rounded-2xl border border-slate-200">
                    <p class="text-slate-500">{{ $isRtl ? 'العميل' : 'Customer' }}</p>
                    <p class="font-black text-slate-800 mt-1">{{ $invoice->customer_name_display }}</p>
                    @if($invoice->customer_phone)
                        <p class="text-slate-600 mt-1">{{ $invoice->customer_phone }}</p>
                    @endif
                </div>
                <div class="p-4 bg-slate-50 rounded-2xl border border-slate-200">
                    <p class="text-slate-500">{{ $isRtl ? 'أنشئت بواسطة' : 'Created by' }}</p>
                    <p class="font-black text-slate-800 mt-1">{{ $invoice->createdBy?->name ?? '—' }}</p>
                    <p class="text-slate-600 mt-1">{{ optional($invoice->created_at)->format('Y-m-d H:i') }}</p>
                </div>
                <div class="p-4 bg-slate-50 rounded-2xl border border-slate-200">
                    <p class="text-slate-500">{{ $isRtl ? 'تاريخ الفاتورة' : 'Invoice date' }}</p>
                    <p class="font-black text-slate-800 mt-1">{{ optional($invoice->invoice_date)->format('Y-m-d') }}</p>
                </div>
                <div class="p-4 bg-slate-50 rounded-2xl border border-slate-200">
                    <p class="text-slate-500">{{ $isRtl ? 'تاريخ الاستحقاق' : 'Due date' }}</p>
                    <p class="font-black text-slate-800 mt-1">{{ $invoice->due_date ? $invoice->due_date->format('Y-m-d') : '—' }}</p>
                </div>
            </div>

            @if($invoice->notes)
                <div class="p-4 bg-slate-50 rounded-2xl border border-slate-200">
                    <p class="text-slate-500 text-sm">{{ $isRtl ? 'ملاحظات' : 'Notes' }}</p>
                    <p class="text-slate-700 mt-1">{{ $invoice->notes }}</p>
                </div>
            @endif
        </div>

        <div class="bg-white rounded-3xl border-2 border-slate-200 p-7 space-y-4">
            <h2 class="text-xl font-black text-slate-800">{{ $isRtl ? 'الإجماليات' : 'Totals' }}</h2>

            <div class="space-y-2 text-sm">
                <div class="flex justify-between">
                    <span class="text-slate-600">{{ $isRtl ? 'المجموع الفرعي' : 'Subtotal' }}</span>
                    <span class="font-black text-slate-800">{{ number_format((float) $invoice->subtotal, 2) }} <span class="text-xs text-slate-500">{{ $currency }}</span></span>
                </div>
                <div class="flex justify-between">
                    <span class="text-slate-600">{{ $isRtl ? 'الخصم' : 'Discount' }} ({{ number_format((float) $invoice->discount_percent, 0) }}%)</span>
                    <span class="font-black text-slate-800">{{ number_format((float) $invoice->discount, 2) }} <span class="text-xs text-slate-500">{{ $currency }}</span></span>
                </div>
                <div class="flex justify-between">
                    <span class="text-slate-600">{{ $isRtl ? 'الضريبة' : 'Tax' }} ({{ number_format((float) $invoice->tax_rate, 0) }}%)</span>
                    <span class="font-black text-slate-800">{{ number_format((float) $invoice->tax_amount, 2) }} <span class="text-xs text-slate-500">{{ $currency }}</span></span>
                </div>
                <div class="flex justify-between pt-2 border-t border-slate-200">
                    <span class="font-black text-slate-900">{{ $isRtl ? 'الإجمالي' : 'Total' }}</span>
                    <span class="font-black text-slate-900 text-lg">{{ number_format((float) $invoice->total, 2) }} <span class="text-xs text-slate-500">{{ $currency }}</span></span>
                </div>
                <div class="flex justify-between">
                    <span class="text-slate-600">{{ $isRtl ? 'المدفوع' : 'Paid' }}</span>
                    <span class="font-black text-emerald-700">{{ number_format((float) $invoice->paid_amount, 2) }} <span class="text-xs text-slate-500">{{ $currency }}</span></span>
                </div>
                <div class="flex justify-between">
                    <span class="text-slate-600">{{ $isRtl ? 'المتبقي' : 'Remaining' }}</span>
                    <span class="font-black text-rose-700">{{ number_format((float) $invoice->remaining_amount, 2) }} <span class="text-xs text-slate-500">{{ $currency }}</span></span>
                </div>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-3xl border-2 border-slate-200 overflow-hidden">
        <div class="p-6 border-b-2 border-slate-200">
            <h2 class="text-xl font-black text-slate-800">{{ $isRtl ? 'بنود الفاتورة' : 'Invoice Items' }}</h2>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-slate-50 border-b border-slate-200">
                    <tr class="text-sm font-bold text-slate-700">
                        <th class="px-6 py-4 text-{{ $isRtl ? 'right' : 'left' }}">{{ $isRtl ? 'الوصف' : 'Description' }}</th>
                        <th class="px-6 py-4 text-center">{{ $isRtl ? 'الكمية' : 'Qty' }}</th>
                        <th class="px-6 py-4 text-center">{{ $isRtl ? 'سعر الوحدة' : 'Unit price' }}</th>
                        <th class="px-6 py-4 text-center">{{ $isRtl ? 'الإجمالي' : 'Total' }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @foreach($invoice->items as $item)
                        <tr class="hover:bg-slate-50/50 transition-colors">
                            <td class="px-6 py-4">
                                <p class="font-bold text-slate-800">{{ $item->description }}</p>
                                @if($item->product)
                                    <p class="text-xs text-slate-500 mt-1">{{ $isRtl ? 'منتج:' : 'Product:' }} {{ $isRtl && $item->product->name_ar ? $item->product->name_ar : $item->product->name }}</p>
                                @elseif($item->membershipPlan)
                                    <p class="text-xs text-slate-500 mt-1">{{ $isRtl ? 'خطة:' : 'Plan:' }} {{ $isRtl && $item->membershipPlan->name_ar ? $item->membershipPlan->name_ar : $item->membershipPlan->name }}</p>
                                @endif
                            </td>
                            <td class="px-6 py-4 text-center font-semibold">{{ (int) $item->quantity }}</td>
                            <td class="px-6 py-4 text-center">{{ number_format((float) $item->unit_price, 2) }} <span class="text-xs text-slate-500">{{ $currency }}</span></td>
                            <td class="px-6 py-4 text-center font-black text-slate-800">{{ number_format((float) $item->total, 2) }} <span class="text-xs text-slate-500">{{ $currency }}</span></td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <div class="bg-white rounded-3xl border-2 border-slate-200 overflow-hidden">
        <div class="p-6 border-b-2 border-slate-200 flex items-center justify-between">
            <h2 class="text-xl font-black text-slate-800">{{ $isRtl ? 'الدفعات' : 'Payments' }}</h2>
            @if((float) $invoice->remaining_amount > 0)
                <button type="button" onclick="openPaymentModal()"
                        class="inline-flex items-center gap-2 px-5 py-3 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl font-semibold transition-colors">
                    <i data-lucide="plus" class="w-4 h-4"></i>
                    {{ $isRtl ? 'دفعة جديدة' : 'New Payment' }}
                </button>
            @endif
        </div>

        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-slate-50 border-b border-slate-200">
                    <tr class="text-sm font-bold text-slate-700">
                        <th class="px-6 py-4 text-{{ $isRtl ? 'right' : 'left' }}">{{ $isRtl ? 'التاريخ' : 'Date' }}</th>
                        <th class="px-6 py-4 text-center">{{ $isRtl ? 'المبلغ' : 'Amount' }}</th>
                        <th class="px-6 py-4 text-center">{{ $isRtl ? 'الطريقة' : 'Method' }}</th>
                        <th class="px-6 py-4 text-center">{{ $isRtl ? 'المرجع' : 'Reference' }}</th>
                        <th class="px-6 py-4 text-center">{{ $isRtl ? 'المستلم' : 'Received by' }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($invoice->payments as $pay)
                        <tr class="hover:bg-slate-50/50 transition-colors">
                            <td class="px-6 py-4">{{ optional($pay->payment_date)->format('Y-m-d') }}</td>
                            <td class="px-6 py-4 text-center font-black text-slate-800">{{ number_format((float) $pay->amount, 2) }} <span class="text-xs text-slate-500">{{ $currency }}</span></td>
                            <td class="px-6 py-4 text-center">{{ $pay->payment_method }}</td>
                            <td class="px-6 py-4 text-center font-mono text-slate-700">{{ $pay->reference ?: '—' }}</td>
                            <td class="px-6 py-4 text-center">{{ $pay->receivedBy?->name ?? '—' }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="px-6 py-10 text-center text-slate-500">
                                <i data-lucide="credit-card" class="w-10 h-10 mx-auto mb-3 text-slate-300"></i>
                                {{ $isRtl ? 'لا توجد دفعات' : 'No payments yet' }}
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<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 method="POST" action="{{ route('invoices.payment', $invoice) }}">
            @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" step="0.01" required max="{{ (float) $invoice->remaining_amount }}"
                           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:' }} {{ number_format((float) $invoice->remaining_amount, 2) }} {{ $currency }}</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>
                    <label class="block text-sm font-medium text-slate-700 mb-2">{{ $isRtl ? 'ملاحظات' : 'Notes' }}</label>
                    <textarea name="notes" rows="2"
                              class="w-full border border-slate-200 rounded-xl p-3 focus:ring-2 focus:ring-emerald-500/30 resize-none"></textarea>
                </div>
            </div>
            <div class="flex gap-3 mt-6">
                <button type="button" onclick="closePaymentModal()"
                        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>
    function openPaymentModal() {
        document.getElementById('paymentModal')?.showModal();
    }
    function closePaymentModal() {
        document.getElementById('paymentModal')?.close();
    }
</script>
@endpush
@endsection