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

    $typeLabels = [
        'subscription' => $isRtl ? 'اشتراك' : 'Subscription',
        'class' => $isRtl ? 'حصة' : 'Class',
        'personal_training' => $isRtl ? 'تدريب شخصي' : 'Personal Training',
        'product' => $isRtl ? 'منتج' : 'Product',
        'other' => $isRtl ? 'أخرى' : 'Other',
    ];

    $methodLabels = [
        'cash' => $isRtl ? 'نقداً' : 'Cash',
        'card' => $isRtl ? 'بطاقة' : 'Card',
        'bank_transfer' => $isRtl ? 'تحويل بنكي' : 'Bank Transfer',
        'online' => $isRtl ? 'دفع إلكتروني' : 'Online',
    ];

    $statusLabels = [
        'completed' => $isRtl ? 'مكتمل' : 'Completed',
        'refunded' => $isRtl ? 'مسترد' : 'Refunded',
        'pending' => $isRtl ? 'معلق' : 'Pending',
    ];

    $statusColors = [
        'completed' => 'bg-emerald-100 text-emerald-700',
        'refunded' => 'bg-rose-100 text-rose-700',
        'pending' => 'bg-amber-100 text-amber-700',
    ];
@endphp

@extends('layouts.app')

@section('title', $isRtl ? 'تفاصيل الدفعة' : 'Payment Details')

