@extends('layouts.app')
@section('content')
<div class="top"><div><div class="eyebrow">Postavke · sigurnost</div><h1>Windows instalacije</h1></div><a class="btn secondary" href="{{ route('settings.index') }}">← Postavke</a></div>
@if(session('new_api_token'))<div class="card api-token-card"><strong>Novi API ključ — kopirajte ga sada</strong><code id="api-token">{{ session('new_api_token') }}</code><button class="btn" type="button" onclick="navigator.clipboard.writeText(document.getElementById('api-token').textContent)">Kopiraj ključ</button><small>Nakon napuštanja ove stranice puni ključ više nije moguće prikazati.</small></div>@endif
@if(session('api_test'))
@php($test=session('api_test'))
<div class="card api-test-result"><div><span class="eyebrow">Test povezivanja uspješan</span><h2>{{ $test['device'] }}</h2></div><dl><div><dt>Datum plana</dt><dd>{{ \Carbon\Carbon::parse($test['date'])->format('d.m.Y.') }}</dd></div><div><dt>Ukupno termina</dt><dd>{{ $test['plays'] }}</dd></div><div><dt>Spremno za playout</dt><dd>{{ $test['ready'] }}</dd></div><div><dt>Odbijeno</dt><dd>{{ $test['rejected'] }}</dd></div></dl></div>
@endif
<div class="card"><h2>Dodaj Windows računalo</h2><form method="post" action="{{ route('settings.security.devices.store') }}">@csrf<div class="fields"><div class="field"><label>Naziv instalacije *</label><input name="name" placeholder="npr. Studio Rovinj – glavni playout" required></div><div class="field"><label>Napomena</label><input name="notes" placeholder="Računalo, lokacija ili namjena"></div></div><button class="btn">Generiraj API ključ</button></form></div>
<details class="card api-test-card" @if($errors->has('api_token') || $errors->has('test_date')) open @endif><summary><strong>Testiraj API ključ i dnevni plan</strong><span>Provjera prije instalacije Windows aplikacije</span></summary><form method="post" action="{{ route('settings.security.devices.test') }}">@csrf<div class="fields"><div class="field"><label>API ključ *</label><input type="password" name="api_token" autocomplete="off" placeholder="rsp_…" required></div><div class="field"><label>Datum plana *</label><input type="date" name="test_date" value="{{ old('test_date',today()->format('Y-m-d')) }}" required></div></div><button class="btn">Testiraj povezivanje</button><small>Ključ se samo provjerava i ne sprema se u otvorenom obliku.</small></form></details>
<div class="section-title"><h2>Registrirane instalacije</h2><a class="btn secondary" href="{{ route('settings.security.exports') }}">Evidencija FPS izvoza</a></div><div class="table-scroll"><table><thead><tr><th>Naziv</th><th>Ključ</th><th>Zadnja veza</th><th>IP / verzija</th><th>Status veze</th><th>Akcije</th></tr></thead><tbody>@forelse($devices as $device)@php($syncStatus=!$device->active?'Opozvana':(!$device->last_seen_at?'Čeka prvo spajanje':($device->last_seen_at->gt(now()->subMinutes(2))?'Online':($device->last_seen_at->gt(now()->subMinutes(15))?'Kasni':'Offline'))))<tr><td><strong>{{ $device->name }}</strong><small class="cell-note">{{ $device->notes }}</small></td><td><code>{{ $device->token_prefix }}…</code></td><td>{{ $device->last_seen_at?->format('d.m.Y. H:i:s') ?? 'Još nije spojena' }}</td><td>{{ $device->last_ip ?: '—' }}<small class="cell-note">{{ $device->app_version }}</small></td><td><span class="sync-state sync-{{ Str::slug($syncStatus) }}">{{ $syncStatus }}</span></td><td><div class="device-actions"><form method="post" action="{{ route('settings.security.devices.regenerate',$device) }}">@csrf<button type="submit" class="device-action" data-device-tooltip="Generiraj novi API ključ" aria-label="Generiraj novi API ključ"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 7v5h-5M4 17v-5h5M6.1 8.1A7 7 0 0 1 18.7 10M17.9 15.9A7 7 0 0 1 5.3 14"/></svg></button></form><form method="post" action="{{ route('settings.security.devices.toggle',$device) }}">@csrf<button type="submit" class="device-action {{ $device->active?'device-action-warning':'device-action-success' }}" data-device-tooltip="{{ $device->active?'Opozovi API ključ':'Ponovno aktiviraj API ključ' }}" aria-label="{{ $device->active?'Opozovi API ključ':'Ponovno aktiviraj API ključ' }}">@if($device->active)<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="m6 6 12 12"/></svg>@else<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m5 12 4 4L19 6"/></svg>@endif</button></form><form method="post" action="{{ route('settings.security.devices.destroy',$device) }}" data-confirm="Obrisati ovu instalaciju i trajno ukinuti njezin pristup?">@csrf @method('DELETE')<button type="submit" class="device-action device-action-danger" data-device-tooltip="Obriši instalaciju" aria-label="Obriši instalaciju"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M9 7V4h6v3m3 0-1 13H7L6 7m4 4v5m4-5v5"/></svg></button></form></div></td></tr>@empty<tr><td colspan="6">Nema registriranih Windows instalacija.</td></tr>@endforelse</tbody></table></div>
<style>
.device-actions{display:flex;align-items:center;gap:6px;white-space:nowrap}.device-actions form{margin:0}.device-action{display:inline-grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--paper,#fff);color:var(--brand);cursor:pointer;transition:border-color .15s ease,background .15s ease,transform .15s ease}.device-action svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.device-action:hover{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 8%,var(--paper,#fff));transform:translateY(-1px)}.device-action-warning{color:#b7791f}.device-action-warning:hover{border-color:#b7791f;background:color-mix(in srgb,#b7791f 9%,var(--paper,#fff))}.device-action-success{color:#13805f}.device-action-success:hover{border-color:#13805f;background:color-mix(in srgb,#13805f 9%,var(--paper,#fff))}.device-action-danger{color:var(--danger,#c62828)}.device-action-danger:hover{border-color:var(--danger,#c62828);background:color-mix(in srgb,var(--danger,#c62828) 8%,var(--paper,#fff))}.device-floating-tooltip{position:fixed;z-index:10000;padding:7px 10px;border-radius:7px;background:#122d25;color:#fff;font-size:12px;font-weight:700;line-height:1;white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-50%,-4px);transition:opacity .12s ease,transform .12s ease;box-shadow:0 7px 20px rgba(0,0,0,.2)}.device-floating-tooltip.visible{opacity:1;transform:translate(-50%,0)}
</style>
<script>
document.addEventListener('DOMContentLoaded',()=>{const tip=document.createElement('div');tip.className='device-floating-tooltip';tip.setAttribute('role','tooltip');document.body.appendChild(tip);let active=null;const place=el=>{const r=el.getBoundingClientRect();tip.textContent=el.dataset.deviceTooltip;tip.classList.add('visible');const h=tip.offsetHeight;tip.style.left=(r.left+r.width/2)+'px';tip.style.top=((r.top-h-9)>6?r.top-h-9:r.bottom+9)+'px'};document.querySelectorAll('[data-device-tooltip]').forEach(el=>{el.addEventListener('mouseenter',()=>{active=el;place(el)});el.addEventListener('mouseleave',()=>{active=null;tip.classList.remove('visible')});el.addEventListener('focus',()=>{active=el;place(el)});el.addEventListener('blur',()=>{active=null;tip.classList.remove('visible')})});window.addEventListener('scroll',()=>active&&place(active),true);window.addEventListener('resize',()=>active&&place(active))});
</script>
@endsection