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

<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">
                            <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">
                        <?= $member_cards ?>
                    </div>
                </div>
                <!-- /current server load -->
            </div>



        </div>

    </div>
</div>



<script type="text/javascript">
<!--
    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");
    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);
    });
    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) {
    // &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);
    });
    return false;
    }

    $(function() {
    $('select[name=card_category]').change(function() {
    getSlideCardsReal(0,<?= $member_id ?>, this.value == ''?'0':this.value);
    });
    });
//initMap();
// -->
</script>