{% extends parent_template %}

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

{% block head %}
    {{ parent() }}
    <style>
        #sortable .sortable-child:hover { background-color: #9ac1f9;}
    </style>
{% endblock %}

{% block dashbody %}
    <!-- START CONTENT -->
    <section>
        <div class="row">
            <div class="col s12">
                {% if reason is null %}
                    <h2>{{ 'form_forge.reason.title.new_reason'|trans }}</h2>
                {% else %}
                    <h2>{{ 'form_forge.reason.legend.reason'|trans }} : {{ reason.name.getStrValue(lang) }}</h2>
                {% endif %}
            </div>
        </div>

        <div class="row">
            <div class="col s12">
                {% if reason is null %}
{#                    {{ include('FormForgeBundle:FormForgeReason:create.html.twig') }}#}
                    {% include '@FormForge/FormForgeReason/create.html.twig' %}
                {% else %}
{#                    {{ include('FormForgeBundle:FormForgeReason:update.html.twig') }}#}
                    {% include '@FormForge/FormForgeReason/update.html.twig' %}
                {% endif %}
            </div>
        </div>
        <fieldset id="container-new-element" style="margin:10px;display:none;">
            <legend>Fields:</legend>
            <div class="row">
                <div class="col s12">
                    <form class="col s12">
                        <input type="hidden" id="_csrf_token" name="_csrf_token" value="{{ csrf_token('support_ticket_new_reason') }}" />
                        <div class="row">
                            <div class="col s12 right-align">
                                <div class="switch">
                                    <label>
                                        {{ 'form_forge.field.not_required'|trans }}
                                        <input type="checkbox" id="check-required" name="required-field">
                                        <span class="lever"></span>
                                        {{ 'form_forge.field.required'|trans }}
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input-field col s12 m9">
                                <input placeholder="Name" id="customFieldName" type="text" class="validate">
                                <label for="customFieldName">{{ 'form_forge.default.label'|trans }}</label>
                            </div>
                            <div class="col s12 m3">
                                <div class="row">
                                    <div class="input-field col s3">
                                        <select id="small-class-create" name="small-class-create">
                                            {% for i in 12..1  %}
                                                <option value="s{{ i }}">s{{ i }}</option>
                                            {% endfor %}
                                        </select>
                                        <label for="small-class-create">Small</label>
                                    </div>
                                    <div class="input-field col s3">
                                        <select id="medium-class-create" name="medium-class-create">
                                            {% for i in 12..1  %}
                                                <option value="m{{ i }}">m{{ i }}</option>
                                            {% endfor %}
                                        </select>
                                        <label for="medium-class-create">Medium</label>
                                    </div>
                                    <div class="input-field col s3">
                                        <select id="large-class-create" name="large-class-create">
                                            {% for i in 12..1  %}
                                                <option value="l{{ i }}">l{{ i }}</option>
                                            {% endfor %}
                                        </select>
                                        <label for="large-class-create">Large</label>
                                    </div>
                                    <div class="input-field col s3">
                                        <select id="x-large-class-creat" name="x-large-class-creat">
                                            {% for i in 12..1  %}
                                                <option value="xl{{ i }}">xl{{ i }}</option>
                                            {% endfor %}
                                        </select>
                                        <label for="x-large-class-creat">XLarge</label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="input-field col s12 m9">
                                <select id="customFieldType">
                                    {% for type in fieldsType %}
                                        <option value="{{ type.id }}">{{ type.backTemplate.fieldType|upper }}</option>
                                    {% endfor %}
                                </select>
                                <label for="customFieldType">Type</label>
                            </div>
                        </div>

                        <div class="row">
                            <div class="input-field col s12 m9">
                                <input placeholder="Tag" id="custom-field-tag" type="text" class="validate">
                                <label for="custom-field-tag">{{ 'form_forge.field.mapping_tag'|trans }}</label>
                            </div>
                        </div>

                        <div class="row">
                            <div class="input-field col s12 m9" id="field_parameter" style="display:none;">
                                <input id="custom-field-parameter-create" type="text" class="validate">
                                <label for="custom-field-parameter-create">{{ 'form_forge.field.label.get_parameter_name'|trans }}</label>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div class="col s12" style="padding: 0;" id="container-new-element-commands">
                <a class="waves-effect waves-light btn btn-background" href="javascript:addField();"><i class="material-icons left">check</i>{{ 'form_forge.default.validate'|trans }}</a>
                <a class="waves-effect waves-light btn btn-background" href="javascript:hide_new_element_container();"><i class="material-icons left">cancel</i>{{ 'form_forge.default.cancel'|trans }}</a>
            </div>
        </fieldset>
        <div class="row">
            <div class="col s12" id="container-edit-element" style="display:none;"></div>
        </div>
    </section>
    <div id="test-order"></div>
    <!-- Modal edit value Structure -->
    <div id="modal-edit-value" class="modal"></div>

    <!-- Modal edit lang value Structure -->
    <div id="modal-edit-lang-value" class="modal"></div>

{% endblock %}


{% block scripts %}
    {{ parent() }}

    <script>
        $(function () {
            init_material_component();

            $('#sortable').sortable({
                connectWith: "#sortable",
                // cancel: ".disable-sorting",
                handle: ".handle-col",
                update: function(event, ui) {
                    // Array that hold the order position...
                    var order = [];
                    // Loop trough each div have class sortable-child in sortable parent
                    $('#sortable .sortable-child').each( function(e) {
                        // Add each div with class sortable-child position to the array...
                        order.push( $(this).attr('id')  + '=' + ( $(this).index() + 1 ) );
                    });

                    $.ajax({
                        url: "{{ path('form_forge_update_order_field') }}",
                        type: 'POST',
                        data: {
                            _csrf_token: "{{ csrf_token('Update_Order_Fields') }}",
                            fields_order: order
                        },
                        success: function (data) {
                            location.reload()
                        }
                    });
                }
            });
        });

        function init_material_component(){
            $('select').formSelect();
            $('#modal-edit-value').modal();
        }

        // let customfieldType = $('#customFieldType');

        $('#customFieldType').on('change', function () {
            // console.log($('#customFieldType option:selected').text());
            if ($('#customFieldType option:selected').text().toLowerCase() === 'get-parameter'){
                $('#field_parameter').show("slow")
            }else{
                $('#field_parameter').hide("slow");
            }
        });

        $('#name_en, #name_fr, #name_es').on('keydown mousedown mouseout click change', function () {
            $('#name_en').val()!=='' && $('#name_fr').val()!=='' && $('#name_es').val()!=='' ? $('#send-form-forge').attr('disabled', false ):$('#send-form-forge').attr('disabled', true);
        });

        function show_new_element_container(){
            $("#container-new-element").show("slow");
            var top = $("#container-new-element-commands").offset().top;
            $('html,body').animate({scrollTop: top}, 1000);
        }


        function hide_new_element_container(){
            $("#customFieldName").val('');
            $("#customFieldType").val(0);
            $("#container-new-element").hide("slow");
        }

        function edit_reason($publickey) {
            let url = '{{ path('form_forge_edit_reason',{'publicKey':'publicKey'}) }}';
            url = url.replace('publicKey', $publickey);

            $.ajax({
                url: url,
                type: 'POST',
                data:  {
                    reason: $publickey,
                },
                success: function (data) {
                    $('#modal-edit-value').html(data);
                    $('#modal-edit-value').modal('open');
                },
            })

        }

        function update_reason($publicKey){
            $.ajax({
                url: '{{ path('form_forge_update_reason_name') }}',
                type: 'POST',
                data:  {
                    publicKey: $publicKey,
                    name_fr: $('#update_name_fr').val(),
                    name_en: $('#update_name_en').val(),
                    name_es: $('#update_name_es').val(),
                    redirectURL: $('#update_redirectURL').val(),
                    tag: $('#tag').val()
                },
                success: function (data) {
                    $('#ticket-reason').html(data);
                    cancel_value();
                    M.updateTextFields();
                }
            })
        }

        function addField() {
            $.ajax({
                url: '{{ path('form_forge_create_field') }}',
                type: 'POST',
                data:  {
                    reason: '{% if reason is not null %}{{ reason.publickey }}{% endif %}',
                    customFieldName: $('#customFieldName').val(),
                    customFieldType: $('#customFieldType').val(),
                    customFieldRequire: $('#check-required').is(':checked'),
                    customfFieldTag: $('#custom-field-tag').val(),
                    smallClass: $('#small-class-create').val(),
                    mediumClass: $('#medium-class-create').val(),
                    largeClass: $('#large-class-create').val(),
                    xLargeClass: $('#x-large-class-creat').val(),
                    get_parameter: $('#custom-field-parameter-create').val()
                },
                success: function (data) {
                    location.reload();
                    // $(data).appendTo('.ticketTemplate');
                    // $('select').formSelect();
                    // hide_new_element_container();
                }
            })

        }

        function show_edit_field(){
            $("#container-edit-element").show("slow");
            var top = $("#container-edit-element-commands").offset().top;
            $('html,body').animate({scrollTop: top}, 1000);
        }


        function hide_edit_field(){
            $("#edit-field").val('');
            $("#custom-field-edit-type").val(0);
            $("#container-edit-element").css("display",'none');
        }

        function update_field() {
            $publicKey = $('#_public-key').val();

            $.ajax({
                url: '{{ path('form_forge_update_field') }}',
                type: 'POST',
                data:  {
                    publicKey: $publicKey,
                    customFieldName: $('#edit-field').val(),
                    customFieldType: $('#custom-field-edit-type').val(),
                    customFieldRequire: $('#check-edit-required').is(':checked'),
                    customfFieldTag: $('#edit-custom-field-tag').val(),
                    smallClass: $('#small-class').val(),
                    mediumClass: $('#medium-class').val(),
                    largeClass: $('#large-class').val(),
                    xLargeClass: $('#x-large-class').val(),
                    get_parameter: $('#custom-field-parameter').val()
                },
                success: function (data) {
                    // $('#template-row-'+$publicKey).html(data);
                    // $('select').formSelect();
                    // hide_edit_field();
                    location.reload()
                }
            })

        }

        function editField($publicKey){
            let url = '{{ path('form_forge_edit_field',{'publicKey':'publicKey'}) }}';
            url = url.replace('publicKey', $publicKey);
            $.ajax({
                url: url,
                type: 'GET',
                data:'',
                success: function (data) {
                    $('#container-edit-element').html(data);
                    $('select').formSelect();
                    show_edit_field();
                }
            })

        }

        function add_values(){

            $.ajax({
                url: '{{ path('form_forge_add_values_field') }}',
                type: 'POST',
                data:  {
                    publicKey: $('#add-field-value').attr('data-publicKey'),
                    customFieldValue: $('#add-field-value').val(),
                },
                success: function (data) {
                    $('#field-values').html(data);
                    $('select').formSelect();
                    $('#add-field-value').val('');
                }
            });

        }

        function edit_value($publickey) {
            $.ajax({
                url: '{{ path('form_forge_edit_values_field') }}',
                type: 'POST',
                data:  {
                    customFieldValuePK: $publickey,
                },
                success: function (data) {
                    $('#modal-edit-value').html(data);
                    $('#modal-edit-value').modal('open');
                },
            })
        }

        function update_value($publickey) {
            $.ajax({
                url: '{{ path('form_forge_update_values_field') }}',
                type: 'POST',
                data:  {
                    customFieldValuePK: $publickey,
                    customFieldValuelabel: $('#edit-field-value').val()
                },
                success: function (data) {
                    $('#field-values').html(data);
                    $('select').formSelect();
                    $('#modal-edit-value').modal('close');

                }
            })
        }

        function deleteField($publicKey) {

            $.ajax({
                url: '{{ path('form_forge_remove_field') }}',
                type: 'POST',
                data:  {
                    formFieldPK: $publicKey,
                },
                success: function (data) {
                    // $('#container-field-' + $publicKey).remove();
                    location.reload()
                },
            })
        }

        function delete_value($publicKey) {
            $.ajax({
                url: '{{ path('form_forge_remove_values_field') }}',
                type: 'POST',
                data:  {
                    customFieldValue: $publicKey,
                },
                success: function (data) {
                    $('#field-values').html(data);
                    $('select').formSelect();
                    $('#add-field-value').val('');
                }
            })
        }

        function new_linguistica($id, $class){
            $.ajax({
                url: '{{ path('new_field_translate') }}',
                type: 'POST',
                data:  {
                    linguisticaId: $id,
                    className: $class
                },
                success: function (data) {
                    $('#modal-edit-lang-value').html(data);
                    $('#modal-edit-lang-value').modal('open');
                    M.updateTextFields();
                },
            });
        }

        function new_linguistica_value($id, $class){
            $.ajax({
                url: '{{ path('form_forge_new_value_field') }}',
                type: 'POST',
                data:  {
                    linguisticaId: $id,
                    className: $class
                },
                success: function (data) {
                    $('#modal-edit-lang-value').html(data);
                    $('#modal-edit-lang-value').modal('open');
                    M.updateTextFields();
                },
            });
        }
        
        function cancel_value() {
            $('#modal-edit-value').modal('close');

        }

        function cancel_modal_lang() {
            $('#modal-edit-lang-value').modal('close');

        }

    </script>
{% endblock %}