@extends('backEnd.layouts.master')
@section('title', 'Integrations & Services')

@section('content')
<div class="container-fluid py-3">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            <h4 class="mb-0 fw-bold"><i class="fas fa-cogs me-2 text-success"></i>Integrations & Services</h4>
            <small class="text-muted">Courier, payment, email, fraud check. Ad pixels/analytics → <a href="{{ route('admin.social.ads', ['tab' => 'integrations']) }}">Ad Management</a>. SMS → <strong>SMS Gateway</strong>.</small>
        </div>
    </div>

    <div class="row g-3">
        {{-- Left sub-navigation (exactly like reference site) --}}
        <div class="col-md-3 col-lg-2">
            <div class="card shadow-sm border-0">
                <div class="list-group list-group-flush rounded">
                    <a href="{{ route('admin.settings.others', ['tab'=>'courier']) }}"
                       class="list-group-item list-group-item-action {{ in_array($tab, ['courier', 'courier_manual'], true) ? 'active bg-success border-success text-white' : '' }}">
                        <i class="fas fa-truck me-2"></i> Courier Settings
                    </a>
                    <a href="{{ route('admin.settings.others', ['tab'=>'payment']) }}"
                       class="list-group-item list-group-item-action {{ $tab=='payment' ? 'active bg-success border-success text-white' : '' }}">
                        <i class="fas fa-credit-card me-2"></i> Payment Settings
                    </a>
                    <a href="{{ route('admin.sms.settings') }}"
                       class="list-group-item list-group-item-action {{ request()->routeIs('admin.sms.*') ? 'active bg-success border-success text-white' : '' }}">
                        <i class="fas fa-sms me-2"></i> SMS Gateway
                        <i class="fas fa-arrow-right float-end small opacity-75 mt-1"></i>
                    </a>
                    <a href="{{ route('admin.settings.others', ['tab'=>'mail']) }}"
                       class="list-group-item list-group-item-action {{ $tab=='mail' ? 'active bg-success border-success text-white' : '' }}">
                        <i class="fas fa-envelope me-2"></i> Email / SMTP
                    </a>
                    <a href="{{ route('admin.settings.others', ['tab'=>'fraud']) }}"
                       class="list-group-item list-group-item-action {{ $tab=='fraud' ? 'active bg-success border-success text-white' : '' }}">
                        <i class="fas fa-shield-alt me-2"></i> Fraud Check
                    </a>
                    <a href="{{ route('admin.settings.others', ['tab'=>'pixel']) }}"
                       class="list-group-item list-group-item-action {{ $tab=='pixel' ? 'active bg-success border-success text-white' : '' }}">
                        <i class="fab fa-facebook me-2"></i> Facebook APP ID
                    </a>
                    <a href="{{ route('admin.social.ads', ['tab' => 'integrations']) }}"
                       class="list-group-item list-group-item-action {{ request()->routeIs('admin.social.ads*') ? 'active bg-success border-success text-white' : '' }}">
                        <i class="fas fa-bullhorn me-2"></i> Ad Tracking &amp; Analytics
                        <i class="fas fa-external-link-alt float-end small opacity-75 mt-1"></i>
                    </a>
                </div>
            </div>
        </div>

        {{-- Main Content --}}
        <div class="col-md-9 col-lg-10">

            {{-- COURIER SETTINGS --}}
            @if(in_array($tab, ['courier', 'courier_manual'], true))
            @push('styles')
            <link rel="stylesheet" href="{{ asset('backEnd/css/courier-api-settings.css') }}?v={{ filemtime(public_path('backEnd/css/courier-api-settings.css')) }}">
            @endpush
            <div class="courier-api-settings">
                    {{-- Steadfast --}}
                    @php $steadfast = $couriers->get('steadfast'); @endphp
                    <section class="courier-api-section courier-api-section--steadfast">
                    <div class="courier-api-section__head">
                        <div class="courier-api-section__brand">
                            <div class="courier-api-section__logo">
                                    <img src="{{ asset('backEnd/img/couriers/steadfast.svg') }}" alt="Steadfast" onerror="this.src='https://portal.packzy.com/img/steadfast_logo.png'">
                            </div>
                            <div>
                                    <h5 class="courier-api-section__title">Steadfast Courier</h5>
                                    <small class="courier-api-section__subtitle">Fast and reliable delivery service</small>
                            </div>
                        </div>
                        <div class="courier-api-section__switch form-check form-switch mb-0">
                                <input class="form-check-input" type="checkbox" id="steadfastToggle"
                                       {{ $steadfast?->status ? 'checked' : '' }}
                                       onchange="document.getElementById('steadfastStatus').value = this.checked ? '1' : '0'">
                                <label class="form-check-label" for="steadfastToggle">
                                    {{ $steadfast?->status ? 'ON' : 'OFF' }}
                                </label>
                        </div>
                    </div>
                    <div class="courier-api-section__body">
                    <form action="{{ route('admin.settings.others.update') }}" method="POST" enctype="multipart/form-data" data-courier-form="steadfast">
                        @csrf
                        <input type="hidden" name="tab" value="courier">
                        <input type="hidden" name="steadfast_status" id="steadfastStatus" value="{{ $steadfast?->status ? '1' : '0' }}">

                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label"><i class="fas fa-image text-muted me-1"></i>Packing Label Logo</label>
                                <input type="file" name="steadfast_logo" class="form-control form-control-sm" accept="image/png,image/jpeg,image/webp,image/svg+xml">
                                @if($steadfast?->logo)
                                <div class="mt-2 d-flex align-items-center gap-2">
                                    <img src="{{ asset($steadfast->logo) }}" alt="Steadfast logo" style="height:36px;object-fit:contain;border:1px solid #e5e7eb;border-radius:4px;padding:2px;background:#fff">
                                    <label class="small text-muted mb-0"><input type="checkbox" name="remove_steadfast_logo" value="1"> Remove</label>
                                </div>
                                @else
                                <small class="text-muted">Default official logo use hobe. Custom upload korle packing label e eta dekhabe.</small>
                                @endif
                            </div>
                            <div class="col-md-6">
                                <label class="form-label"><i class="fas fa-link text-muted me-1"></i>Base URL</label>
                                <input type="text" name="steadfast_base_url" class="form-control"
                                       value="{{ $steadfast?->base_url && !str_contains($steadfast->base_url, 'portal.steadfast.com.bd') ? $steadfast->base_url : 'https://portal.packzy.com/api/v1' }}"
                                       placeholder="https://portal.packzy.com/api/v1">
                                <small class="text-muted">Official API: <strong>portal.packzy.com/api/v1</strong> (<a href="https://docs.google.com/document/d/e/2PACX-1vTi0sTyR353xu1AK0nR8E_WKe5onCkUXGEf8ch8uoJy9qxGfgGnboSIkNosjQ0OOdXkJhgGuAsWxnIh/pub" target="_blank" rel="noopener">docs</a>)</small>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label"><i class="fas fa-key text-muted me-1"></i>API Key</label>
                                <div class="input-group">
                                    <input type="password" name="steadfast_api_key" class="form-control" id="sfApiKey"
                                           value="{{ $steadfast?->api_key }}">
                                    <button class="btn btn-outline-secondary" type="button" onclick="togglePass('sfApiKey')">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label"><i class="fas fa-lock text-muted me-1"></i>Secret Key</label>
                                <div class="input-group">
                                    <input type="password" name="steadfast_secret_key" class="form-control" id="sfSecretKey"
                                           value="{{ $steadfast?->secret_key }}">
                                    <button class="btn btn-outline-secondary" type="button" onclick="togglePass('sfSecretKey')">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label"><i class="fas fa-shield-alt text-muted me-1"></i>Webhook Token</label>
                                <div class="input-group">
                                    <input type="password" name="steadfast_webhook_token" class="form-control" id="sfWebhook"
                                           value="{{ $steadfast?->webhook_token }}">
                                    <button class="btn btn-outline-secondary" type="button" onclick="togglePass('sfWebhook')">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                                <small class="text-muted">Steadfast portal-এ same token <strong>Auth Token (Bearer)</strong> হিসেবে দিন</small>
                            </div>
                            <div class="col-12">
                                <label class="form-label"><i class="fas fa-link text-muted me-1"></i>Webhook Callback URL</label>
                                <div class="input-group">
                                    <input type="text" class="form-control bg-light" readonly
                                           value="{{ route('webhook.steadfast.notification') }}">
                                    <button class="btn btn-outline-secondary" type="button"
                                            onclick="navigator.clipboard.writeText('{{ route('webhook.steadfast.notification') }}');this.innerHTML='<i class=\'fas fa-check\'></i> Copied'">
                                        <i class="fas fa-copy"></i> Copy
                                    </button>
                                    <button class="btn btn-success" type="button">
                                        <i class="fas fa-vial"></i> Test Webhook
                                    </button>
                                </div>
                                <small class="text-muted">Copy this URL and configure it in your Steadfast merchant dashboard</small>
                            </div>
                        </div>

                        <div class="courier-api-section__panel mt-3">
                            <div class="courier-api-section__panel-title"><i class="fas fa-shield-alt me-1"></i>Fraud Check Portal Credentials</div>
                            <small class="text-muted d-block mb-2">For steadfast.com.bd login to check customer fraud history</small>
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label"><i class="fas fa-envelope me-1"></i>Portal Email</label>
                                    <input type="email" name="steadfast_fraud_email" class="form-control"
                                           value="{{ $steadfast?->fraud_check_email }}"
                                           placeholder="your@email.com">
                                    <small class="text-muted">Your Steadfast portal login email</small>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label"><i class="fas fa-lock me-1"></i>Portal Password</label>
                                    <div class="input-group">
                                        <input type="password" name="steadfast_fraud_password" class="form-control" id="sfFraud"
                                               value="{{ $steadfast?->fraud_check_password }}">
                                        <button class="btn btn-outline-secondary" type="button" onclick="togglePass('sfFraud')">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </div>
                                    <small class="text-muted">Your Steadfast portal login password</small>
                                </div>
                            </div>
                        </div>

                        <div class="d-flex flex-wrap align-items-center gap-2 mt-3">
                            <button type="button" class="btn btn-test courier-api-test-btn" data-courier="steadfast">
                                <i class="fas fa-plug me-1"></i> Test API Connection
                            </button>
                            <span class="courier-api-test-status small" id="courierApiTest-steadfast"></span>
                        </div>
                        <button type="submit" class="btn btn-save mt-2">
                            <i class="fas fa-save me-1"></i> Save Steadfast Settings
                        </button>
                    </form>
                    </div>
                    </section>

                    {{-- Pathao --}}
                    @php $pathao = $couriers->get('pathao'); @endphp
                    <section class="courier-api-section courier-api-section--pathao">
                    <div class="courier-api-section__head">
                        <div class="courier-api-section__brand">
                            <div class="courier-api-section__logo">
                                    <img src="{{ asset('backEnd/img/couriers/pathao.svg') }}" alt="Pathao" onerror="this.style.display='none';this.nextElementSibling.style.display='block'">
                                    <i class="fas fa-motorcycle" style="display:none"></i>
                            </div>
                            <div>
                                    <h5 class="courier-api-section__title">Pathao Courier</h5>
                                    <small class="courier-api-section__subtitle">Express delivery service</small>
                            </div>
                        </div>
                        <div class="courier-api-section__switch form-check form-switch mb-0">
                                <input class="form-check-input" type="checkbox" id="pathaoToggle"
                                       {{ $pathao?->status ? 'checked' : '' }}>
                                <label class="form-check-label" for="pathaoToggle">
                                    {{ $pathao?->status ? 'ON' : 'OFF' }}
                                </label>
                        </div>
                    </div>
                    <div class="courier-api-section__body">
                    <form action="{{ route('admin.settings.others.update') }}" method="POST" enctype="multipart/form-data" data-courier-form="pathao">
                        @csrf
                        <input type="hidden" name="tab" value="courier">
                        <input type="hidden" name="pathao_status" id="pathaoStatus" value="{{ $pathao?->status ? '1' : '0' }}">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label"><i class="fas fa-image text-muted me-1"></i>Packing Label Logo</label>
                                <input type="file" name="pathao_logo" class="form-control form-control-sm" accept="image/png,image/jpeg,image/webp,image/svg+xml">
                                @if($pathao?->logo)
                                <div class="mt-2 d-flex align-items-center gap-2">
                                    <img src="{{ asset($pathao->logo) }}" alt="Pathao logo" style="height:36px;object-fit:contain;border:1px solid #e5e7eb;border-radius:4px;padding:2px;background:#fff">
                                    <label class="small text-muted mb-0"><input type="checkbox" name="remove_pathao_logo" value="1"> Remove</label>
                                </div>
                                @else
                                <small class="text-muted">Default official logo use hobe. Custom upload korle packing label e eta dekhabe.</small>
                                @endif
                            </div>
                            <div class="col-md-6">
                                <label class="form-label"><i class="fas fa-link text-muted me-1"></i>Base URL</label>
                                <input type="text" name="pathao_base_url" class="form-control"
                                       value="{{ $pathao?->base_url ?? 'https://api-hermes.pathao.com' }}"
                                       placeholder="https://api-hermes.pathao.com">
                                <small class="text-muted">Live: api-hermes.pathao.com | Sandbox: courier-api-sandbox.pathao.com</small>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label"><i class="fas fa-store text-muted me-1"></i>Store ID</label>
                                <input type="text" name="pathao_store_id" class="form-control"
                                       value="{{ $pathao?->store_id }}"
                                       placeholder="Pathao merchant store ID">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label"><i class="fas fa-key text-muted me-1"></i>Client ID</label>
                                <input type="text" name="pathao_api_key" class="form-control" id="pathaoClientId"
                                       value="{{ $pathao?->api_key }}" placeholder="Pathao Client ID">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label"><i class="fas fa-lock text-muted me-1"></i>Client Secret</label>
                                <div class="input-group">
                                    <input type="password" name="pathao_secret_key" class="form-control" id="pathaoSecret"
                                           value="{{ $pathao?->secret_key }}" placeholder="Pathao Client Secret">
                                    <button class="btn btn-outline-secondary" type="button" onclick="togglePass('pathaoSecret')"><i class="fas fa-eye"></i></button>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label"><i class="fas fa-user text-muted me-1"></i>Merchant Username</label>
                                <input type="text" name="pathao_username" class="form-control"
                                       value="{{ $pathao?->fraud_check_email }}"
                                       placeholder="Pathao merchant login email">
                                <small class="text-muted">OAuth token + Fraud check — দুটোতেই same login</small>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label"><i class="fas fa-lock text-muted me-1"></i>Merchant Password</label>
                                <div class="input-group">
                                    <input type="password" name="pathao_password" class="form-control" id="pathaoMerchantPass"
                                           value="{{ $pathao?->fraud_check_password }}"
                                           placeholder="Pathao merchant login password">
                                    <button class="btn btn-outline-secondary" type="button" onclick="togglePass('pathaoMerchantPass')"><i class="fas fa-eye"></i></button>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label"><i class="fas fa-shield-alt text-muted me-1"></i>Webhook Token</label>
                                <div class="input-group">
                                    <input type="password" name="pathao_webhook_token" class="form-control" id="pathaoWebhook"
                                           value="{{ $pathao?->webhook_token }}">
                                    <button class="btn btn-outline-secondary" type="button" onclick="togglePass('pathaoWebhook')"><i class="fas fa-eye"></i></button>
                                </div>
                                <small class="text-muted">Pathao Developer API → <strong>Webhook Secret</strong> (X-Pathao-Signature HMAC)</small>
                            </div>
                            <div class="col-12">
                                <label class="form-label"><i class="fas fa-link text-muted me-1"></i>Webhook Callback URL</label>
                                <div class="input-group">
                                    <input type="text" class="form-control bg-light" readonly
                                           value="{{ route('webhook.pathao') }}">
                                    <button class="btn btn-outline-secondary" type="button"
                                            onclick="navigator.clipboard.writeText('{{ route('webhook.pathao') }}');this.innerHTML='<i class=\'fas fa-check\'></i> Copied'">
                                        <i class="fas fa-copy"></i> Copy
                                    </button>
                                </div>
                                <small class="text-muted">Copy this URL and configure it in your Pathao merchant dashboard</small>
                            </div>
                        </div>
                        <div class="d-flex flex-wrap align-items-center gap-2 mt-3">
                            <button type="button" class="btn btn-test courier-api-test-btn" data-courier="pathao">
                                <i class="fas fa-plug me-1"></i> Test API Connection
                            </button>
                            <span class="courier-api-test-status small" id="courierApiTest-pathao"></span>
                        </div>
                        <button type="submit" class="btn btn-save mt-2">
                            <i class="fas fa-save me-1"></i> Save Pathao Settings
                        </button>
                    </form>
                    </div>
                    </section>

                    {{-- RedX --}}
                    @php $redx = $couriers->get('redx'); @endphp
                    <section class="courier-api-section courier-api-section--redx">
                    <div class="courier-api-section__head">
                        <div class="courier-api-section__brand">
                            <div class="courier-api-section__logo">
                                    <img src="{{ asset('backEnd/img/couriers/redx.svg') }}" alt="RedX">
                            </div>
                            <div>
                                    <h5 class="courier-api-section__title">RedX Courier</h5>
                                    <small class="courier-api-section__subtitle">OpenAPI parcel booking + webhook status updates</small>
                            </div>
                        </div>
                        <div class="courier-api-section__switch form-check form-switch mb-0">
                                <input class="form-check-input" type="checkbox" id="redxToggle"
                                       {{ $redx?->status ? 'checked' : '' }}>
                                <label class="form-check-label" for="redxToggle">
                                    {{ $redx?->status ? 'ON' : 'OFF' }}
                                </label>
                        </div>
                    </div>
                    <div class="courier-api-section__body">
                    <form action="{{ route('admin.settings.others.update') }}" method="POST" enctype="multipart/form-data" data-courier-form="redx">
                        @csrf
                        <input type="hidden" name="tab" value="courier">
                        <input type="hidden" name="redx_status" id="redxStatus" value="{{ $redx?->status ? '1' : '0' }}">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label"><i class="fas fa-image text-muted me-1"></i>Packing Label Logo</label>
                                <input type="file" name="redx_logo" class="form-control form-control-sm" accept="image/png,image/jpeg,image/webp,image/svg+xml">
                                @if($redx?->logo)
                                <div class="mt-2 d-flex align-items-center gap-2">
                                    <img src="{{ asset($redx->logo) }}" alt="RedX logo" style="height:36px;object-fit:contain;border:1px solid #e5e7eb;border-radius:4px;padding:2px;background:#fff">
                                    <label class="small text-muted mb-0"><input type="checkbox" name="remove_redx_logo" value="1"> Remove</label>
                                </div>
                                @else
                                <small class="text-muted">Default official RedX logo use hobe. Custom upload optional.</small>
                                @endif
                            </div>
                            <div class="col-md-6">
                                <label class="form-label"><i class="fas fa-link text-muted me-1"></i>Base URL</label>
                                <input type="text" name="redx_base_url" class="form-control"
                                       value="{{ $redx?->base_url ?? 'https://openapi.redx.com.bd' }}"
                                       placeholder="https://openapi.redx.com.bd">
                                <small class="text-muted">Live: openapi.redx.com.bd | Sandbox: sandbox.redx.com.bd (auto /v1.0.0-beta append)</small>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label"><i class="fas fa-store text-muted me-1"></i>Pickup Store ID</label>
                                <input type="text" name="redx_store_id" class="form-control"
                                       value="{{ $redx?->store_id }}"
                                       placeholder="RedX pickup store ID">
                                <small class="text-muted">RedX merchant panel থেকে pickup store ID — empty হলে প্রথম store auto use হবে</small>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label"><i class="fas fa-key text-muted me-1"></i>API Access Token (JWT)</label>
                                <div class="input-group">
                                    <input type="password" name="redx_api_key" class="form-control" id="redxApiKey"
                                           value="{{ $redx?->api_key }}" placeholder="RedX JWT access token">
                                    <button class="btn btn-outline-secondary" type="button" onclick="togglePass('redxApiKey')"><i class="fas fa-eye"></i></button>
                                </div>
                                <small class="text-muted">RedX Developer API → <strong>API-ACCESS-TOKEN</strong> (Bearer JWT)</small>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label"><i class="fas fa-shield-alt text-muted me-1"></i>Webhook Token</label>
                                <div class="input-group">
                                    <input type="password" name="redx_webhook_token" class="form-control" id="redxWebhook"
                                           value="{{ $redx?->webhook_token }}">
                                    <button class="btn btn-outline-secondary" type="button" onclick="togglePass('redxWebhook')"><i class="fas fa-eye"></i></button>
                                </div>
                                <small class="text-muted">RedX callback URL-এ query param: <code>?token=YOUR_TOKEN</code></small>
                            </div>
                            <div class="col-12">
                                <label class="form-label"><i class="fas fa-link text-muted me-1"></i>Webhook Callback URL</label>
                                @php
                                    $redxWebhookUrl = route('webhook.redx');
                                    if ($redx?->webhook_token) {
                                        $redxWebhookUrl .= '?token=' . urlencode($redx->webhook_token);
                                    }
                                @endphp
                                <div class="input-group">
                                    <input type="text" class="form-control bg-light" readonly id="redxWebhookUrl"
                                           value="{{ $redxWebhookUrl }}">
                                    <button class="btn btn-outline-secondary" type="button"
                                            onclick="navigator.clipboard.writeText(document.getElementById('redxWebhookUrl').value);this.innerHTML='<i class=\'fas fa-check\'></i> Copied'">
                                        <i class="fas fa-copy"></i> Copy
                                    </button>
                                </div>
                                <small class="text-muted">RedX merchant dashboard-এ এই URL configure করুন (token সহ)</small>
                            </div>
                        </div>

                        <div class="courier-api-section__panel mt-3">
                            <div class="courier-api-section__panel-title"><i class="fas fa-shield-alt me-1"></i>Fraud Check Login</div>
                            <small class="text-muted d-block mb-2">RedX merchant app login (API JWT token নয়) — customer delivery history check</small>
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label"><i class="fas fa-phone me-1"></i>Merchant Phone</label>
                                    <input type="text" name="redx_fraud_email" class="form-control"
                                           value="{{ $redx?->fraud_check_email }}"
                                           placeholder="01XXXXXXXXX">
                                    <small class="text-muted">RedX app-এ যে phone দিয়ে login করেন (01XXXXXXXXX). <strong>API Access Token (JWT) নয়</strong> — <a href="https://redx.com.bd/developer-api/" target="_blank" rel="noopener">OpenAPI</a> booking-এর token আলাদা।</small>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label"><i class="fas fa-lock me-1"></i>Merchant Password</label>
                                    <div class="input-group">
                                        <input type="password" name="redx_fraud_password" class="form-control" id="redxFraudPass"
                                               value="{{ $redx?->fraud_check_password }}">
                                        <button class="btn btn-outline-secondary" type="button" onclick="togglePass('redxFraudPass')">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex flex-wrap align-items-center gap-2 mt-3">
                            <button type="button" class="btn btn-test courier-api-test-btn" data-courier="redx">
                                <i class="fas fa-plug me-1"></i> Test API Connection
                            </button>
                            <span class="courier-api-test-status small" id="courierApiTest-redx"></span>
                        </div>
                        <button type="submit" class="btn btn-save mt-2">
                            <i class="fas fa-save me-1"></i> Save RedX Settings
                        </button>
                    </form>
                    </div>
                    </section>

                    {{-- CarryBee --}}
                    @php $carrybee = $couriers->get('carrybee'); @endphp
                    <section class="courier-api-section courier-api-section--carrybee">
                    <div class="courier-api-section__head">
                        <div class="courier-api-section__brand">
                            <div class="courier-api-section__logo">
                                    <img src="{{ asset('backEnd/img/couriers/carrybee.svg') }}" alt="CarryBee">
                            </div>
                            <div>
                                    <h5 class="courier-api-section__title">CarryBee Courier</h5>
                                    <small class="courier-api-section__subtitle">API v2 parcel booking + webhook auto status sync</small>
                            </div>
                        </div>
                        <div class="courier-api-section__switch form-check form-switch mb-0">
                                <input class="form-check-input" type="checkbox" id="carrybeeToggle"
                                       {{ $carrybee?->status ? 'checked' : '' }}>
                                <label class="form-check-label" for="carrybeeToggle">
                                    {{ $carrybee?->status ? 'ON' : 'OFF' }}
                                </label>
                        </div>
                    </div>
                    <div class="courier-api-section__body">
                    <form action="{{ route('admin.settings.others.update') }}" method="POST" enctype="multipart/form-data" data-courier-form="carrybee">
                        @csrf
                        <input type="hidden" name="tab" value="courier">
                        <input type="hidden" name="carrybee_status" id="carrybeeStatus" value="{{ $carrybee?->status ? '1' : '0' }}">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label"><i class="fas fa-image text-muted me-1"></i>Packing Label Logo</label>
                                <input type="file" name="carrybee_logo" class="form-control form-control-sm" accept="image/png,image/jpeg,image/webp,image/svg+xml">
                                @if($carrybee?->logo)
                                <div class="mt-2 d-flex align-items-center gap-2">
                                    <img src="{{ asset($carrybee->logo) }}" alt="CarryBee logo" style="height:36px;object-fit:contain;border:1px solid #e5e7eb;border-radius:4px;padding:2px;background:#fff">
                                    <label class="small text-muted mb-0"><input type="checkbox" name="remove_carrybee_logo" value="1"> Remove</label>
                                </div>
                                @else
                                <small class="text-muted">Default CarryBee logo use hobe. Custom upload optional.</small>
                                @endif
                            </div>
                            <div class="col-md-6">
                                <label class="form-label"><i class="fas fa-link text-muted me-1"></i>Base URL</label>
                                <input type="text" name="carrybee_base_url" class="form-control"
                                       value="{{ $carrybee?->base_url ?? 'https://developers.carrybee.com' }}"
                                       placeholder="https://developers.carrybee.com">
                                <small class="text-muted">Live: developers.carrybee.com | Sandbox: stage-sandbox.carrybee.com</small>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label"><i class="fas fa-id-card text-muted me-1"></i>Client ID</label>
                                <div class="input-group">
                                    <input type="password" name="carrybee_api_key" class="form-control" id="cbClientId"
                                           value="{{ $carrybee?->api_key }}" placeholder="CarryBee Client ID">
                                    <button class="btn btn-outline-secondary" type="button" onclick="togglePass('cbClientId')"><i class="fas fa-eye"></i></button>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label"><i class="fas fa-lock text-muted me-1"></i>Client Secret</label>
                                <div class="input-group">
                                    <input type="password" name="carrybee_secret_key" class="form-control" id="cbClientSecret"
                                           value="{{ $carrybee?->secret_key }}" placeholder="CarryBee Client Secret">
                                    <button class="btn btn-outline-secondary" type="button" onclick="togglePass('cbClientSecret')"><i class="fas fa-eye"></i></button>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label"><i class="fas fa-fingerprint text-muted me-1"></i>Client Context</label>
                                <div class="input-group">
                                    <input type="password" name="carrybee_client_context" class="form-control" id="cbClientContext"
                                           value="{{ $carrybee?->client_context }}" placeholder="CarryBee Client Context">
                                    <button class="btn btn-outline-secondary" type="button" onclick="togglePass('cbClientContext')"><i class="fas fa-eye"></i></button>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label"><i class="fas fa-store text-muted me-1"></i>Pickup Store ID</label>
                                <input type="text" name="carrybee_store_id" class="form-control"
                                       value="{{ $carrybee?->store_id }}"
                                       placeholder="CarryBee pickup store ID">
                                <small class="text-muted">Empty হলে প্রথম store auto use হবে</small>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label"><i class="fas fa-shield-alt text-muted me-1"></i>Webhook Secret</label>
                                <div class="input-group">
                                    <input type="password" name="carrybee_webhook_token" class="form-control" id="cbWebhook"
                                           value="{{ $carrybee?->webhook_token }}">
                                    <button class="btn btn-outline-secondary" type="button" onclick="togglePass('cbWebhook')"><i class="fas fa-eye"></i></button>
                                </div>
                                <small class="text-muted">CarryBee dashboard-এ header: <code>X-Carrybee-Webhook-Signature</code></small>
                            </div>
                            <div class="col-12">
                                <label class="form-label"><i class="fas fa-link text-muted me-1"></i>Webhook Callback URL</label>
                                <div class="input-group">
                                    <input type="text" class="form-control bg-light" readonly
                                           value="{{ route('webhook.carrybee') }}">
                                    <button class="btn btn-outline-secondary" type="button"
                                            onclick="navigator.clipboard.writeText('{{ route('webhook.carrybee') }}');this.innerHTML='<i class=\'fas fa-check\'></i> Copied'">
                                        <i class="fas fa-copy"></i> Copy
                                    </button>
                                </div>
                                <small class="text-muted">CarryBee merchant panel-এ এই URL configure করুন — status auto sync হবে</small>
                            </div>
                        </div>

                        <div class="courier-api-section__panel mt-3">
                            <div class="courier-api-section__panel-title"><i class="fas fa-shield-alt me-1"></i>Fraud Check Login</div>
                            <small class="text-muted d-block mb-2">CarryBee merchant app login (API credentials নয়) — customer delivery history</small>
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label"><i class="fas fa-phone me-1"></i>Merchant Phone</label>
                                    <input type="text" name="carrybee_fraud_email" class="form-control"
                                           value="{{ $carrybee?->fraud_check_email }}"
                                           placeholder="01XXXXXXXXX">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label"><i class="fas fa-lock me-1"></i>Merchant Password</label>
                                    <div class="input-group">
                                        <input type="password" name="carrybee_fraud_password" class="form-control" id="cbFraudPass"
                                               value="{{ $carrybee?->fraud_check_password }}">
                                        <button class="btn btn-outline-secondary" type="button" onclick="togglePass('cbFraudPass')">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="d-flex flex-wrap align-items-center gap-2 mt-3">
                            <button type="button" class="btn btn-test courier-api-test-btn" data-courier="carrybee">
                                <i class="fas fa-plug me-1"></i> Test API Connection
                            </button>
                            <span class="courier-api-test-status small" id="courierApiTest-carrybee"></span>
                        </div>
                        <button type="submit" class="btn btn-save mt-2">
                            <i class="fas fa-save me-1"></i> Save CarryBee Settings
                        </button>
                    </form>
                    </div>
                    </section>

                    {{-- Manual Courier --}}
                    @php $manual = $couriers->get('manual'); @endphp
                    <section class="courier-api-section courier-api-section--manual">
                    <div class="courier-api-section__head">
                        <div class="courier-api-section__brand">
                            <div class="courier-api-section__logo">
                                    <i class="fas fa-pen"></i>
                            </div>
                            <div>
                                    <h5 class="courier-api-section__title">Manual Courier Booking</h5>
                                    <small class="courier-api-section__subtitle">Settings-এ add করা courier name গুলো Booking page-এ দেখাবে</small>
                            </div>
                        </div>
                        <div class="courier-api-section__switch form-check form-switch mb-0">
                                <input class="form-check-input" type="checkbox" id="manualToggle"
                                       {{ ($manual?->status ?? true) ? 'checked' : '' }}>
                                <label class="form-check-label" for="manualToggle">
                                    {{ ($manual?->status ?? true) ? 'ON' : 'OFF' }}
                                </label>
                        </div>
                    </div>
                    <div class="courier-api-section__body">
                    <form action="{{ route('admin.settings.others.update') }}" method="POST" id="manualCouriersForm" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="tab" value="courier_manual">
                        <input type="hidden" name="manual_status" id="manualStatus" value="{{ ($manual?->status ?? true) ? '1' : '0' }}">

                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <label class="form-label fw-semibold mb-0">Manual Courier List</label>
                            <button type="button" class="btn btn-sm btn-outline-primary" id="addManualCourierRow">
                                <i class="fas fa-plus me-1"></i> Add Courier
                            </button>
                        </div>

                        <div id="manualCourierRows" class="d-flex flex-column gap-2 mb-3">
                            @forelse($manualCouriers as $i => $mc)
                            <div class="manual-courier-row border rounded p-2 bg-light">
                                <input type="hidden" name="manual_couriers[{{ $i }}][id]" value="{{ $mc->id }}">
                                <div class="d-flex gap-2 align-items-center mb-2">
                                    <input type="text" name="manual_couriers[{{ $i }}][name]" class="form-control form-control-sm"
                                           value="{{ $mc->name }}" placeholder="Courier name (e.g. SA Paribahan)" required>
                                    <div class="form-check form-switch mb-0 flex-shrink-0">
                                        <input class="form-check-input" type="checkbox" name="manual_couriers[{{ $i }}][status]" value="1"
                                               {{ $mc->status ? 'checked' : '' }}>
                                    </div>
                                    <button type="button" class="btn btn-sm btn-outline-danger flex-shrink-0 remove-manual-courier">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                                <div class="d-flex flex-wrap align-items-center gap-2">
                                    <input type="file" name="manual_couriers[{{ $i }}][logo]" class="form-control form-control-sm" style="max-width:220px" accept="image/png,image/jpeg,image/webp,image/svg+xml">
                                    @if($mc->logo)
                                    <img src="{{ asset($mc->logo) }}" alt="" style="height:28px;object-fit:contain;border:1px solid #ddd;border-radius:4px;padding:2px;background:#fff">
                                    <label class="small text-muted mb-0"><input type="checkbox" name="manual_couriers[{{ $i }}][remove_logo]" value="1"> Remove logo</label>
                                    @else
                                    <small class="text-muted">Label e logo (optional)</small>
                                    @endif
                                </div>
                            </div>
                            @empty
                            <div class="manual-courier-row border rounded p-2 bg-light">
                                <div class="d-flex gap-2 align-items-center mb-2">
                                    <input type="text" name="manual_couriers[0][name]" class="form-control form-control-sm"
                                           placeholder="Courier name (e.g. Sundarban Courier)">
                                    <div class="form-check form-switch mb-0 flex-shrink-0">
                                        <input class="form-check-input" type="checkbox" name="manual_couriers[0][status]" value="1" checked>
                                    </div>
                                    <button type="button" class="btn btn-sm btn-outline-danger flex-shrink-0 remove-manual-courier">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                                <input type="file" name="manual_couriers[0][logo]" class="form-control form-control-sm" style="max-width:220px" accept="image/png,image/jpeg,image/webp,image/svg+xml">
                            </div>
                            @endforelse
                        </div>

                        <p class="text-muted small mb-3">
                            Manual ON + উপরে courier name add করলে Booking page-এ শুধু সেই name গুলো button হিসেবে দেখাবে।
                            Settings-এ না থাকলে Booking page-এ manual option আসবে না।
                        </p>
                        <button type="submit" class="btn btn-save">
                            <i class="fas fa-save me-1"></i> Save Manual Couriers
                        </button>
                    </form>
                    </div>
                    </section>
            </div>

            {{-- PAYMENT SETTINGS --}}
            @elseif($tab === 'payment')
            <div class="card shadow-sm border-0">
                <div class="card-header bg-white">
                    <h5 class="mb-0 fw-bold"><i class="fas fa-credit-card text-success me-2"></i>Payment Settings</h5>
                </div>
                <div class="card-body">
                    <div class="alert alert-light border small mb-3">
                        <strong>Checkout sync:</strong> bKash/SSL active থাকলে COD auto hide। COD toggle:
                        <a href="{{ route('admin.settings.general', ['tab' => 'general']) }}">Website Settings → General</a>.
                        Advance payment product থাকলে online payment বাধ্যতামূলক।
                    </div>
                    <form action="{{ route('admin.settings.others.update') }}" method="POST">
                        @csrf
                        <input type="hidden" name="tab" value="payment">
                        @foreach([['bkash','bKash','#E2136E'],['nagad','Nagad','#F7941D'],['sslcommerz','SSLCommerz','#0b3b6f']] as [$type,$name,$color])
                        @php $gw = $gateways->get($type); @endphp
                        <div class="border rounded p-3 mb-3">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h6 class="fw-bold mb-0" style="color:{{ $color }}">
                                    <i class="fas fa-wallet me-2"></i>{{ $name }}
                                </h6>
                                <div class="form-check form-switch mb-0">
                                    <input class="form-check-input" type="checkbox" name="{{ $type }}_status"
                                           {{ $gw?->status ? 'checked' : '' }}>
                                    <label class="form-check-label">Active</label>
                                </div>
                            </div>
                            <div class="row g-2">
                                @if($type === 'bkash')
                                <div class="col-12">
                                    <div class="alert alert-info py-2 small mb-0">
                                        bKash Tokenized Checkout credentials (Developer Portal থেকে নিন): App Key, App Secret, Username, Password.
                                        Sandbox test করতে Sandbox ON রাখুন।
                                    </div>
                                </div>
                                @elseif($type === 'sslcommerz')
                                <div class="col-12">
                                    <div class="alert alert-info py-2 small mb-0">
                                        SSLCommerz: Store ID + Store Password দিন। Sandbox ON = test mode।
                                        IPN URL: <code>{{ \App\Support\AppUrl::shopRoute('frontend.sslcommerz.ipn') }}</code>
                                    </div>
                                </div>
                                @endif
                                <div class="col-md-6">
                                    <label class="form-label small">{{ $type === 'bkash' ? 'App Key' : 'API Key / App Key' }}</label>
                                    <input type="text" name="{{ $type }}_api_key" class="form-control form-control-sm font-monospace" value="{{ $gw?->api_key }}" placeholder="{{ $type === 'bkash' ? 'Sandbox/Live App Key' : '' }}">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label small">{{ $type === 'bkash' ? 'App Secret' : 'Secret Key / App Secret' }}</label>
                                    <input type="password" name="{{ $type }}_secret_key" class="form-control form-control-sm font-monospace" value="{{ $gw?->secret_key }}" placeholder="{{ $type === 'bkash' ? 'App Secret' : '' }}">
                                </div>
                                @if($type === 'bkash')
                                <div class="col-md-6">
                                    <label class="form-label small">Username</label>
                                    <input type="text" name="bkash_username" class="form-control form-control-sm font-monospace" value="{{ $gw?->username }}" placeholder="bKash merchant username">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label small">Password</label>
                                    <input type="password" name="bkash_password" class="form-control form-control-sm font-monospace" placeholder="{{ $gw?->password ? '•••••••• (saved — blank to keep)' : 'bKash merchant password' }}">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label small">Merchant Wallet (optional)</label>
                                    <input type="text" name="bkash_merchant_number" class="form-control form-control-sm" value="{{ $gw?->merchant_number }}" placeholder="01XXXXXXXXX">
                                </div>
                                @elseif($type === 'nagad')
                                <div class="col-md-6">
                                    <label class="form-label small">Merchant / Personal Number</label>
                                    <input type="text" name="nagad_merchant_number" class="form-control form-control-sm" value="{{ $gw?->merchant_number }}" placeholder="01XXXXXXXXX">
                                </div>
                                @endif
                                <div class="col-md-6">
                                    <div class="form-check mt-2">
                                        <input class="form-check-input" type="checkbox" name="{{ $type }}_sandbox"
                                               {{ $gw?->is_sandbox ? 'checked' : '' }}>
                                        <label class="form-check-label small">Sandbox Mode</label>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex flex-wrap align-items-center gap-2 mt-2 pt-2 border-top">
                                <button type="button" class="btn btn-sm btn-outline-secondary integration-test-btn" data-provider="{{ $type }}">
                                    <i class="fas fa-plug me-1"></i> Test {{ $name }}
                                </button>
                                <span class="integration-test-status small" id="integrationTest-{{ $type }}"></span>
                            </div>
                        </div>
                        @endforeach

                        @php $manualAccounts = $manualAccounts ?? \App\Services\ManualPaymentService::accounts(); @endphp
                        <div class="border rounded p-3 mb-3 mt-2 bg-light">
                            <h6 class="fw-bold mb-2"><i class="fas fa-hand-holding-usd me-2 text-success"></i>Manual Advance Payment Accounts</h6>
                            <p class="small text-muted mb-3">Advance payment এর জন্য customer এই number/account এ টাকা পাঠাবে — screenshot upload করে order দিবে; admin verify করবে।</p>
                            @foreach($manualAccounts as $key => $account)
                            <div class="border rounded bg-white p-3 mb-2">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <strong>{{ $account['label'] ?? ucfirst($key) }}</strong>
                                    <div class="form-check form-switch mb-0">
                                        <input class="form-check-input" type="checkbox" name="manual_{{ $key }}_enabled" value="1"
                                            {{ !empty($account['enabled']) ? 'checked' : '' }}>
                                        <label class="form-check-label small">Show on checkout</label>
                                    </div>
                                </div>
                                <div class="row g-2">
                                    <div class="col-md-4">
                                        <label class="form-label small">{{ $key === 'bank' ? 'Account No' : 'Number' }}</label>
                                        <input type="text" name="manual_{{ $key }}_number" class="form-control form-control-sm"
                                               value="{{ $account['number'] ?? '' }}" placeholder="{{ $key === 'bank' ? 'Account number' : '01XXXXXXXXX' }}">
                                    </div>
                                    @if($key === 'bank')
                                    <div class="col-md-4">
                                        <label class="form-label small">Bank Name</label>
                                        <input type="text" name="manual_{{ $key }}_bank_name" class="form-control form-control-sm"
                                               value="{{ $account['bank_name'] ?? '' }}" placeholder="e.g. Dutch Bangla Bank">
                                    </div>
                                    @endif
                                    <div class="col-md-4">
                                        <label class="form-label small">Account Name</label>
                                        <input type="text" name="manual_{{ $key }}_account_name" class="form-control form-control-sm"
                                               value="{{ $account['account_name'] ?? '' }}">
                                    </div>
                                    <div class="col-12">
                                        <label class="form-label small">Instructions (checkout এ দেখাবে)</label>
                                        <input type="text" name="manual_{{ $key }}_instructions" class="form-control form-control-sm"
                                               value="{{ $account['instructions'] ?? '' }}">
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>

                        <button type="submit" class="btn btn-success">
                            <i class="fas fa-save me-1"></i> Save Payment Settings
                        </button>
                    </form>
                </div>
            </div>

            {{-- EMAIL / SMTP --}}
            @elseif($tab === 'mail')
            <div class="card shadow-sm border-0">
                <div class="card-header bg-white">
                    <h5 class="mb-0 fw-bold"><i class="fas fa-envelope text-primary me-2"></i>Email / SMTP Settings</h5>
                </div>
                <div class="card-body">
                    <p class="text-muted small mb-4">
                        Configure outgoing email for order notifications, password reset, and admin alerts.
                        Leave password blank to keep the current one. Use <strong>Send Test Email</strong> after saving.
                    </p>
                    <form method="POST" action="{{ route('admin.settings.others.update') }}" id="mailSettingsForm">
                        @csrf
                        <input type="hidden" name="tab" value="mail">

                        <div class="form-check form-switch mb-4">
                            <input class="form-check-input" type="checkbox" name="mail_enabled" value="1" id="mail_enabled"
                                {{ !empty($mailSettings['enabled']) ? 'checked' : '' }}>
                            <label class="form-check-label fw-semibold" for="mail_enabled">Enable SMTP mail</label>
                        </div>

                        <div class="form-check form-switch mb-3">
                            <input class="form-check-input" type="checkbox" name="mail_order_email_enabled" value="1" id="mail_order_email_enabled"
                                {{ !empty($mailSettings['order_email_enabled']) ? 'checked' : '' }}>
                            <label class="form-check-label fw-semibold" for="mail_order_email_enabled">Order confirmation email (optional)</label>
                            <div class="form-text">Customer email দিলে order placed-এ confirmation পাঠাবে। Email না দিলে skip হবে।</div>
                        </div>

                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label">Mail driver</label>
                                <select name="mail_mailer" class="form-select">
                                    <option value="smtp" {{ ($mailSettings['mailer'] ?? 'smtp') === 'smtp' ? 'selected' : '' }}>SMTP</option>
                                    <option value="log" {{ ($mailSettings['mailer'] ?? '') === 'log' ? 'selected' : '' }}>Log (testing only)</option>
                                </select>
                            </div>
                            <div class="col-md-5">
                                <label class="form-label">SMTP host <span class="text-danger">*</span></label>
                                <input type="text" name="mail_host" class="form-control" value="{{ old('mail_host', $mailSettings['host'] ?? '') }}" placeholder="smtp.gmail.com">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Port <span class="text-danger">*</span></label>
                                <input type="number" name="mail_port" class="form-control" value="{{ old('mail_port', $mailSettings['port'] ?? 587) }}" min="1" max="65535">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Encryption</label>
                                <select name="mail_encryption" class="form-select">
                                    <option value="tls" {{ ($mailSettings['encryption'] ?? 'tls') === 'tls' ? 'selected' : '' }}>TLS</option>
                                    <option value="ssl" {{ ($mailSettings['encryption'] ?? '') === 'ssl' ? 'selected' : '' }}>SSL</option>
                                    <option value="none" {{ in_array($mailSettings['encryption'] ?? 'tls', ['', 'none'], true) ? 'selected' : '' }}>None</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Username</label>
                                <input type="text" name="mail_username" class="form-control" value="{{ old('mail_username', $mailSettings['username'] ?? '') }}" autocomplete="off">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Password</label>
                                <input type="password" name="mail_password" class="form-control" placeholder="{{ !empty($mailSettings['password']) ? '•••••••• (saved)' : 'Enter password' }}" autocomplete="new-password">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">From email <span class="text-danger">*</span></label>
                                <input type="email" name="mail_from_address" class="form-control" value="{{ old('mail_from_address', $mailSettings['from_address'] ?? '') }}" placeholder="noreply@yourdomain.com">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">From name</label>
                                <input type="text" name="mail_from_name" class="form-control" value="{{ old('mail_from_name', $mailSettings['from_name'] ?? '') }}" placeholder="{{ config('app.name') }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Test email address</label>
                                <input type="email" name="mail_test_to" id="mail_test_to" class="form-control" value="{{ old('mail_test_to', $mailSettings['test_to'] ?? auth()->user()->email ?? '') }}" placeholder="you@example.com">
                                <div class="form-text">Used by Send Test Email only.</div>
                            </div>
                        </div>

                        <div class="d-flex flex-wrap gap-2 mt-4">
                            <button type="submit" class="btn btn-success">
                                <i class="fas fa-save me-1"></i> Save Mail Settings
                            </button>
                            <button type="button" class="btn btn-outline-primary" id="btnMailTest">
                                <i class="fas fa-paper-plane me-1"></i> Send Test Email
                            </button>
                        </div>
                        <div id="mailTestResult" class="mt-3" style="display:none;"></div>
                    </form>
                </div>
            </div>

            {{-- FRAUD CHECK --}}
            @elseif($tab === 'fraud')
            @push('styles')
            <link rel="stylesheet" href="{{ asset('backEnd/css/fraud-check-settings.css') }}?v={{ filemtime(public_path('backEnd/css/fraud-check-settings.css')) }}">
            @endpush
            <div class="card shadow-sm border-0 fc-settings-card">
                <div class="card-header">
                    <h5 class="mb-0 fw-bold"><i class="fas fa-shield-alt me-2"></i>Fraud Check Settings</h5>
                </div>
                <div class="card-body">
                    @php
                        $sf = $couriers->get('steadfast');
                        $pa = $couriers->get('pathao');
                        $rx = $couriers->get('redx');
                        $cb = $couriers->get('carrybee');
                        $fraudConfigured = app(\App\Services\CourierFraudCheckService::class)->configuredCouriers();
                    @endphp
                    <div class="alert fc-info mb-3 py-2 px-3">
                        <i class="fas fa-info-circle me-2"></i>
                        Steadfast, Pathao, RedX ও CarryBee login save করুন — Order list Fraud check same credentials use করবে।
                    </div>

                    <div class="fc-status-grid mb-4">
                        <span class="fc-status-pill {{ $fraudConfigured['steadfast'] ? 'is-ready' : 'is-pending' }}">
                            <i class="fas fa-circle"></i> Steadfast: {{ $fraudConfigured['steadfast'] ? 'Ready' : 'Not set' }}
                        </span>
                        <span class="fc-status-pill {{ $fraudConfigured['pathao'] ? 'is-ready' : 'is-pending' }}">
                            <i class="fas fa-circle"></i> Pathao: {{ $fraudConfigured['pathao'] ? 'Ready' : 'Not set' }}
                        </span>
                        <span class="fc-status-pill {{ ($fraudConfigured['redx'] ?? false) ? 'is-ready' : 'is-pending' }}">
                            <i class="fas fa-circle"></i> RedX: {{ ($fraudConfigured['redx'] ?? false) ? 'Ready' : 'Not set' }}
                        </span>
                        <span class="fc-status-pill {{ ($fraudConfigured['carrybee'] ?? false) ? 'is-ready' : 'is-pending' }}">
                            <i class="fas fa-circle"></i> CarryBee: {{ ($fraudConfigured['carrybee'] ?? false) ? 'Ready' : 'Not set' }}
                        </span>
                    </div>

                    {{-- Test first — no scroll needed on mobile --}}
                    <div class="fc-test-panel mb-4">
                        <div class="fc-test-head">
                            <i class="fas fa-vial"></i>
                            <div>
                                <h6>Test Fraud Check</h6>
                                <small>যেকোনো customer phone দিয়ে আগে test করুন — login ঠিক আছে কিনা দেখুন</small>
                            </div>
                        </div>
                        <div class="fc-test-actions">
                            <input type="tel" id="fraudTestPhone" class="form-control fc-test-input" placeholder="017XXXXXXXX" maxlength="15" inputmode="numeric">
                            <button type="button" class="fc-test-btn" id="fraudTestBtn">
                                <i class="fas fa-search"></i> Run Test Check
                            </button>
                        </div>
                        <div id="fraudTestResult" class="fc-test-result d-none"></div>
                    </div>

                    <div class="fc-section-label">Merchant login credentials</div>

                    <form action="{{ route('admin.settings.others.update') }}" method="POST">
                        @csrf
                        <input type="hidden" name="tab" value="fraud">

                        <div class="fc-courier-card fc-courier-card--steadfast">
                            <div class="fc-courier-title"><i class="fas fa-truck text-success"></i> Steadfast Portal Login</div>
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label fw-semibold">Portal Email</label>
                                    <input type="email" name="steadfast_fraud_email" class="form-control"
                                           value="{{ old('steadfast_fraud_email', $sf?->fraud_check_email) }}"
                                           placeholder="your@email.com">
                                    <small class="text-muted">steadfast.com.bd login email</small>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-semibold">Portal Password</label>
                                    <div class="input-group">
                                        <input type="password" name="steadfast_fraud_password" class="form-control" id="fraudSfPass"
                                               value="{{ old('steadfast_fraud_password', $sf?->fraud_check_password) }}"
                                               placeholder="Steadfast portal password">
                                        <button class="btn btn-outline-secondary" type="button" onclick="togglePass('fraudSfPass')">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </div>
                                    @if($fraudConfigured['steadfast'])
                                    <small class="text-success">✓ Login saved</small>
                                    @else
                                    <small class="text-danger">Email + Password দিয়ে save করুন</small>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="fc-courier-card fc-courier-card--pathao">
                            <div class="fc-courier-title"><i class="fas fa-motorcycle text-danger"></i> Pathao Merchant Login</div>
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label fw-semibold">Merchant Username</label>
                                    <input type="text" name="pathao_fraud_email" class="form-control"
                                           value="{{ old('pathao_fraud_email', $pa?->fraud_check_email) }}"
                                           placeholder="Pathao merchant email / username">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-semibold">Merchant Password</label>
                                    <div class="input-group">
                                        <input type="password" name="pathao_fraud_password" class="form-control" id="fraudPaPass"
                                               value="{{ old('pathao_fraud_password', $pa?->fraud_check_password) }}"
                                               placeholder="Pathao merchant password">
                                        <button class="btn btn-outline-secondary" type="button" onclick="togglePass('fraudPaPass')">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </div>
                                    @if($fraudConfigured['pathao'])
                                    <small class="text-success">✓ Login saved</small>
                                    @else
                                    <small class="text-danger">Username + Password দিয়ে save করুন</small>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="fc-courier-card fc-courier-card--redx">
                            <div class="fc-courier-title"><i class="fas fa-shipping-fast text-danger"></i> RedX Merchant Login</div>
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label fw-semibold">Merchant Phone</label>
                                    <input type="text" name="redx_fraud_email" class="form-control"
                                           value="{{ old('redx_fraud_email', $rx?->fraud_check_email) }}"
                                           placeholder="01XXXXXXXXX">
                                    <small class="text-muted">RedX app login phone — OpenAPI JWT আলাদা field-এ।</small>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-semibold">Merchant Password</label>
                                    <div class="input-group">
                                        <input type="password" name="redx_fraud_password" class="form-control" id="fraudRxPass"
                                               value="{{ old('redx_fraud_password', $rx?->fraud_check_password) }}"
                                               placeholder="RedX app password">
                                        <button class="btn btn-outline-secondary" type="button" onclick="togglePass('fraudRxPass')">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </div>
                                    @if($fraudConfigured['redx'] ?? false)
                                    <small class="text-success">✓ Login saved</small>
                                    @else
                                    <small class="text-danger">Phone + Password দিয়ে save করুন</small>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="fc-courier-card fc-courier-card--carrybee">
                            <div class="fc-courier-title"><i class="fas fa-shipping-fast text-warning"></i> CarryBee Merchant Login</div>
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label fw-semibold">Merchant Phone</label>
                                    <input type="text" name="carrybee_fraud_email" class="form-control"
                                           value="{{ old('carrybee_fraud_email', $cb?->fraud_check_email) }}"
                                           placeholder="01XXXXXXXXX">
                                    <small class="text-muted">CarryBee app login phone — API Client ID/Secret আলাদা।</small>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-semibold">Merchant Password</label>
                                    <div class="input-group">
                                        <input type="password" name="carrybee_fraud_password" class="form-control" id="fraudCbPass"
                                               value="{{ old('carrybee_fraud_password', $cb?->fraud_check_password) }}"
                                               placeholder="CarryBee app password">
                                        <button class="btn btn-outline-secondary" type="button" onclick="togglePass('fraudCbPass')">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </div>
                                    @if($fraudConfigured['carrybee'] ?? false)
                                    <small class="text-success">✓ Login saved</small>
                                    @else
                                    <small class="text-danger">Phone + Password দিয়ে save করুন</small>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <button type="submit" class="fc-save-btn mt-2">
                            <i class="fas fa-save me-1"></i> Save Fraud Check Login
                        </button>
                    </form>
                </div>
            </div>
            @push('scripts')
            <script>
            document.getElementById('fraudTestBtn')?.addEventListener('click', function() {
                const phone = (document.getElementById('fraudTestPhone')?.value || '').trim();
                const box = document.getElementById('fraudTestResult');
                if (!phone) { alert('Phone number দিন'); return; }
                box.classList.remove('d-none');
                box.innerHTML = '<div class="alert alert-secondary mb-0"><i class="fas fa-spinner fa-spin me-2"></i>Checking…</div>';
                fetch(@json(route('admin.orders.fraud-check')), {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content,
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({ phone: phone, force_refresh: true })
                })
                .then(r => r.json())
                .then(data => {
                    if (!data.success) {
                        box.innerHTML = '<div class="alert alert-danger mb-0">' + (data.message || 'Check failed') + '</div>';
                        return;
                    }
                    const sf = data.steadfast || {};
                    const pa = data.pathao || {};
                    const rx = data.redx || {};
                    const cb = data.carrybee || {};
                    const agg = data.aggregate || {};
                    const risk = data.risk || {};
                    const pct = (agg.couriers_count ?? 0) > 0 ? (agg.success_ratio ?? 0) + '%' : '—';
                    box.innerHTML =
                        '<div class="fc-result-score" style="background:' + (risk.bg_color || '#f3f4f6') + '; border:2px solid ' + (risk.color || '#6b7280') + ';">'
                        + '<div style="font-size:2rem;font-weight:800;color:' + (risk.color || '#666') + '">' + pct + '</div>'
                        + '<div style="font-weight:600;color:' + (risk.color || '#666') + '">' + (risk.label || 'Unknown') + '</div>'
                        + '<div class="small text-muted mt-1">' + (agg.couriers_count ?? 0) + ' courier average</div>'
                        + '</div>'
                        + '<div class="fc-result-table-wrap"><table class="table table-sm table-bordered fc-result-table mb-0">'
                        + '<thead><tr><th>Courier</th><th>D</th><th>R</th><th>Total</th><th>%</th><th>Status</th></tr></thead>'
                        + '<tbody>'
                        + '<tr><td>Steadfast</td><td>' + (sf.success ?? 0) + '</td><td>' + (sf.cancel ?? 0) + '</td><td>' + (sf.total ?? 0) + '</td><td>' + (sf.success_ratio ?? 0) + '</td><td>' + (sf.error || 'OK') + '</td></tr>'
                        + '<tr><td>Pathao</td><td>' + (pa.success ?? 0) + '</td><td>' + (pa.cancel ?? 0) + '</td><td>' + (pa.total ?? 0) + '</td><td>' + (pa.success_ratio ?? 0) + '</td><td>' + (pa.error || 'OK') + '</td></tr>'
                        + '<tr><td>RedX</td><td>' + (rx.success ?? 0) + '</td><td>' + (rx.cancel ?? 0) + '</td><td>' + (rx.total ?? 0) + '</td><td>' + (rx.success_ratio ?? 0) + '</td><td>' + (rx.error || 'OK') + '</td></tr>'
                        + '<tr><td>CarryBee</td><td>' + (cb.success ?? 0) + '</td><td>' + (cb.cancel ?? 0) + '</td><td>' + (cb.total ?? 0) + '</td><td>' + (cb.success_ratio ?? 0) + '</td><td>' + (cb.error || 'OK') + '</td></tr>'
                        + '</tbody></table></div>';
                })
                .catch(() => {
                    box.innerHTML = '<div class="alert alert-danger mb-0">Network error</div>';
                });
            });
            </script>
            @endpush

            {{-- FACEBOOK APP ID --}}
            @elseif($tab === 'pixel')
            <div class="card shadow-sm border-0">
                <div class="card-header bg-white">
                    <h5 class="mb-0 fw-bold"><i class="fab fa-facebook text-primary me-2"></i>Facebook APP ID</h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.settings.others.update') }}" method="POST">
                        @csrf
                        <input type="hidden" name="tab" value="pixel">
                        <div class="row g-3">
                            <div class="col-md-8">
                                <label class="form-label">Facebook App ID</label>
                                <input type="text" name="facebook_app_id" class="form-control"
                                       value="{{ $setting?->facebook_app_id }}" placeholder="e.g. 123456789012345">
                                <small class="text-muted">Used for Facebook Login and Social sharing. Pixel &amp; CAPI → <a href="{{ route('admin.social.ads', ['tab' => 'integrations']) }}">Ad Management</a></small>
                            </div>
                        </div>
                        <div class="d-flex flex-wrap align-items-center gap-2 mt-3">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-1"></i> Save Facebook App Settings
                            </button>
                            <button type="button" class="btn btn-outline-primary integration-test-btn" data-provider="facebook_app">
                                <i class="fas fa-plug me-1"></i> Test Connection
                            </button>
                            <span class="integration-test-status small" id="integrationTest-facebook_app"></span>
                        </div>
                    </form>
                </div>
            </div>

            @endif
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function togglePass(id) {
    var el = document.getElementById(id);
    el.type = el.type === 'password' ? 'text' : 'password';
}
document.getElementById('steadfastToggle')?.addEventListener('change', function() {
    document.getElementById('steadfastStatus').value = this.checked ? '1' : '0';
    this.nextElementSibling.textContent = this.checked ? 'ON' : 'OFF';
});
document.getElementById('pathaoToggle')?.addEventListener('change', function() {
    document.getElementById('pathaoStatus').value = this.checked ? '1' : '0';
    this.nextElementSibling.textContent = this.checked ? 'ON' : 'OFF';
});
document.getElementById('redxToggle')?.addEventListener('change', function() {
    document.getElementById('redxStatus').value = this.checked ? '1' : '0';
    this.nextElementSibling.textContent = this.checked ? 'ON' : 'OFF';
});
document.getElementById('carrybeeToggle')?.addEventListener('change', function() {
    document.getElementById('carrybeeStatus').value = this.checked ? '1' : '0';
    this.nextElementSibling.textContent = this.checked ? 'ON' : 'OFF';
});
document.getElementById('manualToggle')?.addEventListener('change', function() {
    document.getElementById('manualStatus').value = this.checked ? '1' : '0';
    this.nextElementSibling.textContent = this.checked ? 'ON' : 'OFF';
});

