FloatBackOfffice/application/views/credit_cards/view_credit_cards.php

<div class="row">
    <div class="col-lg-5">
        <div class="panel panel-flat">
            <div class="jumbotron" style="background-color:#F3DFE5; padding:10px;">
                <?php if (isset($msg)) { ?>
                    <div class="col-12">
                        <div class="alert alert-danger alert-dismissible bg-danger text-white border-0" role="alert">
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <?php echo $msg ? $msg : '' ?>
                        </div>
                    </div>
                <?php } ?>
                <font id="message" color=red></font>
                <h3>Credit Card Benefits ADDING</h3>
                <form id="credit-card-form" name="credit-card-form" method="post" action="create" autocomplete="off">
                    <div class="form-group">
                        <label for="bank-name">Bank Name</label>
                        <input type="text" name="bank_name" id="bank-name" placeholder="Bank Name" class="form-control" />
                    </div>

                    <div class="form-group">
                        <label for="card-type">Card Type</label>
                        <input type="text" name="card_name" id="card-type" placeholder="Card Type" class="form-control" />
                    </div>

                    <input type="hidden" name="credit_card_id" id="credit-card-id" />

                    <div class="form-group">
                        <label for="benefit">Benefits</label>
                        <div id="benefit-list" class="container mt-3 mb-5">
                            <ul class="list-group" style="padding: 0;">
                            </ul>
                        </div>
                        <div class="input-group">
                            <input type="text" class="form-control" id="benefit" maxlength="256" placeholder="Benefit" />
                            <span class="input-group-btn">
                                <button class="btn btn-primary" id="btn-add-benefit" type="button">Add Benefit</button>
                            </span>
                        </div>
                    </div>

                    <div class="form-group">
                        <button type="submit" id="btn-add" class="btn btn-info btn-block btn-sm">Add</button>
                        <button type="button" id="btn-update" class="btn btn-info btn-block btn-sm hidden">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="col-lg-7">
        <div class="panel panel-white">
            <form class="search-block" method="GET" autocomplete="off">
                <div class="search-block-item">
                    <div class="form-group">
                        <label for="card_class_filter">Bank Name</label>
                        <input type="search" class="form-control" id="bank_name_filter" name="bank_name_filter">
                    </div>
                    <div class="form-group">
                        <label for="method_filter">Card Type</label>
                        <input type="search" class="form-control" id="card_type_filter" name="card_name_filter">
                    </div>
                    <div class="form-group">
                        <input class="btn btn-primary btn-search" type="button" value="Search">
                    </div>
                </div>
            </form>
            <div class="row col-lg-12">
                <div class="panel-heading mb-15">
                    <div class="heading-elements">
                        <div style='margin-top: 10px;' id='pagination'></div>
                    </div>
                </div>
                <table id="credit-card-list" class="table-bordered table-condensed table-hover table-striped table-condensed col-lg-12" style="padding:0px; background-color:lightgreen;">
                    <thead class="bg-indigo">
                        <th>No.</th>
                        <th>Bank Name</th>
                        <th>Card Type</th>
                        <th>Actions</th>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="benefit-list-modal" role="dialog" aria-labelledby="Filter data dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                    <span class="sr-only">Close</span>
                </button>
                <h1>
                    Credit Card Benefits
                </h1>
            </div>

            <!-- Modal Body -->
            <div class="modal-body">
                <div class="container-fluid">
                    <font id="message-benefits" color=red></font>
                    <form class="form-inline" role="form" method="post" action="/credit_card_benefits/update" id="benefit-list" method="GET">
                        <div class="table-responsive-sm">
                            <table class="table-bordered table-condensed table-hover table-striped table-condensed col-lg-12" role="grid" style="background-color:lightgreen;">
                                <thead role="row" class="bg-indigo">
                                    <th>Benefit</th>
                                    <th>Expired Date</th>
                                </thead>
                                <tbody role="row">
                                </tbody>
                            </table>
                        </div>
                        <div class="col-md-12" style="padding-top: 2rem;">
                            <button type="button" class="btn btn-primary" id="btn-save">Save</button>
                    </form>
                </div>
            </div>

        </div>

        <!-- Modal Footer -->
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

<script src="/assets/js/plugins/pickers/datepicker.js"></script>
<script src="/assets/js/app.js"></script>
<script src="/assets/js/pages/credit_cards/list.js" type="text/javascript"></script>

<style>
    .search-block-item {
        display: flex;
        justify-content: space-around;
        align-items: flex-end;
    }
</style>