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

@section('content')
<div class="fixed-action-bar">
    <div class="fw-semibold fixed-nav-title">Edit User</div>
    <div>
        <i class="fa-regular fa-plus fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center"
            data-toggle="tooltip" title="Add"></i>
    
        @can('User update')
        <i id="submitForm" class="fa-regular fa-save fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center mx-1"
            data-toggle="tooltip" title="Save"></i>
        @endcan
    
        <i class="fa-regular fa-edit fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1"
            data-toggle="tooltip" title="Edit"></i>
    
        <i  class="fa-regular fa-trash-can fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1"
            data-toggle="tooltip" title="Delete"></i>
    
        <a href="{{ route('users.index') }}">
            <i class="fa-solid fa-xmark fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center ms-1"
                data-toggle="tooltip" title="Close"></i>
        </a>
    </div>
    
</div>

<div class="row mt-3 mb-5">
    <div class="col-md-6">
        <div class="card">
            <h5 class="card-title">User Details</h5>
            <div class="card-body">
                <form id="EditUserForm"  action="{{ route('users.update', $user->id) }}" method="POST">
                    @csrf
                    @method('PUT')

                    <div class="mb-3">
                        <label for="firstName" class="form-label required">First Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('first_name') is-invalid @enderror"oninput="validateText(this)"  id="firstName" name="first_name" value="{{ old('first_name', $user->first_name) }}" required maxlength="50">
                        @error('first_name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                
                    <div class="mb-3">
                        <label for="lastName" class="form-label required">Last Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('last_name') is-invalid @enderror" oninput="validateText(this)" id="lastName" name="last_name" value="{{ old('last_name', $user->last_name) }}" required maxlength="50">
                        @error('last_name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                
                    <div class="mb-3">
                        <label for="email" class="form-label required">Email Address <span class="text-danger">*</span></label>
                        <input type="email" class="form-control @error('email') is-invalid @enderror" oninput="validateEmail(this)"  id="email" name="email" value="{{ old('email', $user->email) }}" required maxlength="50" @if($user->id == 1) readonly @endif>
                        @error('email')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                
                    <label for="password" class="form-label required">New Password</label>
                    <div class="input-group mb-3">
                        <input type="password" class="form-control @error('password') is-invalid @enderror" id="password" name="password" required maxlength="50" value="{{ old('password') }}" @if($user->id == 1) disabled @endif>
                        <div class="input-group-append">
                            <span class="input-group-text" id="togglePassword">
                                <i class="fas fa-eye" id="eyeIcon"></i>
                            </span>
                        </div>
                    </div>
                    <div>
                        @error('password')
                            <div class="invalid-feedback" style="display: block;">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="mb-3">
                        <label for="phone_number" class="form-label required">Phone Number <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('phone_number') is-invalid @enderror" id="phone_number" name="phone_number" value="{{ old('phone_number', $user->phone_number) }}" maxlength="10" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" >
                        @error('phone_number')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                
                    <div class="mb-3">
                        <label for="role_id" class="form-label required">Role <span class="text-danger">*</span></label>
                        <select name="role_id" id="role_id" class="form-control @error('role_id') is-invalid @enderror" @if($user->id == Auth::id() || $user->id == 1) disabled @endif>
                            @foreach($allRoles as $role)
                                <option value="{{ $role->id }}" {{ in_array($role->id, $assignedRoles) ? 'selected' : '' }}>{{ $role->name }}</option>
                            @endforeach
                        </select>
                        @error('role_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="mb-3">
                        <label for="status" class="form-label required">Status <span class="text-danger">*</span></label>
                        <select name="status" id="status" class="form-control @error('status') is-invalid @enderror" required @if($user->id == Auth::id() || $user->id == 1) disabled @endif>
                            <option value="Active" {{ $user->status == 'Active' ? 'selected' : '' }}>Active</option>
                            <option value="Suspended" {{ $user->status == 'Suspended' ? 'selected' : '' }}>Suspended</option>
                        </select>
                        @error('status')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>                    
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('js')
<script>

    document.addEventListener("DOMContentLoaded", function() {
        var togglePasswordButton = document.getElementById('togglePassword');
        var passwordInput = document.getElementById('password');
        var eyeIcon = document.getElementById('eyeIcon');

        togglePasswordButton.addEventListener('click', function() {
            var type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
            passwordInput.setAttribute('type', type);
            eyeIcon.classList.toggle('fa-eye-slash');
        });
    });
    document.getElementById('submitForm').addEventListener('click', function() {
       document.getElementById('EditUserForm').submit();
   });
</script>
@endpush