@extends('layouts.app')

@section('content')
    <x-common.page-breadcrumb pageTitle="{{ $title ?? 'Rekening Pembayaran' }}" />

    <div class="mx-auto max-w-2xl">
        <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
            <div class="border-b border-gray-200 px-5 py-4 dark:border-gray-800">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">
                    {{ $account->exists ? 'Edit Rekening' : 'Tambah Rekening Baru' }}
                </h3>
                <p class="text-sm text-gray-500 dark:text-gray-400">
                    {{ $account->exists ? 'Perbarui informasi rekening pembayaran' : 'Tambahkan rekening bank atau e-wallet baru' }}
                </p>
            </div>

            <form action="{{ $account->exists ? route('payment-accounts.update', $account) : route('payment-accounts.store') }}" method="POST" class="p-5"
                x-data="{
                    type: '{{ old('type', $account->type ?? 'bank') }}',
                    provider: '{{ old('provider', $account->provider ?? '') }}'
                }">
                @csrf
                @if($account->exists)
                    @method('PUT')
                @endif

                <div class="space-y-5">
                    {{-- Nama Rekening --}}
                    <div>
                        <x-form.input
                            name="name"
                            label="Nama Rekening"
                            placeholder="Contoh: BCA Utama, DANA Toko"
                            :value="old('name', $account->name)"
                            required
                        />
                        <p class="mt-1 text-xs text-gray-500">Nama untuk identifikasi rekening (internal)</p>
                    </div>

                    {{-- Tipe --}}
                    <div>
                        <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
                            Tipe Rekening <span class="text-error-500">*</span>
                        </label>
                        <div class="flex gap-4">
                            <label class="flex items-center gap-2 cursor-pointer">
                                <input type="radio" name="type" value="bank" x-model="type" @change="provider = ''"
                                    class="size-4 border-gray-300 text-brand-500 focus:ring-brand-500">
                                <span class="text-sm text-gray-700 dark:text-gray-300">🏦 Bank</span>
                            </label>
                            <label class="flex items-center gap-2 cursor-pointer">
                                <input type="radio" name="type" value="ewallet" x-model="type" @change="provider = ''"
                                    class="size-4 border-gray-300 text-brand-500 focus:ring-brand-500">
                                <span class="text-sm text-gray-700 dark:text-gray-300">📱 E-Wallet</span>
                            </label>
                        </div>
                    </div>

                    {{-- Provider --}}
                    <div>
                        {{-- Bank Providers --}}
                        <template x-if="type === 'bank'">
                            <div>
                                <x-form.select
                                    name="provider"
                                    label="Provider Bank"
                                    placeholder="Pilih Bank"
                                    :options="$bankProviders"
                                    :value="old('provider', $account->type === 'bank' ? $account->provider : '')"
                                    required
                                />
                            </div>
                        </template>

                        {{-- E-Wallet Providers --}}
                        <template x-if="type === 'ewallet'">
                            <div>
                                <x-form.select
                                    name="provider"
                                    label="Provider E-Wallet"
                                    placeholder="Pilih E-Wallet"
                                    :options="$ewalletProviders"
                                    :value="old('provider', $account->type === 'ewallet' ? $account->provider : '')"
                                    required
                                />
                            </div>
                        </template>
                    </div>

                    {{-- Nomor Rekening --}}
                    <div>
                        <x-form.input
                            name="account_number"
                            label="Nomor Rekening / HP"
                            placeholder="Contoh: 1234567890 atau 081234567890"
                            :value="old('account_number', $account->account_number)"
                            required
                        />
                    </div>

                    {{-- Nama Pemilik --}}
                    <div>
                        <x-form.input
                            name="account_holder"
                            label="Nama Pemilik"
                            placeholder="Nama sesuai rekening/akun"
                            :value="old('account_holder', $account->account_holder)"
                            required
                        />
                    </div>

                    {{-- Status Aktif --}}
                    <div>
                        <label class="flex items-center gap-3 cursor-pointer">
                            <input type="checkbox" name="is_active" value="1"
                                {{ old('is_active', $account->is_active ?? true) ? 'checked' : '' }}
                                class="size-5 rounded border-gray-300 text-brand-500 focus:ring-brand-500">
                            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Aktif</span>
                        </label>
                        <p class="mt-1 text-xs text-gray-500">Rekening nonaktif tidak akan muncul di pilihan pembayaran</p>
                    </div>
                </div>

                <div class="mt-6 flex gap-3">
                    <a href="{{ route('payment-accounts.index') }}" 
                       class="flex-1 rounded-lg border border-gray-300 bg-white py-2.5 text-center text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700">
                        Batal
                    </a>
                    <button type="submit" 
                            class="flex-1 rounded-lg bg-brand-500 py-2.5 text-sm font-medium text-white shadow-theme-xs hover:bg-brand-600">
                        {{ $account->exists ? 'Simpan Perubahan' : 'Tambah Rekening' }}
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection