@extends('layouts.app')

@section('title', 'Platform Settings')
@section('page-title', 'Platform Settings')
@section('page-subtitle', 'Manage platform, email, SMS, WhatsApp, and payment gateway setup')

@section('content')
@php
    $setting = fn (string $key, mixed $default = null) => old($key, $settings[$key] ?? $default);
    $testimonialsJson = old('homepage_testimonials', json_encode(json_decode((string) ($settings['homepage_testimonials'] ?? '[]'), true) ?: [], JSON_PRETTY_PRINT));
@endphp

<form method="POST" action="{{ route('super.settings.update') }}">
    @csrf

    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white">
            <ul class="nav nav-tabs card-header-tabs" id="settingsTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="platform-tab" data-bs-toggle="tab" data-bs-target="#platform-pane" type="button" role="tab" aria-controls="platform-pane" aria-selected="true">
                        <i class="bi bi-sliders me-1"></i> Platform
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="homepage-tab" data-bs-toggle="tab" data-bs-target="#homepage-pane" type="button" role="tab" aria-controls="homepage-pane" aria-selected="false">
                        <i class="bi bi-window me-1"></i> Homepage
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="automation-tab" data-bs-toggle="tab" data-bs-target="#automation-pane" type="button" role="tab" aria-controls="automation-pane" aria-selected="false">
                        <i class="bi bi-bell me-1"></i> Auto Notifications
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="email-tab" data-bs-toggle="tab" data-bs-target="#email-pane" type="button" role="tab" aria-controls="email-pane" aria-selected="false">
                        <i class="bi bi-envelope me-1"></i> Email
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="sms-tab" data-bs-toggle="tab" data-bs-target="#sms-pane" type="button" role="tab" aria-controls="sms-pane" aria-selected="false">
                        <i class="bi bi-phone me-1"></i> SMS
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="whatsapp-tab" data-bs-toggle="tab" data-bs-target="#whatsapp-pane" type="button" role="tab" aria-controls="whatsapp-pane" aria-selected="false">
                        <i class="bi bi-whatsapp me-1"></i> WhatsApp
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="payment-tab" data-bs-toggle="tab" data-bs-target="#payment-pane" type="button" role="tab" aria-controls="payment-pane" aria-selected="false">
                        <i class="bi bi-credit-card me-1"></i> Payment Gateway
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="bill-payment-tab" data-bs-toggle="tab" data-bs-target="#bill-payment-pane" type="button" role="tab" aria-controls="bill-payment-pane" aria-selected="false">
                        <i class="bi bi-phone-vibrate me-1"></i> Bill Payments
                    </button>
                </li>
            </ul>
        </div>

        <div class="card-body">
            <div class="tab-content" id="settingsTabsContent">
                <div class="tab-pane fade show active" id="platform-pane" role="tabpanel" aria-labelledby="platform-tab" tabindex="0">
                    <div class="d-flex justify-content-between align-items-start gap-3 mb-3">
                        <div>
                            <h2 class="h5 mb-1">Platform</h2>
                            <div class="text-muted small">Basic SaaS information, trial length, and bank details.</div>
                        </div>
                    </div>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Platform name</label>
                            <input name="platform_name" value="{{ $setting('platform_name', config('app.name')) }}" class="form-control" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Support email</label>
                            <input name="support_email" type="email" value="{{ $setting('support_email', config('mail.from.address')) }}" class="form-control" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Trial days</label>
                            <input name="trial_days" type="number" value="{{ $setting('trial_days', 14) }}" class="form-control" required>
                        </div>
                        <div class="col-12">
                            <label class="form-label">Bank details</label>
                            <textarea name="bank_details" rows="4" class="form-control">{{ $setting('bank_details', '') }}</textarea>
                        </div>
                    </div>
                </div>

                <div class="tab-pane fade" id="homepage-pane" role="tabpanel" aria-labelledby="homepage-tab" tabindex="0">
                    <div class="d-flex justify-content-between align-items-start gap-3 mb-3">
                        <div>
                            <h2 class="h5 mb-1">Homepage Editor</h2>
                            <div class="text-muted small">Edit the public SaaS homepage text, contact details, WhatsApp link, and testimonials.</div>
                        </div>
                    </div>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Hero title</label>
                            <input name="homepage_hero_title" value="{{ $setting('homepage_hero_title', 'Run your entire Microfinance from one modern platform.') }}" class="form-control" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Primary button text</label>
                            <input name="homepage_primary_cta" value="{{ $setting('homepage_primary_cta', 'Start 14-day trial') }}" class="form-control" required>
                        </div>
                        <div class="col-12">
                            <label class="form-label">Hero subtitle</label>
                            <textarea name="homepage_hero_subtitle" rows="3" class="form-control" required>{{ $setting('homepage_hero_subtitle', 'Smart Solution, manage savings and loans, automate repayment schedules, collect online payments, sell airtime, data and electricity bills, and get a branded customer portal.') }}</textarea>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">About title</label>
                            <input name="homepage_about_title" value="{{ $setting('homepage_about_title', 'Built for daily microfinance work.') }}" class="form-control" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Contact email</label>
                            <input name="homepage_contact_email" type="email" value="{{ $setting('homepage_contact_email', 'hello@microfinance-saas.test') }}" class="form-control" required>
                        </div>
                        <div class="col-12">
                            <label class="form-label">About body</label>
                            <textarea name="homepage_about_body" rows="3" class="form-control" required>{{ $setting('homepage_about_body', 'NewKipp helps microfinance and cooperative teams manage members, collect savings, disburse loans, track repayments, sell bill payments, and view clear reports from one organized workspace.') }}</textarea>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Contact phone</label>
                            <input name="homepage_contact_phone" value="{{ $setting('homepage_contact_phone', '+234 800 000 0000') }}" class="form-control" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">WhatsApp number</label>
                            <input name="homepage_whatsapp_number" value="{{ $setting('homepage_whatsapp_number', '2348000000000') }}" class="form-control" required>
                        </div>
                        <div class="col-12">
                            <label class="form-label">Testimonials JSON</label>
                            <textarea name="homepage_testimonials" rows="10" class="form-control font-monospace" required>{{ $testimonialsJson }}</textarea>
                            <div class="form-text">Use an array of objects with name, role, and quote.</div>
                        </div>
                    </div>
                </div>

                <div class="tab-pane fade" id="automation-pane" role="tabpanel" aria-labelledby="automation-tab" tabindex="0">
                    <div class="d-flex justify-content-between align-items-start gap-3 mb-3">
                        <div>
                            <h2 class="h5 mb-1">Tenant Lifecycle Notifications</h2>
                            <div class="text-muted small">Choose which channels are used for tenant registration, payment, trial reminder, and overdue reminder messages.</div>
                        </div>
                    </div>
                    <div class="row g-3">
                        @foreach([
                            ['tenant_lifecycle_email_enabled', 'Email', 'bi-envelope'],
                            ['tenant_lifecycle_sms_enabled', 'SMS', 'bi-phone'],
                            ['tenant_lifecycle_whatsapp_enabled', 'WhatsApp', 'bi-whatsapp'],
                            ['tenant_lifecycle_portal_enabled', 'System alert', 'bi-bell'],
                        ] as [$key, $label, $icon])
                            <div class="col-md-3">
                                <div class="border rounded p-3 h-100">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" role="switch" name="{{ $key }}" value="1" id="{{ $key }}" @checked(filter_var($setting($key, in_array($key, ['tenant_lifecycle_email_enabled', 'tenant_lifecycle_portal_enabled'], true) ? '1' : '0'), FILTER_VALIDATE_BOOLEAN))>
                                        <label class="form-check-label fw-semibold" for="{{ $key }}"><i class="bi {{ $icon }} me-1"></i>{{ $label }}</label>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="tab-pane fade" id="email-pane" role="tabpanel" aria-labelledby="email-tab" tabindex="0">
                    <div class="d-flex justify-content-between align-items-start gap-3 mb-3">
                        <div>
                            <h2 class="h5 mb-1">Email Setup</h2>
                            <div class="text-muted small">Use log mode for testing or SMTP for live tenant emails.</div>
                        </div>
                    </div>
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label">Mailer</label>
                            <select name="mail_mailer" class="form-select">
                                <option value="log" @selected($setting('mail_mailer', config('mail.default', 'log')) === 'log')>Log only</option>
                                <option value="smtp" @selected($setting('mail_mailer', config('mail.default', 'log')) === 'smtp')>SMTP</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">SMTP host</label>
                            <input name="mail_host" value="{{ $setting('mail_host', config('mail.mailers.smtp.host')) }}" class="form-control" placeholder="mail.your-domain.com">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Port</label>
                            <input name="mail_port" type="number" value="{{ $setting('mail_port', config('mail.mailers.smtp.port')) }}" class="form-control">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Security</label>
                            <select name="mail_scheme" class="form-select">
                                <option value="" @selected($setting('mail_scheme', config('mail.mailers.smtp.scheme')) === null || $setting('mail_scheme', config('mail.mailers.smtp.scheme')) === '')>None</option>
                                <option value="tls" @selected($setting('mail_scheme', config('mail.mailers.smtp.scheme')) === 'tls')>TLS</option>
                                <option value="ssl" @selected($setting('mail_scheme', config('mail.mailers.smtp.scheme')) === 'ssl')>SSL</option>
                                <option value="smtps" @selected($setting('mail_scheme', config('mail.mailers.smtp.scheme')) === 'smtps')>SMTPS</option>
                            </select>
                        </div>
                        <div class="col-12">
                            <div class="email-safety-option border rounded-3 p-3 bg-light">
                                <div class="form-check form-switch mb-1">
                                    <input type="hidden" name="mail_verify_peer" value="0">
                                    <input class="form-check-input" type="checkbox" role="switch" name="mail_verify_peer" value="1" id="mail_verify_peer" @checked(filter_var($setting('mail_verify_peer', '1'), FILTER_VALIDATE_BOOLEAN))>
                                    <label class="form-check-label fw-semibold" for="mail_verify_peer">Verify SMTP SSL certificate</label>
                                </div>
                                <div class="form-text">Recommended: keep this on and use the real Namecheap server hostname, for example server123.web-hosting.com. Turn it off only if your host gives a certificate mismatch like mail.newkipp.com versus *.web-hosting.com.</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">SMTP username</label>
                            <input name="mail_username" value="{{ $setting('mail_username', config('mail.mailers.smtp.username')) }}" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">SMTP password</label>
                            <input name="mail_password" type="password" value="" class="form-control" autocomplete="new-password" placeholder="{{ filled($setting('mail_password', config('mail.mailers.smtp.password'))) ? 'Saved - leave blank to keep current password' : 'Enter SMTP password' }}">
                            <div class="form-text">Password is hidden for security. Leave blank unless you want to set or replace it.</div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">From email</label>
                            <input name="mail_from_address" type="email" value="{{ $setting('mail_from_address', config('mail.from.address')) }}" class="form-control" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">From name</label>
                            <input name="mail_from_name" value="{{ $setting('mail_from_name', config('mail.from.name')) }}" class="form-control" required>
                        </div>
                    </div>
                </div>

                <div class="tab-pane fade" id="sms-pane" role="tabpanel" aria-labelledby="sms-tab" tabindex="0">
                    <div class="d-flex justify-content-between align-items-start gap-3 mb-3">
                        <div>
                            <h2 class="h5 mb-1">SMS Setup</h2>
                            <div class="text-muted small">Configure a shared-hosting friendly HTTP SMS gateway.</div>
                        </div>
                    </div>
                    <div class="row g-3">
                        <div class="col-md-3">
                            <label class="form-label">SMS driver</label>
                            <select name="sms_driver" class="form-select">
                                <option value="log" @selected($setting('sms_driver', config('services.sms.driver', 'log')) === 'log')>Log only</option>
                                <option value="http" @selected($setting('sms_driver', config('services.sms.driver', 'log')) === 'http')>HTTP gateway</option>
                                <option value="ebulksms" @selected($setting('sms_driver', config('services.sms.driver', 'log')) === 'ebulksms')>eBulkSMS</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Method</label>
                            <select name="sms_gateway_method" class="form-select">
                                <option value="POST" @selected($setting('sms_gateway_method', config('services.sms.method', 'POST')) === 'POST')>POST</option>
                                <option value="GET" @selected($setting('sms_gateway_method', config('services.sms.method', 'POST')) === 'GET')>GET</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Gateway URL</label>
                            <input name="sms_gateway_url" value="{{ $setting('sms_gateway_url', config('services.sms.url') ?: 'https://api.ebulksms.com/sendsms') }}" class="form-control" placeholder="https://api.ebulksms.com/sendsms">
                            <div class="form-text">For eBulkSMS, use https://api.ebulksms.com/sendsms.</div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">eBulkSMS username/email</label>
                            <input name="sms_gateway_username" value="{{ $setting('sms_gateway_username', config('services.sms.username')) }}" class="form-control" placeholder="your-ebulksms-email@example.com">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">API token / eBulkSMS API key</label>
                            <input name="sms_gateway_token" type="password" value="{{ $setting('sms_gateway_token', config('services.sms.token')) }}" class="form-control" autocomplete="new-password">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Sender name</label>
                            <input name="sms_from" value="{{ $setting('sms_from', config('services.sms.sender', config('app.name'))) }}" class="form-control">
                            <div class="form-text">eBulkSMS allows alphanumeric sender names up to 11 characters.</div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">eBulkSMS DND sender</label>
                            <select name="sms_dnd_sender" class="form-select">
                                <option value="1" @selected((string) $setting('sms_dnd_sender', config('services.sms.dnd_sender', '1')) === '1')>Enabled - deliver to DND numbers</option>
                                <option value="0" @selected((string) $setting('sms_dnd_sender', config('services.sms.dnd_sender', '1')) === '0')>Disabled</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Tenant purchase price per SMS unit</label>
                            <input name="sms_unit_price" type="number" step="0.01" min="0" value="{{ $setting('sms_unit_price', 5) }}" class="form-control">
                            <div class="form-text">This is what tenants pay when buying SMS units from the platform.</div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Default member SMS charge</label>
                            <input name="default_sms_member_charge" type="number" step="0.01" min="0" value="{{ $setting('default_sms_member_charge', $setting('sms_unit_price', 5)) }}" class="form-control">
                            <div class="form-text">Tenants can override this in their own company settings.</div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Phone field name</label>
                            <input name="sms_to_param" value="{{ $setting('sms_to_param', config('services.sms.to_param', 'to')) }}" class="form-control" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Message field name</label>
                            <input name="sms_message_param" value="{{ $setting('sms_message_param', config('services.sms.message_param', 'message')) }}" class="form-control" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Sender field name</label>
                            <input name="sms_sender_param" value="{{ $setting('sms_sender_param', config('services.sms.sender_param', 'from')) }}" class="form-control" required>
                        </div>
                    </div>
                </div>

                <div class="tab-pane fade" id="whatsapp-pane" role="tabpanel" aria-labelledby="whatsapp-tab" tabindex="0">
                    <div class="d-flex justify-content-between align-items-start gap-3 mb-3">
                        <div>
                            <h2 class="h5 mb-1">WhatsApp Setup</h2>
                            <div class="text-muted small">Configure a generic HTTP WhatsApp gateway for tenant messages.</div>
                        </div>
                    </div>
                    <div class="row g-3">
                        <div class="col-md-3">
                            <label class="form-label">WhatsApp driver</label>
                            <select name="whatsapp_driver" class="form-select">
                                <option value="log" @selected($setting('whatsapp_driver', config('services.whatsapp.driver', 'log')) === 'log')>Log only</option>
                                <option value="http" @selected($setting('whatsapp_driver', config('services.whatsapp.driver', 'log')) === 'http')>HTTP gateway</option>
                                <option value="ebulksms" @selected($setting('whatsapp_driver', config('services.whatsapp.driver', 'log')) === 'ebulksms')>eBulkSMS</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Method</label>
                            <select name="whatsapp_gateway_method" class="form-select">
                                <option value="POST" @selected($setting('whatsapp_gateway_method', config('services.whatsapp.method', 'POST')) === 'POST')>POST</option>
                                <option value="GET" @selected($setting('whatsapp_gateway_method', config('services.whatsapp.method', 'POST')) === 'GET')>GET</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Gateway URL</label>
                            <input name="whatsapp_gateway_url" value="{{ $setting('whatsapp_gateway_url', config('services.whatsapp.url') ?: 'https://api.ebulksms.com/sendwhatsapp.json') }}" class="form-control" placeholder="https://api.ebulksms.com/sendwhatsapp.json">
                            <div class="form-text">For eBulkSMS WhatsApp, use https://api.ebulksms.com/sendwhatsapp.json.</div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">eBulkSMS username/email</label>
                            <input name="whatsapp_gateway_username" value="{{ $setting('whatsapp_gateway_username', config('services.whatsapp.username')) }}" class="form-control" placeholder="your-ebulksms-email@example.com">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">API token / eBulkSMS API key</label>
                            <input name="whatsapp_gateway_token" type="password" value="{{ $setting('whatsapp_gateway_token', config('services.whatsapp.token')) }}" class="form-control" autocomplete="new-password">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Sender name / eBulkSMS subject</label>
                            <input name="whatsapp_from" value="{{ $setting('whatsapp_from', config('services.whatsapp.sender', config('app.name'))) }}" class="form-control">
                            <div class="form-text">For eBulkSMS WhatsApp, this is the message subject/title used on their platform.</div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Tenant purchase price per WhatsApp unit</label>
                            <input name="whatsapp_unit_price" type="number" step="0.01" min="0" value="{{ $setting('whatsapp_unit_price', 15) }}" class="form-control">
                            <div class="form-text">This is what tenants pay when buying WhatsApp units from the platform.</div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Default member WhatsApp charge</label>
                            <input name="default_whatsapp_member_charge" type="number" step="0.01" min="0" value="{{ $setting('default_whatsapp_member_charge', $setting('whatsapp_unit_price', 15)) }}" class="form-control">
                            <div class="form-text">Tenants can override this in their own company settings.</div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Phone field name</label>
                            <input name="whatsapp_to_param" value="{{ $setting('whatsapp_to_param', config('services.whatsapp.to_param', 'to')) }}" class="form-control" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Message field name</label>
                            <input name="whatsapp_message_param" value="{{ $setting('whatsapp_message_param', config('services.whatsapp.message_param', 'message')) }}" class="form-control" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Sender field name</label>
                            <input name="whatsapp_sender_param" value="{{ $setting('whatsapp_sender_param', config('services.whatsapp.sender_param', 'from')) }}" class="form-control" required>
                        </div>
                    </div>
                </div>

                <div class="tab-pane fade" id="payment-pane" role="tabpanel" aria-labelledby="payment-tab" tabindex="0">
                    <div class="d-flex justify-content-between align-items-start gap-3 mb-3">
                        <div>
                            <h2 class="h5 mb-1">Payment Gateway</h2>
                            <div class="text-muted small">Choose the platform checkout provider for subscription payments and tenant communication-unit purchases.</div>
                        </div>
                    </div>
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label">Provider</label>
                            <select name="payment_gateway_provider" class="form-select" data-platform-payment-provider>
                                <option value="none" @selected($setting('payment_gateway_provider', config('services.subscription_gateway.provider', 'none')) === 'none')>None</option>
                                <option value="paystack" @selected($setting('payment_gateway_provider', config('services.subscription_gateway.provider', 'none')) === 'paystack')>Paystack</option>
                                <option value="monnify" @selected($setting('payment_gateway_provider', config('services.subscription_gateway.provider', 'none')) === 'monnify')>Monnify</option>
                                <option value="flutterwave" @selected($setting('payment_gateway_provider', config('services.subscription_gateway.provider', 'none')) === 'flutterwave')>Flutterwave</option>
                                <option value="providus_bank" @selected($setting('payment_gateway_provider', config('services.subscription_gateway.provider', 'none')) === 'providus_bank')>Providus Bank</option>
                                <option value="wema_bank" @selected($setting('payment_gateway_provider', config('services.subscription_gateway.provider', 'none')) === 'wema_bank')>Wema Bank</option>
                            </select>
                            <div class="form-text">Hosted checkout is available for Paystack, Monnify, and Flutterwave.</div>
                        </div>

                        <div class="col-12" data-platform-provider-settings="none">
                            <div class="alert alert-light border mb-0">Online subscription checkout is disabled. Tenants can still submit manual payment proof.</div>
                        </div>

                        <div class="col-12" data-platform-provider-settings="paystack">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label">Paystack secret key</label>
                                    <input name="paystack_secret_key" type="password" value="" class="form-control" autocomplete="new-password" placeholder="{{ filled($setting('paystack_secret_key', config('services.paystack.secret_key'))) ? 'Saved - leave blank to keep current key' : 'sk_live_xxxxx' }}">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Paystack base URL</label>
                                    <input name="paystack_base_url" value="{{ $setting('paystack_base_url', config('services.paystack.base_url', 'https://api.paystack.co')) }}" class="form-control">
                                </div>
                                <div class="col-12">
                                    <div class="alert alert-info mb-0 small">Paystack automatic renewal uses the reusable authorization code returned after the tenant's first successful card payment.</div>
                                </div>
                            </div>
                        </div>

                        <div class="col-12" data-platform-provider-settings="monnify">
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <label class="form-label">Monnify API key</label>
                                    <input name="monnify_api_key" type="password" value="" class="form-control" autocomplete="new-password" placeholder="{{ filled($setting('monnify_api_key', config('services.monnify.api_key'))) ? 'Saved - leave blank to keep current key' : 'Monnify API key' }}">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Monnify secret key</label>
                                    <input name="monnify_secret_key" type="password" value="" class="form-control" autocomplete="new-password" placeholder="{{ filled($setting('monnify_secret_key', config('services.monnify.secret_key'))) ? 'Saved - leave blank to keep current secret' : 'Monnify secret key' }}">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Contract code</label>
                                    <input name="monnify_contract_code" value="{{ $setting('monnify_contract_code', config('services.monnify.contract_code')) }}" class="form-control">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Monnify base URL</label>
                                    <input name="monnify_base_url" value="{{ $setting('monnify_base_url', config('services.monnify.base_url', 'https://api.monnify.com')) }}" class="form-control">
                                </div>
                                <div class="col-md-6">
                                    <div class="alert alert-info mb-0 small">For automatic renewal, Monnify card tokenization must be enabled on your Monnify account.</div>
                                </div>
                            </div>
                        </div>

                        <div class="col-12" data-platform-provider-settings="flutterwave">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label">Flutterwave secret key</label>
                                    <input name="flutterwave_secret_key" type="password" value="" class="form-control" autocomplete="new-password" placeholder="{{ filled($setting('flutterwave_secret_key', config('services.flutterwave.secret_key'))) ? 'Saved - leave blank to keep current key' : 'FLWSECK_xxxxx' }}">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Flutterwave base URL</label>
                                    <input name="flutterwave_base_url" value="{{ $setting('flutterwave_base_url', config('services.flutterwave.base_url', 'https://api.flutterwave.com/v3')) }}" class="form-control">
                                </div>
                                <div class="col-12">
                                    <div class="alert alert-info mb-0 small">Flutterwave automatic renewal uses tokenized card payments when the verification response returns a card token.</div>
                                </div>
                            </div>
                        </div>

                        <div class="col-12" data-platform-provider-settings="providus_bank">
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <label class="form-label">Providus client ID</label>
                                    <input name="providus_client_id" value="{{ $setting('providus_client_id', config('services.providus.client_id')) }}" class="form-control">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Providus client secret</label>
                                    <input name="providus_client_secret" type="password" value="" class="form-control" autocomplete="new-password" placeholder="{{ filled($setting('providus_client_secret', config('services.providus.client_secret'))) ? 'Saved - leave blank to keep current secret' : 'Provided by Providus' }}">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Providus base URL</label>
                                    <input name="providus_base_url" value="{{ $setting('providus_base_url', config('services.providus.base_url')) }}" class="form-control" placeholder="Provided by Providus">
                                </div>
                                <div class="col-12">
                                    <div class="alert alert-warning mb-0 small">Providus is stored as a direct-bank adapter. It does not expose a generic hosted checkout in this app until bank-issued API documentation is connected.</div>
                                </div>
                            </div>
                        </div>

                        <div class="col-12" data-platform-provider-settings="wema_bank">
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <label class="form-label">Wema client ID</label>
                                    <input name="wema_client_id" value="{{ $setting('wema_client_id', config('services.wema.client_id')) }}" class="form-control">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Wema client secret</label>
                                    <input name="wema_client_secret" type="password" value="" class="form-control" autocomplete="new-password" placeholder="{{ filled($setting('wema_client_secret', config('services.wema.client_secret'))) ? 'Saved - leave blank to keep current secret' : 'Provided by Wema' }}">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Wema base URL</label>
                                    <input name="wema_base_url" value="{{ $setting('wema_base_url', config('services.wema.base_url')) }}" class="form-control" placeholder="Provided by Wema">
                                </div>
                                <div class="col-12">
                                    <div class="alert alert-warning mb-0 small">For Wema virtual accounts through Paystack, use Paystack and set the preferred bank at tenant level. Direct Wema APIs need bank-issued credentials.</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="tab-pane fade" id="bill-payment-pane" role="tabpanel" aria-labelledby="bill-payment-tab" tabindex="0">
                    <div class="d-flex justify-content-between align-items-start gap-3 mb-3">
                        <div>
                            <h2 class="h5 mb-1">Bill Payment Provider</h2>
                            <div class="text-muted small">Configure the VTU provider once here. All tenants will use this platform provider for airtime, data, electricity, cable TV, and internet.</div>
                        </div>
                    </div>
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label">Provider driver</label>
                            <select name="bill_payment_driver" class="form-select" data-platform-bill-provider>
                                <option value="manual_provider" @selected($setting('bill_payment_driver', 'manual_provider') === 'manual_provider')>Manual / demo recording</option>
                                <option value="vtpass" @selected($setting('bill_payment_driver', 'manual_provider') === 'vtpass')>VTpass</option>
                                <option value="flutterwave" @selected($setting('bill_payment_driver', 'manual_provider') === 'flutterwave')>Flutterwave Bills</option>
                            </select>
                            <div class="form-text">Live providers debit your provider wallet after the tenant's VTU wallet is charged.</div>
                        </div>
                        <div class="col-md-4" data-platform-bill-settings="vtpass">
                            <label class="form-label">VTpass environment</label>
                            <select name="vtpass_environment" class="form-select" data-vtpass-environment>
                                <option value="sandbox" @selected($setting('vtpass_environment', 'sandbox') === 'sandbox')>Sandbox</option>
                                <option value="live" @selected($setting('vtpass_environment', 'sandbox') === 'live')>Live</option>
                            </select>
                        </div>
                        <div class="col-md-4" data-platform-bill-settings="vtpass">
                            <label class="form-label">VTpass base URL</label>
                            <input name="vtpass_base_url" value="{{ $setting('vtpass_base_url', 'https://sandbox.vtpass.com/api') }}" class="form-control" data-vtpass-base-url>
                        </div>

                        <div class="col-12" data-platform-bill-settings="manual_provider">
                            <div class="alert alert-light border mb-0">Manual mode records bill payments locally without sending them to a live VTU provider.</div>
                        </div>

                        <div class="col-12" data-platform-bill-settings="vtpass">
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <label class="form-label">VTpass API key</label>
                                    <input name="vtpass_api_key" type="password" value="" class="form-control" autocomplete="new-password" placeholder="{{ filled($setting('vtpass_api_key')) ? 'Saved - leave blank to keep current key' : 'VTpass API key' }}">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">VTpass public key</label>
                                    <input name="vtpass_public_key" type="password" value="" class="form-control" autocomplete="new-password" placeholder="{{ filled($setting('vtpass_public_key')) ? 'Saved - leave blank to keep current public key' : 'VTpass public key' }}">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">VTpass secret key</label>
                                    <input name="vtpass_secret_key" type="password" value="" class="form-control" autocomplete="new-password" placeholder="{{ filled($setting('vtpass_secret_key')) ? 'Saved - leave blank to keep current secret' : 'VTpass secret key' }}">
                                </div>
                                <div class="col-12">
                                    <div class="alert alert-info mb-0 small">
                                        Airtime can vend with phone and amount. Data, cable TV, and internet require a valid VTpass variation code in the package/plan field. Electricity uses prepaid/postpaid from the package selected by the user.
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-12" data-platform-bill-settings="flutterwave">
                            <div class="row g-3">
                                <div class="col-md-5">
                                    <label class="form-label">Flutterwave Bills secret key</label>
                                    <input name="flutterwave_bills_secret_key" type="password" value="" class="form-control" autocomplete="new-password" placeholder="{{ filled($setting('flutterwave_bills_secret_key')) || filled($setting('flutterwave_secret_key')) ? 'Saved - leave blank to keep current key' : 'FLWSECK...' }}">
                                    <div class="form-text">Leave blank to reuse the saved platform Flutterwave secret key.</div>
                                </div>
                                <div class="col-md-5">
                                    <label class="form-label">Flutterwave Bills base URL</label>
                                    <input name="flutterwave_bills_base_url" value="{{ $setting('flutterwave_bills_base_url', 'https://api.flutterwave.com/v3') }}" class="form-control">
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label">Country</label>
                                    <input name="flutterwave_bills_country" value="{{ $setting('flutterwave_bills_country', 'NG') }}" maxlength="2" class="form-control text-uppercase">
                                </div>
                                <div class="col-12">
                                    <div class="alert alert-info mb-0 small">
                                        Airtime uses Flutterwave's common airtime biller automatically. For data, cable TV, internet, and any unmapped biller, enter the Flutterwave package code as <strong>BILLER_CODE|ITEM_CODE</strong> in the package/plan field. Electricity can use prepaid/postpaid when the provider is mapped, or the same code format for exact control.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card-footer bg-white d-flex justify-content-end">
            <button class="btn btn-primary"><i class="bi bi-save me-1"></i> Save settings</button>
        </div>
    </div>
