@extends('layouts-v2.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="{{ route('dashboard') }}" class="hover:text-blue-600 cursor-pointer">Trang chủ</a>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <a href="{{ route('role.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">Assign role '{{ $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'))
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                showNotificationV2('success', '{{ session('success-v2') }}');
            });
        </script>
    @endif

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

    <!-- Assign Form -->
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-4 sm:p-6">
        <form action="{{ route('role.assignUser') }}" id="assignform" method="post">
            @csrf
            <input type="hidden" name="is_v2" value="1">
            <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">Existing users</label>
                    <div class="userselector">
                        <select name="removeselect[]" id="removeselect" multiple="multiple" size="20" 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($countAssignedUsers > 0)    
                                @if($statusAssignedUsers)
                                    <optgroup label="Users ({{ $countAssignedUsers }})">
                                        @foreach($assignedUsers as $assignedUser)
                                            <option value="{{ $assignedUser->id }}">{{ $assignedUser->name }} ({{ $assignedUser->email }})</option>
                                        @endforeach
                                    </optgroup>
                                @else
                                    <optgroup label="Too many users ({{ $countAssignedUsers }}) to show">
                                        <option disabled="disabled">&nbsp;</option>
                                    </optgroup>
                                    <optgroup label="Please use the search">
                                        <option disabled="disabled">&nbsp;</option>
                                    </optgroup>
                                @endif
                            @else
                                <optgroup label="None">
                                    <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">Search</label>
                            <div class="flex gap-2">
                                <input type="text" name="removeselect_searchtext" 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" value="Clear" 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" disabled="">Clear</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Buttons -->
                <div class="flex flex-row lg:flex-col items-center justify-center gap-2">
                    <button name="add" id="add" type="submit" value="◄ Add" title="Add" class="!flex justify-center align-items-center w-[100px] px-3 py-1.5 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 inline-flex items-center justify-center gap-1.5" disabled="">
                        <i data-lucide="arrow-left" class="w-3.5 h-3.5 flex-shrink-0"></i>
                        <span class="whitespace-nowrap">Add</span>
                    </button>
                    <button name="remove" id="remove" type="submit" value="Remove ►" title="Remove" class="!flex justify-center align-items-center w-[100px] px-3 py-1.5 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 inline-flex items-center justify-center gap-1.5" disabled="">
                        <span class="whitespace-nowrap">Remove</span>
                        <i data-lucide="arrow-right" class="w-3.5 h-3.5 flex-shrink-0"></i>
                    </button>
                </div>

                <!-- Potential members -->
                <div>
                    <label for="addselect" class="block text-sm font-medium text-slate-700 mb-2">Potential members</label>
                    <div class="userselector">
                        <select name="addselect[]" id="addselect" multiple="multiple" size="20" 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($status)
                                <optgroup label="Potential users ({{ $countUsers }})">
                                    @foreach($users as $user)
                                        <option value="{{ $user->id }}">{{ $user->name }} ({{ $user->email }})</option>
                                    @endforeach
                                </optgroup>
                            @else
                                <optgroup label="Too many users ({{ $countUsers }}) to show">
                                    <option disabled="disabled">&nbsp;</option>
                                </optgroup>
                                <optgroup label="Please use the search">
                                    <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">Search</label>
                            <div class="flex gap-2">
                                <input type="text" name="addselect_searchtext" 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" value="Clear" 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" disabled="">Clear</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('role.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>
                    Close
                </a>
            </div>
        </form>
    </div>
</div>

<!-- Hidden Inputs -->
<input type="hidden" id="currentUserEmail" value="{{ $currentEmail }}">
<input type="hidden" id="selectedTenantId" value="{{ session('selected_tenant_id') }}">
<input type="hidden" id="selectedTenantCode" value="{{ session('selected_tenant_code') }}">
<input type="hidden" id="selectedTenantName" value="{{ session('selected_tenant_name') }}">
<input type="hidden" id="selectedTenantDb" value="{{ session('selected_tenant_db') }}">
<input type="hidden" id="tenantConnection" value="{{ session('tenant_connection') }}">

@endsection

@section('scripts')
<script>
    // Notification V2 Functions
    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');

        // Set message
        $content.text(message);

        // Set icon and border color based on type
        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');
        }

        // Show notification
        $notification.removeClass('hidden');

        // Re-init Lucide icons
        if (typeof lucide !== 'undefined') {
            lucide.createIcons();
        }

        // Auto hide after 5 seconds
        setTimeout(function() {
            hideNotificationV2();
        }, 5000);
    }

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

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

    $('#addselect').change(function() {
        $('#add').prop('disabled', false);
    });
    
    $('#removeselect').change(function() {
        $('#remove').prop('disabled', false);
    });

    var typingTimer;
    var doneTypingInterval = 1000;

    $("#addselect_searchtext").on("input", function() {
        clearTimeout(typingTimer);
        typingTimer = setTimeout(doneAddTyping, doneTypingInterval);
    });

    $("#removeselect_searchtext").on("input", function() {
        clearTimeout(typingTimer);
        typingTimer = setTimeout(doneRemoveTyping, doneTypingInterval);
    });

    function doneAddTyping() {
        $('#addselect_clearbutton').prop('disabled', false);
        $.ajax({
            url: "/api/role/assigns/search",
            method: 'POST',
            data: {
                _token: "{{ csrf_token() }}",
                text: $("#addselect_searchtext").val(),
                roleId: "{{ $role_id }}",
                type: 'addselect_searchtext',
                currentUserEmail: $("#currentUserEmail").val(),
                selectedTenantId: $("#selectedTenantId").val(),
                selectedTenantCode: $("#selectedTenantCode").val(),
                selectedTenantName: $("#selectedTenantName").val(),
                selectedTenantDb: $("#selectedTenantDb").val(),
                tenantConnection: $("#tenantConnection").val()
            },
            success: function(response) {
                let users = response.users;
                $('#addselect').empty();
                if (response.status && users.length > 0) {
                    var optgroup = $('<optgroup label="Potential users (' + response.countUsers + ')">');
                    response.users.forEach(function(user) {
                        optgroup.append('<option value="' + user.id + '">' + user.name + ' (' + user.email + ')</option>');
                    });
                    $('#addselect').append(optgroup);
                } else {
                    var searchText = $("#addselect_searchtext").val();
                    var label = "No users match '" + searchText + "' to show";
                    $('#addselect').append('<optgroup label="' + label + '"><option disabled>&nbsp;</option></optgroup>');
                }
            }
        });
    }

    function doneRemoveTyping() {
        $('#removeselect_clearbutton').prop('disabled', false);
        $.ajax({
            url: "/api/role/assigns/search",
            method: 'POST',
            data: {
                _token: "{{ csrf_token() }}",
                text: $("#removeselect_searchtext").val(),
                roleId: "{{ $role_id }}",
                type: 'removeselect_searchtext',
                currentUserEmail: $("#currentUserEmail").val(),
                selectedTenantId: $("#selectedTenantId").val(),
                selectedTenantCode: $("#selectedTenantCode").val(),
                selectedTenantName: $("#selectedTenantName").val(),
                selectedTenantDb: $("#selectedTenantDb").val(),
                tenantConnection: $("#tenantConnection").val()
            },
            success: function(response) {
                let users = response.users;
                $('#removeselect').empty();
                if (users.length > 0) {
                    var optgroup = $('<optgroup label="Users (' + response.countUsers + ')">');
                    response.users.forEach(function(user) {
                        optgroup.append('<option value="' + user.id + '">' + user.name + ' (' + user.email + ')</option>');
                    });
                    $('#removeselect').append(optgroup);
                } else {
                    var searchText = $("#removeselect_searchtext").val();
                    var label = "No users match '" + searchText + "' to show";
                    $('#removeselect').append('<optgroup label="' + label + '"><option disabled>&nbsp;</option></optgroup>');
                }
            }
        });
    }

    $('#removeselect_clearbutton').click(function() {
        $('#removeselect_clearbutton').prop('disabled', true);
        $('#removeselect_searchtext').val('');
        $.ajax({
            url: "/api/role/assigns/search",
            method: 'POST',
            data: {
                _token: "{{ csrf_token() }}",
                text: '',
                roleId: "{{ $role_id }}",
                type: 'removeselect_searchtext',
                currentUserEmail: $("#currentUserEmail").val(),
                selectedTenantId: $("#selectedTenantId").val(),
                selectedTenantCode: $("#selectedTenantCode").val(),
                selectedTenantName: $("#selectedTenantName").val(),
                selectedTenantDb: $("#selectedTenantDb").val(),
                tenantConnection: $("#tenantConnection").val()
            },
            success: function(response) {
                let users = response.users;
                $('#removeselect').empty();
                if (users.length > 0) {
                    var optgroup = $('<optgroup label="Users (' + response.countUsers + ')">');
                    response.users.forEach(function(user) {
                        optgroup.append('<option value="' + user.id + '">' + user.name + ' (' + user.email + ')</option>');
                    });
                    $('#removeselect').append(optgroup);
                } else {
                    var searchText = $("#removeselect_searchtext").val();
                    var label = "No users match '" + searchText + "' to show";
                    $('#removeselect').append('<optgroup label="' + label + '"><option disabled>&nbsp;</option></optgroup>');
                }
            }
        });
    });

    $('#addselect_clearbutton').click(function() {
        $('#addselect_clearbutton').prop('disabled', true);
        $('#addselect_searchtext').val('');
        $.ajax({
            url: "/api/role/assigns/search",
            method: 'POST',
            data: {
                _token: "{{ csrf_token() }}",
                text: '',
                roleId: "{{ $role_id }}",
                type: 'addselect_searchtext',
                currentUserEmail: $("#currentUserEmail").val(),
                selectedTenantId: $("#selectedTenantId").val(),
                selectedTenantCode: $("#selectedTenantCode").val(),
                selectedTenantName: $("#selectedTenantName").val(),
                selectedTenantDb: $("#selectedTenantDb").val(),
                tenantConnection: $("#tenantConnection").val()
            },
            success: function(response) {
                let users = response.users;
                $('#addselect').empty();
                if (users.length > 0) {
                    var optgroup = $('<optgroup label="Potential users (' + response.countUsers + ')">');
                    response.users.forEach(function(user) {
                        optgroup.append('<option value="' + user.id + '">' + user.name + ' (' + user.email + ')</option>');
                    });
                    $('#addselect').append(optgroup);
                } else {
                    var searchText = $("#addselect_searchtext").val();
                    var label = "No users match '" + searchText + "' to show";
                    $('#addselect').append('<optgroup label="' + label + '"><option disabled>&nbsp;</option></optgroup>');
                }
            }
        });
    });
</script>
@endsection