@extends('layouts.admin')

@section('title', 'Create Expense')

@section('page-title', 'Create Expense')

@section('content')
<form method="POST" action="{{ route('admin.expenses.store') }}" class="max-w-3xl mx-auto">
    @csrf

    <div class="bg-white rounded-xl shadow-sm border border-[#e5e7eb] p-6 space-y-6">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block text-sm font-medium text-[#111418] text-gray-900 mb-2">Expense Date <span class="text-red-500">*</span></label>
                <input type="date" name="expense_date" value="{{ old('expense_date', now()->format('Y-m-d')) }}" required class="w-full h-11 rounded-lg border border-[#dbe0e6] bg-white px-3 py-2 text-sm outline-none focus:border-primary focus:ring-1 focus:ring-primary text-gray-900">
            </div>
            <div>
                <label class="block text-sm font-medium text-[#111418] text-gray-900 mb-2">Account <span class="text-red-500">*</span></label>
                <select name="account_id" required class="w-full h-11 rounded-lg border border-[#dbe0e6] bg-white px-3 py-2 text-sm outline-none focus:border-primary focus:ring-1 focus:ring-primary text-gray-900">
                    <option value="">Select account...</option>
                    @foreach($accounts as $account)
                        <option value="{{ $account->id }}" {{ old('account_id') == $account->id ? 'selected' : '' }}>{{ $account->code }} - {{ $account->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-[#111418] text-gray-900 mb-2">Vendor</label>
                <select name="vendor_id" class="w-full h-11 rounded-lg border border-[#dbe0e6] bg-white px-3 py-2 text-sm outline-none focus:border-primary focus:ring-1 focus:ring-primary text-gray-900">
                    <option value="">Select vendor...</option>
                    @foreach($vendors as $vendor)
                        <option value="{{ $vendor->id }}" {{ old('vendor_id') == $vendor->id ? 'selected' : '' }}>{{ $vendor->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-[#111418] text-gray-900 mb-2">Payment Method</label>
                <select name="payment_method" class="w-full h-11 rounded-lg border border-[#dbe0e6] bg-white px-3 py-2 text-sm outline-none focus:border-primary focus:ring-1 focus:ring-primary text-gray-900">
                    <option value="cash" {{ old('payment_method') == 'cash' ? 'selected' : '' }}>Cash</option>
                    <option value="bank_transfer" {{ old('payment_method') == 'bank_transfer' ? 'selected' : '' }}>Bank Transfer</option>
                    <option value="credit_card" {{ old('payment_method') == 'credit_card' ? 'selected' : '' }}>Credit Card</option>
                    <option value="paypal" {{ old('payment_method') == 'paypal' ? 'selected' : '' }}>PayPal</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-[#111418] text-gray-900 mb-2">Amount <span class="text-red-500">*</span></label>
                <input type="number" name="amount" step="0.01" min="0.01" required value="{{ old('amount') }}" class="w-full h-11 rounded-lg border border-[#dbe0e6] bg-white px-3 py-2 text-sm outline-none focus:border-primary focus:ring-1 focus:ring-primary text-gray-900">
            </div>
            <div>
                <label class="block text-sm font-medium text-[#111418] text-gray-900 mb-2">Tax Amount</label>
                <input type="number" name="tax_amount" step="0.01" min="0" value="{{ old('tax_amount', 0) }}" class="w-full h-11 rounded-lg border border-[#dbe0e6] bg-white px-3 py-2 text-sm outline-none focus:border-primary focus:ring-1 focus:ring-primary text-gray-900">
            </div>
            <div>
                <label class="block text-sm font-medium text-[#111418] text-gray-900 mb-2">Category</label>
                <input type="text" name="category" value="{{ old('category') }}" class="w-full h-11 rounded-lg border border-[#dbe0e6] bg-white px-3 py-2 text-sm outline-none focus:border-primary focus:ring-1 focus:ring-primary text-gray-900">
            </div>
            <div>
                <label class="block text-sm font-medium text-[#111418] text-gray-900 mb-2">Currency</label>
                @php
                    $defaultCurrency = \App\Models\Currency::getDefaultCode();
                    $currencies = \App\Models\Currency::where('is_active', true)->orderBy('is_default', 'desc')->orderBy('name')->get();
                @endphp
                <select name="currency" class="w-full h-11 rounded-lg border border-[#dbe0e6] bg-white px-3 py-2 text-sm outline-none focus:border-primary focus:ring-1 focus:ring-primary text-gray-900">
                    @foreach($currencies as $currency)
                        <option value="{{ $currency->code }}" {{ old('currency', $defaultCurrency) == $currency->code ? 'selected' : '' }}>
                            {{ $currency->code }} - {{ $currency->name }}
                        </option>
                    @endforeach
                </select>
            </div>
        </div>
        <div>
            <label class="block text-sm font-medium text-[#111418] text-gray-900 mb-2">Description</label>
            <textarea name="description" rows="3" class="w-full rounded-lg border border-[#dbe0e6] bg-white px-3 py-2 text-sm outline-none focus:border-primary focus:ring-1 focus:ring-primary text-gray-900">{{ old('description') }}</textarea>
        </div>
        <div>
            <label class="block text-sm font-medium text-[#111418] text-gray-900 mb-2">Notes</label>
            <textarea name="notes" rows="3" class="w-full rounded-lg border border-[#dbe0e6] bg-white px-3 py-2 text-sm outline-none focus:border-primary focus:ring-1 focus:ring-primary text-gray-900">{{ old('notes') }}</textarea>
        </div>
        <div class="flex gap-3 pt-4">
            <a href="{{ route('admin.expenses.index') }}" class="px-6 py-2.5 rounded-lg border border-[#dbe0e6] text-[#617589] font-medium hover:bg-background-light transition-colors">Cancel</a>
            <button type="submit" class="px-8 py-2.5 rounded-lg bg-primary text-white font-bold hover:bg-blue-600 transition-all flex items-center gap-2">
                Create Expense <span class="material-symbols-outlined text-lg">save</span>
            </button>
        </div>
    </div>
</form>
@endsection