666 lines
30 KiB
Vue
666 lines
30 KiB
Vue
<script setup lang="ts">
|
|
import { Head, useForm, Link } from '@inertiajs/vue3';
|
|
import {
|
|
Plus,
|
|
Trash2,
|
|
Link as LinkIcon,
|
|
DollarSign,
|
|
RotateCw,
|
|
Award,
|
|
XSquare,
|
|
Star,
|
|
ArrowLeft,
|
|
} from 'lucide-vue-next';
|
|
import { ref, watch } from 'vue';
|
|
|
|
interface PredefinedBadge {
|
|
label: string;
|
|
class: string;
|
|
}
|
|
|
|
const props = defineProps<{
|
|
predefinedBadges: PredefinedBadge[];
|
|
predefinedKeyFeatures: string[];
|
|
}>();
|
|
|
|
const form = useForm({
|
|
name: '',
|
|
description: '',
|
|
image_path: '', // For URL input
|
|
image_file: null as File | null, // For file upload
|
|
brand_color: '#a855f7', // Default purple
|
|
hover_color: 'rgba(168, 85, 247, 0.8)', // Default purple rgba
|
|
badges: [],
|
|
min_deposit: '',
|
|
max_bet: '',
|
|
wagering: '',
|
|
free_spins: '',
|
|
button_link: '',
|
|
key_features: [],
|
|
is_sticky: false,
|
|
is_no_deposit: false,
|
|
is_featured: false,
|
|
order: 0,
|
|
});
|
|
|
|
const newBadge = ref('');
|
|
const addBadge = () => {
|
|
if (newBadge.value.trim()) {
|
|
form.badges.push({
|
|
label: newBadge.value.trim(),
|
|
class: 'bg-white/10',
|
|
});
|
|
newBadge.value = '';
|
|
}
|
|
};
|
|
|
|
const removeBadge = (index: number) => {
|
|
form.badges.splice(index, 1);
|
|
};
|
|
|
|
const addPredefinedBadge = (badge: PredefinedBadge) => {
|
|
if (!form.badges.some((b) => b.label === badge.label)) {
|
|
form.badges.push(badge);
|
|
}
|
|
};
|
|
|
|
const newFeature = ref('');
|
|
const addFeature = () => {
|
|
if (newFeature.value.trim()) {
|
|
form.key_features.push(newFeature.value.trim());
|
|
newFeature.value = '';
|
|
}
|
|
};
|
|
|
|
const removeFeature = (index: number) => {
|
|
form.key_features.splice(index, 1);
|
|
};
|
|
|
|
const addPredefinedFeature = (feature: string) => {
|
|
if (!form.key_features.includes(feature)) {
|
|
form.key_features.push(feature);
|
|
}
|
|
};
|
|
|
|
const imagePreviewUrl = ref<string | null>(null);
|
|
|
|
const handleImageFileChange = (e: Event) => {
|
|
const target = e.target as HTMLInputElement;
|
|
if (target.files && target.files[0]) {
|
|
form.image_file = target.files[0];
|
|
imagePreviewUrl.value = URL.createObjectURL(target.files[0]);
|
|
form.image_path = ''; // Clear image_path if a file is uploaded
|
|
} else {
|
|
form.image_file = null;
|
|
imagePreviewUrl.value = null;
|
|
}
|
|
};
|
|
|
|
// Watch for changes in image_path to update preview if it's a URL
|
|
watch(
|
|
() => form.image_path,
|
|
(newPath) => {
|
|
if (newPath && !form.image_file) {
|
|
imagePreviewUrl.value = newPath;
|
|
} else if (!newPath && !form.image_file) {
|
|
imagePreviewUrl.value = null;
|
|
}
|
|
},
|
|
);
|
|
|
|
const submit = () => {
|
|
form.post('/admin/bonuses', {
|
|
onSuccess: () => {
|
|
// Handled by AdminLayout flash messages
|
|
},
|
|
onError: (errors) => {
|
|
console.error(errors);
|
|
// You might want to show a generic error notification here
|
|
},
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<Head title="Create Bonus" />
|
|
|
|
<div class="space-y-8">
|
|
<!-- Header Section -->
|
|
<div
|
|
class="flex items-center justify-between gap-6 rounded-[32px] border border-white/5 bg-[#0f172a] p-8 shadow-xl"
|
|
>
|
|
<div class="flex items-center gap-4">
|
|
<Link
|
|
href="/admin/bonuses"
|
|
class="flex h-10 w-10 items-center justify-center rounded-xl bg-white/5 text-gray-400 transition hover:bg-white/10 hover:text-white"
|
|
>
|
|
<ArrowLeft :size="20" />
|
|
</Link>
|
|
<h1
|
|
class="text-3xl font-black tracking-tighter uppercase italic"
|
|
>
|
|
Create New <span class="text-purple-500">Bonus</span>
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<form
|
|
@submit.prevent="submit"
|
|
class="space-y-10 rounded-[32px] border border-white/5 bg-[#0f172a] p-8 shadow-xl"
|
|
>
|
|
<div class="grid grid-cols-1 gap-12 lg:grid-cols-2">
|
|
<!-- Left Column: Content -->
|
|
<div class="space-y-8">
|
|
<section class="space-y-6">
|
|
<h2
|
|
class="flex items-center gap-3 text-xl font-black tracking-tight text-blue-400 uppercase italic"
|
|
>
|
|
<span class="h-[2px] w-8 bg-blue-400"></span> Main
|
|
Info
|
|
</h2>
|
|
|
|
<div class="space-y-4">
|
|
<label class="block">
|
|
<span
|
|
class="mb-2 block text-[10px] font-black tracking-[0.2em] text-gray-500 uppercase"
|
|
>Casino Name</span
|
|
>
|
|
<input
|
|
v-model="form.name"
|
|
type="text"
|
|
class="form-input"
|
|
required
|
|
placeholder="e.g. STAKE.COM"
|
|
/>
|
|
</label>
|
|
|
|
<label class="block">
|
|
<span
|
|
class="mb-2 block text-[10px] font-black tracking-[0.2em] text-gray-500 uppercase"
|
|
>Description / Bonus Text</span
|
|
>
|
|
<textarea
|
|
v-model="form.description"
|
|
class="form-textarea"
|
|
rows="4"
|
|
placeholder="Exklusiver 200% Bonus bis zu 1000€..."
|
|
></textarea>
|
|
</label>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="space-y-6">
|
|
<h2
|
|
class="flex items-center gap-3 text-xl font-black tracking-tight text-purple-400 uppercase italic"
|
|
>
|
|
<span class="h-[2px] w-8 bg-purple-400"></span>
|
|
Visuals & Branding
|
|
</h2>
|
|
|
|
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
|
|
<label class="block">
|
|
<span
|
|
class="mb-2 block text-[10px] font-black tracking-[0.2em] text-gray-500 uppercase"
|
|
>Brand Primary Color</span
|
|
>
|
|
<div class="flex gap-3">
|
|
<input
|
|
v-model="form.brand_color"
|
|
type="color"
|
|
class="form-color-input w-14"
|
|
/>
|
|
<input
|
|
v-model="form.brand_color"
|
|
type="text"
|
|
class="form-input flex-1 font-mono text-xs uppercase"
|
|
placeholder="#A855F7"
|
|
/>
|
|
</div>
|
|
</label>
|
|
|
|
<label class="block">
|
|
<span
|
|
class="mb-2 block text-[10px] font-black tracking-[0.2em] text-gray-500 uppercase"
|
|
>Hover Glow Color (RGBA)</span
|
|
>
|
|
<input
|
|
v-model="form.hover_color"
|
|
type="text"
|
|
class="form-input font-mono text-xs"
|
|
placeholder="rgba(168, 85, 247, 0.8)"
|
|
/>
|
|
</label>
|
|
</div>
|
|
|
|
<div
|
|
class="grid grid-cols-1 items-end gap-6 sm:grid-cols-2"
|
|
>
|
|
<label class="block">
|
|
<span
|
|
class="mb-2 block text-[10px] font-black tracking-[0.2em] text-gray-500 uppercase"
|
|
>Background Image URL</span
|
|
>
|
|
<input
|
|
v-model="form.image_path"
|
|
type="text"
|
|
class="form-input"
|
|
:disabled="!!form.image_file"
|
|
/>
|
|
</label>
|
|
|
|
<label class="block">
|
|
<span
|
|
class="mb-2 block text-[10px] font-black tracking-[0.2em] text-gray-500 uppercase"
|
|
>Or Upload New File</span
|
|
>
|
|
<input
|
|
type="file"
|
|
@change="handleImageFileChange"
|
|
class="form-file-input"
|
|
accept="image/*"
|
|
/>
|
|
</label>
|
|
</div>
|
|
|
|
<div
|
|
v-if="imagePreviewUrl"
|
|
class="group relative aspect-video overflow-hidden rounded-2xl border border-white/5 bg-black/40"
|
|
>
|
|
<img
|
|
:src="imagePreviewUrl"
|
|
class="h-full w-full object-cover opacity-60"
|
|
/>
|
|
<div
|
|
class="absolute inset-0 flex items-center justify-center"
|
|
>
|
|
<span
|
|
class="rounded-full border border-white/10 bg-black/60 px-4 py-2 text-[10px] font-black tracking-widest uppercase backdrop-blur-md"
|
|
>Image Preview</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- Right Column: Stats & Features -->
|
|
<div class="space-y-8">
|
|
<section class="space-y-6">
|
|
<h2
|
|
class="flex items-center gap-3 text-xl font-black tracking-tight text-green-400 uppercase italic"
|
|
>
|
|
<span class="h-[2px] w-8 bg-green-400"></span> Bonus
|
|
Details
|
|
</h2>
|
|
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<label class="block">
|
|
<span
|
|
class="mb-2 block text-[10px] font-black tracking-[0.2em] text-gray-500 uppercase"
|
|
>Min Deposit</span
|
|
>
|
|
<div class="relative">
|
|
<DollarSign
|
|
class="absolute top-1/2 left-4 -translate-y-1/2 text-gray-600"
|
|
:size="14"
|
|
/>
|
|
<input
|
|
v-model="form.min_deposit"
|
|
type="text"
|
|
class="form-input pl-10"
|
|
placeholder="20€"
|
|
/>
|
|
</div>
|
|
</label>
|
|
<label class="block">
|
|
<span
|
|
class="mb-2 block text-[10px] font-black tracking-[0.2em] text-gray-500 uppercase"
|
|
>Max Bet</span
|
|
>
|
|
<div class="relative">
|
|
<XSquare
|
|
class="absolute top-1/2 left-4 -translate-y-1/2 text-gray-600"
|
|
:size="14"
|
|
/>
|
|
<input
|
|
v-model="form.max_bet"
|
|
type="text"
|
|
class="form-input pl-10"
|
|
placeholder="5€"
|
|
/>
|
|
</div>
|
|
</label>
|
|
<label class="block">
|
|
<span
|
|
class="mb-2 block text-[10px] font-black tracking-[0.2em] text-gray-500 uppercase"
|
|
>Wagering</span
|
|
>
|
|
<div class="relative">
|
|
<RotateCw
|
|
class="absolute top-1/2 left-4 -translate-y-1/2 text-gray-600"
|
|
:size="14"
|
|
/>
|
|
<input
|
|
v-model="form.wagering"
|
|
type="text"
|
|
class="form-input pl-10"
|
|
placeholder="35x"
|
|
/>
|
|
</div>
|
|
</label>
|
|
<label class="block">
|
|
<span
|
|
class="mb-2 block text-[10px] font-black tracking-[0.2em] text-gray-500 uppercase"
|
|
>Free Spins</span
|
|
>
|
|
<div class="relative">
|
|
<Award
|
|
class="absolute top-1/2 left-4 -translate-y-1/2 text-gray-600"
|
|
:size="14"
|
|
/>
|
|
<input
|
|
v-model="form.free_spins"
|
|
type="text"
|
|
class="form-input pl-10"
|
|
placeholder="100 FS"
|
|
/>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
|
|
<label class="block">
|
|
<span
|
|
class="mb-2 block text-[10px] font-black tracking-[0.2em] text-gray-500 uppercase"
|
|
>Affiliate / Button Link</span
|
|
>
|
|
<div class="relative">
|
|
<LinkIcon
|
|
class="absolute top-1/2 left-4 -translate-y-1/2 text-gray-600"
|
|
:size="14"
|
|
/>
|
|
<input
|
|
v-model="form.button_link"
|
|
type="text"
|
|
class="form-input pl-10"
|
|
placeholder="https://..."
|
|
/>
|
|
</div>
|
|
</label>
|
|
</section>
|
|
|
|
<section class="space-y-6">
|
|
<h2
|
|
class="flex items-center gap-3 text-xl font-black tracking-tight text-orange-400 uppercase italic"
|
|
>
|
|
<span class="h-[2px] w-8 bg-orange-400"></span>
|
|
Configuration
|
|
</h2>
|
|
|
|
<div class="flex flex-wrap gap-6">
|
|
<label
|
|
class="group flex cursor-pointer items-center gap-3"
|
|
>
|
|
<div
|
|
class="relative h-6 w-12 rounded-full border border-white/10 bg-white/5 transition group-hover:border-orange-500/50"
|
|
>
|
|
<input
|
|
v-model="form.is_sticky"
|
|
type="checkbox"
|
|
class="peer sr-only"
|
|
/>
|
|
<div
|
|
class="absolute top-1 left-1 h-4 w-4 rounded-full bg-gray-500 transition-all peer-checked:left-7 peer-checked:bg-orange-500"
|
|
></div>
|
|
</div>
|
|
<span
|
|
class="text-[10px] font-black tracking-widest text-gray-400 uppercase peer-checked:text-white"
|
|
>Sticky Bonus</span
|
|
>
|
|
</label>
|
|
|
|
<label
|
|
class="group flex cursor-pointer items-center gap-3"
|
|
>
|
|
<div
|
|
class="relative h-6 w-12 rounded-full border border-white/10 bg-white/5 transition group-hover:border-cyan-500/50"
|
|
>
|
|
<input
|
|
v-model="form.is_no_deposit"
|
|
type="checkbox"
|
|
class="peer sr-only"
|
|
/>
|
|
<div
|
|
class="absolute top-1 left-1 h-4 w-4 rounded-full bg-gray-500 transition-all peer-checked:left-7 peer-checked:bg-cyan-500"
|
|
></div>
|
|
</div>
|
|
<span
|
|
class="text-[10px] font-black tracking-widest text-gray-400 uppercase"
|
|
>No Deposit</span
|
|
>
|
|
</label>
|
|
|
|
<label
|
|
class="group flex cursor-pointer items-center gap-3"
|
|
>
|
|
<div
|
|
class="relative h-6 w-12 rounded-full border border-white/10 bg-white/5 transition group-hover:border-yellow-500/50"
|
|
>
|
|
<input
|
|
v-model="form.is_featured"
|
|
type="checkbox"
|
|
class="peer sr-only"
|
|
/>
|
|
<div
|
|
class="absolute top-1 left-1 h-4 w-4 rounded-full bg-gray-500 transition-all peer-checked:left-7 peer-checked:bg-yellow-500"
|
|
></div>
|
|
</div>
|
|
<span
|
|
class="flex items-center gap-2 text-[10px] font-black tracking-widest text-gray-400 uppercase"
|
|
><Star :size="12" /> Super Card</span
|
|
>
|
|
</label>
|
|
|
|
<label class="ml-auto flex items-center gap-4">
|
|
<span
|
|
class="text-[10px] font-black tracking-widest text-gray-500 uppercase"
|
|
>Sort Order</span
|
|
>
|
|
<input
|
|
v-model="form.order"
|
|
type="number"
|
|
class="form-input w-20 text-center"
|
|
/>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Badges -->
|
|
<div class="space-y-4">
|
|
<span
|
|
class="block text-[10px] font-black tracking-[0.2em] text-gray-500 uppercase"
|
|
>Status Badges</span
|
|
>
|
|
<div class="mb-2 flex flex-wrap gap-2">
|
|
<div
|
|
v-for="(badge, idx) in form.badges"
|
|
:key="idx"
|
|
:class="[
|
|
'group flex items-center gap-2 rounded-lg px-3 py-1.5 transition hover:border-red-500/30',
|
|
badge.class ||
|
|
'border border-white/10 bg-white/5',
|
|
]"
|
|
>
|
|
<span
|
|
class="text-[10px] font-bold uppercase"
|
|
>{{ badge.label }}</span
|
|
>
|
|
<button
|
|
type="button"
|
|
@click="removeBadge(idx)"
|
|
class="text-gray-600 transition group-hover:text-red-500"
|
|
>
|
|
<Trash2 :size="12" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="flex flex-wrap gap-2 border-t border-white/5 pt-4"
|
|
>
|
|
<span
|
|
class="w-full text-xs font-bold text-gray-500 uppercase"
|
|
>Predefined:</span
|
|
>
|
|
<button
|
|
type="button"
|
|
v-for="badge in predefinedBadges"
|
|
:key="badge.label"
|
|
@click="addPredefinedBadge(badge)"
|
|
:class="[
|
|
'rounded-lg px-3 py-1.5 text-[10px] font-bold uppercase transition',
|
|
badge.class,
|
|
form.badges.some(
|
|
(b) => b.label === badge.label,
|
|
)
|
|
? 'cursor-not-allowed opacity-50'
|
|
: 'hover:opacity-75',
|
|
]"
|
|
:disabled="
|
|
form.badges.some(
|
|
(b) => b.label === badge.label,
|
|
)
|
|
"
|
|
>
|
|
{{ badge.label }}
|
|
</button>
|
|
</div>
|
|
<div class="mt-2 flex w-full gap-2">
|
|
<input
|
|
v-model="newBadge"
|
|
type="text"
|
|
class="form-input flex-1 py-2 text-xs"
|
|
placeholder="Add Custom Badge (e.g. VIP DEAL)"
|
|
/>
|
|
<button
|
|
type="button"
|
|
@click="addBadge"
|
|
class="btn-secondary py-2"
|
|
>
|
|
<Plus :size="14" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Key Features -->
|
|
<div class="space-y-4">
|
|
<span
|
|
class="block text-[10px] font-black tracking-[0.2em] text-gray-500 uppercase"
|
|
>Key Features (Pros)</span
|
|
>
|
|
<div class="mb-2 space-y-2">
|
|
<div
|
|
v-for="(feature, idx) in form.key_features"
|
|
:key="idx"
|
|
class="flex items-center justify-between rounded-xl border border-white/5 bg-white/[0.02] p-3"
|
|
>
|
|
<span class="text-xs text-gray-300">{{
|
|
feature
|
|
}}</span>
|
|
<button
|
|
type="button"
|
|
@click="removeFeature(idx)"
|
|
class="text-gray-600 transition hover:text-red-500"
|
|
>
|
|
<Trash2 :size="14" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="flex flex-wrap gap-2 border-t border-white/5 pt-4"
|
|
>
|
|
<span
|
|
class="w-full text-xs font-bold text-gray-500 uppercase"
|
|
>Predefined:</span
|
|
>
|
|
<button
|
|
type="button"
|
|
v-for="feature in predefinedKeyFeatures"
|
|
:key="feature"
|
|
@click="addPredefinedFeature(feature)"
|
|
:class="[
|
|
'rounded-lg border border-white/10 bg-white/5 px-3 py-1.5 text-[10px] font-bold uppercase transition',
|
|
form.key_features.includes(feature)
|
|
? 'cursor-not-allowed opacity-50'
|
|
: 'hover:opacity-75',
|
|
]"
|
|
:disabled="
|
|
form.key_features.includes(feature)
|
|
"
|
|
>
|
|
{{ feature }}
|
|
</button>
|
|
</div>
|
|
<div class="mt-2 flex w-full gap-2">
|
|
<input
|
|
v-model="newFeature"
|
|
type="text"
|
|
class="form-input flex-1 py-2 text-xs"
|
|
placeholder="Add Custom Feature (e.g. Instant Rakeback)"
|
|
/>
|
|
<button
|
|
type="button"
|
|
@click="addFeature"
|
|
class="btn-secondary py-2"
|
|
>
|
|
<Plus :size="14" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-end gap-4 border-t border-white/5 pt-10">
|
|
<Link
|
|
href="/admin/bonuses"
|
|
class="rounded-2xl px-8 py-4 text-xs font-black tracking-widest text-gray-500 uppercase transition hover:text-white"
|
|
>Cancel</Link
|
|
>
|
|
<button
|
|
type="submit"
|
|
class="btn-primary flex items-center gap-3"
|
|
:disabled="form.processing"
|
|
>
|
|
{{ form.processing ? 'Saving...' : 'Save Bonus' }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
@reference "../../../../css/app.css";
|
|
|
|
.form-input,
|
|
.form-textarea {
|
|
@apply w-full rounded-2xl border border-white/5 bg-white/[0.03] px-6 py-4 text-sm font-medium text-white placeholder-gray-600 transition outline-none focus:border-blue-500/50 focus:ring-1 focus:ring-blue-500/20;
|
|
}
|
|
.form-file-input {
|
|
@apply w-full text-xs text-gray-500 transition-all duration-300 file:mr-4 file:rounded-2xl file:border-0 file:bg-white/5 file:px-6 file:py-3 file:text-[10px] file:font-black file:tracking-widest file:text-white file:uppercase hover:file:bg-white/10;
|
|
}
|
|
.form-color-input {
|
|
@apply h-14 cursor-pointer overflow-hidden rounded-2xl border-none bg-white/5 p-1;
|
|
}
|
|
.form-color-input::-webkit-color-swatch-wrapper {
|
|
padding: 0;
|
|
}
|
|
.form-color-input::-webkit-color-swatch {
|
|
border: none;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.btn-primary {
|
|
@apply rounded-2xl bg-gradient-to-r from-blue-600 to-purple-600 px-10 py-4 text-xs font-black tracking-widest text-white uppercase shadow-xl shadow-blue-500/20 transition-all duration-300 hover:scale-[1.02] active:scale-[0.98];
|
|
}
|
|
.btn-secondary {
|
|
@apply rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-white transition hover:bg-white/10;
|
|
}
|
|
</style>
|