@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',
    ];
@endphp

@extends('layouts.app')

@section('title', $isRtl ? 'دفعة جديدة' : 'New Payment')

@section('content')
<div class="max-w-3xl mx-auto space-y-8">
    <!-- Header -->
    <div class="flex items-center gap-3">
        <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>
        <div>
            <h1 class="text-3xl font-black text-slate-800">{{ $isRtl ? 'دفعة جديدة' : 'New Payment' }}</h1>
            <p class="text-slate-500 mt-1">{{ $isRtl ? 'تسجيل دفعة/إيراد جديد' : 'Record a new payment' }}</p>
        </div>
    </div>

    <form action="{{ route('payments.store') }}" method="POST" class="space-y-8"
          x-data="{
              amount: Number(@json(old('amount', 0))) || 0,
              discount: Number(@json(old('discount', 0))) || 0,
              tax: Number(@json(old('tax', 0))) || 0,
              get total() { return Math.max(0, (this.amount || 0) - (this.discount || 0) + (this.tax || 0)); }
          }">
        @csrf

        @if($errors->any())
            <div class="bg-rose-50 border-2 border-rose-200 rounded-3xl p-6 text-rose-700">
                <div class="flex items-center gap-3 mb-3">
                    <div class="w-10 h-10 bg-rose-500 rounded-xl flex items-center justify-center">
                        <i data-lucide="alert-circle" class="w-5 h-5 text-white"></i>
                    </div>
                    <p class="font-bold">{{ $isRtl ? 'يرجى تصحيح الأخطاء التالية:' : 'Please fix the following errors:' }}</p>
                </div>
                <ul class="list-disc {{ $isRtl ? 'pr-6' : 'pl-6' }} space-y-1 text-sm">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="bg-white rounded-3xl border-2 border-slate-200 p-8 space-y-8">
            <!-- Member -->
            <div>
                <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'العضو (اختياري)' : 'Member (optional)' }}</label>
                @if($member)
                    <input type="hidden" name="member_id" value="{{ $member->id }}">
                    <div class="flex items-center gap-4 p-4 bg-slate-50 rounded-2xl border border-slate-200">
                        <img src="https://ui-avatars.com/api/?name={{ $member->first_name }}&background=random&size=64"
                             class="w-12 h-12 rounded-2xl" alt="">
                        <div>
                            <p class="font-bold text-slate-800">{{ $member->full_name }}</p>
                            <p class="text-sm text-slate-500 font-mono">{{ $member->member_id }}</p>
                        </div>
                    </div>
                @else
                    <select name="member_id"
                            class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
                        <option value="">{{ $isRtl ? 'زائر / بدون عضو' : 'Guest / No member' }}</option>
                        @foreach($members as $m)
                            <option value="{{ $m->id }}" {{ old('member_id') == $m->id ? 'selected' : '' }}>
                                {{ $m->first_name }} {{ $m->last_name }} - {{ $m->member_id }}
                            </option>
                        @endforeach
                    </select>
                @endif
            </div>

            <!-- Type & Method -->
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'نوع الدفعة' : 'Payment Type' }} *</label>
                    <select name="payment_type" required
                            class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
                        @foreach($typeLabels as $typeKey => $typeLabel)
                            <option value="{{ $typeKey }}" {{ old('payment_type', 'subscription') === $typeKey ? 'selected' : '' }}>{{ $typeLabel }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'طريقة الدفع' : 'Payment Method' }} *</label>
                    <select name="payment_method" required
                            class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
                        <option value="cash" {{ old('payment_method') === 'cash' ? 'selected' : '' }}>{{ $isRtl ? 'نقداً' : 'Cash' }}</option>
                        <option value="card" {{ old('payment_method') === 'card' ? 'selected' : '' }}>{{ $isRtl ? 'بطاقة' : 'Card' }}</option>
                        <option value="bank_transfer" {{ old('payment_method') === 'bank_transfer' ? 'selected' : '' }}>{{ $isRtl ? 'تحويل بنكي' : 'Bank Transfer' }}</option>
                        <option value="online" {{ old('payment_method') === 'online' ? 'selected' : '' }}>{{ $isRtl ? 'دفع إلكتروني' : 'Online' }}</option>
                    </select>
                </div>
            </div>

            <!-- Amounts -->
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'المبلغ' : 'Amount' }} *</label>
                    <div class="relative">
                        <input type="number" name="amount" step="0.01" min="0" required
                               value="{{ old('amount') }}"
                               x-model.number="amount"
                               class="w-full {{ $isRtl ? 'pl-16' : 'pr-16' }} px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
                        <span class="absolute {{ $isRtl ? 'left-4' : 'right-4' }} top-1/2 -translate-y-1/2 text-sm font-bold text-slate-500">{{ $currency }}</span>
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'الخصم' : 'Discount' }}</label>
                    <div class="relative">
                        <input type="number" name="discount" step="0.01" min="0"
                               value="{{ old('discount', 0) }}"
                               x-model.number="discount"
                               class="w-full {{ $isRtl ? 'pl-16' : 'pr-16' }} px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
                        <span class="absolute {{ $isRtl ? 'left-4' : 'right-4' }} top-1/2 -translate-y-1/2 text-sm font-bold text-slate-500">{{ $currency }}</span>
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'الضريبة' : 'Tax' }}</label>
                    <div class="relative">
                        <input type="number" name="tax" step="0.01" min="0"
                               value="{{ old('tax', 0) }}"
                               x-model.number="tax"
                               class="w-full {{ $isRtl ? 'pl-16' : 'pr-16' }} px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
                        <span class="absolute {{ $isRtl ? 'left-4' : 'right-4' }} top-1/2 -translate-y-1/2 text-sm font-bold text-slate-500">{{ $currency }}</span>
                    </div>
                </div>
            </div>

            <!-- Total Preview -->
            <div class="bg-emerald-50 border border-emerald-200 rounded-2xl p-5">
                <p class="text-sm text-emerald-700">{{ $isRtl ? 'الإجمالي المتوقع' : 'Expected Total' }}</p>
                <p class="text-3xl font-black text-emerald-700">
                    <span x-text="total.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })"></span>
                    <span class="text-sm font-bold">{{ $currency }}</span>
                </p>
                <p class="text-xs text-emerald-700/80 mt-1">{{ $isRtl ? 'الإجمالي = المبلغ - الخصم + الضريبة' : 'Total = Amount - Discount + Tax' }}</p>
            </div>

            <!-- Description -->
            <div>
                <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'الوصف' : 'Description' }}</label>
                <textarea name="description" rows="2"
                          class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all resize-none">{{ old('description') }}</textarea>
            </div>
        </div>

        <!-- Submit -->
        <div class="flex flex-wrap items-center justify-end gap-3">
            <a href="{{ route('payments.index') }}" class="px-6 py-3 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl font-semibold transition-colors">
                {{ $isRtl ? 'إلغاء' : 'Cancel' }}
            </a>
            <button type="submit" class="px-7 py-3 bg-gradient-to-r from-emerald-500 to-emerald-600 hover:from-emerald-600 hover:to-emerald-700 text-white rounded-xl transition-all flex items-center gap-2 font-bold shadow-lg shadow-emerald-500/30 hover:shadow-emerald-500/50">
                <i data-lucide="check" class="w-5 h-5"></i>
                {{ $isRtl ? 'تسجيل الدفعة' : 'Save Payment' }}
            </button>
        </div>
    </form>
</div>
@endsection