mama/star-cloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FEAT] 商品管理模組重構、UI 清晰度優化與多語系標籤字體調整

Browse Source
This commit is contained in:
sky121113
2026-03-26 17:32:15 +08:00
parent ac51027dda
commit 8ec5473ec7
12 changed files with 1152 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

201
resources/views/admin/products/create-modal.blade.php Normal file
View File

@@ -0,0 +1,201 @@
<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>

520
resources/views/admin/products/index.blade.php Normal file
View File

@@ -0,0 +1,520 @@
@extends('layouts.admin')
@php
$routeName = request()->route()->getName();
$baseRoute = 'admin.data-config.products';
$roleSelectConfig = [
"placeholder" => __('Select Category'),
"hasSearch" => true,
"searchPlaceholder" => __('Search Category...'),
"toggleClasses" => "hs-select-toggle luxury-select-toggle",
"dropdownClasses" => "hs-select-menu w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-white/10 rounded-xl shadow-2xl mt-2 z-[100]",
"optionClasses" => "hs-select-option py-2.5 px-3 text-sm text-slate-800 dark:text-slate-300 cursor-pointer hover:bg-slate-100 dark:hover:bg-white/5 rounded-lg flex items-center justify-between",
];
@endphp
@section('content')
<div class="space-y-6 pb-20"
x-data="productManager"
data-categories="{{ json_encode($categories) }}"
data-settings="{{ json_encode($companySettings) }}"
data-errors="{{ json_encode($errors->any()) }}"
data-store-url="{{ route($baseRoute . '.store') }}"
data-index-url="{{ route($baseRoute . '.index') }}">
<!-- Header -->
<div class="flex flex-col md:flex-row md:items-center justify-between gap-6">
<div>
<h1 class="text-3xl font-black text-slate-800 dark:text-white font-display tracking-tight">{{ __('Product Management') }}</h1>
<p class="text-sm font-bold text-slate-500 dark:text-slate-400 mt-1 uppercase tracking-widest">
{{ __('Manage your catalog, prices, and multilingual details.') }}
</p>
</div>
<div class="flex items-center gap-3">
<button @click="openCreateModal()" 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>
</div>
</div>
<!-- Main Content Card -->
<div class="luxury-card rounded-3xl p-8 animate-luxury-in">
<!-- Filters & Search -->
<form action="{{ route($routeName) }}" method="GET" class="flex flex-col md:flex-row md:items-center gap-4 mb-10">
<div class="relative group">
<span class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none z-10">
<svg class="h-4 w-4 text-slate-400 group-focus-within:text-cyan-500 transition-colors" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
</span>
<input type="text" name="search" value="{{ request('search') }}" class="py-2.5 pl-12 pr-6 block w-full md:w-80 luxury-input" placeholder="{{ __('Search products...') }}">
</div>
@if(auth()->user()->isSystemAdmin())
<div class="relative min-w-[200px]">
<x-searchable-select name="company_id" :options="$companies" :selected="request('company_id')" :placeholder="__('All Companies')" onchange="this.form.submit()" />
</div>
@endif
</form>
<!-- Table -->
<div class="overflow-x-auto">
<table class="w-full text-left border-separate border-spacing-y-0">
<thead>
<tr class="bg-slate-50/50 dark:bg-slate-900/10">
<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">{{ __('Product Info') }}</th>
@if(auth()->user()->isSystemAdmin())
<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">{{ __('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>
</thead>
<tbody class="divide-y divide-slate-50 dark:divide-slate-800/80">
@forelse($products as $product)
<tr class="group hover:bg-slate-50/80 dark:hover:bg-slate-800/40 transition-all duration-300">
<td class="px-6 py-6">
<div class="flex items-center gap-x-4">
<div class="w-10 h-10 rounded-xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 group-hover:bg-cyan-500 group-hover:text-white transition-all overflow-hidden shadow-sm">
@if($product->image_url)
<img src="{{ $product->image_url }}" class="w-full h-full object-cover">
@else
<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="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>
@endif
</div>
<div class="flex flex-col">
<span class="text-base font-extrabold text-slate-800 dark:text-slate-100 group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors">{{ $product->name }}</span>
<div class="flex items-center gap-2 mt-0.5">
@php
$catName = $product->category->name ?? __('Uncategorized');
if ($product->category && $product->category->name_dictionary_key) {
$translatedCat = __($product->category->name_dictionary_key);
if ($translatedCat !== $product->category->name_dictionary_key) {
$catName = $translatedCat;
}
}
@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>
</div>
</div>
</div>
</td>
@if(auth()->user()->isSystemAdmin())
<td class="px-6 py-6 text-center">
<span class="text-xs font-bold text-slate-600 dark:text-slate-400 group-hover:text-slate-900 dark:group-hover:text-slate-200 transition-colors">{{ $product->company->name ?? '-' }}</span>
</td>
@endif
<td class="px-6 py-6 text-center whitespace-nowrap">
<span class="text-sm font-black text-slate-800 dark:text-white">${{ number_format($product->price, 0) }}</span>
<span class="text-xs font-bold text-slate-400 mx-1">/</span>
<span class="text-sm font-black text-emerald-500">${{ number_format($product->member_price, 0) }}</span>
</td>
<td class="px-6 py-6 text-center whitespace-nowrap">
<span class="text-sm font-black text-indigo-500 dark:text-indigo-400">{{ $product->track_limit }}</span>
<span class="text-xs font-bold text-slate-400 mx-1">/</span>
<span class="text-sm font-black text-amber-500 dark:text-amber-400">{{ $product->spring_limit }}</span>
</td>
<td class="px-6 py-6 text-center">
@if($product->is_active)
<span class="px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest bg-emerald-500/10 text-emerald-600 border border-emerald-500/20 shadow-sm shadow-emerald-500/10">{{ __('Active') }}</span>
@else
<span class="px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest bg-slate-500/10 text-slate-500 border border-slate-500/20">{{ __('Disabled') }}</span>
@endif
</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') }}">
<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>
</div>
</td>
</tr>
@empty
<tr>
<td colspan="5" class="px-6 py-32 text-center text-slate-400 italic">{{ __('No products found matching your criteria.') }}</td>
</tr>
@endforelse
</tbody>
</table>
</div>
<!-- Pagination -->
<div class="mt-10 pt-6 border-t border-slate-100 dark:border-slate-800/50">
{{ $products->links('vendor.pagination.luxury') }}
</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">&#8203;</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) -->
<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>
</div>
@endsection
@section('scripts')
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('productManager', () => ({
showModal: false,
editing: false,
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', '');
});
},
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);
});
},
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);
}
}
}
}));
});
</script>
@endsection