@php
    $providerStatuses = $providerStatuses ?? [
        'email' => ['status' => 'inactive', 'label' => 'Uses existing mail settings'],
        'sms' => ['status' => 'inactive', 'label' => 'Not configured'],
        'whatsapp' => ['status' => 'inactive', 'label' => 'Not configured'],
        'telegram' => ['status' => 'inactive', 'label' => 'Not configured'],
    ];

    $smsServers = $smsSendingServers ?? collect();
    $waServers = $whatsappSendingServers ?? collect();
    $hasSmsServers = $smsServers->isNotEmpty();
    $hasWaServers = $waServers->isNotEmpty();
    $smsEnabledChecked = old('otp_sms_enabled', $settings['otp_sms_enabled'] ?? false) && $hasSmsServers;
    $waEnabledChecked = old('otp_whatsapp_enabled', $settings['otp_whatsapp_enabled'] ?? false) && $hasWaServers;
    $emailStatus = $providerStatuses['email']['status'] ?? 'inactive';
    $smsStatus = $providerStatuses['sms']['status'] ?? 'inactive';
    $waStatus = $providerStatuses['whatsapp']['status'] ?? 'inactive';
    $tgStatus = $providerStatuses['telegram']['status'] ?? 'inactive';
    $telegramWebhookUrl = rtrim((string) config('app.url'), '/').'/webhooks/telegram/otp';
@endphp

