Form Input Pengeluaran / Biaya Form ini digunakan untuk menambahkan data pengeluaran baru

{/* No. Biaya (readonly) */}

No. Biaya

{/* No. Referensi */}

No. Referensi setData('reference_number', e.target.value)} autoComplete="off" />

{errors.reference_number}

{/* Tanggal */}

Tanggal * setData('date', e.target.value)} />

{errors.date}

{/* Kategori Biaya */}

Kategori Biaya *

{errors.expense_category_id}

{/* Sub Kategori */}

Sub Kategori *

{errors.expense_subcategory_id}

{/* Jumlah */}

Jumlah (Rp) * setData('amount', e.target.value)} min={0} />

{errors.amount}

{/* Deskripsi (full width) */}

Deskripsi

setData('description', e.target.value)}
                                    />
                                    <p className="text-red-500 text-xs">{errors.description}</p>
                                </div>

{/* Bukti Pembayaran (full width) */}
                                <div className="flex flex-col gap-1 lg:col-span-2">
                                    <Label>Bukti Pembayaran (opsional)</Label>
                                    <Input
                                        type="file"
                                        accept=".pdf, .jpg, .jpeg, .png"
                                        onChange={handleFileChange}
                                    />
                                    {data.file instanceof File && (
                                        <p className="text-sm text-gray-700 mt-1">File: {data.file.name}</p>
                                    )}
                                    <p className="text-red-500 text-xs">{errors.file}</p>
                                </div>
                                <div className='mb-4'>
                                    <div className="flex items-center gap-2">
                                        <input type="checkbox" id="has-variant" checked={data.withPayment} onChange={() => setData('withPayment', !data.withPayment)} />
                                        <Label htmlFor="has-variant">Pengeluaran dengan pembayaran ?</Label>
                                    </div>
                                </div>

{data.withPayment &&
                                    <div className="flex flex-col gap-1 lg:col-span-2">
                                        <div className="p-4 bg-secondary w-full">Metode Pembayaran</div>
                                        <Table className="border-t border-b">
                                            <TableHeader>
                                                <TableRow>
                                                    <TableHead>#</TableHead>
                                                    <TableHead>
                                                        Tanggal Pembayaran <span className="text-rose-500">*</span>
                                                    </TableHead>
                                                    <TableHead>
                                                        Metode Pembayaran <span className="text-rose-500">*</span>
                                                    </TableHead>
                                                    <TableHead>Akun Bank</TableHead>
                                                    <TableHead>
                                                        Jumlah Bayar <span className="text-rose-500">*</span>
                                                    </TableHead>
                                                    <TableHead className="text-center w-[10px]">Aksi</TableHead>
                                                </TableRow>
                                            </TableHeader>
                                            <TableBody>
                                                {data.payments.map((payment, i) => (
                                                    <TableRow key={i}>
                                                        <TableCell className="align-center">
                                                            <div className='text-center'>{i + 1}</div>
                                                        </TableCell>
                                                        <TableCell className="align-top">
                                                            <DatePicker
                                                                date={payment.payment_date}
                                                                setDate={(e) => setPaymentsData(i, 'payment_date', e)}
                                                                label='Pilih Tanggal Pembayaran'
                                                            />
                                                            {(errors as any)[`payments.${i}.payment_date`] && <div className="text-xs text-red-500">{(errors as any)[`payments.${i}.payment_date`]}</div>}
                                                        </TableCell>
                                                        <TableCell className="align-top">
                                                            <Select value={payment.payment_method} onValueChange={(e) => setPaymentsData(i, 'payment_method', e)}>
                                                                <SelectTrigger>
                                                                    <SelectValue placeholder="Pilih Metode Pembayaran" />
                                                                </SelectTrigger>
                                                                <SelectContent>
                                                                    <SelectItem value="cash">Cash</SelectItem>
                                                                    <SelectItem value="transfer">Transfer</SelectItem>
                                                                </SelectContent>
                                                            </Select>
                                                            {(errors as any)[`payments.${i}.payment_method`] && <div className="text-xs text-red-500">{(errors as any)[`payments.${i}.payment_method`]}</div>}
                                                        </TableCell>
                                                        <TableCell className="align-top">
                                                            {(payment.payment_method == 'transfer' || payment.payment_method == 'credit') &&
                                                                <Select value={payment.payment_account} onValueChange={(e) => setPaymentsData(i, 'payment_account', e)}>
                                                                    <SelectTrigger>
                                                                        <SelectValue placeholder="Pilih Akun Bank" />
                                                                    </SelectTrigger>
                                                                    <SelectContent>
                                                                        {banks.map((bank,i) => <SelectItem key={i} value={bank.id.toString()}>{bank.bank_name} - {bank.account_name} [{bank.account_number}]</SelectItem>)}
                                                                    </SelectContent>
                                                                </Select>
                                                            }
                                                        </TableCell>
                                                        <TableCell className="align-top">
                                                            <Input type="text" name='total_pay' value={payment.total_pay} onChange={(e) => setPaymentsData(i, 'total_pay', Number(e.target.value))} />
                                                            {(errors as any)[`payments.${i}.total_pay`] && <div className="text-xs text-red-500">{(errors as any)[`payments.${i}.total_pay`]}</div>}
                                                        </TableCell>
                                                        <TableCell>
                                                            <div className='flex items-start justify-center'>
                                                                <Button type="button" variant="destructive" onClick={() => removeColumnPayment(i)} disabled={i === 0}>
                                                                    {i === 0 ? <X /> : <Trash />}
                                                                </Button>
                                                            </div>
                                                        </TableCell>
                                                    </TableRow>
                                                ))}
                                                <TableRow>
                                                    <TableCell colSpan={4} className="text-right font-semibold py-3">Total Bayar</TableCell>
                                                    <TableCell colSpan={2}>
                                                        <Input type="text" readOnly value={data.total_payment} className='dark:bg-zinc-800 bg-gray-100 cursor-not-allowed' />
                                                        <p className="text-red-500 text-xs">{errors.total_payment}</p>
                                                    </TableCell>
                                                </TableRow>
                                                <TableRow>
                                                    <TableCell colSpan={4} className="text-right font-semibold py-3">Sisa Bayar</TableCell>
                                                    <TableCell colSpan={2}>
                                                        <Input type="text" readOnly value={data.remaining_payment} className='dark:bg-zinc-800 bg-gray-100 cursor-not-allowed' />
                                                        <p className="text-red-500 text-xs">{errors.remaining_payment}</p>
                                                    </TableCell>
                                                </TableRow>
                                            </TableBody>
                                        </Table>
                                        <div className='p-4'>
                                            <Button type="button" onClick={addMoreColumnPayment} variant="outline" size="sm">
                                                <PlusCircle /> Tambah Kolom
                                            </Button>
                                        </div>
                                    </div>
                                }
                            </div>
                        </CardContent>
                        <CardFooter className='border-t p-4 w-full overflow-x-auto'>
                            <div className="flex justify-end items-center gap-2">
                                <Button variant="destructive" asChild>
                                    <Link href={route('apps.expenses.index')}><ArrowLeft/> Kembali</Link>
                                </Button>
                                <Button variant="secondary" type="submit" disabled={processing}>
                                    {processing ? <LoaderCircle className="animate-spin" /> : <Save />} Simpan Data
                                </Button>
                            </div>
                        </CardFooter>
                    </Card>
                </form>
            </div>
        </AppLayout>
    )
}