@extends('admin.layouts.app')

@section('title', 'Edit User')
@section('page-title', 'Edit User')
@section('page-subtitle', 'Update user account')

@section('content')
<div class="p-4 lg:p-6">
  <div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-2xl border border-slate-100 shadow-sm">
      <div class="p-6 border-b border-slate-100">
        <h3 class="text-xl font-bold text-slate-800">User Information</h3>
      </div>

      <form method="POST" action="{{ route('admin.users.update', $user) }}" enctype="multipart/form-data">
        @csrf
        @method('PUT')
        
        <div class="p-6 space-y-4">
          <!-- Name -->
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Full Name *</label>
            <input type="text" name="name" value="{{ old('name', $user->name) }}" required class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('name') border-red-500 @enderror">
            @error('name')
              <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
            @enderror
          </div>

          <!-- Email and Phone -->
          <div class="grid grid-cols-2 gap-4">
            <div>
              <label class="block text-sm font-medium text-slate-700 mb-2">Email *</label>
              <input type="email" name="email" value="{{ old('email', $user->email) }}" required class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('email') border-red-500 @enderror">
              @error('email')
                <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
              @enderror
            </div>

            <div>
              <label class="block text-sm font-medium text-slate-700 mb-2">Phone</label>
              <input type="tel" name="phone" value="{{ old('phone', $user->phone) }}" class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('phone') border-red-500 @enderror">
              @error('phone')
                <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
              @enderror
            </div>
          </div>

          <!-- Password (Optional for edit) -->
          <div class="border border-slate-200 rounded-xl p-4 bg-slate-50">
            <h4 class="text-sm font-semibold text-slate-800 mb-3">Change Password (Optional)</h4>
            <p class="text-xs text-slate-500 mb-3">Leave blank to keep current password</p>
            
            <div class="grid grid-cols-2 gap-4">
              <div>
                <label class="block text-sm font-medium text-slate-700 mb-2">New Password</label>
                <input type="password" name="password" class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('password') border-red-500 @enderror" placeholder="Minimum 8 characters">
                @error('password')
                  <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                @enderror
              </div>

              <div>
                <label class="block text-sm font-medium text-slate-700 mb-2">Confirm New Password</label>
                <input type="password" name="password_confirmation" class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500" placeholder="Re-enter password">
              </div>
            </div>
          </div>

          <!-- Department and Role -->
          <div class="grid grid-cols-2 gap-4">
            <div>
              <label class="block text-sm font-medium text-slate-700 mb-2">Department</label>
              <select name="department" class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('department') border-red-500 @enderror">
                <option value="">Select department</option>
                <option value="Administration" {{ old('department', $user->department) == 'Administration' ? 'selected' : '' }}>Administration</option>
                <option value="Clinical" {{ old('department', $user->department) == 'Clinical' ? 'selected' : '' }}>Clinical</option>
                <option value="Psychology" {{ old('department', $user->department) == 'Psychology' ? 'selected' : '' }}>Psychology</option>
                <option value="Counseling" {{ old('department', $user->department) == 'Counseling' ? 'selected' : '' }}>Counseling</option>
                <option value="Research" {{ old('department', $user->department) == 'Research' ? 'selected' : '' }}>Research</option>
                <option value="Support" {{ old('department', $user->department) == 'Support' ? 'selected' : '' }}>Support</option>
                <option value="Reception" {{ old('department', $user->department) == 'Reception' ? 'selected' : '' }}>Reception</option>
                <option value="IT" {{ old('department', $user->department) == 'IT' ? 'selected' : '' }}>IT</option>
              </select>
              @error('department')
                <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
              @enderror
            </div>

            <div>
              <label class="block text-sm font-medium text-slate-700 mb-2">Role *</label>
              <select name="role_id" required class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('role_id') border-red-500 @enderror">
                <option value="">Select role</option>
                @foreach($roles as $role)
                  <option value="{{ $role->id }}" {{ old('role_id', $user->roles->first()?->id) == $role->id ? 'selected' : '' }}>
                    {{ $role->name }}
                  </option>
                @endforeach
              </select>
              @error('role_id')
                <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
              @enderror
            </div>
          </div>

          <!-- Current Avatar -->
          @if($user->avatar)
            <div>
              <label class="block text-sm font-medium text-slate-700 mb-2">Current Avatar</label>
              <img src="{{ asset('storage/' . $user->avatar) }}" alt="Current avatar" class="w-24 h-24 rounded-full object-cover border-2 border-slate-200">
            </div>
          @endif

          <!-- Avatar Upload -->
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">{{ $user->avatar ? 'Change' : 'Upload' }} Profile Avatar</label>
            <input type="file" name="avatar" accept="image/*" class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('avatar') border-red-500 @enderror">
            <p class="mt-1 text-xs text-slate-500">Upload profile picture (JPG, PNG, max 2MB)</p>
            @error('avatar')
              <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
            @enderror
          </div>

          <!-- Active Status -->
          <div class="border-t border-slate-200 pt-4">
            <div class="flex items-center">
              <input type="checkbox" name="is_active" value="1" {{ old('is_active', $user->is_active) ? 'checked' : '' }} class="w-4 h-4 text-primary-600 border-slate-300 rounded focus:ring-primary-500">
              <label class="ml-2 text-sm font-medium text-slate-700">Active User</label>
            </div>
            <p class="mt-1 ml-6 text-xs text-slate-500">User can login and access the system</p>
          </div>

          <!-- User Stats (Read-only) -->
          <div class="border-t border-slate-200 pt-4">
            <h4 class="font-semibold text-slate-800 mb-3">User Statistics</h4>
            <div class="grid grid-cols-3 gap-4">
              <div class="bg-slate-50 rounded-lg p-3">
                <p class="text-xs text-slate-500">Member Since</p>
                <p class="text-sm font-bold text-slate-800">{{ $user->created_at->format('M d, Y') }}</p>
              </div>
              <div class="bg-slate-50 rounded-lg p-3">
                <p class="text-xs text-slate-500">Last Updated</p>
                <p class="text-sm font-bold text-slate-800">{{ $user->updated_at->format('M d, Y') }}</p>
              </div>
              <div class="bg-slate-50 rounded-lg p-3">
                <p class="text-xs text-slate-500">Status</p>
                <p class="text-sm font-bold text-slate-800">{{ $user->is_active ? 'Active' : 'Inactive' }}</p>
              </div>
            </div>
          </div>
        </div>

        <!-- Form Actions -->
        <div class="p-6 border-t border-slate-100 flex justify-end gap-3">
          <a href="{{ route('admin.users.show', $user) }}" class="px-6 py-3 text-slate-600 font-medium rounded-xl hover:bg-slate-100">
            Cancel
          </a>
          <button type="submit" class="px-6 py-3 bg-primary-500 text-white font-medium rounded-xl hover:bg-primary-600 shadow-lg shadow-primary-500/30">
            Update User
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection