@extends('layouts.master')

@section('content')
@push('styles')
<style>
  /* --- Glass wrapper --- */
  .glass-container {
    max-width: 1000px;
    margin: 1.5rem 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,
  .glass-container .form-select {
    transition: background-color .3s, color .3s, border-color .3s;
  }
  body.light-mode .glass-container .form-control,
  body.light-mode .glass-container .form-select {
    background-color: #fff;
    color: #212529;
    border: 1px solid #ccc;
  }
  body.dark-mode .glass-container .form-control,
  body.dark-mode .glass-container .form-select {
    background-color: #2b2b2b;
    color: #e0e0e0;
    border: 1px solid #555;
  }
  body.dark-mode .glass-container .form-control::placeholder,
  body.dark-mode .glass-container .form-select::placeholder {
    color: #777;
  }

  /* --- Table styling --- */
  .glass-container .table thead th {
    background-color: #e3f2fd;
    color: #0d47a1;
    transition: background .3s, color .3s;
  }
  body.dark-mode .glass-container .table thead th {
    background-color: #2a2a2a;
    color: #bbdefb;
  }
  .glass-container .table tbody tr:hover {
    background-color: #d6e4ff;
  }
  body.dark-mode .glass-container .table tbody tr:hover {
    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-success {
    background-color: #388e3c !important;
    border-color: #388e3c !important;
    color: #fff !important;
  }
</style>
@endpush

<div class="glass-container">
  <h2 class="mb-4">👥 Zarządzanie użytkownikami</h2>

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

  {{-- Filters --}}
  <form method="GET" class="row g-3 mb-4">
    <div class="col-md-4">
      <input type="text"
             name="name"
             class="form-control"
             placeholder="Imię"
             value="{{ request('name') }}">
    </div>
    <div class="col-md-4">
      <input type="text"
             name="email"
             class="form-control"
             placeholder="Email"
             value="{{ request('email') }}">
    </div>
    <div class="col-md-4 d-grid">
      <button class="btn btn-primary w-100" type="submit">Filtruj</button>
    </div>
  </form>

  {{-- Role update form --}}
  <form method="POST" action="{{ route('admin.users.update-roles') }}">
    @csrf
    @method('PUT')

    <div class="table-responsive mb-4">
      <table class="table table-hover text-center mb-0">
        <thead>
          <tr>
            <th>Imię</th>
            <th>Email</th>
            <th>Stanowisko</th>
          </tr>
        </thead>
        <tbody>
          @foreach ($users as $user)
            <tr>
              <td>{{ $user->name }}</td>
              <td>{{ $user->email }}</td>
              <td>
                <select name="roles[{{ $user->id }}]" class="form-select">
                  @foreach ($roles as $role)
                    <option value="{{ $role->id }}"
                      @selected($user->id_roli == $role->id)>
                      {{ $role->nazwa }}
                    </option>
                  @endforeach
                </select>
              </td>
            </tr>
          @endforeach
        </tbody>
      </table>
    </div>

    <div class="d-grid">
      <button type="submit" class="btn btn-success">💾 Zapisz zmiany</button>
    </div>
  </form>

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