@extends(config('role.layout', 'layouts.app'))

@section('content')
<div class="flex-1 space-y-6">
    <!-- Header -->
    <div class="flex items-center gap-2 text-slate-500 text-sm mb-2">
        <a href="{{ url('/') }}" class="hover:text-blue-600 cursor-pointer">Trang chủ</a>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <a href="{{ route(config('role.routes.as') . 'index') }}" class="hover:text-blue-600 cursor-pointer">Danh sách vai trò</a>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <span>Phân quyền người dùng</span>
    </div>
    <h1 class="text-2xl sm:text-3xl font-bold text-slate-900 mb-4 sm:mb-6 truncate">Phân quyền vai trò '{{ $role_name }}'</h1>

    <!-- Message Notification V2 -->
    <div class="message-class hidden fixed top-4 right-2 sm:right-4 left-2 sm:left-auto z-50 max-w-md w-auto sm:w-full">
        <div class="notification-v2 bg-white rounded-lg shadow-xl border-l-4 p-3 sm:p-4 flex items-start gap-2 sm:gap-3 animate-slide-in">
            <div class="notification-icon flex-shrink-0 mt-0.5">
                <i data-lucide="check-circle" class="w-6 h-6 text-green-500 notification-icon-success hidden"></i>
                <i data-lucide="x-circle" class="w-6 h-6 text-red-500 notification-icon-error hidden"></i>
            </div>
            <div class="flex-1 min-w-0">
                <div id="content_message" class="text-sm font-medium text-slate-800"></div>
            </div>
            <button type="button" class="notification-close flex-shrink-0 text-slate-400 hover:text-slate-600 transition-colors" aria-label="Close">
                <i data-lucide="x" class="w-5 h-5"></i>
            </button>
        </div>
    </div>

    @if(session('success-v2') || session('success'))
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                showNotificationV2('success', {{ Js::from(session('success-v2') ?? session('success')) }});
            });
        </script>
    @endif

    @if(session('error-v2') || session('error'))
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                showNotificationV2('error', {{ Js::from(session('error-v2') ?? session('error')) }});
            });
        </script>
    @endif

    <!-- Assign Form -->
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-4 sm:p-6">
        <form action="{{ route(config('role.routes.as') . 'assignUser') }}" id="assignform" method="post">
            @csrf
            <input type="hidden" name="role_id" value="{{ $role_id }}">
            
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6">
                <!-- Existing users -->
                <div>
                    <label for="removeselect" class="block text-sm font-medium text-slate-700 mb-2">Người dùng đang có vai trò</label>
                    <div class="userselector">
                        <select name="removeselect[]" id="removeselect" multiple="multiple" size="18" class="w-full px-3 py-2 bg-white border border-slate-300 !rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none">
                            @if(count($assignedUsers) > 0)    
                                <optgroup label="Thành viên ({{ count($assignedUsers) }})">
                                    @foreach($assignedUsers as $assignedUser)
                                        <option value="{{ $assignedUser->id }}">{{ $assignedUser->name }} ({{ $assignedUser->email }})</option>
                                    @endforeach
                                </optgroup>
                            @else
                                <optgroup label="Chưa có người dùng nào">
                                    <option disabled="disabled">&nbsp;</option>
                                </optgroup>
                            @endif
                        </select>
                        <div class="mt-4">
                            <label for="removeselect_searchtext" class="block text-xs font-medium text-slate-600 mb-1">Tìm kiếm thành viên</label>
                            <div class="flex gap-2">
                                <input type="text" id="removeselect_searchtext" class="flex-1 px-3 py-2 bg-white border border-slate-300 !rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none" placeholder="Tìm kiếm...">
                                <button type="button" class="px-4 py-2 bg-slate-200 text-slate-700 !rounded-lg text-sm font-medium hover:bg-slate-300 transition-colors" id="removeselect_clearbutton">Xóa</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="flex flex-row lg:flex-col items-center justify-center gap-3 my-2 lg:my-0">
                    <button name="add" id="add" type="submit" value="1" title="Gán vào vai trò" class="w-[120px] px-3 py-2 bg-blue-600 text-white !rounded-lg text-xs font-medium hover:bg-blue-700 transition-colors disabled:bg-slate-300 disabled:cursor-not-allowed flex items-center justify-center gap-1.5 shadow-sm" disabled="">
                        <i data-lucide="arrow-left" class="w-4 h-4"></i>
                        <span>Thêm ◄</span>
                    </button>
                    <button name="remove" id="remove" type="submit" value="1" title="Gỡ khỏi vai trò" class="w-[120px] px-3 py-2 bg-red-600 text-white !rounded-lg text-xs font-medium hover:bg-red-700 transition-colors disabled:bg-slate-300 disabled:cursor-not-allowed flex items-center justify-center gap-1.5 shadow-sm" disabled="">
                        <span>Gỡ ►</span>
                        <i data-lucide="arrow-right" class="w-4 h-4"></i>
                    </button>
                </div>

                <!-- Potential members -->
                <div>
                    <label for="addselect" class="block text-sm font-medium text-slate-700 mb-2">Người dùng chưa có vai trò</label>
                    <div class="userselector">
                        <select name="addselect[]" id="addselect" multiple="multiple" size="18" class="w-full px-3 py-2 bg-white border border-slate-300 !rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none">
                            @if(count($users) > 0)
                                <optgroup label="Danh sách người dùng ({{ count($users) }})">
                                    @foreach($users as $user)
                                        <option value="{{ $user->id }}">{{ $user->name }} ({{ $user->email }})</option>
                                    @endforeach
                                </optgroup>
                            @else
                                <optgroup label="Không có người dùng nào">
                                    <option disabled="disabled">&nbsp;</option>
                                </optgroup>
                            @endif
                        </select>
                        <div class="mt-4">
                            <label for="addselect_searchtext" class="block text-xs font-medium text-slate-600 mb-1">Tìm kiếm người dùng</label>
                            <div class="flex gap-2">
                                <input type="text" id="addselect_searchtext" class="flex-1 px-3 py-2 bg-white border border-slate-300 !rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none" placeholder="Tìm kiếm...">
                                <button type="button" class="px-4 py-2 bg-slate-200 text-slate-700 !rounded-lg text-sm font-medium hover:bg-slate-300 transition-colors" id="addselect_clearbutton">Xóa</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Close Button -->
            <div class="mt-4 sm:mt-6 pt-4 sm:pt-6 border-t border-slate-200">
                <a href="{{ route(config('role.routes.as') . 'index') }}" class="inline-flex items-center w-full sm:w-auto justify-center px-4 py-2 bg-slate-200 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-300 transition-colors">
                    <i data-lucide="x" class="w-4 h-4 inline-block mr-1"></i>
                    Đóng
                </a>
            </div>
        </form>
    </div>
