@extends('layouts.admin-progress', ['pageTitle' => 'Edit Pengguna - Admin'])

@section('title', 'Edit Pengguna')

@section('styles')
<style>
  .form-group { margin-bottom: 1.5rem; }

  .form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(210, 240, 255, 0.8);
  }

  .form-input {
    width: 100%;
    padding: 0.8rem 1rem;
    background: rgba(23, 190, 187, 0.05);
    border: 1.5px solid rgba(23, 190, 187, 0.2);
    border-radius: 8px;
    color: #e2f0f7;
    font-size: 0.95rem;
    font-family: 'DM Sans', sans-serif;
    transition: all 0.2s;
    box-sizing: border-box;
  }

  .form-input:focus {
    outline: none;
    border-color: rgba(23, 190, 187, 0.6);
    background: rgba(23, 190, 187, 0.1);
    box-shadow: 0 0 0 3px rgba(23, 190, 187, 0.1);
  }

  .form-input option {
    background-color: #0a2540;
    color: #e2f0f7;
  }

  .btn-submit {
    background: linear-gradient(135deg, var(--ocean-cyan), var(--ocean-teal));
    color: var(--ocean-deep);
    font-weight: 700;
    padding: 0.8rem 2rem;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.25s;
    border: none;
    cursor: pointer;
    width: 100%;
  }

  .btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(23, 190, 187, 0.5);
  }

  .btn-cancel {
    background: rgba(244, 67, 54, 0.2);
    color: #EF5350;
    border: 1px solid #EF5350;
    padding: 0.8rem 2rem;
    border-radius: 8px;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.2s;
    display: inline-block;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
  }

  .btn-cancel:hover { background: rgba(244, 67, 54, 0.4); }

  .btn-group { display: flex; gap: 1rem; }

  .error-text { color: #EF5350; font-size: 0.85rem; margin-top: 0.25rem; }

  .info-box {
    background: rgba(23, 190, 187, 0.05);
    border: 1px solid rgba(23, 190, 187, 0.15);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 2rem;
  }

  .info-box p { margin: 0.3rem 0; font-size: 0.88rem; color: rgba(210, 240, 255, 0.7); }
  .info-box strong { color: #e2f0f7; }
</style>
@endsection

@section('content')

<div class="section" style="max-width: 700px; margin: 0 auto;">
  <h1 class="section-title" style="margin-bottom: 2rem;">Edit Pengguna</h1>

  <div class="info-box">
    <p><strong>ID:</strong> #{{ $user->id }}</p>
    <p><strong>Dibuat:</strong> {{ $user->created_at->format('d M Y H:i') }}</p>
    <p><strong>Diperbarui:</strong> {{ $user->updated_at->format('d M Y H:i') }}</p>
  </div>

  <form action="{{ route('admin.users.update', $user) }}" method="POST">
    @csrf
    @method('PUT')

    <div class="form-group">
      <label class="form-label">Nama Lengkap *</label>
      <input type="text" class="form-input" name="name" value="{{ old('name', $user->name) }}" required>
      @error('name')<p class="error-text">{{ $message }}</p>@enderror
    </div>

    <div class="form-group">
      <label class="form-label">Email *</label>
      <input type="email" class="form-input" name="email" value="{{ old('email', $user->email) }}" required>
      @error('email')<p class="error-text">{{ $message }}</p>@enderror
    </div>

    <div class="form-group">
      <label class="form-label">Password <span style="color: rgba(210,240,255,0.4); font-weight:400;">(kosongkan jika tidak ingin mengubah)</span></label>
      <input type="password" class="form-input" name="password">
      @error('password')<p class="error-text">{{ $message }}</p>@enderror
    </div>

    <div class="form-group">
      <label class="form-label">Konfirmasi Password</label>
      <input type="password" class="form-input" name="password_confirmation">
    </div>

    <div class="form-group">
      <label class="form-label">Role *</label>
      <select class="form-input" name="role" required>
        <option value="">-- Pilih Role --</option>
        <option value="user"  {{ old('role', $user->role) === 'user'  ? 'selected' : '' }}>Pengguna</option>
        <option value="admin" {{ old('role', $user->role) === 'admin' ? 'selected' : '' }}>Admin</option>
      </select>
      @error('role')<p class="error-text">{{ $message }}</p>@enderror
    </div>

    <div class="btn-group">
      <button type="submit" class="btn-submit">Perbarui Pengguna</button>
      <a href="{{ route('admin.users.index') }}" class="btn-cancel">Batal</a>
    </div>
  </form>
</div>

@endsection