@{

    ViewData["Title"] = "Index";

}

@using SuperAdmin.Controllers;
@using SuperAdmin.Models.View;
@using SuperAdmin.Models.Object;

@model TreeViewModel

<div class="tree-container">
    <div class="row">
        <div class="col-md-4">
            <div class="row">
                @*<div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title" id="basic-layout-form">Toolbars</h4>
                                <a class="heading-elements-toggle"><i class="icon-ellipsis font-medium-3"></i></a>
                                <div class="heading-elements">
                                    <ul class="list-inline mb-0">
                                        <li><a data-action="collapse"><i class="icon-minus4"></i></a></li>
                                        <li><a data-action="expand"><i class="icon-expand2"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="card-content collapse show">
                                <div class="card-body ">
                                    <div class="card-block">
                                        <div class="form-body">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label for="serviceCode">Action</label>
                                                        <div>
                                                            <button type="button" class="btn btn-primary" onclick="addData()" id="btnAdd">
                                                                <i class="icon-search"></i> Add
                                                            </button>
                                                            <button type="button" class="btn btn-amber" onclick="searchData()" id="btnSearch">
                                                                <i class="icon-search"></i> Search
                                                            </button>
                                                            <button type="button" class="btn btn-danger" onclick="exportData(null, null)" id="btnSearch">
                                                                <i class="icon-search"></i> Export
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>*@

                @*<div id="clickable">
                        Right Click Me!
                    </div>*@

                <ul id="menu">
                    <li class="menu-item" onclick="addAction()">New</li>
                    <li class="menu-item" onclick="copyAction()">Copy</li>
                    <li class="menu-item" onclick="moveAction()">Cut</li>
                    <li id="paste-button" class="menu-item disable-click" onclick="pasteAction()">Paste</li>
                    <li class="menu-item" onclick="editAction()">Edit</li>
                    <li class="menu-item" onclick="deleteAction()">Delete</li>
                </ul>
                <div id="out-click"></div>

                <input type="hidden" class="itemID" id="itemID" value="" />
                <input type="hidden" class="action" id="action" value="" />
                <input type="hidden" class="sourceID" id="sourceID" value="" />
                <input type="hidden" class="destinationID" id="destinationID" value="" />

                <div class="col-md-12">
                    <div class=" tree-box">
                        <ul id="child-items--1">
                            @{
                                for (int i = 0; i < Model.rows.data.Count; i++)
                                {
                                    RowStructure row = Model.rows.data[i];

                                    <li>
                                        <div class="caret none-parent-style title clickable" value="@row.id">
                                            @row.name_global
                                        </div>
                                        <ul class="nested">
                                            <li id="child-items-@row.id">
                                            </li>
                                        </ul>
                                    </li>
                                }
                            }
                            @*<li>
                                    <div class="caret parent-style title clickable">
                                        Beverages
                                    </div>
                                    <ul class="nested">
                                        <li>
                                            <div class="caret parent-style clickable">Coffee</div>
                                            <ul class="nested">
                                                <li class="none-parent-style clickable">Black Tea</li>
                                                <li class="none-parent-style clickable">White Tea</li>
                                                <li>
                                                    <div class="caret parent-style clickable">Green Tea</div>
                                                    <ul class="nested">
                                                        <li class="none-parent-style clickable">Sencha</li>
                                                        <li class="none-parent-style clickable">Gyokuro</li>
                                                        <li class="none-parent-style clickable">Matcha</li>
                                                        <li class="none-parent-style clickable">Pi Lo Chun</li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </li>
                                        <li>
                                            <div class="caret parent-style clickable">Mocha</div>
                                            <ul class="nested">
                                                <li class="none-parent-style clickable">Black Tea</li>
                                                <li class="none-parent-style clickable">White Tea</li>
                                                <li>
                                                    <div class="caret parent-style clickable">Green Tea</div>
                                                    <ul class="nested">
                                                        <li class="none-parent-style clickable">Sencha</li>
                                                        <li class="none-parent-style clickable">Gyokuro</li>
                                                        <li class="none-parent-style clickable">Matcha</li>
                                                        <li class="none-parent-style clickable">Pi Lo Chun</li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </li>
                                        <li>
                                            <div class="caret parent-style clickable">Tea</div>
                                            <ul class="nested">
                                                <li class="none-parent-style clickable">Black Tea</li>
                                                <li class="none-parent-style clickable">White Tea</li>
                                                <li>
                                                    <div class="caret parent-style clickable">Green Tea</div>
                                                    <ul class="nested">
                                                        <li class="none-parent-style clickable">Sencha</li>
                                                        <li class="none-parent-style clickable">Gyokuro</li>
                                                        <li class="none-parent-style clickable">Matcha</li>
                                                        <li class="none-parent-style clickable">Pi Lo Chun</li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>*@
                        </ul>


                    </div>

                </div>
            </div>
        </div>

        <div class="col-md-8 table-responsive">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title title-parent-name" id="basic-layout-form"></h4>
                            <a class="heading-elements-toggle"><i class="icon-ellipsis font-medium-3"></i></a>
                            <div class="heading-elements">
                                <ul class="list-inline mb-0">
                                    <li><a data-action="collapse"><i class="icon-minus4"></i></a></li>
                                    <li><a data-action="expand"><i class="icon-expand2"></i></a></li>
                                </ul>
                            </div>
                        </div>
                        @*<div class="card-content collapse show">
                                <div class="card-body ">
                                    <div class="card-block">
                                        <div class="form-body">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label for="serviceCode">Action</label>
                                                        <div>
                                                            <button type="button" class="btn btn-primary" onclick="filterData()" id="btnSearch">
                                                                <i class="icon-search"></i> Filter
                                                            </button>
                                                            <button type="button" class="btn btn-amber" onclick="searchData()" id="btnSearch">
                                                                <i class="icon-search"></i> Search
                                                            </button>
                                                            <button type="button" class="btn btn-danger" onclick="exportData(null, null)" id="btnSearch">
                                                                <i class="icon-search"></i> Export
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>*@
                    </div>
                </div>

                <div class="col-md-12">
                    <table id="db-table-detail-report-month" class="table table-hover mb-0 ps-container ps-theme-default">
                        <thead>
                            <tr>
                                <th>No.</th>
                                <th>Name</th>
                                <th>Status</th>
                                <th>Action</th>
                                <th>Last Update</th>
                            </tr>
                        </thead>
                        <tbody id="replaceable-table">
                            @*@{
                                    // get the newest data folowing by each service
                                    for (int j = 0; j < 5; j++)
                                    {
                                        <tr class="@(j%2==0? "oven-column" : "")">
                                            <td class="text-truncate">@(j + 1)</td>
                                            <td class="text-truncate">bot.name</td>
                                            <td class="text-truncate">bot.description</td>
                                            <td class="text-truncate">bot.updateDate</td>
                                            <td class="text-truncate">UtilsController.convertBotStatus(int.Parse(bot.status))</td>
                                            <td class="text-truncate">
                                                <img class="icon-style edit-btn" value="bot.id" src="~/img/icons8-edit-96.png" />
                                                <img class="icon-style delete-btn" value="bot.id" src="~/img/icons8-delete-bin-96.png" />
                                            </td>
                                        </tr>
                                    }
                                }*@
                        </tbody>
                    </table>
                    <style>
                        .pagination-style {
                            max-width: 1200px;
                            margin: auto;
                            position: relative;
                            padding: 0;
                            float: none;
                            padding-right: 0;
                            text-align: center;
                        }

                        .pagination-active {
                            background: #337ab7 !important;
                            color: white !important;
                        }

                        .pagination-disable {
                            pointer-events: none;
                        }
                    </style>

                    @*@{
                            int totalPage = Model.totalPage != null ? int.Parse(Model.totalPage) : 1;

                            <div class="category-post-pagination col-xs-12 pagination-style">
                                @{
                                    <ul class="pagination clearfix pagination-ul">
                                        <li class="pagination-prev">
                                            <a href="/Config?tableType=@Model.tableType&page=1">‹‹</a>
                                        </li>
                                        <li class="pagination-prev @(pageNow == 1 ? "disabled pagination-disable" : "")">
                                            <a href="/Config?tableType=@Model.tableType&page=@(pageNow-1)">‹</a>
                                        </li>
                                        @{
                                            if (totalPage <= 4)
                                            {
                                                for (int k = 1; k <= totalPage; k++)
                                                {
                                                    <li class="@(pageNow == k ? "current" : "")">
                                                        <a class="@(pageNow == k ? "pagination-active" : "")" href="/Config?tableType=@Model.tableType&page=@k">@k</a>
                                                    </li>
                                                }
                                            }
                                            else if (pageNow <= totalPage - 4)
                                            {
                                                for (int k = pageNow; (k <= pageNow + 4 && k <= totalPage); k++)
                                                {
                                                    <li class="@(pageNow == k ? "current" : "")">
                                                        <a class="@(pageNow == k ? "pagination-active" : "")" href="/Config?tableType=@Model.tableType&page=@k">@k</a>
                                                    </li>
                                                }
                                            }
                                            else
                                            {
                                                for (int k = totalPage - 4; k <= totalPage; k++)
                                                {
                                                    <li class="@(pageNow == k ? "current" : "")">
                                                        <a class="@(pageNow == k ? "pagination-active" : "")" href="/Config?tableType=@Model.tableType&page=@k">@k</a>

                                                    </li>
                                                }
                                            }
                                        }
                                        <li class="pagination-next @(pageNow == totalPage ? "disabled pagination-disable" : "")">
                                            <a href="/Config?tableType=@Model.tableType&page=@(pageNow+1)">›</a>
                                        </li>
                                        <li class="pagination-next ">
                                            <a href="/Config?tableType=@Model.tableType&page=@totalPage">››</a>
                                        </li>
                                    </ul>
                                }
                            </div>
                        }*@
                </div>
            </div>
        </div>
    </div>
</div>

@*<script src="~/js/tree.js" type="text/javascript"></script>*@

<script type='text/javascript' src="@ViewBag.MyConfig.MyValue/js/vendors/ckeditor/ckeditor.js"></script>