@extends('layouts.app')

@section('content')

<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; margin-top: 15px;">
    <h2 style="color: #d4af37; font-size: 1.5rem; font-weight: bold;">
        {{ app()->getLocale() == 'ar' ? 'تسجيل مصروف جديد' : 'Record New Expense' }}
    </h2>
    <a href="{{ route('admin.expenses.index') }}" style="background: #666; color: white; padding: 0.5rem 1rem; border-radius: 0.5rem; text-decoration: none;">
        {{ app()->getLocale() == 'ar' ? 'عودة' : 'Back' }}
    </a>
</div>

<div style="background: #111; border: 1px solid #333; border-radius: 1rem; padding: 2rem; max-width: 700px; margin: 0 auto;" x-data="expenseForm()">
    <form action="{{ route('admin.expenses.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
                    
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
                        <div>
                            <label class="block text-xs text-gray-500 mb-2 uppercase tracking-wider text-right">{{ app()->getLocale() == 'ar' ? 'تاريخ المصروف' : 'Expense Date' }}</label>
                            <input type="date" name="expense_date" value="{{ date('Y-m-d') }}" required class="w-full bg-black border-gray-800 rounded-lg px-4 py-2.5 text-white focus:border-[#d4af37] outline-none text-sm">
                        </div>
                        <div>
                            <label class="block text-xs text-gray-500 mb-2 uppercase tracking-wider text-right">{{ app()->getLocale() == 'ar' ? 'الفرع' : 'Branch' }}</label>
                            <select name="branch_id" required class="w-full bg-black border-gray-800 rounded-lg px-4 py-2.5 text-white focus:border-[#d4af37] outline-none text-sm text-right">
                                <option value="">{{ app()->getLocale() == 'ar' ? 'اختر الفرع' : 'Select Branch' }}</option>
                                @foreach($assignedBranches as $branch)
                                    <option value="{{ $branch->id }}" {{ (auth()->user()->branch_id == $branch->id) ? 'selected' : '' }}>{{ $branch->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-xs text-gray-500 mb-2 uppercase tracking-wider text-right">{{ app()->getLocale() == 'ar' ? 'نوع المصروف' : 'Expense Category' }}</label>
                            <select name="category_id" required class="w-full bg-black border-gray-800 rounded-lg px-4 py-2.5 text-white focus:border-[#d4af37] outline-none text-sm text-right">
                                <option value="">{{ app()->getLocale() == 'ar' ? 'اختر النوع' : 'Select Category' }}</option>
                                @foreach($categories as $category)
                                    <option value="{{ $category->id }}" data-type="{{ $category->type }}">{{ $category->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                        <div>
                            <label class="block text-xs text-gray-500 mb-2 uppercase tracking-wider text-right">{{ app()->getLocale() == 'ar' ? 'المبلغ' : 'Amount' }}</label>
                            <input type="number" step="0.01" name="amount" required class="w-full bg-black border-gray-800 rounded-lg px-4 py-2.5 text-white focus:border-[#d4af37] outline-none text-sm text-right font-bold text-[#d4af37]" placeholder="0.00">
                        </div>
                        <div>
                            <label class="block text-xs text-gray-500 mb-2 uppercase tracking-wider text-right">{{ app()->getLocale() == 'ar' ? 'طريقة الدفع' : 'Payment Method' }}</label>
                            <select name="payment_method" required class="w-full bg-black border-gray-800 rounded-lg px-4 py-2.5 text-white focus:border-[#d4af37] outline-none text-sm text-right">
                                <option value="cash">{{ app()->getLocale() == 'ar' ? 'نقدي' : 'Cash' }}</option>
                                <option value="mada">{{ app()->getLocale() == 'ar' ? 'مدى' : 'Mada' }}</option>
                                <option value="visa">{{ app()->getLocale() == 'ar' ? 'فيزا' : 'Visa' }}</option>
                                <option value="transfer">{{ app()->getLocale() == 'ar' ? 'تحويل بنكي' : 'Bank Transfer' }}</option>
                                <option value="stcpay">STC Pay</option>
                            </select>
                        </div>
                    </div>

                    <div class="mb-8">
                        <label class="block text-xs text-gray-500 mb-2 uppercase tracking-wider text-right">{{ app()->getLocale() == 'ar' ? 'ربط المصروف بـ' : 'Link Expense To' }}</label>
                        <div class="flex gap-4 mb-4 justify-end">
                            <label class="flex items-center gap-2 cursor-pointer">
                                <span class="text-xs text-gray-400">{{ app()->getLocale() == 'ar' ? 'سيارة' : 'Car' }}</span>
                                <input type="radio" x-model="linkType" value="car" name="ref_type" class="text-[#d4af37] focus:ring-[#d4af37] bg-black border-gray-800">
                            </label>
                            <label class="flex items-center gap-2 cursor-pointer">
                                <span class="text-xs text-gray-400">{{ app()->getLocale() == 'ar' ? 'عقد' : 'Contract' }}</span>
                                <input type="radio" x-model="linkType" value="contract" name="ref_type" class="text-[#d4af37] focus:ring-[#d4af37] bg-black border-gray-800">
                            </label>
                            <label class="flex items-center gap-2 cursor-pointer">
                                <span class="text-xs text-gray-400">{{ app()->getLocale() == 'ar' ? 'عام' : 'General' }}</span>
                                <input type="radio" x-model="linkType" value="general" name="ref_type" class="text-[#d4af37] focus:ring-[#d4af37] bg-black border-gray-800">
                            </label>
                        </div>

                        <div x-show="linkType == 'car'">
                            <select name="car_id" class="w-full bg-black border-gray-800 rounded-lg px-4 py-2.5 text-white focus:border-[#d4af37] outline-none text-sm text-right">
                                <option value="">{{ app()->getLocale() == 'ar' ? 'اختر السيارة' : 'Select Car' }}</option>
                                @foreach($cars as $car)
                                    <option value="{{ $car->id }}">{{ $car->brand?->name }} {{ $car->carModel?->name }} ({{ $car->plate_number }})</option>
                                @endforeach
                            </select>
                        </div>

                        <div x-show="linkType == 'contract'">
                            <select name="rental_id" class="w-full bg-black border-gray-800 rounded-lg px-4 py-2.5 text-white focus:border-[#d4af37] outline-none text-sm text-right">
                                <option value="">{{ app()->getLocale() == 'ar' ? 'اختر العقد' : 'Select Contract' }}</option>
                                @foreach($rentals as $rental)
                                    <option value="{{ $rental->id }}">#{{ $rental->contract_number }} - {{ $rental->customer->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="mb-8">
                        <label class="block text-xs text-gray-500 mb-2 uppercase tracking-wider text-right">{{ app()->getLocale() == 'ar' ? 'الوصف / ملاحظات' : 'Description / Notes' }}</label>
                        <textarea name="description" class="w-full bg-black border-gray-800 rounded-lg px-4 py-2.5 text-white focus:border-[#d4af37] outline-none text-sm text-right h-24"></textarea>
                    </div>

                    <div class="mb-8">
                        <label class="block text-xs text-gray-500 mb-2 uppercase tracking-wider text-right">{{ app()->getLocale() == 'ar' ? 'إرفاق فاتورة (اختياري)' : 'Attach Invoice (Optional)' }}</label>
                        <input type="file" name="attachment_file" class="w-full bg-black border-gray-800 rounded-lg px-4 py-2.5 text-white focus:border-[#d4af37] outline-none text-sm">
                        <p class="text-[10px] text-gray-500 mt-1 text-right">JPG, PNG, PDF (Max 2MB)</p>
                    </div>

        <div style="display: flex; gap: 1rem; margin-top: 2rem;">
            <button type="submit" class="flex-1 bg-[#d4af37] text-black font-bold py-3 rounded-lg hover:bg-[#b08d2a] transition-colors">
                {{ app()->getLocale() == 'ar' ? 'حفظ المصروف' : 'Save Expense' }}
            </button>
            <a href="{{ route('admin.expenses.index') }}" style="flex: 1; background: #666; color: white; padding: 0.75rem 1rem; border-radius: 0.5rem; text-decoration: none; text-align: center; font-weight: bold;">
                {{ app()->getLocale() == 'ar' ? 'إلغاء' : 'Cancel' }}
            </a>
        </div>
    </form>
</div>

<script>
    function expenseForm() {
        return {
            linkType: 'general',
            init() {
                // Initialize
            }
        }
    }
</script>

@endsection