{% extends "default/datatable.html.twig" %}
{% block custom_css %}
    {{parent()}}
    <link href="{{asset('assets/node_modules/bootstrap-datepicker/bootstrap-datepicker.min.css')}}" rel="stylesheet">
{% endblock %}
{% block ajout %}
    {% if app.user.hasright(right_add) %}
        <a data-bs-toggle="modal" data-bs-target="#suscriber-modal" href="javascript:void(0)" class="btn btn-success">{{ 'Table.Add' | trans }}</a>
    {% endif %}
{% endblock %}

{% block datatable %}
    <table id="myTable" class="display no-wrap table table-striped table-bordered table-hover border" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th class='nosort size-15'>
                    <input type="checkbox" id="myChk_0" value="check">           
                </th>
                <th class='export'>{{'Table.Suscriber.ID' | trans}}</th>
                <th class='export'>{{'Table.Suscriber.Name' | trans}}</th>
                <th class='export'>{{'Table.Suscriber.Phone' | trans}}</th>
                <th class='export'>{{'Table.Suscriber.Email' | trans}}</th>
                <th class='export'>{{'Table.Suscriber.Group' | trans}}</th>
                <th class='nosort size-50'>{{'Table.Action' | trans}}</th>
            </tr>
        </thead>
        <tbody>
            {% for d in datas %}
                <tr>
                    <td>
                        <input type="checkbox" id="myChk_1" value="check">
                    </td>
                    <td>{{ d.id }}</td>
                    <td>{{ d.name }}</td>
                    <td>{{ d.phone }}</td>
                    <td>{{ d.email }}</td>
                    <td>{{ d.group }}</td>
                    <td>
                        {% if app.user.hasright(right_edit) %}
                        <a href="{{path(edit, {'id':d.id})}}" class="edit btn btn-sm waves-effect waves-light btn-outline-info">
                            <i class="ti-pencil"></i> {{'Table.Edit' | trans}}
                        </a>
                        {% endif %}
                        {% if app.user.hasright(right_delete) %}
                        <button type="button" class="btn btn-sm waves-effect waves-light btn-outline-danger" id="action_one_{{d.id}}" value-id="{{d.id}}"><i class="ti-trash"></i> {{'Table.Delete' | trans}}</button>
                        {% endif %}
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
    {% include 'suscriber/individual/modal.html.twig' %}
    {% include 'suscriber/individual/modalImport.html.twig' %}
{% endblock %}
{% block initialisation %}
    {{parent()}}
    <script type="text/javascript">
        $(function () {
            //$('#myTable_length').hide();
            //$('#myTable_filter').hide();
            //$('#myTable_info').hide();
            //$('#myTable_paginate').hide();
            //$('.dt-buttons').hide();
        });

        //Open modal on document .ready
        $(window).on('load', function() {
            if( '{{form_action}}' == 'suscriber_list_edit'){
                {# En mode modification, ouverture automatique du modal #}
                $('#suscriber-modal').modal('show');
            }
            if( '{{form_action}}' == 'suscriber_list_import'){
                {# En mode modification, ouverture automatique du modal #}
                $('#import-modal').modal('show');
            }
        });
        $('#suscriber-modal').on('hidden.bs.modal', function () {
            if( '{{form_action}}' == 'suscriber_list_edit'){
                window.location.replace("{{ path('suscriber_list') }}");
            }
        })
        $('#import-modal').on('hidden.bs.modal', function () {
            if('{{form_action}}' == 'suscriber_list_import'){
                window.location.replace("{{ path('suscriber_list') }}");
            }
        })
    </script>
    
{% endblock %}
{% block custom_js %}
    {{parent()}}
    <script type="text/javascript" src="{{asset('assets/node_modules/bootstrap-datepicker/bootstrap-datepicker.min.js')}}"></script>
    
    <script type="text/javascript">
        $(function () {
            $.fn.datepicker.dates['fr'] = {
                days: ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"],
                daysShort: ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"],
                daysMin: ["Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa"],
                months: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
                monthsShort: ["Jan", "Fev", "Mar", "Avr", "Mai", "Jun", "Jul", "Aou", "Sep", "Oct", "Nov", "Dec"],
                today: "Aujourd'hui",
                clear: "Effacer",
                format: "dd/mm/yyyy",
                titleFormat: "MM yyyy",
                weekStart: 1
            };

            $('#notification_debut').datepicker({
                autoclose: true,
                todayHighlight: true,
                language: '{{ app.request.getLocale() }}',
                startView: 'months',
                format: "dd/mm/yyyy",
                titleFormat: "MM yyyy",
                todayBtn: true,
                clearBtn: true,
            });

            $('#notification_fin').datepicker({
                autoclose: true,
                todayHighlight: true,
                language: '{{ app.request.getLocale() }}',
                startView: 'months',
                format: "dd/mm/yyyy",
                titleFormat: "MM yyyy",
                todayBtn: true,
                clearBtn: true,
            });

            $('#notification_debut').on("changeDate",function (e) {
                var minDate = new Date(e.date.valueOf());
                var end = new Date($('#notification_fin').datepicker('getDate'));
                if (end < minDate) {
                    $('#notification_fin').datepicker('update', '');
                }
                $('#notification_fin').datepicker('setStartDate', minDate);
            });
            $('#notification_fin').on("changeDate",function (e) {
                var maxDate = new Date(e.date.valueOf());
                var start = new Date($('#notification_debut').datepicker('getDate'));
                if (start > maxDate) {
                    $('#notification_debut').datepicker('update', '');
                }
                $('#notification_debut').datepicker('setEndDate', maxDate);
            });
        });
    </script>
{% endblock %}