{% extends 'layout/user_layout.html' %}
{% load static %}

{% block content %}
<div class="page-container">

    <!-- Page content -->
    <div class="page-content">

        <!-- Main sidebar -->
        <div class="sidebar sidebar-main" style="height: 95vh;
        min-height: 607px;">
            <div class="sidebar-content" style="height: 100%;">

                <!-- User menu -->
                <div class="sidebar-user">
                    <div class="category-content">
                        <div class="media">
                            <a href="#" class="media-left"><img src="{% static '/img/placeholder.jpg' %}" class="img-circle img-sm" alt=""></a>
                            <div class="media-body">
                                <span class="media-heading text-semibold">{{user.username}}</span>
                                <div class="text-size-mini text-muted">
                                    <i class="icon-pin text-size-small"></i>
                                </div>
                            </div>

                            <div class="media-right media-middle">
                                <ul class="icons-list">
                                    <li>
                                        <a href="#"><i class="icon-cog3"></i></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /user menu -->


                <!-- Main navigation -->
                <div class="sidebar-category sidebar-category-visible">
                    <div class="category-content no-padding">
                        <ul class="navigation navigation-main navigation-accordion">
                            
                            <!-- Main -->
                            <li class="navigation-header"> <i class="icon-menu" title="Main pages"></i></li>
                            <li><a href="{{ request.META.HTTP_HOST }}/usermanagement?page=user" class="tablinks" id="defaultOpen"><i class="icon-user"></i><span>User Management</span></a></li>
                            <li><a href="{{ request.META.HTTP_HOST }}/usermanagement?page=group" class="tablinks" id="defaultOpen"><i class="icon-users4"></i><span>Group</span></a></li>
                            <!-- <li><a class="tablinks" onclick="openInfo(event, 'info-penduduk')" id="defaultOpen"><span>Kependudukan</span></a></li>
                            <li><a class="tablinks" onclick="openInfo(event, 'info-pendidikan')" id="defaultOpen"><span>Pendidikan</span></a></li>
                            <li><a class="tablinks" onclick="openInfo(event, 'info-pekerjaan')" id="defaultOpen"><span>Pekerjaan</span></a></li>
                            <li><a class="tablinks" onclick="openInfo(event, 'info-poi')" id="defaultOpen"><span>POI</span></a></li> -->

                            <!-- /page kits -->

                        </ul>
                    </div>
                </div>
                <!-- /main navigation -->

            </div>
        </div>
        <!-- /main sidebar -->


        <!-- Main content -->
        <!-- User management Tab -->
        <div class="content-wrapper" id="info-maps">
            <div>
                <!-- Page header -->
                <div class="page-header page-header-default" style="margin-bottom: 0px;">
                    <div class="breadcrumb-line">
                        <ul class="breadcrumb">
                            <li>User Profile</li>
                        </ul>
                    </div>
                </div>
                <!-- /page header -->

                <!-- Content area -->
                <div class="content" style="padding: 15px;">
                    <!-- Main charts -->
                    <!-- Sales stats -->
                    <div class="panel panel-flat" style="display: none;">
                        <div class="panel-heading">
                            <h6 class="panel-title">Table User</h6>
                            <button id="modalAddButton" class="btn btn-primary btn-sm" value="SAVE" style="bottom: 15px; float: right; display:none;" data-toggle="modal" data-target="#modal_theme_info"></button>
                        </div>

                        <hr style="margin-top: 0px;">

                        <div class="panel-body">
                            <table class="table table-responsive datatable-show-all table-sm" id="userList" style="word-wrap:break-word;">
                                <thead>
                                    <tr>
                                        <th>No.</th>
                                        <th>Username</th>
                                        <th>Name</th>
                                        <th>Email</th>
                                        <th>Group</th>
                                        <th>Last login</th>
                                        <th>Status</th>
                                        <th class="text-center">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for user in data %}
                                    <tr>
                                        <td>{{forloop.counter}}</td>
                                        <td>{{user.username}}</td>
                                        <td>{{user.name}}</td>
                                        <td>{{user.email}}</td>
                                        <td>{{user.group}}</td>
                                        <td>{{user.last}}</td>
                                        <td>
                                            {% if user.isactive == True %}
                                            <span class="label label-success">
                                                Active
                                            </span> {% else %}
                                            <span class="label label-danger">
                                                Inactive
                                            </span> {% endif %}
                                        </td>
                                        <td class="text-center">
                                            <ul class="icons-list">
                                                <li class="dropdown">
                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                                        <i class="icon-menu9"></i>
                                                    </a>

                                                    <ul class="dropdown-menu dropdown-menu-right">
                                                        <li><a onclick="switchuserstatus('{{user.id}}, {{user.isactive}}')"><i class="icon-user-block"></i> Switch user status</a></li>
                                                        <li><a onclick="loaduserbyid('{{user.id}}')"><i class="icon-users"></i> Edit user</a></li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                        <!-- /form validation -->
                    </div>
                </div>
                <!-- /main charts -->
            </div>
        </div>

        <!-- end user management tab -->

        <div class="content-wrapper" id="usergroup" style="display: none;">
            <div>
                <!-- Page header -->
                <div class="page-header page-header-default" style="margin-bottom: 0px;">
                    <div class="breadcrumb-line">
                        <ul class="breadcrumb">
                            <li>Group</li>
                        </ul>
                    </div>
                </div>
                <!-- /page header -->

                <!-- Content area -->
                <div class="content" style="padding: 15px;">
                    <!-- Main charts -->
                    <!-- Sales stats -->
                    <div class="panel panel-flat" style="display: none;">
                        <div class="panel-heading">
                            <h6 class="panel-title">Table Group</h6>
                            <button id="modalAddButtong" class="btn btn-primary btn-sm" value="SAVE" style="bottom: 15px; float: right; display:none;" data-toggle="modal" data-target="#modal_group"></button>
                        </div>

                        <hr style="margin-top: 0px;">

                        <div class="panel-body">
                            <table class="table table-responsive datatable-groups table-sm" id="usergroup">
                                <thead>
                                    <tr>
                                        <th>No.</th>
                                        <th>Name</th>
                                        <th class="text-center">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for group in dataGroup %}
                                    <tr>
                                        <td>{{forloop.counter}}</td>
                                        <td>{{group.name}}</td>
                                        <td class="text-center">
                                            <ul class="icons-list">
                                                <li class="dropdown">
                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                                        <i class="icon-menu9"></i>
                                                    </a>

                                                    <ul class="dropdown-menu dropdown-menu-right">
                                                        <li><a onclick="deletegroup('{{group.id}}', '{{group.name}}')"><i class="icon-user-block"></i> Delete group</a></li>
                                                        <li><a onclick="showmodalgroup('{{group.id}}', '{{group.name}}')"><i class="icon-users"></i> Edit group</a></li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                        <!-- /form validation -->
                    </div>
                </div>
                <!-- /main charts -->
            </div>
        </div>

        <!-- /main content -->
    </div>
    <!-- /page content -->