let manualCourierIndex = {{ max($manualCouriers->count(), 1) }};
document.getElementById('addManualCourierRow')?.addEventListener('click', function() {
    const wrap = document.getElementById('manualCourierRows');
    const row = document.createElement('div');
    row.className = 'manual-courier-row border rounded p-2 bg-light';
    row.innerHTML = `
        <div class="d-flex gap-2 align-items-center mb-2">
            <input type="text" name="manual_couriers[${manualCourierIndex}][name]" class="form-control form-control-sm"
                   placeholder="Courier name" required>
            <div class="form-check form-switch mb-0 flex-shrink-0">
                <input class="form-check-input" type="checkbox" name="manual_couriers[${manualCourierIndex}][status]" value="1" checked>
            </div>
            <button type="button" class="btn btn-sm btn-outline-danger flex-shrink-0 remove-manual-courier">
                <i class="fas fa-trash"></i>
            </button>
        </div>
        <input type="file" name="manual_couriers[${manualCourierIndex}][logo]" class="form-control form-control-sm" style="max-width:220px" accept="image/png,image/jpeg,image/webp,image/svg+xml">`;
    wrap.appendChild(row);
    manualCourierIndex++;
});
document.getElementById('manualCourierRows')?.addEventListener('click', function(e) {
    const btn = e.target.closest('.remove-manual-courier');
    if (!btn) return;
    const rows = this.querySelectorAll('.manual-courier-row');
    if (rows.length <= 1) {
        btn.closest('.manual-courier-row').querySelector('input[type=text]').value = '';
        return;
    }
    btn.closest('.manual-courier-row').remove();
});

