@extends('layouts.app', [
    'pageTitle' => $title,
])

@section('content')
<div class="mx-auto max-w-2xl">
    <!-- Header -->
    <div class="mb-6">
        <a href="{{ route('expenses.index') }}" class="mb-2 inline-flex items-center text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300">
            <svg class="mr-1 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
            </svg>
            Kembali
        </a>
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white/90">{{ $title }}</h2>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
            Pengeluaran pada form ini diambil dari <strong>Patty Cash</strong> dan akan <strong>mengurangi saldo Patty Cash</strong>.
        </p>
    </div>

    @include('partials.alerts')

    <div class="mb-6 rounded-xl border border-warning-200 bg-warning-50 p-4 text-sm text-warning-800 dark:border-warning-900/30 dark:bg-warning-500/10 dark:text-warning-200">
        <div class="font-semibold">Sumber Dana: Patty Cash</div>
        <div class="mt-1 text-xs opacity-90">
            Pastikan nominal pengeluaran sesuai bukti transaksi karena data ini langsung memengaruhi laporan kas.
        </div>
    </div>

    <div class="rounded-xl border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-white/[0.03]">
        <form action="{{ $expense->exists ? route('expenses.update', $expense) : route('expenses.store') }}" method="POST">
            @csrf
            @if($expense->exists)
                @method('PUT')
            @endif

            <div class="space-y-5">
                <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
                    <div>
                        <x-form.select name="expense_category_id" label="Kategori Pengeluaran" required>
                            <option value="">Pilih Kategori</option>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}" {{ old('expense_category_id', $expense->expense_category_id) == $category->id ? 'selected' : '' }}>
                                    {{ $category->name }}
                                </option>
                            @endforeach
                        </x-form.select>
                    </div>
                    <div>
                        <x-form.date-picker
                            name="expense_date"
                            label="Tanggal Pengeluaran"
                            :defaultDate="old('expense_date', $expense->expense_date?->format('Y-m-d') ?? date('Y-m-d'))"
                            required
                        />
                    </div>
                </div>

                <div>
                    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
                        Jumlah Pengeluaran (Potong Patty Cash) <span class="text-error-500">*</span>
                    </label>
                    <div class="relative flex">
                        <span class="inline-flex items-center rounded-l-lg border border-r-0 border-gray-300 bg-gray-100 px-4 text-sm text-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400">Rp</span>
                        <input 
                            type="text" 
                            name="amount" 
                            value="{{ old('amount', $expense->exists ? number_format($expense->amount, 0, ',', '.') : '') }}"
                            required
                            x-data
                            x-on:input="$el.value = $el.value.replace(/[^0-9]/g, '').replace(/\B(?=(\d{3})+(?!\d))/g, '.')"
                            class="h-11 w-full rounded-r-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 focus:border-brand-300 focus:outline-none focus:ring focus:ring-brand-200 focus:ring-opacity-40 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:focus:border-brand-800"
                            placeholder="0"
                        >
                    </div>
                    <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
                        Nominal yang diinput di sini akan mengurangi saldo <b>Patty Cash</b>.
                    </p>
                    @error('amount')
                        <p class="mt-1.5 text-sm text-error-500">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <x-form.textarea
                        name="description"
                        label="Keterangan Pengeluaran"
                        rows="3"
                        placeholder="Contoh: beli bahan, transport, operasional harian"
                    >{{ old('description', $expense->description) }}</x-form.textarea>
                </div>
            </div>

            <div class="mt-6 flex justify-end gap-3">
                <a href="{{ route('expenses.index') }}" class="rounded-lg border border-gray-300 px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800">
                    Batal
                </a>
                <button type="submit" class="rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white shadow-theme-xs hover:bg-brand-600">
                    Simpan Pengeluaran
                </button>
            </div>
        </form>
    </div>
</div>
@endsection