@extends('layouts.admin')

@section('title', 'Bank Accounts')

@section('content')
<div class="flex justify-between items-center mb-6">
    <h1 class="text-2xl font-bold">Bank Accounts (Manual Payment)</h1>
    <button onclick="openModal('createModal')" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
        + Add New Bank
    </button>
</div>

<div class="bg-white rounded-lg shadow overflow-hidden">
    <div class="table-responsive">
    <table class="w-full">
        <thead class="bg-gray-50">
            <tr>
                <th class="px-6 py-3 text-left">Logo</th>
                <th class="px-6 py-3 text-left">Bank Name</th>
                <th class="px-6 py-3 text-left">Account Number</th>
                <th class="px-6 py-3 text-left">Account Holder</th>
                <th class="px-6 py-3 text-left">Status</th>
                <th class="px-6 py-3 text-left">Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach($banks as $bank)
            <tr class="border-t">
                <td class="px-6 py-4">
                    @if($bank->logo)
                    <img src="/uploads/banks/{{ $bank->logo }}" class="w-12 h-12 object-contain">
                    @else
                    <span class="text-gray-400">No logo</span>
                    @endif
                </td>
                <td class="px-6 py-4 font-medium">{{ $bank->bank_name }}</td>
                <td class="px-6 py-4 font-mono">{{ $bank->account_number }}</td>
                <td class="px-6 py-4">{{ $bank->account_holder }}</td>
                <td class="px-6 py-4">
                    <form action="/admin/banks/{{ $bank->id }}/toggle-status" method="POST" class="inline">
                        <button type="submit" class="px-2 py-1 text-xs rounded 
                            @if($bank->is_active) bg-green-100 text-green-800 @else bg-gray-100 text-gray-800 @endif">
                            {{ $bank->is_active ? 'Active' : 'Inactive' }}
                        </button>
                    </form>
                </td>
                <td class="px-6 py-4">
                    <button onclick='editBank(@json($bank))' class="text-blue-600 mr-2">Edit</button>
                    <form action="/admin/banks/{{ $bank->id }}/delete" method="POST" class="inline" onsubmit="return confirm('Delete this bank?')">
                        <button type="submit" class="text-red-600">Delete</button>
                    </form>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
    </div>
    <div class="p-4">
        {{ $banks->links() }}
    </div>
</div>

<!-- Create Modal -->
<div id="createModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50 overflow-y-auto">
    <div class="min-h-screen px-4 py-6 flex items-center justify-center">
        <div class="bg-white rounded-lg p-6 w-full max-w-4xl">
            <h2 class="text-xl font-bold mb-4">Add New Bank Account</h2>
            <form action="/admin/banks/store" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block mb-1">Bank Name <span class="text-red-500">*</span></label>
                        <input type="text" name="bank_name" required class="w-full px-3 py-2 border rounded">
                    </div>
                    <div>
                        <label class="block mb-1">Bank Code (optional)</label>
                        <input type="text" name="bank_code" class="w-full px-3 py-2 border rounded">
                    </div>
                    <div>
                        <label class="block mb-1">Account Number <span class="text-red-500">*</span></label>
                        <input type="text" name="account_number" required class="w-full px-3 py-2 border rounded">
                    </div>
                    <div>
                        <label class="block mb-1">Account Holder <span class="text-red-500">*</span></label>
                        <input type="text" name="account_holder" required class="w-full px-3 py-2 border rounded">
                    </div>
                    <div>
                        <label class="block mb-1">Branch (optional)</label>
                        <input type="text" name="branch" class="w-full px-3 py-2 border rounded">
                    </div>
                    <div>
                        <label class="block mb-1">Logo</label>
                        <input type="file" name="logo" accept="image/*" class="w-full px-3 py-2 border rounded">
                    </div>
                    <div>
                        <label class="block mb-1">Sort Order</label>
                        <input type="number" name="sort_order" value="0" class="w-full px-3 py-2 border rounded">
                    </div>
                    <div class="md:col-span-2">
                        <label class="block mb-1">Description (optional)</label>
                        <textarea name="description" rows="3" class="w-full px-3 py-2 border rounded"></textarea>
                    </div>
                </div>
                <div class="flex justify-end space-x-2 mt-6">
                    <button type="button" onclick="closeModal('createModal')" class="px-4 py-2 border rounded hover:bg-gray-50">Cancel</button>
                    <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Modal -->
