@php
    $storageMode = old('listing_storage_mode', $general_setting->listing_storage_mode ?? 'local');
    if ($storageMode === 'local' && ($general_setting->cloudflare_cdn_status ?? '') === 'enable') {
        $storageMode = 'cdn_pull';
    }
    $cdnPoolIncludeData = [
        'cdn_pool_servers' => $cdn_pool_servers ?? collect(),
        'general_setting' => $general_setting,
        'embedded' => true,
    ];
    $s3PoolIncludeData = [
        's3_pool_buckets' => $s3_pool_buckets ?? collect(),
        'general_setting' => $general_setting,
    ];
@endphp
<div class="crancy__item-form--group listing-storage-form">
    <div class="row">
        <div class="col-12">
            <div class="alert alert-secondary py-2 mb-0" role="alert">
                {{ __('translate.Listing storage help') }}
            </div>
        </div>

        <div class="col-12">
            <div class="crancy__item-form--group mg-top-form-15">
                <label class="crancy__item-label">{{ __('translate.Storage Mode') }}</label>
                <select class="form-select crancy__item-input js-listing-storage-mode" name="listing_storage_mode">
                    <option {{ $storageMode === 'local' ? 'selected' : '' }} value="local">{{ __('translate.Local server') }}</option>
                    <option {{ $storageMode === 'cdn_pull' ? 'selected' : '' }} value="cdn_pull">{{ __('translate.CDN proxy pull') }}</option>
                    <option {{ $storageMode === 's3' ? 'selected' : '' }} value="s3">{{ __('translate.S3 R2 direct upload') }}</option>
                </select>
            </div>
        </div>

        <div class="col-12 mg-top-form-10">
            <div class="accordion listing-storage-accordion" id="listingStorageAccordion">
                <div class="accordion-item js-storage-s3-panel" style="display: {{ $storageMode === 's3' ? 'block' : 'none' }};">
                    <h2 class="accordion-header" id="listingStorageS3Heading">
                        <button class="accordion-button {{ $storageMode === 's3' ? '' : 'collapsed' }}" type="button" data-bs-toggle="collapse" data-bs-target="#listingStorageS3Collapse" aria-expanded="{{ $storageMode === 's3' ? 'true' : 'false' }}">
                            {{ __('translate.S3 R2 bucket settings') }}
                        </button>
                    </h2>
                    <div id="listingStorageS3Collapse" class="accordion-collapse collapse {{ $storageMode === 's3' ? 'show' : '' }}" data-bs-parent="#listingStorageAccordion">
                        <div class="accordion-body js-storage-s3">
                            @include('generalsetting::partials.s3_pool_form', $s3PoolIncludeData)

                            <hr class="listing-storage-form__divider">

                            <div class="js-cdn-pool-host" data-cdn-pool-host="s3"></div>
                        </div>
                    </div>
                </div>

                <div class="accordion-item js-storage-cdn-pull-panel" style="display: {{ $storageMode === 'cdn_pull' ? 'block' : 'none' }};">
                    <h2 class="accordion-header" id="listingStorageCdnPullHeading">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#listingStorageCdnPullCollapse" aria-expanded="false">
                            {{ __('translate.CDN proxy fallback settings') }}
                        </button>
                    </h2>
                    <div id="listingStorageCdnPullCollapse" class="accordion-collapse collapse" data-bs-parent="#listingStorageAccordion">
                        <div class="accordion-body js-storage-cdn-pull">
                            <div class="js-cdn-pool-host" data-cdn-pool-host="cdn_pull"></div>
                            <hr class="listing-storage-form__divider js-cdn-pool-cdn-pull-divider" style="display: none;">
                            <div class="js-cdn-pool-cdn-pull-fallback">
                                <label class="crancy__item-label">{{ __('translate.CDN Base URL fallback') }}</label>
                                <input class="crancy__item-input" type="url" name="cloudflare_cdn_url" value="{{ old('cloudflare_cdn_url', $general_setting->cloudflare_cdn_url) }}" placeholder="https://cdn.example.com">
                                <small class="text-muted">{{ __('translate.CDN fallback help') }}</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="d-none" id="cdn-pool-panel-mount">
            @include('generalsetting::partials.cdn_pool_form', $cdnPoolIncludeData)
        </div>
    </div>
</div>

<style>
    .listing-storage-form__divider { margin: 16px 0; border-color: #e5e7eb; opacity: 1; }
    .listing-storage-form .cf-cdn-pool--embedded { border: none; background: transparent; }
    .listing-storage-form .cf-cdn-pool--embedded .cf-cdn-pool__toolbar { border-radius: 8px; border: 1px solid #e8ecf1; }
</style>

@push('js_section')
<script>
(function () {
    function moveCdnPoolPanel(mode) {
        var panel = document.getElementById('cdn-pool-panel');
        if (!panel) return;
        var host = document.querySelector('.js-cdn-pool-host[data-cdn-pool-host="' + (mode === 's3' ? 's3' : mode === 'cdn_pull' ? 'cdn_pull' : '') + '"]');
        var divider = document.querySelector('.js-cdn-pool-cdn-pull-divider');
        var fallbackWrap = document.querySelector('.js-cdn-pool-cdn-pull-fallback');
        if (host) host.appendChild(panel);
        if (divider) divider.style.display = mode === 'cdn_pull' && host && host.contains(panel) ? '' : 'none';
        if (fallbackWrap) fallbackWrap.style.display = mode === 'cdn_pull' ? '' : 'none';
    }

    function onStorageModeChange() {
        var modeEl = document.querySelector('.js-listing-storage-mode');
        if (!modeEl) return;
        var mode = modeEl.value;
        var s3Panel = document.querySelector('.js-storage-s3-panel');
        var cdnPullPanel = document.querySelector('.js-storage-cdn-pull-panel');
        if (s3Panel) s3Panel.style.display = mode === 's3' ? 'block' : 'none';
        if (cdnPullPanel) cdnPullPanel.style.display = mode === 'cdn_pull' ? 'block' : 'none';
        if (mode === 's3' || mode === 'cdn_pull') moveCdnPoolPanel(mode);
    }

    document.addEventListener('DOMContentLoaded', function () {
        var modeEl = document.querySelector('.js-listing-storage-mode');
        if (modeEl) {
            onStorageModeChange();
            modeEl.addEventListener('change', onStorageModeChange);
        }
    });
})();
</script>
@endpush