88 lines
4.5 KiB
PHP
88 lines
4.5 KiB
PHP
<div
|
|
x-data="{
|
|
filters: @js($segment->filters ?? [['field' => 'country', 'operator' => '=', 'value' => '']]),
|
|
fields: [
|
|
{ value: 'country', label: 'Country' },
|
|
{ value: 'region', label: 'Region' },
|
|
{ value: 'city', label: 'City' },
|
|
{ value: 'browser', label: 'Browser' },
|
|
{ value: 'os', label: 'Operating System' },
|
|
{ value: 'device_type', label: 'Device Type' },
|
|
{ value: 'language', label: 'Language' },
|
|
{ value: 'screen_resolution', label: 'Screen Resolution' },
|
|
],
|
|
operators: [
|
|
{ value: '=', label: 'equals' },
|
|
{ value: '!=', label: 'not equals' },
|
|
{ value: 'contains', label: 'contains' },
|
|
{ value: 'starts_with', label: 'starts with' },
|
|
],
|
|
addFilter() {
|
|
this.filters.push({ field: 'country', operator: '=', value: '' });
|
|
},
|
|
removeFilter(index) {
|
|
if (this.filters.length > 1) this.filters.splice(index, 1);
|
|
}
|
|
}"
|
|
class="space-y-6"
|
|
>
|
|
<div>
|
|
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">Segment Name</label>
|
|
<input type="text" name="name" id="name" value="{{ old('name', $segment->name ?? '') }}" required
|
|
class="block w-full rounded-lg border-gray-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
|
|
placeholder="e.g. Mobile users from Germany">
|
|
@error('name')
|
|
<p class="mt-1 text-sm text-red-600">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-3">Filters <span class="text-gray-400 font-normal">(all must match)</span></label>
|
|
|
|
<div class="space-y-3">
|
|
<template x-for="(filter, index) in filters" :key="index">
|
|
<div class="flex items-center gap-3 bg-gray-50 rounded-lg p-3 border border-gray-200">
|
|
<select :name="'filters[' + index + '][field]'" x-model="filter.field"
|
|
class="rounded-lg border-gray-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
|
|
<template x-for="f in fields" :key="f.value">
|
|
<option :value="f.value" x-text="f.label"></option>
|
|
</template>
|
|
</select>
|
|
|
|
<select :name="'filters[' + index + '][operator]'" x-model="filter.operator"
|
|
class="rounded-lg border-gray-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
|
|
<template x-for="o in operators" :key="o.value">
|
|
<option :value="o.value" x-text="o.label"></option>
|
|
</template>
|
|
</select>
|
|
|
|
<input type="text" :name="'filters[' + index + '][value]'" x-model="filter.value" required
|
|
placeholder="Value" class="flex-1 rounded-lg border-gray-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
|
|
|
|
<button type="button" @click="removeFilter(index)" x-show="filters.length > 1"
|
|
class="p-1 text-gray-400 hover:text-red-500 transition shrink-0">
|
|
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<button type="button" @click="addFilter()"
|
|
class="mt-3 inline-flex items-center gap-1.5 text-sm text-indigo-600 hover:text-indigo-800 font-medium transition">
|
|
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /></svg>
|
|
Add Filter
|
|
</button>
|
|
|
|
@error('filters')
|
|
<p class="mt-1 text-sm text-red-600">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="flex items-center gap-3 pt-2">
|
|
<button type="submit" class="inline-flex items-center px-4 py-2 bg-indigo-600 rounded-lg text-sm font-medium text-white hover:bg-indigo-500 transition">
|
|
{{ isset($segment->id) ? 'Update Segment' : 'Create Segment' }}
|
|
</button>
|
|
<a href="{{ route('segments.index', $website) }}" class="text-sm text-gray-500 hover:text-gray-700 transition">Cancel</a>
|
|
</div>
|
|
</div>
|