@extends('layouts.app')
@section('page-title', 'Change Password')
@section('styles')
<style>
.form-card{background:#fff;border:1px solid #e6e9ef;border-radius:12px;overflow:hidden;max-width:480px}
.form-head{padding:1rem 1.5rem;border-bottom:1px solid #e6e9ef;display:flex;align-items:center;gap:8px}
.form-head 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-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}
.error-msg{font-size:11.5px;color:#e24b4a;margin-top:3px}
.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}
</style>
@endsection
@section('content')
<div class="form-card">
  <div class="form-head">
    <i class="ti ti-lock"></i>
    <span class="form-head-title">Change Password — {{ $user->name }}</span>
  </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.password.update', $user->id) }}">
    @csrf @method('PATCH')
    <div class="form-body">
      <div class="form-group">
        <label class="form-label">New Password <span style="color:#e24b4a">*</span></label>
        <input type="password" name="password" class="form-input" required>
        @error('password')<div class="error-msg">{{ $message }}</div>@enderror
      </div>
      <div class="form-group">
        <label class="form-label">Confirm Password <span style="color:#e24b4a">*</span></label>
        <input type="password" name="confirm_password" class="form-input" required>
      </div>
    </div>
    <div class="form-footer">
      <button type="submit" class="btn-primary"><i class="ti ti-check" style="font-size:14px"></i>Update Password</button>
      <a href="{{ route('users.edit', $user->id) }}" class="btn-link"><i class="ti ti-arrow-left" style="font-size:14px"></i>Back</a>
    </div>
  </form>
</div>
@endsection