@extends('layouts.app')

@section('content')

        <div class="flex justify-between items-center">
            <h2 class="font-semibold text-xl text-[#d4af37] leading-tight">
                {{ app()->getLocale() == 'ar' ? 'إنشاء سند صرف جديد' : 'Create New Payment Voucher' }}
            </h2>
            <a href="{{ route('admin.vouchers.index') }}" class="bg-gray-800 text-white px-4 py-2 rounded-lg text-sm font-bold hover:bg-gray-700 transition-colors">
                {{ app()->getLocale() == 'ar' ? 'عودة' : 'Back' }}
            </a>
        </div>


    <div class="py-12">
        <div class="mx-auto sm:px-6 lg:px-8" style="max-width: 850px;">
            <div class="bg-[#111] border border-gray-800 rounded-2xl p-8 shadow-xl">
                <form action="{{ route('admin.vouchers.store') }}" method="POST">
                    @csrf
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
                        <div>
                            <label class="block text-xs text-gray-500 mb-2 uppercase tracking-wider">{{ app()->getLocale() == 'ar' ? 'التاريخ' : 'Voucher Date' }}</label>
                            <input type="date" name="voucher_date" value="{{ date('Y-m-d') }}" class="w-full bg-black border-gray-800 rounded-lg px-4 py-3 text-white focus:border-[#d4af37] outline-none">
                            @error('voucher_date') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
                        </div>

                        <div>
                            <label class="block text-xs text-gray-500 mb-2 uppercase tracking-wider">{{ app()->getLocale() == 'ar' ? 'المبلغ' : 'Amount' }}</label>
                            <input type="number" step="0.01" name="amount" value="{{ request('amount') ?? ($rental->insurance_amount ?? '') }}" class="w-full bg-black border-gray-800 rounded-lg px-4 py-3 text-white focus:border-[#d4af37] outline-none font-bold text-lg">
                            @error('amount') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
                        </div>

                        <div>
                            <label class="block text-xs text-gray-500 mb-2 uppercase tracking-wider">{{ app()->getLocale() == 'ar' ? 'طريقة الدفع' : 'Payment Method' }}</label>
                            <select name="payment_method" class="w-full bg-black border-gray-800 rounded-lg px-4 py-3 text-white focus:border-[#d4af37] outline-none">
                                <option value="cash">Cash</option>
                                <option value="mada">Mada</option>
                                <option value="visa">Visa/MasterCard</option>
                                <option value="transfer">Bank Transfer</option>
                                <option value="stcpay">STC Pay</option>
                            </select>
                            @error('payment_method') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
                        </div>

                        <div>
                            <label class="block text-xs text-gray-500 mb-2 uppercase tracking-wider">{{ app()->getLocale() == 'ar' ? 'سبب الصرف' : 'Reason' }}</label>
                            <select name="reason" class="w-full bg-black border-gray-800 rounded-lg px-4 py-3 text-white focus:border-[#d4af37] outline-none">
                                <option value="Refund of Insurance" {{ request('reason') == 'Refund of Insurance' ? 'selected' : '' }}>{{ app()->getLocale() == 'ar' ? 'استرداد تأمين' : 'Refund of Insurance' }}</option>
                                <option value="Refund of Rental" {{ request('reason') == 'Refund of Rental' ? 'selected' : '' }}>{{ app()->getLocale() == 'ar' ? 'استرداد قيمة إيجار' : 'Refund of Rental' }}</option>
                                <option value="Vehicle Maintenance" {{ request('reason') == 'Vehicle Maintenance' ? 'selected' : '' }}>{{ app()->getLocale() == 'ar' ? 'صيانة مركبة' : 'Vehicle Maintenance' }}</option>
                                <option value="Other" {{ request('reason') == 'Other' ? 'selected' : '' }}>{{ app()->getLocale() == 'ar' ? 'أخرى' : 'Other' }}</option>
                            </select>
                            @error('reason') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
                        </div>

                        <div>
                            <label class="block text-xs text-gray-500 mb-2 uppercase tracking-wider">{{ app()->getLocale() == 'ar' ? 'ربط بالعقد' : 'Related Rental' }}</label>
                            <select name="rental_id" class="w-full bg-black border-gray-800 rounded-lg px-4 py-3 text-white focus:border-[#d4af37] outline-none">
                                <option value="">{{ app()->getLocale() == 'ar' ? 'غير مرتبط بعقد' : 'Not linked to a rental' }}</option>
                                @foreach($rentals as $r)
                                    <option value="{{ $r->id }}" {{ ($rental && $rental->id == $r->id) ? 'selected' : '' }}>
                                        #{{ $r->contract_number }} - {{ $r->customer->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div>
                            <label class="block text-xs text-gray-500 mb-2 uppercase tracking-wider">{{ app()->getLocale() == 'ar' ? 'العميل' : 'Customer' }}</label>
                            <select name="customer_id" class="w-full bg-black border-gray-800 rounded-lg px-4 py-3 text-white focus:border-[#d4af37] outline-none">
                                <option value="">{{ app()->getLocale() == 'ar' ? 'اختر عميل' : 'Select Customer' }}</option>
                                @foreach($customers as $c)
                                    <option value="{{ $c->id }}" {{ ($rental && $rental->customer_id == $c->id) ? 'selected' : '' }}>
                                        {{ $c->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="mb-8">
                        <label class="block text-xs text-gray-500 mb-2 uppercase tracking-wider">{{ app()->getLocale() == 'ar' ? 'ملاحظات إضافية' : 'Additional Notes' }}</label>
                        <textarea name="notes" rows="3" class="w-full bg-black border-gray-800 rounded-lg px-4 py-3 text-white focus:border-[#d4af37] outline-none"></textarea>
                    </div>

                    <div class="flex gap-4">
                        <button type="submit" class="flex-1 bg-[#d4af37] text-black py-4 rounded-xl font-bold hover:bg-[#b08d2a] transition-all shadow-lg shadow-[#d4af37]/10 uppercase tracking-widest">
                            {{ app()->getLocale() == 'ar' ? 'حفظ وإصدار السند' : 'Save & Issue Voucher' }}
                        </button>
                        <a href="{{ route('admin.vouchers.index') }}" class="px-8 bg-gray-800 text-white flex items-center justify-center rounded-xl font-bold hover:bg-gray-700 transition-all">
                            {{ app()->getLocale() == 'ar' ? 'إلغاء' : 'Cancel' }}
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection