{# templates/superadmin_v2/artisans/sa_gestion_artisans_add.html.twig #}
{% extends 'superadmin_v2/superadmin.html.twig' %}

{% block title %}Ajouter ticket - {{ parent() }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link href="{{ asset('superadmin_v2/css/bootstrap-datetimepicker.min.css') }}" rel="stylesheet">
{% endblock %}

{% block body %}
    {{ render(controller('App\\Controller\\Superadmin\\SaLayoutController::breadcrumb', {'rubriques_id':rubriques_id, 'action':filariane_action} )) }}

    {{ include('superadmin_v2/layout/sa_tab.html.twig') }}

    <div class="section__content section__content--p30">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                {{ form_start(form, {'attr': {'class':'form-horizontal', 'id':'sa_tasks_form', 'name':'sa_tasks_form', 'method':'post', 'action':path('superadmin_tasks_add')}}) }}
                    <div class="row form-group fg-m-bottom">
                        <div class="col col-md-2 spa-col-label fg-m-bottom">
                            {{ form_label(form.project, "Projet *", {'label_attr': {'class':'form-control-label spa-label'}}) }}
                        </div>
                        <div class="col-12 col-md-3 fg-m-bottom">
                            {{ form_widget(form.project, {'attr': {'class':'form-control', 'autocomplete':'none'}}) }}
                        </div><div class="col col-md-5"></div>
                        <div class="offset-md-2 col-md-3 fm-error" id="error-task-project"></div>
                    </div>

                    <div class="row form-group fg-m-bottom">
                        <div class="col col-md-2 spa-col-label fg-m-bottom">
                            {{ form_label(form.tracker, "Tracker *", {'label_attr': {'class':'form-control-label spa-label'}}) }}
                        </div>
                        <div class="col-12 col-md-3 fg-m-bottom">
                            {{ form_widget(form.tracker, {'attr': {'class':'form-control', 'autocomplete':'none'}}) }}
                        </div><div class="col col-md-5"></div>
                        <div class="offset-md-2 col-md-3 fm-error" id="error-task-tracker"></div>
                    </div>

                    <div class="row form-group fg-m-bottom">
                        <div class="col col-md-2 spa-col-label fg-m-bottom">
                            {{ form_label(form.subject, "Sujet *", {'label_attr': {'class':'form-control-label spa-label'}}) }}
                        </div>
                        <div class="col-12 col-md-8 fg-m-bottom">
                            {{ form_widget(form.subject, {'attr': {'class':'form-control', 'autocomplete':'none'}}) }}
                        </div>
                        <div class="offset-md-2 col-md-8 fm-error" id="error-task-subject"></div>
                    </div>

                    <div class="row form-group fg-m-bottom">
                        <div class="col col-md-2 spa-col-label fg-m-bottom">
                            {{ form_label(form.description, "Description", {'label_attr': {'class':'form-control-label spa-label'}}) }}
                        </div>
                        <div class="col-12 col-md-8 fg-m-bottom">
                            {{ form_widget(form.description, {'attr': {'class':'form-control', 'style':'resize:none;height:120px;'}}) }}
                        </div>
                        <div class="offset-md-2 col-md-8 fm-error" id="error-task-description"></div>
                    </div>

                    <div class="row form-group fg-m-bottom">
                        <div class="col col-md-2 spa-col-label fg-m-bottom">
                            {{ form_label(form.status, "Statut *", {'label_attr': {'class':'form-control-label spa-label'}}) }}
                        </div>
                        <div class="col-12 col-md-3 fg-m-bottom">
                            {{ form_widget(form.status, {'attr': {'class':'form-control', 'autocomplete':'none'}}) }}
                        </div>
                        <div class="offset-md-1 col col-md-2 spa-col-label fg-m-bottom">
                            {{ form_label(form.startDate, "Début", {'label_attr': {'class':'form-control-label spa-label'}}) }}
                        </div>
                        <div class="col-12 col-md-2 fg-m-bottom">
                            {{ form_widget(form.startDate, {'attr': {'class':'form-control', 'autocomplete':'none'}}) }}
                        </div>
                        <div class="offset-md-2 col-md-3 fm-error" id="error-task-status"></div>
                        <div class="offset-md-2 col-md-3 fm-error" id="error-task-start-date"></div>
                    </div>

                    <div class="row form-group fg-m-bottom">
                        <div class="col col-md-2 spa-col-label fg-m-bottom">
                            {{ form_label(form.priority, "Priorité *", {'label_attr': {'class':'form-control-label spa-label'}}) }}
                        </div>
                        <div class="col-12 col-md-3 fg-m-bottom">
                            {{ form_widget(form.priority, {'attr': {'class':'form-control', 'autocomplete':'none'}}) }}
                        </div>
                        <div class="offset-md-1 col col-md-2 spa-col-label fg-m-bottom">
                            {{ form_label(form.dueDate, "Echéance", {'label_attr': {'class':'form-control-label spa-label'}}) }}
                        </div>
                        <div class="col-12 col-md-2 fg-m-bottom">
                            {{ form_widget(form.dueDate, {'attr': {'class':'form-control', 'autocomplete':'none'}}) }}
                        </div>
                        <div class="offset-md-2 col-md-3 fm-error" id="error-task-priority"></div>
                        <div class="offset-md-2 col-md-3 fm-error" id="error-task-due-date"></div>
                    </div>

                    <div class="row form-group fg-m-bottom">
                        <div class="col col-md-2 spa-col-label fg-m-bottom">
                            {{ form_label(form.assignedTo, "Assigné à", {'label_attr': {'class':'form-control-label spa-label'}}) }}
                        </div>
                        <div class="col-12 col-md-3 fg-m-bottom">
                            {{ form_widget(form.assignedTo, {'attr': {'class':'form-control', 'autocomplete':'none'}}) }}
                        </div>
                        <div class="offset-md-1 col col-md-2 spa-col-label fg-m-bottom">
                            {{ form_label(form.estimatedTime, "Temps estimé", {'label_attr': {'class':'form-control-label spa-label'}}) }}
                        </div>
                        <div class="col-12 col-md-2 fg-m-bottom">
                            {{ form_widget(form.estimatedTime, {'attr': {'class':'form-control', 'autocomplete':'none'}}) }}
                        </div>
                        <div class="offset-md-2 col-md-3 fm-error" id="error-task-assigned-to"></div>
                        <div class="offset-md-2 col-md-3 fm-error" id="error-task-estimated-time"></div>
                    </div>

                    <div class="row form-group fg-m-bottom">
                        <div class="col col-md-2 spa-col-label fg-m-bottom">
                            {{ form_label(form.category, "Catégorie", {'label_attr': {'class':'form-control-label spa-label'}}) }}
                        </div>
                        <div class="col-12 col-md-3 fg-m-bottom">
                            {{ form_widget(form.category, {'attr': {'class':'form-control', 'autocomplete':'none'}}) }}
                        </div>
                        <div class="offset-md-1 col col-md-2 spa-col-label fg-m-bottom">
                            {{ form_label(form.percentDone, "% réalisé", {'label_attr': {'class':'form-control-label spa-label'}}) }}
                        </div>
                        <div class="col-12 col-md-2 fg-m-bottom">
                            {{ form_widget(form.percentDone, {'attr': {'class':'form-control', 'autocomplete':'none'}}) }}
                        </div>
                        <div class="offset-md-2 col-md-3 fm-error" id="error-task-category"></div>
                        <div class="offset-md-2 col-md-3 fm-error" id="error-task-percent-done"></div>
                    </div>

                    <div class="row form-group fg-m-bottom">
                        <div class="col col-md-2 spa-col-label fg-m-bottom">
                            <label class="form-control-label spa-label" for="form_category">Fichiers</label>
                        </div>
                        <div class="col-12 col-md-3 fg-m-bottom">
                            <a href="javascript:;" style="padding-top:5px;display:none;" id="add_another_file">Ajouter un autre fichier</a>
                            <label for="fileToUpload" class="btn btn-secondary btn-sm btn-block" id="files_btn"{#% if kbis_filename != false %} style="display:none;"{% endif % #}>Parcourir</label>
							<input type="file" class="form-control" name="fileToUpload" id="fileToUpload" value="" onchange="saveFile();" style="opacity:0;">
                        </div>
                        <div class="col col-md-5 spa-col-label fg-m-bottom text-left" style="padding-top:2px;" id="pj_tasks_files"></div>
                        {# <div class="offset-md-2 col-md-3 fm-error" id="error-task-category55">vwwxb</div>
                        <div class="offset-md-2 col-md-3 fm-error" id="error-task-percentdone55">wxb wbxc wxcb</div> #}
                    </div>


                    <div class="row form-group">
                        <div class="col-12 col-md-4" id="hidden_files">
							<input type="hidden" name="form[file_1]" id="form_file_1" value="">
							<input type="hidden" name="form[tmp_name_1]" id="form_tmp_name_1" value="">
							<input type="hidden" name="form[files_nbr]" id="form_files_nbr" value="1">
                        </div>
                        <div class="col-12 col-md-3" style="padding-top:1px;">
                            <button type="button" id="sa_tasks_add" class="btn btn-info btn-sm btn-block">
                                <i class="zmdi zmdi-plus"></i>&nbsp; Ajouter
                            </button>
                        </div>
                    </div>
                {{ form_end(form) }}
                </div>
            </div>

            {{ include('superadmin_v2/layout/sa_footer.html.twig') }}
        </div>
    </div>

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('superadmin_v2/js/moment.js') }}"></script>
    <script src="{{ asset('superadmin_v2/js/bootstrap-datetimepicker.js') }}"></script>
    <script src="{{ asset('superadmin_v2/js/locales/bootstrap-datetimepicker.fr.js') }}" charset="utf-8"></script>
    {# <script src="{{ asset('superadmin_v2/js/tinymce.min.js') }}"></script> 
    <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script> #}
    TinyMCE editor
    <script type="text/javascript">
    // <![CDATA[
    $(document).ready(function(){
        $('form#sa_tasks_form #form_project').find('option:first').remove();
        $('form#sa_tasks_form #form_tracker').find('option:first').remove();
        $('form#sa_tasks_form #form_status').find('option:first').remove();
        $('form#sa_tasks_form #form_priority').find('option:first').remove();
        $('form#sa_tasks_form #form_assignedTo').find('option:first').remove();
        $('form#sa_tasks_form #form_category').find('option:first').remove();
        $('form#sa_tasks_form #form_percentDone').find('option:first').remove();

        /*tinymce.init({
            selector: 'textarea',
            plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount checklist mediaembed casechange export formatpainter pageembed linkchecker a11ychecker tinymcespellchecker permanentpen powerpaste advtable advcode editimage tinycomments tableofcontents footnotes mergetags autocorrect typography inlinecss',
            //toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table mergetags | addcomment showcomments | spellcheckdialog a11ycheck typography | align lineheight | checklist numlist bullist indent outdent | emoticons charmap | removeformat',
            toolbar: 'blocks | bold italic underline strikethrough | link image table mergetags | addcomment showcomments | spellcheckdialog a11ycheck typography | align lineheight | checklist numlist bullist indent outdent | emoticons charmap | removeformat',
            tinycomments_mode: 'embedded',
            tinycomments_author: 'Author name',
            mergetags_list: [
                /*{ value: 'First.Name', title: 'First Name' },
                { value: 'Email', title: 'Email' },****************************
            ]
        });*/

        $(document).on('focus', 'form#sa_tasks_form input#form_startDate', function() {
            $('form#sa_tasks_form input#form_startDate').datetimepicker({
                locale: 'fr',
                format: 'DD-MM-YYYY'
            });
        });
        $(document).on('focus', 'form#sa_tasks_form input#form_dueDate', function() {
            $('form#sa_tasks_form input#form_dueDate').datetimepicker({
                locale: 'fr',
                format: 'DD-MM-YYYY'
            });
        });
        /* $("form#sa_tasks_form input#form_dueDate").on("dp.change", function (e) {
            $('form#sa_tasks_form input#form_startDate').data("DateTimePicker").maxDate(e.date);
        }); */

        $(document).on('keypress', 'form#sa_tasks_form #form_estimatedTime', function(e) {
            if ( e.which!=8 && e.which!=0 && (e.which<48 || e.which>57)) {
                return false;
            }
        });

        $(document).on('click', 'form#sa_tasks_form #sa_tasks_add', function(){
            var ckeck = 0;

            if ($('form#sa_tasks_form #form_project').val() == '0') {
                ckeck += 1;
                $('#error-task-project').html('Veuillez choisir le projet');
                $('form#sa_tasks_form #form_project').addClass('is-invalid').on('change', function(){
                    $(this).removeClass('is-invalid');
                    $('#error-task-project').html('');
                });
            }
            if ($('form#sa_tasks_form #form_tracker').val() == '0') {
                ckeck += 1;
                $('#error-task-tracker').html('Veuillez choisir le tracker');
                $('form#sa_tasks_form #form_tracker').addClass('is-invalid').on('change', function(){
                    $(this).removeClass('is-invalid');
                    $('#error-task-tracker').html('');
                });
            }
            if ($('form#sa_tasks_form #form_subject').val().length == 0) {
                ckeck += 1;
                $('#error-task-subject').html('Veuillez insérer le sujet');
                $('form#sa_tasks_form #form_subject').addClass('is-invalid').on('focus', function(){
                    $(this).removeClass('is-invalid');
                    $('#error-task-subject').html('');
                });
            }
            if ($('form#sa_tasks_form #form_status').val() == '0') {
                ckeck += 1;
                $('#error-task-status').html('Veuillez choisir le statut');
                $('form#sa_tasks_form #form_status').addClass('is-invalid').on('change', function(){
                    $(this).removeClass('is-invalid');
                    $('#error-task-status').html('');
                });
            }
            if ($('form#sa_tasks_form #form_priority').val() == '0') {
                ckeck += 1;
                $('#error-task-priority').html('Veuillez choisir la priorité');
                $('form#sa_tasks_form #form_priority').addClass('is-invalid').on('change', function(){
                    $(this).removeClass('is-invalid');
                    $('#error-task-priority').html('');
                });
            }

            if (ckeck == 0) {
                $('form#sa_tasks_form').submit();
                return true;
            } else {
                return false;
            }
        });

        $(document).on('click', 'a#add_another_file', function(){
            let files_nbr = $('input#form_files_nbr').val();
            files_nbr++;
            $('#files_btn').show();
            $('a#add_another_file').hide();
            $('#hidden_files').prepend('<input type="hidden" name="form[file_' + files_nbr + ']" id="form_file_' + files_nbr + '" value=""><input type="hidden" name="form[tmp_name_' + files_nbr + ']" id="form_tmp_name_' + files_nbr + '" value="">');
            $('input#form_files_nbr').val(files_nbr);
        });
    });
    // ]]>

    function saveFile(){
        var inputFile = document.getElementById('fileToUpload');
        var file = inputFile.files[0];
        var data = new FormData();
        data.append('doc', file, file.name);
        $.ajax({
            url: "{{ path('superadmin_tasks_save_file') }}",
            type: "POST",
            data: data,
            processData: false,
            contentType: false,
            cache: false,
            success : function(response){
				if (response.error != '') {
					$('#error-artisan-kbis').html(response.error);
				} else {
                    $('#files_btn').hide();
                    $('a#add_another_file').show();
                    let files_nbr = $('input#form_files_nbr').val();
                    $('input#form_file_' + files_nbr).val(response.name);
                    $('input#form_tmp_name_' + files_nbr).val(response.tmp_name);
                    $('#pj_tasks_files').append('<span>' + response.tmp_name + '</span> <a href="javascript:void(0);" onclick="removeFile(\'' + response.name + '\',' + files_nbr + ');"><i class="zmdi zmdi-delete text-danger" style="font-size:16px;"></i></a><br>');
				}
            },
            error : function(e){
            }
        });
    }

    function removeFile(tmp_file,nbr){
        if (confirm("Êtes-vous sûr ?")) {
            $.ajax({
				url: "{{ path('superadmin_tasks_remove_file') }}",
                type : 'POST',
                data : {tmp_file:tmp_file},
                dataType : 'json',
                success : function(response){
                    if (response.result) {
                        $('input#form_file_' + nbr).remove();
                        $('input#form_tmp_name_' + nbr).remove();
                        $('#pj_tasks_files').html('');
                    }
                },
                error : function(e){
                }
            });
        }
    }
    </script>
{% endblock %}