@extends('layouts.app')

@section('title', 'Backup')
@section('page', 'backup')

@section('content')
  @if (session('success'))
    <x-alert class="mb-3" variant="success" icon="bi-check-circle">{{ session('success') }}</x-alert>
  @endif

  @if ($errors->any())
    <x-alert class="mb-3" variant="danger" icon="bi-exclamation-triangle">{{ $errors->first() }}</x-alert>
  @endif

  <x-data-table
    id="backups-table"
    class="catalog-table"
    title="Backup"
    subtitle="Create, download, and restore database backups for {{ $dbName }}."
    search-placeholder="Search backups..."
    :selectable="false"
    :page-size="10"
  >
    <x-slot:toolbarActions>
      @if ($canManage ?? false)
        <form method="post" action="{{ route('settings.backup.store') }}" class="d-inline">
          @csrf
          <button type="submit" class="btn btn-primary">
            <i class="bi bi-plus-lg"></i> Create Backup
          </button>
        </form>
      @endif
    </x-slot:toolbarActions>
    <x-slot:afterToolbar>
      <div class="product-stats-panel">
        <div class="row g-3 product-stats product-stats--4 justify-content-start">
          <div class="col-6 col-md-3 product-stat-col">
            <div class="product-kpi product-kpi--primary">
              <span class="product-kpi__icon" aria-hidden="true">
                <span class="product-kpi__glyph"><i class="bi bi-hdd"></i></span>
              </span>
              <div class="product-kpi__body">
                <p class="product-kpi__label">Backups</p>
                <p class="product-kpi__value">{{ $backups->count() }}</p>
                <p class="product-kpi__meta">Stored locally</p>
              </div>
            </div>
          </div>
          <div class="col-6 col-md-3 product-stat-col">
            <div class="product-kpi product-kpi--success">
              <span class="product-kpi__icon" aria-hidden="true">
                <span class="product-kpi__glyph"><i class="bi bi-database"></i></span>
              </span>
              <div class="product-kpi__body">
                <p class="product-kpi__label">Database</p>
                <p class="product-kpi__value" style="font-size:1rem;">{{ $dbName }}</p>
                <p class="product-kpi__meta">Active connection</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </x-slot:afterToolbar>
    <x-slot:head>
      <x-data-table-th label="File" col="file" />
      <x-data-table-th label="Size" col="size" sort-type="number" />
      <x-data-table-th label="Created" col="created" />
    </x-slot:head>
    <x-slot:body>
      @forelse ($backups as $row)
        <tr>
          <td data-col="file" class="cell-primary">{{ $row['name'] }}</td>
          <td data-col="size" data-sort-value="{{ $row['size'] }}">{{ $row['size_label'] }}</td>
          <td data-col="created" data-sort-value="{{ $row['modified_ts'] }}">{{ $row['modified_at'] }}</td>
          <td data-edt-actions>
            <div class="edt-row-actions product-actions">
              <a
                href="{{ route('settings.backup.download', $row['name']) }}"
                class="btn btn-sm btn-icon product-action"
                title="Download"
                aria-label="Download"
              >
                <i class="bi bi-download" aria-hidden="true"></i>
              </a>
              @if ($canManage ?? false)
                <form method="post" action="{{ route('settings.backup.restore', $row['name']) }}" class="d-inline" data-backup-restore>
                  @csrf
                  <button type="submit" class="btn btn-sm btn-icon product-action product-action--edit" title="Restore" aria-label="Restore">
                    <i class="bi bi-arrow-counterclockwise" aria-hidden="true"></i>
                  </button>
                </form>
                <form method="post" action="{{ route('settings.backup.destroy', $row['name']) }}" class="d-inline" data-backup-delete>
                  @csrf
                  @method('DELETE')
                  <button type="submit" class="btn btn-sm btn-icon product-action product-action--delete" title="Delete" aria-label="Delete">
                    <i class="bi bi-trash" aria-hidden="true"></i>
                  </button>
                </form>
              @endif
            </div>
          </td>
        </tr>
      @empty
        <tr data-edt-empty-row>
          <td colspan="4" class="text-center text-muted py-4">No backups yet. Create your first database backup.</td>
        </tr>
      @endforelse
    </x-slot:body>
  </x-data-table>
@endsection

@push('styles')
  <link href="{{ asset('assets/css/pages/products.css') }}" rel="stylesheet">
@endpush

@push('scripts')
  <script>
    document.addEventListener('submit', function (e) {
      const restore = e.target.closest('[data-backup-restore]');
      if (restore && !confirm('Restore this backup? Current database data will be overwritten.')) {
        e.preventDefault();
        return;
      }
      const del = e.target.closest('[data-backup-delete]');
      if (del && !confirm('Delete this backup file?')) {
        e.preventDefault();
      }
    });
  </script>
@endpush