@if (! $selectedUser)
    <div class="settings-placeholder">
        <div>
            <div class="fs-5 fw-bold mb-2">No merchant selected</div>
            {{-- <div>Select a user from the left panel to manage collection or payout settings.</div> --}}
        </div>
    </div>
@else
    <div class="settings-card-header d-flex flex-wrap align-items-center justify-content-between gap-2">
        <div>
            <div class="fw-bold">{{ $selectedUser->name }}</div>
            <div class="small opacity-75">{{ $selectedUser->email }}</div>
        </div>
        <span class="small opacity-75">{{ ucfirst($activeTab) }} Settings</span>
    </div>

    <div class="settings-detail-body">
        <form method="POST" action="{{ route('admin.user_settings.update', ['user' => $selectedUser, 'tab' => $activeTab]) }}" data-user-settings-form>
            @csrf
            @method('PUT')

            @if ($activeTab === 'collection')
                <div class="settings-row">
                    <div class="settings-label">Payin Mode Status</div>
                    <div class="settings-segment">
                        <input type="radio" name="payin_mode_status" id="payin_mode_status_active" value="1" {{ $selectedUser->payin_mode_status ? 'checked' : '' }}>
                        <label for="payin_mode_status_active">Active</label>
                        <input type="radio" name="payin_mode_status" id="payin_mode_status_suspend" value="0" {{ $selectedUser->payin_mode_status ? '' : 'checked' }}>
                        <label for="payin_mode_status_suspend">Suspend</label>
                    </div>
                </div>

                <div class="settings-row">
                    <div class="settings-label">Payin API Mode</div>
                    <div class="settings-segment">
                        <input type="radio" name="payin_api_mode" id="payin_api_mode_both" value="both" {{ $selectedUser->payin_api_mode === 'both' ? 'checked' : '' }}>
                        <label for="payin_api_mode_both">Both</label>
                        <input type="radio" name="payin_api_mode" id="payin_api_mode_redirect" value="redirect" {{ $selectedUser->payin_api_mode === 'redirect' ? 'checked' : '' }}>
                        <label for="payin_api_mode_redirect">Redirect</label>
                        <input type="radio" name="payin_api_mode" id="payin_api_mode_hosted" value="hosted" {{ $selectedUser->payin_api_mode === 'hosted' ? 'checked' : '' }}>
                        <label for="payin_api_mode_hosted">Hosted</label>
                    </div>
                </div>

                <div class="settings-row">
                    <div class="settings-label">Check Blacklisted Contact</div>
                    <div class="settings-segment">
                        <input type="radio" name="payin_blacklist_contact_check" id="blacklist_enabled" value="1" {{ $selectedUser->payin_blacklist_contact_check ? 'checked' : '' }}>
                        <label for="blacklist_enabled">Enabled</label>
                        <input type="radio" name="payin_blacklist_contact_check" id="blacklist_disabled" value="0" {{ $selectedUser->payin_blacklist_contact_check ? '' : 'checked' }}>
                        <label for="blacklist_disabled">Disabled</label>
                    </div>
                </div>

                <div class="pt-2 pb-1">
                    <div class="settings-section-title">Payin Charges</div>
                </div>

                @php($payinChargeMode = old('payin_charge_mode', $selectedUser->payin_charge_mode ?: 'overall'))

                <div class="settings-row">
                    <div class="settings-label">Payin Charges</div>
                    <div class="settings-segment" data-payin-charge-mode-toggle>
                        <input type="radio" name="payin_charge_mode" id="payin_charge_mode_overall" value="overall" {{ $payinChargeMode === 'overall' ? 'checked' : '' }}>
                        <label for="payin_charge_mode_overall">Overall</label>
                        <input type="radio" name="payin_charge_mode" id="payin_charge_mode_individual" value="individual" {{ $payinChargeMode === 'individual' ? 'checked' : '' }}>
                        <label for="payin_charge_mode_individual">Individual</label>
                    </div>
                </div>

                <div class="settings-mode-card {{ $payinChargeMode === 'overall' ? 'is-overall-active' : 'is-individual-active' }}" data-payin-mode-card>
                    <div class="settings-mode-group" data-payin-overall-group>
                        <div class="settings-mode-group-header">
                            <div class="settings-mode-group-title">Overall Charges</div>
                            <span class="settings-mode-badge {{ $payinChargeMode === 'overall' ? 'active' : 'inactive' }}" data-payin-overall-badge>{{ $payinChargeMode === 'overall' ? 'Active' : 'Inactive' }}</span>
                        </div>
                        <div class="settings-mode-helper">Use this when one single payin charge should apply everywhere.</div>
                        <div class="settings-row">
                            <div class="settings-label">Charges Overall</div>
                            <input
                                type="number"
                                step="0.01"
                                min="0"
                                name="payin_overall_charge"
                                value="{{ old('payin_overall_charge', $selectedUser->payin_overall_charge) }}"
                                class="form-control settings-input"
                                data-payin-overall-input
                            >
                        </div>
                    </div>

                    <input type="hidden" name="payin_overall_vat" value="{{ old('payin_overall_vat', $selectedUser->payin_overall_vat) }}">

                    <div class="settings-mode-group" data-payin-individual-group>
                        <div class="settings-mode-group-header">
                            <div class="settings-mode-group-title">Individual Charges</div>
                            <span class="settings-mode-badge {{ $payinChargeMode === 'individual' ? 'active' : 'inactive' }}" data-payin-individual-badge>{{ $payinChargeMode === 'individual' ? 'Active' : 'Inactive' }}</span>
                        </div>
                        <div class="settings-mode-helper">Use this when EasyPaisa and Jazz charges should be managed separately.</div>
                        <div class="settings-row">
                            <div class="settings-label">EasyPaisa Charges</div>
                            <div class="settings-inline-fields">
                                <input
                                    type="number"
                                    step="0.01"
                                    min="0"
                                    name="payin_easypaisa_charge"
                                    value="{{ (float) old('payin_easypaisa_charge', $selectedUser->payin_easypaisa_charge) === 0.0 ? '' : old('payin_easypaisa_charge', $selectedUser->payin_easypaisa_charge) }}"
                                    class="form-control settings-input"
                                    placeholder="Fee Charges"
                                    data-payin-individual-input
                                >
                                <input
                                    type="number"
                                    step="0.01"
                                    min="0"
                                    name="payin_easypaisa_vat"
                                    value="{{ (float) old('payin_easypaisa_vat', $selectedUser->payin_easypaisa_vat) === 0.0 ? '' : old('payin_easypaisa_vat', $selectedUser->payin_easypaisa_vat) }}"
                                    class="form-control settings-input"
                                    placeholder="VAT"
                                    data-payin-individual-input
                                >
                            </div>
                        </div>

                        <div class="settings-row">
                            <div class="settings-label">Jazz Charges</div>
                            <div class="settings-inline-fields">
                                <input
                                    type="number"
                                    step="0.01"
                                    min="0"
                                    name="payin_jazz_charge"
                                    value="{{ (float) old('payin_jazz_charge', $selectedUser->payin_jazz_charge) === 0.0 ? '' : old('payin_jazz_charge', $selectedUser->payin_jazz_charge) }}"
                                    class="form-control settings-input"
                                    placeholder="Fee Charges"
                                    data-payin-individual-input
                                >
                                <input
                                    type="number"
                                    step="0.01"
                                    min="0"
                                    name="payin_jazz_vat"
                                    value="{{ (float) old('payin_jazz_vat', $selectedUser->payin_jazz_vat) === 0.0 ? '' : old('payin_jazz_vat', $selectedUser->payin_jazz_vat) }}"
                                    class="form-control settings-input"
                                    placeholder="VAT"
                                    data-payin-individual-input
                                >
                            </div>
                        </div>
                    </div>
                </div>

                {{-- <div class="settings-row">
                    <div class="settings-label">Card Charges</div>
                    <div class="settings-inline-fields">
                        <input type="number" step="0.01" min="0" name="payin_card_charge" value="{{ (float) old('payin_card_charge', $selectedUser->payin_card_charge) === 0.0 ? '' : old('payin_card_charge', $selectedUser->payin_card_charge) }}" class="form-control settings-input" placeholder="Fee Charges">
                        <input type="number" step="0.01" min="0" name="payin_card_vat" value="{{ (float) old('payin_card_vat', $selectedUser->payin_card_vat) === 0.0 ? '' : old('payin_card_vat', $selectedUser->payin_card_vat) }}" class="form-control settings-input" placeholder="VAT">
                    </div>
                </div> --}}
            @else
                <div class="settings-row">
                    <div class="settings-label">Payout Status</div>
                    <div class="settings-segment">
                        <input type="radio" name="payout_mode_status" id="payout_status_active" value="1" {{ $selectedUser->payout_mode_status ? 'checked' : '' }}>
                        <label for="payout_status_active">Active</label>
                        <input type="radio" name="payout_mode_status" id="payout_status_suspend" value="0" {{ $selectedUser->payout_mode_status ? '' : 'checked' }}>
                        <label for="payout_status_suspend">Suspend</label>
                    </div>
                </div>

                <div class="settings-row">
                    <div class="settings-label">Disbursement Mode</div>
                    <div class="settings-segment-static" aria-label="Disbursement mode currently follows payout status">
                        <span class="{{ $selectedUser->payout_mode_status ? '' : 'active' }}">Suspend</span>
                        <span class="{{ $selectedUser->payout_mode_status ? 'active' : '' }}">Active</span>
                    </div>
                </div>

                <div class="settings-row">
                    <div class="settings-label">Manual Balance Mode</div>
                    <div class="settings-segment">
                        <input type="radio" name="payout_manual_balance_mode" id="manual_balance_active" value="1" {{ $selectedUser->payout_manual_balance_mode ? 'checked' : '' }}>
                        <label for="manual_balance_active">Active</label>
                        <input type="radio" name="payout_manual_balance_mode" id="manual_balance_inactive" value="0" {{ $selectedUser->payout_manual_balance_mode ? '' : 'checked' }}>
                        <label for="manual_balance_inactive">Inactive</label>
                    </div>
                </div>

                <div class="settings-row">
                    <div class="settings-label">IP Restriction</div>
                    <div class="settings-segment">
                        <input type="radio" name="payout_ip_restriction" id="payout_ip_active" value="1" {{ $selectedUser->payout_ip_restriction ? 'checked' : '' }}>
                        <label for="payout_ip_active">Active</label>
                        <input type="radio" name="payout_ip_restriction" id="payout_ip_suspend" value="0" {{ $selectedUser->payout_ip_restriction ? '' : 'checked' }}>
                        <label for="payout_ip_suspend">Suspend</label>
                    </div>
                </div>

                <div class="settings-row">
                    <div class="settings-label">Payout Amount Limit</div>
                    <div class="settings-segment">
                        <input type="radio" name="payout_amount_limit_status" id="payout_limit_active" value="1" {{ $selectedUser->payout_amount_limit_status ? 'checked' : '' }}>
                        <label for="payout_limit_active">Active</label>
                        <input type="radio" name="payout_amount_limit_status" id="payout_limit_suspend" value="0" {{ $selectedUser->payout_amount_limit_status ? '' : 'checked' }}>
                        <label for="payout_limit_suspend">Suspend</label>
                    </div>
                </div>

                <div class="settings-row">
                    <div class="settings-label">Daily Payout Limit</div>
                    <input type="number" step="0.01" min="0" name="payout_daily_limit" value="{{ old('payout_daily_limit', $selectedUser->payout_daily_limit) }}" class="form-control settings-input">
                </div>

                <div class="settings-row">
                    <div class="settings-label">Charges Deduction From</div>
                    <div class="settings-segment">
                        <input type="radio" name="payout_charge_deduction_from" id="deduction_sender" value="sender" {{ $selectedUser->payout_charge_deduction_from === 'sender' ? 'checked' : '' }}>
                        <label for="deduction_sender">Sender</label>
                        <input type="radio" name="payout_charge_deduction_from" id="deduction_receiver" value="receiver" {{ $selectedUser->payout_charge_deduction_from === 'receiver' ? 'checked' : '' }}>
                        <label for="deduction_receiver">Receiver</label>
                    </div>
                </div>

                <div class="settings-row">
                    <div class="settings-label">Receiver Deduction Percent</div>
                    <div class="settings-inline-fields">
                        <input type="number" step="0.01" min="0" max="100" name="payout_receiver_deduction_percent" value="{{ old('payout_receiver_deduction_percent', $selectedUser->payout_receiver_deduction_percent) }}" class="form-control settings-input">
                        <input type="text" class="form-control settings-input" value="%" readonly>
                    </div>
                </div>

                <div class="settings-row">
                    <div class="settings-label">Allow Payout with Merchant Overall Balance</div>
                    <div class="settings-segment">
                        <input type="radio" name="payout_allow_overall_balance" id="overall_balance_active" value="1" {{ $selectedUser->payout_allow_overall_balance ? 'checked' : '' }}>
                        <label for="overall_balance_active">Active</label>
                        <input type="radio" name="payout_allow_overall_balance" id="overall_balance_suspend" value="0" {{ $selectedUser->payout_allow_overall_balance ? '' : 'checked' }}>
                        <label for="overall_balance_suspend">Suspend</label>
                    </div>
                </div>

                <div class="settings-row">
                    <div class="settings-label">Allow Payout with Daily Balance</div>
                    <div class="settings-segment">
                        <input type="radio" name="payout_allow_daily_balance" id="daily_balance_active" value="1" {{ $selectedUser->payout_allow_daily_balance ? 'checked' : '' }}>
                        <label for="daily_balance_active">Active</label>
                        <input type="radio" name="payout_allow_daily_balance" id="daily_balance_suspend" value="0" {{ $selectedUser->payout_allow_daily_balance ? '' : 'checked' }}>
                        <label for="daily_balance_suspend">Suspend</label>
                    </div>
                </div>

                <div class="settings-row">
                    <div class="settings-label">Charges Mode</div>
                    @php($payoutChargeMode = old('payout_charge_mode', $selectedUser->payout_charge_mode ?: 'overall'))
                    <div class="settings-segment" data-payout-charge-mode-toggle>
                        <input type="radio" name="payout_charge_mode" id="payout_charge_mode_overall" value="overall" {{ $payoutChargeMode === 'overall' ? 'checked' : '' }}>
                        <label for="payout_charge_mode_overall">Overall</label>
                        <input type="radio" name="payout_charge_mode" id="payout_charge_mode_individual" value="individual" {{ $payoutChargeMode === 'individual' ? 'checked' : '' }}>
                        <label for="payout_charge_mode_individual">Individual</label>
                    </div>
                </div>

                <div class="settings-mode-card {{ $payoutChargeMode === 'overall' ? 'is-overall-active' : 'is-individual-active' }}" data-payout-mode-card>
                    <div class="settings-mode-group" data-payout-overall-group>
                        <div class="settings-mode-group-header">
                            <div class="settings-mode-group-title">Overall Charges</div>
                            <span class="settings-mode-badge {{ $payoutChargeMode === 'overall' ? 'active' : 'inactive' }}" data-payout-overall-badge>{{ $payoutChargeMode === 'overall' ? 'Active' : 'Inactive' }}</span>
                        </div>
                        <div class="settings-mode-helper">Use this when one payout charge should apply to all payout methods.</div>
                        <div class="settings-row">
                            <div class="settings-label">Overall Charges</div>
                            <input
                                type="number"
                                step="0.01"
                                min="0"
                                name="payout_overall_charge"
                                value="{{ old('payout_overall_charge', $selectedUser->payout_overall_charge) }}"
                                class="form-control settings-input"
                                data-payout-overall-input
                            >
                        </div>
                    </div>

                    <input type="hidden" name="payout_overall_vat" value="{{ old('payout_overall_vat', $selectedUser->payout_overall_vat) }}">

                    <div class="settings-mode-group" data-payout-individual-group>
                        <div class="settings-mode-group-header">
                            <div class="settings-mode-group-title">Individual Charges</div>
                            <span class="settings-mode-badge {{ $payoutChargeMode === 'individual' ? 'active' : 'inactive' }}" data-payout-individual-badge>{{ $payoutChargeMode === 'individual' ? 'Active' : 'Inactive' }}</span>
                        </div>
                        <div class="settings-mode-helper">Use this when Mobile Wallet and IBFT charges should stay separate.</div>
                        <div class="settings-row">
                            <div class="settings-label">Mobile Wallet</div>
                            <input
                                type="number"
                                step="0.01"
                                min="0"
                                name="payout_mobile_wallet_charge"
                                value="{{ old('payout_mobile_wallet_charge', $selectedUser->payout_easypaisa_charge ?: $selectedUser->payout_jazz_charge) }}"
                                class="form-control settings-input"
                                data-payout-individual-input
                            >
                        </div>

                        <input type="hidden" name="payout_easypaisa_charge" value="{{ old('payout_easypaisa_charge', $selectedUser->payout_easypaisa_charge) }}">
                        <input type="hidden" name="payout_easypaisa_vat" value="{{ old('payout_easypaisa_vat', $selectedUser->payout_easypaisa_vat) }}">
                        <input type="hidden" name="payout_jazz_charge" value="{{ old('payout_jazz_charge', $selectedUser->payout_jazz_charge) }}">
                        <input type="hidden" name="payout_jazz_vat" value="{{ old('payout_jazz_vat', $selectedUser->payout_jazz_vat) }}">

                        <div class="settings-row">
                            <div class="settings-label">IBFT</div>
                            <input
                                type="number"
                                step="0.01"
                                min="0"
                                name="payout_ibft_charge"
                                value="{{ old('payout_ibft_charge', $selectedUser->payout_ibft_charge) }}"
                                class="form-control settings-input"
                                data-payout-individual-input
                            >
                        </div>
                    </div>
                </div>

                <input type="hidden" name="payout_ibft_vat" value="{{ old('payout_ibft_vat', $selectedUser->payout_ibft_vat) }}">
            @endif

            <div class="pt-4 d-flex flex-wrap align-items-center gap-3">
                <button type="submit" class="settings-submit" data-settings-submit>Save Changes</button>
                {{-- <div class="settings-note">Changes save instantly without reloading the page.</div> --}}
            </div>
        </form>
    </div>
@endif