@extends('layouts.master')

@section('content')
@push('styles')
<style>
  /* --- Glass container --- */
  .glass-container {
    max-width: 1000px;
    margin: 2rem auto;
    backdrop-filter: blur(12px);
    background: rgba(255,255,255,0.8);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 16px;
    padding: 1.5rem;
    transition: background .3s, border-color .3s;
  }
  body.dark-mode .glass-container {
    background: rgba(30,30,40,0.7);
    border-color: rgba(255,255,255,0.15);
  }

  /* --- Table styling --- */
  .glass-container .table {
    background: transparent;
  }
  .glass-container th {
    background-color: #e3f2fd;
    color: #0d47a1;
    transition: background .3s, color .3s;
  }
  body.dark-mode .glass-container th {
    background-color: #2a2a2a;
    color: #bbdefb;
  }

  /* here’s the new part: give each cell its own background */
  .glass-container td {
    background-color: rgba(255,255,255,0.9);
    transition: background .3s, color .3s;
  }
  body.dark-mode .glass-container td {
    background-color: rgba(50,50,70,0.6);
    color: #f1f1f1;
  }

  .glass-container .table-hover tbody tr:hover td {
    background-color: #d6e4ff;
  }
  body.dark-mode .glass-container .table-hover tbody tr:hover td {
    background-color: #2c3e50;
  }

  /* --- Buttons --- */
  .glass-container .btn { transition: background .3s,border-color .3s,color .3s; }
  body.dark-mode .btn-primary {
    background-color: #90caf9 !important;
    border-color: #90caf9 !important;
    color: #000     !important;
  }
  body.dark-mode .btn-warning {
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
    color: #000     !important;
  }
  body.dark-mode .btn-danger {
    background-color: #d32f2f !important;
    border-color: #d32f2f !important;
    color: #fff     !important;
  }
</style>
@endpush

<div class="glass-container">
  <div class="d-flex justify-content-between align-items-center mb-4">
    <h2 class="mb-0">Tematy pomocy</h2>
    <a href="{{ route('admin.help-topics.create') }}" class="btn btn-primary">
      ➕ Nowy temat
    </a>
  </div>

  @if(session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
  @endif

  <div class="table-responsive">
    <table class="table table-hover text-center mb-0">
      <thead>
        <tr>
          <th>ID</th>
          <th>Nazwa</th>
          <th>Czynności</th>
        </tr>
      </thead>
      <tbody>
        @forelse($topics as $topic)
          <tr>
            <td>{{ $topic->id }}</td>
            <td>{{ $topic->name }}</td>
            <td>
              <div class="d-flex justify-content-center gap-2">
                <a href="{{ route('admin.help-topics.edit', $topic) }}"
                   class="btn btn-warning btn-sm">
                  Edytuj
                </a>
                <form action="{{ route('admin.help-topics.destroy', $topic) }}"
                      method="POST"
                      onsubmit="return confirm('Na pewno usunąć?')">
                  @csrf @method('DELETE')
                  <button class="btn btn-danger btn-sm">Usuń</button>
                </form>
              </div>
            </td>
          </tr>
        @empty
          <tr>
            <td colspan="3" class="text-muted">Brak tematów.</td>
          </tr>
        @endforelse
      </tbody>
    </table>
  </div>

  <div class="mt-4">
    {{ $topics->links() }}
  </div>
</div>
@endsection