@php
    $trustBar = $trustBar ?? \App\Services\TrustBarSettingsService::get();
    $trustItems = old('items', $trustBar['items'] ?? []);
    $iconOptions = [
        'fa-truck'         => 'Delivery (truck)',
        'fa-shipping-fast' => 'Fast shipping',
        'fa-shield-alt'    => 'Shield / authentic',
        'fa-check-circle'  => 'Check / verified',
        'fa-money-bill-wave' => 'Cash / payment',
        'fa-credit-card'   => 'Card payment',
        'fa-undo'          => 'Return',
        'fa-headset'       => 'Support',
        'fa-lock'          => 'Secure',
        'fa-gift'          => 'Gift / offer',
        'fa-star'          => 'Quality',
        'fa-leaf'          => 'Organic',
    ];
@endphp

<div class="alert alert-light border py-2 px-3 mb-3 small">
    <strong>Trust Bar</strong> = homepage এ hero/slider এর নিচে icon + text row (Free delivery, COD, return ইত্যাদি)।
    Color change করতে <a href="{{ route('admin.settings.theme.colors') }}"><strong>Theme Colors → Trust Bar</strong></a> ব্যবহার করুন।
    Structured homepage এ section on/off: <a href="{{ route('admin.settings.homepage') }}"><strong>Homepage Settings</strong></a> → Trust Bar toggle।
</div>

<div class="form-check form-switch mb-4">
    <input class="form-check-input" type="checkbox" name="enabled" id="trustBarEnabled" value="1"
        {{ !empty($trustBar['enabled']) ? 'checked' : '' }}>
    <label class="form-check-label fw-semibold" for="trustBarEnabled">Enable Trust Bar on storefront</label>
</div>

<div class="card border-0 bg-light mb-3">
    <div class="card-header bg-white fw-semibold d-flex justify-content-between align-items-center">
        <span><i class="fas fa-shield-alt me-1 text-success"></i> Trust Bar Items</span>
        <button type="button" class="btn btn-sm btn-outline-success" onclick="addTrustBarRow()">
            <i class="fas fa-plus"></i> Add Item
        </button>
    </div>
    <div class="card-body p-2" id="trustBarItems">
        @forelse($trustItems as $i => $item)
        @include('backEnd.settings.partials.trust-bar-item-row', ['i' => $i, 'item' => $item, 'iconOptions' => $iconOptions])
        @empty
        @foreach(\App\Services\TrustBarSettingsService::defaults()['items'] ?? [] as $i => $item)
        @include('backEnd.settings.partials.trust-bar-item-row', ['i' => $i, 'item' => $item, 'iconOptions' => $iconOptions])
        @endforeach
        @endforelse
    </div>
</div>

<div class="card border-success bg-light">
    <div class="card-header bg-white fw-semibold"><i class="fas fa-eye me-1 text-success"></i> Preview</div>
    <div class="card-body p-0">
        <div class="trust-bar" style="background: var(--section-trust-bg, #e8f7f0); padding: 16px 0;">
            <div class="container">
                <div class="row g-2 text-center" id="trustBarPreview">
                    @foreach($trustItems as $item)
                    @if(!empty($item['enabled']) && !empty($item['title']))
                    <div class="col-6 col-md-3">
                        <div class="trust-item">
                            <div class="t-icon" style="width:40px;height:40px;margin:0 auto 8px;border-radius:50%;background:var(--primary,#2d6a4f);color:#fff;display:flex;align-items:center;justify-content:center;">
                                <i class="fas {{ $item['icon'] ?? 'fa-check' }}"></i>
                            </div>
                            <div class="t-title" style="font-size:13px;font-weight:700;">{{ $item['title'] }}</div>
                            @if(!empty($item['subtitle']))
                            <div class="t-sub" style="font-size:11px;color:#6b7280;">{{ $item['subtitle'] }}</div>
                            @endif
                        </div>
                    </div>
                    @endif
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
const trustIconOptions = @json($iconOptions);

function trustBarRowHtml(index) {
    let opts = '';
    for (const [val, label] of Object.entries(trustIconOptions)) {
        opts += `<option value="${val}">${label}</option>`;
    }
    return `
    <div class="row g-2 mb-2 align-items-center trust-bar-row border rounded p-2 bg-white">
        <div class="col-auto">
            <div class="form-check mb-0">
                <input class="form-check-input" type="checkbox" name="items[${index}][enabled]" value="1" checked>
            </div>
        </div>
        <div class="col-md-2">
            <select name="items[${index}][icon]" class="form-select form-select-sm">${opts}</select>
        </div>
        <div class="col-md-4">
            <input type="text" name="items[${index}][title]" class="form-control form-control-sm" placeholder="Title (Bengali/English)">
        </div>
        <div class="col-md-4">
            <input type="text" name="items[${index}][subtitle]" class="form-control form-control-sm" placeholder="Subtitle">
        </div>
        <div class="col-md-1">
            <button type="button" class="btn btn-sm btn-outline-danger w-100" onclick="this.closest('.trust-bar-row').remove()"><i class="fas fa-times"></i></button>
        </div>
    </div>`;
}

function addTrustBarRow() {
    const wrap = document.getElementById('trustBarItems');
    const index = wrap.querySelectorAll('.trust-bar-row').length;
    wrap.insertAdjacentHTML('beforeend', trustBarRowHtml(index));
}
</script>
@endpush