@extends('layouts.admin')

@section('title', 'Edit User — ' . ($user->name ?? ''))

@push('styles')
<style>
    .page-header {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 2rem;
    }

    .page-header .back-btn {
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        color: var(--text-secondary);
        transition: all var(--transition);
    }

    .page-header .back-btn:hover {
        background: var(--accent-light);
        color: var(--accent);
        border-color: var(--accent);
    }

    .page-header h1 {
        font-size: 1.75rem;
        font-weight: 700;
    }

    .form-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 2rem;
        max-width: 640px;
    }

    .form-group {
        margin-bottom: 1.5rem;
    }

    .form-group label {
        display: block;
        font-size: 0.85rem;
        font-weight: 500;
        margin-bottom: 0.5rem;
        color: var(--text-secondary);
    }

    .form-group input,
    .form-group select {
        width: 100%;
        padding: 0.625rem 0.875rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--bg-primary);
        color: var(--text-primary);
        font-family: inherit;
        font-size: 0.875rem;
        outline: none;
        transition: border-color var(--transition);
    }

    .form-group input:focus,
    .form-group select:focus {
        border-color: var(--accent);
    }

    .form-group .error-msg {
        color: var(--danger);
        font-size: 0.8rem;
        margin-top: 0.375rem;
    }

    .form-group input.error,
    .form-group select.error {
        border-color: var(--danger);
    }

    /* Toggle Switch */
    .toggle-wrapper {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .toggle-switch {
        position: relative;
        width: 44px;
        height: 24px;
    }

    .toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .toggle-slider {
        position: absolute;
        cursor: pointer;
        top: 0; left: 0; right: 0; bottom: 0;
        background: var(--border);
        border-radius: 24px;
        transition: 0.3s;
    }

    .toggle-slider::before {
        content: '';
        position: absolute;
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background: white;
        border-radius: 50%;
        transition: 0.3s;
    }

    .toggle-switch input:checked + .toggle-slider {
        background: var(--accent);
    }

    .toggle-switch input:checked + .toggle-slider::before {
        transform: translateX(20px);
    }

    .toggle-label {
        font-size: 0.875rem;
        color: var(--text-secondary);
    }

    .form-actions {
        display: flex;
        gap: 0.75rem;
        margin-top: 2rem;
    }

    .btn-secondary {
        background: var(--bg-hover);
        color: var(--text-secondary);
        border: 1px solid var(--border);
        padding: 0.625rem 1.25rem;
        border-radius: var(--radius-sm);
        font-family: inherit;
        font-size: 0.875rem;
        font-weight: 500;
        cursor: pointer;
        transition: all var(--transition);
    }

    .btn-secondary:hover {
        background: var(--bg-card);
        color: var(--text-primary);
    }
</style>
@endpush

@section('content')
    <div class="page-header">
        <a href="{{ route('admin.users.show', $user->id) }}" class="back-btn"><i class="fas fa-arrow-left"></i></a>
        <h1>Edit User</h1>
    </div>

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

            <div class="form-group">
                <label for="name">Full Name</label>
                <input type="text" id="name" name="name" value="{{ old('name', $user->name) }}" class="{{ $errors->has('name') ? 'error' : '' }}">
                @error('name')
                    <div class="error-msg">{{ $message }}</div>
                @enderror
            </div>

            <div class="form-group">
                <label for="email">Email Address</label>
                <input type="email" id="email" name="email" value="{{ old('email', $user->email) }}" class="{{ $errors->has('email') ? 'error' : '' }}">
                @error('email')
                    <div class="error-msg">{{ $message }}</div>
                @enderror
            </div>

            <div class="form-group">
                <label for="phone">Phone Number</label>
                <input type="text" id="phone" name="phone" value="{{ old('phone', $user->phone) }}" class="{{ $errors->has('phone') ? 'error' : '' }}">
                @error('phone')
                    <div class="error-msg">{{ $message }}</div>
                @enderror
            </div>

            <div class="form-group">
                <label for="role">Role</label>
                <select id="role" name="role" class="{{ $errors->has('role') ? 'error' : '' }}">
                    <option value="user" {{ old('role', $user->role) === 'user' ? 'selected' : '' }}>User</option>
                    <option value="admin" {{ old('role', $user->role) === 'admin' ? 'selected' : '' }}>Admin</option>
                    <option value="super_admin" {{ old('role', $user->role) === 'super_admin' ? 'selected' : '' }}>Super Admin</option>
                </select>
                @error('role')
                    <div class="error-msg">{{ $message }}</div>
                @enderror
            </div>

            <div class="form-group">
                <label>Active Status</label>
                <div class="toggle-wrapper">
                    <label class="toggle-switch">
                        <input type="hidden" name="is_active" value="0">
                        <input type="checkbox" name="is_active" value="1" {{ old('is_active', $user->is_active) ? 'checked' : '' }}>
                        <span class="toggle-slider"></span>
                    </label>
                    <span class="toggle-label">User is active</span>
                </div>
            </div>

            <div class="form-actions">
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save"></i> Save Changes
                </button>
                <a href="{{ route('admin.users.show', $user->id) }}" class="btn-secondary">Cancel</a>
            </div>
        </form>
    </div>
@endsection