@props([
    'payoutAccount' => null,
])

@php
    $pa = is_array($payoutAccount) ? $payoutAccount : null;
    $submitLabel = $pa ? 'Update payout account' : 'Save payout account';
@endphp

<div x-data="{
    accountType: '{{ $pa['account_type'] ?? 'mobile_money' }}',
    selectedBankCode: '{{ $pa['bank_code'] ?? '' }}',
    banks: [],
    loading: false,
    get selectedBankName() {
        const b = this.banks.find(b => b.code === this.selectedBankCode);
        return b ? b.name : '{{ addslashes($pa['bank_name'] ?? '') }}';
    },
    async loadBanks() {
        this.loading = true;
        try {
            const res = await fetch(@js(route('events.payouts.banks')) + '?type=' + encodeURIComponent(this.accountType), {
                headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
            });
            const data = await res.json();
            this.banks = data.data ?? [];
        } catch (e) { this.banks = [] }
        this.loading = false;
    },
    switchAccountType(type) {
        this.accountType = type;
        this.selectedBankCode = '';
        this.banks = [];
        this.loadBanks();
    },
    init() { this.loadBanks() },
}">
    <form action="{{ route('events.payouts.payout-account') }}" method="POST" class="space-y-4">
        @csrf
        @method('PUT')

        <div>
            <label class="block text-xs font-semibold text-slate-600">Account type</label>
            <div class="mt-2 grid grid-cols-2 gap-2">
                <label class="cursor-pointer rounded-xl border-2 p-3 transition-all"
                       :class="accountType === 'mobile_money' ? 'border-indigo-500 bg-indigo-50' : 'border-slate-200 hover:border-slate-300'">
                    <input type="radio" name="account_type" value="mobile_money" x-model="accountType"
                           @change="switchAccountType('mobile_money')" class="sr-only">
                    <p class="text-sm font-semibold text-slate-900">Mobile Money</p>
                    <p class="mt-0.5 text-[11px] text-slate-400">MTN, Vodafone, etc.</p>
                </label>
                <label class="cursor-pointer rounded-xl border-2 p-3 transition-all"
                       :class="accountType === 'bank_account' ? 'border-indigo-500 bg-indigo-50' : 'border-slate-200 hover:border-slate-300'">
                    <input type="radio" name="account_type" value="bank_account" x-model="accountType"
                           @change="switchAccountType('bank_account')" class="sr-only">
                    <p class="text-sm font-semibold text-slate-900">Bank Account</p>
                    <p class="mt-0.5 text-[11px] text-slate-400">GH banks</p>
                </label>
            </div>
        </div>

        <div>
            <label class="block text-xs font-semibold text-slate-600">Account name</label>
            <input type="text" name="account_name" value="{{ old('account_name', $pa['account_name'] ?? '') }}" required
                   class="mt-1.5 w-full rounded-xl border border-slate-200 px-3.5 py-2.5 text-sm placeholder:text-slate-400 focus:border-indigo-400 focus:outline-none focus:ring-1 focus:ring-indigo-400/30"
                   placeholder="Full name on account">
        </div>

        <div>
            <label class="block text-xs font-semibold text-slate-600">Account number / phone</label>
            <input type="text" name="account_number" value="{{ old('account_number', $pa['account_number'] ?? '') }}" required
                   class="mt-1.5 w-full rounded-xl border border-slate-200 px-3.5 py-2.5 text-sm placeholder:text-slate-400 focus:border-indigo-400 focus:outline-none focus:ring-1 focus:ring-indigo-400/30"
                   placeholder="e.g. 0241234567 or account number">
        </div>

        <div>
            <label class="block text-xs font-semibold text-slate-600">
                <span x-text="accountType === 'mobile_money' ? 'Network / Provider' : 'Bank'"></span>
            </label>
            <div x-show="loading" class="mt-1.5 flex items-center gap-2 py-2 text-xs text-slate-400">
                <svg class="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
                Loading...
            </div>
            <select x-show="!loading" name="bank_code" x-model="selectedBankCode" required
                    class="mt-1.5 w-full rounded-xl border border-slate-200 px-3.5 py-2.5 text-sm text-slate-700 focus:border-indigo-400 focus:outline-none focus:ring-1 focus:ring-indigo-400/30">
                <option value="">Select...</option>
                <template x-for="bank in banks" :key="bank.code">
                    <option :value="bank.code" x-text="bank.name"></option>
                </template>
                @if(!empty($pa['bank_code']))
                    <option value="{{ $pa['bank_code'] }}" x-show="banks.length === 0">{{ $pa['bank_name'] }}</option>
                @endif
            </select>
            <input type="hidden" name="bank_name" :value="selectedBankName">
        </div>

        <input type="hidden" name="currency" value="GHS">

        @error('account_type') <p class="text-xs text-red-600">{{ $message }}</p> @enderror
        @error('account_number') <p class="text-xs text-red-600">{{ $message }}</p> @enderror
        @error('bank_code') <p class="text-xs text-red-600">{{ $message }}</p> @enderror

        <button type="submit" class="btn-primary w-full">{{ $submitLabel }}</button>
    </form>
</div>