<?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_state').DataTable({

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

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

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

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

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

        columns: [
            { title: "SI No", orderable: false },
            { title: "State Name", orderable: true },
            { title: "Country", orderable: true },
            { title: "Status", orderable: false },
            { title: "", visible: false }   // 👈 HIDDEN COLUMN FOR ID + STATUS
        ]
    });

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

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

    var currentStatus = datas[datas.length - 1].status;

    var toggleName = (currentStatus == 'Y') ? "Disable" : "Enable";
    var toggleIcon = (currentStatus == 'Y') ? "delete" : "edit";

    $(row).contextMenu({
        selector: 'td',
        items: {
            edit: {
                name: "Edit",
                icon: "edit",
                callback: function () {
                    loadPopupModal(
                        "state/create&id=" + datas[datas.length - 1].id,
                        "Edit State",
                        "lg"
                    );
                }
            },
            disable: {
                name: toggleName,   // 🔥 dynamic text
                icon: toggleIcon,   // optional
                callback: function () {

                    $.post(
                        "<?php echo Yii::app()->createUrl('state/disable'); ?>",
                        {
                            id: datas[datas.length - 1].id
                        },
                        function(res){
                            table.ajax.reload(null,false);
                        }
                    );

                }
            }
        }
    });
}
</script>

<section class="panel">

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

    <!-- COUNTRY FILTER -->
    <div class="col-sm-2 pull-right" style="margin-right:10px;">
        <?php
        echo CHtml::dropDownList(
            'country_id',
            '',
            CHtml::listData(Country::model()->findAll(array('order'=>'country_name ASC')), 'id', 'country_name'),
            array(
                'id' => 'country_id',
                'class' => 'form-control',
                'prompt' => 'All Countries'
            )
        );
        ?>
    </div>

    <!-- ADD BUTTON -->
    <div class="pull-right">
        <a class="ad-btn" onclick="loadPopupModal('state/create','Add New State','lg')">
            <svg width="30" height="30" viewBox="0 0 24 24">
                <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"></line>
                <line x1="7" y1="12" x2="17" y2="12" stroke="#5db5a4" stroke-width="2"></line>
            </svg>
        </a>
    </div>

</header>

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

</section>