<?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_rack').DataTable({
        scrollY: "500px",
        pageLength: 25,
        processing: true,
        serverSide: true,
        ordering: true,
        order: [[1, 'asc']],
        ajax: {
            url: "<?php echo Yii::app()->createUrl('masinvrack/GetList'); ?>",
            type: "POST"
        },
        fnCreatedRow: function (nRow, aData) {
            $(nRow).addClass("context-menu");
            // Highlight default row in green
            if (aData[3] && aData[3].is_default === 'Y') {
                $(nRow).css({
                    'background-color': '#28a745',
                    'color': '#fff'
                });
            }
        },
        fnRowCallback: function (nRow, aData) {
            AddContextMenu(nRow, aData);
        },
        columns: [
            { title: "SL No",    orderable: false },
            { title: "Rack Name", orderable: true },
            {
                title: "Status",
                orderable: false,
                render: function (data) {
                    if (data === 'Active') {
                        return '<span class="label label-success">Active</span>';
                    } else {
                        return '<span class="label label-warning">Inactive</span>';
                    }
                }
            },
            { visible: false } // hidden id/status/is_default
        ]
    });
});

function AddContextMenu(row, datas) {
    $(row).contextMenu({
        selector: 'td',
        items: {
            edit: {
                name: "Edit",
                icon: "edit",
                callback: function () {
                    loadPopupModal(
                        "masinvrack/create&id=" + datas[3].id,
                        "Edit Rack",
                        "md"
                    );
                }
            },
            disable: {
                name: datas[3].status === 'Y' ? "Disable" : "Enable",
                icon: "delete",
                disabled: datas[3].is_default === 'Y' && datas[3].status === 'Y',
                callback: function () {
                    disableRack(datas[3].id, datas[3].status);
                }
            }
        }
    });
}

function disableRack(id, status) {
    $.ajax({
        url: "<?php echo Yii::app()->createUrl('masinvrack/Disable'); ?>",
        type: "POST",
        data: { id: id, status: status },
        success: function (res) {
            if (res.status === 'error') {
                t8.error(res.message || "Cannot disable this rack.");
            } else {
                table.ajax.reload(null, false);
            }
        }
    });
}
</script>

<section class="panel">
    <header class="panel-heading clearfix panel-theame">
        <i class="fa fa-archive"></i> Rack Master

        <?php if ($isAdmin): ?>
        <div class="pull-right">
            <a class="ad-btn" onclick="loadPopupModal('masinvrack/create','Add Rack','md')">
                <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>
        <?php endif; ?>
    </header>

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