@php
    use Illuminate\Support\Facades\Schema;
    $smtpPoolServers = $smtp_pool_servers ?? collect();
    $poolTableReady = Schema::hasTable('smtp_pool_servers');
    $smtpPoolEnabled = (bool) old('smtp_pool_enabled', $general_setting->smtp_pool_enabled ?? false);
    $errorThreshold = (int) old('smtp_pool_error_threshold', $general_setting->smtp_pool_error_threshold ?? 2);
    if ($smtpPoolServers->isEmpty() && ! empty($email_setting?->mail_host)) {
        $legacy = (object) [
            'name' => 'Principal',
            'sender_name' => $email_setting->sender_name,
            'mail_host' => $email_setting->mail_host,
            'mail_port' => $email_setting->mail_port,
            'email' => $email_setting->email,
            'smtp_username' => $email_setting->smtp_username,
            'smtp_password' => $email_setting->smtp_password,
            'mail_encryption' => $email_setting->mail_encryption,
            'role' => 'general',
            'notify_registration_password' => true,
            'notify_listings_booking' => true,
            'notify_messages' => true,
            'priority' => 10,
            'monthly_email_limit' => 0,
            'is_enabled' => true,
        ];
        $serverRows = collect([$legacy]);
    } else {
        $serverRows = $smtpPoolServers->isNotEmpty() ? $smtpPoolServers : collect([null]);
    }
@endphp

<style>
    .smtp-pool-panel { border: 1px solid #dbe3ef; border-radius: 8px; background: #f8fafc; margin-bottom: 24px; }
    .smtp-pool-panel__toolbar {
        display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end;
        padding: 10px 12px; background: #fff; border-bottom: 1px solid #e5e7eb; border-radius: 8px 8px 0 0;
    }
    #smtpPoolAccordion .accordion-button { padding: 8px 12px; font-size: 13px; }
    #smtpPoolAccordion .accordion-body { padding: 10px 12px; }
    .smtp-pool-accordion-item__title-wrap { display: flex; flex-direction: column; align-items: flex-start; text-align: left; flex: 1; min-width: 0; }
    .smtp-pool-accordion-item__meta { font-size: 11px; color: #64748b; }
</style>

<div class="smtp-pool-panel" id="smtp-pool-panel">
    <div class="smtp-pool-panel__toolbar">
        <div>
            <h5 class="mb-0" style="font-size:15px;font-weight:700;">{{ __('translate.SMTP pool title') }}</h5>
            <small class="text-muted">{{ __('translate.SMTP pool help') }}</small>
        </div>
        @if ($poolTableReady)
            <div class="form-check form-switch mb-0">
                <input class="form-check-input" type="checkbox" name="smtp_pool_enabled" id="smtp_pool_enabled" value="1" {{ $smtpPoolEnabled ? 'checked' : '' }}>
                <label class="form-check-label" for="smtp_pool_enabled">{{ __('translate.SMTP pool enable') }}</label>
            </div>
            <div>
                <label class="crancy__item-label" for="smtp_pool_error_threshold">{{ __('translate.SMTP pool error threshold') }}</label>
                <input class="crancy__item-input" type="number" min="1" max="20" name="smtp_pool_error_threshold" id="smtp_pool_error_threshold" value="{{ $errorThreshold }}" style="width:70px;">
            </div>
            <button type="button" class="crancy-btn" id="smtp-pool-add-server" style="padding:6px 12px;font-size:13px;">
                <i class="fas fa-plus"></i> {{ __('translate.SMTP pool add server') }}
            </button>
        @endif
    </div>

    @if (! $poolTableReady)
        <div class="alert alert-warning m-2 py-2">{{ __('translate.SMTP pool migration required') }}</div>
    @else
        <div class="accordion p-2" id="smtpPoolAccordion">
            @foreach ($serverRows as $index => $server)
                @include('generalsetting::partials.smtp_pool_server_row', ['server' => $server, 'index' => $index])
            @endforeach
        </div>
        <template id="smtp-pool-row-template">
            @include('generalsetting::partials.smtp_pool_server_row', ['server' => null, 'index' => '__INDEX__'])
        </template>
    @endif
</div>

@push('js_section')
<script>
(function () {
    var accordion = document.getElementById('smtpPoolAccordion');
    var addBtn = document.getElementById('smtp-pool-add-server');
    var template = document.getElementById('smtp-pool-row-template');
    if (!accordion || !addBtn || !template) return;

    var nextIndex = accordion.querySelectorAll('[data-smtp-pool-row]').length;

    function toggleNotifyScopes(select) {
        var row = select.getAttribute('data-row');
        var panel = accordion.querySelector('.smtp-pool-notify-scopes[data-row="' + row + '"]');
        if (panel) panel.style.display = select.value === 'notifications' ? '' : 'none';
    }

    accordion.querySelectorAll('.smtp-pool-role-select').forEach(function (sel) {
        sel.addEventListener('change', function () { toggleNotifyScopes(this); });
    });

    addBtn.addEventListener('click', function () {
        var html = template.innerHTML.replace(/__INDEX__/g, String(nextIndex++));
        var wrap = document.createElement('div');
        wrap.innerHTML = html.trim();
        var item = wrap.firstElementChild;
        accordion.appendChild(item);
        var sel = item.querySelector('.smtp-pool-role-select');
        if (sel) sel.addEventListener('change', function () { toggleNotifyScopes(this); });
        bindRemove(item);
    });

    function bindRemove(item) {
        var btn = item.querySelector('.smtp-pool-remove-row');
        if (btn) btn.addEventListener('click', function () { item.remove(); });
    }

    accordion.querySelectorAll('[data-smtp-pool-row]').forEach(bindRemove);
})();
</script>
@endpush