FloatBackOfffice/application/views/feed/view_onboardfeed.php

<style>
    .d-flex {
        display: flex;
    }
    .flex-wrap {
        flex-wrap: wrap;
    }
    .col-12 {
        flex-basis: 100%;
    }
    .col-6 {
        flex-basis: 50%;
    }
    .col-3 {
        flex-basis: 25%;
    }
    .col-2 {
        flex-basis: 16.6667%;
    }
    .p-15 {
        padding: 15px;
    }
    .fill-available {
        height: -webkit-fill-available;
    }
    #loading-message, #survey-loading-message {
        display: none;
        text-align: center;
    }
    #survey-table {
        border: 1px solid #ddd !important;
    }
    .mrb-15px {
        margin: 0 15px 15px 0;
    }
    #selected-survey-wrapper {
        display: none;
    }
    .spacer {
        border: 1px solid #2196F3;
    }
    .justify-content-between {
        justify-content: space-between;
    }
    .w-auto {
        width: auto;
    }
    .m-0 {
        margin: 0;
    }
    .h-45px {
        height: 45px;
    }
    #edit-btn-wrapper {
        display: none;
        position: absolute;
        width: 60px;
        height: 30px;
    }
    .edit-btn {
        margin: 0 5px;
        font-size: 20px;
        cursor: pointer;
    }
    .green {
        color: #4CAF50;
    }
    .red {
        color: red;
    }
    #survey-pagination {
        padding-top: 15px;
        text-align: center;
    }
</style>

<div class="d-flex">
    <div class="col-6 panel panel-white p-15" style="position: relative">
        <form id="search-form" class="d-flex flex-wrap">
            <input type="text" id="answersKey" class="form-control col-3 mrb-15px" placeholder="Answers key">
            <input type="text" id="answers" class="form-control col-3 mrb-15px" placeholder="Answers">
            <div class="col-2">
                <button type="button" id="survey_filter_btn" class="btn btn-primary mrb-15px">Search</button>
            </div>
        </form>
        <table id="survey-table" class="table-bordered table-condensed table-hover table-striped table-condensed" style="background-color:#f0f8ff;" width="100%">
            <thead class="bg-indigo">
                <th>Group</th>
                <th>Answers key</th>
                <th style="width: 60%">Answers</th>
                <th style="width: 101px">View</th>
            </thead>
            <tbody>
                <?php
                    foreach ($surveys['result'] as $survey) {
                        echo '<tr>';
                        echo '<td>' . $survey['group_key']. '</td>';
                        echo '<td>' . $survey['answers_key']. '</td>';
                        echo '<td data-id="' . $survey['id'] . '" contenteditable="true">' . $survey['answers']. '</td>';
                        echo '<td><button type="button" class="btn btn-primary show-cards" onclick="selectCardBySurveyID(this)">Cards</button></td>';
                        echo '</tr>';
                    }
                ?>
            </tbody>
        </table>
        <div id="edit-btn-wrapper">
            <span id="update-answers-btn" class="edit-btn green">&#10004;</span>
            <span id="discard-change-btn" class="edit-btn red">&#10006;</span>
        </div>
        <h4 id="survey-loading-message" class="col-12">Processing...</h4>
        <div id="survey-pagination"></div>
    </div>
    <div id="selected-survey-wrapper" class="d-flex flex-wrap col-6 panel panel-white fill-available">
        <div class="row">
            <div class="col-lg-6">
                <h4 id="selected-survey" class="m-0 p-15">Answers Key: Answers</h4>
            </div>
            <div class="col-lg-6">
                <form  id="frmSearchSurveyCards">
                    <div  style="padding: 10px 20px 0 0; position: relative;">
                        <input type="search" class="form-control" placeholder="Input..."/>
                        <button type="submit" class="btn btn-primary" style="position: absolute; right: 10px; top: 10px;">Search</button>
                    </div>
                </form>
            </div>
        </div>
        <div class="spacer"></div>
        <h4 id="loading-message" class="col-12">Processing...</h4>
        <div id="card-tables-wrapper" class="d-flex col-12">
            <div class="col-6 p-15 fill-available">
                <div class="d-flex justify-content-between h-45px">
                    <h4 class="m-0">Available cards</h4>
                    <select id="card-cat" class="form-control w-auto">
                        <option value="" selected>All</option>
                        <?php
                            foreach ($card_cats as $card_cat) {
                                echo "<option value=\"{$card_cat['cat']}\">{$card_cat['name']}</option>";
                            }
                        ?>
                    </select>
                </div>
                <table id="available-cards" class="table-bordered table-condensed table-hover table-striped table-condensed" style="background-color:#f0f8ff;" width="100%">
                    <thead class="bg-indigo">
                        <th>Card Title</th>
                        <th>Action</th>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
            <div class="col-6 p-15 fill-available">
                <h4 class="h-45px m-0">Assigned cards</h4>
                <table id="assigned-cards" class="table-bordered table-condensed table-hover table-striped table-condensed" style="background-color:#f0f8ff;" width="100%">
                    <thead class="bg-indigo">
                        <th>Action</th>
                        <th>Card Title</th>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script src="/assets/js/plugins/pagination/bootpag.min.js"></script>
<script src="/assets/js/pages/personalty/OnboardingSurvey.js?v=3"></script>

<script>
    let total = <?= $surveys['total'] ?>;
    let pageSize = <?= $surveys['pageSize'] ?>;

    renderPagination(total, pageSize);
</script>