FloatBackOfffice/application/views/cards/view_cards.php

<style type="text/css">
    .error{
        border-color: red;
    }
    .error:focus{
        border-color: red !important;
    }
    span.required, strong.required{
        color:red;
        font-weight: bold;
    }
</style>
<!-- div class="container" -->
<div class="row justify-content-md-center">
    <div class="col col-lg-6">
        <div class="card" style="width: 100%; background-color: #B3CDC9; padding: 5px;">
            <div class="card-body" id="card_form">
            <font color=red><?= $message ?> </font>
                <?php
                include 'common/card_form.php';
                ?>
            </div>
        </div> 
        <div>
            HELP :<a href="https://wiki.float.sg/backoffice/offercards/offercards">https://wiki.float.sg/backoffice/offercards/offercards</a>
        </div>
    </div>

    <div class="col col-lg-6">
        <!-- Media library -->
        <div class="panel panel-white">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-md-10">
                        <form class="form-inline" method="GET" action="/cards/cardspage/<?php echo $filterData['card_category'] ?? 0 ?>">
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="form-group p-y-sm">
                                        <label for=""><b>Configured Cards</b></label>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group p-y-sm">
                                        <?php echo $cart_filter_by_selectbox; ?>
                                    </div>
                                </div>
                                <div class="col-md-7">
                                    <div class="form-group p-y-sm">
                                        <input type="search" name="filter_value" class="form-control" placeholder="Filter value" value="<?= $filterData['filter_value'] ?? '' ?>" />
                                        <button type="submit" class="btn btn-primary btn-sm">Search</button>
                                        <button type="button" class="btn btn-secondary btn-sm clearSearchText">Clear</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group p-y-sm">
                            <?= $card_category ?>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel-body">
                <div class="m-y-sm"><? echo $links ?></div>
                <div class="table-responsive">
                    <?= $card_table ?>
                </div>
            </div>
        </div>
        <!-- /media library -->
    </div>
    
    <div id="card_detail" style="display:none;">
        Cards Preview
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalScrollableTitle">Card Settings: <?=$card_id?></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
    function deleteCard(card_id){

        // alert(card_id);
            var result = confirm("Confirm archive card id="+card_id+"?");
            if (result) {
            //Logic to delete the item
            $.ajax({
                url: "/bkoadmin/cardarchive?proc=PROCESS&card_id=" + card_id
            }).done(function (data) {
                $('#del_form'+card_id).html(data);
            });

            }

        return false;
    }
    function viewCard(card_id) {

        $('#card_detail').html('Processing...');
        $('#acc' + card_id).prop('disabled', true);
        $.ajax({
            url: "/cards/viewcard?proc=PROCESS&card_id=" + card_id
        }).done(function (data) {
            $('#card_detail').html(data);
            $('#acc' + card_id).prop('disabled', false);
            show_light_box('card_detail');
        });
        return false;
    }

    function editCard(card_id) {
        $('#card_form').html('Processing...');
        $('#edit' + card_id).prop('disabled', true);
        $.ajax({
            url: "/cards/editcard?proc=PROCESS&card_id=" + card_id
        }).done(function (data) {
            $('#card_form').html(data);
            $('#edit' + card_id).prop('disabled', false);
        });
        return false;
    }

    $(function() {
        $('select[name=card_category]').change(function() {
            document.location = '/cards/cardspage/'+(this.value==''?'0':this.value)+'/0';
        });
    });
    // update card
    var customizer = {
        locker: false,
        init: function() {
            this.handleCardUpdate();
            this.clearSearchText();
        },
        handleCardUpdate: function() {
            $(document.body).find('#card_form').on('submit', 'form', function(event) {
                event.preventDefault();
                if ( customizer.locker ) {return;}
                customizer.locker = true;

                var _this = $(this),
                    button = _this.find('button[type="submit"]'),
                    button_text = button.text(),
                    formdata = _this.serialize();
                $.ajax({
                    url: '/cards/cardspage',
                    type: 'POST',
                    data: formdata,
                    beforeSend: function() {
                        $('#frm_update_card').find('.error').removeClass('error');
                        button.text('loading...');
                    }
                })
                .done(function( res ) {
                    if ( !res.success ) {
                        res.message = button_text + " card get errors: " + res.message.replace(/(?:\<br\/>)/gm, '\n');
                        if(typeof res.error_ids !== 'undefined' && res.error_ids.length>0){
                            res.error_ids.forEach(function(err_id, ierr_id){
                                $('#'+err_id).addClass('error');
                                if(ierr_id === 0){
                                    $('#'+err_id).focus();
                                }
                            });
                        }
                    } else {
                        var cardSection = $(document.body).find('#acc'+res.fragments.id);
                        var parentElement = cardSection.closest('td');
                        parentElement.next().html( res.fragments.html );
                    }
                    alert( res.message );
                })
                .fail(function( throwErr ) {
                    console.log( throwErr );
                })
                .always(function() {
                    customizer.locker = false;
                    button.text( button_text );
                });
            });
        },
        clearSearchText: function() {
            $(document.body).find('.clearSearchText').on('click', function(event) {
                event.preventDefault();
                var _this = $(this),
                    searchTextarea = _this.closest('.form-group').find('textarea');
                if ( searchTextarea.val() == '' ) return;
                searchTextarea.val('');
                window.location.replace('/cards/cardspage/');
            });
        }
    };
    customizer.init();
</script>

<?php
    $this->load->view('cards/common/lightbox.php');
?>