const courierTestUrlTemplate = @json(route('admin.settings.courier.test', ['courier' => '__COURIER__']));

function collectCourierFormPayload(form) {
    const payload = {};
    if (!form) return payload;
    form.querySelectorAll('input, select, textarea').forEach(function (el) {
        if (!el.name || el.type === 'file' || el.type === 'checkbox' && !el.checked) return;
        if (el.type === 'checkbox') {
            payload[el.name] = el.checked ? (el.value || '1') : '0';
        } else {
            payload[el.name] = el.value;
        }
    });
    return payload;
}

document.querySelectorAll('.courier-api-test-btn').forEach(function (btn) {
    btn.addEventListener('click', function () {
        const courier = btn.dataset.courier;
        const form = btn.closest('form[data-courier-form="' + courier + '"]');
        const statusEl = document.getElementById('courierApiTest-' + courier);
        const url = courierTestUrlTemplate.replace('__COURIER__', courier);

        btn.disabled = true;
        const originalHtml = btn.innerHTML;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> Testing…';
        if (statusEl) {
            statusEl.className = 'courier-api-test-status small text-muted';
            statusEl.textContent = 'Checking connection…';
        }

        fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content,
                'X-Requested-With': 'XMLHttpRequest',
            },
            body: JSON.stringify(collectCourierFormPayload(form)),
        })
            .then(function (r) { return r.json().then(function (d) { return { ok: r.ok, data: d }; }); })
            .then(function ({ ok, data }) {
                if (statusEl) {
                    statusEl.className = 'courier-api-test-status small fw-semibold ' + (ok && data.success ? 'text-success' : 'text-danger');
                    statusEl.textContent = data.message || (ok ? 'Connected' : 'Test failed');
                }
                if (typeof toastr !== 'undefined') {
                    ok && data.success ? toastr.success(data.message) : toastr.error(data.message || 'Connection failed');
                }
            })
            .catch(function () {
                if (statusEl) {
                    statusEl.className = 'courier-api-test-status small fw-semibold text-danger';
                    statusEl.textContent = 'Request failed.';
                }
            })
            .finally(function () {
                btn.disabled = false;
                btn.innerHTML = originalHtml;
            });
    });
});

