<?php
$user_id   = (int) Yii::app()->user->id;
$modeluser = User::model()->findByPk($user_id);
$isAdmin   = ($modeluser && $modeluser->user_group_id == 1);
?>

<?php $cs = Yii::app()->getClientScript(); ?>
<!-- <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script> -->

<script>
var table;

$(document).ready(function () {

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

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

        ordering: true,
        order: [[1, 'desc']],

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

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

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

        columns: [
            { title: "SI No", orderable: false },
            { title: "Expense Date", orderable: true },
            { title: "Expense Type", orderable: true },
            { title: "Description", orderable: true },
            { title: "Amount", orderable: true, className: "text-right" },
            { title: "Status", orderable: true }
            <?php if ($isAdmin): ?>
            ,{ title: "Created By", orderable: true }
            <?php endif; ?>
        ]
    });

    // Reload table when either dropdown changes
    $('#expense_type_id, #user_id').change(function () {
        table.ajax.reload(null, false);
    });
});

/* ================= CONTEXT MENU ================= */
function AddContextMenu(row, datas) {

    $(row).contextMenu({
        selector: 'td',
        items: {
            edit: {
                name: "Edit",
                icon: "edit",
                callback: function () {
                    loadPopupModal(
                        "expense/create&id=" + datas[datas.length - 1].id,
                        "Edit Expense",
                        "lg"
                    );
                }
            }
        }
    });
}
// $(document).ready(function(){
//     $('#user_id, #expense_type_id').select2({
//         allowClear: true,
//         width: '100%'
//     });
// });

</script>

<section class="panel">

    <header class="panel-heading clearfix panel-theame">
        <i class="fa fa-money"></i> Expense
         <?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="col-sm-2 pull-right" style="margin-right:10px;">
            <?php
            echo CHtml::dropDownList(
                'expense_type_id',
                '',
                MasExpenseType::getExpenseTypes(),
                array(
                    'id' => 'expense_type_id',
                    'class' => 'form-control',
                    'prompt' => 'Expense Types'
                )
            );
            ?>
        </div>

        <div class="pull-right">
            <a class="ad-btn" onclick="loadPopupModal('expense/create','Add New Expense','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><!-- 
            <button class="btn btn-sm btn-theme"
                onclick="loadPopupModal('expense/create','Add New Expense','lg')">
                <i class="fa fa-plus"></i> ADD
            </button> -->
        </div>
    </header>

    <div class="panel-body">
        <div class="custom-data-table">
            <table class="table table-hover table-bordered"
                   id="tbl_expense"
                   style="font-size:13px; width:100%;">
                <thead>
                    <tr>
                        <th>SI No</th>
                        <th>Expense Date</th>
                        <th>Expense Type</th>
                        <th>Description</th>
                        <th>Amount</th>
                        <th>Status</th>
                        <?php if ($isAdmin): ?>
                        <th>Created By</th>
                        <?php endif; ?>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

</section>
