@extends('layouts.app')

@section('title', __('labels.edit_user'))

@section('content')
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">{{ __('labels.edit_user') }}: {{ $user->name }}</h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <a href="{{ route('users.index') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left me-1"></i> {{ __('labels.back_to_users') }}
        </a>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <form action="{{ route('users.update', $user->id) }}" method="POST">
            @csrf
            @method('PUT')
            
            <div class="row">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="name" class="form-label">{{ __('labels.name') }} *</label>
                        <input type="text" class="form-control @error('name') is-invalid @enderror" 
                               id="name" name="name" value="{{ old('name', $user->name) }}" required>
                        @error('name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="email" class="form-label">{{ __('labels.email') }} *</label>
                        <input type="email" class="form-control @error('email') is-invalid @enderror" 
                               id="email" name="email" value="{{ old('email', $user->email) }}" required>
                        @error('email')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="password" class="form-label">{{ __('labels.password') }}</label>
                        <input type="password" class="form-control @error('password') is-invalid @enderror" 
                               id="password" name="password" placeholder="">
                        @error('password')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="password_confirmation" class="form-label">{{ __('labels.confirm_password') }}</label>
                        <input type="password" class="form-control" 
                               id="password_confirmation" name="password_confirmation">
                    </div>
                </div>
            </div>

            <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                <button type="submit" class="btn btn-primary">{{ __('labels.update_user') }}</button>
                <a href="{{ route('users.index') }}" class="btn btn-secondary">{{ __('labels.cancel') }}</a>
            </div>
        </form>
    </div>
</div>
@endsection

@section('js')
<script>
    const groups= @if(isset($groups) && count($groups) > 0) {{ Js::from($groups) }}
                    @else []
                    @endif;
    const roles = @if(isset($roles) && count($roles) > 0) {{ Js::from($roles) }}
                  @else []
                  @endif;
    let groupIndex = {{ old('roles', isset($user) && $user->roles->count() ? $user->roles->count() : 1) }} || 1;
</script>
<script src="{{ asset('assets/custom/js/users/multi-role-selection.js') }}"></script>
@endsection