81 lines
4.3 KiB
PHP
81 lines
4.3 KiB
PHP
<div class="p-6">
|
|
<div class="flex items-center justify-between mb-5">
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-t1">A/B Test Variants</h3>
|
|
<p class="text-xs text-t3 mt-0.5 font-mono truncate max-w-xs">{{ $linkTarget }}</p>
|
|
</div>
|
|
<button wire:click="addVariant" type="button"
|
|
class="px-3 py-1.5 bg-s2 border border-white/[.06] text-xs font-medium text-t1 rounded-lg hover:bg-s3 transition-colors flex items-center gap-1.5 {{ count($variants) >= 5 ? 'opacity-40 cursor-not-allowed' : '' }}"
|
|
@disabled(count($variants) >= 5)>
|
|
<x-heroicon-o-plus class="w-3.5 h-3.5" />
|
|
Add Variant
|
|
</button>
|
|
</div>
|
|
|
|
@error('variants') <p class="mb-4 text-xs text-red">{{ $message }}</p> @enderror
|
|
|
|
<div class="space-y-3">
|
|
@foreach($variants as $i => $variant)
|
|
<div class="p-3 bg-s2 border border-white/[.06] rounded-lg space-y-2">
|
|
<div class="flex items-center gap-2">
|
|
<div class="flex-1 min-w-0">
|
|
<input wire:model.live="variants.{{ $i }}.label" type="text" placeholder="Variant label"
|
|
class="block w-full px-2.5 py-1.5 bg-s3 border border-white/[.06] rounded text-xs text-t1 placeholder-t3 focus:outline-none focus:ring-1 focus:ring-blue/50">
|
|
@error("variants.{$i}.label") <p class="mt-0.5 text-xs text-red">{{ $message }}</p> @enderror
|
|
</div>
|
|
|
|
<div class="flex items-center gap-1.5 flex-shrink-0">
|
|
<input wire:model.live="variants.{{ $i }}.weight" type="number" min="1" max="99"
|
|
class="w-14 px-2 py-1.5 bg-s3 border border-white/[.06] rounded text-xs text-t1 text-center focus:outline-none focus:ring-1 focus:ring-blue/50 font-mono">
|
|
<span class="text-xs text-t3">%</span>
|
|
</div>
|
|
|
|
@if(count($variants) > 2)
|
|
<button wire:click="removeVariant({{ $i }})" type="button"
|
|
class="p-1 text-t3 hover:text-red transition-colors flex-shrink-0">
|
|
<x-heroicon-o-x-mark class="w-3.5 h-3.5" />
|
|
</button>
|
|
@endif
|
|
</div>
|
|
|
|
<div>
|
|
<input wire:model="variants.{{ $i }}.target_url" type="url" placeholder="https://example.com/variant"
|
|
class="block w-full px-2.5 py-1.5 bg-s3 border border-white/[.06] rounded text-xs text-t1 placeholder-t3 focus:outline-none focus:ring-1 focus:ring-blue/50 font-mono">
|
|
@error("variants.{$i}.target_url") <p class="mt-0.5 text-xs text-red">{{ $message }}</p> @enderror
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
|
|
{{-- Weight summary --}}
|
|
<div class="mt-3 flex items-center justify-between">
|
|
<button wire:click="rebalanceWeights" type="button"
|
|
class="text-xs text-t2 hover:text-t1 transition-colors flex items-center gap-1">
|
|
<x-heroicon-o-arrow-path class="w-3 h-3" />
|
|
Auto-balance weights
|
|
</button>
|
|
@php $total = array_sum(array_column($variants, 'weight')); @endphp
|
|
<span class="text-xs font-mono {{ $total === 100 ? 'text-green' : 'text-red' }}">
|
|
{{ $total }}% total
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex gap-3 mt-5">
|
|
<button wire:click="save" wire:loading.attr="disabled" wire:target="save"
|
|
class="flex-1 px-4 py-2.5 bg-accent-gradient text-white text-sm font-medium rounded-lg hover:opacity-90 transition-opacity disabled:opacity-60">
|
|
<span wire:loading.remove wire:target="save">Save Variants</span>
|
|
<span wire:loading wire:target="save" class="flex items-center justify-center gap-2">
|
|
<svg class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
|
|
</svg>
|
|
Saving…
|
|
</span>
|
|
</button>
|
|
<button wire:click="closeModal"
|
|
class="px-4 py-2.5 bg-s2 text-t2 text-sm font-medium rounded-lg hover:text-t1 transition-colors border border-white/[.06]">
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|