@extends('admin.layout.app')

@section('title', 'Danh mục')

@section('content')
    <div class="container-fluid {{Auth::check() && Auth::user()->is_layout_two == 1 ?  "mt-2 p-0" : ""}}">

        <!-- Page Heading -->
        {{-- <h1 class="h3 mb-2 text-gray-800">Danh mục app</h1> --}}
        <!-- DataTales Example -->
        <div class="card shadow mb-4">
            <div class="card-header py-3 d-flex justify-content-between align-items-center">
                <h6 class="m-0 font-weight-bold text-primary ">Chỉnh sửa người dùng</h6>
                <a class="btn btn-primary btn-user" href="{{ route('user.index') }}">Quay lại</a>
            </div>

            <div class="card-body">
                <form id="addProductForm" method="POST" action="{{ route('user.update',['id' => $user->id]) }}">
                    @csrf
                    <div class="mb-3">
                        <label for="userName" class="form-label required">
                            Họ và tên
                        </label>
                        <input type="text" class="form-control" id="userName" name="name"
                            placeholder="Nhập họ và tên" required value="{{ old('name', $user->name) }}">
                    </div>
                    <div class="mb-3">
                        <label for="userEmail" class="form-label required">
                            Email
                        </label>
                        <input type="email" class="form-control" id="userEmail" name="email"
                            placeholder="Nhập địa chỉ email" required value="{{ old('email', $user->email) }}">
                    </div>

                    <div class="mb-3">
                        <label for="userPassword" class="form-label required">
                            Mật khẩu (bỏ trống nếu không đổi)
                        </label>
                        <div class="input-group">
                            <input type="password" class="form-control" id="userPassword" name="password"
                                 placeholder="Nhập mật khẩu mới (nếu muốn đổi)" minlength="6"  >
                            <button class="btn btn-outline-secondary" type="button" id="togglePassword">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                        <div class="form-text">Mật khẩu phải có ít nhất 6 ký tự.</div>

                    </div>


                    <div class="mb-3">
                        <label for="userRole" class="form-label required">
                            Vai trò
                        </label>
                        <select class="form-select" id="userRole" name="role_id" required>
                            <option value="">Chọn vai trò</option>
                            @foreach ($roles as $role)
                                <option value="{{ $role->id }}" {{$role->id == $user->role_id ? "selected":""}}>{{ $role->role_name }}</option>
                            @endforeach
                        </select>

                    </div>

                    <div class="mb-4">
                        <label for="multiple-select-field" class="form-label required">
                            Ứng dụng được phép truy cập
                        </label>
                        <select class="form-select" id="multiple-select-field" name="apps[]"
                            data-placeholder="Chọn ứng dụng" multiple required>
                            @foreach ($apps as $app)
                                <option value="{{ $app->id }}" {{ $user->role_id != 0 ? in_array($app->id, $user->apps->pluck('id')->toArray()) ? 'selected' : '' :"selected" }}>{{ $app->app_name }}</option>
                            @endforeach
                        </select>
                    </div>


                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                        <button type="submit" class="btn btn-primary">
                            Lưu
                        </button>
                    </div>
                </form>
            </div>
        </div>

    </div>
@endsection
@push('styles')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endpush
@push('scripts')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
@endpush
@push('scripts')
    <script>
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $('#multiple-select-field').select2({
                width: '100%',
                placeholder: $(this).data('placeholder'),
                closeOnSelect: false,
            });

            document.getElementById('togglePassword').addEventListener('click', function() {
                const passwordInput = document.getElementById('userPassword');
                const icon = this.querySelector('i');

                if (passwordInput.type === 'password') {
                    passwordInput.type = 'text';
                    icon.classList.remove('fa-eye');
                    icon.classList.add('fa-eye-slash');
                } else {
                    passwordInput.type = 'password';
                    icon.classList.remove('fa-eye-slash');
                    icon.classList.add('fa-eye');
                }
            });
             $('#userRole').on('change', function() {
                if ($(this).val() === "1" || $(this).val() === "2") { // 1: admin; 2: cổ đông
                    // chọn hết
                    $('#multiple-select-field option').prop('selected', true);
                } else {
                    // bỏ chọn hết
                    $('#multiple-select-field option').prop('selected', false);
                }
                // trigger change nếu bạn dùng plugin như select2
                $('#multiple-select-field').trigger('change');
            });
        });
    </script>
@endpush