8feca33f13
1. 新增機台異常日誌手動解除功能，包含資料庫欄位更新與 UI 操作按鈕。 2. 實作機台庫存變動紀錄系統 (Machine Stock Movements)，支援追蹤補貨與銷售產生的庫存異動。 3. 重構取貨碼 (Pickup Code) 與通行碼 (Pass Code) 管理介面，採用極簡奢華風 UI 並拆分 Partial Views 提升可維護性。 4. 優化取貨操作日誌，明確區分「取貨成功」與「取貨失敗」，並加入顏色標籤增強辨識度。 5. 擴充多語系支援 (繁中、英文、日文)，確保所有新功能與操作狀態均有對應翻譯。 6. 更新 IoT API 規格文件與相關 Service 邏輯，加強指令確認 (ACK) 處理機制。
544 lines
30 KiB
PHP
544 lines
30 KiB
PHP
@extends('layouts.admin')
|
|
|
|
@section('content')
|
|
<div class="space-y-2 pb-20" x-data="{
|
|
activeTab: '{{ $tab ?? 'list' }}',
|
|
tabLoading: null,
|
|
showCreateModal: false,
|
|
showEditModal: false,
|
|
showDeleteModal: false,
|
|
deleteTargetForm: '',
|
|
selectedMachine: '',
|
|
passCodeName: '',
|
|
expiresDays: 7,
|
|
customCode: '',
|
|
status: '{{ request('status', '') }}',
|
|
showQrModal: false,
|
|
activeQrCode: '',
|
|
activeTicketUrl: '',
|
|
editFormAction: '',
|
|
editPassCodeName: '',
|
|
editExpiresAt: '',
|
|
|
|
openEditModal(item) {
|
|
this.editFormAction = '{{ route('admin.sales.pass-codes.update', ':id') }}'.replace(':id', item.id);
|
|
this.editPassCodeName = item.name;
|
|
this.editExpiresAt = item.expires_at;
|
|
this.showEditModal = true;
|
|
this.$nextTick(() => {
|
|
window.dispatchEvent(new CustomEvent('set-date', {
|
|
detail: { name: 'expires_at', value: this.editExpiresAt }
|
|
}));
|
|
});
|
|
},
|
|
|
|
generateRandomCode() {
|
|
this.customCode = Math.floor(Math.random() * 90000000 + 10000000).toString();
|
|
},
|
|
|
|
calculateExpiry() {
|
|
if (!this.expiresDays || parseInt(this.expiresDays) <= 0) {
|
|
return '{{ __('Permanent') }}';
|
|
}
|
|
const date = new Date();
|
|
const days = parseInt(this.expiresDays) || 0;
|
|
date.setDate(date.getDate() + days);
|
|
return date.toLocaleString('zh-TW', {
|
|
year: 'numeric',
|
|
month: '2-digit',
|
|
day: '2-digit',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
hour12: false
|
|
}).replace(/\//g, '-');
|
|
},
|
|
|
|
async fetchTabData(tab, customUrl = null) {
|
|
if (this.tabLoading === tab) return;
|
|
this.tabLoading = tab;
|
|
const container = document.getElementById(`tab-${tab}-container`);
|
|
let url = customUrl;
|
|
|
|
if (!url) {
|
|
let params = new URLSearchParams();
|
|
params.set('tab', tab);
|
|
params.set('_ajax', '1');
|
|
|
|
if (container) {
|
|
const form = container.querySelector('form');
|
|
if (form) {
|
|
const formData = new FormData(form);
|
|
formData.forEach((value, key) => {
|
|
if (value.trim() !== '') params.append(key, value);
|
|
});
|
|
}
|
|
}
|
|
url = `${window.location.pathname}?${params.toString()}`;
|
|
} else {
|
|
const urlObj = new URL(url, window.location.origin);
|
|
urlObj.searchParams.set('tab', tab);
|
|
urlObj.searchParams.set('_ajax', '1');
|
|
url = urlObj.toString();
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(url, {
|
|
headers: {
|
|
'X-Requested-With': 'XMLHttpRequest',
|
|
'Accept': 'application/json'
|
|
}
|
|
});
|
|
const data = await response.json();
|
|
if (data.success) {
|
|
if (container) {
|
|
container.innerHTML = data.html;
|
|
this.$nextTick(() => {
|
|
if (window.HSStaticMethods) window.HSStaticMethods.autoInit();
|
|
});
|
|
}
|
|
|
|
const historyUrl = new URL(url);
|
|
historyUrl.searchParams.delete('_ajax');
|
|
window.history.pushState({}, '', historyUrl.toString());
|
|
}
|
|
} catch (e) {
|
|
console.error(e);
|
|
window.showToast?.('{{ __("Loading failed") }}', 'error');
|
|
} finally {
|
|
this.tabLoading = null;
|
|
}
|
|
},
|
|
|
|
confirmDelete(formId) {
|
|
this.deleteTargetForm = formId;
|
|
this.showDeleteModal = true;
|
|
},
|
|
|
|
submitDelete() {
|
|
if (this.deleteTargetForm) {
|
|
const form = document.getElementById(this.deleteTargetForm);
|
|
if (form) form.submit();
|
|
}
|
|
this.showDeleteModal = false;
|
|
},
|
|
|
|
syncSelect(id, value) {
|
|
this.$nextTick(() => {
|
|
const el = document.getElementById(id);
|
|
if (el) {
|
|
const valStr = (value !== undefined && value !== null && value.toString().trim() !== '') ? value.toString() : ' ';
|
|
el.value = valStr;
|
|
if (window.HSSelect) {
|
|
const inst = window.HSSelect.getInstance(el);
|
|
if (inst) inst.setValue(valStr);
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
validateAndSubmit(e) {
|
|
if (!this.selectedMachine) {
|
|
window.showToast('{{ __('Please select a machine') }}', 'error');
|
|
return;
|
|
}
|
|
if (!this.passCodeName.trim()) {
|
|
window.showToast('{{ __('Please enter a description') }}', 'error');
|
|
return;
|
|
}
|
|
if (!this.customCode.trim()) {
|
|
window.showToast('{{ __('Please enter or generate a pass code') }}', 'error');
|
|
return;
|
|
}
|
|
e.target.submit();
|
|
},
|
|
|
|
copyQrCode() {
|
|
if (!this.activeQrCode) return;
|
|
navigator.clipboard.writeText(this.activeQrCode).then(() => {
|
|
window.showToast('{{ __('Code Copied') }}', 'success');
|
|
});
|
|
},
|
|
|
|
copyQrLink() {
|
|
if (!this.activeTicketUrl) return;
|
|
navigator.clipboard.writeText(this.activeTicketUrl).then(() => {
|
|
window.showToast('{{ __('Link Copied') }}', 'success');
|
|
});
|
|
},
|
|
|
|
async downloadQrCode() {
|
|
const url = '{{ route('admin.basic-settings.qr-code') }}?size=500&data=' + encodeURIComponent(this.activeQrCode);
|
|
fetch(url)
|
|
.then(response => response.blob())
|
|
.then(blob => {
|
|
const link = document.createElement('a');
|
|
link.href = URL.createObjectURL(blob);
|
|
link.download = `pass-code-${this.activeQrCode}.png`;
|
|
link.click();
|
|
URL.revokeObjectURL(link.href);
|
|
});
|
|
},
|
|
|
|
init() {
|
|
this.$watch('activeTab', (newTab) => {
|
|
const url = new URL(window.location.origin + window.location.pathname);
|
|
url.searchParams.set('tab', newTab);
|
|
window.history.pushState({}, '', url);
|
|
this.$nextTick(() => {
|
|
if (window.HSStaticMethods) window.HSStaticMethods.autoInit();
|
|
});
|
|
});
|
|
|
|
this.$watch('showCreateModal', (val) => {
|
|
if (val) {
|
|
this.selectedMachine = '';
|
|
this.passCodeName = '';
|
|
this.expiresDays = 7;
|
|
this.generateRandomCode();
|
|
this.syncSelect('modal-pass-machine', '');
|
|
}
|
|
});
|
|
}
|
|
} " @ajax:navigate.window.prevent="fetchTabData(activeTab, $event.detail.url)">
|
|
{{-- Page Header --}}
|
|
<x-page-header :title="__('Pass Codes')"
|
|
:subtitle="__('Manage multi-use authorization codes for testing and maintenance')">
|
|
<button @click="showCreateModal = true; generateRandomCode()" class="btn-luxury-primary">
|
|
<svg class="w-4 h-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 Pass Code') }}</span>
|
|
</button>
|
|
</x-page-header>
|
|
|
|
{{-- Tabs --}}
|
|
<x-tab-nav model="activeTab">
|
|
<x-tab-nav-item value="list" :label="__('Pass Codes')" model="activeTab" />
|
|
<x-tab-nav-item value="logs" :label="__('Operation Records')" model="activeTab" />
|
|
</x-tab-nav>
|
|
|
|
{{-- Main Content --}}
|
|
<div class="mt-6">
|
|
<div class="relative min-h-[400px]">
|
|
{{-- List Tab --}}
|
|
<div x-show="activeTab === 'list'" class="relative min-h-[400px]"
|
|
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">
|
|
<div class="luxury-card rounded-3xl p-8 animate-luxury-in relative overflow-hidden">
|
|
<x-luxury-spinner show="tabLoading === 'list'" />
|
|
<div id="tab-list-container" class="relative"
|
|
:class="{ 'opacity-30 pointer-events-none transition-opacity duration-300': tabLoading === 'list' }">
|
|
@include('admin.sales.pass-codes.partials.tab-list')
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Logs Tab --}}
|
|
<div x-show="activeTab === 'logs'" class="relative min-h-[400px]"
|
|
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" style="display: none;" x-cloak>
|
|
<div class="luxury-card rounded-3xl p-8 animate-luxury-in relative overflow-hidden">
|
|
<x-luxury-spinner show="tabLoading === 'logs'" />
|
|
<div id="tab-logs-container" class="relative"
|
|
:class="{ 'opacity-30 pointer-events-none transition-opacity duration-300': tabLoading === 'logs' }">
|
|
@include('admin.sales.pass-codes.partials.tab-logs')
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Create Modal --}}
|
|
<div x-show="showCreateModal" class="fixed inset-0 z-50 overflow-y-auto"
|
|
x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-200"
|
|
x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-cloak>
|
|
<div class="flex items-center justify-center min-h-screen px-4 pb-20 text-center sm:block sm:p-0">
|
|
<div class="fixed inset-0 transition-opacity bg-slate-900/60 backdrop-blur-sm"
|
|
@click="showCreateModal = false"></div>
|
|
|
|
<div x-show="showCreateModal" x-transition:enter="ease-out duration-300"
|
|
x-transition:enter-start="opacity-0 translate-y-4 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 sm:scale-100"
|
|
x-transition:leave-end="opacity-0 translate-y-4 sm:scale-95"
|
|
class="inline-block px-8 py-10 text-left align-bottom transition-all transform luxury-card rounded-3xl dark:bg-slate-900 border-slate-200/50 dark:border-slate-700/50 shadow-2xl sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full overflow-visible">
|
|
<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">{{
|
|
__('Add Pass Code') }}</h3>
|
|
<button @click="showCreateModal = false"
|
|
class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-colors">
|
|
<svg class="w-6 h-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>
|
|
|
|
<form action="{{ route('admin.sales.pass-codes.store') }}" method="POST" class="space-y-6"
|
|
@submit.prevent="validateAndSubmit">
|
|
@csrf
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div class="space-y-2">
|
|
<label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">
|
|
{{ __('Target Machine') }} <span class="text-rose-500">*</span>
|
|
</label>
|
|
<x-searchable-select name="machine_id" id="modal-pass-machine"
|
|
:placeholder="__('Please select a machine')" x-model="selectedMachine"
|
|
@change="selectedMachine = $event.target.value">
|
|
@foreach($machines as $machine)
|
|
<option value="{{ $machine->id }}"
|
|
data-title="{{ $machine->name }} ({{ $machine->serial_no }})">{{ $machine->name }}
|
|
({{ $machine->serial_no }})</option>
|
|
@endforeach
|
|
</x-searchable-select>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">
|
|
{{ __('Description / Name') }} <span class="text-rose-500">*</span>
|
|
</label>
|
|
<input type="text" name="name" x-model="passCodeName" class="luxury-input w-full"
|
|
placeholder="{{ __('e.g. Test Code for Maintenance') }}">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<div class="flex items-center justify-between mb-1">
|
|
<label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">
|
|
{{ __('Pass Code (8 Digits)') }} <span class="text-rose-500">*</span>
|
|
</label>
|
|
<button type="button" @click="generateRandomCode()"
|
|
class="text-[10px] font-black text-cyan-500 hover:text-cyan-600 uppercase tracking-widest flex items-center gap-1 transition-colors">
|
|
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
|
|
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
|
</svg>
|
|
{{ __('Regenerate') }}
|
|
</button>
|
|
</div>
|
|
<input type="text" name="custom_code" x-model="customCode"
|
|
class="luxury-input w-full py-4 font-mono text-2xl tracking-[0.3em] text-center text-cyan-600 dark:text-cyan-400 bg-cyan-50/30 dark:bg-cyan-500/5"
|
|
maxlength="12" required>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">
|
|
{{ __('Validity Period (Days)') }}
|
|
</label>
|
|
<div
|
|
class="bg-slate-50 dark:bg-slate-800/40 rounded-[2rem] p-6 border border-slate-100 dark:border-slate-800/50 shadow-sm">
|
|
<div class="flex items-center gap-6 mb-6">
|
|
<button type="button" @click="expiresDays = Math.max(0, parseInt(expiresDays || 0) - 1)"
|
|
class="shrink-0 w-12 h-12 rounded-xl bg-white dark:bg-slate-800 flex items-center justify-center text-slate-400 hover:text-cyan-500 hover:shadow-lg active:scale-90 transition-all border border-slate-100 dark:border-slate-800">
|
|
<svg class="w-4 h-4 stroke-[2.5]" fill="none" stroke="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4" />
|
|
</svg>
|
|
</button>
|
|
<div class="flex-1 relative">
|
|
<input type="number" name="expires_days" x-model="expiresDays"
|
|
class="w-full bg-transparent border-none text-center font-black text-3xl text-slate-800 dark:text-white focus:ring-0 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
|
|
placeholder="{{ __('Permanent') }}">
|
|
<div
|
|
class="text-center mt-1 text-[10px] font-black text-slate-400 uppercase tracking-[0.2em]">
|
|
{{ __('Days') }}</div>
|
|
</div>
|
|
<button type="button" @click="expiresDays = parseInt(expiresDays || 0) + 1"
|
|
class="shrink-0 w-12 h-12 rounded-xl bg-white dark:bg-slate-800 flex items-center justify-center text-slate-400 hover:text-cyan-500 hover:shadow-lg active:scale-90 transition-all border border-slate-100 dark:border-slate-800">
|
|
<svg class="w-4 h-4 stroke-[2.5]" fill="none" stroke="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="pt-6 border-t border-slate-100 dark:border-slate-800/50">
|
|
<div class="flex items-center justify-between mb-3 px-1">
|
|
<span class="text-[10px] font-black text-slate-400 uppercase tracking-widest">{{
|
|
__('Estimated Expiry') }}</span>
|
|
<template x-if="!expiresDays || expiresDays <= 0">
|
|
<span
|
|
class="text-[10px] font-black text-emerald-500 uppercase tracking-widest px-2 py-0.5 bg-emerald-500/10 rounded-lg border border-emerald-500/20">{{
|
|
__('Permanent Code') }}</span>
|
|
</template>
|
|
</div>
|
|
<div
|
|
class="bg-white dark:bg-slate-900/50 rounded-2xl p-4 border border-slate-100 dark:border-slate-700/50 flex items-center justify-center gap-3">
|
|
<svg class="w-5 h-5 text-cyan-500/50 shrink-0" fill="none" stroke="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<span
|
|
class="text-xl font-mono font-black text-slate-700 dark:text-slate-200 tracking-wider"
|
|
x-text="calculateExpiry()"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-end gap-x-4 pt-8">
|
|
<button type="button" @click="showCreateModal = false" class="btn-luxury-ghost px-8">
|
|
{{ __('Cancel') }}
|
|
</button>
|
|
<button type="submit" class="btn-luxury-primary px-12">
|
|
{{ __('Create') }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Edit Modal --}}
|
|
<div x-show="showEditModal" class="fixed inset-0 z-50 overflow-y-auto"
|
|
x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-200"
|
|
x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-cloak>
|
|
<div class="flex items-center justify-center min-h-screen px-4 pb-20 text-center sm:block sm:p-0">
|
|
<div class="fixed inset-0 transition-opacity bg-slate-900/60 backdrop-blur-sm"
|
|
@click="showEditModal = false"></div>
|
|
|
|
<div x-show="showEditModal" x-transition:enter="ease-out duration-300"
|
|
x-transition:enter-start="opacity-0 translate-y-4 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 sm:scale-100"
|
|
x-transition:leave-end="opacity-0 translate-y-4 sm:scale-95"
|
|
class="inline-block px-8 py-10 text-left align-bottom transition-all transform luxury-card rounded-3xl dark:bg-slate-900 border-slate-200/50 dark:border-slate-700/50 shadow-2xl sm:my-8 sm:align-middle sm:max-w-xl sm:w-full overflow-visible">
|
|
<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">{{
|
|
__('Edit Pass Code') }}</h3>
|
|
<button @click="showEditModal = false"
|
|
class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-colors">
|
|
<svg class="w-6 h-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>
|
|
|
|
<form :action="editFormAction" method="POST" class="space-y-6">
|
|
@csrf
|
|
@method('PATCH')
|
|
<div class="space-y-2">
|
|
<label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">
|
|
{{ __('Description / Name') }} <span class="text-rose-500">*</span>
|
|
</label>
|
|
<input type="text" name="name" x-model="editPassCodeName" class="luxury-input w-full"
|
|
placeholder="{{ __('e.g. Test Code for Maintenance') }}" required>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">
|
|
{{ __('Expires At') }}
|
|
</label>
|
|
<x-luxury-datetime-input name="expires_at" :value="''"
|
|
:placeholder="__('Permanent if empty')" />
|
|
</div>
|
|
|
|
<div class="flex gap-4 pt-4">
|
|
<button type="button" @click="showEditModal = false"
|
|
class="flex-1 px-8 py-4 rounded-2xl bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 font-black text-xs uppercase tracking-[0.2em] hover:bg-slate-200 dark:hover:bg-slate-700 transition-all">
|
|
{{ __('Cancel') }}
|
|
</button>
|
|
<button type="submit"
|
|
class="flex-[2] px-8 py-4 rounded-2xl bg-cyan-500 text-white font-black text-xs uppercase tracking-[0.2em] hover:bg-cyan-600 shadow-xl shadow-cyan-500/25 transition-all active:scale-95">
|
|
{{ __('Update Pass Code') }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- QR Modal --}}
|
|
<div x-show="showQrModal" class="fixed inset-0 z-[200] overflow-y-auto" x-cloak
|
|
x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-200"
|
|
x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
|
|
<div class="flex items-center justify-center min-h-screen px-4">
|
|
<div class="fixed inset-0 transition-opacity" @click="showQrModal = false">
|
|
<div class="absolute inset-0 bg-slate-900/60 backdrop-blur-sm"></div>
|
|
</div>
|
|
|
|
<div
|
|
class="relative bg-white dark:bg-slate-900 rounded-[2.5rem] shadow-2xl border border-slate-100 dark:border-slate-800 w-full max-w-sm overflow-hidden animate-luxury-in">
|
|
<div
|
|
class="px-8 py-6 border-b border-slate-50 dark:border-slate-800/50 flex justify-between items-center">
|
|
<div>
|
|
<h3 class="text-xl font-black text-slate-800 dark:text-white tracking-tight">{{ __('QR Code') }}
|
|
</h3>
|
|
<p class="text-xs font-bold text-cyan-600 dark:text-cyan-400 mt-1 uppercase tracking-widest">
|
|
{{ __('Pass Code') }}: <span class="font-mono" x-text="activeQrCode"></span>
|
|
</p>
|
|
</div>
|
|
<button @click="showQrModal = false" class="text-slate-400 hover:text-slate-600 transition-colors">
|
|
<svg class="w-6 h-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>
|
|
|
|
<div class="p-10 flex flex-col items-center gap-6">
|
|
<div class="p-4 bg-white rounded-3xl shadow-xl border border-slate-100">
|
|
<x-qr-code data="activeQrCode" size="200" class="w-48 h-48" />
|
|
</div>
|
|
|
|
<div class="text-center w-full space-y-4">
|
|
<p class="text-xs font-bold text-slate-500 dark:text-slate-400 leading-relaxed px-4">
|
|
{{ __('Scan this code at the machine or share the link with the maintenance staff.') }}
|
|
</p>
|
|
|
|
<div class="flex items-center justify-center gap-3">
|
|
{{-- Copy Link Button --}}
|
|
<button @click="copyQrLink()"
|
|
class="flex-1 py-3 px-4 rounded-xl bg-slate-50 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:text-cyan-500 hover:bg-cyan-500/5 dark:hover:bg-cyan-500/10 border border-slate-100 dark:border-slate-700 hover:border-cyan-500/20 transition-all flex items-center justify-center gap-2 group"
|
|
title="{{ __('Copy Link') }}">
|
|
<svg class="w-4 h-4 stroke-[2.5]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 006.364 6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
|
|
</svg>
|
|
<span class="text-xs font-black uppercase tracking-widest">{{ __('Link') }}</span>
|
|
</button>
|
|
|
|
{{-- Copy Code Button --}}
|
|
<button @click="copyQrCode()"
|
|
class="flex-1 py-3 px-4 rounded-xl bg-slate-50 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:text-cyan-500 hover:bg-cyan-500/5 dark:hover:bg-cyan-500/10 border border-slate-100 dark:border-slate-700 hover:border-cyan-500/20 transition-all flex items-center justify-center gap-2 group"
|
|
title="{{ __('Copy Code') }}">
|
|
<svg class="w-4 h-4 stroke-[2.5]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
|
|
</svg>
|
|
<span class="text-xs font-black uppercase tracking-widest">{{ __('Copy') }}</span>
|
|
</button>
|
|
|
|
{{-- Download Image Button --}}
|
|
<button @click="downloadQrCode()"
|
|
class="flex-1 py-3 px-4 rounded-xl bg-slate-50 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:text-emerald-500 hover:bg-emerald-500/5 dark:hover:bg-emerald-500/10 border border-slate-100 dark:border-slate-700 hover:border-emerald-500/20 transition-all flex items-center justify-center gap-2 group"
|
|
title="{{ __('Download Image') }}">
|
|
<svg class="w-4 h-4 stroke-[2.5]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M7.5 12l4.5 4.5m0 0l4.5-4.5M12 3v13.5" />
|
|
</svg>
|
|
<span class="text-xs font-black uppercase tracking-widest">{{ __('Save') }}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="px-8 py-6 bg-slate-50 dark:bg-slate-900/50 flex justify-center border-t border-slate-100 dark:border-slate-800">
|
|
<button @click="showQrModal = false" class="btn-luxury-primary w-full py-4 rounded-2xl">{{
|
|
__('Close') }}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Delete Modal --}}
|
|
<x-confirm-modal alpineVar="showDeleteModal" confirmAction="submitDelete()" :title="__('Confirm Deactivation')"
|
|
:message="__('Are you sure you want to deactivate this pass code? It will no longer be usable for authentication.')"
|
|
:confirmText="__('Yes, Deactivate')" :cancelText="__('Cancel')" iconType="danger" confirmColor="rose" />
|
|
</div>
|
|
@endsection |