{% extends 'admin.html.twig' %}

{% block content %}
    <div class="block-header">
        <h2>Sprzedaż
            {#            <span class="pull-right">
                            <span class="pull-left">Tylko moje dane</span>
                            <div class="switch">
                                <label><input id="configuration_show_mine" type="checkbox" {{ app.session.get('show_mine') ? 'checked' : '' }}><span class="lever"></span></label>
                            </div>
                        </span>#}
        </h2>
    </div>
    <div class="row clearfix">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="card">
                <div class="header">
                    <form action="{{path('nordmind_sale_wall')}}" method="post" id="search-form">
                        <input type="hidden" id="search-process" name="search-process" value="{{saleProcess is defined?saleProcess.id:null}}" />
                        <h3 class="card-inside-title">Filtry</h3>
                        <div class="row clearfix">
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <div class="form-line">
                                        <input type="text" name="date-from" id="date-from" class="form-control datepicker" placeholder="Data od" autocomplete="off"  value="{{searchDateFrom}}"/>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <div class="form-line">
                                        <input type="text" name="date-to" id="date-to" class="form-control datepicker" placeholder="Data do" autocomplete="off"  value="{{searchDateTo}}"/>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <div class="form-line">
                                        <input type="text" name="price-from" id="price-from" class="form-control" placeholder="Kwota od"  value="{{searchPriceFrom}}"/>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <div class="form-line">
                                        <input type="text" name="price-to" id="price-to" class="form-control" placeholder="Kwota do"  value="{{searchPriceTo}}"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row clearfix">
                            <div class="col-sm-5">
                                <div class="form-group">
                                    <div class="form-line">
                                        <select id="search-contacts" name="search-contacts[]" class="form-control show-tick selectpicker" multiple title="Klient" data-live-search="true">
                                            {% for contact in contacts %}
                                                <option value="{{contact.id}}" {% if searchContacts[contact.id] is defined %}selected{% endif %}>{{contact}}</option>
                                            {% endfor %}
                                        </select>   
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-1">
                                <div class="form-group">
                                    <a class="pull-right" href="{{path('nordmind_sale_wall', {'search-contacts': 'clear'})}}">
                                        <i class="material-icons">clear</i>
                                    </a>
                                </div>
                            </div>
                            <div class="col-sm-5">
                                <div class="form-group">
                                    <div class="form-line">
                                        <select id="search-users" name="search-users[]" class="form-control show-tick selectpicker" multiple title="Pracownik" data-live-search="true">
                                            {% for user in users %}
                                                <option value="{{user.id}}" {% if searchUsers[user.id] is defined %}selected{% endif %}>{{user}}</option>
                                            {% endfor %}
                                        </select>   
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-1">
                                <div class="form-group">
                                    <a class="pull-right" href="{{path('nordmind_sale_wall', {'search-users': 'clear'})}}">
                                        <i class="material-icons">clear</i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="row clearfix">
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <div class="form-line">
                                        <select id="search-products" name="search-products[]" class="form-control show-tick selectpicker" multiple title="Produkt" data-live-search="true">
                                            {% for product in products %}
                                                <option value="{{product.id}}" {% if searchProducts[product.id] is defined %}selected{% endif %}>{{product}}</option>
                                            {% endfor %}
                                        </select>   
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-1">
                                <div class="form-group">
                                    <a class="pull-right" href="{{path('nordmind_sale_wall', {'search-products': 'clear'})}}">
                                        <i class="material-icons">clear</i>
                                    </a>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <div class="form-line">
                                        <select id="search-processes" name="search-processes[]" class="form-control show-tick selectpicker" multiple title="Proces" data-live-search="true">
                                            {% for process in processes %}
                                                <option value="{{process.id}}" {% if searchProcesses[process.id] is defined %}selected{% endif %}>{{process}}</option>
                                            {% endfor %}
                                        </select>   
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-1">
                                <div class="form-group">
                                    <a class="pull-right" href="{{path('nordmind_sale_wall', {'search-processes': 'clear'})}}">
                                        <i class="material-icons">clear</i>
                                    </a>
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <div class="form-group">
                                    <input type="submit" class="btn btn-primary" value="Filtruj" /> 
                                    <a class="btn btn-default" id="search-clear" href="{{path('nordmind_sale_wall', {'clear_all_filters': 'true'})}}">Wyczyść</a>
                                </div>
                            </div>
                        </div>
                        <ul class="header-dropdown m-r-0">
                            <li>
                                <a href="{{path('nordmind_sale_add')}}" class="btn btn-primary"  data-toggle="modal" data-target="#mdModal">
                                    Nowa sprzedaż
                                </a>
                            </li>
                        </ul>
                    </form>
                </div>
                <div class="body" id="sale-body">
                    <ul class="nav nav-tabs tab-nav-right" role="tablist">
                        {% for aSalesProcess in salesProcesses %}
                            <li role="presentation" class="{{ salesProcess.id == aSalesProcess.id ? "active" }}"><a href="{{ path('nordmind_sale_wall', {processId: aSalesProcess.id}) }}">{{ aSalesProcess }}</a></li>
                            {% endfor %}

                    </ul>
                    <div class="sale-wall">
                        {% for salesStep in salesSteps %}
                            <div class="column">
                                <div class="card sale-box" data-id="{{salesStep.id}}">
                                    <div class="header" style="background-color: #{{salesStep.color}}">
                                        <h2>{{ salesStep }}
                                            <span class="pull-right">
                                                {{ statistics['steps'][salesStep.id] is defined ? statistics['steps'][salesStep.id]['amount']|number_format(2, '.', ',') : '0,00' }}
                                            </span>
                                        </h2>
                                    </div>
                                    <div class="body sale-body">
                                        <ul id="sortable-{{salesStep.id}}" class="droptrue sortable" data-id="{{salesStep.id}}" data-type="{{salesStep.type}}">
                                            {% if sales[salesStep.id] is defined %}
                                                {% for sale in sales[salesStep.id] %}
                                                    <li class="card" data-id="{{sale.id}}">
                                                        <div class="header" style="background-color: #{{salesStep.color}}">
                                                            <h2>{{ sale.getProductsDescription() }}
                                                                <ul class="header-dropdown m-r--5">
                                                                    <li>
                                                                        <a href="{{ path('nordmind_sale_show', {id: sale.id})}}"  data-toggle="modal" data-target="#mdModal">
                                                                            <i class="material-icons">info_outline</i>
                                                                        </a>
                                                                        {% if sale.isPaid %}
                                                                            <i class="material-icons">attach_money</i>
                                                                        {% endif %}
                                                                    </li>
                                                                    <li class="dropdown">
                                                                        <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">
                                                                            <i class="material-icons">more_vert</i>
                                                                        </a>
                                                                        <ul class="dropdown-menu pull-right">
                                                                            <li><a href="{{ path('nordmind_sale_edit', {id: sale.id})}}" class=" waves-effect waves-block" data-toggle="modal" data-target="#mdModal">Edytuj</a></li>
                                                                            <li><a href="{{ path('nordmind_sale_delete', {id: sale.id, callback: 'wall'})}}" class=" waves-effect waves-block confirm-button" data-toggle="modal" data-target="#mdModal">Usuń</a></li>
                                                                        </ul>
                                                                    </li>
                                                                </ul>
                                                            </h2>

                                                        </div>
                                                        <div class="body sale-element">
                                                            <p>{{ sale.user }}</p>
                                                            <p>{{ sale.contact is defined ? sale.contact : '' }}</p>
                                                            <p>{{ sale.expectedDate|date('d.m.Y') }}</p>
                                                            <p>{{ sale.getSalesProductsSum()|number_format(2, '.', ',') }}</p>
                                                        </div>
                                                    </li>
                                                {% endfor %}
                                            {% endif %}
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock content %}
{% block javascript %}
    {{ parent() }}
    <script>
        $(function () {
            $('#search-clear').click(function () {
                $('#search-contacts').val('clear');
                $('#search-form').send();
            });
            $('#sale-body').doubleScroll({
                contentElement: '.sale-wall', // Widest element, if not specified first child element will be used
                scrollCss: {
                    'overflow-x': 'auto',
                    'overflow-y': 'hidden'
                },
                contentCss: {
                    'overflow-x': 'auto',
                    'overflow-y': 'hidden'
                },
                onlyIfScroll: false, // top scrollbar is not shown if the bottom one is not present
                resetOnWindowResize: false // recompute the top ScrollBar requirements when the window is resized
            });
            function initSortable() {
                $("ul.droptrue").sortable({
                    connectWith: "ul",
                    update: function (e, ui) {
                        if (this === ui.item.parent()[0]) {
                            var target = $(e.target).attr('data-id');
                            var item = $(ui.item).attr('data-id');
                            var stepType = $(e.target).attr('data-type');
                            console.log(stepType);
                            postLoad(this, "{{path('nordmind_sale_step')}}", {item: item, target: target});
                            if (stepType == {{ constant('nordmind\\AdminBundle\\Entity\\SalesStep::STEP_SUCCESS') }})
                            {
                                $('#mdModal').modal('show');
                                $("#mdModal .modal-content").load("{{path('nordmind_sale_win')}}", {id: item});
                            }
                        }
                    }
                });

                $(".sortable").disableSelection();
            }
            initSortable();
            
        });

    </script>
{% endblock %}