91 lines
4.9 KiB
PHP
91 lines
4.9 KiB
PHP
|
<div
|
||
|
|
x-data="{
|
||
|
|
steps: @js($funnel->steps ?? [['type' => 'pageview', 'value' => '', 'label' => ''], ['type' => 'pageview', 'value' => '', 'label' => '']]),
|
||
|
|
addStep() {
|
||
|
|
this.steps.push({ type: 'pageview', value: '', label: '' });
|
||
|
|
},
|
||
|
|
removeStep(index) {
|
||
|
|
if (this.steps.length > 2) this.steps.splice(index, 1);
|
||
|
|
}
|
||
|
|
}"
|
||
|
|
class="space-y-6"
|
||
|
|
>
|
||
|
|
<div>
|
||
|
|
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">Funnel Name</label>
|
||
|
|
<input type="text" name="name" id="name" value="{{ old('name', $funnel->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. Checkout Flow">
|
||
|
|
@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">Steps <span class="text-gray-400 font-normal">(min 2)</span></label>
|
||
|
|
|
||
|
|
<div class="space-y-3">
|
||
|
|
<template x-for="(step, index) in steps" :key="index">
|
||
|
|
<div class="flex items-start gap-3 bg-gray-50 rounded-lg p-3 border border-gray-200">
|
||
|
|
<div class="flex items-center justify-center w-7 h-7 rounded-full bg-indigo-100 text-indigo-700 text-xs font-bold shrink-0 mt-1" x-text="index + 1"></div>
|
||
|
|
|
||
|
|
<div class="flex-1 grid grid-cols-1 sm:grid-cols-3 gap-3">
|
||
|
|
<div>
|
||
|
|
<label class="block text-xs font-medium text-gray-500 mb-1">Type</label>
|
||
|
|
<select
|
||
|
|
:name="'steps[' + index + '][type]'"
|
||
|
|
x-model="step.type"
|
||
|
|
class="block w-full rounded-lg border-gray-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
|
||
|
|
>
|
||
|
|
<option value="pageview">Page View</option>
|
||
|
|
<option value="event">Event</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label class="block text-xs font-medium text-gray-500 mb-1">
|
||
|
|
<span x-text="step.type === 'pageview' ? 'Path' : 'Event Name'"></span>
|
||
|
|
</label>
|
||
|
|
<input type="text"
|
||
|
|
:name="'steps[' + index + '][value]'"
|
||
|
|
x-model="step.value"
|
||
|
|
:placeholder="step.type === 'pageview' ? '/checkout' : 'purchase'"
|
||
|
|
required
|
||
|
|
class="block w-full rounded-lg border-gray-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label class="block text-xs font-medium text-gray-500 mb-1">Label</label>
|
||
|
|
<input type="text"
|
||
|
|
:name="'steps[' + index + '][label]'"
|
||
|
|
x-model="step.label"
|
||
|
|
placeholder="e.g. Checkout Page"
|
||
|
|
required
|
||
|
|
class="block w-full rounded-lg border-gray-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button type="button" @click="removeStep(index)" x-show="steps.length > 2"
|
||
|
|
class="mt-1 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="addStep()"
|
||
|
|
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 Step
|
||
|
|
</button>
|
||
|
|
|
||
|
|
@error('steps')
|
||
|
|
<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($funnel->id) ? 'Update Funnel' : 'Create Funnel' }}
|
||
|
|
</button>
|
||
|
|
<a href="{{ route('funnels.index', $website) }}" class="text-sm text-gray-500 hover:text-gray-700 transition">Cancel</a>
|
||
|
|
</div>
|
||
|
|
</div>
|