@extends('layouts.app')
@section('title')
    USER REGISTRATION VIEW
@endsection
@section('button')
    <a type="button" class="btn btn-info" href="{{ route('user.index') }}">
        <i class="bi bi-arrow-left"></i> Back
    </a>
@endsection
@section('content')
    <div class="card">
        <form method="post" action="{{ route('user.update', $user->id) }}">
            @csrf
            <div class="card-body">
                <div class="row">
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label class="form-label col-4" for="full_name">Full Name</label>
                            <div class="col-6">
                            <input type="text" class="form-control rounded-4" id="full_name" name="full_name" disabled
                                value="{{ $user->full_name }}" placeholder="Enter Full name">
                        </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label class="form-label col-4" for="user_name">User Name</label>
                            <div class="col-6">
                            <input type="text" class="form-control rounded-4" id="user_name" name="user_name" disabled
                                value="{{ $user->user_name }}" placeholder="Enter User name">
                        </div>
                    </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label class="form-label col-4" for="email">Email</label>
                            <div class="col-6">
                            <input type="email" class="form-control rounded-4" id="email" name="email" disabled
                                value="{{ $user->email }}" placeholder="Enter Email">
                        </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label class="form-label col-4" for="phone">Phone</label>
                            <div class="col-6">
                            <input type="number" class="form-control rounded-4" id="phone" name="phone" disabled
                                value="{{ $user->phone }}" placeholder="Enter Phone">
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        <label class="form-label col-4" for="password">Password</label>
                        <div class="col-6">
                        <div class="input-group">
                            <input type="password" disabled name="password" id="password" class="form-control"
                                placeholder="Enter password" value="{{ $user->secondary_password }}">
                            <button class="btn btn-outline-secondary" id="togglePassword" type="button">
                                <i class="bi bi-eye" id="icon"></i>
                            </button>
                        </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        <label class="form-label col-4" for="department">Department</label>
                        <div class="col-6">
                        <select class="form-select" id="department" name="department" style="width: 100% !important;" disabled>
                            <option value="{{ $user->department }}" selected style="color: black;">
                                {{ $user->department->name ?? '' }}
                            </option>
                        </select>
                    </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        <label class="form-label col-4" for="designation">Designation</label>
                        <div class="col-6">
                        <select class="form-select" id="designation" name="designation" style="width: 100% !important;" disabled>
                            <option value="{{ $user->designation }}" selected style="color: black;">
                                {{ $user->designation->name ?? '' }}
                            </option>
                        </select>
                    </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        @php
                            $item = json_decode($user->role_ids);
                        @endphp
                        <label class="form-label col-4" for="role">Role</label>
                        <div class="col-6">
                            @php
                                $roleIds = json_decode($user->role_ids, true);
                                $roles = \App\Models\Role::whereIn('id', $roleIds)->get();
                            @endphp
                            
                            <select class="form-select" id="role" name="role[]" multiple style="width: 100% !important;" disabled>
                                @foreach($roles as $role)
                                    <option value="{{ $role->id }}" selected>{{ $role->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        <label class="form-label col-4" for="employee_no">Employee No.</label>
                        <div class="col-6">
                        <input type="text" class="form-control rounded-4" id="employee_no" name="employee_no"
                            value="{{ $user->employee_no }}" disabled placeholder="Enter Employee No">
                    </div>
                </div>
                </div>
                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="{{ $user->is_active }}"
                                id="is_active" name="is_active"
                                @if ($user->is_active == "yes") checked
                              @endif>
                            <label class="form-check-label" for="is_active"
                               >Is Active</label>
                        </div>
                    </div>
                </div>
            </div>






            </div>

        </form>
    </div>
    <script>
         const togglePassword = document
            .querySelector('#togglePassword');
        const icon = document
            .querySelector('#icon');
        const password = document.querySelector('#password');
        togglePassword.addEventListener('click', () => {
            // Toggle the type attribute using
            const type = password
                .getAttribute('type') === 'password' ?
                'text' : 'password';
            password.setAttribute('type', type);
            if (password.getAttribute('type') === 'password') {
                // Toggle the eye and bi-eye icon
                icon.setAttribute('class', 'bi-eye');
            } else if (password.getAttribute('type') === 'text') {
                // Toggle the eye and bi-eye icon
                icon.setAttribute('class', 'bi-eye-slash');
            }
        });
    </script>

@endsection