Untitled

 const tricountId = <?= $tricount->id ?>;
            let subscribers = <?=$subscribers_json ?>;
            let subscribersList;
            let sortColumn = 'full_name';
            let otherUsersList;
            let otherUsers = <?=$other_users_json ?>;
            let formChanged = false; 
            
            $(function(){
                
                subscribersList = $('#participant-list');
                subscribersList.html("<li>loading ...</li>");
                getSubscribers(); 

                otherUsersList = $('#other_users_list');
                otherUsersList.html("loading ...");
                getOtherUsers();   
                
                $('#delete-tricount').on('click', function() {                     
                    event.preventDefault();
                    //var form = this;
                    Swal.fire({
                        title: 'Are you sure?',
                        html: 
                            'Do you really want to delete tricount <b> "<?=$tricount->title?>" </b> and all of its dependencies ?' +
                            '<br>' +
                            'This process cannot be undone.',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: 'Yes, delete it!',
                        cancelButtonText: 'Cancel',
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        //reverseButtons: true//swap position of buttons
                    }).then((result) => {
                        if (result.isConfirmed) {
                            deleteTricount();                   
                        }
                    });
                });

                $('textarea').on('change', function() {// or 'input'
                    formChanged = true;
                });

               /* $('#save-button').on('click', function() {
                    var isDisabled = $("#save-button").prop("disabled");                   
                    if (!isDisabled){
                        $("#settings-form").submit();
                        <?php if (count($errors) == 0): ?>
                            formChanged = false;
                            console.log(" formChanged " +   <?php echo count($errors); ?> );
                        <?php endif; ?>   
                    } else {
                        formChanged = true;                        
                    }
                });
                */

                $('#back-button').on('click', function(e) {                    
                    if (formChanged) {
                        e.preventDefault();
                        Swal.fire({
                            title: 'Unsaved changes !',
                            text: 'Are you sure you want to leave this form ? Changes you made will not be saved.',
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonText: 'Leave Page',
                            cancelButtonText: 'Cancel',
                            confirmButtonColor: '#d33',
                        }).then((result) => {
                            if (result.isConfirmed) {
                                window.location.href = $(this).attr('href');
                            }
                        });
                    }
                });


            });

            async function deleteTricount() {
                try {
                    await $.post("tricount/delete_tricount_service/" + tricountId, null);
                   
                    await handleDeleteSuccess();
                } catch (e) {
                    // Handle error if needed
                }
            }

            async function handleDeleteSuccess() {
                await Swal.fire({
                    title: 'Deleted!',
                    text: 'This tricount has been deleted.',
                    icon: 'success',
                    showCancelButton: false,
                    confirmButtonText: 'OK',
                    confirmButtonColor: '#3085d6',
                });
                window.location.href = "tricount/index";
            }


            async function getSubscribers(){

                try {
                    subscribers = await $.getJSON("tricount/get_tricount_subscrier_service/" + tricountId);
                    sortSubscribers();
                    displaySubscribers();
                } catch(e) {
                    subscribersList.html("<li>1 Error encountered while retrieving the subscribers!</li>");
                }
            }

            async function getOtherUsers(){

                try {
                    otherUsers = await $.getJSON("tricount/get_user_not_tricount_subscrier_service/" + tricountId);                    
                    sortOtherUsers(); 
                    displayOtherUsers();
                } catch(e) {
                    otherUsersList.html(" Error encountered while retrieving other users!");  
                }
            }

            async function deleteSubscriber(id){ 
                
                const idx = subscribers.findIndex(function (el, idx, arr) {                    
                    return el.id === id;
                });

                subscribers.splice(idx, 1);           
                
                try {
                   // console.log("delete id " + id );
                    const res=await $.post("tricount/delete_subscription_service/" + tricountId, {"delete_member": id}, null, 'json');       
                    //console.log(res === true);//without ", null, 'json'" res="true" but not boolean
                    getSubscribers();
                    sortSubscribers()
                    displaySubscribers();
                    getOtherUsers();
                    sortOtherUsers();
                    displayOtherUsers();            
   
                } catch(e) {
                    subscribersList.html(" Error encountered while deleting the subscriber!");
                }
            }

            async function addSubscriber(id){ 
                
                const idx = otherUsers.findIndex(function (el, idx, arr) {                    
                    return el.id === id;
                });

                otherUsers.splice(idx, 1);           
                
                try {
                    await $.post("tricount/add_subscription_service/" + tricountId, {"subscriber": id});              
                    getOtherUsers();
                    sortOtherUsers();
                    displayOtherUsers();
                    getSubscribers();
                    sortSubscribers();
                    displaySubscribers();
                } catch(e) {
                    otherUsersList.html("Error encountered while adding the subscriber!");
                }
            }

            function sortSubscribers() {
                subscribers.sort(function(a, b) {
                    return a[sortColumn] - b[sortColumn];                    
                });
            }

            function sortOtherUsers() {
                otherUsers.sort(function(a, b) {
                    return a[sortColumn] - b[sortColumn]; 
                });
            }

            function showDeleteSbscriberConfirmation(id) {
                Swal.fire({
                    title: 'Are you sure?',
                    text: 'Do you really want to delete this subscriber?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, delete it!',
                    cancelButtonText: 'Cancel',
                    //reverseButtons: true
                }).then((result) => {
                    if (result.isConfirmed) {
                        deleteSubscriber(id);
                    }
                });
            }

            function displaySubscribers() {
                let html ="";
                for (let s of subscribers) {
                    html += '<li class="list-group-item d-flex justify-content-between align-items-center">';
		            html += s.full_name;
                    html +=  (s.is_creator ? "(creator)" : "");
                    html +=  (!(s.has_operation ||s.is_creator||s.is_initiator) ? "<a href='javascript:showDeleteSbscriberConfirmation(" + s.id + ")'><i class='bi bi-trash'></i></a>" : "") ; 
                    html += "</li>";
                }
                subscribersList.html(html);
            }

            function displayOtherUsers() {
                let html = "<div class='input-group'>";
                html +="<select class='form-select' id='other-users-select'>";
                html += '<option value="">--Add a new subscriber--</option>';
                for (let o of otherUsers) {
                    html += '<option value="' + o.id + '">';
		            html += o.full_name;
                    html += "</option>"
                }

                html += "</select>";
                html += "<button type='button' id='add-btn' class='btn btn-primary' style='width: auto'>add</button> ";
                html += "</div>";

                otherUsersList.html(html);

                $('#add-btn').click(function() {
                    const selectedId = $('#other-users-select').val();
                    addSubscriber(selectedId);
                });              

                if ($('#other-users-select option').length === 1) {
                    $('#other-users-select').hide();
                    $('#add-btn').hide();

                }

            }