FloatBackOfffice/application/views/admin/view_country.php

<div class="row">
    <div class="col-lg-8">
        <div class="panel panel-white">
            <div class="panel-heading">
                <form class="search-block form-inline" action="/bkoadmin/country" method="POST">
                    <div class="row">
                    <div class="form-row">
                        <div class="form-group">
                            <label for="search_text">Name</label>
                            <input type="text" class="form-control" name="search_text" value='<?=isset($search_text)?$search_text:''?>'>
                        </div>
                        
                        <div class="form-group">
                            <button class="btn btn-primary btn-search" type="submit">Search</button>
                        </div>
                    </div>
                    </div>
                </form>
            </div>
        </div>
        <!-- Media library -->
        <div class="panel panel-white">
            <div class="panel-heading">
                <h6 class="panel-title text-semibold">Countries</h6>
                <div class="heading-elements">
                    <?= $links ?>
                </div>
            </div>
            
            <table class="table table-striped media-library table-lg">
                <thead>
                    <tr>
                        <th>Country</th>
                        <th>Code</th>
                        <th>Status</th>
                        <th colspan=2 style="text-align:center">Top Image[400x600]</th>
                        <th>Cities</th>
                    </tr>
                </thead>
                <tbody>
                    <?
                    foreach ($countries as $item) {
                        ?>
                        <tr>
                            <td>
                                <?= $item['country'] ?><? if ($item['uniqueid'] != '') { ?><br/>
                                    <div id="country_image_link_<?= $item['id'] ?>"><a href="<?= $storage ?>topcard/<?= $item['uniqueid'] . "." . $item['format'] ?>"><?= $storage ?>topcard/<?= $item['uniqueid'] . "." . $item['format'] ?></a></div><? } ?>
                            </td>
                            <td style="width:50px;"><?= $item['code'] ?></td>
                            <td style="width:50px;"><input type="checkbox" name="status_<?= $item['id'] ?>" value="1" class="styled" <?= $item['status'] == 1 ? 'checked' : '' ?> onchange="return updateCountryStatus('<?= $item["id"] ?>', this.checked);"></td>
                            <td align=right><div id="country_image_<?= $item['id'] ?>"><? if ($item['uniqueid'] != '') { ?>
                                        <a href="<?= $storage ?>topcard/<?= $item['uniqueid'] . "." . $item['format'] ?>" data-popup="lightbox">
                                            <img src="<?= $storage ?>topcard/<?= $item['uniqueid'] . "." . $item['format'] ?>?size=40x40" alt="" class="img-rounded img-preview">
                                        </a>
                                    <? } ?></div></td>
                            <td style="width:150px;"><div class="btn-group" role="group" aria-label="Basic example">
                                    <button type="button" class="btn btn-info" onclick="return showUploadForm('<?= $item["id"] ?>', '<?= $item["country"] ?>')">U</button>
                                    <button type="button" class="btn btn-danger" onclick="return deleteCountryImage('<?= $item["id"] ?>');">X</button>
                                </div></td>
                            <td style="width:50px;">
                                <a href="/bkoadmin/countrycity?country=<?=$item['code']?>">Cities</a>
                            </td>
                        </tr>

                        <?
                    }
                    ?>


                </tbody>
            </table>
        </div>
        <!-- /media library -->





    </div>

    <div class="col-lg-4">
        <div class="panel panel-flat">
            <font color=red><b><div id="message"><?= $message ?></div></b></font>
            <div id="upload_form" style="display:none;">
                <form class="form-horizontal" action="?" method="POST" enctype="multipart/form-data">
                    <fieldset class="content-group"><?= $message ?>
                        <legend id="top_image_legend" class="text-bold">Top Image</legend>
                        <div class="form-group">
                            <label class="col-lg-3 control-label text-semibold"> Select File:</label>
                            <div class="col-lg-9">
                                <input type="file"  name="cardimg" class="file-input form-control btn btn-danger">
                                <span class="help-block">Upload country top image</code>.</span>
                            </div>
                        </div>
                        <input type="hidden" name="id" id="top_image_country_id" value="0" />
                        <input type="hidden" name="catid" value="4" />
                        <div style="text-align:center;">
                            <input type="submit" class="btn btn-primary" value="Upload">
                        </div>

                    </fieldset>
                </form>
            </div>


            <div class="jumbotron" style="background-color:#F3DFE5; padding:20px;">
                <h3>Top Image Standard</h3> 
                <p>The app is optimized for image <b>600x920</b> jpg files only. The image must be optimized for web use, the smaller the file size the better</p> 
            </div>
<b><h3>Default Image - https://www.float.sg/float/static_top.jpg </h3></b>
            <img src="https://www.float.sg/float/static_top.jpg" alt="Default Image">
        </div>


    </div>

</div>
<script>
    function showUploadForm(id, name) {
        $('#top_image_country_id').val(id);
        $('#top_image_legend').html(name);
        $('#upload_form').show();
        return false;
    }
    function updateCountryStatus(id, enabled) {
        var status = enabled ? 1 : 0;
        var xhr = new XMLHttpRequest();
        xhr.open('GET', '/bkoadmin/countryStatus?id=' + id + '&status=' + status, true);
        xhr.responseType = 'html';
        xhr.onload = function () {
            var status = xhr.status;
            if (status === 200) {
                alert(xhr.response);
            } else {
                alert('ERROR:' + xhr.response);
            }
        };
        xhr.send();
    }
    function deleteCountryImage(id) {
        if (!confirm('Are you sure you want to delete country top image?'))
            return false;
        var xhr = new XMLHttpRequest();
        xhr.open('GET', '/bkoadmin/countryImageDelete?id=' + id, true);
        xhr.responseType = 'html';
        xhr.onload = function () {
            var status = xhr.status;
            if (status === 200) {
                $('#message').html(xhr.response);
                $('#country_image_' + id).html('');
                $('#country_image_link_' + id).html('');
            } else {
                $('#message').html('ERROR:' + xhr.response);
            }
        };
        xhr.send();
    }
</script>