@extends('layouts.app')

@section('content')
    <div class="mx-auto max-w-2xl">
        <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03] p-5 lg:p-6">
            <div class="mb-6">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-white/90">{{ $title }}</h2>
                <p class="text-sm text-gray-500 dark:text-gray-400">
                    Setoran ini <strong>selalu diambil dari CASH (kas)</strong> dan akan <strong>mengurangi saldo kas</strong>.
                </p>
            </div>

            <form action="{{ route('finance.deposits.store') }}" method="POST">
                @csrf

                <div class="space-y-5">
                    <div>
                        <x-form.input
                            name="amount"
                            label="Jumlah Setoran (dari Cash)"
                            type="number"
                            placeholder="0"
                            required
                            :value="old('amount')"
                        />
                    </div>

                    <div>
                        <x-form.date-picker
                            name="deposit_date"
                            label="Tanggal Setoran"
                            placeholder="Pilih tanggal"
                            required
                            :defaultDate="old('deposit_date', now()->format('Y-m-d'))"
                        />
                    </div>

                    <div class="rounded-xl border border-gray-200 bg-gray-50 p-4 text-sm text-gray-700 dark:border-gray-800 dark:bg-white/[0.02] dark:text-gray-300">
                        <div class="font-semibold">Sumber Dana: CASH (Kas)</div>
                        <div class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                            Sistem otomatis memotong saldo kas. (Tanpa pilih rekening tujuan)
                        </div>
                    </div>

                    <div>
                        <x-form.input
                            name="reference_number"
                            label="No. Referensi (opsional)"
                            placeholder="No. kwitansi / bukti setor"
                            :value="old('reference_number')"
                        />
                    </div>

                    <div>
                        <x-form.textarea
                            name="notes"
                            label="Catatan"
                            placeholder="Catatan tambahan (opsional)"
                            rows="3"
                            :value="old('notes')"
                        />
                    </div>
                </div>

                <div class="mt-6 flex items-center justify-end gap-3">
                    <a href="{{ route('finance.deposits.index') }}"
                        class="rounded-lg border border-gray-300 px-5 py-2.5 text-sm font-medium text-gray-700 transition 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-5 py-2.5 text-sm font-medium text-white transition hover:bg-brand-600">
                        Simpan Setoran
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection