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

{% import 'macros/macro.html.twig' as macro %}

{% block title %}
    {{ parent() }}
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('style/css/font-awesome-4.7.0/css/font-awesome.min.css') }}">

    <style type="text/css">
        body {
            margin-left: 0;
        }
        #select-stat-ca {
            font-family: 'Droid Sans', sans-serif;
            margin-top: 0;
        }
        #select-stat-ca .form-control-select {
            width: 200px;
            margin-left: auto;
            margin-right: auto;
            height: 34px;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857;
            color: #000000;
            background-color: white;
            background-image: none;
            border: 1px solid #ebebeb;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
            box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
            -webkit-transition: border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s;
            transition: border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s;
        }

        #result-stat-ca {
            height: 400px;
        }

        .spinner-search-position {
            position: absolute;
            z-index: 9999;
            margin-left: 40%;
            margin-top: 38px;
        }

        .text-message {
            overflow-wrap: break-word;
            display: flex;
        }

        @media screen and (max-width: 590px) {
            #result-stat-ca {
            }
            .spinner-search-position {
                margin-left: 0;
                margin-top: 0;
            }
        }
    </style>
{% endblock %}

{% block body %}
    {{ parent() }}

        <div class="block-header block-header-default bg-gray" style="display: block">
            <div>
                <h4 class="font-w700">Log d'utilisation des douchettes BE</h4>
            </div>
            <div style="display: inline-flex;">
                <select class="form-control" id="select-activity-type" name="select-activity-typet" style="width: 350px;margin-right: 20px;">
                    <option value="">Filtrer par type d'action sur la douchette</option>
                    {% for activityDoucehtteBeType in douchetteBeActivityTypes  %}
                        <option value="{{ activityDoucehtteBeType.typeAction }}" {% if activityDoucehtteBeType.typeAction == activityType  %}selected{% endif  %}>{{ activityDoucehtteBeType.typeAction }}</option>
                    {% endfor  %}
                </select>

                <select class="form-control" id="select-douchette_id" name="select-douchette_id" style="width: 350px;margin-right: 20px;">
                    <option value="">Filtrer par douchette stock ou Labo</option>
                    <option value="60"  {% if douchetteId == 60  %}selected{% endif  %}>DOUCHETTE STOCK</option>
                    <option value="61"  {% if douchetteId == 61  %}selected{% endif  %}>DOUCHETTE LABO</option>
                </select>


            </div>
        </div>
        <div style="margin-top: 10px">
            <div id="result-stat">
                <div id="content-stat">
                    <table>
                        <thead  style="text-align: center;font-size: 17px">
                            <tr>
                                <th style="width: 150px">DATE</th>
                                <th style="width: 200px">UTILISATEUR</th>
                                <th style="width: 400px;text-align: left">TYPE ACTION</th>
                                <th style="width: 350px;text-align: left">DETAIL</th>
                            </tr>
                        </thead>
                        <tbody style="font-size: 13px">
                            {% for activity in activities  %}
                                <tr>
                                    <td style="width: 150px;padding-top: 10px;text-align: center">{{ activity.createdAt()|date('Y-m-d H:i:s') }}</td>
                                    <td style="width: 200px;text-align: center">{{ activity.user.username }}</td>
                                    <td style="width: 400px;text-align: left">{{ activity.typeAction }}</td>
                                    <td class="text-message" style="width: 350px;text-align: left;">{{ activity.message }} - {{ activity.content }}</td>
                                </tr>
                        {% endfor  %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>



{% endblock %}

{% block javascripts %}
    {{ parent() }}

    <script>
        $('#select-activity-type').change(function() {
            filter();
        });
        $('#select-douchette_id').change(function() {
            filter();
        });

        function filter() {

            var redirect = "{{ path('stat_activity_douchette_be') }}";

            var activityType = $('#select-activity-type option:selected').val();
            var douchetteId = $('#select-douchette_id option:selected').val();
            window.location.href = redirect + "?activityType=" + activityType + "&douchetteId=" + douchetteId;
        }
    </script>
{% endblock %}