const integrationTestUrlTemplate = @json(route('admin.settings.integration.test', ['provider' => '__PROVIDER__']));

function collectIntegrationPayload(btn) {
    const form = btn.closest('form');
    const scope = form || btn.closest('.border.rounded') || document;
    const payload = {};
    scope.querySelectorAll('input, select, textarea').forEach(function (el) {
        if (!el.name || el.disabled || el.type === 'file') return;
        if (el.type === 'checkbox') {
            payload[el.name] = el.checked ? (el.value || '1') : '0';
        } else if (el.type === 'password' && el.value === '' && el.placeholder && el.placeholder.indexOf('blank to keep') >= 0) {
            return;
        } else {
            payload[el.name] = el.value;
        }
    });
    return payload;
}

document.querySelectorAll('.integration-test-btn').forEach(function (btn) {
    btn.addEventListener('click', function () {
        const provider = btn.dataset.provider;
        const statusEl = document.getElementById('integrationTest-' + provider);
        const url = integrationTestUrlTemplate.replace('__PROVIDER__', provider);
        const payload = collectIntegrationPayload(btn);

        btn.disabled = true;
        const originalHtml = btn.innerHTML;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> Testing…';
        if (statusEl) {
            statusEl.className = 'integration-test-status small text-muted';
            statusEl.textContent = 'Checking…';
        }

        fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '',
                'X-Requested-With': 'XMLHttpRequest',
            },
            body: JSON.stringify(payload),
        })
            .then(function (r) { return r.json().then(function (d) { return { ok: r.ok, data: d }; }); })
            .then(function ({ ok, data }) {
                if (statusEl) {
                    statusEl.className = 'integration-test-status small fw-semibold ' + (ok && data.success ? 'text-success' : 'text-danger');
                    statusEl.textContent = data.message || (ok ? 'Connected' : 'Test failed');
                }
                if (typeof toastr !== 'undefined') {
                    ok && data.success ? toastr.success(data.message) : toastr.error(data.message || 'Connection failed');
                }
            })
            .catch(function () {
                if (statusEl) {
                    statusEl.className = 'integration-test-status small fw-semibold text-danger';
                    statusEl.textContent = 'Request failed.';
                }
            })
            .finally(function () {
                btn.disabled = false;
                btn.innerHTML = originalHtml;
            });
    });
});

