@extends('layouts.admin')

@section('content')
@php
    $prefix = request()->is('admin/*') ? 'admin.' : 'moderator.';
@endphp

@push('styles')
<style>
  /* --- Glass container --- */
  .glass-container {
    max-width: 600px;
    margin: 2rem auto;
    backdrop-filter: blur(12px);
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 20px;
    padding: 2rem;
    transition: background .3s, border-color .3s;
  }
  body.dark-mode .glass-container {
    background: rgba(30,30,40,0.6);
    border-color: rgba(255,255,255,0.1);
  }

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

  /* placeholder colors */
  body.light-mode .glass-container .form-control::placeholder { color: #888; }
  body.dark-mode  .glass-container .form-control::placeholder { color: #777; }

  /* --- Labels --- */
  .glass-container .form-label {
    transition: color .3s;
  }
  body.light-mode .glass-container .form-label { color: #212529; }
  body.dark-mode  .glass-container .form-label { color: #e0e0e0; }

  /* --- Buttons --- */
  .glass-container .btn {
    min-width: 100px;
    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-secondary {
    background-color: #6c757d !important;
    border-color:     #6c757d !important;
    color:            #fff     !important;
  }
</style>
@endpush

<div class="glass-container">
  <h1 class="mb-4">➕ Nowy status zgłoszenia</h1>

  <form method="POST" action="{{ route($prefix . 'statuses.store') }}">
    @csrf

    <div class="mb-3">
      <label for="nazwa" class="form-label">Nazwa</label>
      <input id="nazwa"
             type="text"
             name="nazwa"
             class="form-control"
             value="{{ old('nazwa') }}"
             required>
    </div>

    <div class="mb-4">
      <label for="kolor" class="form-label">Kolor (HEX)</label>
      <input id="kolor"
             type="color"
             name="kolor"
             class="form-control form-control-color"
             value="{{ old('kolor', '#28a745') }}"
             title="Wybierz kolor"
             required>
    </div>

    <div class="d-flex gap-2">
      <button type="submit" class="btn btn-primary">Dodaj</button>
      <a href="{{ route($prefix . 'statuses.index') }}" class="btn btn-secondary">Anuluj</a>
    </div>
  </form>
</div>
@endsection