{extends file="admin-layout.tpl"}

{block name="after-bootstrap-css"}
    <link rel="stylesheet" href="{stylesheet file='assets/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css'}">
{/block}

{block name="no-return-functions"}
    {$admin_current_location = 'configuration'}
{/block}

{block name="page-title"}{intl l='Administration logs'}{/block}

{block name="check-resource"}admin.configuration.admin-logs{/block}
{block name="check-access"}view{/block}

{block name="main-content"}
    <div class="admin-logs">

        <div id="wrapper" class="container">

            <ul class="breadcrumb">
                <li><a href="{url path='/admin/home'}">{intl l="Home"}</a></li>
                <li><a href="{url path='/admin/configuration'}">{intl l="Configuration"}</a></li>
                <li><a href="{url path='/admin/configuration/adminLogs'}">{intl l="Administration logs"}</a></li>
            </ul>

            {hook name="admin-logs.top" location="admin_logs_top" }

            <div class="row">
                <div class="col-md-12">
                    <div class="general-block-decorator">

                        <div class="title title-without-tabs">{intl l="Administration logs"}</div>

                        <div class="row inner-toolbar">
                            <div class="col-md-12 inner-actions clearfix">
                                <button type="button" class="btn btn-default btn-success pull-right js-show-logs" title="{intl l='Show logs'}">{intl l='Show logs'} <span class="glyphicon glyphicon-eye-open"></span></button>
                            </div>
                        </div>


                        <div class="row">
                            <div class="col-md-1 text-right">
                                <p class="form-control-static"><strong>{intl l='Period'} :</strong></p>
                            </div>

                            <div class="col-md-3">
                                <div class="form-group">
                                    <div class="input-group date">
                                        <span class="input-group-addon">{intl l='From'}</span>
                                        <input class="form-control datetime-picker from-datetime-picker" type="text" id="from_date" readonly="readonly">
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-calendar"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-3">
                                <div class="form-group">
                                    <div class="input-group date">
                                        <span class="input-group-addon">{intl l='To'}</span>
                                        <input class="form-control datetime-picker to-datetime-picker" type="text" id="to_date" readonly="readonly">
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-calendar"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
	                        <div class="col-md-12">

                                <p class="form-control-static"><strong>{intl l='Administrators'} :</strong></p>

	                            <div class="row">
	                            {loop type="admin" name="admin-list" backend_context="1"}
	                                <div class="col-md-3">
                                        <label class="checkbox-inline">
                                            <input id="admin_{$ID}" data-id="{$LOGIN}" class="js-admin" type="checkbox" checked>{$LOGIN} ({$FIRSTNAME} {$LASTNAME})
                                        </label>
	                                </div>
                                    {if ($LOOP_COUNT)%4 == 0}<div class="clearfix"></div>{/if}
                                {/loop}
	                            </div>
	                        </div>
	                    </div>

                        <div class="row">
	                        <div class="col-md-12">
                                <p class="form-control-static"><strong>{intl l='Resources'} :</strong></p>

	                            <div class="row">
	                            {loop type="resource" name="resources-list" backend_context="1"}
	                                <div class="col-md-3">
                                        <label class="checkbox-inline">
	                                        <input id="resource_{$ID}" data-id="{$CODE}" class="js-resource" type="checkbox" checked> {$TITLE}
                                        </label>
	                                </div>
                                    {if ($LOOP_COUNT)%4 == 0}<div class="clearfix"></div>{/if}
	                            {/loop}
	                            </div>

	                        </div>
                        </div>

                        <div class="row">
	                        <div class="col-md-12">
                                <p class="form-control-static"><strong>{intl l='Modules'} :</strong></p>

	                            <div class="row">
	                            {loop type="module" name="modules-list" backend_context="1" order="code"}
	                                <div class="col-md-3">
                                        <label class="checkbox-inline">
	                                        <input id="module_{$ID}" data-id="{$CODE}" class="js-module" type="checkbox" checked> {$CODE} - {$TITLE}
                                        </label>
	                                </div>

                                    {if ($LOOP_COUNT)%4 == 0}<div class="clearfix"></div>{/if}
	                            {/loop}
	                            </div>

	                        </div>
                        </div>

                        <div class="row inner-toolbar">
                            <div class="col-md-12 inner-actions clearfix">
                                <button type="button" class="btn btn-default btn-success pull-right js-show-logs" title="{intl l='Show logs'}">{intl l='Show logs'} <span class="glyphicon glyphicon-eye-open"></span></button>
                            </div>
                        </div>

                        <div class="row">
                            <div id="loading-block" class="col-md-12 loading-block"></div>

                            <div class="col-md-12 clearfix" id="logger-display"></div>
                        </div>
                    </div>
                </div>
            </div>

            {hook name="admin-logs.bottom" location="admin_logs_bottom" }

        </div>
    </div>
{/block}

{block name="javascript-initialization"}
    <script src="{javascript file='assets/js/bootstrap-switch/bootstrap-switch.js'}"></script>

    {javascripts file='assets/js/moment-with-locales.min.js'}
        <script src="{$asset_url}"></script>
    {/javascripts}

    {javascripts file='assets/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js'}
        <script src="{$asset_url}"></script>
    {/javascripts}

    <script type="text/javascript">

        {$langcode = {lang attr="code"}|substr:0:2}

        jQuery(function($) {

            $('.from-datetime-picker').datetimepicker({
                locale: "{$langcode}",
                format: 'YYYY-MM-DD',
                defaultDate: moment().subtract(7, 'days'),
                ignoreReadonly: true
            });

            $('.to-datetime-picker').datetimepicker({
                locale: "{$langcode}",
                format: 'YYYY-MM-DD',
                defaultDate: moment(),
                ignoreReadonly: true
            });

            $('.js-show-logs').click(function(e) {

                $('.js-show-logs').attr('disabled', true);
                $('#logger-display').html('');
                $('#loading-block').show();

                var admins = new Array();
                var resources = new Array();
                var modules = new Array();

                $('.js-admin:checked').each(function(k, v) {
                    admins.push($(v).data('id'));
                });
                $('.js-resource:checked').each(function(k, v) {
                    resources.push($(v).data('id'));
                });
                $('.js-module:checked').each(function(k, v) {
                    modules.push($(v).data('id'));
                });

                var fromDate = $('.from-datetime-picker').data('DateTimePicker').date().format('YYYY-MM-DD');
                var toDate = $('.to-datetime-picker').data('DateTimePicker').date().format('YYYY-MM-DD');

                $.post(
                    "{url path='/admin/configuration/adminLogs/logger'}",
                    {
                        fromDate:       fromDate,
                        toDate:         toDate,
                        admins:         admins,
                        resources:      resources,
                        modules:        modules
                    },
                    function(html) {
                        $('#loading-block').hide();
                        $('#logger-display').html(html);
                        $('.js-show-logs').attr('disabled', false);

                        $('html, body').scrollTop($("#logger-display").offset().top);
                    }
                );

                e.preventDefault();
            });
        });

    </script>
{/block}

{block name="javascript-last-call"}
    {hook name="admin-logs.js" location="admin-logs-js" }
{/block}