FloatBackOfffice/application/views/member/extra/member_cards.php

<style type="text/css">
    #member_cards thead .sorting:after {
        top: 20px;
        opacity: 0.6;
    }

    #member_cards thead .sorting_desc:after,
    #member_cards thead .sorting_asc:after {
        top: 16px;
        opacity: 0.8;
    }

    #member_cards thead .sorting:before {
        content: '';
    }
</style>
<div class="panel panel-flat" style="background-color: aliceblue;">
    <div class="panel-body">
        <div class="row">
            <div class="col-lg-4">
                <!-- Current server load -->
                <div class="panel">
                    <div class="panel-heading">
                        <h5>Available Cards</h5>
                        <div class="heading-elements">
                            <table>
                                <tr>
                                    <td><?= $links ?></td>
                                    <td><?= $card_category ?></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="panel-body">
                        <input type="hidden" name="member_id" value='<?= $member_id ?>'>
                        <?= $available_cards ?>
                    </div>
                </div>
                <!-- /current server load -->
            </div>
            <div class="col-lg-8">
                <!-- Current server load -->
                <div class="panel panel-white">
                    <div class="panel-heading">
                        <h6 class="panel-title text-semibold">Manage</h6>
                        <div class="heading-elements">
                            <!-- ALL/APP mode -->
                            <div class="btn-group" id="ddl_view_card_mode" style="margin-right: 10px;">
                                <textarea style="display: none" id="xdump"><?= json_encode($app_card_result_list ?? []) ?></textarea>
                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                                        aria-haspopup="true" aria-expanded="false">
                                    <?= ($mode ?? 'ALL') == 'APP' ? '<i class="icon-iphone"></i><span>&nbsp;App cards&nbsp;</span>' : '<i class="icon-list"></i><span>&nbsp;All cards&nbsp;</span>' ?>
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a href="javascript:void(0);" data-mode="ALL"><i class="icon-list"></i>&nbsp;All
                                            cards&nbsp;</a></li>
                                    <li><a href="javascript:void(0);" data-mode="APP"><i class="icon-iphone"></i>&nbsp;App
                                            cards&nbsp;</a></li>
                                </ul>
                            </div>
                            <button type="button" class="btn btn-info" id="refButton"
                                    onclick="return refreshMemberCard(<?= $member_id ?>);">
                                <div id="cardRef">Refresh Category Cards</div>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="panel">
                    <div class="panel-body">
                        <?php
                        if (($mode ?? 'ALL') == 'APP') {
                            ?>
                            <table id="member_cards" style="background-color:aliceblue"
                                   class="table table-striped table-hover table-bordered table-condensed">
                                <thead class="bg-indigo">
                                <tr>
                                    <th>pic</th>
                                    <th>title</th>
                                    <th>description</th>
                                    <th>card_list_order</th>
                                    <th>card_country</th>
                                    <th>del</th>
                                    <th>move</th>
                                </tr>
                                </thead>
                                <tbody>
                                <?php foreach ($app_card_result_list ?? [] as $row) { ?>
                                    <tr>
                                        <td>
                                            <?php if ($row['template'] == 7 && !empty($row['background_color'])) {
                                                echo '<div style="width: 130px; height: 130px; background-color:#' . $row['background_color'] . '"></div>';
                                            } else {
                                                ?>
                                                <img src="<?= $row['background_picture'] ?>" style="width:130px;">
                                                <?php
                                            }
                                            ?>
                                        </td>
                                        <td><?= $row['card_id'] ?>: <?= $row['title'] ?><br>
                                            [<b><?= $row['button1_action'] ?></b>]
                                        </td>
                                        <td><?= $row['description'] ?></td>
                                        <td><?= $row['card_order'] ?></td>
                                        <td><?= $row['card_country'] ?></td>
                                        <td>
                                            <div id="cardDeleteDiv<?=$row['assign_id']?>">
                                                <button type="button" class="btn btn-danger btn-xs"
                                                        onclick="deleteMemberCard(<?= $row['assign_id'] ?>,<?= $member_id ?>);">
                                                    DEL
                                                </button>
                                            </div>
                                        </td>
                                        <td>
                                            <div id="moveMemberCardDiv1<?=$row['assign_id']?>">
                                                <button type="button" class="btn btn-info btn-xs"
                                                        onclick="moveMemberCard(<?= $row['assign_id'] ?>,<?= $member_id ?>,1,this);"><span
                                                            class="glyphicon glyphicon-triangle-top"></span></button>
                                            </div>
                                            <br>
                                            <div id="moveMemberCardDiv2<?=$row['assign_id']?>">
                                                <button type="button" class="btn btn-info btn-xs"
                                                        onclick="moveMemberCard(<?= $row['assign_id'] ?>,<?= $member_id ?>,2,this);"><span
                                                            class="glyphicon glyphicon-circle-arrow-up"></span></button>
                                            </div>
                                            <br>
                                            <div id="moveMemberCardDiv0<?=$row['assign_id']?>">
                                                <button type="button" class="btn btn-primary btn-xs"
                                                        onclick="moveMemberCard(<?= $row['assign_id'] ?>,<?= $member_id ?>,0,this);"><span
                                                            class="glyphicon glyphicon-circle-arrow-down"></span>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                <?php } ?>
                                </tbody>
                            </table>
                        <?php } else { //ALL
                            echo $member_cards;
                        }
                        ?>
                    </div>
                </div>
                <!-- /current server load -->
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">
    window.member_card_ids = <?=json_encode($member_card_ids??[])?>;
    window.fn_check_card_added = function(){
        $(".btn-add-card").each(function(){
             let card_id = $(this).data('id');
             if( window.member_card_ids.includes(card_id) ){
                 //$(this).attr('disabled','disabled').text('Added');
                 $(this).closest('tr').css('opacity',0.6);
                 $(this).closest('td').text('Added');
                 console.log(card_id);
             }
        });
    }
    $(function (){
        window.fn_check_card_added();
    });
    var index; // variable to set the selected row index
    function moveMemberCard(card_id, member_id, direction, btn) {
        //alert("Diretcion - "+ member_id);
        //   $('#moveMemberCardDiv' + direction + card_id).html('Processing...');
        $('#moveMemberCardDiv' + direction + card_id).prop('disabled', true);
        $.ajax({
            url: "/member/moveMemberCard?proc=PROCESS&card_id=" + card_id + "&member_id=" + member_id + "&direction=" + direction
        }).done(function (data) {
            //  $('#moveMemberCardDiv'+ direction + card_id).html(data);
            $('#moveMemberCardDiv' + direction + card_id).prop('disabled', false);
            dir = 'bottom';
            if (direction == 1) dir = 'up';
            if (direction == 2) dir = 'top';
            upNdown(dir, btn);
        });
    }

    function getSelectedRow() {
        var table = document.getElementById("member_cards");
        if (!table) {
            return;
        }
        for (var i = 1; i < table.rows.length; i++) {
            table.rows[i].onclick = function () {
                // clear the selected from the previous selected row
                // the first time index is undefined
                if (typeof index !== "undefined") {
                    //table.rows[index].classList.toggle("selected");
                }
                index = this.rowIndex;
                //this.classList.toggle("selected");
            };
        }
    }

    getSelectedRow();

    function upNdown(direction) {
        var rows = document.getElementById("member_cards").rows,
            parent = rows[index].parentNode;
        if (direction === "top") {
            if (index > 1) {
                parent.insertBefore(rows[index], rows[index - 1]);
                index--;
                upNdown(direction);
            }
        }
        if (direction === "bottom") {
            if (index < rows.length - 1) {
                parent.insertBefore(rows[index + 1], rows[index]);
                index++;
                upNdown(direction);
            }
        }
        if (direction === "up") {
            if (index > 1) {
                parent.insertBefore(rows[index], rows[index - 1]);
                // when the row go up the index will be equal to index - 1
                index--;
            }
        }
        if (direction === "down") {
            if (index < rows.length - 1) {
                parent.insertBefore(rows[index + 1], rows[index]);
                // when the row go down the index will be equal to index + 1
                index++;
            }
        }
    }

    function refreshMemberCard(member_id) {
        if (!confirm('Confirm Card Refresh')) {
            return false;
        }
        $('#cardRef').html('Processing...');
        $('#refButton').prop('disabled', true);
        $.ajax({
            url: "/member/refreshMemberCard?proc=PROCESS&member_id=" + member_id
        }).done(function (data) {
            $('#cardRef').html(data);
            $('#refButton').prop('disabled', false);
        });
        return false;
    }

    function addMemberCard(card_id, member_id) {
        if (!confirm('Confirm Add Card to Account')) {
            return false;
        }
        $('#cardDiv' + card_id).html('Processing...');
        $('#cardButton' + card_id).prop('disabled', true);
        $.ajax({
            url: "/member/addMemberCard?proc=PROCESS&card_id=" + card_id + "&member_id=" + member_id
        }).done(function (data) {
            $('#cardDiv' + card_id).html(data);
            $('#cardButton' + card_id).prop('disabled', false);
            if(data == 'Added'){
                $('#cardDiv' + card_id).closest('tr').css('opacity',0.5);
            }
        });
        return false;
    }

    function deleteMemberCard(card_id, member_id) {
        if (!confirm('Confirm Remove Card')) {
            return false;
        }
        $('#cardDeleteDiv' + card_id).html('Processing...');
        $('#cardButton' + card_id).prop('disabled', true);
        $.ajax({
            url: "/member/deleteMemberCard?proc=PROCESS&card_id=" + card_id + "&member_id=" + member_id
        }).done(function (data) {
            $('#cardDeleteDiv' + card_id).html(data);
            $('#cardButton' + card_id).prop('disabled', false);
        });
        return false;
    }


    function viewTrackedAdvice(tracked_id) {

        $('#lineoption').html('Processing...');
        // $('#acc' + member_id).prop('disabled', true);
        $.ajax({
            url: "/member/viewTrackedAdvice?proc=PROCESS&tracked_id=" + tracked_id
        }).done(function (data) {
            $('#lineoption').html(data);
            //    $('#acc' + member_id).prop('disabled', false);
        });
        return false;
    }

    function getSlideCards(element, member_id, card_category) {
        let str = element.href;
        let pos = str.indexOf("#/");
        let opos = pos;
        while (pos != -1) {
            pos = str.indexOf("#/", pos + 1);
            if (pos == -1) break;
            opos = pos;
        }
        if (opos == -1) {
            opos = -2;
            str = "0";
        }
        let offset = str.substring(opos + 2);
        return getSlideCardsReal(offset, member_id, card_category);
    }

    function getSlideCardsReal(offset, member_id, card_category) {
        if (typeof member_id === "undefined") {
            return false;
        }
        // &member_id=<?= $member_id ?>
        $('#transp_detail').html('Processing...');
        $('#acc' + member_id).prop('disabled', true);
        $.ajax({
            url: "/member/viewMemberAction/" + offset
                + "?proc=PROCESS&action_name=MCARDS&member_id=" + member_id
                + "&limit=<?= $limit ?>&offset=" + offset
                + "&card_category=" + card_category
        }).done(function (data) {
            $('#transp_detail').html(data);
            $('#acc' + member_id).prop('disabled', false);
            window.fn_check_card_added();
        });
        return false;
    }


    $(function () {
        $("#ddl_view_card_mode").on('click', 'li a', function () {
            let mode = $(this).data('mode');
            viewMemberActionLimitOffset('MCARDS', <?= $member_id ?>, 50, 0, {'mode': mode});
            // look good but don't need because content replaced by ajax
            $("#ddl_view_card_mode").find(".btn:first-child").text($(this).text());
            $("#ddl_view_card_mode").find(".btn:first-child").val($(this).text());
        });
    });
    $(function () {
        $('select[name=card_category]').change(function () {
            getSlideCardsReal(0, <?= $member_id ?>, this.value == '' ? '0' : this.value);
        });
        $("#member_cards").DataTable({
            "columns":[
                {
                    "sortable": false
                },
                {
                    "sortable": true
                },
                {
                    "sortable": false
                },
                {
                    "sortable": true
                },
                {
                    "sortable": true
                },
                {
                    "sortable": false
                },
                {
                    "sortable": false
                }
            ],
            "pageLength": 100,
            "order": [[3, "desc"]] // order by card list order default
        });
    });
    //initMap();
</script>