<style>
body section.panel { background: #ffffff !important; border-radius: 12px !important; box-shadow: 0 4px 24px rgba(15,23,36,.08) !important; overflow: hidden !important; }
body header.panel-heading { background: linear-gradient(135deg, #0f1724, #182035) !important; color: #fff !important; font-size: 15px !important; padding: 16px 22px !important; }
body header.panel-heading .fa { color: #4f7df3 !important; }
body table#tbl_Customer thead th { background: #f5f7ff !important; font-size: 11px !important; text-transform: uppercase !important; color: #7a8aaa !important; border-bottom: 2px solid #e2e7f4 !important; border-top: none !important; border-left: none !important; border-right: none !important; }
body table#tbl_Customer tbody td { border-bottom: 1px solid #e2e7f4 !important; border-top: none !important; border-left: none !important; border-right: none !important; padding: 12px 14px !important; vertical-align: middle !important; }
body table#tbl_Customer tbody tr:hover { background: rgba(79,125,243,.04) !important; }
body .label-success { background: rgba(46,201,158,.12) !important; color: #1a9a76 !important; border: 1px solid rgba(46,201,158,.3) !important; border-radius: 20px !important; padding: 4px 12px !important; font-size: 11px !important; }
body .label-warning { background: rgba(245,165,36,.12) !important; color: #b37c10 !important; border: 1px solid rgba(245,165,36,.3) !important; border-radius: 20px !important; padding: 4px 12px !important; font-size: 11px !important; }
body .panel-body { background: #ffffff !important; padding: 20px !important; }
body #location_filter { background: #f0f2f8 !important; border: 1.5px solid #e2e7f4 !important; border-radius: 8px !important; height: auto !important; box-shadow: none !important; }
body .dataTables_wrapper .dataTables_filter input { background: #f0f2f8 !important; border: 1.5px solid #e2e7f4 !important; border-radius: 8px !important; box-shadow: none !important; }
body .dataTables_wrapper .dataTables_length select { background: #f0f2f8 !important; border: 1.5px solid #e2e7f4 !important; border-radius: 8px !important; height: auto !important; box-shadow: none !important; }
body .dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: 8px !important; border: 1.5px solid #e2e7f4 !important; background: #fff !important; margin: 0 2px !important; }
body .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: #4f7df3 !important; border-color: #4f7df3 !important; color: #fff !important; }
</style>
<?php
$user_id   = (int) Yii::app()->user->id;
$modeluser = User::model()->findByPk($user_id);
$isAdmin   = ($modeluser && $modeluser->user_group_id == 1);
?>
<script>
var table;

$(document).ready(function () {

    table = $('#tbl_CustomerLocations').DataTable({

        scrollY: "645px",
        pageLength: 50,
        processing: true,
        serverSide: true,

        ordering: true,
        order: [[0, 'asc']],

        ajax: {
            url: "<?php echo Yii::app()->createUrl('customerlocations/getList'); ?>",
            type: "POST",
            data: function (d) {
                <?php if ($isAdmin): ?>
                d.user_id = $('#user_id').val();
                <?php endif; ?>
            }
        },

        fnCreatedRow: function (nRow) {
            $(nRow).addClass("context-menu");
        },

        fnRowCallback: function (nRow, aData) {
            AddContextMenu(nRow, aData);
        },

        columns: [
            { title: "Sl No",         orderable: false },
            { title: "Customer Name", orderable: true },
            { title: "Location",      orderable: true },
            { title: "Status",        orderable: true }
        ]
    });

    <?php if ($isAdmin): ?>
    $('#user_id').change(function () {
        table.ajax.reload(null, false);
    });
    <?php endif; ?>
});

function AddContextMenu(row, datas) {

    var rowData = datas[datas.length - 1];
    var isActive = rowData.isActive;

    var toggleText = (isActive === 'Y') ? "Disable" : "Enable";

    $(row).contextMenu({
        selector: 'td',
        items: {
            edit: {
                name: "Edit",
                icon: "edit",
                callback: function () {
                    loadPopupModal(
                        "customerlocations/create&id=" + rowData.id,
                        "Edit Customer Location",
                        "lg"
                    );
                }
            },
            toggle: {
                name: toggleText,
                icon: "delete",
                callback: function () {

                    $.ajax({
                        type: "POST",
                        url: "<?php echo Yii::app()->createUrl('customerlocations/disable'); ?>",
                        data: { id: rowData.id, status: isActive },
                        success: function (res) {
                            var data = JSON.parse(res);
                            if (data.status === "success") {
                                t8.success("Status Updated");
                                table.ajax.reload(null, false);
                            } else {
                                t8.error("Failed to update");
                            }
                        }
                    });
                }
            }
        }
    });
}
</script>

<section class="panel">

    <header class="panel-heading clearfix panel-theame">
        <i class="fa fa-map-marker"></i> Customer Locations

        <?php if ($isAdmin): ?>
        <div class="col-sm-2 pull-right" style="margin-right:10px;">
            <?php
            $allUsers = User::model()->findAll(array('order' => 'username ASC'));
            $users    = CHtml::listData($allUsers, 'id', 'username');
            echo CHtml::dropDownList(
                'user_id',
                '',
                $users,
                array(
                    'id'          => 'user_id',
                    'class'       => 'form-control',
                    'prompt'      => 'All Users',
                    'data-search' => 'true'
                )
            );
            ?>
        </div>
        <?php endif; ?>

        <div class="pull-right">
            <a class="ad-btn" onclick="loadPopupModal('customerlocations/create','Add New Customer Location','lg')">
                <svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="pluss-ad">
                    <circle cx="12" cy="12" r="11" stroke="white" stroke-width="2" fill="none"></circle>
                    <line x1="12" y1="7" x2="12" y2="17" stroke="#5db5a4" stroke-width="2" stroke-linecap="round"></line>
                    <line x1="7" y1="12" x2="17" y2="12" stroke="#5db5a4" stroke-width="2" stroke-linecap="round"></line>
                </svg>
            </a>
        </div>
    </header>

    <div class="panel-body">
        <div class="custom-data-table">
            <table class="table table-hover table-bordered"
                   id="tbl_CustomerLocations"
                   style="font-size:13px; width:100%;">
                <thead>
                    <tr>
                        <th>SI No</th>
                        <th>Customer Name</th>
                        <th>Location</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

</section>