{% extends parent_template %}

{% block head %}
    {{ parent() }}
{% endblock %}
{% block title %}Ticket Template{% endblock %}


{% block body %}
        <div class="container" id="main-app-content">

            {#{% include 'App/Default/Panel/includes/header.include.html.twig' %}#}
            {#{% include 'App/Default/Panel/includes/menu.include.html.twig' %}#}

            <!-- START CONTENT -->
            <section id="content" class="content">
                <div class="row">
                    <div class="col s12">
                        <h1>Raison</h1>
                    </div>
                </div>

                <div class="row">
                    <div class="col s12">
                        {% if reason is null %}
                            {{ include('FormForgeBundle:FormForgeReason:create.html.twig') }}
                        {% else %}
                            {{ include('FormForgeBundle:FormForgeReason:update.html.twig') }}
                        {% endif %}
                    </div>
                </div>
                <div class="row" id="container-new-element" style="display:none;" >
                    <div class="col s12 card widget__card" style="padding: 0;">
                        <form class="col s12" style="padding:10px 0;">
                            <input type="hidden" id="_csrf_token" name="_csrf_token" value="{{ csrf_token('support_ticket_new_reason') }}" />
                            <div class="input-field col s10">
                                <input placeholder="Name" id="customFieldName" type="text" class="validate">
                                <label>Label</label>
                            </div>
                            <div class="input-field col s2">
                                <div class="switch">
                                    <label>
                                        Not required
                                        <input type="checkbox" id="check-required" name="required-field">
                                        <span class="lever"></span>
                                        Required
                                    </label>
                                </div>
                            </div>
                            <div class="input-field col s12">
                                <select id="customFieldType">
                                    <option value="0">TEXT </option>
                                    <option value="1">EMAIL </option>
                                    <option value="2">PHONE </option>
                                    <option value="3">DATE </option>
                                    <option value="4">TIME </option>
                                    <option value="5">DECIMAL </option>
                                    <option value="6">SELECT </option>
                                    <option value="7">TEXTAREA </option>
                                    <option value="8">RADIOGROUP </option>
                                    <option value="9">CHECKBOX </option>
                                    <option value="10">SWITCH </option>
                                    <option value="11">HTML </option>
                                    <option value="12">FILE </option>
                                </select>
                                <label>Type</label>
                            </div>
                        </form>
                    </div>

                    <div class="row">
                        <div class="col s12 " style="padding: 0;" id="container-new-element-commands">
                            <a class="waves-effect waves-light btn" href="javascript:addField();"><i class="material-icons left">check</i>Validate</a>
                            <a class="waves-effect waves-light btn" href="javascript:hide_new_element_container();"><i class="material-icons left">cancel</i>Cancel</a>
                        </div>
                    </div>
                </div>

                <div class="row" id="container-edit-element" style="display:none;"></div>
            </section>
        </div>
<!-- Modal Structure -->
    <div id="modal-edit-value" class="modal"></div>


{% endblock %}


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

    <script>
        $('#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").css("display",'none');
        }

        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){
            {#let url = '{{ path('form_forge_update_reason',{'publicKey':'publicKey'}) }}';#}
            {#url = url.replace('publicKey', $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()

                },
                success: function (data) {
                    $('#ticket-reason').html(data);
                    cancel_value()
                }
            })

        }

        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')
                },
                success: function (data) {
                    $(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(),

                },
                success: function (data) {
                    $('#template-row-'+$publicKey).html(data);
                    $('select').formSelect();
                    hide_edit_field();
                }
            })

        }

        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();
                },
            })
        }

        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 cancel_value() {
            $('#modal-edit-value').modal('close');

        }

    </script>
{% endblock %}