@extends('layouts.app')

@section('title', 'Edit User — {{ $user->name }}')

@push('styles')
<style>
    .form-card { background:#fff;border:1px solid var(--gray-200);border-radius:14px;overflow:hidden;max-width:640px; }
    .form-card-header { padding:1.1rem 1.5rem;border-bottom:1px solid var(--gray-100);display:flex;align-items:center;justify-content:space-between; }
    .form-card-header h2 { font-size:.95rem;font-weight:700;color:var(--gray-900);display:flex;align-items:center;gap:.45rem; }
    .form-card-header h2 i { color:var(--green); }
    .form-body { padding:1.5rem; }

    .form-group { margin-bottom:1.1rem; }
    .form-label { display:block;font-size:.8rem;font-weight:700;color:var(--gray-700);margin-bottom:.4rem; }
    .form-label .req { color:#ef4444; }
    .form-control { width:100%;padding:.6rem .85rem;border:1.5px solid var(--gray-200);border-radius:8px;font-size:.875rem;color:var(--gray-800);background:#fff;transition:border-color .15s;font-family:inherit; }
    .form-control:focus { outline:none;border-color:var(--green); }
    .form-control.is-invalid { border-color:#ef4444; }
    .invalid-feedback { font-size:.75rem;color:#ef4444;margin-top:.3rem; }
    .form-hint { font-size:.75rem;color:var(--gray-400);margin-top:.3rem; }
    .form-row { display:grid;grid-template-columns:1fr 1fr;gap:1rem; }
    .form-divider { border:none;border-top:1px solid var(--gray-100);margin:1.25rem 0; }

    .pw-wrap { position:relative; }
    .pw-wrap .form-control { padding-right:2.5rem; }
    .pw-toggle { position:absolute;right:.75rem;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--gray-400);font-size:.85rem;padding:.25rem; }
    .pw-toggle:hover { color:var(--gray-700); }

    .user-info-banner { background:var(--gray-50);border:1px solid var(--gray-200);border-radius:10px;padding:.85rem 1rem;margin-bottom:1.25rem;display:flex;align-items:center;gap:.75rem; }
    .ui-avatar { width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,var(--green),var(--green-dark));display:flex;align-items:center;justify-content:center;font-size:.95rem;font-weight:800;color:#fff;flex-shrink:0; }
    .ui-name { font-weight:700;color:var(--gray-900);font-size:.9rem; }
    .ui-email { font-size:.75rem;color:var(--gray-400); }
    .ui-badge { margin-left:auto;display:inline-flex;align-items:center;gap:.25rem;padding:.2rem .6rem;border-radius:20px;font-size:.7rem;font-weight:700; }
    .badge-active { background:#dcfce7;color:#166534; }
    .badge-inactive { background:#fee2e2;color:#dc2626; }
</style>
@endpush

@section('content')

<div class="page-header">
    <div>
        <h1 class="page-title">Edit User</h1>
        <p class="page-subtitle">Update account details for {{ $user->name }}.</p>
    </div>
    <a href="{{ route('admin.users.index') }}" class="btn-secondary">
        <i class="fas fa-arrow-left"></i> Back
    </a>
</div>

<div class="form-card">
    <div class="form-card-header">
        <h2><i class="fas fa-user-pen"></i> Edit Account</h2>
        @if($user->id !== auth()->id())
        <form method="POST" action="{{ route('admin.users.toggle', $user) }}" style="display:inline;">
            @csrf @method('PATCH')
            <button type="submit" style="padding:.35rem .8rem;border-radius:7px;font-size:.75rem;font-weight:600;cursor:pointer;border:1.5px solid;transition:all .15s;{{ $user->is_active ? 'border-color:#fecaca;color:#dc2626;background:#fee2e2;' : 'border-color:#bbf7d0;color:#166534;background:#dcfce7;' }}"
                onclick="return confirm('{{ $user->is_active ? 'Deactivate' : 'Activate' }} this user?')">
                <i class="fas fa-{{ $user->is_active ? 'ban' : 'check' }}"></i>
                {{ $user->is_active ? 'Deactivate' : 'Activate' }}
            </button>
        </form>
        @endif
    </div>
    <div class="form-body">

        {{-- Current user info --}}
        <div class="user-info-banner">
            <div class="ui-avatar">{{ strtoupper(substr($user->name,0,1)) }}</div>
            <div>
                <div class="ui-name">{{ $user->name }}</div>
                <div class="ui-email">{{ $user->email }}</div>
            </div>
            <span class="ui-badge {{ $user->is_active ? 'badge-active' : 'badge-inactive' }}">
                {{ $user->is_active ? 'Active' : 'Inactive' }}
            </span>
        </div>

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

            {{-- Role --}}
            <div class="form-group">
                <label class="form-label">Role <span class="req">*</span></label>
                <select name="role_id" class="form-control {{ $errors->has('role_id') ? 'is-invalid' : '' }}" {{ $user->id === auth()->id() ? 'disabled' : '' }} required>
                    @foreach($roles as $role)
                    <option value="{{ $role->id }}" {{ old('role_id', $user->role_id) == $role->id ? 'selected' : '' }}>{{ $role->display_name }}</option>
                    @endforeach
                </select>
                @if($user->id === auth()->id())
                <input type="hidden" name="role_id" value="{{ $user->role_id }}">
                <div class="form-hint">You cannot change your own role.</div>
                @endif
                @error('role_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
            </div>

            <hr class="form-divider">

            <div class="form-row">
                <div class="form-group">
                    <label class="form-label">Full Name <span class="req">*</span></label>
                    <input type="text" name="name" class="form-control {{ $errors->has('name') ? 'is-invalid' : '' }}"
                        value="{{ old('name', $user->name) }}" required maxlength="100">
                    @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
                <div class="form-group">
                    <label class="form-label">Email Address <span class="req">*</span></label>
                    <input type="email" name="email" class="form-control {{ $errors->has('email') ? 'is-invalid' : '' }}"
                        value="{{ old('email', $user->email) }}" required maxlength="150">
                    @error('email') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label class="form-label">Employee ID</label>
                    <input type="text" name="employee_id" class="form-control {{ $errors->has('employee_id') ? 'is-invalid' : '' }}"
                        value="{{ old('employee_id', $user->employee_id) }}" maxlength="50">
                    @error('employee_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
                <div class="form-group">
                    <label class="form-label">Department</label>
                    <input type="text" name="department" class="form-control {{ $errors->has('department') ? 'is-invalid' : '' }}"
                        value="{{ old('department', $user->department) }}" maxlength="100">
                    @error('department') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
            </div>

            <hr class="form-divider">

            {{-- Password (optional) --}}
            <div style="background:var(--gray-50);border:1px solid var(--gray-200);border-radius:10px;padding:1rem;margin-bottom:1.1rem;">
                <div style="font-size:.78rem;font-weight:700;color:var(--gray-600);margin-bottom:.75rem;"><i class="fas fa-lock" style="margin-right:.35rem;color:var(--gray-400);"></i> Change Password <span style="font-weight:400;color:var(--gray-400);">(leave blank to keep current)</span></div>
                <div class="form-row">
                    <div class="form-group" style="margin-bottom:0;">
                        <label class="form-label">New Password</label>
                        <div class="pw-wrap">
                            <input type="password" name="password" id="pw1" class="form-control {{ $errors->has('password') ? 'is-invalid' : '' }}" minlength="8">
                            <button type="button" class="pw-toggle" onclick="togglePw('pw1',this)"><i class="fas fa-eye"></i></button>
                        </div>
                        @error('password') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                    <div class="form-group" style="margin-bottom:0;">
                        <label class="form-label">Confirm Password</label>
                        <div class="pw-wrap">
                            <input type="password" name="password_confirmation" id="pw2" class="form-control" minlength="8">
                            <button type="button" class="pw-toggle" onclick="togglePw('pw2',this)"><i class="fas fa-eye"></i></button>
                        </div>
                    </div>
                </div>
            </div>

            <div style="display:flex;gap:.75rem;margin-top:1.5rem;">
                <button type="submit" class="btn-primary" style="padding:.65rem 1.5rem;">
                    <i class="fas fa-save"></i> Save Changes
                </button>
                <a href="{{ route('admin.users.index') }}" class="btn-secondary" style="padding:.65rem 1.5rem;">Cancel</a>
            </div>
        </form>
    </div>
</div>

@endsection

@push('scripts')
<script>
function togglePw(id, btn) {
    const input = document.getElementById(id);
    const showing = input.type === 'text';
    input.type = showing ? 'password' : 'text';
    btn.innerHTML = showing ? '<i class="fas fa-eye"></i>' : '<i class="fas fa-eye-slash"></i>';
}
</script>
@endpush