@extends('anggota.layout')

@section('title', 'Tambah Rekening Bank - {{ $appDisplayName }}')

@section('styles')
<style>
    .card {
        border: none;
        border-radius: 15px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        background: #fff;
    }
    .card-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 15px 15px 0 0 !important;
        border: none;
        padding: 1rem 1.25rem;
    }
    .btn-primary {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        border-radius: 10px;
    }
    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
    }
    .form-label {
        font-weight: 600;
        color: #333;
    }
    .search-wrapper {
        position: relative;
    }
    .search-wrapper input {
        border-radius: 10px;
    }
    .bank-suggestions {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 0 0 10px 10px;
        max-height: 200px;
        overflow-y: auto;
        z-index: 1000;
        display: none;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    .bank-suggestions .suggestion-item {
        padding: 8px 12px;
        cursor: pointer;
        font-size: 0.9rem;
    }
    .bank-suggestions .suggestion-item:hover {
        background: #f0f2f5;
    }
    .bank-suggestions .suggestion-item.active {
        background: #e8f0fe;
        color: #1877F2;
    }
</style>
@endsection

@section('content')
<div class="row justify-content-center" style="margin-top: 1rem;">
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="fas fa-plus-circle me-2"></i>Tambah Rekening Bank</h5>
            </div>
            <div class="card-body p-4">
                @if($errors->any())
                    <div class="alert alert-danger">
                        <ul class="mb-0">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <form action="{{ route('anggota.bank-rekening.store') }}" method="POST">
                    @csrf
                    <div class="mb-3">
                        <label for="nama_bank" class="form-label">
                            <i class="fas fa-landmark me-1"></i>Nama Bank <span class="text-danger">*</span>
                        </label>
                        <div class="search-wrapper">
                            <input type="text" class="form-control" id="nama_bank_input" 
                                   placeholder="Ketik nama bank..." autocomplete="off"
                                   value="{{ old('nama_bank') }}" required>
                            <input type="hidden" name="nama_bank" id="nama_bank" value="{{ old('nama_bank') }}">
                            <div class="bank-suggestions" id="bankSuggestions"></div>
                        </div>
                        <small class="text-muted">Ketik untuk mencari bank</small>
                    </div>

                    <div class="mb-3">
                        <label for="nomor_rekening" class="form-label">
                            <i class="fas fa-hashtag me-1"></i>Nomor Rekening <span class="text-danger">*</span>
                        </label>
                        <input type="text" class="form-control" id="nomor_rekening" name="nomor_rekening" 
                               placeholder="Masukkan nomor rekening" 
                               value="{{ old('nomor_rekening') }}" required>
                    </div>

                    <div class="mb-3">
                        <label for="nama_pemilik" class="form-label">
                            <i class="fas fa-user me-1"></i>Nama Pemilik Rekening <span class="text-danger">*</span>
                        </label>
                        <input type="text" class="form-control" id="nama_pemilik" name="nama_pemilik" 
                               placeholder="Masukkan nama pemilik rekening" 
                               value="{{ old('nama_pemilik') }}" required>
                    </div>

                    <div class="d-flex gap-2">
                        <a href="{{ route('anggota.bank-rekening.index') }}" class="btn btn-outline-secondary flex-fill">
                            <i class="fas fa-arrow-left me-1"></i>Kembali
                        </a>
                        <button type="submit" class="btn btn-primary flex-fill">
                            <i class="fas fa-save me-1"></i>Simpan
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
const bankList = @json($bankList);
const input = document.getElementById('nama_bank_input');
const hiddenInput = document.getElementById('nama_bank');
const suggestionsBox = document.getElementById('bankSuggestions');

input.addEventListener('input', function() {
    const val = this.value.toLowerCase();
    suggestionsBox.innerHTML = '';
    
    if (val.length === 0) {
        suggestionsBox.style.display = 'none';
        hiddenInput.value = '';
        return;
    }

    const filtered = bankList.filter(bank => bank.toLowerCase().includes(val));
    
    if (filtered.length === 0) {
        suggestionsBox.style.display = 'none';
        return;
    }

    filtered.forEach(bank => {
        const div = document.createElement('div');
        div.className = 'suggestion-item';
        div.textContent = bank;
        div.addEventListener('click', function() {
            input.value = bank;
            hiddenInput.value = bank;
            suggestionsBox.style.display = 'none';
        });
        suggestionsBox.appendChild(div);
    });

    suggestionsBox.style.display = 'block';
});

document.addEventListener('click', function(e) {
    if (!e.target.closest('.search-wrapper')) {
        suggestionsBox.style.display = 'none';
    }
});

input.addEventListener('focus', function() {
    if (this.value.length > 0) {
        this.dispatchEvent(new Event('input'));
    }
});
</script>
@endsection