@extends('layouts.app')
@section('content')
<div class="top"><div><div class="eyebrow">Postavke · sigurnost</div><h1>Sigurnosne kopije baze</h1></div><a class="btn secondary" href="{{ route('settings.index') }}">← Postavke</a></div>
@if($errors->has('backup'))<div class="alert backup-error">{{ $errors->first('backup') }}</div>@endif
<div class="card backup-intro"><div><h2>MySQL sigurnosna kopija</h2><p>Kopija sadrži strukturu i podatke svih tablica. Datoteka je komprimirana u formatu <code>.sql.gz</code>.</p></div><form method="post" action="{{ route('settings.backups.store') }}">@csrf<button class="btn">Izradi backup sada</button></form></div>
<div class="backup-schedule-note"><strong>Automatski backup: svaki dan u 03:15</strong><span>Na hostingu treba uključiti cron koji jednom u minuti pokreće <code>php artisan schedule:run</code>. Kopije starije od 30 dana automatski se brišu.</span></div>
<h2 style="margin-top:26px">Dostupne kopije</h2><div class="table-scroll"><table><thead><tr><th>Datoteka</th><th>Vrijeme izrade</th><th>Veličina</th><th>Akcije</th></tr></thead><tbody>@forelse($backups as $backup)<tr><td><strong>{{ $backup['name'] }}</strong></td><td>{{ $backup['created_at']->format('d.m.Y. H:i:s') }}</td><td>{{ number_format($backup['size']/1024/1024,2,',','.') }} MB</td><td><div class="backup-actions"><a class="backup-action" href="{{ route('settings.backups.download',$backup['name']) }}" data-backup-tooltip="Preuzmi sigurnosnu kopiju" aria-label="Preuzmi sigurnosnu kopiju"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3v12m0 0 5-5m-5 5-5-5M5 20h14"/></svg></a><form method="post" action="{{ route('settings.backups.destroy',$backup['name']) }}" data-confirm="Obrisati ovu sigurnosnu kopiju?">@csrf @method('DELETE')<button type="submit" class="backup-action backup-action-danger" data-backup-tooltip="Obriši sigurnosnu kopiju" aria-label="Obriši sigurnosnu kopiju"><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="4">Još nema sigurnosnih kopija.</td></tr>@endforelse</tbody></table></div>
<style>
.backup-actions{display:flex;align-items:center;gap:6px;white-space:nowrap}.backup-actions form{margin:0}.backup-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}.backup-action svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.backup-action:hover{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 8%,var(--paper,#fff));transform:translateY(-1px)}.backup-action-danger{color:var(--danger,#c62828)}.backup-action-danger:hover{border-color:var(--danger,#c62828);background:color-mix(in srgb,var(--danger,#c62828) 8%,var(--paper,#fff))}
.backup-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)}.backup-floating-tooltip.visible{opacity:1;transform:translate(-50%,0)}
</style>
<script>
document.addEventListener('DOMContentLoaded',()=>{const tip=document.createElement('div');tip.className='backup-floating-tooltip';tip.setAttribute('role','tooltip');document.body.appendChild(tip);let active=null;const place=el=>{const r=el.getBoundingClientRect();tip.textContent=el.dataset.backupTooltip;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-backup-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