@extends('layouts.app')
@section('title', 'Edit User')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
    <li class="breadcrumb-item"><a href="{{ route('admin.users.index') }}">Users</a></li>
    <li class="breadcrumb-item active">Edit: {{ $user->username }}</li>
@endsection

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Edit User</h1>
        <p class="page-subtitle">{{ $user->name }} &mdash; <code>{{ $user->username }}</code></p>
    </div>
    <a href="{{ route('admin.users.index') }}" class="btn btn-outline-secondary">
        <i class="bi bi-arrow-left me-1"></i>Back
    </a>
</div>

<div class="row g-4">
    {{-- Edit Form --}}
    <div class="col-12 col-xl-7">
        <div class="card mb-4">
            <div class="card-header"><i class="bi bi-person me-2 text-primary"></i>User Details</div>
            <div class="card-body">
                <form method="POST" action="{{ route('admin.users.update', $user) }}" id="userForm">
                @csrf @method('PUT')
                <div class="row g-3">
                    <div class="col-12">
                        <label class="form-label">Full Name <span class="required">*</span></label>
                        <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
                               value="{{ old('name', $user->name) }}" required>
                        @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-6">
                        <label class="form-label">Username <span class="required">*</span></label>
                        <input type="text" name="username" class="form-control @error('username') is-invalid @enderror"
                               value="{{ old('username', $user->username) }}" required
                               pattern="[a-z0-9_]+"
                               {{ $user->id === auth()->id() ? 'readonly style=background:#f8f9fa' : '' }}>
                        @if($user->id === auth()->id())
                            <div class="form-text">You cannot change your own username.</div>
                        @endif
                        @error('username')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-6">
                        <label class="form-label">Email</label>
                        <input type="email" name="email" class="form-control @error('email') is-invalid @enderror"
                               value="{{ old('email', $user->email) }}" placeholder="user@company.com">
                        @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-6">
                        <label class="form-label">Phone</label>
                        <input type="text" name="phone" class="form-control" value="{{ old('phone', $user->phone) }}">
                    </div>
                    <div class="col-6">
                        <label class="form-label">Status</label>
                        <div class="d-flex gap-3 mt-1">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="is_active" value="1"
                                       id="activeYes" {{ old('is_active', $user->is_active) ? 'checked':'' }}
                                       {{ $user->id === auth()->id() ? 'disabled' : '' }}>
                                <label class="form-check-label" for="activeYes">Active</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="is_active" value="0"
                                       id="activeNo" {{ !old('is_active', $user->is_active) ? 'checked':'' }}
                                       {{ $user->id === auth()->id() ? 'disabled' : '' }}>
                                <label class="form-check-label" for="activeNo">Inactive</label>
                            </div>
                        </div>
                    </div>

                    <div class="col-12">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" name="is_admin" value="1"
                                   id="isAdmin" {{ old('is_admin', $user->is_admin) ? 'checked':'' }}
                                   {{ $user->id === auth()->id() ? 'disabled' : '' }}>
                            <label class="form-check-label" for="isAdmin">
                                <strong>Administrator</strong> — Full access, ignores role permissions
                            </label>
                        </div>
                    </div>

                    <div class="col-12"><hr class="my-1"></div>
                    <div class="col-12">
                        <label class="form-label">Assign Roles</label>
                        @forelse($roles as $role)
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="roles[]"
                                   value="{{ $role->id }}" id="role-{{ $role->id }}"
                                   {{ in_array($role->id, old('roles', $userRoleIds)) ? 'checked':'' }}>
                            <label class="form-check-label" for="role-{{ $role->id }}" style="font-size:13.5px">
                                {{ $role->display_name ?? $role->name }}
                            </label>
                        </div>
                        @empty
                        <div class="text-muted" style="font-size:13px">No roles available.</div>
                        @endforelse
                    </div>

                    <div class="col-12 d-flex gap-2 justify-content-end">
                        <a href="{{ route('admin.users.index') }}" class="btn btn-outline-secondary">Cancel</a>
                        <button type="submit" class="btn btn-primary px-4" id="saveBtn">
                            <i class="bi bi-check-circle me-1"></i>Save Changes
                        </button>
                    </div>
                </div>
                </form>
            </div>
        </div>
    </div>

    <div class="col-12 col-xl-5">
        {{-- Reset Password --}}
        <div class="card mb-4">
            <div class="card-header"><i class="bi bi-key me-2 text-primary"></i>Reset Password</div>
            <div class="card-body">
                <form method="POST" action="{{ route('admin.users.reset-password', $user) }}" id="pwForm">
                @csrf
                <div class="row g-3">
                    <div class="col-12">
                        <label class="form-label">New Password <span class="required">*</span></label>
                        <input type="password" name="new_password" class="form-control" placeholder="Min 8 characters" required>
                    </div>
                    <div class="col-12">
                        <label class="form-label">Confirm Password <span class="required">*</span></label>
                        <input type="password" name="new_password_confirmation" class="form-control" placeholder="Repeat password" required>
                    </div>
                    <div class="col-12">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="force_password_change" value="1"
                                   id="forcePw" checked>
                            <label class="form-check-label" for="forcePw" style="font-size:13px">
                                Force user to change password on next login
                            </label>
                        </div>
                    </div>
                    <div class="col-12">
                        <button type="submit" class="btn btn-warning w-100">
                            <i class="bi bi-key me-1"></i>Reset Password
                        </button>
                    </div>
                </div>
                </form>
            </div>
        </div>

        {{-- User Info --}}
        <div class="card">
            <div class="card-header"><i class="bi bi-info-circle me-2 text-primary"></i>Account Info</div>
            <div class="card-body p-0">
                <table class="table table-sm table-borderless mb-0 px-3" style="font-size:13px">
                    <tr><td class="text-muted ps-3" style="width:50%">Created</td><td>{{ $user->created_at->format('d M Y, H:i') }}</td></tr>
                    <tr><td class="text-muted ps-3">Last Login</td><td>{{ $user->last_login_at ? $user->last_login_at->format('d M Y, H:i') : 'Never' }}</td></tr>
                    <tr><td class="text-muted ps-3">Last Login IP</td><td><code style="font-size:11px">{{ $user->last_login_ip ?? '—' }}</code></td></tr>
                    <tr><td class="text-muted ps-3">Password Changed</td><td>{{ $user->password_changed_at ? $user->password_changed_at->format('d M Y') : 'Never' }}</td></tr>
                    <tr><td class="text-muted ps-3">Force Pw Change</td>
                        <td>
                            @if($user->force_password_change)
                                <span class="badge bg-warning text-dark">Yes</span>
                            @else
                                <span class="badge bg-light text-muted">No</span>
                            @endif
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.getElementById('userForm').addEventListener('submit', function() {
    const btn = document.getElementById('saveBtn');
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Saving...';
    btn.disabled = true;
});
</script>
@endpush