@extends('layouts.app')

@section('header', 'Editar Usuário')

@section('breadcrumbs')
    @php
        $breadcrumbs = [
            'Usuários' => route('users.index'),
            $user->name => null
        ];
    @endphp
@endsection

@section('content')
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 fw-bold text-primary">Editar Usuário</h6>
        </div>
        <div class="card-body">
            <form method="POST" action="{{ route('users.update', $user) }}">
                @csrf
                @method('PUT')
                <div class="mb-3">
                    <label for="name" class="form-label">Nome</label>
                    <input type="text" class="form-control" id="name" name="name" value="{{ old('name', $user->name) }}" required>
                </div>
                <div class="mb-3">
                    <label for="email" class="form-label">E-mail</label>
                    <input type="email" class="form-control" id="email" name="email" value="{{ old('email', $user->email) }}" required>
                </div>
                <div class="mb-3">
                    <label for="role" class="form-label">Papel</label>
                    <select class="form-select" id="role" name="role" required>
                        <option value="user" {{ old('role', $user->role) === 'user' ? 'selected' : '' }}>Usuário</option>
                        <option value="superadmin" {{ old('role', $user->role) === 'superadmin' ? 'selected' : '' }}>SuperAdmin</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label for="is_approved" class="form-label">Status</label>
                    <select class="form-select" id="is_approved" name="is_approved" required>
                        <option value="1" {{ old('is_approved', $user->is_approved) ? 'selected' : '' }}>Aprovado</option>
                        <option value="0" {{ !old('is_approved', $user->is_approved) ? 'selected' : '' }}>Pendente</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label for="password" class="form-label">Nova Senha</label>
                    <div class="input-group">
                        <input type="password" class="form-control" id="password" name="password" placeholder="Deixe em branco para manter a senha atual">
                        <button class="btn btn-outline-secondary" type="button" id="togglePassword">
                            <i class="bi bi-eye"></i>
                        </button>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary"><i class="bi bi-check-circle"></i> Salvar</button>
                <a href="{{ route('users.index') }}" class="btn btn-secondary">Cancelar</a>
            </form>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        document.getElementById('togglePassword').addEventListener('click', function() {
            const passwordInput = document.getElementById('password');
            const icon = this.querySelector('i');

            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                icon.classList.remove('bi-eye');
                icon.classList.add('bi-eye-slash');
            } else {
                passwordInput.type = 'password';
                icon.classList.remove('bi-eye-slash');
                icon.classList.add('bi-eye');
            }
        });
    </script>
@endsection