<div id="security-otp-providers" class="security-otp-providers">
    <div class="security-otp-hero mb-2">
        <div class="d-flex flex-wrap align-items-start justify-content-between gap-1">
            <div>
                <p class="security-otp-kicker mb-25">Delivery channels</p>
                <h3 class="security-otp-hero-title mb-50">OTP Providers</h3>
                <p class="mb-0 text-muted">
                    Choose how one-time codes reach users. Lower delivery priority wins when multiple methods are enabled.
                </p>
            </div>
            <div class="security-otp-hero-meta">
                <span class="badge rounded-pill badge-light-primary">4 channels</span>
                <span class="badge rounded-pill badge-light-secondary">Save before testing</span>
            </div>
        </div>
    </div>

    <div class="row match-height">
        {{-- Email --}}
        <div class="col-xl-6 col-12">
            <div class="card security-otp-card security-otp-card--email h-100">
                <div class="card-header security-otp-card__header">
                    <div class="d-flex align-items-center gap-1">
                        <div class="avatar bg-light-warning p-50 m-0">
                            <div class="avatar-content">
                                <i data-feather="mail" class="font-medium-3 text-warning"></i>
                            </div>
                        </div>
                        <div>
                            <p class="security-otp-kicker mb-0">Channel</p>
                            <h4 class="card-title mb-0">Email OTP</h4>
                            <small class="text-muted">{{ $providerStatuses['email']['label'] ?? 'Uses existing mail settings' }}</small>
                        </div>
                    </div>
                    <span class="badge rounded-pill badge-light-{{ $emailStatus === 'active' ? 'success' : 'secondary' }}">
                        {{ str_replace('_', ' ', $emailStatus) }}
                    </span>
                </div>
                <div class="card-body mt-1">
                    <div class="security-otp-enable">
                        <div>
                            <label class="form-check-label fw-bolder" for="providers_security_mfa_method_email">Enable Email OTP</label>
                            <small class="text-muted d-block">Deliver codes through the platform mailer</small>
                        </div>
                        <div class="form-check form-switch form-check-primary mb-0">
                            <input type="hidden" name="security_mfa_method_email" value="0">
                            <input type="checkbox" class="form-check-input" id="providers_security_mfa_method_email"
                                   name="security_mfa_method_email" value="1"
                                   @checked(old('security_mfa_method_email', $settings['security_mfa_method_email'] ?? false))>
                        </div>
                    </div>

                    <div class="security-otp-note mb-1">
                        <i data-feather="info" class="font-small-3 me-50"></i>
                        Uses System Email settings — no extra credentials here.
                    </div>

                    <label class="form-label" for="security_mfa_priority_email">Delivery priority</label>
                    <input type="number" min="0" max="1000" class="form-control"
                           id="security_mfa_priority_email" name="security_mfa_priority_email"
                           value="{{ old('security_mfa_priority_email', $settings['security_mfa_priority_email'] ?? 40) }}">
                    <small class="text-muted">Lower number = preferred channel</small>
                </div>
            </div>
        </div>

        {{-- SMS --}}
        <div class="col-xl-6 col-12">
            <div class="card security-otp-card security-otp-card--sms h-100">
                <div class="card-header security-otp-card__header">
                    <div class="d-flex align-items-center gap-1">
                        <div class="avatar bg-light-primary p-50 m-0">
                            <div class="avatar-content">
                                <i data-feather="smartphone" class="font-medium-3 text-primary"></i>
                            </div>
                        </div>
                        <div>
                            <p class="security-otp-kicker mb-0">Channel</p>
                            <h4 class="card-title mb-0">SMS OTP</h4>
                            <small class="text-muted">{{ $providerStatuses['sms']['label'] ?? 'Not configured' }}</small>
                        </div>
                    </div>
                    <span class="badge rounded-pill badge-light-{{ $smsStatus === 'active' ? 'success' : ($smsStatus === 'inactive' ? 'info' : 'secondary') }}">
                        {{ str_replace('_', ' ', $smsStatus) }}
                    </span>
                </div>
                <div class="card-body mt-1">
                    <div class="security-otp-enable {{ ! $hasSmsServers ? 'is-disabled' : '' }}">
                        <div>
                            <label class="form-check-label fw-bolder" for="otp_sms_enabled">Enable SMS OTP</label>
                            <small class="text-muted d-block">Reuse an active SMS sending server</small>
                        </div>
                        <div class="form-check form-switch form-check-primary mb-0">
                            <input type="hidden" name="otp_sms_enabled" value="0">
                            <input type="checkbox" class="form-check-input" id="otp_sms_enabled"
                                   name="otp_sms_enabled" value="1"
                                   @checked($smsEnabledChecked)
                                   @disabled(! $hasSmsServers)>
                        </div>
                    </div>

                    @if(! $hasSmsServers)
                        <div class="alert alert-warning security-otp-empty" role="alert">
                            <div class="alert-body">
                                <strong>No active SMS sending server found.</strong>
                                <a href="{{ route('admin.sending-servers.index') }}" class="alert-link">Configure one in Sending &gt; Servers</a>
                            </div>
                        </div>
                    @endif

                    <div class="mb-1">
                        <label class="form-label" for="otp_sms_sending_server_id">Sending server</label>
                        @if(! $hasSmsServers)
                            <input type="hidden" name="otp_sms_sending_server_id" value="0">
                        @endif
                        <select class="form-select select2 @error('otp_sms_sending_server_id') is-invalid @enderror"
                                id="otp_sms_sending_server_id" name="otp_sms_sending_server_id"
                                data-placeholder="{{ $hasSmsServers ? 'Search sending servers…' : 'No active SMS servers' }}"
                                @disabled(! $hasSmsServers)>
                            <option value="0">{{ $hasSmsServers ? 'Select a sending server' : 'No active SMS servers' }}</option>
                            @foreach($smsServers as $server)
                                <option value="{{ $server->id }}"
                                    @selected((int) old('otp_sms_sending_server_id', $settings['otp_sms_sending_server_id'] ?? 0) === (int) $server->id)>
                                    {{ $server->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('otp_sms_sending_server_id')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>

                    <label class="form-label" for="security_mfa_priority_sms">Delivery priority</label>
                    <input type="number" min="0" max="1000" class="form-control"
                           id="security_mfa_priority_sms" name="security_mfa_priority_sms"
                           value="{{ old('security_mfa_priority_sms', $settings['security_mfa_priority_sms'] ?? 30) }}">
                </div>
            </div>
        </div>

        {{-- WhatsApp --}}
        <div class="col-xl-6 col-12">
            <div class="card security-otp-card security-otp-card--whatsapp h-100">
                <div class="card-header security-otp-card__header">
                    <div class="d-flex align-items-center gap-1">
                        <div class="avatar bg-light-success p-50 m-0">
                            <div class="avatar-content">
                                <i data-feather="message-circle" class="font-medium-3 text-success"></i>
                            </div>
                        </div>
                        <div>
                            <p class="security-otp-kicker mb-0">Channel</p>
                            <h4 class="card-title mb-0">WhatsApp OTP</h4>
                            <small class="text-muted">{{ $providerStatuses['whatsapp']['label'] ?? 'Not configured' }}</small>
                        </div>
                    </div>
                    <span class="badge rounded-pill badge-light-{{ $waStatus === 'active' ? 'success' : ($waStatus === 'inactive' ? 'info' : 'secondary') }}">
                        {{ str_replace('_', ' ', $waStatus) }}
                    </span>
                </div>
                <div class="card-body mt-1">
                    <div class="security-otp-enable {{ ! $hasWaServers ? 'is-disabled' : '' }}">
                        <div>
                            <label class="form-check-label fw-bolder" for="otp_whatsapp_enabled">Enable WhatsApp OTP</label>
                            <small class="text-muted d-block">Reuse an active WhatsApp sending server</small>
                        </div>
                        <div class="form-check form-switch form-check-primary mb-0">
                            <input type="hidden" name="otp_whatsapp_enabled" value="0">
                            <input type="checkbox" class="form-check-input" id="otp_whatsapp_enabled"
                                   name="otp_whatsapp_enabled" value="1"
                                   @checked($waEnabledChecked)
                                   @disabled(! $hasWaServers)>
                        </div>
                    </div>

                    @if(! $hasWaServers)
                        <div class="alert alert-warning security-otp-empty" role="alert">
                            <div class="alert-body">
                                <strong>No active WhatsApp sending server found.</strong>
                                <a href="{{ route('admin.sending-servers.index') }}" class="alert-link">Configure one in Sending &gt; Servers</a>
                            </div>
                        </div>
                    @endif

                    <div class="mb-1">
                        <label class="form-label" for="otp_whatsapp_sending_server_id">Sending server</label>
                        @if(! $hasWaServers)
                            <input type="hidden" name="otp_whatsapp_sending_server_id" value="0">
                        @endif
                        <select class="form-select select2 @error('otp_whatsapp_sending_server_id') is-invalid @enderror"
                                id="otp_whatsapp_sending_server_id" name="otp_whatsapp_sending_server_id"
                                data-placeholder="{{ $hasWaServers ? 'Search sending servers…' : 'No active WhatsApp servers' }}"
                                @disabled(! $hasWaServers)>
                            <option value="0">{{ $hasWaServers ? 'Select a sending server' : 'No active WhatsApp servers' }}</option>
                            @foreach($waServers as $server)
                                <option value="{{ $server->id }}"
                                    @selected((int) old('otp_whatsapp_sending_server_id', $settings['otp_whatsapp_sending_server_id'] ?? 0) === (int) $server->id)>
                                    {{ $server->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('otp_whatsapp_sending_server_id')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>

                    <label class="form-label" for="security_mfa_priority_whatsapp">Delivery priority</label>
                    <input type="number" min="0" max="1000" class="form-control"
                           id="security_mfa_priority_whatsapp" name="security_mfa_priority_whatsapp"
                           value="{{ old('security_mfa_priority_whatsapp', $settings['security_mfa_priority_whatsapp'] ?? 20) }}">
                </div>
            </div>
        </div>

        {{-- Telegram --}}
        <div class="col-xl-6 col-12">
            <div class="card security-otp-card security-otp-card--telegram h-100">
                <div class="card-header security-otp-card__header">
                    <div class="d-flex align-items-center gap-1">
                        <div class="avatar bg-light-info p-50 m-0">
                            <div class="avatar-content">
                                <i data-feather="send" class="font-medium-3 text-info"></i>
                            </div>
                        </div>
                        <div>
                            <p class="security-otp-kicker mb-0">Channel</p>
                            <h4 class="card-title mb-0">Telegram OTP</h4>
                            <small class="text-muted">{{ $providerStatuses['telegram']['label'] ?? 'Not configured' }}</small>
                        </div>
                    </div>
                    <span class="badge rounded-pill badge-light-{{ $tgStatus === 'active' ? 'success' : ($tgStatus === 'inactive' ? 'info' : 'secondary') }}">
                        {{ str_replace('_', ' ', $tgStatus) }}
                    </span>
                </div>
                <div class="card-body mt-1">
                    <div class="security-otp-enable">
                        <div>
                            <label class="form-check-label fw-bolder" for="otp_telegram_enabled">Enable Telegram OTP</label>
                            <small class="text-muted d-block">Turn on Telegram one-time codes for users</small>
                        </div>
                        <div class="form-check form-switch form-check-primary mb-0">
                            <input type="hidden" name="otp_telegram_enabled" value="0">
                            <input type="checkbox" class="form-check-input" id="otp_telegram_enabled"
                                   name="otp_telegram_enabled" value="1"
                                   @checked(old('otp_telegram_enabled', $settings['otp_telegram_enabled'] ?? false))>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-7 col-12 mb-1">
                            <label class="form-label" for="otp_telegram_bot_token">Bot token</label>
                            <div class="input-group input-group-merge form-password-toggle">
                                <input type="password" class="form-control form-control-merge" id="otp_telegram_bot_token"
                                       name="otp_telegram_bot_token" value="" autocomplete="new-password"
                                       placeholder="{{ ($settings['otp_telegram_bot_token_configured'] ?? false) ? 'Configured — leave blank to keep' : '123456:ABC-DEF…' }}">
                                <span class="input-group-text cursor-pointer"><i data-feather="eye"></i></span>
                            </div>
                        </div>
                        <div class="col-md-5 col-12 mb-1">
                            <label class="form-label" for="otp_telegram_bot_username">Bot username</label>
                            <input type="text" class="form-control" id="otp_telegram_bot_username"
                                   name="otp_telegram_bot_username"
                                   value="{{ old('otp_telegram_bot_username', $settings['otp_telegram_bot_username'] ?? '') }}"
                                   placeholder="udesk_otp_bot">
                        </div>
                    </div>

                    <div class="mb-1">
                        <label class="form-label" for="otp_telegram_webhook_url">Webhook URL</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="otp_telegram_webhook_url" readonly
                                   value="{{ $telegramWebhookUrl }}">
                            <button type="button" class="btn btn-outline-secondary" id="copy-telegram-webhook"
                                    data-url="{{ $telegramWebhookUrl }}">
                                <i data-feather="copy" class="me-25"></i>
                                Copy
                            </button>
                        </div>
                        <small class="text-muted">Reserved endpoint for future Telegram webhook registration.</small>
                    </div>

                    <div class="security-otp-enable mb-1">
                        <div>
                            <label class="form-check-label fw-bolder" for="otp_telegram_webhook_active">
                                Webhook active
                                <span class="badge badge-light-warning ms-50">Reserved</span>
                            </label>
                            <small class="text-muted d-block">Registration is reserved and not fully wired yet</small>
                        </div>
                        <div class="form-check form-switch form-check-primary mb-0">
                            <input type="hidden" name="otp_telegram_webhook_active" value="0">
                            <input type="checkbox" class="form-check-input" id="otp_telegram_webhook_active"
                                   name="otp_telegram_webhook_active" value="1"
                                   @checked(old('otp_telegram_webhook_active', $settings['otp_telegram_webhook_active'] ?? false))>
                        </div>
                    </div>

                    <div class="mb-1">
                        <label class="form-label" for="security_mfa_priority_telegram">Delivery priority</label>
                        <input type="number" min="0" max="1000" class="form-control"
                               id="security_mfa_priority_telegram" name="security_mfa_priority_telegram"
                               value="{{ old('security_mfa_priority_telegram', $settings['security_mfa_priority_telegram'] ?? 10) }}">
                    </div>

                    <div class="security-otp-guide">
                        <div class="security-otp-guide__title">
                            <i data-feather="book-open" class="font-small-3 me-50"></i>
                            How to integrate Telegram OTP
                        </div>
                        <ol class="security-otp-guide__list mb-0">
                            <li>Open Telegram and message <code>@BotFather</code>.</li>
                            <li>Send <code>/newbot</code>, then choose a display name and username ending in <code>bot</code>.</li>
                            <li>Copy the HTTP API token BotFather returns (looks like <code>123456:ABC-DEF…</code>).</li>
                            <li>Paste the token above, set the bot username, enable Telegram OTP, then click <strong>Save provider settings</strong>.</li>
                            <li>Ask each user to start a chat with your bot so Telegram can deliver OTP messages to their chat ID.</li>
                            <li>Use <strong>Test Telegram</strong> below with a chat ID after saving to verify delivery.</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card security-otp-card security-otp-card--global mt-2">
        <div class="card-header security-otp-card__header">
            <div class="d-flex align-items-center gap-1">
                <div class="avatar bg-light-secondary p-50 m-0">
                    <div class="avatar-content">
                        <i data-feather="sliders" class="font-medium-3"></i>
                    </div>
                </div>
                <div>
                    <p class="security-otp-kicker mb-0">Fallback order</p>
                    <h4 class="card-title mb-0">Global MFA priorities &amp; recovery</h4>
                </div>
            </div>
        </div>
        <div class="card-body mt-1">
            <div class="row">
                <div class="col-lg-3 col-sm-6 col-12 mb-1">
                    <label class="form-label" for="security_mfa_priority_totp">Authenticator</label>
                    <input type="number" min="0" max="1000" class="form-control"
                           id="security_mfa_priority_totp" name="security_mfa_priority_totp"
                           value="{{ old('security_mfa_priority_totp', $settings['security_mfa_priority_totp'] ?? 50) }}">
                </div>
                <div class="col-lg-3 col-sm-6 col-12 mb-1">
                    <label class="form-label" for="security_mfa_priority_passkey">Passkey</label>
                    <input type="number" min="0" max="1000" class="form-control"
                           id="security_mfa_priority_passkey" name="security_mfa_priority_passkey"
                           value="{{ old('security_mfa_priority_passkey', $settings['security_mfa_priority_passkey'] ?? 60) }}">
                </div>
                <div class="col-lg-3 col-sm-6 col-12 mb-1">
                    <label class="form-label" for="security_mfa_priority_recovery">Recovery</label>
                    <input type="number" min="0" max="1000" class="form-control"
                           id="security_mfa_priority_recovery" name="security_mfa_priority_recovery"
                           value="{{ old('security_mfa_priority_recovery', $settings['security_mfa_priority_recovery'] ?? 100) }}">
                </div>
                <div class="col-lg-3 col-sm-6 col-12 mb-1">
                    <label class="form-label" for="security_mfa_priority_password">Password</label>
                    <input type="number" min="0" max="1000" class="form-control"
                           id="security_mfa_priority_password" name="security_mfa_priority_password"
                           value="{{ old('security_mfa_priority_password', $settings['security_mfa_priority_password'] ?? 0) }}">
                </div>
            </div>

            <div class="security-otp-enable mb-0">
                <div>
                    <label class="form-check-label fw-bolder" for="providers_security_mfa_method_recovery">Allow recovery codes</label>
                    <small class="text-muted d-block">Let users fall back to one-time recovery codes</small>
                </div>
                <div class="form-check form-switch form-check-primary mb-0">
                    <input type="hidden" name="security_mfa_method_recovery" value="0">
                    <input type="checkbox" class="form-check-input" id="providers_security_mfa_method_recovery"
                           name="security_mfa_method_recovery" value="1"
                           @checked(old('security_mfa_method_recovery', $settings['security_mfa_method_recovery'] ?? false))>
                </div>
            </div>
        </div>
    </div>

    <div class="d-flex flex-wrap justify-content-between align-items-center gap-1 mt-2">
        <button type="submit" class="btn btn-primary">
            <i data-feather="save" class="me-25"></i>
            Save provider settings
        </button>
    </div>
</div>