</div>

<input type="hidden" id="currentUserEmail" value="{{ $currentEmail }}">
@endsection

@section('scripts')
<script>
    function showNotificationV2(type, message) {
        const $notification = $('.message-class');
        const $content = $('#content_message');
        const $iconSuccess = $('.notification-icon-success');
        const $iconError = $('.notification-icon-error');
        const $notificationBox = $notification.find('.notification-v2');

        $content.text(message);

        if (type === 'success') {
            $iconSuccess.removeClass('hidden');
            $iconError.addClass('hidden');
            $notificationBox.removeClass('border-red-500').addClass('border-green-500');
        } else {
            $iconError.removeClass('hidden');
            $iconSuccess.addClass('hidden');
            $notificationBox.removeClass('border-green-500').addClass('border-red-500');
        }

        $notification.removeClass('hidden');

        if (typeof lucide !== 'undefined') {
            lucide.createIcons();
        }

        setTimeout(function() {
            hideNotificationV2();
        }, 5000);
    }

    function hideNotificationV2() {
        $('.message-class').addClass('hidden');
    }

    $(document).on('click', '.notification-close', function() {
        hideNotificationV2();
    });

    $('#addselect').change(function() {
        const hasSelection = $(this).val() && $(this).val().length > 0;
        $('#add').prop('disabled', !hasSelection);
    });
    
    $('#removeselect').change(function() {
        const hasSelection = $(this).val() && $(this).val().length > 0;
        $('#remove').prop('disabled', !hasSelection);
    });

    // Client-side quick filter for select options
    function filterSelect(selectId, searchVal) {
        const term = searchVal.toLowerCase();
        $(`#${selectId} option`).each(function() {
            const text = $(this).text().toLowerCase();
            if (text.includes(term) || term === '') {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
    }

    $("#addselect_searchtext").on("input", function() {
        filterSelect('addselect', $(this).val());
    });

    $("#removeselect_searchtext").on("input", function() {
        filterSelect('removeselect', $(this).val());
    });

    $('#addselect_clearbutton').click(function() {
        $('#addselect_searchtext').val('');
        filterSelect('addselect', '');
    });

    $('#removeselect_clearbutton').click(function() {
        $('#removeselect_searchtext').val('');
        filterSelect('removeselect', '');
    });
</script>
@endsection