@extends('layouts.app')

@section('title', '계좌 등록')

@section('content')
<div class="container mx-auto px-4 py-6 max-w-2xl">
    {{-- 페이지 헤더 --}}
    <div class="mb-6">
        <a href="{{ route('finance.accounts.index') }}" class="text-sm text-gray-500 hover:text-gray-700 inline-flex items-center gap-1 mb-2">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
            </svg>
            계좌 목록으로
        </a>
        <h1 class="text-2xl font-bold text-gray-800">계좌 등록</h1>
    </div>

    {{-- 등록 폼 --}}
    <div class="bg-white rounded-lg shadow-sm p-6">
        <form id="accountForm"
              hx-post="{{ route('api.admin.bank-accounts.store') }}"
              hx-headers='{"X-CSRF-TOKEN": "{{ csrf_token() }}", "Accept": "application/json"}'
              hx-target="#form-message"
              hx-swap="innerHTML"
              class="space-y-6">

            {{-- 메시지 영역 --}}
            <div id="form-message"></div>

            {{-- 은행명 --}}
            @php
                $banks = [
                    // 시중은행
                    'KB국민은행', '신한은행', '우리은행', '하나은행', 'SC제일은행', '한국씨티은행',
                    // 지방은행
                    '경남은행', '광주은행', '대구은행', '부산은행', '전북은행', '제주은행',
                    // 특수은행
                    'NH농협은행', 'IBK기업은행', 'KDB산업은행', '수협은행',
                    // 인터넷은행
                    '카카오뱅크', '케이뱅크', '토스뱅크',
                    // 외국계
                    'BNP파리바은행', 'BOA은행', 'HSBC은행', 'JP모간은행', '도이치은행',
                    // 기타
                    '새마을금고', '신협', '우체국', '저축은행', '산림조합', '기타',
                ];
            @endphp
            <div>
                <label for="bank_name" class="block text-sm font-medium text-gray-700 mb-1">
                    은행명 <span class="text-red-500">*</span>
                </label>
                <select name="bank_name" id="bank_name" required
                        class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                    <option value="">선택하세요</option>
                    @foreach($banks as $bank)
                        <option value="{{ $bank }}">{{ $bank }}</option>
                    @endforeach
                </select>
            </div>

            {{-- 계좌번호 --}}
            <div>
                <label for="account_number" class="block text-sm font-medium text-gray-700 mb-1">
                    계좌번호 <span class="text-red-500">*</span>
                </label>
                <input type="text" name="account_number" id="account_number" required
                       placeholder="123-456-789012"
                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
            </div>

            {{-- 예금주 --}}
            <div>
                <label for="account_holder" class="block text-sm font-medium text-gray-700 mb-1">
                    예금주 <span class="text-red-500">*</span>
                </label>
                <input type="text" name="account_holder" id="account_holder" required
                       placeholder="예금주명"
                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
            </div>

            {{-- 계좌별칭 --}}
            <div>
                <label for="account_name" class="block text-sm font-medium text-gray-700 mb-1">
                    계좌별칭
                </label>
                <input type="text" name="account_name" id="account_name"
                       placeholder="예: 주거래 계좌, 급여계좌"
                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
            </div>

            {{-- 예금종류 --}}
            <div>
                <label for="account_type" class="block text-sm font-medium text-gray-700 mb-1">
                    예금종류
                </label>
                <select name="account_type" id="account_type"
                        class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                    <option value="보통예금">보통예금</option>
                    <option value="정기예금">정기예금</option>
                    <option value="적금">적금</option>
                    <option value="법인카드 출금">법인카드 출금</option>
                    <option value="외화예금">외화예금</option>
                    <option value="기타">기타</option>
                </select>
            </div>

            {{-- 현재 잔액 --}}
            <div>
                <label for="balance" class="block text-sm font-medium text-gray-700 mb-1">
                    현재 잔액
                </label>
                <input type="number" name="balance" id="balance"
                       value="0" min="0" step="1"
                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
            </div>

            {{-- 개설일자 --}}
            <div>
                <label for="opened_at" class="block text-sm font-medium text-gray-700 mb-1">
                    개설일자
                </label>
                <input type="date" name="opened_at" id="opened_at"
                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
            </div>

            {{-- 지점명 --}}
            <div>
                <label for="branch_name" class="block text-sm font-medium text-gray-700 mb-1">
                    지점명
                </label>
                <input type="text" name="branch_name" id="branch_name"
                       placeholder="지점명"
                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
            </div>

            {{-- 메모 --}}
            <div>
                <label for="memo" class="block text-sm font-medium text-gray-700 mb-1">
                    메모
                </label>
                <textarea name="memo" id="memo" rows="3"
                          placeholder="메모를 입력하세요"
                          class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500"></textarea>
            </div>

            {{-- 상태 --}}
            <div>
                <label for="status" class="block text-sm font-medium text-gray-700 mb-1">
                    상태
                </label>
                <select name="status" id="status"
                        class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                    <option value="active" selected>활성</option>
                    <option value="inactive">비활성</option>
                </select>
            </div>

            {{-- 버튼 --}}
            <div class="flex justify-end gap-3 pt-4 border-t">
                <a href="{{ route('finance.accounts.index') }}"
                   class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">
                    취소
                </a>
                <button type="submit"
                        class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors">
                    등록
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
    // 폼 제출 성공 시 리다이렉트
    document.body.addEventListener('htmx:afterRequest', function(event) {
        if (event.detail.successful) {
            try {
                const response = JSON.parse(event.detail.xhr.responseText);
                if (response.success) {
                    window.location.href = '{{ route('finance.accounts.index') }}';
                }
            } catch (e) {}
        }
    });
</script>
@endpush