const mailTestBtn = document.getElementById('btnMailTest');
if (mailTestBtn) {
    mailTestBtn.addEventListener('click', function () {
        const form = document.getElementById('mailSettingsForm');
        const resultEl = document.getElementById('mailTestResult');
        const payload = collectCourierFormPayload(form);
        payload.mail_test_to = document.getElementById('mail_test_to')?.value || '';

        mailTestBtn.disabled = true;
        const originalHtml = mailTestBtn.innerHTML;
        mailTestBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> Sending…';
        if (resultEl) {
            resultEl.style.display = 'block';
            resultEl.className = 'alert alert-info py-2 mb-0';
            resultEl.textContent = 'Sending test email…';
        }

        fetch(@json(route('admin.settings.mail.test')), {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content,
                'X-Requested-With': 'XMLHttpRequest',
            },
            body: JSON.stringify(payload),
        })
            .then(function (r) { return r.json().then(function (d) { return { ok: r.ok, data: d }; }); })
            .then(function ({ ok, data }) {
                if (resultEl) {
                    resultEl.className = 'alert py-2 mb-0 ' + (ok && data.success ? 'alert-success' : 'alert-danger');
                    resultEl.textContent = data.message || (ok ? 'Sent' : 'Failed');
                }
                if (typeof toastr !== 'undefined') {
                    ok && data.success ? toastr.success(data.message) : toastr.error(data.message || 'Mail test failed');
                }
            })
            .catch(function () {
                if (resultEl) {
                    resultEl.className = 'alert alert-danger py-2 mb-0';
                    resultEl.textContent = 'Request failed.';
                }
            })
            .finally(function () {
                mailTestBtn.disabled = false;
                mailTestBtn.innerHTML = originalHtml;
            });
    });
}
</script>
@endpush