@extends('layouts.admin')

@section('header')
    Pengaturan Pembayaran
@endsection

@section('content')
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
    <!-- General Payment Settings -->
    <div class="bg-white rounded-lg shadow-md p-6">
        <h3 class="text-lg font-bold mb-4 border-b pb-2">Informasi Umum</h3>
        <form action="{{ route('payment.settings.update') }}" method="POST" enctype="multipart/form-data">
            @csrf
            
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Nomor WhatsApp Toko</label>
                <input type="text" name="payment_whatsapp_number" value="{{ $whatsappNumber }}" placeholder="Contoh: 6281234567890" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-yellow-500 focus:border-yellow-500" required>
                <p class="text-xs text-gray-500 mt-1">Gunakan format internasional (awalan 62).</p>
            </div>

            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">QRIS Payment</label>
                @if($qrisImage)
                    <div class="mb-2">
                        @php
                            $qrisUrl = $qrisImage;
                            if ($qrisUrl && !filter_var($qrisUrl, FILTER_VALIDATE_URL)) {
                                $qrisUrl = asset($qrisUrl);
                            }
                        @endphp
                        <img src="{{ $qrisUrl }}" alt="QRIS" class="w-32 h-32 object-cover rounded border">
                    </div>
                @endif
                <input type="file" name="payment_qris_image" class="w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-yellow-50 file:text-yellow-700 hover:file:bg-yellow-100">
                <p class="text-xs text-gray-500 mt-1">Format: JPG, PNG. Max: 2MB.</p>
            </div>

            <div class="flex justify-end">
                <button type="submit" class="bg-yellow-500 text-white px-4 py-2 rounded hover:bg-yellow-600 font-bold">Simpan Pengaturan</button>
            </div>
        </form>
    </div>

    <!-- Add New Bank -->
    <div class="bg-white rounded-lg shadow-md p-6">
        <h3 class="text-lg font-bold mb-4 border-b pb-2">Tambah Rekening Bank</h3>
        <form action="{{ route('payment.bank.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Nama Bank</label>
                <input type="text" name="bank_name" placeholder="Contoh: BCA" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-yellow-500 focus:border-yellow-500" required>
            </div>

            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Nomor Rekening</label>
                <input type="text" name="account_number" placeholder="Contoh: 1234567890" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-yellow-500 focus:border-yellow-500" required>
            </div>

            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Atas Nama</label>
                <input type="text" name="account_holder" placeholder="Nama Pemilik Rekening" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-yellow-500 focus:border-yellow-500" required>
            </div>

            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Logo Bank</label>
                <input type="file" name="logo" class="w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-yellow-50 file:text-yellow-700 hover:file:bg-yellow-100">
            </div>

            <div class="flex justify-end">
                <button type="submit" class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 font-bold">Tambah Bank</button>
            </div>
        </form>
    </div>
</div>

<!-- Bank List -->
<div class="mt-8 bg-white rounded-lg shadow-md p-6">
    <h3 class="text-lg font-bold mb-4 border-b pb-2">Daftar Rekening Bank</h3>
    <div class="overflow-x-auto">
        <table class="w-full table-auto">
            <thead>
                <tr class="bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                    <th class="px-4 py-2">Logo</th>
                    <th class="px-4 py-2">Bank</th>
                    <th class="px-4 py-2">No. Rekening</th>
                    <th class="px-4 py-2">Atas Nama</th>
                    <th class="px-4 py-2 text-center">Status</th>
                    <th class="px-4 py-2 text-center">Aksi</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-200">
                @forelse($banks as $bank)
                <tr>
                    <td class="px-4 py-2">
                        @if($bank->logo)
                            @php
                                $bankLogo = $bank->logo;
                                if ($bankLogo && !filter_var($bankLogo, FILTER_VALIDATE_URL)) {
                                    $bankLogo = asset($bankLogo);
                                }
                            @endphp
                            <img src="{{ $bankLogo }}" alt="{{ $bank->bank_name }}" class="h-8 w-auto">
                        @else
                            <span class="text-gray-400 text-xs">No Logo</span>
                        @endif
                    </td>
                    <td class="px-4 py-2 font-medium">{{ $bank->bank_name }}</td>
                    <td class="px-4 py-2">{{ $bank->account_number }}</td>
                    <td class="px-4 py-2">{{ $bank->account_holder }}</td>
                    <td class="px-4 py-2 text-center">
                        <form action="{{ route('payment.bank.toggle', $bank->id) }}" method="POST">
                            @csrf
                            @method('PATCH')
                            <button type="submit" class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" class="sr-only peer" {{ $bank->is_active ? 'checked' : '' }} disabled>
                                <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
                            </button>
                        </form>
                    </td>
                    <td class="px-4 py-2 text-center flex justify-center gap-2">
                        <button onclick="editBank({{ $bank }})" class="text-blue-600 hover:text-blue-800"><i class="fas fa-edit"></i></button>
                        <form action="{{ route('payment.bank.destroy', $bank->id) }}" method="POST" onsubmit="return confirm('Hapus rekening ini?')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="text-red-600 hover:text-red-800"><i class="fas fa-trash"></i></button>
                        </form>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="6" class="px-4 py-8 text-center text-gray-500">Belum ada rekening bank yang ditambahkan.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<!-- Edit Modal (Simple Implementation) -->
<div id="editModal" class="fixed inset-0 z-50 hidden bg-gray-500 bg-opacity-75 flex items-center justify-center">
    <div class="bg-white rounded-lg shadow-xl p-6 w-full max-w-md">
        <h3 class="text-lg font-bold mb-4">Edit Rekening Bank</h3>
        <form id="editForm" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Nama Bank</label>
                <input type="text" id="edit_bank_name" name="bank_name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-yellow-500 focus:border-yellow-500" required>
            </div>

            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Nomor Rekening</label>
                <input type="text" id="edit_account_number" name="account_number" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-yellow-500 focus:border-yellow-500" required>
            </div>

            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Atas Nama</label>
                <input type="text" id="edit_account_holder" name="account_holder" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-yellow-500 focus:border-yellow-500" required>
            </div>

            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Logo Bank (Biarkan kosong jika tidak diubah)</label>
                <input type="file" name="logo" class="w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-yellow-50 file:text-yellow-700 hover:file:bg-yellow-100">
            </div>

            <div class="flex justify-end gap-2">
                <button type="button" onclick="closeEditModal()" class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400">Batal</button>
                <button type="submit" class="px-4 py-2 bg-yellow-500 text-white rounded hover:bg-yellow-600">Update</button>
            </div>
        </form>
    </div>
</div>

<script>
    function editBank(bank) {
        document.getElementById('edit_bank_name').value = bank.bank_name;
        document.getElementById('edit_account_number').value = bank.account_number;
        document.getElementById('edit_account_holder').value = bank.account_holder;
        
        const form = document.getElementById('editForm');
        form.action = `/admin/payment/bank/${bank.id}`;
        
        document.getElementById('editModal').classList.remove('hidden');
    }

    function closeEditModal() {
        document.getElementById('editModal').classList.add('hidden');
    }
</script>
@endsection