<div id="editModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50 overflow-y-auto">
    <div class="min-h-screen px-4 py-6 flex items-center justify-center">
        <div class="bg-white rounded-lg p-6 w-full max-w-4xl">
            <h2 class="text-xl font-bold mb-4">Edit Bank Account</h2>
            <form action="" method="POST" enctype="multipart/form-data" id="editForm">
                @csrf
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block mb-1">Bank Name <span class="text-red-500">*</span></label>
                        <input type="text" name="bank_name" id="edit_bank_name" required class="w-full px-3 py-2 border rounded">
                    </div>
                    <div>
                        <label class="block mb-1">Bank Code (optional)</label>
                        <input type="text" name="bank_code" id="edit_bank_code" class="w-full px-3 py-2 border rounded">
                    </div>
                    <div>
                        <label class="block mb-1">Account Number <span class="text-red-500">*</span></label>
                        <input type="text" name="account_number" id="edit_account_number" required class="w-full px-3 py-2 border rounded">
                    </div>
                    <div>
                        <label class="block mb-1">Account Holder <span class="text-red-500">*</span></label>
                        <input type="text" name="account_holder" id="edit_account_holder" required class="w-full px-3 py-2 border rounded">
                    </div>
                    <div>
                        <label class="block mb-1">Branch (optional)</label>
                        <input type="text" name="branch" id="edit_branch" class="w-full px-3 py-2 border rounded">
                    </div>
                    <div>
                        <label class="block mb-1">Logo</label>
                        <input type="file" name="logo" accept="image/*" class="w-full px-3 py-2 border rounded">
                        <p class="text-xs text-gray-500 mt-1">Biarkan kosong jika tidak diubah</p>
                    </div>
                    <div>
                        <label class="block mb-1">Sort Order</label>
                        <input type="number" name="sort_order" id="edit_sort_order" class="w-full px-3 py-2 border rounded">
                    </div>
                    <div class="md:col-span-2">
                        <label class="block mb-1">Description (optional)</label>
                        <textarea name="description" id="edit_description" rows="3" class="w-full px-3 py-2 border rounded"></textarea>
                    </div>
                </div>
                <div class="flex justify-end space-x-2 mt-6">
                    <button type="button" onclick="closeModal('editModal')" class="px-4 py-2 border rounded hover:bg-gray-50">Cancel</button>
                    <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Update</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function openModal(id) {
    document.getElementById(id).classList.remove('hidden');
    document.getElementById(id).classList.add('flex');
    document.body.style.overflow = 'hidden';
}

function closeModal(id) {
    document.getElementById(id).classList.add('hidden');
    document.getElementById(id).classList.remove('flex');
    document.body.style.overflow = 'auto';
}

function editBank(bank) {
    document.getElementById('editForm').action = '/admin/banks/' + bank.id + '/update';
    document.getElementById('edit_bank_name').value = bank.bank_name;
    document.getElementById('edit_bank_code').value = bank.bank_code || '';
    document.getElementById('edit_account_number').value = bank.account_number;
    document.getElementById('edit_account_holder').value = bank.account_holder;
    document.getElementById('edit_branch').value = bank.branch || '';
    document.getElementById('edit_description').value = bank.description || '';
    document.getElementById('edit_sort_order').value = bank.sort_order || 0;
    openModal('editModal');
}

// Close modal when clicking outside
document.addEventListener('click', function(event) {
    const modals = ['createModal', 'editModal'];
    modals.forEach(modalId => {
        const modal = document.getElementById(modalId);
        if (event.target === modal) {
            closeModal(modalId);
        }
    });
});
</script>
@endsection