288 lines
18 KiB
PHP
288 lines
18 KiB
PHP
<x-app-layout>
|
|
<x-slot name="header">
|
|
<h2 class="text-xl font-semibold leading-tight text-gray-800">
|
|
製作銀行調節表
|
|
</h2>
|
|
</x-slot>
|
|
|
|
<div class="py-12">
|
|
<div class="mx-auto max-w-5xl sm:px-6 lg:px-8 space-y-4">
|
|
@if (session('error'))
|
|
<div class="rounded-md bg-red-50 p-4">
|
|
<p class="text-sm font-medium text-red-800">{{ session('error') }}</p>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Help Info -->
|
|
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
|
|
<div class="flex">
|
|
<div class="flex-shrink-0">
|
|
<svg class="h-5 w-5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
<div class="ml-3">
|
|
<h3 class="text-sm font-medium text-blue-800">銀行調節表說明</h3>
|
|
<div class="mt-2 text-sm text-blue-700">
|
|
<p>銀行調節表用於核對銀行對帳單餘額與內部現金簿餘額的差異。請準備好：</p>
|
|
<ul class="list-disc pl-5 mt-2 space-y-1">
|
|
<li>銀行對帳單 (PDF/圖片檔)</li>
|
|
<li>當月的現金簿記錄</li>
|
|
<li>未兌現支票清單</li>
|
|
<li>在途存款記錄</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<form method="POST" action="{{ route('admin.bank-reconciliations.store') }}" enctype="multipart/form-data" class="space-y-4">
|
|
@csrf
|
|
|
|
<!-- Basic Information -->
|
|
<div class="bg-white shadow sm:rounded-lg">
|
|
<div class="px-4 py-5 sm:p-6">
|
|
<h3 class="text-lg font-medium leading-6 text-gray-900 mb-4">基本資訊</h3>
|
|
|
|
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
|
|
<!-- Reconciliation Month -->
|
|
<div>
|
|
<label for="reconciliation_month" class="block text-sm font-medium text-gray-700">
|
|
調節月份 <span class="text-red-500">*</span>
|
|
</label>
|
|
<input type="month" name="reconciliation_month" id="reconciliation_month" required
|
|
value="{{ old('reconciliation_month', $month) }}"
|
|
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm @error('reconciliation_month') border-red-300 @enderror">
|
|
@error('reconciliation_month')
|
|
<p class="mt-1 text-sm text-red-600">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<!-- Bank Statement Date -->
|
|
<div>
|
|
<label for="bank_statement_date" class="block text-sm font-medium text-gray-700">
|
|
對帳單日期 <span class="text-red-500">*</span>
|
|
</label>
|
|
<input type="date" name="bank_statement_date" id="bank_statement_date" required
|
|
value="{{ old('bank_statement_date') }}"
|
|
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm @error('bank_statement_date') border-red-300 @enderror">
|
|
@error('bank_statement_date')
|
|
<p class="mt-1 text-sm text-red-600">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<!-- Bank Statement Balance -->
|
|
<div>
|
|
<label for="bank_statement_balance" class="block text-sm font-medium text-gray-700">
|
|
銀行對帳單餘額 <span class="text-red-500">*</span>
|
|
</label>
|
|
<div class="relative mt-1 rounded-md shadow-sm">
|
|
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
|
|
<span class="text-gray-500 sm:text-sm">NT$</span>
|
|
</div>
|
|
<input type="number" name="bank_statement_balance" id="bank_statement_balance" step="0.01" required
|
|
value="{{ old('bank_statement_balance') }}"
|
|
class="block w-full rounded-md border-gray-300 pl-12 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm @error('bank_statement_balance') border-red-300 @enderror">
|
|
</div>
|
|
@error('bank_statement_balance')
|
|
<p class="mt-1 text-sm text-red-600">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<!-- System Book Balance -->
|
|
<div>
|
|
<label for="system_book_balance" class="block text-sm font-medium text-gray-700">
|
|
系統帳面餘額 <span class="text-red-500">*</span>
|
|
</label>
|
|
<div class="relative mt-1 rounded-md shadow-sm">
|
|
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
|
|
<span class="text-gray-500 sm:text-sm">NT$</span>
|
|
</div>
|
|
<input type="number" name="system_book_balance" id="system_book_balance" step="0.01" required
|
|
value="{{ old('system_book_balance', $systemBalance) }}"
|
|
class="block w-full rounded-md border-gray-300 pl-12 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm @error('system_book_balance') border-red-300 @enderror">
|
|
</div>
|
|
<p class="mt-1 text-xs text-gray-500">從現金簿自動帶入: NT$ {{ number_format($systemBalance, 2) }}</p>
|
|
@error('system_book_balance')
|
|
<p class="mt-1 text-sm text-red-600">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<!-- Bank Statement File -->
|
|
<div class="sm:col-span-2">
|
|
<label for="bank_statement_file" class="block text-sm font-medium text-gray-700">
|
|
銀行對帳單檔案
|
|
</label>
|
|
<input type="file" name="bank_statement_file" id="bank_statement_file" accept=".pdf,.jpg,.jpeg,.png"
|
|
class="mt-1 block w-full text-sm text-gray-500
|
|
file:mr-4 file:py-2 file:px-4
|
|
file:rounded-md file:border-0
|
|
file:text-sm file:font-semibold
|
|
file:bg-indigo-50 file:text-indigo-700
|
|
hover:file:bg-indigo-100">
|
|
<p class="mt-1 text-xs text-gray-500">支援格式: PDF, JPG, PNG (最大 10MB)</p>
|
|
@error('bank_statement_file')
|
|
<p class="mt-1 text-sm text-red-600">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Outstanding Checks -->
|
|
<div class="bg-white shadow sm:rounded-lg">
|
|
<div class="px-4 py-5 sm:p-6">
|
|
<h3 class="text-lg font-medium leading-6 text-gray-900 mb-4">未兌現支票</h3>
|
|
<div id="outstanding-checks-container" class="space-y-3">
|
|
<!-- Template will be added by JavaScript -->
|
|
</div>
|
|
<button type="button" onclick="addOutstandingCheck()" class="mt-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">
|
|
<svg class="-ml-1 mr-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
|
</svg>
|
|
新增支票
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Deposits in Transit -->
|
|
<div class="bg-white shadow sm:rounded-lg">
|
|
<div class="px-4 py-5 sm:p-6">
|
|
<h3 class="text-lg font-medium leading-6 text-gray-900 mb-4">在途存款</h3>
|
|
<div id="deposits-container" class="space-y-3">
|
|
<!-- Template will be added by JavaScript -->
|
|
</div>
|
|
<button type="button" onclick="addDeposit()" class="mt-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">
|
|
<svg class="-ml-1 mr-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
|
</svg>
|
|
新增存款
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bank Charges -->
|
|
<div class="bg-white shadow sm:rounded-lg">
|
|
<div class="px-4 py-5 sm:p-6">
|
|
<h3 class="text-lg font-medium leading-6 text-gray-900 mb-4">銀行手續費</h3>
|
|
<div id="charges-container" class="space-y-3">
|
|
<!-- Template will be added by JavaScript -->
|
|
</div>
|
|
<button type="button" onclick="addCharge()" class="mt-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">
|
|
<svg class="-ml-1 mr-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
|
</svg>
|
|
新增手續費
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Notes -->
|
|
<div class="bg-white shadow sm:rounded-lg">
|
|
<div class="px-4 py-5 sm:p-6">
|
|
<label for="notes" class="block text-sm font-medium text-gray-700">備註</label>
|
|
<textarea name="notes" id="notes" rows="3"
|
|
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">{{ old('notes') }}</textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form Actions -->
|
|
<div class="flex justify-end space-x-3">
|
|
<a href="{{ route('admin.bank-reconciliations.index') }}" class="inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
|
|
取消
|
|
</a>
|
|
<button type="submit" class="inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
|
|
製作調節表
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
@push('scripts')
|
|
<script>
|
|
let checkIndex = 0;
|
|
let depositIndex = 0;
|
|
let chargeIndex = 0;
|
|
|
|
function addOutstandingCheck() {
|
|
const container = document.getElementById('outstanding-checks-container');
|
|
const div = document.createElement('div');
|
|
div.className = 'grid grid-cols-1 gap-4 sm:grid-cols-3 p-4 border border-gray-200 rounded-md';
|
|
div.innerHTML = `
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">支票號碼</label>
|
|
<input type="text" name="outstanding_checks[${checkIndex}][check_number]"
|
|
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">金額 <span class="text-red-500">*</span></label>
|
|
<input type="number" name="outstanding_checks[${checkIndex}][amount]" step="0.01" min="0" required
|
|
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">說明</label>
|
|
<input type="text" name="outstanding_checks[${checkIndex}][description]"
|
|
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
|
|
</div>
|
|
`;
|
|
container.appendChild(div);
|
|
checkIndex++;
|
|
}
|
|
|
|
function addDeposit() {
|
|
const container = document.getElementById('deposits-container');
|
|
const div = document.createElement('div');
|
|
div.className = 'grid grid-cols-1 gap-4 sm:grid-cols-3 p-4 border border-gray-200 rounded-md';
|
|
div.innerHTML = `
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">存款日期</label>
|
|
<input type="date" name="deposits_in_transit[${depositIndex}][date]"
|
|
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">金額 <span class="text-red-500">*</span></label>
|
|
<input type="number" name="deposits_in_transit[${depositIndex}][amount]" step="0.01" min="0" required
|
|
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">說明</label>
|
|
<input type="text" name="deposits_in_transit[${depositIndex}][description]"
|
|
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
|
|
</div>
|
|
`;
|
|
container.appendChild(div);
|
|
depositIndex++;
|
|
}
|
|
|
|
function addCharge() {
|
|
const container = document.getElementById('charges-container');
|
|
const div = document.createElement('div');
|
|
div.className = 'grid grid-cols-1 gap-4 sm:grid-cols-2 p-4 border border-gray-200 rounded-md';
|
|
div.innerHTML = `
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">金額 <span class="text-red-500">*</span></label>
|
|
<input type="number" name="bank_charges[${chargeIndex}][amount]" step="0.01" min="0" required
|
|
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">說明</label>
|
|
<input type="text" name="bank_charges[${chargeIndex}][description]"
|
|
placeholder="例如: 轉帳手續費"
|
|
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
|
|
</div>
|
|
`;
|
|
container.appendChild(div);
|
|
chargeIndex++;
|
|
}
|
|
|
|
// Add one of each by default
|
|
window.addEventListener('load', function() {
|
|
addOutstandingCheck();
|
|
addDeposit();
|
|
addCharge();
|
|
});
|
|
</script>
|
|
@endpush
|
|
</x-app-layout>
|