@php
    use Illuminate\Support\Facades\Schema;
    $cdnPoolServers = $cdn_pool_servers ?? collect();
    $cdnPoolEnabled = (bool) old('cdn_pool_enabled', $general_setting->cdn_pool_enabled ?? false);
    $errorThreshold = (int) old(
        'cdn_pool_error_threshold',
        $general_setting->cdn_pool_error_threshold ?? config('cdn_pool.error_threshold', 2)
    );
    $poolTableReady = Schema::hasTable('cdn_pool_servers');
    $serverRows = $cdnPoolServers->isNotEmpty() ? $cdnPoolServers : collect([null]);
    $embedded = (bool) ($embedded ?? false);
@endphp

<style>
    .cf-cdn-pool { border: 1px solid #e5e7eb; border-radius: 10px; background: #fafbfc; }
    .cf-cdn-pool__toolbar {
        display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center;
        padding: 12px 14px; border-bottom: 1px solid #e5e7eb; background: #fff; border-radius: 10px 10px 0 0;
    }
    .cf-cdn-pool__toolbar .crancy__item-label { margin-bottom: 2px; font-size: 12px; }
    .cf-cdn-pool__toolbar .crancy__item-input { padding: 6px 10px; height: 36px; }
    .cf-cdn-pool__head { padding: 10px 14px 0; }
    .cf-cdn-pool__head h4 { margin: 0; font-size: 16px; font-weight: 700; }
    .cf-cdn-pool__head p { margin: 4px 0 0; font-size: 13px; }
    #cdnPoolAccordion .accordion-button { padding: 10px 14px; font-size: 14px; min-height: auto; }
    #cdnPoolAccordion .accordion-body { padding: 12px 14px; }
    #cdnPoolAccordion .accordion-item { border: 1px solid #e8ecf1; border-radius: 8px; margin: 0 10px 8px; }
    #cdnPoolAccordion .crancy__item-label { font-size: 12px; margin-bottom: 4px; }
    #cdnPoolAccordion .crancy__item-input, #cdnPoolAccordion .form-select { padding: 6px 10px; font-size: 13px; }
    #cdnPoolAccordion .mg-top-form-20 { margin-top: 10px !important; }
    .cdn-pool-accordion-item__url { font-size: 11px; color: #64748b; }
    .cdn-pool-accordion-item__badges .badge { font-size: 10px; }
    .cf-cdn-pool__add { margin: 0 10px 10px; }
    .cf-cdn-pool__add .crancy-btn { padding: 8px 14px; font-size: 13px; }
</style>

<div class="cf-cdn-pool {{ $embedded ? 'cf-cdn-pool--embedded' : '' }}" id="cdn-pool-panel">
    <div class="cf-cdn-pool__head">
        @if ($embedded)
            <h5 class="mb-1">{{ __('translate.Cloudflare CDN pool') }}</h5>
        @else
            <h4>{{ __('translate.Cloudflare CDN pool') }}</h4>
        @endif
        <p class="text-muted mb-0">{{ __('translate.Cloudflare CDN pool help') }}</p>
    </div>

    @if (! $poolTableReady)
        <div class="alert alert-warning m-3 py-2" role="alert">{{ __('translate.CDN pool migration required') }}</div>
    @else
        <div class="cf-cdn-pool__toolbar">
            <div class="form-check form-switch mb-0">
                <input class="form-check-input" type="checkbox" name="cdn_pool_enabled" id="cdn_pool_enabled" value="1" {{ $cdnPoolEnabled ? 'checked' : '' }}>
                <label class="form-check-label" for="cdn_pool_enabled">{{ __('translate.CDN pool enable') }}</label>
            </div>
            <div>
                <label class="crancy__item-label" for="cdn_pool_error_threshold">{{ __('translate.CDN pool error threshold') }}</label>
                <input class="crancy__item-input" type="number" min="1" max="20" name="cdn_pool_error_threshold" id="cdn_pool_error_threshold" value="{{ $errorThreshold }}" style="width: 72px;">
            </div>
            <button type="button" class="crancy-btn cf-cdn-pool__add-btn" id="cdn-pool-add-server">
                <i class="fas fa-plus"></i> {{ __('translate.Cloudflare CDN add server') }}
            </button>
        </div>

        <div class="accordion crancy-cdn-pool-accordion" id="cdnPoolAccordion">
            @foreach ($serverRows as $index => $server)
                @include('generalsetting::partials.cdn_pool_server_row', ['server' => $server, 'index' => $index, 'compact' => true])
            @endforeach
        </div>

        <template id="cdn-pool-server-row-template">
            @include('generalsetting::partials.cdn_pool_server_row', ['server' => null, 'index' => '__INDEX__', 'compact' => true])
        </template>
    @endif
</div>

@push('js_section')
<script>
(function () {
    var defaultLabel = @json(__('translate.Cloudflare CDN server'));

    function toggleS3PublicUrlField() {
        var poolOn = document.getElementById('cdn_pool_enabled');
        var single = document.querySelector('.js-s3-single-public-url');
        var hint = document.querySelector('.js-s3-pool-public-hint');
        if (!poolOn) return;
        var on = poolOn.checked;
        if (single) single.classList.toggle('d-none', on);
        if (hint) hint.classList.toggle('d-none', !on);
    }

    function syncHeader(item) {
        var nameInput = item.querySelector('.js-cdn-pool-name-input');
        var urlInput = item.querySelector('.js-cdn-pool-url-input');
        var titleEl = item.querySelector('.cdn-pool-accordion-item__title');
        var urlEl = item.querySelector('.cdn-pool-accordion-item__url');
        if (!titleEl) return;
        var items = document.querySelectorAll('#cdnPoolAccordion [data-cdn-pool-row]');
        var index = Array.prototype.indexOf.call(items, item);
        titleEl.textContent = (nameInput && nameInput.value.trim()) || (defaultLabel + ' ' + (index + 1));
        if (urlEl && urlInput) {
            var u = urlInput.value.trim();
            urlEl.textContent = u;
            urlEl.style.display = u ? '' : 'none';
        }
    }

    function reindexAccordion() {
        var accordion = document.getElementById('cdnPoolAccordion');
        if (!accordion) return;
        accordion.querySelectorAll('[data-cdn-pool-row]').forEach(function (item, index) {
            item.querySelectorAll('[name^="cdn_pool_servers"]').forEach(function (input) {
                input.name = input.name.replace(/cdn_pool_servers\[\d+\]/, 'cdn_pool_servers[' + index + ']');
                if (input.id) input.id = input.id.replace(/_\d+$/, '_' + index);
            });
            var collapseId = 'cdn-pool-collapse-' + index;
            var headingId = 'cdn-pool-heading-' + index;
            var collapse = item.querySelector('.accordion-collapse');
            var button = item.querySelector('.accordion-button');
            var header = item.querySelector('.accordion-header');
            if (collapse) { collapse.id = collapseId; collapse.setAttribute('aria-labelledby', headingId); }
            if (header) header.id = headingId;
            if (button) {
                button.setAttribute('data-bs-target', '#' + collapseId);
                button.setAttribute('aria-controls', collapseId);
            }
            var removeBtn = item.querySelector('.js-cdn-pool-remove-row');
            if (removeBtn) removeBtn.style.display = accordion.querySelectorAll('[data-cdn-pool-row]').length > 1 ? '' : 'none';
            syncHeader(item);
        });
    }

    function init() {
        var addBtn = document.getElementById('cdn-pool-add-server');
        var accordion = document.getElementById('cdnPoolAccordion');
        var template = document.getElementById('cdn-pool-server-row-template');
        var poolToggle = document.getElementById('cdn_pool_enabled');

        if (poolToggle) {
            poolToggle.addEventListener('change', toggleS3PublicUrlField);
            toggleS3PublicUrlField();
        }

        if (!addBtn || !accordion || !template) return;

        addBtn.addEventListener('click', function () {
            var index = accordion.querySelectorAll('[data-cdn-pool-row]').length;
            accordion.insertAdjacentHTML('beforeend', template.innerHTML.replace(/__INDEX__/g, String(index)));
            reindexAccordion();
            var newItem = accordion.querySelectorAll('[data-cdn-pool-row]')[index];
            if (newItem && typeof bootstrap !== 'undefined') {
                var c = newItem.querySelector('.accordion-collapse');
                if (c) bootstrap.Collapse.getOrCreateInstance(c, { toggle: false }).show();
            }
        });

        accordion.addEventListener('click', function (e) {
            var btn = e.target.closest('.js-cdn-pool-remove-row');
            if (!btn) return;
            var row = btn.closest('[data-cdn-pool-row]');
            if (row && accordion.querySelectorAll('[data-cdn-pool-row]').length > 1) {
                row.remove();
                reindexAccordion();
            }
        });

        accordion.addEventListener('input', function (e) {
            var row = e.target.closest('[data-cdn-pool-row]');
            if (row) syncHeader(row);
        });

        reindexAccordion();
    }

    window.toggleS3PublicUrlField = toggleS3PublicUrlField;

    document.addEventListener('DOMContentLoaded', init);
})();
</script>
@endpush