<div>
    <x-ui.page-header
        title="Receiving accounts"
        subtitle="Exactly what a shop sees on the “how to pay” screen. Get a digit wrong here and the money never arrives."
    />

    <x-resource.toolbar placeholder="Title, account number or bank…" create-label="New account" :can-create="$this->canManage()" />

    <x-ui.card :padded="false">
        @if ($rows->isEmpty())
            <x-ui.empty
                icon="wallet"
                title="No accounts configured"
                message="Add at least one Easypaisa, JazzCash or bank account, otherwise a shop has nowhere to send money."
            />
        @else
            <x-ui.table>
                <x-slot:head>
                    <tr>
                        <x-ui.th sortable="{{ $sortField }}" field="title" :direction="$sortDirection">Shown as</x-ui.th>
                        <th>Method</th>
                        <th>Account title</th>
                        <th>Number / IBAN</th>
                        <th>Offered for</th>
                        <th class="num">Used</th>
                        <th>Status</th>
                        <th></th>
                    </tr>
                </x-slot:head>

                @foreach ($rows as $account)
                    <tr>
                        <td class="font-medium">{{ $account->title }}</td>
                        <td><x-ui.badge :color="$account->gateway->color()">{{ $account->gateway->label() }}</x-ui.badge></td>
                        <td class="text-xs">{{ $account->account_title }}</td>
                        <td class="tabular text-xs">
                            {{ $account->account_number }}
                            @if ($account->iban)
                                <p class="text-slate-500">{{ $account->iban }}</p>
                            @endif
                            @if ($account->bank_name)
                                <p class="text-slate-400">{{ $account->bank_name }}</p>
                            @endif
                        </td>
                        <td class="text-xs">{{ $account->product?->name ?? 'All products' }}</td>
                        <td class="num">{{ $account->payments_count }}</td>
                        <td>
                            <x-ui.badge :color="$account->is_active ? 'green' : 'gray'">
                                {{ $account->is_active ? 'Live' : 'Hidden' }}
                            </x-ui.badge>
                        </td>
                        <td>
                            <x-resource.row-actions :id="$account->id"
                                                    :can-edit="$this->canManage()"
                                                    :can-delete="$this->canManage()" />
                        </td>
                    </tr>
                @endforeach
            </x-ui.table>

            <x-resource.pagination :rows="$rows" />
        @endif
    </x-ui.card>

    {{-- -------------------------------------------------------------- form --}}
    <x-ui.modal show="showForm" :title="$editingId ? 'Edit account' : 'New receiving account'" close-action="closeForm">
        <div class="grid gap-3 sm:grid-cols-2">
            <x-ui.select label="Method" wire:model.live="form.gateway" :options="$gateways"
                         required :error="$errors->first('form.gateway')" />

            <x-ui.select label="Offered for" wire:model="form.saas_product_id" :options="$products"
                         placeholder="All products" :error="$errors->first('form.saas_product_id')" />

            <div class="sm:col-span-2">
                <x-ui.input label="Label shown to the shop" wire:model="form.title" required
                            hint="e.g. “Meezan Bank — Main account” or “Easypaisa (fastest)”"
                            :error="$errors->first('form.title')" />
            </div>

            <x-ui.input label="Account title" wire:model="form.account_title" required
                        hint="The name the account is registered under."
                        :error="$errors->first('form.account_title')" />

            <x-ui.input
                :label="$isWallet ? 'Mobile number' : 'Account number'"
                wire:model="form.account_number"
                required
                :hint="$isWallet ? 'Pakistani mobile, e.g. 03001234567' : 'Digits, spaces and dashes only.'"
                :error="$errors->first('form.account_number')"
            />

            @unless ($isWallet)
                <x-ui.input label="IBAN" wire:model="form.iban"
                            hint="PK plus 22 characters, e.g. PK36SCBL0000001123456702"
                            :error="$errors->first('form.iban')" />

                <x-ui.input label="Bank" wire:model="form.bank_name" required :error="$errors->first('form.bank_name')" />
                <x-ui.input label="Branch" wire:model="form.branch_name" :error="$errors->first('form.branch_name')" />
                <x-ui.input label="Branch code" wire:model="form.branch_code" :error="$errors->first('form.branch_code')" />
            @endunless

            <div class="sm:col-span-2">
                <x-ui.textarea label="Instructions for the shop" wire:model="form.instructions" rows="3"
                               placeholder="e.g. Always write your shop name in the transfer remarks so we can match it."
                               :error="$errors->first('form.instructions')" />
            </div>

            <x-ui.input label="Sort order" type="number" wire:model="form.sort_order" />

            <div class="flex items-end">
                <x-ui.toggle wire:model="form.is_active" label="Show this account to shops" />
            </div>
        </div>

        <x-slot:footer>
            <x-ui.button wire:click="closeForm">Cancel</x-ui.button>
            <x-ui.button variant="primary" wire:click="saveResource" loading="saveResource">Save account</x-ui.button>
        </x-slot:footer>
    </x-ui.modal>

    <x-resource.delete-confirm label="account" />
</div>
