{% set success = app['request'].query.get('success') %}
{% set action = app['request'].query.get('action') %}

<div id="order_manager">
    {% if  success == '1' %}
        <div class="alert alert-success">
            <button type="button" class="close" data-dismiss="alert">×</button>
            {% if action == 'order' %}
                {{ 'The records have been properly ordered' | trans }}
            {% elseif action == 'send' %}
                {{ 'Order has been sent' | trans }}
            {% elseif action == 'deny' %}
                {{ 'Order has been denied' | trans }}
            {% endif %}
        </div>
    {% elseif   success == '0' %}
        <div class="alert alert-error">
            <button type="button" class="close" data-dismiss="alert">×</button>
            {{ 'An error occured, please retry or contact an admin if problem persists' | trans }}
        </div>
    {% endif %}


    <div id="ORDERPREVIEW">
        <a id="filter-date" href="#"><span id="filter-text">{{ 'order-manager::order-list: no-filter' | trans }}</span> <span class="order-indicator">&#x25bc;</span></a>
        <div>
            <form id="date-form">
                <table cellspacing="0" cellpadding="0" style="display:none" id="filter_box">
                    <tbody>
                        <tr>
                            <td>
                                <button class="toggle-button-text full-width text-align-right"
                                        type="button" name="CURRENT_WEEK" onclick="applyFilter(this);">{{ 'order-manager::order-list: this-week' | trans }}</button>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <button class="toggle-button-text full-width text-align-right"
                                        type="button" name="PAST_WEEK" onclick="applyFilter(this);">{{ 'order-manager::order-list: last-week' | trans }}</button>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <button class="toggle-button-text full-width text-align-right"
                                type="button" name="PAST_MONTH" onclick="applyFilter(this);">{{ 'order-manager::order-list: last-month' | trans }}</button>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <button class="toggle-button-text" type="button" name="BEFORE" onclick="setDateSelection(this);">{{ 'order-manager::order-list: before' | trans }}</button>
                                <button class="toggle-button-text" type="button" name="AFTER" onclick="setDateSelection(this);">{{ 'order-manager::order-list: after' | trans }}</button>
                                <div class="input-prepend">
                                    <span class="add-on"><i class="icon icon-calendar"></i></span>
                                    <input type="text" id="datepicker" class="datepicker" name="datepicker" size="10" value="{{ "today"|date("Y/m/d") }}" />
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <button id="filter-button">{{ 'order-manager::order-list: apply' | trans }}</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>
        </div>
        <ul style="height:30px;bottom:auto;">
            <li><a href="#TODO-ORDER">{{ 'order-manager::order-list: pending' | trans }}
                    <span class="icon-stack infoTips">
                    <i class="icon-circle icon-stack-base" style="color:#7CD11E"></i>
                    <i class="icon-exclamation" style="color:#FFF"></i>
                    </span></a></li>
            <li><a href="#PROCESSED-ORDER">{{ 'order-manager::order-list: processed' | trans }}
                    <span class="icon-stack infoTips">
                    <i class="icon-circle icon-stack-base" style="color:#999"></i>
                    <i class="icon-check" style="color:#FFF"></i>
                    </span></a></li></a></li>
        </ul>
        <div id="TODO-ORDER" class="order_preview_box">
            <div id="TODOVIEW">
                <table class="table">
                    <tbody>
                    {% if orders_todo|length > 0 %}
                        {% for order in orders_todo %}
                            {% set deadline = order.getDeadline()|date('d/m/Y') %}
                            <tr id="order_{{ order.getId() }}" class="order_row" {{ current_date > order.getDeadline() ? "style=color:#777": "" }}>
                                <td> <span class="icon-stack infoTips">
                                <i class="icon-circle icon-stack-base" style="color:#7CD11E"></i>
                                <i class="icon-exclamation" style="color:#FFF"></i>
                                </span>
                                </td>
                                <td>
                                    <span class="text_block">{{ 'order-manager::order-list: order-id' | trans }}</span>
                                    <span class="text_block_bold">{{ order.getId() }}</span>
                                </td>
                                <td style="width: 40%">
                                    <h4>{{ order.getOrderUsage() | nl2br }}</h4>
                                    <span class="text_block">{{ order.getUser().getEmail() }}</span>
                                </td>
                                <td>
                                    <span class="text_block">{{ 'Date de demande' | trans }}</span>
                                    <span class="text_block_bold">{{ order.getCreatedOn()|date('d/m/Y') }}</span>
                                </td>
                                <td>
                                    <span class="text_block">{{ 'Deadline' | trans }}</span>
                                    <span class="text_block_bold">
                                {% if deadline != '' %}
                                    {{deadline}}
                                {% else %}
                                    {{ 'Aucune' | trans }}
                                {% endif %}
                                </span>
                                </td>
                                <td>
                                    <span class="text_block">{{ 'order-manager::order-list: treated-documents' | trans }}</span>
                                    <span class="text_block_bold">{{ order.getTotalTreatedItems() }}/{{ order.getTotal() }}</span>
                                </td>
                            </tr>
                        {% endfor %}
                    {% else %}
                        <tr>
                            <td>{{ 'order-manager::order-list: no-result' | trans }}</td>
                        </tr>
                    {% endif %}
                    </tbody>
                </table>
            </div>
        </div>
        <div id="PROCESSED-ORDER" class="order_preview_box">
            <div id="PROCESSEDVIEW">
                <table class="table">
                    <tbody>
                    {% if orders_processed|length > 0 %}
                        {% for order in orders_processed %}
                            {% set deadline = order.getDeadline()|date('d/m/Y') %}
                            <tr id="order_{{ order.getId() }}" class="order_row" {{ current_date > order.getDeadline() ? "style=color:#777": "" }}>
                                <td> <span class="icon-stack infoTips">
                                    <i class="icon-circle icon-stack-base" style="color:#999"></i>
                                    <i class="icon-check" style="color:#FFF"></i>
                                    </span>
                                </td>
                                <td>
                                    <span class="text_block">{{ 'order-manager::order-list: order-id' | trans }}</span>
                                    <span class="text_block_bold">{{ order.getId() }}</span>
                                </td>
                                <td style="width: 40%">
                                    <h4>{{ order.getOrderUsage() | nl2br }}</h4>
                                    <span class="text_block">{{ order.getUser().getEmail() }}</span>
                                </td>
                                <td>
                                    <span class="text_block">{{ 'Date de demande' | trans }}</span>
                                    <span class="text_block_bold">{{ order.getCreatedOn()|date('d/m/Y') }}</span>
                                </td>
                                <td>
                                    <span class="text_block">{{ 'Deadline' | trans }}</span>
                                    <span class="text_block_bold">
                                {% if deadline != '' %}
                                    {{deadline}}
                                {% else %}
                                    {{ 'Aucune' | trans }}
                                {% endif %}
                                </span>
                                </td>
                                <td>
                                    <span class="text_block">{{ 'order-manager::order-list: treated-documents' | trans }}</span>
                                    <span class="text_block_bold">{{ order.getTotalTreatedItems() }}/{{ order.getTotal() }}</span>
                                </td>
                            </tr>
                        {% endfor %}
                    {% else %}
                        <tr>
                            <td>{{ 'order-manager::order-list: no-result' | trans }}</td>
                        </tr>
                    {% endif %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class='well-small pager-todo'>
        <ul class="pager">
            {% set previousPage = page < 2 ? false : (page - 1) %}
            {% set nextPage = page >= (totalTodo / perPage)|ceil ? false : (page + 1) %}

          {% if previousPage %}
              <li  class="previous"><a class="btn btn-inverse" onclick="goToPreviousPage({{ previousPage }}, {{ perPage }})" href="#">{{ 'Previous' | trans }}&nbsp;<i class="icon-arrow-left"></i></a></li>
          {% endif %}

          {% if nextPage %}
              <li class="next"><a class="btn btn-inverse" onclick="goToNextPage({{ nextPage }}, {{ perPage }})" href="#"><i class="icon-arrow-right"></i>&nbsp;{{ 'Next' | trans }}</a></li>
          {% endif %}
        </ul>
    </div>

    <div class='well-small pager-processed'>
        <ul class="pager">
            {% set previousPage = page < 2 ? false : (page - 1) %}
            {% set nextPage = page >= (totalProcessed / perPage)|ceil ? false : (page + 1) %}

            {% if previousPage %}
                <li  class="previous"><a class="btn btn-inverse" onclick="goToPreviousPage({{ previousPage }}, {{ perPage }}, '{{ start }}')" href="#">{{ 'Previous' | trans }}&nbsp;<i class="icon-arrow-left"></i></a></li>
            {% endif %}

            {% if nextPage %}
                <li class="next"><a class="btn btn-inverse" onclick="goToNextPage({{ nextPage }}, {{ perPage }}, '{{ start }}')" href="#"><i class="icon-arrow-right"></i>&nbsp;{{ 'Next' | trans }}</a></li>
            {% endif %}
        </ul>
        </ul>
    </div>
</div>

<script type="text/javascript">

    const FilterTodo = {
        TODO: 'pending',
        PROCESSED: 'processed'
    }
    const FilterDate = {
        NO_FILTER: 'no_filter',
        CURRENT_WEEK: 'current_week',
        PAST_WEEK:  'past_week',
        PAST_MONTH:  'past_month',
        BEFORE:  'before',
        AFTER:  'after',
    };

    var info = {};
    var dateSelection = '{{ start }}', dateSelectionText = '', date = '{{ date }}', tabSelection = '{{ todo }}';

    $('#datepicker').datepicker({
        beforeShow: function() {
            setTimeout(function(){
                $('.ui-datepicker').css('z-index', 999999);
            }, 0);
        },
        changeYear: true,
        changeMonth: true,
        dateFormat: 'yy/mm/dd',
        onSelect: function(value) {
            date = value;
            setSelectionText(dateSelection);
        }
    });

    setDateInPicker(date);
    setSelectionText(dateSelection);
    if(dateSelection != FilterDate.NO_FILTER) {
        var element = $('#filter_box tbody tr td button[name=' + dateSelection.toUpperCase() + ']');
        setDateSelection(element);
    }


    function setDateInPicker(date) {
        if(date !== '') {
            $('#datepicker').val(date);
        }
    }

    function setDateSelection(element) {
        var selection = $(element).attr("name");
        dateSelection = FilterDate[selection];
        setSelectionText(dateSelection);
        clearAll();
        $(element).addClass('active');
    }

    function applyFilter(element) {
        setDateSelection(element);
        //trigger request immediately
        $('#date-form').trigger('submit');

    }

    function setSelectionText(dateSelection) {
        $('.reset-btn').remove();
        if(dateSelection != FilterDate.NO_FILTER) {
            if(dateSelection == FilterDate.BEFORE || dateSelection == FilterDate.AFTER) {
                dateSelectionText = $('#filter_box tbody tr td button[name='+dateSelection.toUpperCase()+']').html() + " " + $('#datepicker').val();
                var obj = {};
                obj['date'] = $('#datepicker').val();
                obj['type'] = dateSelection;
                info['limit'] = obj;
            }else {
                dateSelectionText = $('#filter_box tbody tr td button[name='+dateSelection.toUpperCase()+']').html();
                info['limit'] = null;
            }
            $('#filter-text').text(dateSelectionText);
            $('#filter-date').append('<i class="icon-remove-sign reset-btn" onclick="reset()"></i>');
        }else {
            $('#filter-text').text("{{ 'order-manager::order-list: no-filter' | trans }}");
            info['limit'] = null;
        }
        info['todo'] = tabSelection;
        info['start'] = dateSelection;
    }

    function clearAll() {
        $('#filter_box tbody tr td').children('button').each(function () {
           $(this).removeClass('active');
        });
    }

    function goToNextPage(nextPage, perPage) {
        info['todo'] = tabSelection;
        info['start'] = dateSelection;
        info['page'] = nextPage;
        info['per-page'] = perPage;
        performRequest();
    }

    function goToPreviousPage(previousPage, perPage) {
        info['todo'] = tabSelection;
        info['start'] = dateSelection;
        info['page'] = previousPage;
        info['per-page'] = perPage;
        performRequest();
    }

    function performRequest() {
        $.ajax({
            type: 'GET',
            url: '../prod/order/',
            data: info,
            success: function (data) {
                $('#order_manager').parent().empty().append(data);
            }
        });
    }

    function reset(){
        info['start'] = FilterDate.NO_FILTER;
        setSelectionText(FilterDate.NO_FILTER);
        $('#date-form').trigger('submit');
    }

$(document).ready(function(){

    var dialog = p4.Dialog.get(1);
    var filterDateSelected = false;

    //info['todo'] = FilterTodo.TODO;
    //info['start'] = FilterDate.CURRENT_WEEK;

    $('#ORDERPREVIEW').tabs({
        activate: function(event, ui) {
           if(ui.newPanel.selector == '#PROCESSED-ORDER') {
               $('.pager-processed').show();
               $('.pager-todo').hide();
               tabSelection = FilterTodo.PROCESSED;
           }else {
               $('.pager-processed').hide();
               $('.pager-todo').show();
               tabSelection = FilterTodo.TODO;
           }
        }
    });

    $('#ORDERPREVIEW').tabs("option", "active", tabSelection == FilterTodo.PROCESSED ? 1 : 0);
    $('.pager-processed').hide();

    $('a.self-ajax', dialog.getDomElement()).bind('click', function(e){
        e.preventDefault();
        var url = $(this).attr('href');
        dialog.load(url);
    });

    $('tr.order_row', dialog.getDomElement()).bind('click', function(e){
        e.preventDefault();
        var id = $(this).attr('id').split('_').pop();
        dialog.load('/prod/order/' + id +'/');
    }).addClass('clickable');

    $('#filter-date').click(function() {
        toggleFilterDate();
    });

    $('#date-form').submit(function(e) {
        e.preventDefault();
        performRequest();
        toggleFilterDate();

    });

    function toggleFilterDate() {
        if(!filterDateSelected) {
            filterDateSelected = true;
            $('#filter-date').addClass('active');
            $('#filter_box').css('display', 'block');
        }else {
            filterDateSelected = false;
            $('#filter-date').removeClass('active');
            $('#filter_box').css('display', 'none');
        }
    }


});

</script>