@php $presets = $presets ?? config('theme-color-presets', []); @endphp
<div class="card shadow-sm border-0 mb-3 theme-preset-card">
    <div class="card-body">
        <div class="d-flex flex-wrap justify-content-between align-items-start gap-2 mb-3">
            <div>
                <h6 class="fw-bold mb-1"><i class="fas fa-magic me-2 text-success"></i>Quick Color Preset — এক ক্লিকে পুরো theme</h6>
                <p class="text-muted small mb-0">Preset select করলে সব color auto set হবে। পরে চাইলে নিচ থেকে আলাদা color change করতে পারবেন।</p>
            </div>
            <form method="POST" action="{{ route('admin.settings.theme.colors.reset') }}"
                  onsubmit="return confirm('Default colors restore করবেন?');">
                @csrf
                <button type="submit" class="btn btn-outline-secondary btn-sm">
                    <i class="fas fa-undo me-1"></i> Reset Default
                </button>
            </form>
        </div>
        <div class="row g-2">
            @foreach($presets as $key => $preset)
            <div class="col-6 col-md-3">
                <form method="POST" action="{{ route('admin.settings.theme.colors.preset') }}" class="h-100">
                    @csrf
                    <input type="hidden" name="preset" value="{{ $key }}">
                    <button type="submit" class="btn w-100 h-100 text-start theme-preset-btn p-3 border rounded-3 bg-white">
                        <div class="d-flex gap-1 mb-2">
                            @foreach($preset['swatch'] ?? ['#65971e', '#28a745', '#daeac5'] as $c)
                            <span class="theme-preset-swatch" style="background:{{ $c }}"></span>
                            @endforeach
                        </div>
                        <div class="fw-bold small">
                            <i class="fas {{ $preset['icon'] ?? 'fa-palette' }} me-1 text-success"></i>
                            {{ $preset['name'] ?? $key }}
                        </div>
                        <div class="text-muted" style="font-size:11px">{{ $preset['name_bn'] ?? '' }}</div>
                        <div class="text-muted mt-1" style="font-size:10px;line-height:1.3">{{ $preset['desc'] ?? '' }}</div>
                        @if($key === 'organic')
                        <span class="badge bg-success mt-2" style="font-size:9px">Recommended</span>
                        @endif
                    </button>
                </form>
            </div>
            @endforeach
        </div>
    </div>
</div>