@extends('layouts.app')
@section('page-title', 'Edit User')
@section('styles')
<style>
.form-card{background:#fff;border:1px solid #e6e9ef;border-radius:12px;overflow:hidden;max-width:600px}
.form-head{padding:1rem 1.5rem;border-bottom:1px solid #e6e9ef;display:flex;align-items:center;justify-content:space-between}
.form-head-left{display:flex;align-items:center;gap:8px}
.form-head-left i{font-size:18px;color:#0073ea}
.form-head-title{font-size:15px;font-weight:600;color:#1f2d3d}
.form-body{padding:1.5rem}
.form-group{margin-bottom:1.25rem}
.form-label{display:block;font-size:12.5px;font-weight:500;color:#555;margin-bottom:5px}
.form-input{width:100%;padding:8px 12px;border:1px solid #e6e9ef;border-radius:8px;font-size:13px;font-family:'Figtree',sans-serif;outline:none;color:#333}
.form-input:focus{border-color:#0073ea}
.btn-primary{display:inline-flex;align-items:center;gap:6px;padding:8px 20px;background:#0073ea;color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;font-family:'Figtree',sans-serif}
.btn-primary:hover{background:#005ecb}
.btn-outline{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;background:#fff;color:#333;border:1px solid #e6e9ef;border-radius:8px;font-size:13px;font-weight:500;text-decoration:none;font-family:'Figtree',sans-serif}
.btn-outline:hover{background:#f6f7fb}
.btn-link{display:inline-flex;align-items:center;gap:4px;padding:8px 12px;color:#666;font-size:13px;text-decoration:none}
.btn-link:hover{color:#333}
.form-footer{padding:1rem 1.5rem;border-top:1px solid #e6e9ef;display:flex;align-items:center;gap:8px;background:#f9fafb}
.toggle-wrap{display:flex;align-items:center;gap:8px;cursor:pointer}
.toggle-wrap input{width:16px;height:16px;cursor:pointer}
.toggle-label{font-size:13px;color:#333}
.alert-success{background:#eaf3de;color:#27500a;padding:.75rem 1rem;border-radius:8px;font-size:13px;margin:1rem 1.5rem;display:flex;align-items:center;gap:8px}
.error-msg{font-size:11.5px;color:#e24b4a;margin-top:3px}
</style>
@endsection
@section('content')
<div class="form-card">
  <div class="form-head">
    <div class="form-head-left">
      <i class="ti ti-user-edit"></i>
      <span class="form-head-title">Edit User #{{ $user->id }}</span>
    </div>
    <a href="{{ route('users.password', $user->id) }}" class="btn-outline"><i class="ti ti-lock" style="font-size:13px"></i>Change Password</a>
  </div>

  @if(session('success'))
  <div class="alert-success"><i class="ti ti-check" style="font-size:16px"></i>{{ session('success') }}</div>
  @endif

  <form method="POST" action="{{ route('users.update', $user->id) }}">
    @csrf @method('PATCH')
    <div class="form-body">
      <div class="form-group">
        <label class="form-label">Full Name <span style="color:#e24b4a">*</span></label>
        <input type="text" name="name" class="form-input" value="{{ old('name', $user->name) }}" required>
        @error('name')<div class="error-msg">{{ $message }}</div>@enderror
      </div>
      <div class="form-group">
        <label class="form-label">Email <span style="color:#e24b4a">*</span></label>
        <input type="email" name="email" class="form-input" value="{{ old('email', $user->email) }}" required>
        @error('email')<div class="error-msg">{{ $message }}</div>@enderror
      </div>
      <div class="form-group">
        <label class="form-label">Role <span style="color:#e24b4a">*</span></label>
        <select name="role_id" class="form-input" required>
          <option value="">— Select Role —</option>
          @foreach($roles as $id => $name)
          <option value="{{ $id }}" {{ (old('role_id', $userRole) == $id) ? 'selected' : '' }}>{{ $name }}</option>
          @endforeach
        </select>
        @error('role_id')<div class="error-msg">{{ $message }}</div>@enderror
      </div>
      <div class="form-group">
        <label class="toggle-wrap">
          <input type="checkbox" name="active" value="1" {{ $user->active ? 'checked' : '' }}>
          <span class="toggle-label">Active user</span>
        </label>
      </div>
    </div>
    <div class="form-footer">
      <button type="submit" class="btn-primary"><i class="ti ti-check" style="font-size:14px"></i>Save Changes</button>
      <a href="{{ route('users.index') }}" class="btn-link"><i class="ti ti-arrow-left" style="font-size:14px"></i>Back</a>
    </div>
  </form>
</div>
@endsection