sky121113
08fc86d3f8
All checks were successful
star-cloud-deploy-demo / deploy-demo (push) Successful in 50s
712 lines
54 KiB
PHP
712 lines
54 KiB
PHP
@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-2 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-4">
|
|
<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">
|
|
<template x-if="activeTab === 'products'">
|
|
<a href="{{ route($baseRoute . '.create') }}" class="btn-luxury-primary transition-all duration-300">
|
|
<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>
|
|
</a>
|
|
</template>
|
|
<template x-if="activeTab === 'categories'">
|
|
<button @click="openCategoryModal()" type="button" class="btn-luxury-primary transition-all duration-300 bg-emerald-600 hover:bg-emerald-700 shadow-emerald-500/20">
|
|
<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 Category') }}</span>
|
|
</button>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tabs Navigation -->
|
|
<div class="flex items-center gap-1 p-1.5 bg-slate-100 dark:bg-slate-900/50 rounded-2xl w-fit border border-slate-200/50 dark:border-slate-800/50" aria-label="Tabs">
|
|
<button type="button"
|
|
@click="activeTab = 'products'"
|
|
:class="activeTab === 'products' ? 'bg-white dark:bg-slate-800 text-cyan-600 dark:text-cyan-400 shadow-sm shadow-cyan-500/10' : 'text-slate-400 hover:text-slate-600 dark:hover:text-slate-200'"
|
|
class="px-8 py-3 rounded-xl text-sm font-black uppercase tracking-widest transition-all duration-300">
|
|
{{ __('Product List') }}
|
|
</button>
|
|
<button type="button"
|
|
@click="activeTab = 'categories'"
|
|
:class="activeTab === 'categories' ? 'bg-white dark:bg-slate-800 text-cyan-600 dark:text-cyan-400 shadow-sm shadow-cyan-500/10' : 'text-slate-400 hover:text-slate-600 dark:hover:text-slate-200'"
|
|
class="px-8 py-3 rounded-xl text-sm font-black uppercase tracking-widest transition-all duration-300">
|
|
{{ __('Category Management') }}
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Tab Contents -->
|
|
<div class="mt-6">
|
|
|
|
|
|
<!-- Products Tab -->
|
|
<div x-show="activeTab === 'products'" class="luxury-card rounded-3xl p-8 animate-luxury-in" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" x-cloak>
|
|
<!-- 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>
|
|
<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">{{ __('Barcode') }}</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">{{ __('Sale Price') }}</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>
|
|
</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 border border-slate-200 dark:border-slate-700 group-hover:bg-cyan-500 group-hover:text-white group-hover:border-cyan-500 shadow-sm group-hover:shadow-cyan-500/50 transition-all duration-300 overflow-hidden">
|
|
@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->localized_name }}</span>
|
|
<div class="flex flex-wrap items-center gap-1.5 mt-1">
|
|
@php
|
|
$catName = $product->category->localized_name ?? __('Uncategorized');
|
|
@endphp
|
|
<span class="text-[10px] font-bold text-slate-500 dark:text-slate-400 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>
|
|
@if(($companySettings['enable_material_code'] ?? false) && isset($product->metadata['material_code']))
|
|
<span class="text-[10px] font-bold text-emerald-500/80 uppercase tracking-widest bg-emerald-500/10 px-1.5 py-0.5 rounded border border-emerald-500/20">#{{ $product->metadata['material_code'] }}</span>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-6 whitespace-nowrap">
|
|
<span class="text-sm font-mono font-black text-slate-700 dark:text-slate-200 tracking-tight">{{ $product->barcode ?: '-' }}</span>
|
|
</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>
|
|
</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="inline-flex items-center px-3 py-1 rounded-full text-[11px] font-black bg-emerald-500/10 text-emerald-500 border border-emerald-500/20 tracking-widest uppercase">{{ __('Active') }}</span>
|
|
@else
|
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-[11px] font-black bg-rose-500/10 text-rose-500 border border-rose-500/20 tracking-widest uppercase">{{ __('Disabled') }}</span>
|
|
@endif
|
|
</td>
|
|
<td class="px-6 py-6 text-right">
|
|
<div class="flex justify-end items-center gap-2">
|
|
@if($product->is_active)
|
|
<button type="button"
|
|
@click="toggleFormAction = '{{ route($baseRoute . '.status.toggle', $product->id) }}'; isStatusConfirmOpen = true"
|
|
class="p-2.5 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-amber-500 hover:bg-amber-500/5 transition-all border border-transparent hover:border-amber-500/20"
|
|
title="{{ __('Disable') }}">
|
|
<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="M15.75 5.25v13.5m-7.5-13.5v13.5" /></svg>
|
|
</button>
|
|
@else
|
|
<button type="button"
|
|
@click="toggleFormAction = '{{ route($baseRoute . '.status.toggle', $product->id) }}'; $nextTick(() => $refs.statusToggleForm.submit())"
|
|
class="p-2.5 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-emerald-500 hover:bg-emerald-500/5 transition-all border border-transparent hover:border-emerald-500/20"
|
|
title="{{ __('Enable') }}">
|
|
<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="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347c-.75.412-1.667-.13-1.667-.986V5.653z" /></svg>
|
|
</button>
|
|
@endif
|
|
<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="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>
|
|
<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>
|
|
@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-8">
|
|
{{ $products->links() }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Category Tab -->
|
|
<div x-show="activeTab === 'categories'" class="luxury-card rounded-3xl p-8 animate-luxury-in" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" x-cloak>
|
|
<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">{{ __('Category Name') }}</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-right">{{ __('Actions') }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-slate-50 dark:divide-slate-800/80">
|
|
@forelse($categories as $category)
|
|
<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 border border-slate-200 dark:border-slate-700 group-hover:bg-cyan-500 group-hover:text-white group-hover:border-cyan-500 shadow-sm group-hover:shadow-cyan-500/50 transition-all duration-300">
|
|
<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="M9.568 3H5.25A2.25 2.25 0 003 5.25v13.5A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V9.432a2.25 2.25 0 00-.659-1.591l-4.182-4.182A2.25 2.25 0 0014.568 3h-5z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12h-6m6 4h-6m6-8h-6" />
|
|
</svg>
|
|
</div>
|
|
<span class="text-base font-extrabold text-slate-800 dark:text-slate-100 transition-colors group-hover:text-cyan-600 dark:group-hover:text-cyan-400">
|
|
{{ $category->localized_name }}
|
|
</span>
|
|
</div>
|
|
</td>
|
|
@if(auth()->user()->isSystemAdmin())
|
|
<td class="px-6 py-6 text-center">
|
|
<span class="text-xs font-bold text-slate-500 dark:text-slate-400">{{ $category->company->name ?? __('System Default') }}</span>
|
|
</td>
|
|
@endif
|
|
<td class="px-6 py-6 text-right">
|
|
<div class="flex justify-end items-center gap-2">
|
|
<button type="button" @click="openCategoryModal(@js($category))" 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('admin.data-config.product-categories.destroy', $category->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>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr class="animate-luxury-in">
|
|
<td colspan="{{ auth()->user()->isSystemAdmin() ? 3 : 2 }}" class="px-6 py-20 text-center">
|
|
<div class="flex flex-col items-center justify-center space-y-4">
|
|
<div class="w-16 h-16 rounded-3xl bg-slate-50 dark:bg-slate-800/50 flex items-center justify-center text-slate-300 dark:text-slate-700 shadow-inner">
|
|
<svg class="size-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" /></svg>
|
|
</div>
|
|
<p class="text-slate-400 font-bold tracking-widest text-sm uppercase">{{ __('No categories found.') }}</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Delete Confirm Modal -->
|
|
<x-delete-confirm-modal
|
|
:title="__('Delete Product Confirmation')"
|
|
:message="__('Are you sure you want to delete this product? All related historical translation data will also be removed.')"
|
|
/>
|
|
|
|
<!-- Status Toggle Modal -->
|
|
<x-status-confirm-modal
|
|
:title="__('Disable Product Confirmation')"
|
|
:message="__('Are you sure you want to change the status of this product? Disabled products will not be visible on the machine.')"
|
|
/>
|
|
|
|
<form x-ref="statusToggleForm" :action="toggleFormAction" method="POST" class="hidden">
|
|
@csrf
|
|
@method('PATCH')
|
|
</form>
|
|
|
|
<form x-ref="deleteForm" :action="deleteFormAction" method="POST" class="hidden">
|
|
@csrf
|
|
@method('DELETE')
|
|
</form>
|
|
|
|
<!-- Category Modal -->
|
|
<div x-show="isCategoryModalOpen" class="fixed inset-0 z-[110] 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="isCategoryModalOpen" 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="isCategoryModalOpen = false"></div>
|
|
|
|
<span class="hidden sm:inline-block sm:align-middle sm:h-screen">​</span>
|
|
|
|
<div x-show="isCategoryModalOpen" 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 w-full max-w-lg p-8 my-8 overflow-hidden text-left align-middle transition-all transform bg-white dark:bg-slate-900 shadow-2xl rounded-3xl border border-slate-100 dark:border-white/10">
|
|
<div class="flex justify-between items-center mb-8">
|
|
<h3 class="text-2xl font-black text-slate-800 dark:text-white font-display tracking-tight" x-text="categoryModalMode === 'create' ? '{{ __('Add Category') }}' : '{{ __('Edit Category') }}'"></h3>
|
|
<button @click="isCategoryModalOpen = false" class="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"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
|
|
</button>
|
|
</div>
|
|
|
|
<form :action="categoryFormAction" method="POST" class="space-y-6">
|
|
@csrf
|
|
<template x-if="categoryModalMode === 'edit'">
|
|
<input type="hidden" name="_method" value="PUT">
|
|
</template>
|
|
|
|
<div class="space-y-6">
|
|
<!-- 1. Company Selection (If Admin) -->
|
|
@if(auth()->user()->isSystemAdmin())
|
|
<div class="p-6 bg-slate-50 dark:bg-slate-800/30 rounded-3xl border border-slate-100 dark:border-white/5 space-y-3">
|
|
<label class="block text-sm font-black text-slate-700 dark:text-slate-200 px-1">{{ __('Affiliated Company') }}</label>
|
|
|
|
<!-- Searchable Select Wrapper -->
|
|
<div id="category_company_select_wrapper" class="relative">
|
|
<!-- Will be hydrated by JS -->
|
|
</div>
|
|
|
|
<p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest px-1">{{ __('Type to search or leave blank for system defaults.') }}</p>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- 2. Multilingual Names -->
|
|
<div class="space-y-5 px-1">
|
|
<!-- zh_TW -->
|
|
<div class="space-y-2">
|
|
<label class="flex items-center gap-2 text-[10px] font-black text-slate-400 uppercase tracking-[0.2em]">
|
|
{{ __('Category Name (zh_TW)') }} <span class="text-rose-500">*</span>
|
|
</label>
|
|
<input type="text" name="names[zh_TW]" x-model="categoryFormFields.names.zh_TW" class="luxury-input w-full focus:ring-emerald-500/20 focus:border-emerald-500" placeholder="{{ __('e.g., Beverage') }}" required>
|
|
</div>
|
|
|
|
<!-- en -->
|
|
<div class="space-y-2">
|
|
<label class="flex items-center gap-2 text-[10px] font-black text-slate-400 uppercase tracking-[0.2em]">
|
|
{{ __('Category Name (en)') }}
|
|
</label>
|
|
<input type="text" name="names[en]" x-model="categoryFormFields.names.en" class="luxury-input w-full" placeholder="{{ __('e.g., Drinks') }}">
|
|
</div>
|
|
|
|
<!-- ja -->
|
|
<div class="space-y-2">
|
|
<label class="flex items-center gap-2 text-[10px] font-black text-slate-400 uppercase tracking-[0.2em]">
|
|
{{ __('Category Name (ja)') }}
|
|
</label>
|
|
<input type="text" name="names[ja]" x-model="categoryFormFields.names.ja" class="luxury-input w-full" placeholder="{{ __('e.g., お飲み物') }}">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-end gap-4 mt-12 pt-6 border-t border-slate-100 dark:border-white/5">
|
|
<button type="button" @click="isCategoryModalOpen = false"
|
|
class="px-6 py-2.5 text-sm font-black text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 uppercase tracking-widest transition-all">
|
|
{{ __('Cancel') }}
|
|
</button>
|
|
<button type="submit"
|
|
class="btn-luxury-primary px-10 py-3 shadow-lg"
|
|
:class="categoryModalMode === 'create' ? 'bg-emerald-600 hover:bg-emerald-700 shadow-emerald-500/20' : 'bg-cyan-600 hover:bg-cyan-700 shadow-cyan-500/20'">
|
|
<span x-text="categoryModalMode === 'create' ? '{{ __('Create') }}' : '{{ __('Save Changes') }}'"></span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 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-md"
|
|
@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">
|
|
<div class="px-6 py-3 border-b border-slate-100 dark:border-slate-800 flex items-center justify-between sticky top-0 bg-white/80 dark:bg-slate-900/80 backdrop-blur-md z-20">
|
|
<div>
|
|
<h2 class="text-xl font-black text-slate-800 dark:text-white">{{ __('Product Details') }}</h2>
|
|
<p class="text-[11px] font-bold text-slate-400 uppercase tracking-[0.2em] mt-1" x-text="(selectedProduct?.localized_name || selectedProduct?.name) + ' (' + getCategoryName(selectedProduct?.category_id) + ')'"></p>
|
|
</div>
|
|
<button @click="isDetailOpen = false"
|
|
class="p-2 rounded-xl hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors">
|
|
<svg class="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex-1 overflow-y-auto px-6 py-8 space-y-8 custom-scrollbar">
|
|
<!-- Header Status Info (Minimized) -->
|
|
<div class="flex items-center gap-3 animate-luxury-in">
|
|
<span class="px-3 py-1 rounded-full text-xs 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-xs font-bold text-slate-400 dark:text-slate-300" x-text="'ID: #' + (selectedProduct?.id || '-')"></span>
|
|
</div>
|
|
|
|
<div class="space-y-8">
|
|
<!-- Image Section (Square) -->
|
|
<template x-if="selectedProduct?.image_url">
|
|
<section class="animate-luxury-in">
|
|
<h3 class="text-[10px] font-black text-indigo-500 uppercase tracking-[0.3em] mb-4">{{ __('Product Image') }}</h3>
|
|
<div @click="isImageZoomed = true"
|
|
class="max-w-xs mx-auto aspect-square rounded-[2rem] bg-slate-50 dark:bg-slate-800 overflow-hidden border border-slate-100 dark:border-white/5 shadow-lg group relative cursor-zoom-in">
|
|
<img :src="selectedProduct.image_url" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-1000">
|
|
<div class="absolute inset-0 bg-slate-950/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
|
|
<div class="p-3 rounded-full bg-white/20 backdrop-blur-md text-white border border-white/30 scale-50 group-hover:scale-100 transition-all duration-500 shadow-2xl">
|
|
<svg class="size-6 shadow-glow" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607zM10.5 7.5v6m3-3h-6" /></svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<section class="space-y-4 animate-luxury-in" style="animation-delay: 100ms">
|
|
<h3 class="text-xs font-black text-cyan-500 uppercase tracking-[0.3em]">{{ __('Identity & Codes') }}</h3>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
|
<div class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80 group hover:border-cyan-500/30 transition-colors">
|
|
<span class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-1.5">{{ __('Barcode') }}</span>
|
|
<div class="text-[15px] font-mono font-bold text-slate-700 dark:text-slate-200" x-text="selectedProduct?.barcode || '-'"></div>
|
|
</div>
|
|
<div class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80 group hover:border-cyan-500/30 transition-colors">
|
|
<span class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-1.5">{{ __('Specification') }}</span>
|
|
<div class="text-[15px] font-bold text-slate-700 dark:text-slate-200" x-text="selectedProduct?.spec || '-'"></div>
|
|
</div>
|
|
<template x-if="selectedProduct?.metadata?.material_code">
|
|
<div class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80 group hover:border-cyan-500/30 transition-colors">
|
|
<span class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-1.5">{{ __('Material Code') }}</span>
|
|
<div class="text-[15px] font-mono font-bold text-slate-700 dark:text-slate-200" x-text="selectedProduct?.metadata?.material_code"></div>
|
|
</div>
|
|
</template>
|
|
<div class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80 group hover:border-cyan-500/30 transition-colors">
|
|
<span class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-1.5">{{ __('Manufacturer') }}</span>
|
|
<div class="text-[15px] font-bold text-slate-700 dark:text-slate-200" x-text="selectedProduct?.manufacturer || '-'"></div>
|
|
</div>
|
|
<template x-if="selectedProduct?.company?.name">
|
|
<div class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80 group hover:border-cyan-500/30 transition-colors">
|
|
<span class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-1.5">{{ __('Company') }}</span>
|
|
<div class="text-[15px] font-bold text-slate-700 dark:text-slate-200" x-text="selectedProduct?.company?.name"></div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Pricing Section -->
|
|
<section class="space-y-4 animate-luxury-in" style="animation-delay: 200ms">
|
|
<h3 class="text-xs font-black text-emerald-500 uppercase tracking-[0.3em]">{{ __('Pricing Information') }}</h3>
|
|
<div class="luxury-card divide-y divide-slate-50 dark:divide-white/5 overflow-hidden border border-slate-100 dark:border-white/5 shadow-sm">
|
|
<div class="p-5 flex items-center justify-between group hover:bg-slate-50/50 dark:hover:bg-white/5 transition-colors">
|
|
<span class="text-[15px] font-bold text-slate-500">{{ __('Sale Price') }}</span>
|
|
<span class="text-lg font-black text-slate-800 dark:text-white">$<span x-text="formatNumber(selectedProduct?.price)"></span></span>
|
|
</div>
|
|
<div class="p-5 flex items-center justify-between group hover:bg-slate-50/50 dark:hover:bg-white/5 transition-colors">
|
|
<span class="text-[15px] font-bold text-slate-500">{{ __('Member Price') }}</span>
|
|
<span class="text-lg font-black text-emerald-500">$<span x-text="formatNumber(selectedProduct?.member_price)"></span></span>
|
|
</div>
|
|
<div class="p-5 flex items-center justify-between group hover:bg-slate-50/50 dark:hover:bg-white/5 transition-colors">
|
|
<span class="text-[15px] font-bold text-slate-400">{{ __('Cost') }}</span>
|
|
<span class="text-sm font-bold text-slate-500 tracking-tight">$<span x-text="formatNumber(selectedProduct?.cost)"></span></span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Storage & Limits -->
|
|
<section class="space-y-4 animate-luxury-in" style="animation-delay: 300ms">
|
|
<h3 class="text-xs font-black text-indigo-500 uppercase tracking-[0.3em]">{{ __('Channel Limits Configuration') }}</h3>
|
|
<div class="luxury-card p-6 border border-slate-100 dark:border-white/5 space-y-6 shadow-sm">
|
|
<div class="flex items-center justify-between">
|
|
<div class="space-y-1">
|
|
<p class="text-xs 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 || '0'"></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-xs 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 || '0'"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Loyalty Points -->
|
|
<section class="space-y-4 animate-luxury-in" style="animation-delay: 400ms">
|
|
<h3 class="text-xs font-black text-rose-500 uppercase tracking-[0.3em]">{{ __('Loyalty & Features') }}</h3>
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
|
<div class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80">
|
|
<span class="text-xs font-black text-slate-400 uppercase tracking-widest block mb-1">{{ __('Full Points') }}</span>
|
|
<div class="text-lg font-black text-rose-500 font-mono" x-text="selectedProduct?.metadata?.points_full || '0'"></div>
|
|
</div>
|
|
<div class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80">
|
|
<span class="text-xs font-black text-slate-400 uppercase tracking-widest block mb-1">{{ __('Half Points') }}</span>
|
|
<div class="text-lg font-black text-indigo-500 font-mono" x-text="selectedProduct?.metadata?.points_half || '0'"></div>
|
|
</div>
|
|
<div class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80">
|
|
<span class="text-xs font-black text-slate-400 uppercase tracking-widest block mb-1">{{ __('Half Points Amount') }}</span>
|
|
<div class="text-lg font-black text-emerald-500 font-mono" x-text="selectedProduct?.metadata?.points_half_amount || '0'"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<div class="p-6 border-t border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50">
|
|
<button @click="isDetailOpen = false" class="w-full btn-luxury-ghost">{{ __('Close Panel') }}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Image Zoom Modal -->
|
|
<div x-show="isImageZoomed"
|
|
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 z-[110] flex items-center justify-center p-4 bg-slate-950/90 backdrop-blur-xl"
|
|
@keydown.escape.window="isImageZoomed = false"
|
|
x-cloak>
|
|
|
|
<button @click="isImageZoomed = false" class="absolute top-6 right-6 p-3 rounded-full bg-white/10 text-white hover:bg-white/20 transition-all border border-white/10 active:scale-95">
|
|
<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 class="relative max-w-5xl w-full aspect-square md:aspect-auto md:max-h-[90vh] flex items-center justify-center" @click.away="isImageZoomed = false">
|
|
<img :src="selectedProduct?.image_url" class="max-w-full max-h-full rounded-[2.5rem] shadow-2xl border border-white/10 animate-luxury-in">
|
|
|
|
<div class="absolute bottom-[-4rem] left-1/2 -translate-x-1/2 text-white/60 text-sm font-bold tracking-widest uppercase animate-luxury-in" style="animation-delay: 200ms">
|
|
<span x-text="selectedProduct?.localized_name || selectedProduct?.name"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@section('scripts')
|
|
<script>
|
|
document.addEventListener('alpine:init', () => {
|
|
Alpine.data('productManager', () => ({
|
|
isDeleteConfirmOpen: false,
|
|
isDetailOpen: false,
|
|
isImageZoomed: false,
|
|
isStatusConfirmOpen: false,
|
|
isCategoryModalOpen: false,
|
|
activeTab: '{{ request("tab", "products") }}',
|
|
categoryModalMode: 'create',
|
|
categoryFormAction: '',
|
|
deleteFormAction: '',
|
|
toggleFormAction: '',
|
|
selectedProduct: null,
|
|
categories: [],
|
|
categoryFormFields: {
|
|
names: { zh_TW: '', en: '', ja: '' },
|
|
company_id: ''
|
|
},
|
|
|
|
submitConfirmedForm() {
|
|
this.$refs.statusToggleForm.submit();
|
|
},
|
|
|
|
init() {
|
|
this.categories = JSON.parse(this.$el.dataset.categories || '[]');
|
|
this.companies = @js($companies);
|
|
|
|
// Watch for category modal opening to sync searchable select
|
|
this.$watch('isCategoryModalOpen', (value) => {
|
|
if (value && document.getElementById('category_company_select_wrapper')) {
|
|
this.$nextTick(() => {
|
|
this.updateCategoryCompanySelect();
|
|
});
|
|
}
|
|
});
|
|
},
|
|
|
|
updateCategoryCompanySelect() {
|
|
const wrapper = document.getElementById('category_company_select_wrapper');
|
|
if (!wrapper) return;
|
|
wrapper.innerHTML = '';
|
|
|
|
const selectEl = document.createElement('select');
|
|
selectEl.name = 'company_id';
|
|
const uniqueId = 'cat-company-' + Date.now();
|
|
selectEl.id = uniqueId;
|
|
selectEl.className = 'hidden';
|
|
|
|
const config = {
|
|
"placeholder": "{{ __('Select Company (Default: System)') }}",
|
|
"hasSearch": true,
|
|
"searchPlaceholder": "{{ __('Search Company Title...') }}",
|
|
"isHidePlaceholder": false,
|
|
"searchClasses": "block w-[calc(100%-16px)] mx-2 py-2 px-3 text-sm border-slate-200 dark:border-white/10 rounded-lg focus:border-cyan-500 focus:ring-cyan-500 bg-slate-50 dark:bg-slate-900/50 dark:text-slate-200 placeholder:text-slate-400 dark:placeholder:text-slate-500",
|
|
"searchWrapperClasses": "sticky top-0 bg-white/95 dark:bg-slate-900/95 backdrop-blur-md p-2 z-10",
|
|
"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-[0_20px_50px_rgba(0,0,0,0.3)] mt-2 z-[100] animate-luxury-in",
|
|
"optionClasses": "hs-select-option py-2.5 px-3 mb-0.5 text-sm text-slate-800 dark:text-slate-300 cursor-pointer hover:bg-slate-100 dark:hover:bg-cyan-500/10 dark:hover:text-cyan-400 rounded-lg flex items-center justify-between transition-all duration-300",
|
|
"optionTemplate": '<div class="flex items-center justify-between w-full"><span data-title></span><span class="hs-select-active-indicator hidden text-cyan-500"><svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span></div>'
|
|
};
|
|
|
|
selectEl.setAttribute('data-hs-select', JSON.stringify(config));
|
|
|
|
// Default System option
|
|
const defaultOpt = document.createElement('option');
|
|
defaultOpt.value = "";
|
|
defaultOpt.textContent = "{{ __('System Default (Common)') }}";
|
|
defaultOpt.setAttribute('data-title', defaultOpt.textContent);
|
|
if (!this.categoryFormFields.company_id) defaultOpt.selected = true;
|
|
selectEl.appendChild(defaultOpt);
|
|
|
|
// Company options
|
|
this.companies.forEach(company => {
|
|
const opt = document.createElement('option');
|
|
opt.value = company.id;
|
|
opt.textContent = company.name;
|
|
opt.setAttribute('data-title', company.name);
|
|
if (String(this.categoryFormFields.company_id) === String(company.id)) opt.selected = true;
|
|
selectEl.appendChild(opt);
|
|
});
|
|
|
|
wrapper.appendChild(selectEl);
|
|
|
|
selectEl.addEventListener('change', (e) => {
|
|
this.categoryFormFields.company_id = e.target.value;
|
|
});
|
|
|
|
this.$nextTick(() => {
|
|
if (window.HSStaticMethods && window.HSStaticMethods.autoInit) {
|
|
window.HSStaticMethods.autoInit(['select']);
|
|
}
|
|
});
|
|
},
|
|
|
|
confirmDelete(action) {
|
|
this.deleteFormAction = action;
|
|
this.isDeleteConfirmOpen = true;
|
|
},
|
|
|
|
viewProductDetail(product) {
|
|
this.selectedProduct = product;
|
|
this.isDetailOpen = true;
|
|
},
|
|
|
|
openCategoryModal(category = null) {
|
|
if (category) {
|
|
this.categoryModalMode = 'edit';
|
|
this.categoryFormAction = `{{ url('admin/data-config/product-categories') }}/${category.id}`;
|
|
this.categoryFormFields.names = { zh_TW: category.name || '', en: category.name || '', ja: category.name || '' };
|
|
if (category.translations && category.translations.length > 0) {
|
|
category.translations.forEach(t => {
|
|
if (this.categoryFormFields.names.hasOwnProperty(t.locale)) {
|
|
this.categoryFormFields.names[t.locale] = t.value;
|
|
}
|
|
});
|
|
}
|
|
this.categoryFormFields.company_id = category.company_id || '';
|
|
} else {
|
|
this.categoryModalMode = 'create';
|
|
this.categoryFormAction = `{{ route('admin.data-config.product-categories.store') }}`;
|
|
this.categoryFormFields.names = { zh_TW: '', en: '', ja: '' };
|
|
this.categoryFormFields.company_id = '';
|
|
}
|
|
this.isCategoryModalOpen = true;
|
|
},
|
|
|
|
getCategoryName(id) {
|
|
const category = this.categories.find(c => c.id == id);
|
|
return category ? (category.name || "{{ __('Uncategorized') }}") : "{{ __('Uncategorized') }}";
|
|
},
|
|
|
|
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();
|
|
}
|
|
}));
|
|
});
|
|
</script>
|
|
@endsection
|