@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' ? 'إنشاء سند قبض جديد' : 'Create New Receipt' }}
    </h2>
    <a href="{{ route('admin.receipts.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;">
                <form action="{{ route('admin.receipts.store') }}" method="POST" x-data="receiptForm()">
                    @csrf
                    
                    @if($rental)
                        <input type="hidden" name="rental_id" value="{{ $rental->id }}">
                        <div class="bg-black/50 border border-gray-800 rounded-xl p-4 mb-8 flex justify-between items-center">
                            <div>
                                <div class="text-xs text-gray-500 uppercase mb-1">{{ app()->getLocale() == 'ar' ? 'العقد المختار' : 'Selected Contract' }}</div>
                                <div class="text-white font-bold">{{ $rental->contract_number }}</div>
                                <div class="text-xs text-gray-400">{{ $rental->customer->name }}</div>
                            </div>
                            <div class="text-right">
                                <div class="text-xs text-gray-500 uppercase mb-1">{{ app()->getLocale() == 'ar' ? 'المتبقي' : 'Remaining' }}</div>
                                <div class="text-[#d4af37] font-bold">{{ number_format($rental->remaining_amount, 2) }} SAR</div>
                            </div>
                        </div>
                    @else
                        <div class="mb-6">
                            <label class="block text-xs text-gray-500 mb-3 uppercase tracking-wider font-bold">{{ app()->getLocale() == 'ar' ? 'نوع السند' : 'Receipt Type' }}</label>
                            <div class="grid grid-cols-3 gap-3 mb-6">
                                <button type="button" @click="receiptType = 'rental'" :class="receiptType === 'rental' ? 'bg-[#d4af37] text-black' : 'bg-gray-800 text-gray-400'" class="px-4 py-2 rounded-lg font-bold text-sm transition-colors">
                                    {{ app()->getLocale() == 'ar' ? 'عقد' : 'Contract' }}
                                </button>
                                <button type="button" @click="receiptType = 'general'" :class="receiptType === 'general' ? 'bg-[#d4af37] text-black' : 'bg-gray-800 text-gray-400'" class="px-4 py-2 rounded-lg font-bold text-sm transition-colors">
                                    {{ app()->getLocale() == 'ar' ? 'عام' : 'General' }}
                                </button>
                                <button type="button" @click="receiptType = 'other'" :class="receiptType === 'other' ? 'bg-[#d4af37] text-black' : 'bg-gray-800 text-gray-400'" class="px-4 py-2 rounded-lg font-bold text-sm transition-colors">
                                    {{ app()->getLocale() == 'ar' ? 'أخرى' : 'Other' }}
                                </button>
                            </div>

                            <div x-show="receiptType === 'rental'" x-transition>
                                <label class="block text-xs text-gray-500 mb-2 uppercase tracking-wider">{{ app()->getLocale() == 'ar' ? 'اختر العقد' : 'Select Contract' }}</label>
                                <select name="rental_id" x-model="rentalId" @change="loadRentalData()" class="w-full bg-black border-gray-800 rounded-lg px-4 py-2.5 text-white focus:border-[#d4af37] outline-none text-sm">
                                    <option value="">{{ app()->getLocale() == 'ar' ? '--- اختر عقداً مفتوحاً ---' : '--- Select an open contract ---' }}</option>
                                    @foreach($rentals as $r)
                                        <option value="{{ $r->id }}" data-customer="{{ $r->customer->name }}" data-remaining="{{ $r->remaining_amount }}">{{ $r->contract_number }} - {{ $r->customer->name }} ({{ number_format($r->remaining_amount, 2) }} SAR)</option>
                                    @endforeach
                                </select>
                            </div>

                            <div x-show="receiptType !== 'rental'" x-transition>
                                <label class="block text-xs text-gray-500 mb-2 uppercase tracking-wider">{{ app()->getLocale() == 'ar' ? 'اسم العميل' : 'Customer Name' }}</label>
                                <select name="customer_id" x-model="customerId" class="w-full bg-black border-gray-800 rounded-lg px-4 py-2.5 text-white focus:border-[#d4af37] outline-none text-sm" required>
                                    <option value="">{{ app()->getLocale() == 'ar' ? '--- اختر العميل ---' : '--- Select Customer ---' }}</option>
                                    @foreach($customers as $customer)
                                        <option value="{{ $customer->id }}">{{ $customer->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    @endif

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                        <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 ? $rental->remaining_amount : '')) }}" class="w-full bg-black border-gray-800 rounded-lg px-4 py-2.5 text-white focus:border-[#d4af37] outline-none text-sm" required>
                        </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-2.5 text-white focus:border-[#d4af37] outline-none text-sm" required>
                                <option value="cash">Cash</option>
                                <option value="mada">Mada</option>
                                <option value="visa">Visa/MasterCard</option>
                                <option value="stcpay">STC Pay</option>
                                <option value="transfer">Bank Transfer</option>
                            </select>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                        <div>
                            <label class="block text-xs text-gray-500 mb-2 uppercase tracking-wider">{{ app()->getLocale() == 'ar' ? 'نوع الدفع' : 'Payment Type' }}</label>
                            <select name="payment_type" class="w-full bg-black border-gray-800 rounded-lg px-4 py-2.5 text-white focus:border-[#d4af37] outline-none text-sm" required>
                                <option value="partial" {{ request('type') == 'partial' ? 'selected' : '' }}>Partial Payment</option>
                                <option value="full" {{ request('type') == 'full' ? 'selected' : '' }}>Full Payment</option>
                                <option value="deposit" {{ request('type') == 'deposit' ? 'selected' : '' }}>Deposit</option>
                                <option value="insurance" {{ request('type') == 'insurance' ? 'selected' : '' }}>Insurance</option>
                                <option value="final_settlement" {{ request('type') == 'final_settlement' ? 'selected' : '' }}>Final Settlement</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-xs text-gray-500 mb-2 uppercase tracking-wider">{{ app()->getLocale() == 'ar' ? 'رقم المرجع' : 'Reference Number' }}</label>
                            <input type="text" name="reference_number" class="w-full bg-black border-gray-800 rounded-lg px-4 py-2.5 text-white focus:border-[#d4af37] outline-none text-sm" placeholder="{{ app()->getLocale() == 'ar' ? 'اختياري' : 'Optional' }}">
                        </div>
                    </div>

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

                    <div class="flex gap-4">
                        <button type="submit" class="flex-1 bg-[#d4af37] text-black py-3 rounded-xl font-bold hover:bg-[#b08d2a] transition-all">
                            {{ app()->getLocale() == 'ar' ? 'حفظ وإصدار السند' : 'Save & Issue Receipt' }}
                        </button>
                        <a href="{{ $rental ? route('admin.rentals.show', $rental->id) : route('admin.receipts.index') }}" class="px-8 py-3 rounded-xl bg-gray-800 text-white font-bold hover:bg-gray-700 transition-all">
                            {{ app()->getLocale() == 'ar' ? 'إلغاء' : 'Cancel' }}
                        </a>
                    </div>
                </form>
</div>

<script>
    function receiptForm() {
        return {
            receiptType: 'rental',
            rentalId: '',
            customerId: '',
            init() {
                // Initialize form
            },
            loadRentalData() {
                // Load rental data when selected
                const select = document.querySelector('select[name="rental_id"]');
                if (select && select.value) {
                    const option = select.options[select.selectedIndex];
                    const remaining = option.getAttribute('data-remaining');
                    const amountInput = document.querySelector('input[name="amount"]');
                    if (amountInput) {
                        amountInput.value = remaining;
                    }
                }
            }
        }
    }
</script>

@endsection