[FEAT] 優化後端帳號權限邏輯、開發商品管理功能及聯絡資訊 UI 改版
All checks were successful
star-cloud-deploy-demo / deploy-demo (push) Successful in 1m2s
All checks were successful
star-cloud-deploy-demo / deploy-demo (push) Successful in 1m2s
This commit is contained in:
@@ -1,201 +0,0 @@
|
||||
<div x-data="{
|
||||
step: 1,
|
||||
loading: false,
|
||||
settings: @js(auth()->user()->company->settings ?? []),
|
||||
formData: {
|
||||
names: { zh_TW: '', en: '', ja: '' },
|
||||
barcode: '',
|
||||
spec: '',
|
||||
category_id: '',
|
||||
manufacturer: '',
|
||||
track_limit: 10,
|
||||
spring_limit: 10,
|
||||
price: 0,
|
||||
cost: 0,
|
||||
member_price: 0,
|
||||
metadata: {
|
||||
material_code: '',
|
||||
full_points: 0,
|
||||
half_points: 0,
|
||||
half_points_cash: 0
|
||||
}
|
||||
},
|
||||
async submit() {
|
||||
this.loading = true;
|
||||
try {
|
||||
const response = await fetch('{{ route('admin.products.store') }}', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
||||
},
|
||||
body: JSON.stringify(this.formData)
|
||||
});
|
||||
const result = await response.json();
|
||||
if (result.success) {
|
||||
window.location.reload();
|
||||
} else {
|
||||
alert(result.message || 'Saving failed');
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
}
|
||||
}" class="p-4 sm:p-7">
|
||||
<!-- Header -->
|
||||
<div class="text-center mb-8">
|
||||
<h3 class="text-2xl font-black text-slate-800 dark:text-white tracking-tight uppercase">
|
||||
{{ __('Create New Product') }}
|
||||
</h3>
|
||||
<p class="text-sm font-bold text-slate-500 dark:text-slate-400 mt-1 uppercase tracking-widest">
|
||||
{{ __('Add a new item to your product collection') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Stepper (Optional but adds luxury feel) -->
|
||||
<div class="flex items-center justify-center gap-4 mb-8">
|
||||
<div :class="step >= 1 ? 'bg-cyan-500 text-white' : 'bg-slate-100 dark:bg-slate-800 text-slate-400'" class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-black transition-all">1</div>
|
||||
<div class="w-12 h-px bg-slate-200 dark:border-slate-700"></div>
|
||||
<div :class="step >= 2 ? 'bg-cyan-500 text-white' : 'bg-slate-100 dark:bg-slate-800 text-slate-400'" class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-black transition-all">2</div>
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="submit">
|
||||
<!-- Step 1: Basic Info & Multilingual Names -->
|
||||
<div x-show="step === 1" x-transition class="space-y-6">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<!-- Multilingual Names -->
|
||||
<div class="md:col-span-3 space-y-4">
|
||||
<label class="block text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest pl-1">{{ __('Product Name') }} ({{ __('Multilingual') }})</label>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div class="relative">
|
||||
<span class="absolute top-2.5 left-3 text-[10px] font-black text-cyan-500/50 uppercase">ZH</span>
|
||||
<input type="text" x-model="formData.names.zh_TW" required placeholder="{{ __('Traditional Chinese') }}" class="luxury-input pl-10">
|
||||
</div>
|
||||
<div class="relative">
|
||||
<span class="absolute top-2.5 left-3 text-[10px] font-black text-cyan-500/50 uppercase">EN</span>
|
||||
<input type="text" x-model="formData.names.en" placeholder="{{ __('English') }}" class="luxury-input pl-10">
|
||||
</div>
|
||||
<div class="relative">
|
||||
<span class="absolute top-2.5 left-3 text-[10px] font-black text-cyan-500/50 uppercase">JA</span>
|
||||
<input type="text" x-model="formData.names.ja" placeholder="{{ __('Japanese') }}" class="luxury-input pl-10">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Barcode & Spec -->
|
||||
<div class="space-y-2">
|
||||
<label class="block text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest pl-1">{{ __('Barcode') }}</label>
|
||||
<input type="text" x-model="formData.barcode" class="luxury-input">
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="block text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest pl-1">{{ __('Specification') }}</label>
|
||||
<input type="text" x-model="formData.spec" class="luxury-input">
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="block text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest pl-1">{{ __('Category') }}</label>
|
||||
<select x-model="formData.category_id" class="luxury-input">
|
||||
<option value="">{{ __('Select Category') }}</option>
|
||||
@foreach($categories as $cat)
|
||||
<option value="{{ $cat->id }}">{{ $cat->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end pt-4">
|
||||
<button type="button" @click="step = 2" class="px-8 py-3 bg-slate-900 dark:bg-slate-700 text-white rounded-xl font-black text-xs uppercase tracking-[0.2em] hover:bg-cyan-600 transition-all shadow-lg shadow-cyan-500/10">
|
||||
{{ __('Next') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 2: Logistics & Pricing -->
|
||||
<div x-show="step === 2" x-transition class="space-y-6">
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||||
<!-- Track & Spring Limits -->
|
||||
<div class="space-y-2">
|
||||
<label class="block text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest pl-1">{{ __('Track Limit') }}</label>
|
||||
<input type="number" x-model="formData.track_limit" class="luxury-input">
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="block text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest pl-1">{{ __('Spring Limit') }}</label>
|
||||
<input type="number" x-model="formData.spring_limit" class="luxury-input">
|
||||
</div>
|
||||
<div class="col-span-2 space-y-2">
|
||||
<label class="block text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest pl-1">{{ __('Manufacturer') }}</label>
|
||||
<input type="text" x-model="formData.manufacturer" class="luxury-input">
|
||||
</div>
|
||||
|
||||
<!-- Pricing -->
|
||||
<div class="space-y-2">
|
||||
<label class="block text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest pl-1">{{ __('Price') }}</label>
|
||||
<input type="number" x-model="formData.price" class="luxury-input">
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="block text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest pl-1">{{ __('Cost') }}</label>
|
||||
<input type="number" x-model="formData.cost" class="luxury-input">
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="block text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest pl-1">{{ __('Member Price') }}</label>
|
||||
<input type="number" x-model="formData.member_price" class="luxury-input">
|
||||
</div>
|
||||
|
||||
<!-- Feature Toggled Fields: Material Code -->
|
||||
<template x-if="settings.show_material_code">
|
||||
<div class="space-y-2">
|
||||
<label class="block text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest pl-1">{{ __('Material Code') }}</label>
|
||||
<input type="text" x-model="formData.metadata.material_code" class="luxury-input border-cyan-500/30">
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Points Settings Area (Feature Toggled) -->
|
||||
<template x-if="settings.show_points_management">
|
||||
<div class="p-6 bg-slate-50 dark:bg-slate-800/50 rounded-2xl border border-slate-100 dark:border-slate-700/50 space-y-6 mt-4">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<div class="w-1.5 h-1.5 rounded-full bg-cyan-500"></div>
|
||||
<h4 class="text-[11px] font-black text-slate-400 uppercase tracking-widest">{{ __('Points Management') }}</h4>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div class="space-y-2">
|
||||
<label class="block text-[10px] font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest pl-1">{{ __('Full Points') }}</label>
|
||||
<input type="number" x-model="formData.metadata.full_points" class="luxury-input bg-white dark:bg-slate-900">
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="block text-[10px] font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest pl-1">{{ __('Half Points') }}</label>
|
||||
<input type="number" x-model="formData.metadata.half_points" class="luxury-input bg-white dark:bg-slate-900">
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="block text-[10px] font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest pl-1">{{ __('Half Points Cash') }}</label>
|
||||
<input type="number" x-model="formData.metadata.half_points_cash" class="luxury-input bg-white dark:bg-slate-900">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="flex justify-between items-center pt-8 border-t border-slate-100 dark:border-slate-800">
|
||||
<button type="button" @click="step = 1" class="text-xs font-black text-slate-400 uppercase tracking-widest hover:text-slate-600 transition-colors">
|
||||
{{ __('Back') }}
|
||||
</button>
|
||||
<div class="flex gap-4">
|
||||
<button type="button" @click="$dispatch('close-modal', 'create-product')" class="px-6 py-3 text-slate-400 font-black text-xs uppercase tracking-widest hover:text-slate-600">
|
||||
{{ __('Cancel') }}
|
||||
</button>
|
||||
<button type="submit"
|
||||
:disabled="loading"
|
||||
class="px-10 py-3 bg-cyan-600 text-white rounded-xl font-black text-xs uppercase tracking-[0.2em] hover:bg-cyan-500 transition-all shadow-xl shadow-cyan-500/20 flex items-center gap-2">
|
||||
<template x-if="loading">
|
||||
<svg class="animate-spin h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" 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 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
</template>
|
||||
<span x-text="loading ? '{{ __('Saving...') }}' : '{{ __('Save Product') }}'"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
437
resources/views/admin/products/create.blade.php
Normal file
437
resources/views/admin/products/create.blade.php
Normal file
@@ -0,0 +1,437 @@
|
||||
@extends('layouts.admin')
|
||||
|
||||
@section('content')
|
||||
<div class="space-y-6" x-data="productForm({
|
||||
categories: @js($categories),
|
||||
companies: @js($companies),
|
||||
companySettings: @js($companySettings),
|
||||
isEditing: false
|
||||
})">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between gap-6">
|
||||
<div class="flex items-center gap-4">
|
||||
<a href="{{ route('admin.data-config.products.index') }}" class="p-2.5 rounded-xl bg-white dark:bg-slate-900 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-colors border border-slate-200/50 dark:border-slate-700/50">
|
||||
<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" /></svg>
|
||||
</a>
|
||||
<div>
|
||||
<h1 class="text-3xl font-black text-slate-800 dark:text-white font-display tracking-tight">{{ __('Create Product') }}</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button type="submit" form="product-form" class="btn-luxury-primary px-8 py-3 h-12">
|
||||
<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
|
||||
<span>{{ __('Create Product') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if ($errors->any())
|
||||
<div class="luxury-card p-4 rounded-xl border-rose-500/20 bg-rose-500/5 sm:max-w-xl animate-luxury-in">
|
||||
<div class="flex gap-3">
|
||||
<svg class="size-5 text-rose-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" /></svg>
|
||||
<div class="space-y-1">
|
||||
<p class="text-sm font-black text-rose-500 uppercase tracking-widest">{{ __('Validation Error') }}</p>
|
||||
<ul class="text-xs font-bold text-rose-500/80 list-disc list-inside space-y-0.5">
|
||||
@foreach ($errors->all() as $error)
|
||||
<li>{{ $error }}</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<form id="product-form" action="{{ route('admin.data-config.products.store') }}" method="POST" enctype="multipart/form-data" class="flex flex-col lg:flex-row gap-8 items-start">
|
||||
@csrf
|
||||
|
||||
<!-- Side Column (Status & Company) -->
|
||||
<aside class="w-full lg:w-80 lg:sticky top-24 z-10 space-y-8 text-slate-800 dark:text-white">
|
||||
<!-- Product Image -->
|
||||
<div class="luxury-card p-8 rounded-[2.5rem] animate-luxury-in relative z-[70]" style="animation-delay: 50ms">
|
||||
<div class="space-y-6">
|
||||
<label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Product Image') }}</label>
|
||||
|
||||
<div class="relative group">
|
||||
<template x-if="!imagePreview">
|
||||
<div @click="$refs.imageInput.click()" class="aspect-square rounded-3xl border-2 border-dashed border-slate-200 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50 flex flex-col items-center justify-center gap-4 cursor-pointer hover:bg-slate-100 dark:hover:bg-slate-800/80 hover:border-cyan-500/50 transition-all duration-300 group">
|
||||
<div class="p-4 rounded-2xl bg-white dark:bg-slate-800 shadow-sm border border-slate-100 dark:border-slate-700 group-hover:scale-110 group-hover:text-cyan-500 transition-all duration-300">
|
||||
<svg class="size-8 text-slate-400 dark:text-slate-500 group-hover:text-cyan-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" /></svg>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-tighter">{{ __('Click to upload') }}</p>
|
||||
<p class="text-[10px] font-bold text-slate-400 dark:text-slate-500 mt-1">{{ __('PNG, JPG up to 2MB') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template x-if="imagePreview">
|
||||
<div class="relative aspect-square rounded-3xl overflow-hidden border border-slate-200 dark:border-slate-800 shadow-xl group/image">
|
||||
<img :src="imagePreview" class="w-full h-full object-cover">
|
||||
<div class="absolute inset-0 bg-slate-950/40 opacity-0 group-hover/image:opacity-100 transition-opacity duration-300 flex items-center justify-center gap-3">
|
||||
<button type="button" @click="$refs.imageInput.click()" class="p-3 rounded-2xl bg-white text-slate-800 hover:bg-cyan-500 hover:text-white transition-all duration-300 shadow-lg">
|
||||
<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" /></svg>
|
||||
</button>
|
||||
<button type="button" @click="removeImage" class="p-3 rounded-2xl bg-white text-slate-800 hover:bg-rose-500 hover:text-white transition-all duration-300 shadow-lg">
|
||||
<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<input type="file" name="image" x-ref="imageInput" class="hidden" accept="image/*" @change="handleImageUpload">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="luxury-card p-8 rounded-[2.5rem] animate-luxury-in relative z-[60]" style="animation-delay: 100ms">
|
||||
<div class="space-y-6">
|
||||
<div class="space-y-3">
|
||||
<label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Active Status') }}</label>
|
||||
<div class="flex items-center">
|
||||
<label class="relative inline-flex items-center cursor-pointer">
|
||||
<input type="checkbox" name="is_active" value="1" x-model="formData.is_active" class="sr-only peer">
|
||||
<div class="w-11 h-6 bg-slate-200 peer-focus:outline-none rounded-full peer dark:bg-slate-800 peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-cyan-500 transition-colors"></div>
|
||||
<span class="ml-3 text-sm font-bold text-slate-600 dark:text-slate-300" x-text="formData.is_active ? '{{ __('Active') }}' : '{{ __('Disabled') }}'"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if(auth()->user()->isSystemAdmin())
|
||||
<div class="h-px bg-slate-100 dark:bg-slate-800"></div>
|
||||
<div class="space-y-3">
|
||||
<label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Company') }}</label>
|
||||
<x-searchable-select id="company-select" name="company_id" x-model="formData.company_id" @change="updateCompanySettings($event.target.value)" :placeholder="__('Select Company')">
|
||||
<option value="">{{ __('Select Company') }}</option>
|
||||
@foreach($companies as $company)
|
||||
<option value="{{ $company->id }}">{{ $company->name }}</option>
|
||||
@endforeach
|
||||
</x-searchable-select>
|
||||
</div>
|
||||
@else
|
||||
<input type="hidden" name="company_id" value="{{ auth()->user()->company_id }}">
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<div class="flex-1 w-full space-y-8">
|
||||
<!-- Translation -->
|
||||
<div class="luxury-card p-8 rounded-[2.5rem] animate-luxury-in relative z-[40]">
|
||||
<div class="mb-8">
|
||||
<h2 class="text-xl font-black text-slate-800 dark:text-white font-display tracking-tight">{{ __('Product Name (Multilingual)') }}</h2>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center gap-2 h-6">
|
||||
<span class="px-2.5 py-0.5 rounded-md bg-slate-100 dark:bg-slate-800 text-[10px] font-black text-slate-500 uppercase tracking-widest">{{ __('Traditional Chinese') }}</span>
|
||||
<span class="text-rose-500 font-bold">*</span>
|
||||
</div>
|
||||
<input type="text" name="names[zh_TW]" x-model="formData.names.zh_TW" required class="luxury-input !py-3 text-base font-bold shadow-sm">
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center gap-2 h-6">
|
||||
<span class="px-2.5 py-0.5 rounded-md bg-slate-100 dark:bg-slate-800 text-[10px] font-black text-slate-500 uppercase tracking-widest">{{ __('English') }}</span>
|
||||
</div>
|
||||
<input type="text" name="names[en]" x-model="formData.names.en" class="luxury-input !py-3 text-base font-bold shadow-sm">
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center gap-2 h-6">
|
||||
<span class="px-2.5 py-0.5 rounded-md bg-slate-100 dark:bg-slate-800 text-[10px] font-black text-slate-500 uppercase tracking-widest">{{ __('Japanese') }}</span>
|
||||
</div>
|
||||
<input type="text" name="names[ja]" x-model="formData.names.ja" class="luxury-input !py-3 text-base font-bold shadow-sm">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Basic Specs Section -->
|
||||
<div class="luxury-card p-8 rounded-[2.5rem] animate-luxury-in relative z-[30]" style="animation-delay: 100ms">
|
||||
<div class="mb-8">
|
||||
<h2 class="text-xl font-black text-slate-800 dark:text-white font-display tracking-tight">{{ __('Basic Specifications') }}</h2>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div class="grid grid-cols-1 gap-6">
|
||||
<div class="space-y-3">
|
||||
<label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Barcode') }}</label>
|
||||
<input type="text" name="barcode" x-model="formData.barcode" class="luxury-input shadow-sm">
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Manufacturer') }}</label>
|
||||
<input type="text" name="manufacturer" x-model="formData.manufacturer" class="luxury-input shadow-sm">
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 gap-6">
|
||||
<div class="space-y-3">
|
||||
<label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Specification') }}</label>
|
||||
<input type="text" name="spec" x-model="formData.spec" class="luxury-input shadow-sm">
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Category') }}</label>
|
||||
<x-searchable-select id="product-category" name="category_id" x-model="formData.category_id" :placeholder="__('Uncategorized')">
|
||||
<option value="">{{ __('Uncategorized') }}</option>
|
||||
@foreach($categories as $category)
|
||||
@php
|
||||
$catName = $category->name;
|
||||
if ($category->name_dictionary_key) {
|
||||
$catName = __($category->name_dictionary_key);
|
||||
}
|
||||
@endphp
|
||||
<option value="{{ $category->id }}" data-title="{{ $catName }}">{{ $catName }}</option>
|
||||
@endforeach
|
||||
</x-searchable-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pricing Information -->
|
||||
<div class="luxury-card p-8 rounded-[2.5rem] animate-luxury-in relative z-[20]" style="animation-delay: 200ms">
|
||||
<div class="mb-8">
|
||||
<h2 class="text-xl font-black text-slate-800 dark:text-white font-display tracking-tight">{{ __('Pricing Information') }}</h2>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-8">
|
||||
<div class="space-y-3">
|
||||
<label class="text-xs font-black text-emerald-500 uppercase tracking-widest pl-1">{{ __('Retail Price') }} <span class="text-rose-500">*</span></label>
|
||||
<div class="flex items-center h-14 rounded-2xl border border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50 group focus-within:ring-2 focus-within:ring-emerald-500/20 transition-all overflow-hidden">
|
||||
<button type="button" @click="formData.price = Math.max(0, parseInt(formData.price || 0) - 1)" class="shrink-0 w-12 h-full flex items-center justify-center text-slate-400 hover:text-emerald-500 hover:bg-emerald-500/5 active:scale-90 transition-all">
|
||||
<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
|
||||
</button>
|
||||
<div class="flex-1 min-w-[72px]">
|
||||
<input type="number" name="price" x-model="formData.price" required class="w-full bg-transparent border-none text-center font-black text-slate-800 dark:text-white focus:ring-0 text-lg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
|
||||
</div>
|
||||
<button type="button" @click="formData.price = parseInt(formData.price || 0) + 1" class="shrink-0 w-12 h-full flex items-center justify-center text-slate-400 hover:text-emerald-500 hover:bg-emerald-500/5 active:scale-90 transition-all">
|
||||
<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<label class="text-xs font-black text-cyan-500 dark:text-cyan-400 uppercase tracking-widest pl-1">{{ __('Member Price') }} <span class="text-rose-500">*</span></label>
|
||||
<div class="flex items-center h-14 rounded-2xl border border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50 group focus-within:ring-2 focus-within:ring-cyan-500/20 transition-all overflow-hidden">
|
||||
<button type="button" @click="formData.member_price = Math.max(0, parseInt(formData.member_price || 0) - 1)" class="shrink-0 w-12 h-full flex items-center justify-center text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 active:scale-90 transition-all">
|
||||
<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
|
||||
</button>
|
||||
<div class="flex-1 min-w-[72px]">
|
||||
<input type="number" name="member_price" x-model="formData.member_price" required class="w-full bg-transparent border-none text-center font-black text-slate-800 dark:text-white focus:ring-0 text-lg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
|
||||
</div>
|
||||
<button type="button" @click="formData.member_price = parseInt(formData.member_price || 0) + 1" class="shrink-0 w-12 h-full flex items-center justify-center text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 active:scale-90 transition-all">
|
||||
<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<label class="text-xs font-black text-slate-400 uppercase tracking-widest pl-1">{{ __('Cost') }} <span class="text-rose-500">*</span></label>
|
||||
<div class="flex items-center h-14 rounded-2xl border border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50 group focus-within:ring-2 focus-within:ring-slate-500/20 transition-all overflow-hidden">
|
||||
<button type="button" @click="formData.cost = Math.max(0, parseInt(formData.cost || 0) - 1)" class="shrink-0 w-12 h-full flex items-center justify-center text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 hover:bg-slate-500/5 active:scale-90 transition-all">
|
||||
<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
|
||||
</button>
|
||||
<div class="flex-1 min-w-[72px]">
|
||||
<input type="number" name="cost" x-model="formData.cost" required class="w-full bg-transparent border-none text-center font-black text-slate-800 dark:text-white focus:ring-0 text-lg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
|
||||
</div>
|
||||
<button type="button" @click="formData.cost = parseInt(formData.cost || 0) + 1" class="shrink-0 w-12 h-full flex items-center justify-center text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 hover:bg-slate-500/5 active:scale-90 transition-all">
|
||||
<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Inventory Limits -->
|
||||
<div class="luxury-card p-8 rounded-[2.5rem] animate-luxury-in relative z-[10]" style="animation-delay: 300ms">
|
||||
<div class="mb-8">
|
||||
<h2 class="text-xl font-black text-slate-800 dark:text-white font-display tracking-tight">{{ __('Channel Limits') }}</h2>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-8">
|
||||
<div class="space-y-4">
|
||||
<label class="text-xs font-black text-indigo-500 uppercase tracking-widest pl-1">{{ __('Track Channel Limit') }} <span class="text-rose-500">*</span></label>
|
||||
<div class="flex items-center h-14 rounded-2xl border border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50 group focus-within:ring-2 focus-within:ring-indigo-500/20 transition-all overflow-hidden">
|
||||
<button type="button" @click="formData.track_limit = Math.max(0, parseInt(formData.track_limit || 0) - 1)" class="shrink-0 w-12 h-full flex items-center justify-center text-slate-400 hover:text-indigo-500 hover:bg-indigo-500/5 active:scale-90 transition-all">
|
||||
<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
|
||||
</button>
|
||||
<div class="flex-1 min-w-[72px]">
|
||||
<input type="number" name="track_limit" x-model="formData.track_limit" required class="w-full bg-transparent border-none text-center font-black text-slate-800 dark:text-white focus:ring-0 text-lg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
|
||||
</div>
|
||||
<button type="button" @click="formData.track_limit = parseInt(formData.track_limit || 0) + 1" class="shrink-0 w-12 h-full flex items-center justify-center text-slate-400 hover:text-indigo-500 hover:bg-indigo-500/5 active:scale-90 transition-all">
|
||||
<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<label class="text-xs font-black text-amber-500 uppercase tracking-widest pl-1">{{ __('Spring Channel Limit') }} <span class="text-rose-500">*</span></label>
|
||||
<div class="flex items-center h-14 rounded-2xl border border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50 group focus-within:ring-2 focus-within:ring-amber-500/20 transition-all overflow-hidden">
|
||||
<button type="button" @click="formData.spring_limit = Math.max(0, parseInt(formData.spring_limit || 0) - 1)" class="shrink-0 w-12 h-full flex items-center justify-center text-slate-400 hover:text-amber-500 hover:bg-amber-500/5 active:scale-90 transition-all">
|
||||
<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
|
||||
</button>
|
||||
<div class="flex-1 min-w-[72px]">
|
||||
<input type="number" name="spring_limit" x-model="formData.spring_limit" required class="w-full bg-transparent border-none text-center font-black text-slate-800 dark:text-white focus:ring-0 text-lg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
|
||||
</div>
|
||||
<button type="button" @click="formData.spring_limit = parseInt(formData.spring_limit || 0) + 1" class="shrink-0 w-12 h-full flex items-center justify-center text-slate-400 hover:text-amber-500 hover:bg-amber-500/5 active:scale-90 transition-all">
|
||||
<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Advanced Features -->
|
||||
<div class="luxury-card p-8 rounded-[2.5rem] animate-luxury-in overflow-hidden"
|
||||
x-show="companySettings.enable_points || companySettings.enable_material_code"
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0 max-h-0"
|
||||
x-transition:enter-end="opacity-100 max-h-screen"
|
||||
style="animation-delay: 400ms">
|
||||
<div class="mb-8">
|
||||
<h2 class="text-xl font-black text-slate-800 dark:text-white font-display tracking-tight">{{ __('Feature Toggles') }}</h2>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<template x-if="companySettings.enable_material_code">
|
||||
<div class="space-y-3 animate-luxury-in">
|
||||
<label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Material Code') }}</label>
|
||||
<input type="text" name="metadata[material_code]" x-model="formData.metadata.material_code" class="luxury-input shadow-sm">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template x-if="companySettings.enable_points">
|
||||
<div class="contents">
|
||||
<div class="space-y-3 animate-luxury-in">
|
||||
<label class="text-xs font-black text-cyan-500 uppercase tracking-widest pl-1">{{ __('Full Points') }}</label>
|
||||
<div class="flex items-center h-14 rounded-2xl border border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50 group focus-within:ring-2 focus-within:ring-cyan-500/20 transition-all overflow-hidden">
|
||||
<button type="button" @click="formData.metadata.points_full = Math.max(0, parseInt(formData.metadata.points_full || 0) - 1)" class="shrink-0 w-10 h-full flex items-center justify-center text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 active:scale-90 transition-all">
|
||||
<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
|
||||
</button>
|
||||
<div class="flex-1 min-w-[60px]">
|
||||
<input type="number" name="metadata[points_full]" x-model="formData.metadata.points_full" class="w-full bg-transparent border-none text-center font-black text-slate-800 dark:text-white focus:ring-0 text-lg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
|
||||
</div>
|
||||
<button type="button" @click="formData.metadata.points_full = parseInt(formData.metadata.points_full || 0) + 1" class="shrink-0 w-10 h-full flex items-center justify-center text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 active:scale-90 transition-all">
|
||||
<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-3 animate-luxury-in">
|
||||
<label class="text-xs font-black text-cyan-500 uppercase tracking-widest pl-1">{{ __('Half Points') }}</label>
|
||||
<div class="flex items-center h-14 rounded-2xl border border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50 group focus-within:ring-2 focus-within:ring-cyan-500/20 transition-all overflow-hidden">
|
||||
<button type="button" @click="formData.metadata.points_half = Math.max(0, parseInt(formData.metadata.points_half || 0) - 1)" class="shrink-0 w-10 h-full flex items-center justify-center text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 active:scale-90 transition-all">
|
||||
<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
|
||||
</button>
|
||||
<div class="flex-1 min-w-[60px]">
|
||||
<input type="number" name="metadata[points_half]" x-model="formData.metadata.points_half" class="w-full bg-transparent border-none text-center font-black text-slate-800 dark:text-white focus:ring-0 text-lg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
|
||||
</div>
|
||||
<button type="button" @click="formData.metadata.points_half = parseInt(formData.metadata.points_half || 0) + 1" class="shrink-0 w-10 h-full flex items-center justify-center text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 active:scale-90 transition-all">
|
||||
<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-3 animate-luxury-in">
|
||||
<label class="text-xs font-black text-cyan-500 uppercase tracking-widest pl-1">{{ __('Half Points Amount') }}</label>
|
||||
<div class="flex items-center h-14 rounded-2xl border border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50 group focus-within:ring-2 focus-within:ring-cyan-500/20 transition-all overflow-hidden">
|
||||
<button type="button" @click="formData.metadata.points_half_amount = Math.max(0, parseInt(formData.metadata.points_half_amount || 0) - 1)" class="shrink-0 w-10 h-full flex items-center justify-center text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 active:scale-90 transition-all">
|
||||
<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
|
||||
</button>
|
||||
<div class="flex-1 min-w-[60px]">
|
||||
<input type="number" name="metadata[points_half_amount]" x-model="formData.metadata.points_half_amount" class="w-full bg-transparent border-none text-center font-black text-slate-800 dark:text-white focus:ring-0 text-lg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
|
||||
</div>
|
||||
<button type="button" @click="formData.metadata.points_half_amount = parseInt(formData.metadata.points_half_amount || 0) + 1" class="shrink-0 w-10 h-full flex items-center justify-center text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 active:scale-90 transition-all">
|
||||
<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Bar (Footer) -->
|
||||
<div class="pt-8 flex items-center justify-end gap-4 border-t border-slate-100 dark:border-slate-800 animate-luxury-in" style="animation-delay: 500ms">
|
||||
<a href="{{ route('admin.data-config.products.index') }}" class="btn-luxury-ghost px-8 h-12">{{ __('Cancel') }}</a>
|
||||
<button type="submit" form="product-form" class="btn-luxury-primary px-12 h-14 shadow-xl shadow-cyan-500/20">
|
||||
<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
|
||||
<span>{{ __('Create Product') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@push('styles')
|
||||
<style>
|
||||
/* 移除 Chrome, Safari, Edge, Opera 的原生加減按鈕 */
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
/* 移除 Firefox 的原生加減按鈕 */
|
||||
input[type=number] {
|
||||
-moz-appearance: textfield;
|
||||
appearance: textfield;
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
<script>
|
||||
document.addEventListener('alpine:init', () => {
|
||||
Alpine.data('productForm', (config) => ({
|
||||
categories: config.categories,
|
||||
companies: config.companies,
|
||||
companySettings: config.companySettings,
|
||||
isEditing: config.isEditing,
|
||||
imagePreview: null,
|
||||
formData: {
|
||||
names: { zh_TW: '', en: '', ja: '' },
|
||||
barcode: '',
|
||||
spec: '',
|
||||
category_id: '',
|
||||
manufacturer: '',
|
||||
track_limit: 15,
|
||||
spring_limit: 15,
|
||||
price: 0,
|
||||
cost: 0,
|
||||
member_price: 0,
|
||||
metadata: {
|
||||
material_code: '',
|
||||
points_full: 0,
|
||||
points_half: 0,
|
||||
points_half_amount: 0
|
||||
},
|
||||
is_active: true,
|
||||
company_id: '{{ auth()->user()->company_id ?? "" }}'
|
||||
},
|
||||
|
||||
handleImageUpload(event) {
|
||||
const file = event.target.files[0];
|
||||
if (file) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
this.imagePreview = e.target.result;
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
},
|
||||
|
||||
removeImage() {
|
||||
this.imagePreview = null;
|
||||
this.$refs.imageInput.value = '';
|
||||
},
|
||||
|
||||
updateCompanySettings(companyId) {
|
||||
if (!companyId) {
|
||||
this.companySettings = { enable_material_code: false, enable_points: false };
|
||||
return;
|
||||
}
|
||||
const company = this.companies.find(c => c.id == companyId);
|
||||
if (company) {
|
||||
this.companySettings = {
|
||||
enable_material_code: company.settings?.enable_material_code || false,
|
||||
enable_points: company.settings?.enable_points || false
|
||||
};
|
||||
}
|
||||
}
|
||||
}));
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
432
resources/views/admin/products/edit.blade.php
Normal file
432
resources/views/admin/products/edit.blade.php
Normal file
@@ -0,0 +1,432 @@
|
||||
@extends('layouts.admin')
|
||||
|
||||
@section('content')
|
||||
@php
|
||||
$names = [];
|
||||
foreach(['zh_TW', 'en', 'ja'] as $locale) {
|
||||
$names[$locale] = $product->translations->where('locale', $locale)->first()?->text ?? '';
|
||||
}
|
||||
// If zh_TW translation is empty, fallback to product->name
|
||||
if (empty($names['zh_TW'])) {
|
||||
$names['zh_TW'] = $product->name;
|
||||
}
|
||||
@endphp
|
||||
|
||||
<div class="space-y-6" x-data="productForm({
|
||||
categories: @js($categories),
|
||||
companies: @js($companies),
|
||||
companySettings: @js($companySettings),
|
||||
product: @js($product),
|
||||
names: @js($names),
|
||||
isEditing: true
|
||||
})">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between gap-6">
|
||||
<div class="flex items-center gap-4">
|
||||
<a href="{{ route('admin.data-config.products.index') }}" class="p-2.5 rounded-xl bg-white dark:bg-slate-900 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-colors border border-slate-200/50 dark:border-slate-700/50">
|
||||
<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" /></svg>
|
||||
</a>
|
||||
<div>
|
||||
<h1 class="text-3xl font-black text-slate-800 dark:text-white font-display tracking-tight">{{ __('Edit Product') }}</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button type="submit" form="product-form" class="btn-luxury-primary px-8 py-3 h-12">
|
||||
<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
|
||||
<span>{{ __('Save Changes') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if ($errors->any())
|
||||
<div class="luxury-card p-4 rounded-xl border-rose-500/20 bg-rose-500/5 sm:max-w-xl animate-luxury-in">
|
||||
<div class="flex gap-3">
|
||||
<svg class="size-5 text-rose-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" /></svg>
|
||||
<div class="space-y-1">
|
||||
<p class="text-sm font-black text-rose-500 uppercase tracking-widest">{{ __('Validation Error') }}</p>
|
||||
<ul class="text-xs font-bold text-rose-500/80 list-disc list-inside space-y-0.5">
|
||||
@foreach ($errors->all() as $error)
|
||||
<li>{{ $error }}</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<form id="product-form" action="{{ route('admin.data-config.products.update', $product->id) }}" method="POST" enctype="multipart/form-data" class="flex flex-col lg:flex-row gap-8 items-start">
|
||||
@csrf
|
||||
@method('PUT')
|
||||
|
||||
<!-- Side Column (Status & Company) -->
|
||||
<aside class="w-full lg:w-80 lg:sticky top-24 z-10 space-y-8">
|
||||
<!-- Product Image -->
|
||||
<div class="luxury-card p-8 rounded-[2.5rem] animate-luxury-in relative z-[70]" style="animation-delay: 50ms">
|
||||
<div class="space-y-6">
|
||||
<label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Product Image') }}</label>
|
||||
|
||||
<div class="relative group">
|
||||
<input type="hidden" name="remove_image" :value="formData.remove_image ? '1' : '0'">
|
||||
|
||||
<template x-if="!imagePreview">
|
||||
<div @click="$refs.imageInput.click()" class="aspect-square rounded-3xl border-2 border-dashed border-slate-200 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50 flex flex-col items-center justify-center gap-4 cursor-pointer hover:bg-slate-100 dark:hover:bg-slate-800/80 hover:border-cyan-500/50 transition-all duration-300 group">
|
||||
<div class="p-4 rounded-2xl bg-white dark:bg-slate-800 shadow-sm border border-slate-100 dark:border-slate-700 group-hover:scale-110 group-hover:text-cyan-500 transition-all duration-300">
|
||||
<svg class="size-8 text-slate-400 dark:text-slate-500 group-hover:text-cyan-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" /></svg>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-tighter">{{ __('Click to upload') }}</p>
|
||||
<p class="text-[10px] font-bold text-slate-400 dark:text-slate-500 mt-1">{{ __('PNG, JPG up to 2MB') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template x-if="imagePreview">
|
||||
<div class="relative aspect-square rounded-3xl overflow-hidden border border-slate-200 dark:border-slate-800 shadow-xl group/image">
|
||||
<img :src="imagePreview" class="w-full h-full object-cover">
|
||||
<div class="absolute inset-0 bg-slate-950/40 opacity-0 group-hover/image:opacity-100 transition-opacity duration-300 flex items-center justify-center gap-3">
|
||||
<button type="button" @click="$refs.imageInput.click()" class="p-3 rounded-2xl bg-white text-slate-800 hover:bg-cyan-500 hover:text-white transition-all duration-300 shadow-lg">
|
||||
<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" /></svg>
|
||||
</button>
|
||||
<button type="button" @click="removeImage" class="p-3 rounded-2xl bg-white text-slate-800 hover:bg-rose-500 hover:text-white transition-all duration-300 shadow-lg">
|
||||
<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<input type="file" name="image" x-ref="imageInput" class="hidden" accept="image/*" @change="handleImageUpload">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Status & Company -->
|
||||
<div class="luxury-card p-8 rounded-[2.5rem] animate-luxury-in relative z-[60]" style="animation-delay: 100ms">
|
||||
<div class="space-y-6">
|
||||
<div class="space-y-3">
|
||||
<label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Active Status') }}</label>
|
||||
<div class="flex items-center">
|
||||
<label class="relative inline-flex items-center cursor-pointer">
|
||||
<input type="checkbox" name="is_active" value="1" x-model="formData.is_active" class="sr-only peer">
|
||||
<div class="w-11 h-6 bg-slate-200 peer-focus:outline-none rounded-full peer dark:bg-slate-800 peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-cyan-500 transition-colors"></div>
|
||||
<span class="ml-3 text-sm font-bold text-slate-600 dark:text-slate-300" x-text="formData.is_active ? '{{ __('Active') }}' : '{{ __('Disabled') }}'"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if(auth()->user()->isSystemAdmin())
|
||||
<div class="h-px bg-slate-100 dark:bg-slate-800"></div>
|
||||
<div class="space-y-3">
|
||||
<label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Company') }}</label>
|
||||
<div class="px-4 py-3 rounded-xl bg-slate-50 dark:bg-slate-800 text-sm font-black text-slate-700 dark:text-slate-200 border border-slate-100 dark:border-slate-800">
|
||||
{{ $product->company->name ?? 'N/A' }}
|
||||
<input type="hidden" name="company_id" value="{{ $product->company_id }}">
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<input type="hidden" name="company_id" value="{{ $product->company_id }}">
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<div class="flex-1 w-full space-y-8">
|
||||
<!-- Translation Section -->
|
||||
<div class="luxury-card p-8 rounded-[2.5rem] animate-luxury-in relative z-[40]">
|
||||
<div class="mb-8">
|
||||
<h2 class="text-xl font-black text-slate-800 dark:text-white font-display tracking-tight">{{ __('Product Name (Multilingual)') }}</h2>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center gap-2 h-6">
|
||||
<span class="px-2.5 py-0.5 rounded-md bg-slate-100 dark:bg-slate-800 text-[10px] font-black text-slate-500 uppercase tracking-widest">{{ __('Traditional Chinese') }}</span>
|
||||
<span class="text-rose-500 font-bold">*</span>
|
||||
</div>
|
||||
<input type="text" name="names[zh_TW]" x-model="formData.names.zh_TW" required class="luxury-input !py-3 text-base font-bold shadow-sm">
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center gap-2 h-6">
|
||||
<span class="px-2.5 py-0.5 rounded-md bg-slate-100 dark:bg-slate-800 text-[10px] font-black text-slate-500 uppercase tracking-widest">{{ __('English') }}</span>
|
||||
</div>
|
||||
<input type="text" name="names[en]" x-model="formData.names.en" class="luxury-input !py-3 text-base font-bold shadow-sm">
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center gap-2 h-6">
|
||||
<span class="px-2.5 py-0.5 rounded-md bg-slate-100 dark:bg-slate-800 text-[10px] font-black text-slate-500 uppercase tracking-widest">{{ __('Japanese') }}</span>
|
||||
</div>
|
||||
<input type="text" name="names[ja]" x-model="formData.names.ja" class="luxury-input !py-3 text-base font-bold shadow-sm">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Basic Specs Section -->
|
||||
<div class="luxury-card p-8 rounded-[2.5rem] animate-luxury-in relative z-[30]" style="animation-delay: 100ms">
|
||||
<div class="mb-8">
|
||||
<h2 class="text-xl font-black text-slate-800 dark:text-white font-display tracking-tight">{{ __('Basic Specifications') }}</h2>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div class="grid grid-cols-1 gap-6">
|
||||
<div class="space-y-3">
|
||||
<label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Barcode') }}</label>
|
||||
<input type="text" name="barcode" x-model="formData.barcode" class="luxury-input shadow-sm">
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Manufacturer') }}</label>
|
||||
<input type="text" name="manufacturer" x-model="formData.manufacturer" class="luxury-input shadow-sm">
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 gap-6">
|
||||
<div class="space-y-3">
|
||||
<label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Specification') }}</label>
|
||||
<input type="text" name="spec" x-model="formData.spec" class="luxury-input shadow-sm">
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Category') }}</label>
|
||||
<x-searchable-select id="product-category" name="category_id" x-model="formData.category_id" :placeholder="__('Uncategorized')">
|
||||
<option value="">{{ __('Uncategorized') }}</option>
|
||||
@foreach($categories as $category)
|
||||
@php
|
||||
$catName = $category->name;
|
||||
if ($category->name_dictionary_key) {
|
||||
$catName = __($category->name_dictionary_key);
|
||||
}
|
||||
@endphp
|
||||
<option value="{{ $category->id }}" {{ $product->category_id == $category->id ? 'selected' : '' }} data-title="{{ $catName }}">{{ $catName }}</option>
|
||||
@endforeach
|
||||
</x-searchable-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pricing Information -->
|
||||
<div class="luxury-card p-8 rounded-[2.5rem] animate-luxury-in relative z-[20]" style="animation-delay: 200ms">
|
||||
<div class="mb-8">
|
||||
<h2 class="text-xl font-black text-slate-800 dark:text-white font-display tracking-tight">{{ __('Pricing Information') }}</h2>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-8">
|
||||
<div class="space-y-3">
|
||||
<label class="text-xs font-black text-emerald-500 uppercase tracking-widest pl-1">{{ __('Retail Price') }} <span class="text-rose-500">*</span></label>
|
||||
<div class="flex items-center h-14 rounded-2xl border border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50 group focus-within:ring-2 focus-within:ring-emerald-500/20 transition-all overflow-hidden">
|
||||
<button type="button" @click="formData.price = Math.max(0, parseInt(formData.price || 0) - 1)" class="shrink-0 w-12 h-full flex items-center justify-center text-slate-400 hover:text-emerald-500 hover:bg-emerald-500/5 active:scale-90 transition-all">
|
||||
<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
|
||||
</button>
|
||||
<div class="flex-1 min-w-[72px]">
|
||||
<input type="number" name="price" x-model="formData.price" required class="w-full bg-transparent border-none text-center font-black text-slate-800 dark:text-white focus:ring-0 text-lg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
|
||||
</div>
|
||||
<button type="button" @click="formData.price = parseInt(formData.price || 0) + 1" class="shrink-0 w-12 h-full flex items-center justify-center text-slate-400 hover:text-emerald-500 hover:bg-emerald-500/5 active:scale-90 transition-all">
|
||||
<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<label class="text-xs font-black text-cyan-500 dark:text-cyan-400 uppercase tracking-widest pl-1">{{ __('Member Price') }} <span class="text-rose-500">*</span></label>
|
||||
<div class="flex items-center h-14 rounded-2xl border border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50 group focus-within:ring-2 focus-within:ring-cyan-500/20 transition-all overflow-hidden">
|
||||
<button type="button" @click="formData.member_price = Math.max(0, parseInt(formData.member_price || 0) - 1)" class="shrink-0 w-12 h-full flex items-center justify-center text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 active:scale-90 transition-all">
|
||||
<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
|
||||
</button>
|
||||
<div class="flex-1 min-w-[72px]">
|
||||
<input type="number" name="member_price" x-model="formData.member_price" required class="w-full bg-transparent border-none text-center font-black text-slate-800 dark:text-white focus:ring-0 text-lg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
|
||||
</div>
|
||||
<button type="button" @click="formData.member_price = parseInt(formData.member_price || 0) + 1" class="shrink-0 w-12 h-full flex items-center justify-center text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 active:scale-90 transition-all">
|
||||
<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<label class="text-xs font-black text-slate-400 uppercase tracking-widest pl-1">{{ __('Cost') }} <span class="text-rose-500">*</span></label>
|
||||
<div class="flex items-center h-14 rounded-2xl border border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50 group focus-within:ring-2 focus-within:ring-slate-500/20 transition-all overflow-hidden">
|
||||
<button type="button" @click="formData.cost = Math.max(0, parseInt(formData.cost || 0) - 1)" class="shrink-0 w-12 h-full flex items-center justify-center text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 hover:bg-slate-500/5 active:scale-90 transition-all">
|
||||
<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
|
||||
</button>
|
||||
<div class="flex-1 min-w-[72px]">
|
||||
<input type="number" name="cost" x-model="formData.cost" required class="w-full bg-transparent border-none text-center font-black text-slate-800 dark:text-white focus:ring-0 text-lg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
|
||||
</div>
|
||||
<button type="button" @click="formData.cost = parseInt(formData.cost || 0) + 1" class="shrink-0 w-12 h-full flex items-center justify-center text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 hover:bg-slate-500/5 active:scale-90 transition-all">
|
||||
<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Channel Limits -->
|
||||
<div class="luxury-card p-8 rounded-[2.5rem] animate-luxury-in relative z-[10]" style="animation-delay: 300ms">
|
||||
<div class="mb-8">
|
||||
<h2 class="text-xl font-black text-slate-800 dark:text-white font-display tracking-tight">{{ __('Channel Limits') }}</h2>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-8">
|
||||
<div class="space-y-4">
|
||||
<label class="text-xs font-black text-indigo-500 uppercase tracking-widest pl-1">{{ __('Track Channel Limit') }} <span class="text-rose-500">*</span></label>
|
||||
<div class="flex items-center h-14 rounded-2xl border border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50 group focus-within:ring-2 focus-within:ring-indigo-500/20 transition-all overflow-hidden">
|
||||
<button type="button" @click="formData.track_limit = Math.max(0, parseInt(formData.track_limit || 0) - 1)" class="shrink-0 w-12 h-full flex items-center justify-center text-slate-400 hover:text-indigo-500 hover:bg-indigo-500/5 active:scale-90 transition-all">
|
||||
<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
|
||||
</button>
|
||||
<div class="flex-1 min-w-[72px]">
|
||||
<input type="number" name="track_limit" x-model="formData.track_limit" required class="w-full bg-transparent border-none text-center font-black text-slate-800 dark:text-white focus:ring-0 text-lg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
|
||||
</div>
|
||||
<button type="button" @click="formData.track_limit = parseInt(formData.track_limit || 0) + 1" class="shrink-0 w-12 h-full flex items-center justify-center text-slate-400 hover:text-indigo-500 hover:bg-indigo-500/5 active:scale-90 transition-all">
|
||||
<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<label class="text-xs font-black text-amber-500 uppercase tracking-widest pl-1">{{ __('Spring Channel Limit') }} <span class="text-rose-500">*</span></label>
|
||||
<div class="flex items-center h-14 rounded-2xl border border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50 group focus-within:ring-2 focus-within:ring-amber-500/20 transition-all overflow-hidden">
|
||||
<button type="button" @click="formData.spring_limit = Math.max(0, parseInt(formData.spring_limit || 0) - 1)" class="shrink-0 w-12 h-full flex items-center justify-center text-slate-400 hover:text-amber-500 hover:bg-amber-500/5 active:scale-90 transition-all">
|
||||
<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
|
||||
</button>
|
||||
<div class="flex-1 min-w-[72px]">
|
||||
<input type="number" name="spring_limit" x-model="formData.spring_limit" required class="w-full bg-transparent border-none text-center font-black text-slate-800 dark:text-white focus:ring-0 text-lg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
|
||||
</div>
|
||||
<button type="button" @click="formData.spring_limit = parseInt(formData.spring_limit || 0) + 1" class="shrink-0 w-12 h-full flex items-center justify-center text-slate-400 hover:text-amber-500 hover:bg-amber-500/5 active:scale-90 transition-all">
|
||||
<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Advanced Features -->
|
||||
<div class="luxury-card p-8 rounded-[2.5rem] animate-luxury-in overflow-hidden"
|
||||
x-show="companySettings.enable_points || companySettings.enable_material_code"
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0 max-h-0"
|
||||
x-transition:enter-end="opacity-100 max-h-screen"
|
||||
style="animation-delay: 400ms">
|
||||
<div class="mb-8">
|
||||
<h2 class="text-xl font-black text-slate-800 dark:text-white font-display tracking-tight">{{ __('Feature Toggles') }}</h2>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<template x-if="companySettings.enable_material_code">
|
||||
<div class="space-y-3 animate-luxury-in">
|
||||
<label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Material Code') }}</label>
|
||||
<input type="text" name="metadata[material_code]" x-model="formData.metadata.material_code" class="luxury-input shadow-sm">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template x-if="companySettings.enable_points">
|
||||
<div class="contents">
|
||||
<div class="space-y-3 animate-luxury-in">
|
||||
<label class="text-xs font-black text-cyan-500 uppercase tracking-widest pl-1">{{ __('Full Points') }}</label>
|
||||
<div class="flex items-center h-14 rounded-2xl border border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50 group focus-within:ring-2 focus-within:ring-cyan-500/20 transition-all overflow-hidden">
|
||||
<button type="button" @click="formData.metadata.points_full = Math.max(0, parseInt(formData.metadata.points_full || 0) - 1)" class="shrink-0 w-10 h-full flex items-center justify-center text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 active:scale-90 transition-all">
|
||||
<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
|
||||
</button>
|
||||
<div class="flex-1 min-w-[60px]">
|
||||
<input type="number" name="metadata[points_full]" x-model="formData.metadata.points_full" class="w-full bg-transparent border-none text-center font-black text-slate-800 dark:text-white focus:ring-0 text-lg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
|
||||
</div>
|
||||
<button type="button" @click="formData.metadata.points_full = parseInt(formData.metadata.points_full || 0) + 1" class="shrink-0 w-10 h-full flex items-center justify-center text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 active:scale-90 transition-all">
|
||||
<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-3 animate-luxury-in">
|
||||
<label class="text-xs font-black text-cyan-500 uppercase tracking-widest pl-1">{{ __('Half Points') }}</label>
|
||||
<div class="flex items-center h-14 rounded-2xl border border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50 group focus-within:ring-2 focus-within:ring-cyan-500/20 transition-all overflow-hidden">
|
||||
<button type="button" @click="formData.metadata.points_half = Math.max(0, parseInt(formData.metadata.points_half || 0) - 1)" class="shrink-0 w-10 h-full flex items-center justify-center text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 active:scale-90 transition-all">
|
||||
<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
|
||||
</button>
|
||||
<div class="flex-1 min-w-[60px]">
|
||||
<input type="number" name="metadata[points_half]" x-model="formData.metadata.points_half" class="w-full bg-transparent border-none text-center font-black text-slate-800 dark:text-white focus:ring-0 text-lg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
|
||||
</div>
|
||||
<button type="button" @click="formData.metadata.points_half = parseInt(formData.metadata.points_half || 0) + 1" class="shrink-0 w-10 h-full flex items-center justify-center text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 active:scale-90 transition-all">
|
||||
<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-3 animate-luxury-in">
|
||||
<label class="text-xs font-black text-cyan-500 uppercase tracking-widest pl-1">{{ __('Half Points Amount') }}</label>
|
||||
<div class="flex items-center h-14 rounded-2xl border border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50 group focus-within:ring-2 focus-within:ring-cyan-500/20 transition-all overflow-hidden">
|
||||
<button type="button" @click="formData.metadata.points_half_amount = Math.max(0, parseInt(formData.metadata.points_half_amount || 0) - 1)" class="shrink-0 w-10 h-full flex items-center justify-center text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 active:scale-90 transition-all">
|
||||
<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
|
||||
</button>
|
||||
<div class="flex-1 min-w-[60px]">
|
||||
<input type="number" name="metadata[points_half_amount]" x-model="formData.metadata.points_half_amount" class="w-full bg-transparent border-none text-center font-black text-slate-800 dark:text-white focus:ring-0 text-lg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
|
||||
</div>
|
||||
<button type="button" @click="formData.metadata.points_half_amount = parseInt(formData.metadata.points_half_amount || 0) + 1" class="shrink-0 w-10 h-full flex items-center justify-center text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 active:scale-90 transition-all">
|
||||
<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Bar (Footer) -->
|
||||
<div class="pt-8 flex items-center justify-end gap-4 border-t border-slate-100 dark:border-slate-800 animate-luxury-in" style="animation-delay: 500ms">
|
||||
<a href="{{ route('admin.data-config.products.index') }}" class="btn-luxury-ghost px-8 h-12">{{ __('Cancel') }}</a>
|
||||
<button type="submit" form="product-form" class="btn-luxury-primary px-12 h-14 shadow-xl shadow-cyan-500/20">
|
||||
<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
|
||||
<span>{{ __('Save Changes') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@push('styles')
|
||||
<style>
|
||||
/* 移除 Chrome, Safari, Edge, Opera 的原生加減按鈕 */
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
/* 移除 Firefox 的原生加減按鈕 */
|
||||
input[type=number] {
|
||||
-moz-appearance: textfield;
|
||||
appearance: textfield;
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
<script>
|
||||
document.addEventListener('alpine:init', () => {
|
||||
Alpine.data('productForm', (config) => ({
|
||||
categories: config.categories,
|
||||
companies: config.companies,
|
||||
companySettings: config.companySettings,
|
||||
isEditing: config.isEditing,
|
||||
imagePreview: config.product.image_url || null,
|
||||
formData: {
|
||||
...config.product,
|
||||
names: config.names,
|
||||
remove_image: false,
|
||||
metadata: {
|
||||
material_code: config.product.metadata?.material_code || '',
|
||||
points_full: config.product.metadata?.points_full || 0,
|
||||
points_half: config.product.metadata?.points_half || 0,
|
||||
points_half_amount: config.product.metadata?.points_half_amount || 0
|
||||
},
|
||||
is_active: config.product.is_active ? true : false
|
||||
},
|
||||
|
||||
handleImageUpload(event) {
|
||||
const file = event.target.files[0];
|
||||
if (file) {
|
||||
this.formData.remove_image = false;
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
this.imagePreview = e.target.result;
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
},
|
||||
|
||||
removeImage() {
|
||||
this.imagePreview = null;
|
||||
this.formData.remove_image = true;
|
||||
this.$refs.imageInput.value = '';
|
||||
}
|
||||
}));
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
@@ -32,12 +32,12 @@ $roleSelectConfig = [
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<button @click="openCreateModal()" class="btn-luxury-primary">
|
||||
<a href="{{ route($baseRoute . '.create') }}" class="btn-luxury-primary">
|
||||
<svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
||||
</svg>
|
||||
<span>{{ __('Add Product') }}</span>
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -72,7 +72,7 @@ $roleSelectConfig = [
|
||||
<th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-center">{{ __('Company') }}</th>
|
||||
@endif
|
||||
<th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-center">{{ __('Price / Member') }}</th>
|
||||
<th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-center">{{ __('Limits (Track/Spring)') }}</th>
|
||||
<th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-center">{{ __('Channel Limits (Track/Spring)') }}</th>
|
||||
<th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-center">{{ __('Status') }}</th>
|
||||
<th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-right">{{ __('Actions') }}</th>
|
||||
</tr>
|
||||
@@ -102,7 +102,15 @@ $roleSelectConfig = [
|
||||
}
|
||||
@endphp
|
||||
<span class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest bg-slate-100 dark:bg-slate-800 px-1.5 py-0.5 rounded transition-colors group-hover:text-slate-600 dark:group-hover:text-slate-300">{{ $catName }}</span>
|
||||
<span class="text-[10px] font-mono font-bold text-cyan-500 tracking-tighter transition-colors group-hover:text-cyan-600 dark:group-hover:text-cyan-400">{{ $product->barcode }}</span>
|
||||
@if($companySettings['enable_material_code'] ?? false)
|
||||
<div class="flex items-center gap-1.5 bg-slate-100/50 dark:bg-slate-800/50 px-2 py-0.5 rounded-md border border-slate-100 dark:border-slate-800">
|
||||
<span class="text-[10px] font-mono font-bold text-cyan-500 tracking-tighter">{{ $product->barcode }}</span>
|
||||
<span class="h-1 w-1 rounded-full bg-slate-300 dark:bg-slate-700"></span>
|
||||
<span class="text-[10px] font-mono font-bold text-emerald-500 tracking-tighter">{{ $product->metadata['material_code'] ?? '-' }}</span>
|
||||
</div>
|
||||
@else
|
||||
<span class="text-[10px] font-mono font-bold text-cyan-500 tracking-tighter transition-colors group-hover:text-cyan-600 dark:group-hover:text-cyan-400">{{ $product->barcode }}</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -131,12 +139,15 @@ $roleSelectConfig = [
|
||||
</td>
|
||||
<td class="px-6 py-6 text-right">
|
||||
<div class="flex justify-end items-center gap-2">
|
||||
<button @click='openEditModal(@js($product))' class="p-2.5 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 transition-all border border-transparent hover:border-cyan-500/20" title="{{ __('Edit') }}">
|
||||
<svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" /></svg>
|
||||
</button>
|
||||
<button type="button" @click="confirmDelete('{{ route($baseRoute . '.destroy', $product->id) }}')" class="p-2.5 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-rose-500 hover:bg-rose-500/5 transition-all border border-transparent hover:border-rose-500/20" title="{{ __('Delete Product') }}">
|
||||
<button type="button" @click="confirmDelete('{{ route($baseRoute . '.destroy', $product->id) }}')" class="p-2.5 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-rose-500 hover:bg-rose-500/5 transition-all border border-transparent hover:border-rose-500/20" title="{{ __('Delete') }}">
|
||||
<svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" /></svg>
|
||||
</button>
|
||||
<a href="{{ route($baseRoute . '.edit', $product->id) }}" class="p-2.5 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 transition-all border border-transparent hover:border-cyan-500/20" title="{{ __('Edit') }}">
|
||||
<svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" /></svg>
|
||||
</a>
|
||||
<button type="button" @click="viewProductDetail(@js($product))" class="p-2.5 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-indigo-500 hover:bg-indigo-500/5 transition-all border border-transparent hover:border-indigo-500/20" title="{{ __('View Details') }}">
|
||||
<svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.644C3.67 8.5 7.652 5 12 5c4.418 0 8.401 3.5 10.014 6.722a1.012 1.012 0 010 .644C20.33 15.5 16.348 19 12 19c-4.412 0-8.401-3.5-10.014-6.722z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -155,241 +166,179 @@ $roleSelectConfig = [
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- User Modal (Unified for Create/Edit) -->
|
||||
<div x-show="showModal" class="fixed inset-0 z-[100] overflow-y-auto" x-cloak>
|
||||
<div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
|
||||
<div x-show="showModal" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0 transition-opacity bg-slate-900/60 backdrop-blur-sm" @click="showModal = false"></div>
|
||||
<span class="hidden sm:inline-block sm:align-middle sm:h-screen">​</span>
|
||||
<div x-show="showModal" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" class="inline-block px-8 py-10 text-left align-bottom transition-all transform luxury-card rounded-[2.5rem] dark:bg-slate-900 border-slate-200/50 dark:border-slate-700/50 shadow-2xl sm:my-8 sm:align-middle sm:max-w-3xl sm:w-full overflow-visible">
|
||||
|
||||
<div class="flex justify-between items-center mb-10">
|
||||
<div>
|
||||
<h2 class="text-xl font-black text-slate-800 dark:text-white font-display tracking-tight flex items-center gap-2">
|
||||
<span x-text="editing ? '{{ __('Edit Product') }}' : '{{ __('Create Product') }}'"></span>
|
||||
</h2>
|
||||
</div>
|
||||
<button @click="showModal = false" class="p-2 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-colors">
|
||||
<svg class="size-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form :action="formAction" method="POST" class="space-y-8">
|
||||
@csrf
|
||||
<template x-if="editing"><input type="hidden" name="_method" value="PUT"></template>
|
||||
|
||||
<!-- Language Tabs Custom Implementation -->
|
||||
<div class="space-y-6">
|
||||
<div class="space-y-4">
|
||||
<label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Product Name (Multilingual)') }} <span class="text-rose-500">*</span></label>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="px-3 py-1 rounded-md bg-slate-100 dark:bg-slate-800 text-sm font-black text-slate-500">{{ __('Traditional Chinese') }}</span>
|
||||
</div>
|
||||
<input type="text" name="names[zh_TW]" x-model="currentProduct.names.zh_TW" required class="luxury-input !py-3">
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="px-3 py-1 rounded-md bg-slate-100 dark:bg-slate-800 text-sm font-black text-slate-500">{{ __('English') }}</span>
|
||||
</div>
|
||||
<input type="text" name="names[en]" x-model="currentProduct.names.en" class="luxury-input !py-3">
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="px-3 py-1 rounded-md bg-slate-100 dark:bg-slate-800 text-sm font-black text-slate-500">{{ __('Japanese') }}</span>
|
||||
</div>
|
||||
<input type="text" name="names[ja]" x-model="currentProduct.names.ja" class="luxury-input !py-3">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Barcode') }}</label>
|
||||
<input type="text" name="barcode" x-model="currentProduct.barcode" class="luxury-input">
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Specification') }}</label>
|
||||
<input type="text" name="spec" x-model="currentProduct.spec" class="luxury-input">
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Category') }}</label>
|
||||
<x-searchable-select id="modal-product-category" name="category_id" x-model="currentProduct.category_id" :placeholder="__('Select Category')">
|
||||
<option value="">{{ __('Uncategorized') }}</option>
|
||||
@foreach($categories as $category)
|
||||
@php
|
||||
$catName = $category->name;
|
||||
if ($category->name_dictionary_key) {
|
||||
$catName = __($category->name_dictionary_key);
|
||||
if ($catName === $category->name_dictionary_key) {
|
||||
$catName = $category->name;
|
||||
}
|
||||
}
|
||||
@endphp
|
||||
<option value="{{ $category->id }}" data-title="{{ $catName }}">{{ $catName }}</option>
|
||||
@endforeach
|
||||
</x-searchable-select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Retail Price') }} <span class="text-rose-500">*</span></label>
|
||||
<div class="flex items-center gap-2">
|
||||
<button type="button" @click="currentProduct.price = Math.max(0, parseInt(currentProduct.price || 0) - 1)" class="size-10 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
|
||||
<svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
|
||||
</button>
|
||||
<div class="relative flex-1">
|
||||
<input type="number" name="price" x-model="currentProduct.price" required class="luxury-input text-center [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
|
||||
</div>
|
||||
<button type="button" @click="currentProduct.price = parseInt(currentProduct.price || 0) + 1" class="size-10 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
|
||||
<svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Member Price') }} <span class="text-rose-500">*</span></label>
|
||||
<div class="flex items-center gap-2">
|
||||
<button type="button" @click="currentProduct.member_price = Math.max(0, parseInt(currentProduct.member_price || 0) - 1)" class="size-10 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
|
||||
<svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
|
||||
</button>
|
||||
<div class="relative flex-1">
|
||||
<input type="number" name="member_price" x-model="currentProduct.member_price" required class="luxury-input text-center [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
|
||||
</div>
|
||||
<button type="button" @click="currentProduct.member_price = parseInt(currentProduct.member_price || 0) + 1" class="size-10 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
|
||||
<svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Cost') }} <span class="text-rose-500">*</span></label>
|
||||
<div class="flex items-center gap-2">
|
||||
<button type="button" @click="currentProduct.cost = Math.max(0, parseInt(currentProduct.cost || 0) - 1)" class="size-10 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
|
||||
<svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
|
||||
</button>
|
||||
<div class="relative flex-1">
|
||||
<input type="number" name="cost" x-model="currentProduct.cost" required class="luxury-input text-center [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
|
||||
</div>
|
||||
<button type="button" @click="currentProduct.cost = parseInt(currentProduct.cost || 0) + 1" class="size-10 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
|
||||
<svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Inventory Limits -->
|
||||
<div class="p-6 rounded-3xl bg-slate-50 dark:bg-slate-800/50 border border-slate-100 dark:border-slate-800">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black text-indigo-500 uppercase tracking-widest pl-1">{{ __('Track Channel Limit') }} <span class="text-rose-500">*</span></label>
|
||||
<div class="flex items-center gap-2">
|
||||
<button type="button" @click="currentProduct.track_limit = Math.max(0, parseInt(currentProduct.track_limit || 0) - 1)" class="size-10 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
|
||||
<svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
|
||||
</button>
|
||||
<input type="number" name="track_limit" x-model="currentProduct.track_limit" required class="luxury-input border-indigo-500/20 focus:border-indigo-500 focus:ring-indigo-500 text-center [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
|
||||
<button type="button" @click="currentProduct.track_limit = parseInt(currentProduct.track_limit || 0) + 1" class="size-10 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
|
||||
<svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black text-amber-500 uppercase tracking-widest pl-1">{{ __('Spring Channel Limit') }} <span class="text-rose-500">*</span></label>
|
||||
<div class="flex items-center gap-2">
|
||||
<button type="button" @click="currentProduct.spring_limit = Math.max(0, parseInt(currentProduct.spring_limit || 0) - 1)" class="size-10 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
|
||||
<svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
|
||||
</button>
|
||||
<input type="number" name="spring_limit" x-model="currentProduct.spring_limit" required class="luxury-input border-amber-500/20 focus:border-amber-500 focus:ring-amber-500 text-center [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
|
||||
<button type="button" @click="currentProduct.spring_limit = parseInt(currentProduct.spring_limit || 0) + 1" class="size-10 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
|
||||
<svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Feature Toggles Section -->
|
||||
<template x-if="companySettings.enable_points || companySettings.enable_material_code">
|
||||
<div class="space-y-6">
|
||||
<div class="h-px bg-slate-100 dark:bg-slate-800"></div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<template x-if="companySettings.enable_material_code">
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Material Code') }}</label>
|
||||
<input type="text" name="metadata[material_code]" x-model="currentProduct.metadata.material_code" class="luxury-input">
|
||||
</div>
|
||||
</template>
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Active Status') }}</label>
|
||||
<div class="flex items-center mt-2">
|
||||
<label class="relative inline-flex items-center cursor-pointer">
|
||||
<input type="checkbox" name="is_active" value="1" x-model="currentProduct.is_active" class="sr-only peer">
|
||||
<div class="w-11 h-6 bg-slate-200 peer-focus:outline-none rounded-full peer dark:bg-slate-800 peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-cyan-500"></div>
|
||||
<span class="ml-3 text-sm font-bold text-slate-500 dark:text-slate-400" x-text="currentProduct.is_active ? '{{ __('Active') }}' : '{{ __('Disabled') }}'"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template x-if="companySettings.enable_points">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 animate-luxury-in">
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Full Points') }}</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<button type="button" @click="currentProduct.metadata.points_full = Math.max(0, parseInt(currentProduct.metadata.points_full || 0) - 1)" class="size-10 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
|
||||
<svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
|
||||
</button>
|
||||
<input type="number" name="metadata[points_full]" x-model="currentProduct.metadata.points_full" class="luxury-input text-center [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
|
||||
<button type="button" @click="currentProduct.metadata.points_full = parseInt(currentProduct.metadata.points_full || 0) + 1" class="size-10 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
|
||||
<svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Half Points') }}</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<button type="button" @click="currentProduct.metadata.points_half = Math.max(0, parseInt(currentProduct.metadata.points_half || 0) - 1)" class="size-10 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
|
||||
<svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
|
||||
</button>
|
||||
<input type="number" name="metadata[points_half]" x-model="currentProduct.metadata.points_half" class="luxury-input text-center [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
|
||||
<button type="button" @click="currentProduct.metadata.points_half = parseInt(currentProduct.metadata.points_half || 0) + 1" class="size-10 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
|
||||
<svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Half Points Amount') }}</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<button type="button" @click="currentProduct.metadata.points_half_amount = Math.max(0, parseInt(currentProduct.metadata.points_half_amount || 0) - 1)" class="size-10 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
|
||||
<svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
|
||||
</button>
|
||||
<input type="number" name="metadata[points_half_amount]" x-model="currentProduct.metadata.points_half_amount" class="luxury-input text-center [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
|
||||
<button type="button" @click="currentProduct.metadata.points_half_amount = parseInt(currentProduct.metadata.points_half_amount || 0) + 1" class="size-10 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
|
||||
<svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="flex justify-end gap-x-4 pt-10">
|
||||
<button type="button" @click="showModal = false" class="btn-luxury-ghost px-8">{{ __('Cancel') }}</button>
|
||||
<button type="submit" class="btn-luxury-primary px-16">
|
||||
<span x-text="editing ? '{{ __('Update Product') }}' : '{{ __('Save Product') }}'"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete Confirm Modal (Reuse Global Component if available, or inline) -->
|
||||
<!-- Delete Confirm Modal -->
|
||||
<x-delete-confirm-modal :message="__('Are you sure you want to delete this product? All related historical translation data will also be removed.')" />
|
||||
|
||||
<form x-ref="deleteForm" :action="deleteFormAction" method="POST" class="hidden">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
</form>
|
||||
|
||||
<!-- Product Detail Slide-over -->
|
||||
<div x-show="isDetailOpen"
|
||||
class="fixed inset-0 z-[100] overflow-hidden"
|
||||
x-cloak
|
||||
role="dialog" aria-modal="true">
|
||||
|
||||
<!-- Backdrop -->
|
||||
<div x-show="isDetailOpen"
|
||||
x-transition:enter="ease-in-out duration-500"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="ease-in-out duration-500"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
class="absolute inset-0 bg-slate-900/60 backdrop-blur-sm transition-opacity"
|
||||
@click="isDetailOpen = false"></div>
|
||||
|
||||
<div class="fixed inset-y-0 right-0 max-w-full flex">
|
||||
<!-- Panel -->
|
||||
<div x-show="isDetailOpen"
|
||||
x-transition:enter="transform transition ease-in-out duration-500 sm:duration-700"
|
||||
x-transition:enter-start="translate-x-full"
|
||||
x-transition:enter-end="translate-x-0"
|
||||
x-transition:leave="transform transition ease-in-out duration-500 sm:duration-700"
|
||||
x-transition:leave-start="translate-x-0"
|
||||
x-transition:leave-end="translate-x-full"
|
||||
class="relative w-screen max-w-2xl"
|
||||
@click.stop>
|
||||
|
||||
<div class="h-full flex flex-col bg-white dark:bg-slate-900 shadow-2xl border-l border-slate-200 dark:border-white/10 overflow-y-auto luxury-scrollbar">
|
||||
<!-- Close Button Overlay -->
|
||||
<div class="absolute top-6 right-6 z-10">
|
||||
<button @click="isDetailOpen = false" class="p-2 rounded-full bg-slate-100/80 dark:bg-slate-800/80 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 backdrop-blur-md transition-all hover:rotate-90">
|
||||
<svg class="size-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="p-8 md:p-12">
|
||||
<!-- Header with Status -->
|
||||
<div class="flex flex-col md:flex-row gap-10 mb-12 animate-luxury-in">
|
||||
<!-- Image Section -->
|
||||
<div class="w-full md:w-48 shrink-0">
|
||||
<div class="aspect-square rounded-[2rem] bg-slate-50 dark:bg-slate-800 flex items-center justify-center overflow-hidden border border-slate-100 dark:border-white/5 shadow-inner group">
|
||||
<template x-if="selectedProduct?.image_url">
|
||||
<img :src="selectedProduct.image_url" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
|
||||
</template>
|
||||
<template x-if="!selectedProduct?.image_url">
|
||||
<svg class="size-16 text-slate-200 dark:text-slate-700" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" /></svg>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Identity Section -->
|
||||
<div class="flex-1 flex flex-col justify-center">
|
||||
<div class="inline-flex items-center gap-2 mb-4">
|
||||
<span class="px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest border transition-all duration-300"
|
||||
:class="selectedProduct?.is_active ? 'bg-emerald-500/10 text-emerald-600 border-emerald-500/20 shadow-sm shadow-emerald-500/10' : 'bg-slate-500/10 text-slate-500 border-slate-500/20'">
|
||||
<span x-text="selectedProduct?.is_active ? '{{ __('Active') }}' : '{{ __('Disabled') }}'"></span>
|
||||
</span>
|
||||
<span class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded-lg border border-transparent dark:border-white/5" x-text="getCategoryName(selectedProduct?.category_id)"></span>
|
||||
</div>
|
||||
<h2 class="text-4xl font-black text-slate-800 dark:text-white leading-tight font-display tracking-tight" x-text="selectedProduct?.name"></h2>
|
||||
<p class="text-sm font-mono font-bold text-cyan-500 mt-2 tracking-widest uppercase" x-text="selectedProduct?.barcode"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Info Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-10 mb-12">
|
||||
<!-- Pricing Card -->
|
||||
<div class="luxury-card p-6 rounded-[1.5rem] border border-slate-100 dark:border-white/5 space-y-6">
|
||||
<h3 class="text-xs font-black text-slate-400 uppercase tracking-[.2em] flex items-center gap-2">
|
||||
<svg class="size-4 text-cyan-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
||||
{{ __('Pricing Details') }}
|
||||
</h3>
|
||||
<div class="grid grid-cols-2 gap-6">
|
||||
<div class="space-y-1">
|
||||
<p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('List Price') }}</p>
|
||||
<p class="text-2xl font-black text-slate-800 dark:text-white leading-none">$<span x-text="formatNumber(selectedProduct?.price)"></span></p>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('Member Price') }}</p>
|
||||
<p class="text-2xl font-black text-emerald-500 leading-none">$<span x-text="formatNumber(selectedProduct?.member_price)"></span></p>
|
||||
</div>
|
||||
<div class="space-y-1 col-span-2 pt-4 border-t border-slate-50 dark:border-white/5">
|
||||
<p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('Cost Basis') }}</p>
|
||||
<p class="text-lg font-bold text-slate-500 leading-none">$<span x-text="formatNumber(selectedProduct?.cost)"></span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Specs Card -->
|
||||
<div class="luxury-card p-6 rounded-[1.5rem] border border-slate-100 dark:border-white/5 space-y-6">
|
||||
<h3 class="text-xs font-black text-slate-400 uppercase tracking-[.2em] flex items-center gap-2">
|
||||
<svg class="size-4 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /></svg>
|
||||
{{ __('Channel Limits') }}
|
||||
</h3>
|
||||
<div class="space-y-8">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="space-y-1">
|
||||
<p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('Track Limit') }}</p>
|
||||
<p class="text-3xl font-black text-indigo-500 tracking-tighter" x-text="selectedProduct?.track_limit"></p>
|
||||
</div>
|
||||
<div class="h-10 w-px bg-slate-100 dark:bg-white/10"></div>
|
||||
<div class="space-y-1 text-right">
|
||||
<p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('Spring Limit') }}</p>
|
||||
<p class="text-3xl font-black text-amber-500 tracking-tighter" x-text="selectedProduct?.spring_limit"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative h-2 bg-slate-100 dark:bg-slate-800 rounded-full overflow-hidden">
|
||||
<div class="absolute inset-y-0 left-0 bg-indigo-500 rounded-full transition-all duration-1000" :style="`width: ${Math.min(100, (selectedProduct?.track_limit / 50) * 100)}%`" x-show="isDetailOpen"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Extended Features Section -->
|
||||
<div class="luxury-card p-8 rounded-[2rem] bg-slate-50/50 dark:bg-slate-800/30 border border-slate-100 dark:border-white/5 mb-12">
|
||||
<h3 class="text-xs font-black text-slate-800 dark:text-white uppercase tracking-[0.25em] mb-8 flex items-center gap-3">
|
||||
<span class="size-2 rounded-full bg-cyan-500 animate-pulse"></span>
|
||||
{{ __('Feature Configurations') }}
|
||||
</h3>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
|
||||
<div class="space-y-1.5 p-4 rounded-2xl bg-white dark:bg-slate-900 border border-slate-50 dark:border-white/5">
|
||||
<p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('Material Code') }}</p>
|
||||
<p class="text-sm font-black text-slate-700 dark:text-slate-200 font-mono" x-text="selectedProduct?.metadata?.material_code || '-'"></p>
|
||||
</div>
|
||||
<div class="space-y-1.5 p-4 rounded-2xl bg-white dark:bg-slate-900 border border-slate-50 dark:border-white/5">
|
||||
<p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('Full Points') }}</p>
|
||||
<p class="text-sm font-black text-cyan-600 dark:text-cyan-400 font-mono" x-text="selectedProduct?.metadata?.points_full || '0'"></p>
|
||||
</div>
|
||||
<div class="space-y-1.5 p-4 rounded-2xl bg-white dark:bg-slate-900 border border-slate-50 dark:border-white/5">
|
||||
<p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('Half Points') }}</p>
|
||||
<p class="text-sm font-black text-indigo-600 dark:text-indigo-400 font-mono" x-text="selectedProduct?.metadata?.points_half || '0'"></p>
|
||||
</div>
|
||||
<div class="space-y-1.5 p-4 rounded-2xl bg-white dark:bg-slate-900 border border-slate-50 dark:border-white/5">
|
||||
<p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('Half Amount') }}</p>
|
||||
<p class="text-sm font-black text-emerald-600 dark:text-emerald-400 font-mono" x-text="selectedProduct?.metadata?.points_half_amount || '0'"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer Timestamps -->
|
||||
<div class="flex flex-col md:flex-row items-center justify-between gap-4 pt-10 border-t border-slate-100 dark:border-white/5 text-[10px] font-bold text-slate-400 uppercase tracking-[.25em]">
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="flex flex-col gap-1">
|
||||
<span>{{ __('Created At') }}</span>
|
||||
<span class="text-slate-500 dark:text-slate-300 font-mono" x-text="formatDate(selectedProduct?.created_at)"></span>
|
||||
</div>
|
||||
<div class="w-px h-8 bg-slate-100 dark:bg-white/10 hidden md:block"></div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<span>{{ __('Updated At') }}</span>
|
||||
<span class="text-slate-500 dark:text-slate-300 font-mono" x-text="formatDate(selectedProduct?.updated_at)"></span>
|
||||
</div>
|
||||
</div>
|
||||
<button @click="isDetailOpen = false" class="btn-luxury-secondary px-8 py-3">
|
||||
{{ __('Close Panel') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@@ -397,122 +346,40 @@ $roleSelectConfig = [
|
||||
<script>
|
||||
document.addEventListener('alpine:init', () => {
|
||||
Alpine.data('productManager', () => ({
|
||||
showModal: false,
|
||||
editing: false,
|
||||
isDeleteConfirmOpen: false,
|
||||
isDetailOpen: false,
|
||||
deleteFormAction: '',
|
||||
selectedProduct: null,
|
||||
categories: [],
|
||||
companySettings: {},
|
||||
urls: {
|
||||
store: '',
|
||||
index: ''
|
||||
},
|
||||
|
||||
|
||||
init() {
|
||||
this.categories = JSON.parse(this.$el.dataset.categories || '[]');
|
||||
this.companySettings = JSON.parse(this.$el.dataset.settings || '{}');
|
||||
this.showModal = JSON.parse(this.$el.dataset.errors || 'false');
|
||||
this.urls.store = this.$el.dataset.storeUrl;
|
||||
this.urls.index = this.$el.dataset.indexUrl;
|
||||
},
|
||||
currentProduct: {
|
||||
id: '',
|
||||
names: { zh_TW: '', en: '', ja: '' },
|
||||
barcode: '',
|
||||
spec: '',
|
||||
category_id: '',
|
||||
manufacturer: '',
|
||||
track_limit: 10,
|
||||
spring_limit: 10,
|
||||
price: 0,
|
||||
cost: 0,
|
||||
member_price: 0,
|
||||
metadata: {
|
||||
material_code: '',
|
||||
points_full: 0,
|
||||
points_half: 0,
|
||||
points_half_amount: 0
|
||||
},
|
||||
is_active: true
|
||||
},
|
||||
isDeleteConfirmOpen: false,
|
||||
deleteFormAction: '',
|
||||
|
||||
confirmDelete(action) {
|
||||
this.deleteFormAction = action;
|
||||
this.isDeleteConfirmOpen = true;
|
||||
},
|
||||
|
||||
formAction() {
|
||||
if (!this.editing) return this.urls.store;
|
||||
return this.urls.index + '/' + this.currentProduct.id;
|
||||
},
|
||||
openCreateModal() {
|
||||
this.editing = false;
|
||||
this.currentProduct = {
|
||||
id: '',
|
||||
names: { zh_TW: '', en: '', ja: '' },
|
||||
barcode: '',
|
||||
spec: '',
|
||||
category_id: '',
|
||||
manufacturer: '',
|
||||
track_limit: 10,
|
||||
spring_limit: 10,
|
||||
price: 0,
|
||||
cost: 0,
|
||||
member_price: 0,
|
||||
metadata: {
|
||||
material_code: '',
|
||||
points_full: 0,
|
||||
points_half: 0,
|
||||
points_half_amount: 0
|
||||
},
|
||||
is_active: true
|
||||
};
|
||||
this.showModal = true;
|
||||
this.$nextTick(() => {
|
||||
this.syncSelect('modal-product-category', '');
|
||||
});
|
||||
viewProductDetail(product) {
|
||||
this.selectedProduct = product;
|
||||
this.isDetailOpen = true;
|
||||
},
|
||||
|
||||
openEditModal(product) {
|
||||
this.editing = true;
|
||||
|
||||
// Extract translations
|
||||
let names = { zh_TW: product.name, en: '', ja: '' };
|
||||
if (product.translations) {
|
||||
product.translations.forEach(t => {
|
||||
names[t.locale] = t.text;
|
||||
});
|
||||
}
|
||||
|
||||
this.currentProduct = {
|
||||
...product,
|
||||
names: names,
|
||||
category_id: product.category_id || '',
|
||||
metadata: {
|
||||
material_code: product.metadata?.material_code || '',
|
||||
points_full: product.metadata?.points_full || 0,
|
||||
points_half: product.metadata?.points_half || 0,
|
||||
points_half_amount: product.metadata?.points_half_amount || 0
|
||||
},
|
||||
is_active: !!product.is_active
|
||||
};
|
||||
this.showModal = true;
|
||||
this.$nextTick(() => {
|
||||
this.syncSelect('modal-product-category', this.currentProduct.category_id);
|
||||
});
|
||||
getCategoryName(id) {
|
||||
const category = this.categories.find(c => c.id == id);
|
||||
return category ? (category.name || '{{ __('Uncategorized') }}') : '{{ __('Uncategorized') }}';
|
||||
},
|
||||
|
||||
syncSelect(id, value) {
|
||||
const selectElement = document.getElementById(id);
|
||||
if (selectElement) {
|
||||
selectElement.value = value;
|
||||
selectElement.dispatchEvent(new Event('change'));
|
||||
|
||||
// Preline HSSelect specifically handles the UI sync
|
||||
if (window.HSSelect && window.HSSelect.getInstance(selectElement)) {
|
||||
window.HSSelect.getInstance(selectElement).setValue(value);
|
||||
}
|
||||
}
|
||||
formatNumber(val) {
|
||||
if (val === null || val === undefined) return '0';
|
||||
return new Intl.NumberFormat().format(val);
|
||||
},
|
||||
|
||||
formatDate(dateStr) {
|
||||
if (!dateStr) return '-';
|
||||
const date = new Date(dateStr);
|
||||
return date.toLocaleString();
|
||||
}
|
||||
}));
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user