@extends('layouts.app')
@section('title', isset($expense) ? 'Edit Expense' : 'Add Expense')
@section('page-title', isset($expense) ? 'Edit Expense' : 'Add Expense')

@section('content')
<div class="max-w-2xl">
<form method="POST" action="{{ isset($expense) ? route('expenses.update', $expense) : route('expenses.store') }}"
      x-data="{ type: '{{ old('expense_type', $expense->expense_type ?? 'miscellaneous') }}', gstApplicable: {{ old('gst_applicable', $expense->gst_applicable ?? false) ? 'true' : 'false' }} }">
    @csrf
    @if(isset($expense)) @method('PUT') @endif

    <div class="card space-y-5">
        <h2 class="text-base font-bold text-slate-800 pb-2 border-b border-slate-100">Expense Details</h2>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <label class="form-label">Expense Date <span class="text-red-500">*</span></label>
                <input type="date" name="expense_date"
                       value="{{ old('expense_date', $expense->expense_date ?? today()->format('Y-m-d')) }}"
                       class="form-input" required>
                @error('expense_date')<p class="text-xs text-red-500 mt-1">{{ $message }}</p>@enderror
            </div>
            <div>
                <label class="form-label">Expense Type <span class="text-red-500">*</span></label>
                <select name="expense_type" class="form-input" x-model="type" required>
                    @foreach($types as $key => $t)
                    <option value="{{ $key }}" {{ old('expense_type', $expense->expense_type ?? '') === $key ? 'selected' : '' }}>
                        {{ $t['icon'] }} {{ $t['label'] }}
                    </option>
                    @endforeach
                </select>
                @error('expense_type')<p class="text-xs text-red-500 mt-1">{{ $message }}</p>@enderror
            </div>
            <div>
                <label class="form-label">Category / Sub-type <span class="text-red-500">*</span></label>
                <input type="text" name="category"
                       value="{{ old('category', $expense->category ?? '') }}"
                       class="form-input" required placeholder="e.g. Electricity, Raw Cotton, Rent">
                @error('category')<p class="text-xs text-red-500 mt-1">{{ $message }}</p>@enderror
            </div>
            <div>
                <label class="form-label">Vendor / Payee Name</label>
                <input type="text" name="vendor_name"
                       value="{{ old('vendor_name', $expense->vendor_name ?? '') }}"
                       class="form-input" placeholder="Supplier or vendor name">
            </div>
            <div class="md:col-span-2">
                <label class="form-label">Description <span class="text-red-500">*</span></label>
                <textarea name="description" rows="2" class="form-input" required
                          placeholder="Brief description of this expense">{{ old('description', $expense->description ?? '') }}</textarea>
                @error('description')<p class="text-xs text-red-500 mt-1">{{ $message }}</p>@enderror
            </div>
            <div>
                <label class="form-label">Amount (₹) <span class="text-red-500">*</span></label>
                <input type="number" name="amount" step="0.01" min="0.01"
                       value="{{ old('amount', $expense->amount ?? '') }}"
                       class="form-input" required placeholder="0.00"
                       x-model="amount" @input="calcTotal()">
                @error('amount')<p class="text-xs text-red-500 mt-1">{{ $message }}</p>@enderror
            </div>
            <div>
                <label class="form-label">Payment Mode <span class="text-red-500">*</span></label>
                <select name="payment_mode" class="form-input" required>
                    @foreach(['cash'=>'💵 Cash','bank'=>'🏦 Bank Transfer','upi'=>'📱 UPI','card'=>'💳 Card','cheque'=>'📝 Cheque'] as $val=>$label)
                    <option value="{{ $val }}" {{ old('payment_mode', $expense->payment_mode ?? 'cash') === $val ? 'selected' : '' }}>{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="form-label">Reference / Bill No.</label>
                <input type="text" name="reference"
                       value="{{ old('reference', $expense->reference ?? '') }}"
                       class="form-input" placeholder="Bill no. / Cheque no. / UTR">
            </div>
            <div>
                <label class="form-label">Expense Account</label>
                <select name="account_id" class="form-input">
                    <option value="">— Auto —</option>
                    @foreach($accounts as $acc)
                    <option value="{{ $acc->id }}" {{ old('account_id', $expense->account_id ?? '') == $acc->id ? 'selected' : '' }}>
                        {{ $acc->account_code }} — {{ $acc->account_name }}
                    </option>
                    @endforeach
                </select>
            </div>
        </div>

        {{-- GST Section --}}
        <div class="border-t border-slate-100 pt-4">
            <div class="flex items-center gap-3 mb-3">
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="hidden" name="gst_applicable" value="0">
                    <input type="checkbox" name="gst_applicable" value="1"
                           x-model="gstApplicable"
                           {{ old('gst_applicable', $expense->gst_applicable ?? false) ? 'checked' : '' }}
                           class="w-4 h-4 rounded border-slate-300 text-brand-600">
                    <span class="text-sm font-medium text-slate-700">GST Applicable on this expense</span>
                </label>
            </div>
            <div x-show="gstApplicable" x-cloak class="grid grid-cols-2 gap-4">
                <div>
                    <label class="form-label">GST Rate (%)</label>
                    <select name="gst_rate" class="form-input">
                        @foreach([0,5,12,18,28] as $r)
                        <option value="{{ $r }}" {{ old('gst_rate', $expense->gst_rate ?? 18) == $r ? 'selected' : '' }}>{{ $r }}%</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="form-label">GST Amount (₹)</label>
                    <input type="number" name="gst_amount" step="0.01" min="0"
                           value="{{ old('gst_amount', $expense->gst_amount ?? 0) }}"
                           class="form-input" placeholder="0.00">
                </div>
                <div>
                    <label class="form-label">HSN / SAC Code</label>
                    <input type="text" name="hsn_sac_code"
                           value="{{ old('hsn_sac_code', $expense->hsn_sac_code ?? '') }}"
                           class="form-input font-mono" placeholder="For ITC claim">
                </div>
                <div class="flex items-center">
                    <label class="flex items-center gap-2 cursor-pointer mt-4">
                        <input type="hidden" name="itc_eligible" value="0">
                        <input type="checkbox" name="itc_eligible" value="1"
                               {{ old('itc_eligible', $expense->itc_eligible ?? false) ? 'checked' : '' }}
                               class="w-4 h-4 rounded border-slate-300 text-brand-600">
                        <span class="text-sm text-slate-700">ITC Eligible</span>
                    </label>
                </div>
            </div>
        </div>

        <div>
            <label class="form-label">Notes</label>
            <textarea name="notes" rows="2" class="form-input" placeholder="Optional notes">{{ old('notes', $expense->notes ?? '') }}</textarea>
        </div>
    </div>

    <div class="flex items-center gap-3 mt-4">
        <button type="submit" class="btn-primary">
            {{ isset($expense) ? 'Update Expense' : 'Save Expense' }}
        </button>
        <a href="{{ route('expenses.index') }}" class="btn-secondary">Cancel</a>
    </div>
</form>
</div>
@endsection