@section('content')
<div class="space-y-8">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <div class="flex items-center gap-3 mb-2">
                <a href="{{ route('payments.index') }}" class="p-2 hover:bg-slate-100 rounded-xl transition-colors">
                    <i data-lucide="arrow-{{ $isRtl ? 'right' : 'left' }}" class="w-5 h-5 text-slate-600"></i>
                </a>
                <h1 class="text-3xl font-black text-slate-800">{{ $isRtl ? 'تفاصيل الدفعة' : 'Payment Details' }}</h1>
            </div>
            <p class="text-slate-500">
                {{ $isRtl ? 'رقم الفاتورة:' : 'Invoice:' }}
                <span class="font-mono font-bold text-slate-800">{{ $payment->invoice_number }}</span>
            </p>
        </div>

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

            @if(($payment->status ?? 'completed') === 'completed')
                <form action="{{ route('payments.refund', $payment) }}" method="POST"
                      onsubmit="return confirm('{{ $isRtl ? 'هل تريد استرداد هذه الدفعة؟' : 'Refund this payment?' }}')">
                    @csrf
                    <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 shadow-lg shadow-rose-500/20 transition-all">
                        <i data-lucide="rotate-ccw" class="w-5 h-5"></i>
                        {{ $isRtl ? 'استرداد' : 'Refund' }}
                    </button>
                </form>
            @endif
        </div>
    </div>

    <!-- Summary -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
        <div class="bg-white rounded-3xl p-6 border-2 border-slate-200">
            <p class="text-slate-500 text-sm mb-2">{{ $isRtl ? 'الإجمالي' : 'Total' }}</p>
            <p class="text-3xl font-black text-slate-800">{{ number_format((float)$payment->total, 2) }}</p>
            <p class="text-xs text-slate-500 mt-1">{{ $currency }}</p>
        </div>

        <div class="bg-white rounded-3xl p-6 border-2 border-slate-200">
            <p class="text-slate-500 text-sm mb-2">{{ $isRtl ? 'الحالة' : 'Status' }}</p>
            @php $statusKey = $payment->status ?? 'completed'; @endphp
            <span class="inline-flex px-4 py-2 rounded-xl text-sm font-bold {{ $statusColors[$statusKey] ?? 'bg-slate-100 text-slate-700' }}">
                {{ $statusLabels[$statusKey] ?? $statusKey }}
            </span>
            <p class="text-xs text-slate-500 mt-3">{{ $isRtl ? 'التاريخ:' : 'Date:' }} <span class="font-semibold text-slate-700">{{ $payment->created_at->format('Y-m-d H:i') }}</span></p>
        </div>

        <div class="bg-white rounded-3xl p-6 border-2 border-slate-200">
            <p class="text-slate-500 text-sm mb-2">{{ $isRtl ? 'النوع' : 'Type' }}</p>
            <p class="text-xl font-black text-slate-800">{{ $typeLabels[$payment->payment_type] ?? $payment->payment_type }}</p>
            <p class="text-xs text-slate-500 mt-3">{{ $isRtl ? 'الطريقة:' : 'Method:' }} <span class="font-semibold text-slate-700">{{ $methodLabels[$payment->payment_method] ?? $payment->payment_method }}</span></p>
        </div>

        <div class="bg-white rounded-3xl p-6 border-2 border-slate-200">
            <p class="text-slate-500 text-sm mb-2">{{ $isRtl ? 'المستلم' : 'Received By' }}</p>
            <p class="text-xl font-black text-slate-800">{{ $payment->receivedBy->name ?? ($isRtl ? '—' : '—') }}</p>
            <p class="text-xs text-slate-500 mt-3">{{ $isRtl ? 'عضو:' : 'Member:' }}
                @if($payment->member)
                    <a href="{{ route('members.show', $payment->member) }}" class="font-semibold text-emerald-700 hover:text-emerald-800">
                        {{ $payment->member->full_name }}
                    </a>
                @else
                    <span class="font-semibold text-slate-700">{{ $isRtl ? 'زائر' : 'Guest' }}</span>
                @endif
            </p>
        </div>
    </div>

    <!-- Breakdown -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="lg:col-span-2 bg-white rounded-3xl p-6 border-2 border-slate-200">
            <h3 class="text-lg font-bold text-slate-800 mb-4">{{ $isRtl ? 'تفاصيل المبلغ' : 'Amount Details' }}</h3>
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                <div class="p-4 bg-slate-50 rounded-2xl border border-slate-200">
                    <p class="text-xs text-slate-500 mb-1">{{ $isRtl ? 'المبلغ' : 'Amount' }}</p>
                    <p class="font-black text-slate-800">{{ number_format((float)$payment->amount, 2) }} <span class="text-xs text-slate-500">{{ $currency }}</span></p>
                </div>
                <div class="p-4 bg-slate-50 rounded-2xl border border-slate-200">
                    <p class="text-xs text-slate-500 mb-1">{{ $isRtl ? 'الخصم' : 'Discount' }}</p>
                    <p class="font-black text-slate-800">{{ number_format((float)$payment->discount, 2) }} <span class="text-xs text-slate-500">{{ $currency }}</span></p>
                </div>
                <div class="p-4 bg-slate-50 rounded-2xl border border-slate-200">
                    <p class="text-xs text-slate-500 mb-1">{{ $isRtl ? 'الضريبة' : 'Tax' }}</p>
                    <p class="font-black text-slate-800">{{ number_format((float)$payment->tax, 2) }} <span class="text-xs text-slate-500">{{ $currency }}</span></p>
                </div>
            </div>

            @if($payment->description)
                <div class="mt-4 p-4 bg-slate-50 rounded-2xl border border-slate-200">
                    <p class="text-xs text-slate-500 mb-1">{{ $isRtl ? 'الوصف' : 'Description' }}</p>
                    <p class="text-slate-700 leading-7">{{ $payment->description }}</p>
                </div>
            @endif
        </div>

        <div class="bg-white rounded-3xl p-6 border-2 border-slate-200">
            <h3 class="text-lg font-bold text-slate-800 mb-4">{{ $isRtl ? 'ارتباطات' : 'Links' }}</h3>

            @if($payment->subscription)
                <a href="{{ route('subscriptions.show', $payment->subscription) }}"
                   class="block p-4 bg-slate-50 rounded-2xl border border-slate-200 hover:border-emerald-300 transition-all">
                    <div class="flex items-center justify-between gap-3">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 bg-emerald-100 rounded-xl flex items-center justify-center">
                                <i data-lucide="credit-card" class="w-5 h-5 text-emerald-700"></i>
                            </div>
                            <div>
                                <p class="font-bold text-slate-800">{{ $isRtl ? 'اشتراك' : 'Subscription' }}</p>
                                <p class="text-xs text-slate-500">{{ $payment->subscription->membershipPlan->name ?? '' }}</p>
                            </div>
                        </div>
                        <i data-lucide="chevron-{{ $isRtl ? 'left' : 'right' }}" class="w-5 h-5 text-slate-400"></i>
                    </div>
                </a>
            @else
                <div class="p-4 bg-slate-50 rounded-2xl border border-slate-200 text-slate-500">
                    {{ $isRtl ? 'لا توجد ارتباطات' : 'No links' }}
                </div>
            @endif
        </div>
    </div>
</div>
@endsection