{% extends '::base.html.twig' %}
{# {% form_theme form 'AppBundle:Form:form_div_layout.html.twig' %} #}
{% block usercss %}
    {{ parent() }}
    <style>
        @media
        only screen and (max-width: 760px),
        (min-device-width: 768px) and (max-device-width: 1024px)  { 

            /*
            Label the data
            */
            td:nth-of-type(1):before { content: "#"; }
            td:nth-of-type(2):before { content: "Usename"; }
            td:nth-of-type(3):before { content: "Name"; }
            td:nth-of-type(4):before { content: "Surname"; }
            td:nth-of-type(5):before { content: "DOB"; }
            td:nth-of-type(6):before { content: "Email"; }
            td:nth-of-type(7):before { content: "Qualification"; }
            td:nth-of-type(8):before { content: "Institution"; }
            td:nth-of-type(9):before { content: "Actions"; }
            td:nth-of-type(10):before { content: "Status"; }
        }
    </style>
{% endblock %}
{% block body -%}
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading"> <h6>List : Users</h6> </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-sm-2">
                            <div class="form-group">
                                <label>No. of Records:</label>

                                <select name="maxItemPerPage" id="maxItemPerPage" class="form-control">
                                    <option id="10"
                                            {% if maxItemPerPage is defined and maxItemPerPage == 10 %}
                                                selected="selected"
                                            {% endif %}
                                            >10</option>
                                    <option id="20"
                                            {% if maxItemPerPage is defined and maxItemPerPage == 20 %}
                                                selected="selected"
                                            {% endif %}
                                            >20</option>
                                    <option id="30"
                                            {% if maxItemPerPage is defined and maxItemPerPage == 30 %}
                                                selected="selected"
                                            {% endif %}
                                            >30</option>
                                    <option id="50"
                                            {% if maxItemPerPage is defined and maxItemPerPage == 50 %}
                                                selected="selected"
                                            {% endif %}
                                            >50</option>
                                    <option id="100"
                                            {% if maxItemPerPage is defined and maxItemPerPage == 100 %}
                                                selected="selected"
                                            {% endif %}
                                            >100</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label>Search:</label>
                                <input type="text" name="search_text" id="search_text"  class="form-control"/>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Content of the table -->
                <div class="data_container">
                    {{ include('AppBundle:PasswordChange:TableContent/show.html.twig') }}
                </div>
            </div>
        </div>
    </div>

{% endblock %}
{% block userscripts %}

    <script type="text/javascript">
        $(document).ready(function () {

            //on select change, you navigate to indexAction and send the parameter maxItemPerPage
            $('#maxItemPerPage').change(function () {

                var url = "{{path('usermanagement_show_password_change_request',{'maxItemPerPage':'_itemNum'})}}";
                var item = $('#maxItemPerPage').find(":selected").text();
                window.location.href = url.replace('_itemNum', item);
            });
            $("#search_text").on("keyup", function () {
                var pathname = window.location.pathname; // Returns path only
                __loadPage(pathname)
            });

        });

        $("body").on("click", ".change-password", function () {
            var ths = $(this);

            var profile = ths.data("id");
            $.ajax({
                url: "{{ path('usermanagement_process_password_change_request') }}",
                method: "POST",
                data: {profile: profile},
                beforeSend: function () {
                    ths.find(".fa-spin").remove();
                    ths.append(" <i class='fa fa-spin fa-2x fa-spinner'>");
                },
            }).done(function (data) {
                try {
                    if (data.status == "success") {
                        ths.closest("tr").remove();
                        alertify.success(data.message);
                    }
                    if (data.status == "error") {
                        alertify.error(data.message);
                    }
                } catch (err) {
                    alertify.error("Error : " + err.message );
                }

            }).complete(function () {
                ths.find(".fa-spin").remove();
            }).error(function () {
                alertify.error("Some error found!!!");
            });
        });


        function __loadPage(path) {
            var search_text = $("#search_text").val();
            $.ajax({
                type: "POST",
                url: path,
                data: {search_text: search_text},
                beforeSend: function () {
                    $("#ajax_loader_div").show();
                },
                success: function (html) {
                    $(".data_container").html(html);
                },
                complete: function () {
                    $("#ajax_loader_div").hide();
                }

            });
        }

    </script>
{% endblock %}