@extends('layouts.app')
@section('title','New Expense')
@section('content')
<x-ui.page-toolbar title="New Expense" description="Enter an expense for approval. Cash is not reduced until approval." :breadcrumbs="[['label'=>'Dashboard','url'=>route('dashboard')],['label'=>'Expenses','url'=>route('expenses.index')],['label'=>'New Expense']]" />

<form method="POST" action="{{ route('expenses.store') }}" enctype="multipart/form-data" class="mf-card mf-card-body" data-standard-form>
    @csrf
    <div class="grid gap-4 md:grid-cols-2">
        <div><label class="mf-label">Branch</label><select class="mf-select" name="branch_id" id="expense-branch" required><option value="">Select branch</option>@foreach($branches as $branch)<option value="{{ $branch->id }}" data-business="{{ $branch->business_id }}" @selected((string)old('branch_id')===(string)$branch->id)>{{ $branch->name }}</option>@endforeach</select>@error('branch_id')<div class="mf-error">{{ $message }}</div>@enderror</div>
        <div><label class="mf-label">Category</label><select class="mf-select" name="expense_category_id" id="expense-category" required><option value="">Select category</option>@foreach($categories as $category)<option value="{{ $category->id }}" data-business="{{ $category->business_id }}" @selected((string)old('expense_category_id')===(string)$category->id)>{{ $category->name }}</option>@endforeach</select>@error('expense_category_id')<div class="mf-error">{{ $message }}</div>@enderror</div>
        <div><label class="mf-label">Paid-from account</label><select class="mf-select" name="financial_account_id" id="expense-account" required><option value="">Select account</option>@foreach($accounts as $account)<option value="{{ $account->id }}" data-branch="{{ $account->branch_id }}" @selected((string)old('financial_account_id')===(string)$account->id)>{{ $account->name }} — {{ number_format((float)$account->current_balance,2) }}</option>@endforeach</select>@error('financial_account_id')<div class="mf-error">{{ $message }}</div>@enderror</div>
        <div><label class="mf-label">Expense date</label><input class="mf-input" type="date" name="expense_date" value="{{ old('expense_date',now()->toDateString()) }}" required>@error('expense_date')<div class="mf-error">{{ $message }}</div>@enderror</div>
        <div><label class="mf-label">Amount</label><input class="mf-input" inputmode="decimal" name="amount" value="{{ old('amount') }}" placeholder="0.00" required>@error('amount')<div class="mf-error">{{ $message }}</div>@enderror</div>
        <div><label class="mf-label">Supplier</label><input class="mf-input" name="supplier" value="{{ old('supplier') }}" placeholder="Optional supplier or payee">@error('supplier')<div class="mf-error">{{ $message }}</div>@enderror</div>
        <div class="md:col-span-2"><label class="mf-label">Description</label><input class="mf-input" name="description" value="{{ old('description') }}" placeholder="What is this expense for?" required>@error('description')<div class="mf-error">{{ $message }}</div>@enderror</div>
        <div class="md:col-span-2"><label class="mf-label">Receipt / supporting evidence</label><input class="mf-input" type="file" name="receipt" accept="image/*,.pdf"><div class="mt-1 text-xs text-muted-foreground">Optional. JPG, PNG, WEBP or PDF up to 8 MB. Stored privately.</div>@error('receipt')<div class="mf-error">{{ $message }}</div>@enderror</div>
        <div class="md:col-span-2"><label class="mf-label">Notes</label><textarea class="mf-textarea" name="notes" rows="4" placeholder="Optional internal notes">{{ old('notes') }}</textarea>@error('notes')<div class="mf-error">{{ $message }}</div>@enderror</div>
    </div>
    <div class="mt-5 flex justify-end gap-2"><a class="mf-btn" href="{{ route('expenses.index') }}">Cancel</a><button class="mf-btn mf-btn-primary">Submit for approval</button></div>
</form>
@endsection
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded',()=>{const branch=document.getElementById('expense-branch'),category=document.getElementById('expense-category'),account=document.getElementById('expense-account');const filter=()=>{const selected=branch.options[branch.selectedIndex],business=selected?.dataset.business,branchId=branch.value;[...category.options].forEach((o,i)=>{if(!i)return;o.hidden=!!business&&o.dataset.business!==business;if(o.hidden&&o.selected)category.value='';});[...account.options].forEach((o,i)=>{if(!i)return;o.hidden=!!branchId&&o.dataset.branch!==branchId;if(o.hidden&&o.selected)account.value='';});};branch.addEventListener('change',filter);filter();});
</script>
@endpush