@extends('layouts.master')

@section('content')
@push('styles')
<style>
  /* --- Glass container --- */
  .glass-container {
    max-width: 600px;
    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);
  }

  /* --- Form controls --- */
  .glass-container .form-control {
    transition: background-color .3s, color .3s, border-color .3s;
  }
  body.light-mode .glass-container .form-control {
    background-color: #fff;
    color: #212529;
    border: 1px solid #ccc;
  }
  body.light-mode .glass-container .form-control::placeholder {
    color: #888;
  }
  body.dark-mode .glass-container .form-control {
    background-color: #2a2a2a;
    color: #e0e0e0;
    border: 1px solid #555;
  }
  body.dark-mode .glass-container .form-control::placeholder {
    color: #777;
  }

  /* --- Buttons --- */
  .glass-container .btn {
    transition: background .3s, border-color .3s, color .3s;
  }
  body.dark-mode .btn-success {
    background-color: #4caf50 !important;
    border-color:    #4caf50 !important;
    color:           #000     !important;
  }
  body.dark-mode .btn-secondary {
    background-color: #6c757d !important;
    border-color:    #6c757d !important;
    color:           #fff     !important;
  }
</style>
@endpush

<div class="glass-container">
  <h2 class="mb-4">➕ Nowy temat pomocy</h2>

  <form action="{{ route('admin.help-topics.store') }}" method="POST">
    @csrf

    <div class="mb-3">
      <label for="name" class="form-label">Nazwa tematu</label>
      <input
        id="name"
        name="name"
        type="text"
        class="form-control @error('name') is-invalid @enderror"
        placeholder="Wprowadź nazwę..."
        required>
      @error('name')
        <div class="invalid-feedback">{{ $message }}</div>
      @enderror
    </div>

    <div class="d-flex gap-2">
      <button type="submit" class="btn btn-success">Zapisz</button>
      <a href="{{ route('admin.help-topics.index') }}" class="btn btn-secondary">Anuluj</a>
    </div>
  </form>
</div>
@endsection