<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
$cs = Yii::app()->getClientScript();
$cs->registerScript("DisableCustomer", "
function Disable(id, status){
    var r = confirm((status == 'Y') ? 'Are you sure to disable this customer?' : 'Are you sure to enable this customer?');
    if(r==true)
    {
        jQuery.ajax({
          type  : 'post',
          datatype : 'json',
          data  : 'id=' + id + '&status=' + status,
          url  : $('#liveSite').val()+'index.php?r=customers/Disable',
          cache: false,
          success:function(data){
            if(data.status=='fail'){
                t8.error('Error while Disable');
            } else {
                reloadTable('#tbl_Customer');
                t8.success('Success!');
            }
           }
        });
    }
};
", CClientScript::POS_HEAD);
?>

<script>
var table;

$(document).ready(function () {

    var table_id = "#tbl_Customer";

    if ($.fn.DataTable.isDataTable(table_id)) {
        $(table_id).DataTable().destroy();
    }

    table = $(table_id).DataTable({

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

        columnDefs: [
            { targets: [10], visible: false }
        ],

        ajax: {
            url: "<?php echo Yii::app()->createUrl('customers/GetList') ?>",
            type: "POST",
            cache: false,
            data: function(d) {
                d.location_id = $('#location_filter').val();
            },
            error: function(xhr, error, thrown) {
                console.log('Status: ' + xhr.status);
                console.log('Response: ' + xhr.responseText);
                alert('Ajax Error: ' + xhr.responseText);
            }
        },

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

        fnRowCallback: function (nRow, aData) {

            $(nRow).removeClass('bg-success bg-danger');

            if (aData[10].status === "N") {
                $(nRow).addClass('bg-danger');
            }

            AddContextMenu(nRow, aData);
        }
    });

    $('#location_filter').change(function () {
        table.ajax.reload(null, false);
    });

});

function AddContextMenu(row, datas) {

    $(row).contextMenu({
        selector: 'td',

        items: {

            "edit": {
                name: "Edit",
                icon: "edit",
                callback: function () {
                    loadPopupModal(
                        "customers/create&id=" + datas[10].id,
                        datas[1],
                        "lg"
                    );
                }
            },

            "Disable_Enable": {
                name: (datas[10].status == "Y") ? "Disable" : "Enable",
                icon: "edit",
                callback: function () {
                    Disable(datas[10].id, datas[10].status);
                }
            }
        }
    });
}
</script>

<section class="panel">
    <header class="panel-heading clearfix panel-theame">
        <i class="fa fa-users"></i> Customers

        <!-- Location filter dropdown -->
        <div class="col-sm-2 pull-right" style="margin-right:10px;">
            <?php
            echo CHtml::dropDownList(
                'location_filter',
                '',
                CHtml::listData(
                    Locations::model()->findAll(array(
                        'condition' => 'isActive = :a',
                        'params'    => array(':a' => 'Y'),
                        'order'     => 'location_name ASC'
                    )),
                    'id',
                    'location_name'
                ),
                array(
                    'id'     => 'location_filter',
                    'class'  => 'form-control',
                    'prompt' => 'All Locations'
                )
            );
            ?>
        </div>

        <div class="pull-right">
          <?php
          $user_id   = (int) Yii::app()->user->id;
          $modeluser = User::model()->findByPk($user_id);

          if ($modeluser->user_group_id == 1) {
            ?>
             <a class="ad-btn" onclick="loadPopupModal('customers/create','Add New Customer','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>
         <?php } ?>
        </div>
    </header>

    <div class="panel-body">
        <div class="custom-data-table">
            <table class="table table-hover table-bordered personal-task"
                   id="tbl_Customer" style="font-size:13px;">
                <thead>
                    <tr>
                        <th>SI No</th>
                        <th>Customer Name</th>
                        <th>Phone No</th>
                        <th>Email</th>
                        <th>Address</th>
                        <th>Image</th>
                        <th>Status</th>
                        <th>Location</th>
                        <th>Country</th>
                        <th>State</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</section>