</div>
<!-- /page container -->

<div id="modal_theme_info" class="modal fade">
    <div class="modal-dialog md" style="margin-top: 100px;">
        <div class="modal-content">
            <div class="modal-header bg-info" style="background-color: #1a222f !important;">
                <button type="button" class="close" data-dismiss="modal" onclick="destroyfade()">&times;</button>
                <h6 class="modal-title modstit">Modal Tambah User</h6>
            </div>

            <div class="modal-body" style="max-height: 450px;overflow-y: auto;">
                <input type="hidden" id="iduser">

                <div class="row">
                    <div class="form-group">
                        <label class="col-lg-3 control-label lbl-top">Username</label>
                        <div class="col-lg-9">
                            <input id="inUsername" type="text" class="form-control" value="" required>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="form-group">
                        <label class="col-lg-3 control-label lbl-top">First Name</label>
                        <div class="col-lg-9">
                            <input id="inNameF" type="text" class="form-control" value="" required>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="form-group">
                        <label class="col-lg-3 control-label lbl-top">Last Name</label>
                        <div class="col-lg-9">
                            <input id="inNameL" type="text" class="form-control" value="" required>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="form-group">
                        <label class="col-lg-3 control-label lbl-top">Email</label>
                        <div class="col-lg-9">
                            <input id="inEmail" type="text" class="form-control" value="" required>
                        </div>
                    </div>
                </div>

                <div class="row" style="margin-top: 20px;">
                    <div class="form-group">
                        <label class="col-lg-3 control-label">Staff</label>
                        <div class="col-lg-9">
                            <label class="radio-inline">
                                    <input type="radio" class="styled" value="true" name="isStaff" checked="checked">
                                    Ya
                                </label>

                            <label class="radio-inline">
                                    <input type="radio" class="styled" value="false" name="isStaff">
                                    Tidak
                                </label>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="form-group" style="margin-top: 10px !important;">
                        <label class="col-lg-3 control-label lbl-top">Groups</label>
                        <div class="col-lg-9">
                            <select style="border-bottom: 1px solid rgb(83, 83, 83) !important;" id="select_group" data-placeholder="select group.." class="select-size-xs">
                                        <option></option>
                                </select>
                        </div>
                    </div>
                </div>

            </div>
            <hr>
            <div class="modal-footer">
                <button type="button" class="btn btn-link" data-dismiss="modal" onclick="destroyfade()">Close</button>
                <button type="button" class="btn btn-info" id="saveuser">Save changes</button>
            </div>
        </div>
    </div>
</div>

<div id="modal_group" class="modal fade">
    <div class="modal-dialog md" style="margin-top: 200px;">
        <div class="modal-content">
            <div class="modal-header bg-info" style="background-color: #1a222f !important;">
                <button type="button" class="close" data-dismiss="modal" onclick="destroyfade()">&times;</button>
                <h6 class="modal-title modstitg">Modal Tambah Group</h6>
            </div>

            <div class="modal-body" style="max-height: 450px;overflow-y: auto;">
                <input type="hidden" id="idgroup">

                <div class="row">
                    <div class="form-group">
                        <label class="col-lg-3 control-label lbl-top">Nama Group</label>
                        <div class="col-lg-9">
                            <input id="inGroupName" type="text" class="form-control" value="" required>
                        </div>
                    </div>
                </div>

                <div class>

                    <div class="row" id="container_sparent">
                        <div class="form-group" style="margin-top: 10px !important;">
                            <label class="col-lg-3 control-label lbl-top">Group Parent</label>
                            <div class="col-lg-9">
                                <select style="border-bottom: 1px solid rgb(83, 83, 83) !important;" id="select_group_parent" data-placeholder="select group.." class="select-size-xs">
                                        <option></option>
                                </select>
                            </div>
                        </div>
                    </div>

                </div>
                <hr>
                <div class="modal-footer">
                    <button type="button" class="btn btn-link" data-dismiss="modal" onclick="destroyfade()">Close</button>
                    <button type="button" class="btn btn-info" id="savegroup">Save changes</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}