</form>
<script>
document.addEventListener('DOMContentLoaded', () => {
    const provider = document.querySelector('[data-platform-payment-provider]');
    const providerSections = document.querySelectorAll('[data-platform-provider-settings]');
    const billProvider = document.querySelector('[data-platform-bill-provider]');
    const billSections = document.querySelectorAll('[data-platform-bill-settings]');
    const vtpassEnvironment = document.querySelector('[data-vtpass-environment]');
    const vtpassBaseUrl = document.querySelector('[data-vtpass-base-url]');

    const syncProviderSections = () => {
        providerSections.forEach((section) => {
            section.classList.toggle('d-none', section.dataset.platformProviderSettings !== provider?.value);
        });
    };

    provider?.addEventListener('change', syncProviderSections);
    syncProviderSections();

    const syncBillSections = () => {
        billSections.forEach((section) => {
            section.classList.toggle('d-none', section.dataset.platformBillSettings !== billProvider?.value);
        });
    };

    billProvider?.addEventListener('change', syncBillSections);
    syncBillSections();

    vtpassEnvironment?.addEventListener('change', () => {
        if (!vtpassBaseUrl) return;
        vtpassBaseUrl.value = vtpassEnvironment.value === 'live' ? 'https://vtpass.com/api' : 'https://sandbox.vtpass.com/api';
    });

    const activateHashTab = () => {
        if (!window.location.hash) return;
        const trigger = document.querySelector(`[data-bs-target="${window.location.hash}"]`);
        if (trigger) bootstrap.Tab.getOrCreateInstance(trigger).show();
    };

    activateHashTab();
    window.addEventListener('hashchange', activateHashTab);
});
</script>
@endsection
