@extends('layouts.master')

@section('content')
@php
    $rola   = auth()->user()->rola->nazwa ?? 'Użytkownik';
    $prefix = match ($rola) {
        'Administrator' => 'admin',
        'Moderator'     => 'moderator',
        'Serwisant'     => 'serwisant',
        default         => 'admin',
    };
@endphp

@push('styles')
<style>
  /* --- Glass container --- */
  .glass-container {
    max-width: 900px;           /* cap width */
    margin: 2rem auto;          /* center horizontally and give top/bottom space */
    backdrop-filter: blur(12px);
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 20px;
    padding: 1.5rem;            /* slightly reduced padding */
    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);
  }

  /* --- Table styling --- */
  .glass-container .table {
    background: transparent;
  }
  .glass-container .table th {
    background-color: #e3f2fd;
    color: #0d47a1;
    transition: background .3s, color .3s;
  }
  body.dark-mode .glass-container .table th {
    background-color: #2a2a2a;
    color: #bbdefb;
  }
  body.dark-mode .glass-container .table td {
    background-color: #1f1f1f;
    color: #f1f1f1;
  }
  .glass-container .table-hover tbody tr:hover {
    background-color: #d6e4ff;
  }
  body.dark-mode .glass-container .table-hover tbody tr:hover {
    background-color: #2c3e50;
  }

  /* --- Badges & Buttons --- */
  .glass-container .badge,
  .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-outline-primary {
    color: #90caf9 !important;
    border-color: #90caf9 !important;
  }
  body.dark-mode .btn-outline-primary:hover {
    background-color: #90caf9 !important;
    color: #000 !important;
  }
  body.dark-mode .btn-outline-danger {
    color: #ef9a9a !important;
    border-color: #ef9a9a !important;
  }
  body.dark-mode .btn-outline-danger:hover {
    background-color: #ef9a9a !important;
    color: #000 !important;
  }
</style>
@endpush

<div class="glass-container">
  <h1 class="mb-3">Statusy zgłoszeń</h1>

  <a href="{{ route($prefix . '.statuses.create') }}" class="btn btn-primary mb-3">
    ➕ Dodaj status
  </a>

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

  <div class="table-responsive">
    <table class="table table-hover mb-0">
      <thead>
        <tr>
          <th>Nazwa</th>
          <th>Kolor</th>
          <th>Akcje</th>
        </tr>
      </thead>
      <tbody>
        @forelse($statuses as $status)
          <tr>
            <td>{{ $status->nazwa }}</td>
            <td>
              <span class="badge" style="background-color: {{ $status->kolor }}; color: #fff;">
                {{ $status->kolor }}
              </span>
            </td>
            <td>
              <a href="{{ route($prefix . '.statuses.edit', $status) }}"
                 class="btn btn-sm btn-outline-primary">
                Edytuj
              </a>

              @if($status->id_status > 6)
                <form action="{{ route($prefix . '.statuses.destroy', $status) }}"
                      method="POST"
                      class="d-inline"
                      onsubmit="return confirm('Na pewno usunąć?')">
                  @csrf
                  @method('DELETE')
                  <button class="btn btn-sm btn-outline-danger">Usuń</button>
                </form>
              @else
                <button class="btn btn-sm btn-outline-secondary" disabled>Usuń</button>
              @endif
            </td>
          </tr>
        @empty
          <tr>
            <td colspan="3" class="text-center text-muted">Brak zdefiniowanych statusów.</td>
          </tr>
        @endforelse
      </tbody>
    </table>
  </div>
</div>
@endsection