{% extends "view/layout.html.twig" %}
{% block title %} Dashboard | CRM BIVTeam {% endblock %}
{% block stylesheets %}
    {{ parent() }}
    {% include 'view/library/_select2.html.twig' %}
    <link rel="stylesheet" href="{{ asset('bootstrap-4.4.1/css/bootstrap-select.min.css') }}">
    {% if app.user.settings == null or  app.user.settings.isCalendar %}
        <link href='{{ asset('fullcalendar-5.5.1/lib/main.min.css') }}' rel='stylesheet'/>
    {% endif %}
    {% if app.user.settings == null or  app.user.settings.isMap %}
        <script src="https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js"></script>
        <style>
            /* Set the size of the div element that contains the map */
            #map {
                height: 625px;
                /* The height is 400 pixels */
                width: 100%;
                /* The width is the width of the web page */
            }
        </style>
    {% endif %}
{% endblock %}
{% block body %}
    <div class="container-fluid mt-2" data-position="left">
        {% set titleHelp = "help.title"|trans %}
        <!-- box -->
        <div class="content-box content-lighten">
            <a tabindex="0" class="btn btn-warning float-right d-flex" role="button" id="startIntroJs"><i
                        class="fas fa-question"></i></a>
            <div class="text-center" data-position="left">
                <div class="row">
                    <div class="col-md-6">
                        {{ form_start(searchForm) }}
                        <div class="row">
                            <div class="col-md-4 text-right my-auto">
                                {{ "dashboard.search"|trans }}
                            </div>
                            <div class="col-md-8 text-left pt-2">
                                {{ form_row(searchForm.search) }}
                            </div>
                        </div>
                        {{ form_end(searchForm, {"render_rest":false}) }}
                    </div>
                    <div class="col-md-6 my-auto">
                        <label>
                            <select class="selectpicker" id="selectTunnelMovement">
                                <option value="{{ path('createTunnelMovement') }}"
                                        selected>{{ "dashboard.variousActions"|trans }}</option>
                                {% for salesTunnel in allSalesTunnels %}
                                    <option value="{{ path('createTunnelMovementId', { 'id': salesTunnel.id }) }}"{% if salesTunnel.id == app.request.get('id') %} selected {% endif %}> {{ salesTunnel.name }}</option>
                                {% endfor %}
                            </select>
                        </label>
                        <a type="button" id="createTunnelMovement" class="btn btn-primary" data-step="1"
                           data-intro="{{ "help.dashboard.step1"|trans }}"
                           href="{{ path('createTunnelMovement') }}"> {{ "dashboard.createTunnelMovement"|trans }}
                        </a>
                    </div>
                </div>

            </div>
        </div>

        <div class="text-center">
            <div class="row justify-content-center">
                {% if app.user.settings == null or app.user.settings.isCalendar %}
                    <div class="col-auto colDashboard">
                        <!-- box calendar-->
                        <div class="content-box content-lighten">
                            <h3>{{ "dashboard.calendar"|trans }}</h3>
                            <div id='calendar' data-step="2" data-intro="{{ "help.dashboard.step5"|trans }}"></div>
                        </div>
                    </div>
                {% endif %}
                {% if app.user.settings == null or app.user.settings.isMap %}
                    <div class="col-auto colDashboard">
                        <!-- box map-->
                        <div class="content-box content-lighten">
                            <div class="container text-center">
                                <h3>{{ "dashboard.googleMap"|trans }}</h3>
                                <label for="dateMap">
                                    <input type="date" class="form-control" id="dateMap"
                                           value="{{ "now" | date('Y-m-d') }}">
                                </label>
                            </div>
                            <div class="mt-3" id="map" data-step="3"
                                 data-intro="{{ "help.dashboard.step6"|trans }}"></div>
                        </div>
                    </div>
                {% endif %}
                {% if app.user.settings == null or  app.user.settings.isActions %}
                    <div class="col-auto colDashboard" data-step="4"
                         data-intro="{{ "help.dashboard.step2"|trans }}">
                        <!-- box actions-->
                        <div class="content-box content-lighten">
                            <h3>{{ "dashboard.tunnelMovementDay"|trans }}</h3>
                            {% if 'ROLE_CLIENT_ADMIN' in app.user.roles %}
                                <div class="text-right mb-2">
                                    <form id="deleteTunnelMovementForm" action="{{ path('deleteTunnelMovement') }}">
                                        <input type="hidden" name="_method" value="DELETE"/>
                                        <input type="hidden" name="tunnelMovement[]" value="">
                                        <button type="submit" id='deleteTunnelMovement' class="btn btn-danger"
                                                data-toggle="tooltipDelete"
                                                data-placement="left" title="{{ "header.delete"| trans }}"
                                                disabled>
                                            <i class="fas fa-trash-alt"></i>
                                        </button>
                                    </form>
                                </div>
                            {% endif %}
                            <div class="row">
                                {% if is_granted('ROLE_CLIENT_ADMIN') %}
                                    <div class="col text-left mb-3">
                                        <label>
                                            <select class="selectpicker" id="selectUser">
                                                {% for user in users %}
                                                    <option value="{{ user.id }}"{% if app.user.id == user.id %} selected {% endif %}> {{ user }}</option>
                                                {% endfor %}
                                            </select>
                                        </label>
                                    </div>
                                {% endif %}
                                <div class="col text-right mb-3">
                                    <button class="btn btn-info" id="updateDate" data-step="5"
                                            data-intro="{{ "help.dashboard.step3"|trans }}" disabled>
                                        {{ "dashboard.changeDate"|trans }}
                                    </button>
                                </div>
                            </div>
                            <div class="h-600">
                                <div id="tunnelMovementLoader" class="table-loader"><div class="spinner-border"></div></div>
                                <div id="tunnelMovementTable" class="ag-theme-quartz h-600"></div>
                            </div>
                        </div>
                    </div>
                {% endif %}
                {% if app.user.settings == null or  app.user.settings.isStatistics %}
                    <div class="col-auto colDashboard" data-step="6"
                         data-intro="{{ "help.dashboard.step4"|trans }}">
                        <!-- box statistic-->
                        <div class="content-box content-lighten">
                            <div class="card text-center">
                                <div class="card-header">
                                    <h3>{{ "dashboard.statistic"|trans }}</h3>
                                </div>
                                <div class="card-body">
                                    <div class="row text-center">
                                        <div class="col-sm-12 col-md-12">
                                            <ul class="list-group">
                                                {% for tunnelMovement in statistiques["tunnelMovement"] %}
                                                    {% for arrayActionNumber in tunnelMovement %}
                                                        <li class="list-group-item d-flex justify-content-between align-items-center"
                                                            style="color: {{ arrayActionNumber[0].actionType.color }}">
                                                            {{ arrayActionNumber[0].actionType.name }}
                                                            <span class="badge badge-primary badge-pill">{{ arrayActionNumber[1] }}</span>
                                                        </li>
                                                    {% endfor %}
                                                {% endfor %}
                                            </ul>
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="row text-center">
                                        <div class="col-sm-6 col-md-6">
                                            <h4>{% if statistiques["tunnelMovementFinished"][0][1] > 1 %}{{ "dashboard.tunnelMovementsFinished"|trans }}{% else %}{{ "dashboard.tunnelMovementFinished"|trans }}{% endif %}</h4>
                                            <h3 class="card-title"
                                                style="color:green">{{ statistiques["tunnelMovementFinished"][0][1] }}</h3>
                                        </div>
                                        <div class="col-sm-6 col-md-6">
                                            <h4>{% if statistiques["tunnelMovementUnfinished"][0][1] > 1 %}{{ "dashboard.tunnelMovementsProgress"|trans }}{% else %}{{ "dashboard.tunnelMovementProgress"|trans }}{% endif %}</h4>
                                            <h3 class="card-title"
                                                style="color:red">{{ statistiques["tunnelMovementUnfinished"][0][1] }}</h3>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-footer text-muted">
                                </div>
                            </div>
                        </div>
                    </div>
                {% endif %}
                {% if app.user.settings == null or app.user.settings.isPolarArea %}
                    <div class="col-auto colDashboard">
                        <!-- box calendar-->
                        <div class="content-box content-lighten">
                            <h3>{{ "dashboard.polarArea"|trans }}</h3>
                            <h4>{{ "dashboard.titlePolarArea"|trans }}</h4>
                            <div class="chart-view" data-v-365c20ab="">
                                <canvas id="polarArea"></canvas>
                            </div>
                        </div>
                    </div>
                {% endif %}
                {% if app.user.settings == null or  app.user.settings.isActionProspect %}
                    <div class="col-auto colDashboard" data-step="7"
                         data-intro="{{ "help.dashboard.step2"|trans }}">
                        <!-- box actions-->
                        <div class="content-box content-lighten">
                            <div class="h-600">
                                <div id="prospectTunnelMovementLoader" class="table-loader"><div class="spinner-border"></div></div>
                                <div id="prospectTunnelMovementTable" class="ag-theme-quartz h-600"></div>
                            </div>
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>

    {% include 'view/salesTunnel/_changeDate.html.twig' %}
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script>
        let translations = {
            actionDate: "{{ 'dashboard.table.actionDate'|trans }}",
            time: "{{ 'dashboard.table.time'|trans }}",
            company: "{{ 'dashboard.table.company'|trans }}",
            contact: "{{ 'dashboard.table.contact'|trans }}",
            actionType: "{{ 'dashboard.table.actionType'|trans }}",
            dateOfLastAction: "{{ 'dashboard.dateOfLastAction'|trans }}",
        };
    </script>
    <script src="{{ asset('fullcalendar-5.5.1/lib/main.min.js') }}"></script>
    <script src="{{ asset('fullcalendar-5.5.1/lib/locales-all.js') }}"></script>
    <script src="{{ asset('bootstrap-4.4.1/js/select2.min.js') }}"></script>
    <script src="{{ asset('js/signaletique/dashboard/search.js') }}"></script>

    {% if app.user.settings == null or  app.user.settings.isCalendar %}
        <script src="{{ asset('js/signaletique/dashboard/calendar.js') }}"></script>
    {% endif %}

    {% if app.user.settings == null or  app.user.settings.isMap %}
        <script src="https://maps.googleapis.com/maps/api/js?key={{ app.user.customer.googleKey }}&libraries=&v=weekly"
                async></script>
        <script src="{{ asset('js/signaletique/dashboard/googleMap.js') }}"></script>
    {% endif %}

    {% if app.user.settings == null or  app.user.settings.isPolarArea %}
        <script src="https://cdn.jsdelivr.net/npm/chart.js@3/dist/chart.min.js"></script>
        <script src="{{ asset('js/signaletique/dashboard/chartJs.js') }}"></script>
    {% endif %}

    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>

    {% if app.user.settings == null or app.user.settings.isActions or app.user.settings.isActionProspect %}
        <script type="text/javascript" charset="utf8" src="{{ asset('js/signaletique/dashboard/dashboard.js') }}"></script>
    {% endif %}

{% endblock %}