304 lines
8.8 KiB
PHP
304 lines
8.8 KiB
PHP
<div>
|
|
<style>
|
|
/* ---- Branding ---- */
|
|
.qs-brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.qs-brand-logo {
|
|
height: 28px;
|
|
opacity: .85;
|
|
}
|
|
.qs-brand-sep {
|
|
width: 1px;
|
|
height: 18px;
|
|
background: var(--border);
|
|
}
|
|
.qs-brand-label {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
letter-spacing: .12em;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
}
|
|
|
|
/* ---- Section headings ---- */
|
|
.qs-label {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
letter-spacing: .10em;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/* ---- Status grid ---- */
|
|
.qs-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 10px;
|
|
}
|
|
|
|
.qs-btn {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
padding: 18px 12px;
|
|
border-radius: 14px;
|
|
border: 2px solid transparent;
|
|
background: var(--surface);
|
|
cursor: pointer;
|
|
transition: border-color 160ms, background 160ms, transform 80ms;
|
|
-webkit-tap-highlight-color: transparent;
|
|
user-select: none;
|
|
}
|
|
.qs-btn:active { transform: scale(.96); }
|
|
|
|
.qs-btn-icon {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
flex-shrink: 0;
|
|
}
|
|
.qs-btn-name {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--fg);
|
|
}
|
|
.qs-btn-desc {
|
|
font-size: 11px;
|
|
color: var(--muted);
|
|
text-align: center;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
/* Color variants */
|
|
.qs-btn[data-color="green"] .qs-btn-icon { background: #16a34a; color: #fff; }
|
|
.qs-btn[data-color="yellow"] .qs-btn-icon { background: #ca8a04; color: #fff; }
|
|
.qs-btn[data-color="orange"] .qs-btn-icon { background: #ea580c; color: #fff; }
|
|
.qs-btn[data-color="red"] .qs-btn-icon { background: #dc2626; color: #fff; }
|
|
|
|
.qs-btn[data-color="green"].active { border-color: #16a34a; background: rgba(22,163,74,.12); }
|
|
.qs-btn[data-color="yellow"].active { border-color: #ca8a04; background: rgba(202,138,4,.12); }
|
|
.qs-btn[data-color="orange"].active { border-color: #ea580c; background: rgba(234,88,12,.12); }
|
|
.qs-btn[data-color="red"].active { border-color: #dc2626; background: rgba(220,38,38,.12); }
|
|
|
|
/* ---- Inputs ---- */
|
|
.qs-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
.qs-field-label {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: var(--muted);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.qs-input {
|
|
background: var(--surface);
|
|
border: 1.5px solid var(--border);
|
|
border-radius: 10px;
|
|
color: var(--fg);
|
|
font-size: 15px;
|
|
padding: 12px 14px;
|
|
outline: none;
|
|
width: 100%;
|
|
font-family: inherit;
|
|
transition: border-color 150ms;
|
|
}
|
|
.qs-input:focus { border-color: rgba(255,255,255,.3); }
|
|
.qs-input::placeholder { color: rgba(255,255,255,.2); }
|
|
|
|
.qs-error {
|
|
font-size: 12px;
|
|
color: #f87171;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* ---- Save button ---- */
|
|
.qs-save {
|
|
width: 100%;
|
|
padding: 16px;
|
|
border-radius: 14px;
|
|
border: none;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
font-family: inherit;
|
|
letter-spacing: .02em;
|
|
cursor: pointer;
|
|
background: #ffffff;
|
|
color: #0f0f0f;
|
|
transition: opacity 150ms, transform 80ms;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
.qs-save:active { transform: scale(.98); opacity: .9; }
|
|
.qs-save:disabled { opacity: .4; cursor: default; }
|
|
|
|
/* ---- Success toast ---- */
|
|
.qs-toast {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
background: rgba(22,163,74,.2);
|
|
border: 1px solid rgba(22,163,74,.4);
|
|
border-radius: 12px;
|
|
padding: 14px 16px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #86efac;
|
|
}
|
|
.qs-toast-icon {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 50%;
|
|
background: #16a34a;
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ---- Forbidden screen ---- */
|
|
.qs-forbidden {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
padding: 60px 0;
|
|
text-align: center;
|
|
}
|
|
.qs-forbidden-icon {
|
|
font-size: 40px;
|
|
opacity: .4;
|
|
}
|
|
.qs-forbidden-title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: var(--fg);
|
|
}
|
|
.qs-forbidden-sub {
|
|
font-size: 14px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
/* ---- Fields card wrapper ---- */
|
|
.qs-card {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 14px;
|
|
padding: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
}
|
|
</style>
|
|
|
|
{{-- Brand header --}}
|
|
<header class="qs-brand">
|
|
<img src="/_cabinet/logo-cabinet-300.png" alt="CABINET" class="qs-brand-logo">
|
|
<div class="qs-brand-sep"></div>
|
|
<span class="qs-brand-label">Status</span>
|
|
</header>
|
|
|
|
@if(! $authorized)
|
|
|
|
{{-- Not authorized --}}
|
|
<div class="qs-forbidden">
|
|
<div class="qs-forbidden-icon">🔒</div>
|
|
<div class="qs-forbidden-title">Kein Zugriff</div>
|
|
<div class="qs-forbidden-sub">Ungültiger oder fehlender Key.</div>
|
|
</div>
|
|
|
|
@else
|
|
|
|
{{-- Status selector --}}
|
|
<div>
|
|
<div class="qs-label">Status wählen</div>
|
|
<div class="qs-grid">
|
|
@foreach($statusOptions as $value => $opt)
|
|
<button
|
|
type="button"
|
|
class="qs-btn {{ $storeStatus === $value ? 'active' : '' }}"
|
|
data-color="{{ $opt['color'] }}"
|
|
wire:click="selectStatus('{{ $value }}')"
|
|
>
|
|
<div class="qs-btn-icon">{{ $opt['icon'] }}</div>
|
|
<div class="qs-btn-name">{{ $opt['label'] }}</div>
|
|
<div class="qs-btn-desc">{{ $opt['description'] }}</div>
|
|
</button>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Text fields (only for non-auto statuses) --}}
|
|
@if($storeStatus !== 'auto')
|
|
<div class="qs-card">
|
|
<div class="qs-field">
|
|
<label class="qs-field-label">
|
|
<span>Headline</span>
|
|
<span>{{ strlen($noticeHeadline) }}/40</span>
|
|
</label>
|
|
<input
|
|
class="qs-input"
|
|
type="text"
|
|
wire:model.live="noticeHeadline"
|
|
maxlength="40"
|
|
placeholder="z.B. Heute erst ab 11:00 Uhr"
|
|
autocomplete="off"
|
|
>
|
|
@error('noticeHeadline') <span class="qs-error">{{ $message }}</span> @enderror
|
|
</div>
|
|
|
|
<div class="qs-field">
|
|
<label class="qs-field-label">
|
|
<span>Subtext <span style="opacity:.5">(optional)</span></span>
|
|
<span>{{ strlen($noticeSubtext) }}/80</span>
|
|
</label>
|
|
<input
|
|
class="qs-input"
|
|
type="text"
|
|
wire:model.live="noticeSubtext"
|
|
maxlength="80"
|
|
placeholder="z.B. Wegen Kundentermin öffnen wir später."
|
|
autocomplete="off"
|
|
>
|
|
@error('noticeSubtext') <span class="qs-error">{{ $message }}</span> @enderror
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Success feedback --}}
|
|
@if($saved)
|
|
<div class="qs-toast">
|
|
<div class="qs-toast-icon">✓</div>
|
|
<span>Status wurde gespeichert und ist sofort aktiv.</span>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Save button --}}
|
|
<button
|
|
type="button"
|
|
class="qs-save"
|
|
wire:click="save"
|
|
wire:loading.attr="disabled"
|
|
>
|
|
<span wire:loading.remove>Speichern</span>
|
|
<span wire:loading>Wird gespeichert…</span>
|
|
</button>
|
|
|
|
@endif
|
|
</div>
|